/* ==========================================================================
   COB Atendimento — camada mobile (v1.9.86)
   Arquivo unico. Um unico ponto de corte: 650px. Sem !important.
   No celular o sistema tem duas telas: "Hoje" (fila) e "Agenda" (calendario).
   As demais areas caem em #page-desktop-only.
   ========================================================================== */

/* --- Fora do celular: elementos exclusivamente moveis ficam ocultos -------- */
.mobile-only,
.mobile-bottom-nav,
.mobile-queue-tabs,
.mobile-queue-toolbar,
.mobile-drawer-head,
.mobile-filter-backdrop,
.mobile-calendar-strip,
.mobile-calendar-quick-actions,
.mobile-calendar-filter-done,
.mobile-calendar-filter-backdrop,
.calendar-mobile-only,
.calendar-next-label,
.calendar-detail-mobile,
.calendar-kpi-icon,
.calendar-priority-badge { display: none; }

/* Indicador de conexao: pilula no desktop, ponto colorido no celular. */
.connection-status {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.09);
  color: rgba(255,255,255,.88); font-size: 10px; font-weight: 900; white-space: nowrap;
}

.connection-status::before {
  content: ''; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%;
  background: #7bf2b6; box-shadow: 0 0 0 3px rgba(123,242,182,.15);
}
.connection-status.is-reconnecting::before { background: #ffd17d; box-shadow: 0 0 0 3px rgba(255,209,125,.15); }
.connection-status.is-offline::before { background: #ff8e98; box-shadow: 0 0 0 3px rgba(255,142,152,.15); }
.monitor-page { z-index: 180; }

/* Aviso das areas que ficam so no computador. */
.desktop-only-notice {
  max-width: 460px; margin: 6vh auto 0; padding: 28px 22px; display: grid; justify-items: center; gap: 12px;
  border: 1px solid var(--border); border-radius: 18px; background: var(--surface); text-align: center;
}
.desktop-only-icon { font-size: 40px; line-height: 1; }
.desktop-only-notice strong { font-size: 18px; }
.desktop-only-notice p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }

@media (max-width: 650px) {
  .modal.modal-edit-client .client-edit-grid { grid-template-columns:minmax(0,1fr); }
  .modal.modal-edit-client .client-edit-grid .field { grid-column:1 / -1; }
  .modal:has(#reminderNotify) .form-grid > .span-3 { grid-column:1 / -1; }
  .completion-time-fields:not([hidden]) { grid-template-columns:1fr; }
  .archived-client-row { grid-template-columns:1fr; }
  .archived-client-row .btn { width:100%; }
  /* --- Medidas base: nada de numero magico espalhado ---------------------- */
  :root {
    --m-appbar: calc(56px + env(safe-area-inset-top));
    --m-nav: calc(58px + env(safe-area-inset-bottom));
    --m-gap: 10px;
    --mobile-nav-height: var(--m-nav);
  }

  /* --- Login -------------------------------------------------------------- */
  .login-page { padding: 0; }
  .login-card { min-height: 100dvh; border-radius: 0; }
  .login-hero { padding: 26px 22px; }
  .login-form-panel { padding: 30px 22px; }
  .login-theme-toggle .theme-toggle-label,
  .login-compat-toggle [data-compat-label] { display: none; }
  .login-theme-toggle, .login-compat-toggle { width: 42px; padding: 0; }

  /* --- Estrutura --------------------------------------------------------- */
  .mobile-only { display: inline-flex; }
  .calendar-mobile-only { display: inline-flex; }
  .appbar { height: var(--m-appbar); padding: env(safe-area-inset-top) 12px 0; gap: 8px; }
  .appbar-center { display: none; }
  .app-brand { min-width: 0; overflow: hidden; }
  .app-brand small { display: none; }
  .app-brand strong { font-size: 14px; }
  .app-logo { width: 30px; height: 30px; }
  /* O estado "menu recolhido" do desktop nao vale no celular. */
  .app-shell .main,
  .app-shell.sidebar-collapsed .main { margin-left: 0; padding: calc(var(--m-appbar) + var(--m-gap)) var(--m-gap) calc(var(--m-nav) + 20px); }
  .app-shell.sidebar-collapsed .sidebar { width: min(300px, 86vw); padding: 14px 14px 18px; }
  .app-shell.sidebar-collapsed .nav-label { display: inline; }
  .app-footer { display: none; }
  .page-head p { display: none; }
  .page-head h1 { font-size: 19px; }

  /* Topo enxuto: sobram a marca, o ponto de conexao e o avatar. */
  .appbar-actions { gap: 6px; }
  .appbar #mobileMenuToggle,
  .appbar .theme-toggle,
  .appbar #globalSearchBtn,
  .appbar #openMonitorTop,
  .appbar #changeMyPasswordBtn,
  .appbar [data-open-compat],
  .appbar .admin-menu-wrap,
  .appbar #logoutBtn { display: none; }
  .appbar-actions { flex: 0 0 auto; }
  .appbar .user-chip { padding: 4px; background: transparent; }
  .appbar .user-chip strong { display: none; }
  .appbar .avatar { min-width: 34px; max-width: 88px; height: 32px; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; }
  .appbar .connection-status {
    width: 16px; min-width: 16px; min-height: 16px; padding: 0; border: 0;
    background: transparent; box-shadow: none; color: transparent; font-size: 0;
  }
  .appbar .connection-status::before { width: 10px; height: 10px; }

  /* --- Barra inferior: Hoje / Agenda / Mais ------------------------------- */
  .mobile-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 115; min-height: var(--m-nav);
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border); background: var(--surface);
  }
  .mobile-nav-btn {
    min-width: 0; min-height: 46px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; border: 0; border-radius: 12px; background: transparent;
    color: var(--muted); font: inherit; font-size: 10px; font-weight: 900;
  }
  .mobile-nav-btn span:first-child { font-size: 19px; line-height: 1; }
  .mobile-nav-btn.active { background: var(--primary-soft); color: var(--primary); }

  /* --- Gaveta "Mais": so o que faz sentido no celular --------------------- */
  .sidebar {
    top: var(--m-appbar); bottom: var(--m-nav); z-index: 50; width: min(300px, 86vw);
    padding: 14px 14px 18px; transform: translateX(-100%); overscroll-behavior: contain;
    box-shadow: var(--shadow);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-collapse-btn { display: none; }
  /* A barra inferior ja navega; aqui ficam so as acoes de conta. */
  .sidebar .nav-section-title { display: none; }
  .sidebar .nav-btn { display: none; }
  .sidebar .nav-btn.mobile-sidebar-tools { display: flex; justify-content: flex-start; min-height: 48px; }
  .sidebar .nav-btn.mobile-sidebar-tools[data-open-compat],
  .sidebar .nav-btn#mobileAdminGenerateTest,
  .sidebar .nav-btn#mobileAdminRefreshData { display: none; }
  .sidebar .nav-section-title.mobile-sidebar-tools { display: block; }
  .mobile-sidebar-backdrop { inset: var(--m-appbar) 0 0; }

  /* --- Alvos de toque e campos ------------------------------------------- */
  .btn, .btn-sm, .icon-btn, .close-btn, .password-toggle,
  .queue-status-filter-button, .provider-type-option, .checkbox-row { min-height: 44px; touch-action: manipulation; }
  .icon-btn, .close-btn, .password-toggle { width: 44px; min-width: 44px; height: 44px; }
  .field input, .field select, .field textarea { font-size: 16px; }
  .field input, .field select { min-height: 46px; }
  .form-grid { grid-template-columns: 1fr; }
  .span-12, .span-8, .span-6, .span-4, .span-3, .span-2 { grid-column: auto; }
  .filters { grid-template-columns: 1fr; }
  .provider-type-filter { width: 100%; }
  .page-head { flex-direction: column; }
  .page-sticky-zone { top: var(--m-appbar); margin-top: -7px; padding-top: 7px; }
  .page-sticky-zone .page-head { margin-bottom: 12px; }

  /* --- Tela "Hoje" (fila) ------------------------------------------------- */
  /* A barra inferior ja diz onde estamos: o cabecalho da pagina sai inteiro,
     junto com a faixa fixa que so o sustentava. */
  #page-queue .page-sticky-zone { position: static; margin: 0; padding: 0; border: 0; background: transparent; }
  #page-queue .page-head { display: none; }
  #page-queue .queue-indicators-inline { display: none; }
  #page-queue .queue-mode-bar { display: none; }
  #page-queue .queue-online-users { display: none; }
  .mobile-queue-toolbar { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; }
  .mobile-chip {
    display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
    color: var(--muted); font: inherit; font-size: 11px; font-weight: 900; white-space: nowrap;
  }
  .mobile-chip.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
  .mobile-chip[hidden] { display: none; }

  .mobile-queue-tabs {
    position: sticky; top: calc(var(--m-appbar) + var(--m-gap)); z-index: 26; display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; margin: 0 0 8px; padding: 5px;
    border: 1px solid var(--border); border-radius: 15px; background: var(--surface);
  }
  .mobile-queue-tab {
    min-height: 50px; display: grid; place-items: center; gap: 2px; padding: 5px 3px;
    border: 0; border-radius: 11px; background: transparent; color: var(--muted);
    font: inherit; font-size: 10px; font-weight: 900;
  }
  .mobile-queue-tab strong { font-size: 17px; color: var(--text); }
  .mobile-queue-tab.active { background: var(--primary); color: #fff; }
  .mobile-queue-tab.active strong { color: #fff; }


  /* Cartao da fila: identidade, situacao e uma unica acao. */
  #page-queue > .card:last-child { border: 0; border-radius: 16px; }
  .queue-list { gap: 8px; }
  #page-queue #queueList .queue-item,
  #page-queue #queueList .queue-item.queue-single-provider {
    grid-template-columns: 42px minmax(0,1fr); grid-template-rows: auto auto;
    gap: 8px 10px; padding: 11px; border-radius: 14px;
  }
  #page-queue #queueList .queue-item > .queue-order { grid-column: 1; grid-row: 1 / span 2; width: 42px; min-height: 42px; }
  #page-queue #queueList .queue-item .queue-client { grid-column: 2; grid-row: 1; }
  #page-queue #queueList .queue-item .queue-name { font-size: 15px; }
  #page-queue #queueList .queue-item .queue-person-meta { display: none; }
  #page-queue #queueList .queue-item .queue-lawyer { display: none; }
  #page-queue #queueList .queue-item .queue-lawyer-mobile { display: block; margin-top: 4px; }
  #page-queue #queueList .queue-item .queue-lawyer-mobile .lawyer-badge { max-width: 100%; }
  /* Horario, data e situacao numa unica linha, sem separador. */
  #page-queue #queueList .queue-item .queue-schedule {
    grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin: 0; padding: 0; border: 0; background: transparent;
  }
  #page-queue #queueList .queue-item .queue-time {
    flex: 1 1 auto; min-width: 0; width: auto;
    display: flex; flex-direction: row; align-items: baseline; gap: 6px; margin: 0; padding: 0; border: 0;
  }
  #page-queue #queueList .queue-item .queue-time .queue-meta { margin: 0; }
  #page-queue #queueList .queue-item .queue-time .queue-time-primary { font-size: 14px; }
  #page-queue #queueList .queue-item .queue-time .queue-meta { font-size: 10px; }
  #page-queue #queueList .queue-item .queue-status { flex: 0 0 auto; width: auto; min-width: 0; max-width: 60%; margin: 0; padding: 0; border: 0; }
  #page-queue #queueList .queue-item .queue-status-jump { width: auto; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
  #page-queue #queueList .queue-item .status-pill { min-height: 26px; padding: 0 10px; font-size: 10px; }
  #page-queue #queueList .queue-item .lawyer-badge { min-height: 30px; padding: 3px 8px; border-width: 1px; border-radius: 10px; }
  #page-queue #queueList .queue-item .lawyer-badge-avatar { width: 24px; height: 24px; font-size: 9px; }
  #page-queue #queueList .queue-item .lawyer-badge-name { font-size: 12px; }
  #page-queue #queueList .queue-item .lawyer-badge-area { font-size: 8px; }
  /* A posicao cabe num numero; o rotulo longo nao cabe em 42px. */
  #page-queue #queueList .queue-item .queue-order small { display: none; }
  #page-queue #queueList .queue-item .queue-order { font-size: 12px; }
  #page-queue #queueList .queue-item .queue-order strong { font-size: 15px; }
  #page-queue #queueList .queue-item .queue-actions { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: 1fr; }
  #page-queue #queueList .queue-item .queue-actions:empty { display: none; }
  #page-queue #queueList .queue-item .queue-actions .btn { width: 100%; min-height: 42px; font-size: 13px; }

  /* --- Gaveta de filtros da fila ------------------------------------------ */
  #queueFiltersDrawer {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 205; width: 100%;
    max-height: min(84dvh, 760px); margin: 0; overflow-y: auto; border-radius: 20px 20px 0 0;
    transform: translateY(105%); visibility: hidden; transition: transform .22s ease, visibility .22s;
    box-shadow: 0 -18px 44px rgba(10,30,34,.28);
  }
  #queueFiltersDrawer.open { transform: translateY(0); visibility: visible; }
  #queueFiltersDrawer .filters { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 10px 14px calc(18px + env(safe-area-inset-bottom)); }
  .mobile-drawer-head {
    position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between;
    padding: 14px; border-bottom: 1px solid var(--border); background: var(--surface);
  }
  .mobile-drawer-head strong { font-size: 17px; }
  .mobile-filter-backdrop {
    position: fixed; inset: 0; z-index: 200; background: rgba(7,31,36,.55);
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
  }
  .mobile-filter-backdrop.open { opacity: 1; visibility: visible; }
  body.mobile-drawer-open, body.mobile-calendar-filter-open { overflow: hidden; }

  /* --- Tela "Agenda" (calendario, sempre visao Dia) ----------------------- */
  #page-calendar .page-head { display: none; }
  #page-calendar .calendar-view-switch { display: none; }
  #page-calendar .calendar-legend { display: none; }
  #page-calendar .page-sticky-zone { top: var(--m-appbar); margin: 0 0 8px; padding-top: 0; background: var(--bg); }
  #page-calendar .calendar-header-card,
  #page-calendar .calendar-sticky-head,
  #page-calendar .calendar-shell { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  #page-calendar .calendar-toolbar { padding: 6px 8px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); flex-direction: row; }
  #page-calendar .calendar-toolbar-left {
    display: grid; grid-template-columns: minmax(0,1fr) 44px 44px; align-items: center; gap: 4px; width: 100%;
  }
  #page-calendar .calendar-toolbar-left .btn { min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; font-size: 19px; }
  #page-calendar .calendar-title {
    grid-column: 1; grid-row: 1; width: auto; min-width: 0; padding-left: 6px;
    font-size: 18px; font-weight: 800; line-height: 1.2; text-align: left; text-transform: capitalize;
  }
  #page-calendar #calendarPrevBtn { grid-column: 2; grid-row: 1; }
  #page-calendar #calendarNextBtn { grid-column: 3; grid-row: 1; }

  .mobile-calendar-strip {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(46px, 1fr); gap: 6px;
    margin: 8px 0 0; padding: 8px; overflow-x: auto; border: 1px solid var(--border);
    border-radius: 15px; background: var(--surface); scrollbar-width: none;
  }
  .mobile-calendar-strip::-webkit-scrollbar { display: none; }
  .mobile-calendar-day {
    min-width: 46px; min-height: 66px; display: grid; place-items: center; align-content: center; gap: 1px;
    padding: 5px 3px; border: 1px solid transparent; border-radius: 11px; background: var(--surface-2);
    color: var(--muted); font: inherit; font-size: 9px; font-weight: 900;
  }
  .mobile-calendar-day strong { color: var(--text); font-size: 16px; }
  .mobile-calendar-day.is-today:not(.active) { border-color: var(--primary); color: var(--primary); }
  .mobile-calendar-day.active { background: var(--primary); color: #fff; }
  .mobile-calendar-day.active strong { color: #fff; }
  .mobile-calendar-day-count {
    min-width: 18px; min-height: 18px; display: grid; place-items: center; margin-top: 2px; padding: 0 5px;
    border-radius: 999px; background: var(--surface); color: var(--primary-dark); font-size: 9px; line-height: 1;
  }
  .mobile-calendar-day.active .mobile-calendar-day-count { background: rgba(255,255,255,.2); color: #fff; }
  .mobile-calendar-day-count.is-empty { opacity: .45; }

  .mobile-calendar-quick-actions { display: grid; grid-template-columns: minmax(0,1.4fr) .62fr 1fr; gap: 6px; margin-top: 7px; }
  .mobile-calendar-date-field { min-width: 0; display: grid; }
  .mobile-calendar-date-field span { display: none; }
  .mobile-calendar-date-field input,
  .mobile-calendar-quick-actions > .btn,
  .mobile-calendar-filter-button { min-height: 46px; border-radius: 13px; font-size: 12px; }
  .mobile-calendar-filter-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
    color: var(--text); font: inherit; font-size: 12px; font-weight: 900;
  }

  /* Linha do tempo do dia: e a "Agenda" no celular. */
  #page-calendar .mobile-agenda-day { display: grid; gap: 0; background: var(--surface); }
  #page-calendar .mobile-agenda-summary { display: flex; gap: 7px; padding: 9px 10px; overflow-x: auto; border-bottom: 1px solid var(--border); background: var(--surface); scrollbar-width: none; }
  #page-calendar .mobile-agenda-summary::-webkit-scrollbar { display: none; }
  #page-calendar .mobile-agenda-summary-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 9px; font-weight: 850; }
  #page-calendar .mobile-agenda-summary-chip strong { color: var(--text); font-size: 12px; }
  #page-calendar .mobile-agenda-untimed { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 7px; padding: 8px 10px 9px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
  #page-calendar .mobile-agenda-untimed-label { padding-top: 8px; color: var(--muted); text-align: right; font-size: 8px; font-weight: 900; line-height: 1.2; text-transform: uppercase; }
  #page-calendar .mobile-agenda-untimed-list { display: grid; gap: 6px; }
  #page-calendar .mobile-agenda-untimed-event { --appointment-color: var(--primary); min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 8px; padding: 8px 9px; border: 1px solid color-mix(in srgb,var(--appointment-color) 26%,var(--border)); border-left: 4px solid var(--appointment-color); border-radius: 10px; background: color-mix(in srgb,var(--appointment-color) 9%,var(--surface)); cursor: pointer; }
  #page-calendar .mobile-agenda-untimed-event strong, #page-calendar .mobile-agenda-untimed-event small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #page-calendar .mobile-agenda-untimed-event strong { font-size: 11px; }
  #page-calendar .mobile-agenda-untimed-event small { grid-column: 1; color: var(--muted); font-size: 9px; }
  #page-calendar .mobile-agenda-untimed-event .status-pill { grid-column: 2; grid-row: 1 / span 2; align-self: center; max-width: 92px; padding: 4px 6px; font-size: 7px; }
  #page-calendar .mobile-agenda-timeline-scroll { max-height: calc(100dvh - 345px - var(--m-nav) - env(safe-area-inset-bottom)); min-height: 390px; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); scrollbar-width: thin; }
  #page-calendar .mobile-agenda-timeline { position: relative; min-height: var(--timeline-height); height: var(--timeline-height); background: var(--surface); }
  #page-calendar .mobile-agenda-timeline.is-creatable { cursor: crosshair; }
  #page-calendar .mobile-agenda-hour { position: absolute; left: 0; right: 0; height: 1px; pointer-events: none; }
  #page-calendar .mobile-agenda-hour > span { position: absolute; top: 0; left: 0; width: 49px; transform: translateY(-50%); color: var(--muted); text-align: right; font-size: 9px; font-weight: 700; }
  #page-calendar .mobile-agenda-hour > i { position: absolute; top: 0; left: 57px; right: 0; border-top: 1px solid var(--border); opacity: .82; }
  #page-calendar .mobile-agenda-hour.is-current-overlap > span { opacity: 0; }
  #page-calendar .mobile-agenda-hour-half { position: absolute; left: 57px; right: 0; border-top: 1px dashed var(--border); opacity: .42; pointer-events: none; }
  #page-calendar .mobile-agenda-events { position: absolute; inset: 0 6px 0 61px; pointer-events: none; }
  #page-calendar .mobile-agenda-event { --appointment-color: var(--primary); position: absolute; top: var(--event-top); left: calc(var(--event-left) + 2px); width: calc(var(--event-width) - 4px); height: var(--event-height); min-height: 44px; display: grid; align-content: start; gap: 1px; padding: 6px 7px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--appointment-color) 34%,var(--border)); border-left: 4px solid var(--appointment-color); border-radius: 9px; background: color-mix(in srgb,var(--appointment-color) 13%,var(--surface)); color: var(--text); box-shadow: 0 2px 7px rgba(20,40,44,.08); text-align: left; pointer-events: auto; cursor: pointer; }
  #page-calendar .mobile-agenda-event.is-next { box-shadow: 0 0 0 2px color-mix(in srgb,var(--primary) 32%,transparent), 0 5px 12px rgba(20,40,44,.11); }
  #page-calendar .mobile-agenda-event:active { transform: scale(.985); }
  #page-calendar .mobile-agenda-event-time { color: var(--appointment-color); font-size: 8px; font-weight: 950; line-height: 1.15; }
  #page-calendar .mobile-agenda-event-client { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 950; line-height: 1.15; }
  #page-calendar .mobile-agenda-event-provider { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 8px; font-weight: 750; }
  #page-calendar .mobile-agenda-event-meta { display: flex; align-items: center; gap: 4px; margin-top: 2px; overflow: hidden; }
  #page-calendar .mobile-agenda-event .status-pill { max-width: 100%; padding: 3px 5px; overflow: hidden; font-size: 7px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
  #page-calendar .mobile-agenda-event .calendar-priority-badge { flex: 0 0 auto; margin: 0; padding: 3px 5px; font-size: 7px; }
  #page-calendar .mobile-agenda-event.is-compact { grid-template-columns: auto minmax(0,1fr) auto; grid-template-rows: minmax(0,1fr) minmax(0,1fr); align-content: stretch; align-items: center; gap: 0 5px; padding: 3px 5px; }
  #page-calendar .mobile-agenda-event.is-compact .mobile-agenda-event-time { grid-column: 1; grid-row: 1; white-space: nowrap; }
  #page-calendar .mobile-agenda-event.is-compact .mobile-agenda-event-client { grid-column: 2 / 4; grid-row: 1; font-size: 10px; }
  #page-calendar .mobile-agenda-event.is-compact .mobile-agenda-event-provider { grid-column: 1 / 3; grid-row: 2; min-width: 0; font-size: 7px; }
  #page-calendar .mobile-agenda-event.is-compact .mobile-agenda-event-meta { grid-column: 3; grid-row: 2; min-width: 0; margin-top: 0; }
  #page-calendar .mobile-agenda-event.is-compact .mobile-agenda-event-meta > .queue-status-jump { min-width: 0; }
  #page-calendar .mobile-agenda-event.is-compact .status-pill { padding: 2px 4px; font-size: 6px; }
  #page-calendar .mobile-agenda-event.is-compact .calendar-priority-badge { display: none; }
  #page-calendar .mobile-agenda-next-label { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb,var(--primary) 17%,transparent); }
  #page-calendar .mobile-agenda-now-line { position: absolute; left: 50px; right: 0; z-index: 8; height: 2px; background: #d93025; pointer-events: none; }
  #page-calendar .mobile-agenda-now-line::before { content: ''; position: absolute; left: 2px; top: 50%; width: 10px; height: 10px; transform: translate(-50%,-50%); border-radius: 50%; background: #d93025; }
  #page-calendar .mobile-agenda-now-line span { position: absolute; left: -50px; top: 50%; z-index: 1; width: 48px; padding-right: 4px; transform: translateY(-50%); background: var(--surface); color: #d93025; text-align: right; font-size: 8px; font-weight: 950; white-space: nowrap; }
  #page-calendar .mobile-agenda-empty-hint { position: absolute; top: 138px; left: 74px; right: 18px; z-index: 2; padding: 18px 14px; border: 1px dashed var(--border); border-radius: 14px; background: var(--surface-2); color: var(--muted); text-align: center; font-size: 10px; line-height: 1.5; pointer-events: none; }
  #page-calendar .mobile-agenda-empty-hint strong { display: block; margin-bottom: 3px; color: var(--text); font-size: 13px; }
  #page-calendar .mobile-agenda-tap-hint { position: sticky; left: 0; bottom: 0; z-index: 9; display: block; padding: 6px 10px; border-top: 1px solid var(--border); background: color-mix(in srgb,var(--surface) 94%,transparent); color: var(--muted); text-align: center; font-size: 8px; font-weight: 800; backdrop-filter: blur(8px); }

  #page-calendar .calendar-day-view { padding: 0; gap: 10px; }
  #page-calendar .calendar-day-summary { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; overflow: visible; }
  #page-calendar .calendar-day-kpi { min-width: 0; padding: 10px; border-radius: 13px; }
  #page-calendar .calendar-day-kpi .helper { font-size: 9px; line-height: 1.15; }
  #page-calendar .calendar-day-kpi strong { font-size: 20px; line-height: 1; }
  #page-calendar .calendar-day-list { gap: 8px; }
  #page-calendar .calendar-day-item {
    grid-template-columns: 58px minmax(0,1fr) 44px; grid-template-rows: auto auto auto;
    align-items: center; gap: 8px 10px; min-height: 0; padding: 12px; border-radius: 15px;
    border-left: 5px solid var(--appointment-color, var(--primary)); cursor: pointer;
  }
  #page-calendar .calendar-day-item > * { min-width: 0; }
  #page-calendar .calendar-item-time { grid-column: 1; grid-row: 1; align-self: start; }
  #page-calendar .calendar-item-time strong { display: block; font-size: 16px; }
  #page-calendar .calendar-item-client { grid-column: 2 / 4; grid-row: 1; align-self: start; overflow: hidden; }
  #page-calendar .calendar-item-client .queue-name { display: block; padding-right: 0; font-size: 15px; line-height: 1.22; white-space: normal; }
  #page-calendar .calendar-item-provider { grid-column: 1 / 4; grid-row: 2; width: 100%; }
  #page-calendar .calendar-item-provider .lawyer-badge { width: 100%; max-width: none; }
  #page-calendar .calendar-item-status { grid-column: 1 / 3; grid-row: 3; }
  #page-calendar .calendar-item-detail { grid-column: 3; grid-row: 3; justify-self: end; min-width: 42px; min-height: 42px; padding: 0; font-size: 21px; }
  #page-calendar .calendar-detail-desktop { display: none; }
  #page-calendar .calendar-detail-mobile { display: inline; }
  #page-calendar .calendar-next-label {
    display: inline-flex; margin-bottom: 4px; padding: 3px 7px; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary); font-size: 9px; font-weight: 900;
  }

  /* Gaveta de filtros da agenda: mesmo padrao da fila. */
  #page-calendar .calendar-toolbar-right {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 205; width: 100%; max-height: min(86dvh, 760px);
    display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin: 0;
    padding: 0 14px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto;
    border: 1px solid var(--border); border-bottom: 0; border-radius: 20px 20px 0 0; background: var(--surface);
    transform: translateY(105%); visibility: hidden; transition: transform .22s ease, visibility .22s;
    box-shadow: 0 -18px 44px rgba(10,30,34,.28);
  }
  #page-calendar .calendar-toolbar-right.open { transform: translateY(0); visibility: visible; }
  #page-calendar .calendar-toolbar-right .mobile-drawer-head { margin: 0 -14px; }
  #page-calendar .calendar-provider-filter { display: grid; grid-template-columns: 1fr; width: 100%; gap: 12px; }
  #page-calendar .calendar-provider-filter > .field { min-width: 0; }
  #page-calendar .calendar-provider-filter > .field:last-child { display: none; }
  .mobile-calendar-provider-filter { display: grid; gap: 8px; }
  .mobile-calendar-provider-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .mobile-calendar-provider-head > div { display: flex; gap: 6px; }
  .mobile-calendar-provider-head button {
    min-height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--primary); font: inherit; font-size: 11px; font-weight: 900;
  }
  .mobile-calendar-provider-list { display: grid; gap: 6px; max-height: 40dvh; overflow-y: auto; }
  .mobile-calendar-provider-option {
    display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
    color: var(--text); font: inherit; font-size: 13px; font-weight: 800; text-align: left;
  }
  .mobile-calendar-provider-option .mobile-provider-name { flex: 1 1 auto; min-width: 0; }
  .mobile-calendar-provider-option .mobile-provider-check { opacity: 0; color: var(--primary); font-weight: 950; }
  .mobile-calendar-provider-option.is-active { border-color: var(--primary); }
  .mobile-calendar-provider-option.is-active .mobile-provider-check { opacity: 1; }
  .mobile-calendar-filter-done { display: block; min-height: 48px; }

  /* --- Modais: folha de baixo para cima ----------------------------------- */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal, .modal.modal-lg, .modal.modal-xl {
    width: 100vw; max-width: 100vw; max-height: 92dvh; margin: 0; border-radius: 20px 20px 0 0;
    display: flex; flex-direction: column;
  }
  .modal-head { flex: 0 0 auto; position: sticky; top: 0; z-index: 5; background: var(--surface); }
  .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .modal-foot {
    flex: 0 0 auto; position: sticky; bottom: 0; z-index: 5; display: grid; gap: 7px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)); background: var(--surface);
  }
  .modal-foot .btn { width: 100%; min-height: 48px; }
  .modal.modal-companion-picker { width:100vw; max-width:100vw; }
  .modal-companion-picker .modal-body { padding:20px 18px 24px; }
  .modal-companion-picker .modal-foot { padding-left:18px; padding-right:18px; }
  .companion-picker-modal { gap:18px; min-height:0; }
  .companion-picker-note { min-height:0; padding:16px 17px; }
  .companion-picker-fields { grid-template-columns:1fr; gap:14px; }
  .modal-companion-picker .modal-foot .btn { min-width:0; }
  .modal .form-grid > .field { grid-column: 1 / -1; }
  .appointment-detail-notes, .appointment-contact-grid, .reminder-detail-grid { grid-template-columns: 1fr; }
  /* Detalhes do atendimento: nada de quatro colunas em 360px. */
  .modal .appointment-meta-row { grid-template-columns: 1fr; }
  .modal .form-grid.appointment-detail-timing { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .modal .form-grid.appointment-detail-timing > .field { grid-column: auto; min-width: 0; }
  .modal .appointment-status-jump { width: 100%; min-width: 0; }
  .modal .appointment-status-jump .status-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .appointment-detail-companions.is-empty .appointment-companions-summary { grid-template-columns: 42px minmax(0,1fr); }
  .appointment-detail-companions.is-empty .appointment-companion-add { grid-column: 1 / -1; width: 100%; }
  .appointment-companions-head { align-items: stretch; flex-direction: column; }
  .appointment-companion-add { width: 100%; }
  .appointment-companion-row.has-actions { grid-template-columns:36px minmax(0,1fr); }
  .appointment-companion-row.has-actions .appointment-companion-actions { grid-column:1 / -1; justify-content:stretch; }
  .appointment-companion-row.has-actions .appointment-companion-finish { flex:1 1 auto; }
  .call-popup-backdrop { padding: 12px; align-items: center; }
  .call-popup-details { grid-template-columns: 1fr; }

  /* A ficha ampla do cliente volta a empilhar somente no celular. */
  .modal-client-profile .client-profile-kpis,.modal-client-profile .client-profile-kpis.has-five-items { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .modal-client-profile .client-profile-appointment-row,.modal-client-profile .client-profile-protocol-row { grid-template-columns:1fr; row-gap:10px; }

  /* Unificação manual de contatos. */
  .manual-client-merge-heading,.manual-client-merge-selected-head { align-items:flex-start; flex-direction:column; }
  .manual-client-merge-search { grid-template-columns:1fr; }
  .manual-client-merge-search .btn { width:100%; }
  .manual-client-merge-row.is-selected { grid-template-columns:auto minmax(0,1fr); }
  .manual-client-merge-row.is-selected > .btn { grid-column:1 / -1; width:100%; }
  .manual-client-merge-actions .btn { width:100%; }

  /* Ficha do protocolo: uma coluna no celular. */
  .protocol-details-grid, .protocol-detail-summary-row, .protocol-detail-reception-row { grid-template-columns:1fr; }
  .protocol-detail-reception-row .protocol-detail-item:last-child { grid-column:auto; }
  .protocol-modal-section-with-type { align-items:flex-start; flex-direction:column; gap:8px; }
  .protocol-modal-section-with-type .protocol-type-options { display:flex; width:100%; }
  .protocol-modal-section-with-type .protocol-type-option { flex:1 1 0; justify-content:center; }

  /* --- Avisos e toasts ---------------------------------------------------- */
  html.test-environment .test-environment-watermark { right: 10px; bottom: calc(var(--m-nav) + 8px); font-size: 9px; }
  .toast-stack { left: 10px; right: 10px; bottom: calc(var(--m-nav) + 10px); }
  .toast { width: auto; max-width: none; }
.signature-record{align-items:stretch;flex-direction:column}
}