/* Scoped to the room-ticket page; uses the existing GCC theme. */
.rt-dashboard { color: var(--color-text-primary, var(--text, #e5e7eb)); max-width: 1600px; margin: 0 auto; padding: 8px; }
.rt-header, .rt-toolbar, .rt-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rt-header { margin-bottom: 22px; }
.rt-header h1 { font-size: clamp(24px, 3vw, 34px); margin: 4px 0 10px; }
.rt-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rt-eyebrow { color: var(--color-accent, #4f7ef7); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.rt-muted, .rt-card p, .rt-dashboard small { color: var(--color-text-secondary, var(--text2, #9299b8)); }
.rt-muted, .rt-quality, .rt-card p { font-size: 13px; line-height: 1.6; }
.rt-panel, .rt-card { background: var(--color-bg-secondary, var(--bg2, #171c2b)); border: 1px solid var(--color-border, #343c50); border-radius: 14px; padding: 20px; }
.rt-panel h2, .rt-card h2 { font-size: 15px; margin: 0 0 16px; }
.rt-dashboard fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
/* No desktop os dois wrappers abaixo são transparentes (`display: contents`),
   então a grade de filtros continua exatamente a mesma de sempre. No celular
   viram blocos de verdade, e o de busca fica sempre visível. */
.rt-filter-more, .rt-filter-buttons { display: contents; }
.rt-filters-toggle { display: none; }
.rt-dashboard legend { font-weight: 600; margin-bottom: 14px; }
.rt-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; }
.rt-filters label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.rt-dashboard input:not([type=checkbox]), .rt-dashboard select { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px; border-radius: 8px; background: var(--color-bg-primary, var(--bg, #111827)); color: inherit; border: 1px solid var(--color-border, #454d61); font: inherit; min-height: 42px; }
.rt-dashboard button { font: inherit; color: inherit; border: 1px solid var(--color-border, #454d61); background: var(--color-bg-secondary, var(--bg2, #171c2b)); padding: 10px 14px; border-radius: 8px; cursor: pointer; min-height: 42px; }
.rt-dashboard button:hover:not(:disabled) { border-color: var(--color-accent, #4f7ef7); }
.rt-dashboard button:disabled { opacity: .5; cursor: default; }
.rt-dashboard button[type=submit], .rt-header-actions > button:first-child { background: var(--color-accent, #315ed0); color: #fff; border-color: transparent; }
.rt-dashboard .rt-tv-button, .rt-dashboard .rt-primary { background: var(--color-yellow, #f2c522); color: #101521; border-color: var(--color-yellow, #f2c522); font-weight: 700; }
.rt-dashboard :focus-visible { outline: 3px solid var(--color-accent, #6e9aff); outline-offset: 3px; }
.rt-toolbar { margin: 16px 0; font-size: 13px; }
.rt-toolbar-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rt-toolbar-controls label { display: inline-flex; align-items: center; gap: 7px; }

/* Monitoramento compartilhado: estado de conexão e preferências em qualquer tela. */
.rt-monitor-widget { position: fixed; left: 14px; bottom: 14px; z-index: 9998; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--color-border, #343c50); border-radius: 999px; background: var(--color-bg-secondary, #171c2b); box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: 12px; color: var(--color-text-secondary, #9299b8); }
.rt-monitor-widget[hidden] { display: none; }
.rt-monitor-widget-state { width: 9px; height: 9px; border-radius: 50%; background: #8b93a7; flex: none; }
.rt-monitor-widget-state.is-ok { background: #1dd6a1; }
.rt-monitor-widget-state.is-stale, .rt-monitor-widget-state.is-loading, .rt-monitor-widget-state.is-paused { background: #f2c522; }
.rt-monitor-widget-state.is-error, .rt-monitor-widget-state.is-expired { background: #ef6a6a; }
.rt-monitor-widget-label { font-weight: 700; color: var(--color-text-primary, #e5e7eb); }
.rt-monitor-widget button { font: inherit; font-size: 11px; padding: 5px 9px; min-height: 0; border: 1px solid var(--color-border, #454d61); border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.rt-monitor-widget button:hover { border-color: var(--color-accent, #4f7ef7); }

/* Alerta global de novo chamado em qualquer página (fora do modo TV). */
.rt-monitor-alert { position: fixed; top: 18px; right: 18px; z-index: 99999; width: min(430px, calc(100vw - 36px)); display: grid; gap: 6px; padding: 16px 18px; border: 2px solid var(--color-yellow, #f2c522); border-radius: 12px; background: var(--color-bg-secondary, #111827); color: var(--color-text-primary, #fff); box-shadow: 0 20px 60px rgba(0,0,0,.45); animation: rt-alert-in .22s ease-out; }
.rt-monitor-alert-label { color: var(--color-yellow, #f2c522); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.rt-monitor-alert strong { font-size: 26px; }
.rt-monitor-alert-types, .rt-monitor-alert small { color: var(--color-text-secondary, #c2c9da); font-size: 13px; }
.rt-monitor-alert-count, .rt-monitor-alert-sound { font-size: 12px; color: var(--color-text-secondary, #9299b8); }
.rt-monitor-alert-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.rt-monitor-alert-actions button { font: inherit; font-size: 13px; padding: 9px 13px; min-height: 0; border: 1px solid var(--color-border, #3b4660); border-radius: 7px; background: var(--color-bg-primary, #1b2334); color: inherit; cursor: pointer; }
.rt-monitor-alert-actions button:first-child { background: var(--color-yellow, #f2c522); color: #11151f; border-color: var(--color-yellow, #f2c522); font-weight: 800; }
@keyframes rt-alert-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.rt-live { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .8fr); gap: 16px; margin-bottom: 28px; }
.rt-live-ticket { border-top: 3px solid var(--color-yellow, #f2c522); }
.rt-live-heading, .rt-live-meta, .rt-live-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rt-live-heading { justify-content: space-between; }
.rt-live-heading h2 { margin: 4px 0 0; font-size: clamp(30px, 4vw, 52px); }
.rt-live-meta { color: var(--color-text-secondary, #9299b8); font-size: 13px; margin: 14px 0; }
.rt-live-meta strong { color: var(--color-yellow, #f2c522); }
.rt-live-ticket > h3 { margin: 18px 0 8px; font-size: 19px; }
.rt-live-actions { margin-top: 20px; }
.rt-status { display: inline-flex; border-radius: 999px; padding: 7px 11px; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.rt-status--new { color: #8ab1ff; background: rgba(79,126,247,.16); }.rt-status--accepted { color: #43dbad; background: rgba(29,214,161,.14); }
.rt-live-stats { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rt-live-stats .rt-card { display: flex; flex-direction: column; justify-content: center; padding: 16px 18px; }
.rt-live-stats .rt-card h2 { margin-bottom: 6px; color: var(--color-text-secondary, #9299b8); font-size: 12px; text-transform: uppercase; }
.rt-live-stats .rt-card strong { font-size: clamp(20px, 2vw, 28px); }
.rt-analysis-head { margin: 0 0 16px; }
.rt-analysis-head h2 { margin: 3px 0; font-size: 22px; }
.rt-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rt-card strong { display: block; font-size: clamp(19px, 2vw, 28px); overflow-wrap: anywhere; }
.rt-card p { margin: 8px 0 0; }
.rt-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rt-ranking { list-style: none; padding: 0; margin: 0; }
.rt-ranking li + li { margin-top: 8px; }
.rt-ranking button { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 12px; width: 100%; text-align: left; border-color: transparent; padding: 8px; }
.rt-rank-label { overflow-wrap: anywhere; font-size: 13px; }
.rt-ranking meter { grid-column: 1 / -1; width: 100%; height: 13px; }
.rt-ranking meter::-webkit-meter-bar { background: var(--color-bg-primary, #111827); border: 0; }
.rt-ranking meter::-webkit-meter-optimum-value { background: var(--color-accent, #4f7ef7); }
.rt-ranking meter::-moz-meter-bar { background: var(--color-accent, #4f7ef7); }
.rt-dashboard small { display: block; font-size: 12px; margin-top: 4px; }
.rt-table-wrap { overflow-x: auto; }
.rt-dashboard table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.rt-dashboard th, .rt-dashboard td { padding: 12px 10px; border-bottom: 1px solid var(--color-border, #343c50); vertical-align: top; }
.rt-dashboard th { white-space: nowrap; }
.rt-ticket-link { text-align: left; border: 0 !important; padding: 0 !important; color: var(--color-accent, #84aaff) !important; }
.rt-pagination { margin-top: 16px; font-size: 13px; }
.rt-message { padding: 20px; border: 1px solid var(--color-border, #454d61); border-radius: 10px; margin: 16px 0; line-height: 1.6; }
.rt-error { border-color: #e87d7d; }
/* O diálogo de detalhes e o de atendimento são criados no <body>, fora de
   `.rt-dashboard`, por isso precisam de regras próprias: os estilos globais do
   GCC zeram a margem de todos os elementos e o `dialog` nativo depende de
   `margin: auto` para se centralizar. */
#rt-detail { background: var(--color-bg-secondary, #171c2b); color: inherit; border: 1px solid var(--color-border, #454d61); border-radius: 14px; width: min(760px, 92vw); max-width: min(760px, 92vw); max-height: min(88vh, 88dvh); overflow-y: auto; overscroll-behavior: contain; margin: auto; padding: 22px; }
#rt-detail::backdrop { background: rgba(0,0,0,.65); }
#rt-detail .rt-header { margin-bottom: 12px; }
#rt-detail .rt-header h2 { margin: 0; font-size: 18px; }
#rt-detail .rt-header button { font: inherit; min-height: 40px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--color-border, #454d61); background: var(--color-bg-primary, #111827); color: inherit; cursor: pointer; }
#rt-detail :focus-visible { outline: 3px solid var(--color-accent, #6e9aff); outline-offset: 2px; }
#rt-detail h3 { margin: 0 0 12px; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.rt-dashboard dl { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 10px; font-size: 14px; }
.rt-dashboard dd { margin: 0; overflow-wrap: anywhere; }
.rt-description { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.rt-dashboard a { color: var(--color-accent, #84aaff); }
@media (max-width: 1100px) { .rt-cards, .rt-filters { grid-template-columns: repeat(2,minmax(0,1fr)); } .rt-charts { grid-template-columns: 1fr; } .rt-live { grid-template-columns: 1fr; } .rt-live-stats { grid-template-columns: repeat(3, minmax(0,1fr)); grid-template-rows: auto; } }
@media (max-width: 600px) { .rt-cards, .rt-filters { grid-template-columns: 1fr; } .rt-panel, .rt-card { padding: 16px; } .rt-dashboard dl { grid-template-columns: 1fr; } .rt-dashboard dt { font-weight: 600; } }
@media (max-width: 700px) { .rt-live-stats { grid-template-columns: 1fr; } .rt-header-actions { width: 100%; } .rt-header-actions button { flex: 1; } }

/* ── Alternância de visão, atualização e estado de áudio ─────────────────── */
.rt-view-switch { display: inline-flex; gap: 6px; margin: 0 0 18px; padding: 4px; border: 1px solid var(--color-border, #343c50); border-radius: 999px; background: var(--color-bg-secondary, #171c2b); }
.rt-view-switch button { min-height: 34px; padding: 6px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--color-text-secondary, #9299b8); font-size: 13px; }
.rt-view-switch button.is-active { background: var(--color-accent, #4f7ef7); color: #fff; font-weight: 600; }
.rt-refreshing { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--color-text-secondary, #9299b8); }
.rt-refreshing::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent, #4f7ef7); animation: rt-pulse 1s ease-in-out infinite; }
.rt-cache-warning { font-size: 12px; color: var(--color-yellow, #f2c522); border: 1px solid rgba(242,197,34,.4); border-radius: 8px; padding: 6px 10px; }
.rt-sound-state { font-size: 12px; color: var(--color-text-secondary, #9299b8); }
.rt-sound-state[data-sound-state="ready"] { color: var(--color-green, #1dd6a1); }
.rt-sound-state[data-sound-state="blocked"] { color: var(--color-yellow, #f2c522); }
.rt-sound-state[data-sound-state="unavailable"] { color: #e87d7d; }
@keyframes rt-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* ── Kanban ─────────────────────────────────────────────────────────────── */
.rt-kanban-legend { font-size: 12px; color: var(--color-text-secondary, #9299b8); margin: 0 0 12px; }
.rt-kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.rt-kanban-column { background: var(--color-bg-secondary, #171c2b); border: 1px solid var(--color-border, #343c50); border-radius: 12px; padding: 14px; min-width: 0; }
.rt-kanban-column.is-drop-target { border-color: var(--color-accent, #4f7ef7); background: rgba(79,126,247,.07); }
.rt-kanban-column-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 10px; align-items: center; margin-bottom: 12px; }
.rt-kanban-column-head h2 { margin: 0; font-size: 14px; }
.rt-kanban-column--open .rt-kanban-column-head h2 { color: #8ab1ff; }
.rt-kanban-column--progress .rt-kanban-column-head h2 { color: var(--color-yellow, #f2c522); }
.rt-kanban-column--done .rt-kanban-column-head h2 { color: var(--color-green, #1dd6a1); }
.rt-kanban-count { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--color-bg-primary, #111827); border: 1px solid var(--color-border, #343c50); }
.rt-kanban-hint { grid-column: 1 / -1; margin: 0; font-size: 11px; color: var(--color-text-secondary, #9299b8); }
.rt-kanban-cards { display: grid; gap: 10px; min-height: 60px; }
.rt-kanban-empty { margin: 0; padding: 18px 8px; text-align: center; font-size: 12px; color: var(--color-text-secondary, #9299b8); border: 1px dashed var(--color-border, #343c50); border-radius: 10px; }
.rt-kanban-card { background: var(--color-bg-primary, #111827); border: 1px solid var(--color-border, #343c50); border-left: 3px solid var(--color-border, #343c50); border-radius: 10px; padding: 12px; display: grid; gap: 6px; }
.rt-kanban-card:focus-visible { outline: 3px solid var(--color-accent, #4f7ef7); outline-offset: 2px; }
.rt-kanban-card.is-dragging { opacity: .55; }
.rt-kanban-column--open .rt-kanban-card { border-left-color: #8ab1ff; }
.rt-kanban-column--progress .rt-kanban-card { border-left-color: var(--color-yellow, #f2c522); }
.rt-kanban-column--done .rt-kanban-card { border-left-color: var(--color-green, #1dd6a1); }
.rt-kanban-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rt-kanban-card-head strong { font-size: 13px; }
.rt-kanban-room { margin: 0; font-size: 12px; color: var(--color-text-secondary, #9299b8); }
.rt-kanban-room small { display: inline; color: var(--color-yellow, #f2c522); }
.rt-kanban-title { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.rt-kanban-types { margin: 0; font-size: 12px; color: var(--color-text-secondary, #9299b8); }
.rt-kanban-meta { display: flex; gap: 12px; margin: 0; font-size: 11px; }
.rt-kanban-meta div { display: flex; gap: 4px; }
.rt-kanban-meta dt { color: var(--color-text-secondary, #9299b8); }
.rt-kanban-meta dd { margin: 0; }
.rt-kanban-owner { font-size: 12px; padding: 5px 8px; border-radius: 7px; background: rgba(79,126,247,.12); color: var(--color-text, #e8eaf6); overflow-wrap: anywhere; }
.rt-kanban-owner.is-empty { background: transparent; color: var(--color-text-secondary, #9299b8); font-style: italic; }
.rt-kanban-owner-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-secondary, #9299b8); }
.rt-kanban-owner small { display: inline; font-size: 11px; color: var(--color-text-secondary, #9299b8); }
.rt-kanban-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.rt-kanban-actions button { min-height: 32px; padding: 5px 10px; font-size: 12px; border-radius: 7px; }
.rt-kanban-action.is-primary { background: var(--color-accent, #315ed0); border-color: transparent; color: #fff; font-weight: 600; }
.rt-kanban-solution { margin: 0; font-size: 12px; color: var(--color-text-secondary, #9299b8); border-top: 1px dashed var(--color-border, #343c50); padding-top: 6px; overflow-wrap: anywhere; }
.rt-kanban-solution span { text-transform: uppercase; font-size: 10px; letter-spacing: .05em; }
.rt-kanban-more { width: 100%; margin-top: 10px; min-height: 34px; font-size: 12px; }
.rt-status--open { color: #8ab1ff; background: rgba(138,177,255,.14); }
.rt-status--progress { color: var(--color-yellow, #f2c522); background: rgba(242,197,34,.14); }
.rt-status--waiting { color: #ffb066; background: rgba(255,159,67,.16); }
.rt-status--done { color: var(--color-green, #1dd6a1); background: rgba(29,214,161,.14); }
.rt-status--unknown { color: var(--color-text-secondary, #9299b8); background: rgba(146,153,184,.14); }

/* ── Formulário de atendimento e conclusão (fora da área redesenhada) ─────
   Os estilos globais do GCC (styles.css e design-system.css) zeram a margem de
   TODOS os elementos, e o `dialog` nativo depende de `margin: auto` para se
   centralizar. Por isso a centralização é explícita aqui, e não herdada.
   O formulário também precisa sobreviver a um alerta novo sem ser empurrado
   para fora da tela: altura máxima com rolagem interna. */
dialog.rt-action-form {
  background: var(--color-bg-secondary, #171c2b); color: inherit;
  border: 1px solid var(--color-border, #454d61); border-radius: 14px;
  margin: auto; inset: 0; position: fixed; display: none;
  width: min(520px, 92vw); max-width: min(520px, 92vw);
  max-height: min(88vh, 88dvh); overflow: auto; overscroll-behavior: contain;
  padding: 22px;
}
dialog.rt-action-form[open] { display: block; }
dialog.rt-action-form .rt-form { min-height: 0; }
dialog.rt-action-form::backdrop { background: rgba(0,0,0,.66); }
@media (max-width: 640px) {
  dialog.rt-action-form { width: calc(100vw - 24px); max-width: none; padding: 18px; max-height: 92dvh; }
}
.rt-form-detail { display: block; margin-top: 4px; color: var(--color-text-secondary, #9299b8); }
.rt-field input:focus-visible, .rt-field select:focus-visible, .rt-field textarea:focus-visible,
.rt-form-actions button:focus-visible, .rt-form-close:focus-visible {
  outline: 2px solid var(--color-accent, #315ed0); outline-offset: 2px;
}
.rt-form { display: grid; gap: 14px; }
.rt-form-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rt-form-head h2 { margin: 0; font-size: 17px; }
.rt-form-close { font: inherit; min-height: 32px; padding: 5px 12px; font-size: 12px; }
.rt-field { display: grid; gap: 6px; font-size: 13px; }
.rt-field input, .rt-field select, .rt-field textarea { font: inherit; width: 100%; box-sizing: border-box; padding: 10px; border-radius: 8px; border: 1px solid var(--color-border, #454d61); background: var(--color-bg-primary, #111827); color: inherit; }
.rt-field textarea { resize: vertical; min-height: 88px; }
.rt-form-hint { margin: 0; font-size: 12px; color: var(--color-text-secondary, #9299b8); line-height: 1.5; }
.rt-form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rt-form-actions button { font: inherit; min-height: 40px; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--color-border, #454d61); background: var(--color-bg-primary, #111827); color: inherit; cursor: pointer; }
.rt-form-actions .rt-primary { background: var(--color-accent, #315ed0); border-color: transparent; color: #fff; font-weight: 600; }
.rt-form-actions button:disabled { opacity: .55; cursor: default; }
.rt-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.rt-detail-actions button { font: inherit; min-height: 40px; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--color-border, #454d61); background: var(--color-bg-primary, #111827); color: inherit; cursor: pointer; }
.rt-detail-actions .rt-primary { background: var(--color-accent, #315ed0); border-color: transparent; color: #fff; font-weight: 600; }
.rt-detail-history { margin: 12px 0; padding: 14px; border: 1px solid var(--color-border, #343c50); border-radius: 10px; background: var(--color-bg-primary, #111827); font-size: 13px; }
.rt-history-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 8px; }

/* Alerta dentro de um diálogo: a camada superior exige bloco, não float. */
.rt-monitor-alert.is-in-dialog { position: sticky; top: 0; width: auto; margin: 0 0 16px; animation: none; z-index: 2; border-width: 2px; }
.rt-monitor-alert-owner { font-size: 12px; color: var(--color-text-secondary, #9299b8); }
@media (max-width: 900px) { .rt-kanban { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .rt-kanban-column { padding: 12px; } .rt-kanban-actions button { flex: 1; } }

/* ═══════════════════════════════════════════════════════════════════════════
   EXPERIÊNCIA MOBILE DOS CHAMADOS
   ---------------------------------------------------------------------------
   Larguras de referência: 360, 390, 430 e 768 px, além do desktop.

   O limite de 860 px é o MESMO que o JavaScript usa para escolher a lista
   vertical compacta (`RoomTickets.COMPACT_QUERY`). A decisão vem da largura do
   layout: nunca de user-agent, então um celular em paisagem e uma janela de
   desktop reduzida se comportam igual. Abaixo de 860 px valem também as
   regras de área segura e de altura dinâmica da tela.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Faixa de estado: carregando, atualizado, cache, erro e sessão expirada ── */
.rt-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--color-border, #343c50); border-left-width: 3px; border-radius: 8px; background: var(--color-bg-secondary, #171c2b); font-size: 13px; line-height: 1.45; }
.rt-state-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #8b93a7; }
.rt-state-when { margin-left: auto; color: var(--color-text-secondary, #9299b8); font-size: 12px; }
/* Uma só versão da frase por layout: a longa no desktop, a curta no celular. */
.rt-state-short { display: none; }
.rt-state--loading, .rt-state--updating { border-left-color: var(--color-accent, #4f7ef7); }
.rt-state--loading .rt-state-dot, .rt-state--updating .rt-state-dot { background: var(--color-accent, #4f7ef7); animation: rt-pulse 1s ease-in-out infinite; }
.rt-state--ok { border-left-color: var(--color-green, #1dd6a1); }
.rt-state--ok .rt-state-dot { background: var(--color-green, #1dd6a1); }
.rt-state--stale { border-left-color: var(--color-yellow, #f2c522); }
.rt-state--stale .rt-state-dot { background: var(--color-yellow, #f2c522); }
.rt-state--error { border-left-color: #e87d7d; }
.rt-state--error .rt-state-dot { background: #e87d7d; }
.rt-state--expired { border-left-color: #e87d7d; border-style: solid; background: rgba(232,125,125,.08); }
.rt-state--expired .rt-state-dot { background: #e87d7d; }
.rt-state--empty { border-left-color: var(--color-text-secondary, #9299b8); }

/* ── Seções recolhíveis (histórico, recorrências, resumo) ─────────────────── */
.rt-dashboard .rt-disclosure-toggle { display: inline-flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0 0 10px; padding: 10px 14px; text-align: left; font: inherit; font-size: 14px; font-weight: 600; color: var(--color-text-primary, #e5e7eb); background: var(--color-bg-secondary, #171c2b); border: 1px solid var(--color-border, #343c50); border-radius: 10px; cursor: pointer; }
.rt-dashboard .rt-disclosure-toggle:hover { border-color: var(--color-accent, #4f7ef7); }
.rt-disclosure-caret { width: 0; height: 0; flex: none; border-left: 7px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform .15s ease; }
.rt-dashboard .rt-disclosure-toggle[aria-expanded="true"] .rt-disclosure-caret { transform: rotate(90deg); }
.rt-disclosure-body { min-width: 0; }

/* No desktop o toggle não existe e nada fica escondido: o histórico é o
   próprio conteúdo da tela, como sempre foi. */
@media (min-width: 861px) {
  .rt-disclosure-toggle { display: none; }
  .rt-disclosure-body[hidden] { display: block; }
  .rt-filter-more[hidden], .rt-filter-buttons[hidden] { display: contents; }
}
/* `display: contents` mantém a grade de filtros do desktop exatamente igual:
   os sete campos e os dois botões continuam sendo células da mesma grade. */
.rt-search-row, .rt-filter-actions { display: contents; }
.rt-refresh-label-short { display: none; }

/* ── Filtros rápidos de status ────────────────────────────────────────────── */
.rt-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 12px; padding: 2px 2px 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.rt-dashboard .rt-chip { display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 44px; padding: 8px 11px; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--color-text-secondary, #9299b8); background: var(--color-bg-secondary, #171c2b); border: 1px solid var(--color-border, #343c50); border-radius: 999px; cursor: pointer; }
.rt-dashboard .rt-chip[aria-pressed="true"] { color: #fff; background: var(--color-accent, #315ed0); border-color: transparent; }
.rt-chip-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; text-align: center; color: var(--color-text-primary, #e5e7eb); background: rgba(255,255,255,.08); }
.rt-chip[aria-pressed="true"] .rt-chip-count { color: #101521; background: rgba(255,255,255,.82); }
.rt-chip--open .rt-chip-count { color: #8ab1ff; }
.rt-chip--progress .rt-chip-count { color: var(--color-yellow, #f2c522); }
.rt-chip--done .rt-chip-count { color: var(--color-green, #1dd6a1); }
.rt-chip[aria-pressed="true"].rt-chip--open .rt-chip-count,
.rt-chip[aria-pressed="true"].rt-chip--progress .rt-chip-count,
.rt-chip[aria-pressed="true"].rt-chip--done .rt-chip-count { color: #101521; }
.rt-list-scope, .rt-list-note { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: var(--color-text-secondary, #9299b8); }
.rt-list-empty { margin: 0; padding: 22px 14px; text-align: center; font-size: 13px; line-height: 1.6; color: var(--color-text-secondary, #9299b8); border: 1px dashed var(--color-border, #343c50); border-radius: 10px; }
.rt-dashboard .rt-list-more { width: 100%; min-height: 44px; margin-top: 12px; }

/* ── Lista vertical compacta ─────────────────────────────────────────────── */
.rt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rt-item { display: grid; gap: 6px; min-width: 0; padding: 12px 13px; background: var(--color-bg-secondary, #171c2b); border: 1px solid var(--color-border, #343c50); border-left: 3px solid var(--color-border, #343c50); border-radius: 10px; }
.rt-item[data-rt-item] { scroll-margin-top: 72px; }
.rt-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rt-item-room { margin: 0; font-size: 13px; font-weight: 700; color: var(--color-text-primary, #e5e7eb); overflow-wrap: anywhere; }
.rt-item-room small { display: inline; font-size: 11px; color: var(--color-yellow, #f2c522); }
.rt-item-title { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.rt-item-ident { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: 12px; color: var(--color-text-secondary, #9299b8); }
.rt-item-ref { font-family: var(--font-mono, ui-monospace, monospace); }
.rt-item-equip.is-empty { font-style: italic; }
.rt-item-owner { margin: 0; font-size: 12px; line-height: 1.45; padding: 5px 8px; border-radius: 7px; background: rgba(79,126,247,.12); overflow-wrap: anywhere; }
.rt-item-owner.is-empty { background: transparent; font-style: italic; }
.rt-item-owner-label, .rt-item-open-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-secondary, #9299b8); }
.rt-item-owner small { display: inline; font-size: 11px; color: var(--color-text-secondary, #9299b8); }
.rt-item-open { margin: 0; font-size: 12px; color: var(--color-text-secondary, #9299b8); }
.rt-item-solution { margin: 0; padding-top: 6px; font-size: 12px; line-height: 1.45; color: var(--color-text-secondary, #9299b8); border-top: 1px dashed var(--color-border, #343c50); overflow-wrap: anywhere; }
.rt-item-solution span { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.rt-item-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rt-dashboard .rt-item-actions button { flex: 1 1 132px; min-height: 44px; padding: 8px 12px; font: inherit; font-size: 13px; border-radius: 8px; border: 1px solid var(--color-border, #454d61); background: var(--color-bg-primary, #111827); color: inherit; cursor: pointer; }
.rt-dashboard .rt-item-actions button.is-primary { background: var(--color-accent, #315ed0); border-color: transparent; color: #fff; font-weight: 600; }
.rt-dashboard .rt-item-actions button:disabled { opacity: .5; cursor: default; }
.rt-dashboard .rt-item-detail { color: var(--color-accent, #84aaff) !important; }

/* ═══ Layout estreito: lista, filtros, formulários e alertas ═══════════════ */
@media (max-width: 860px) {
  .rt-dashboard { max-width: 100%; padding: 8px 8px calc(78px + env(safe-area-inset-bottom)); padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .rt-header { margin-bottom: 10px; gap: 8px; flex-wrap: nowrap; align-items: center; }
  .rt-header h1 { font-size: 19px; margin: 2px 0 0; }
  .rt-eyebrow { font-size: 10px; }
  /* No celular o modo TV não faz sentido: ele é para a parede, não para a mão.
     A opção continua disponível no desktop. */
  .rt-header-subtitle, .rt-dashboard .rt-tv-button { display: none; }
  .rt-header-actions { width: auto; flex: none; }
  .rt-dashboard .rt-header-actions > button { min-height: 44px; padding: 8px 12px; font-size: 13px; white-space: nowrap; }
  .rt-refresh-label-full { display: none; }
  .rt-refresh-label-short { display: inline; }
  .rt-panel, .rt-card { padding: 14px; border-radius: 12px; }

  /* Faixa de estado em uma linha só: não empurra a lista para fora da dobra. */
  .rt-state { padding: 8px 10px; font-size: 12px; gap: 8px; flex-wrap: nowrap; align-items: center; }
  .rt-state-long { display: none; }
  .rt-state-short { display: inline; font-weight: 600; }
  .rt-state-when { margin-left: auto; flex: none; font-size: 11px; }

  /* Filtros: busca e botão na mesma linha, o resto recolhido. Fonte de 16 px
     para o celular não aumentar o zoom ao focar um campo. */
  .rt-filters { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .rt-filter-more, .rt-filter-buttons { display: grid; gap: 10px; grid-template-columns: 1fr; }
  .rt-filter-more[hidden] { display: none; }
  .rt-search-row { display: flex; gap: 8px; align-items: flex-end; }
  .rt-filters .rt-search { flex: 1 1 0; min-width: 0; }
  .rt-dashboard .rt-filter-submit { flex: none; min-height: 46px; padding: 8px 12px; white-space: nowrap; font-size: 13px; }
  .rt-dashboard .rt-filter-actions { display: flex; gap: 8px; }
  .rt-dashboard .rt-filter-actions button { flex: 0 1 auto; min-height: 44px; }
  .rt-filters label { font-size: 13px; }
  .rt-dashboard input:not([type=checkbox]), .rt-dashboard select { min-height: 46px; font-size: 16px; }
  .rt-dashboard .rt-filters-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 44px; }
  .rt-dashboard .rt-filters-toggle[aria-expanded="true"] { border-color: var(--color-accent, #4f7ef7); color: var(--color-accent, #84aaff); }
  .rt-list-scope, .rt-list-note { overflow-wrap: anywhere; }

  .rt-toolbar { margin: 12px 0; }
  .rt-chips { padding: 2px 2px 6px; }
  .rt-dashboard .rt-chip { font-size: 12px; padding: 8px 10px; }
  .rt-toolbar-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .rt-toolbar-controls label { min-height: 44px; }
  .rt-toolbar-controls button { min-height: 44px; }
  .rt-sound-state { grid-column: 1 / -1; }
  .rt-view-switch { display: flex; width: 100%; margin-bottom: 10px; }
  .rt-dashboard .rt-view-switch button { flex: 1; min-height: 44px; }

  /* A tabela larga não cabe no celular: a lista compacta é a apresentação. */
  .rt-dashboard .rt-table-wrap { display: none; }
  .rt-dashboard .rt-pagination { display: flex; flex-wrap: wrap; gap: 8px; }
  .rt-dashboard .rt-pagination button { flex: 1 1 40%; min-height: 44px; }
  .rt-pagination-info { flex: 1 1 100%; order: 3; text-align: center; font-size: 12px; color: var(--color-text-secondary, #9299b8); }

  .rt-kanban-actions button, .rt-kanban-more { min-height: 44px; }
  .rt-kanban-actions button { flex: 1 1 44%; }

  /* Alerta: cabe na largura do celular, é compacto e tem rolagem própria. Ele
     é temporário (15 s) e dispensável, então nunca vira uma camada permanente
     sobre a lista. Dentro de um diálogo continua no fluxo ( sticky ), sem
     cobrir campos e botões. */
  .rt-monitor-alert { top: calc(6px + env(safe-area-inset-top)); left: max(6px, env(safe-area-inset-left)); right: max(6px, env(safe-area-inset-right)); width: auto; max-width: none; max-height: 34dvh; overflow-y: auto; overscroll-behavior: contain; gap: 3px; padding: 10px 12px; border-radius: 10px; }
  .rt-monitor-alert-label { font-size: 10px; }
  .rt-monitor-alert strong { font-size: 18px; }
  .rt-monitor-alert small { font-size: 12px; }
  /* O tipo e o responsável do alerta abrem no detalhe; no celular o banner
     prioriza sala, número e as ações, para ficar baixo. O estado do áudio
     continua visível na barra de status e no monitor do rodapé. */
  .rt-monitor-alert-types, .rt-monitor-alert-owner, .rt-monitor-alert-sound { display: none; }
  .rt-monitor-alert-count { font-size: 11px; }
  .rt-monitor-alert-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
  .rt-monitor-alert-actions button { min-height: 38px; padding: 6px 4px; font-size: 12px; }
  .rt-monitor-alert.is-in-dialog { position: sticky; top: 0; max-height: 34dvh; }

  /* Monitor flutuante: compacto e sem cobrir o fim da lista — o padding
     inferior do painel reserva o espaço. */
  .rt-monitor-widget { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: calc(8px + env(safe-area-inset-bottom)); flex-wrap: wrap; justify-content: space-between; border-radius: 12px; }
  .rt-monitor-widget button { min-height: 34px; }
}

@media (max-width: 400px) {
  .rt-dashboard { padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); }
  .rt-item { padding: 11px 10px; }
  .rt-item-actions button { flex: 1 1 100%; }
  .rt-chip { padding: 8px 9px; font-size: 12px; }
  .rt-chip-count { min-width: 20px; padding: 1px 6px; }
}

/* Formulário de atendimento: fonte de 16 px (o celular não aumenta o zoom ao
   focar um campo), alvos de 48 px e ações fixas no pé do diálogo, para que
   Confirmar e Cancelar continuem ao alcance com o teclado virtual aberto. */
@media (max-width: 860px) {
  .rt-form { gap: 12px; }
  .rt-field { font-size: 14px; }
  .rt-field input, .rt-field select, .rt-field textarea { min-height: 48px; font-size: 16px; padding: 12px; }
  .rt-field textarea { min-height: 120px; }
  .rt-form-actions { position: sticky; bottom: 0; gap: 10px; margin-top: 4px; padding: 10px 0 2px; background: var(--color-bg-secondary, #171c2b); }
  .rt-form-actions button { flex: 1 1 44%; min-height: 48px; }
  .rt-detail-actions button { flex: 1 1 44%; min-height: 44px; }
  #rt-detail dl { grid-template-columns: 1fr; gap: 2px; }
  #rt-detail dt { font-weight: 600; color: var(--color-text-secondary, #9299b8); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
  #rt-detail dd { margin: 0 0 10px; font-size: 14px; }
}

/* Em telas realmente estreitas os diálogos ocupam a área útil inteira, com
   `100dvh` acompanhando a altura dinâmica quando o teclado virtual sobe. */
@media (max-width: 640px) {
  dialog.rt-action-form { width: auto; max-width: none; inset: 8px; max-height: none; height: calc(100dvh - 16px); border-radius: 14px; padding: 16px; }
  #rt-detail { width: auto; max-width: none; inset: 8px; max-height: none; height: calc(100dvh - 16px); padding: 16px; }
}

.gcc-phone-setup { margin: 8px 0 16px; padding: 12px; background: #161e2c; border: 1px solid #354052; border-radius: 8px; }
.gcc-phone-setup p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: #c0cad8; }
.gcc-phone-setup > div { display: flex; gap: 8px; flex-wrap: wrap; }
.gcc-phone-setup button[data-phone="enable"] { background: #2f6df6; color: #fff; font-weight: 700; }
.rt-phone-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 16px 0 12px; }
.rt-phone-tabs button { padding: 8px 4px; font-size: 12px; border-radius: 6px; }
.rt-phone-tabs button[aria-pressed="true"] { background: #315dcc; color: white; border-color: #7196fa; }
.rt-phone-tabs small { display: block; font-size: 13px; margin-top: 4px; }
.rt-phone-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.rt-phone-ticket { padding: 16px; border: 1px solid #354052; border-radius: 8px; background: #161c28; min-width: 0; overflow-wrap: anywhere; }
.rt-phone-room { display: flex; justify-content: space-between; gap: 12px; }
.rt-phone-room strong { font-size: 20px; line-height: 1.3; }
.rt-phone-ticket small { color: #b3bfd0; }
.rt-phone-ticket p { margin: 12px 0 8px; line-height: 1.45; }
.rt-phone-actions { display: flex; gap: 8px; margin-top: 14px; }
.rt-phone-actions .rt-primary { flex: 1; }
@media (max-width: 860px) {
  .gcc-phone-active .rt-monitor-widget, .gcc-phone-active .agent-toggle { display: none; }
  .gcc-phone-active .rt-header .rt-eyebrow, .gcc-phone-active .rt-header-subtitle { display: none; }
  .gcc-phone-active .rt-header h1 { font-size: 23px; }
  .gcc-phone-active .rt-dashboard { padding-bottom: env(safe-area-inset-bottom, 12px); }
  .gcc-phone-active .rt-disclosure { margin-top: 20px; }
  .gcc-phone-active button { min-height: 44px; }
}