/* ══════════════════════════════════════════════════════════════════════════
   Nexo · Layouts
   Telas de autenticação, shell da aplicação, home, configurações e erros.
   ══════════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ════════════════════════════════════════════════════════════════════════
     Autenticação
     Duas colunas no desktop: formulário à esquerda, painel de marca à direita.
     O painel é a primeira coisa a sumir quando falta espaço — o formulário é
     que precisa funcionar.
     ════════════════════════════════════════════════════════════════════════ */

  .auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
  }

  .auth__main {
    display: flex;
    flex-direction: column;
    padding: var(--sp-9);
    background: var(--surface-canvas);
    overflow-y: auto;
  }

  .auth__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-4);
    font-size: var(--fs-heading);
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
  }

  .auth__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    padding: var(--sp-9) 0;
  }

  .auth__title {
    font-size: 26px;
    line-height: 32px;
    font-weight: var(--fw-bold);
    letter-spacing: -0.022em;
  }

  .auth__subtitle { margin-top: var(--sp-4); color: var(--text-secondary); }

  .auth__form { margin-top: var(--sp-9); }

  .auth__actions { margin-top: var(--sp-8); }

  .auth__footer {
    margin-top: var(--sp-8);
    font-size: var(--fs-ui);
    color: var(--text-secondary);
    text-align: center;
  }

  .auth__legal {
    margin-top: var(--sp-9);
    font-size: var(--fs-small);
    color: var(--text-tertiary);
    text-align: center;
  }

  /* Separador com rótulo no meio. */
  .auth__divider {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    margin: var(--sp-8) 0;
    font-size: var(--fs-small);
    color: var(--text-tertiary);
  }

  .auth__divider::before,
  .auth__divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--border-subtle);
  }

  .auth__providers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }

  /* — Painel de marca — */

  .auth__aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--sp-11);
    background: var(--surface-sunken);
    border-left: 1px solid var(--border-subtle);
    overflow: hidden;
  }

  /* Grade sutil, sem gradiente e sem blob. Densidade que sugere ferramenta. */
  .auth__grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(var(--border-subtle) 1px, transparent 1px),
      linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 90% 70% at 70% 20%, #000 20%, transparent 75%);
    opacity: 0.7;
  }

  .auth__aside-content { position: relative; max-width: 46ch; }

  .auth__quote {
    font-size: var(--fs-title);
    line-height: 1.55;
    font-weight: var(--fw-medium);
    letter-spacing: -0.012em;
  }

  .auth__stats {
    display: flex;
    gap: var(--sp-9);
    margin-top: var(--sp-9);
    padding-top: var(--sp-8);
    border-top: 1px solid var(--border-subtle);
  }

  .auth__stat-value {
    font-size: var(--fs-title);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }

  .auth__stat-label { margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--text-tertiary); }

  @media (max-width: 900px) {
    .auth { grid-template-columns: 1fr; }
    .auth__aside { display: none; }
    .auth__main { padding: var(--sp-6); }
  }

  /* ════════════════════════════════════════════════════════════════════════
     Onboarding
     ════════════════════════════════════════════════════════════════════════ */

  .onboarding {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--surface-canvas);
  }

  .onboarding__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    padding: var(--sp-6) var(--sp-9);
    border-bottom: 1px solid var(--border-subtle);
  }

  .onboarding__body {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-11) var(--sp-6);
  }

  .onboarding__content { width: 100%; max-width: 520px; }

  .onboarding__eyebrow {
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-text);
  }

  .onboarding__title {
    margin-top: var(--sp-4);
    font-size: 24px;
    line-height: 30px;
    font-weight: var(--fw-bold);
    letter-spacing: -0.022em;
  }

  .onboarding__subtitle { margin-top: var(--sp-4); color: var(--text-secondary); }

  /* Passos: uma trilha simples, sem números dentro de bolinha. */
  .steps { display: flex; align-items: center; gap: var(--sp-4); }

  .steps__item { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-small); color: var(--text-tertiary); }

  .steps__marker {
    width: 20px;
    height: 3px;
    background: var(--border-default);
    border-radius: var(--r-full);
    transition: background-color var(--t-base) var(--ease);
  }

  .steps__item--done .steps__marker { background: var(--accent); }
  .steps__item--current .steps__marker { background: var(--accent); width: 28px; }
  .steps__item--current { color: var(--text-primary); font-weight: var(--fw-medium); }

  /* Escolha grande, para "criar espaço" vs "entrar por convite". */
  .choice {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-5);
    width: 100%;
    padding: var(--sp-6);
    text-align: left;
    background: var(--surface-default);
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
  }

  .choice:hover { border-color: var(--border-strong); background: var(--surface-raised); }

  .choice--selected { border-color: var(--accent); background: var(--accent-subtle); }

  .choice__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--accent-text);
    background: var(--accent-subtle);
    border-radius: var(--r-md);
  }

  /* ════════════════════════════════════════════════════════════════════════
     Shell da aplicação · quatro colunas
     ════════════════════════════════════════════════════════════════════════ */

  .shell {
    display: grid;
    grid-template-columns: var(--w-spaces) var(--w-nav) minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--surface-canvas);
  }

  .shell--with-panel { grid-template-columns: var(--w-spaces) var(--w-nav) minmax(0, 1fr) var(--w-panel); }

  /* — Coluna 1: espaços — */

  .spaces {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) 0;
    background: var(--surface-sunken);
    border-right: 1px solid var(--border-subtle);
    overflow-y: auto;
    scrollbar-width: none;
  }

  .spaces::-webkit-scrollbar { display: none; }

  .spaces__item {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-lg);
    transition: border-radius var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
  }

  .spaces__item:hover { border-radius: var(--r-md); }
  .spaces__item:active { transform: scale(0.94); }

  /* Indicador de não lido: um traço vertical à esquerda. Discreto, mas
     inconfundível — e não compete com o contador de menções. */
  .spaces__item::before {
    content: "";
    position: absolute;
    left: -12px;
    width: 3px;
    height: 0;
    background: var(--text-primary);
    border-radius: 0 var(--r-full) var(--r-full) 0;
    transition: height var(--t-base) var(--ease);
  }

  .spaces__item--unread::before { height: 8px; }
  .spaces__item--active::before { height: 22px; }

  .spaces__count { position: absolute; right: -3px; bottom: -3px; }

  .spaces__divider { width: 24px; height: 1px; background: var(--border-default); margin: var(--sp-2) 0; }

  .spaces__add {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--text-tertiary);
    background: var(--surface-default);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-lg);
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  }

  .spaces__add:hover { color: var(--accent-text); border-color: var(--accent); border-style: solid; }

  /* — Coluna 2: navegação do espaço — */

  .nav {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface-default);
    border-right: 1px solid var(--border-subtle);
  }

  .nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    height: var(--h-topbar);
    padding: 0 var(--sp-5);
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease);
  }

  .nav__header:hover { background: var(--surface-hover); }

  .nav__title {
    font-size: var(--fs-ui);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.006em;
  }

  .nav__body { flex: 1 1 auto; min-height: 0; padding: var(--sp-4) var(--sp-3); }

  .nav__section + .nav__section { margin-top: var(--sp-5); }

  .nav__list { display: flex; flex-direction: column; gap: 1px; margin-top: var(--sp-1); }

  /* — Rodapé: barra do usuário — */

  .userbar {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4);
    background: var(--surface-sunken);
    border-top: 1px solid var(--border-subtle);
  }

  .userbar__info { flex: 1 1 auto; min-width: 0; }

  .userbar__name {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .userbar__status {
    font-size: var(--fs-micro);
    line-height: 1.3;
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .userbar__actions { display: flex; gap: var(--sp-1); }

  /* Estado desligado do microfone e da câmera: barra diagonal + cor de perigo.
     Cor sozinha não bastaria. */
  .userbar__toggle--off { color: var(--danger-text); }

  /* — Coluna 3: área central — */

  .main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

  .topbar {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    height: var(--h-topbar);
    padding: 0 var(--sp-6);
    background: var(--surface-canvas);
    border-bottom: 1px solid var(--border-subtle);
  }

  .topbar__title {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-ui);
    font-weight: var(--fw-semibold);
  }

  .topbar__topic {
    min-width: 0;
    padding-left: var(--sp-5);
    margin-left: var(--sp-2);
    border-left: 1px solid var(--border-default);
    font-size: var(--fs-small);
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

  .main__body { flex: 1 1 auto; min-height: 0; }

  /* — Coluna 4: painel contextual — */

  .panel-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface-default);
    border-left: 1px solid var(--border-subtle);
  }

  .panel-side__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--h-topbar);
    padding: 0 var(--sp-5);
    border-bottom: 1px solid var(--border-subtle);
  }

  .panel-side__body { flex: 1 1 auto; min-height: 0; padding: var(--sp-5) var(--sp-3); }

  /* ════════════════════════════════════════════════════════════════════════
     Home
     Composição editorial. A próxima reunião ocupa o lugar de destaque porque
     é a única informação com hora marcada.
     ════════════════════════════════════════════════════════════════════════ */

  .home { max-width: 1080px; margin: 0 auto; padding: var(--sp-10) var(--sp-9) var(--sp-11); }

  .home__greeting {
    font-size: 26px;
    line-height: 32px;
    font-weight: var(--fw-bold);
    letter-spacing: -0.022em;
  }

  .home__date { margin-top: var(--sp-3); color: var(--text-secondary); }

  .home__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: var(--sp-9);
    margin-top: var(--sp-10);
    align-items: start;
  }

  .home__section + .home__section { margin-top: var(--sp-10); }

  .home__section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-5);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
  }

  /* Destaque da próxima reunião. Borda de acento à esquerda em vez de fundo
     colorido — chama atenção sem gritar. */
  .next-meeting {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    padding: var(--sp-6);
    background: var(--surface-default);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-lg);
  }

  .next-meeting__time {
    flex: none;
    text-align: center;
    padding-right: var(--sp-6);
    border-right: 1px solid var(--border-subtle);
  }

  .next-meeting__hour {
    font-size: var(--fs-title);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }

  .next-meeting__relative { margin-top: var(--sp-1); font-size: var(--fs-micro); color: var(--text-tertiary); }

  .next-meeting--live { border-left-color: var(--success); }

  /* Ponto pulsante de "ao vivo". Uma das duas únicas animações contínuas da
     interface — a outra é o skeleton. */
  .live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--success);
    border-radius: var(--r-full);
    animation: nx-pulse 1.8s var(--ease) infinite;
  }

  @keyframes nx-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }

  .home__list { display: flex; flex-direction: column; }

  .home__row {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-4) var(--sp-3);
    border-radius: var(--r-md);
    transition: background-color var(--t-fast) var(--ease);
  }

  .home__row:hover { background: var(--surface-hover); }

  .home__row + .home__row { border-top: 1px solid var(--border-subtle); border-radius: 0; }

  .activity { display: flex; flex-direction: column; gap: var(--sp-5); }

  .activity__item { display: flex; align-items: flex-start; gap: var(--sp-4); font-size: var(--fs-small); }

  .activity__dot {
    flex: none;
    width: 5px;
    height: 5px;
    margin-top: 7px;
    background: var(--border-strong);
    border-radius: var(--r-full);
  }

  @media (max-width: 1100px) {
    .home__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-9); }
  }

  /* ════════════════════════════════════════════════════════════════════════
     Configurações
     ════════════════════════════════════════════════════════════════════════ */

  .settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); height: 100%; min-height: 0; }

  .settings__nav {
    padding: var(--sp-6) var(--sp-4);
    background: var(--surface-default);
    border-right: 1px solid var(--border-subtle);
    overflow-y: auto;
  }

  .settings__group + .settings__group { margin-top: var(--sp-7); }

  .settings__main { padding: var(--sp-9) var(--sp-9) var(--sp-11); overflow-y: auto; }

  .settings__content { max-width: 620px; }

  .settings__section + .settings__section {
    margin-top: var(--sp-9);
    padding-top: var(--sp-9);
    border-top: 1px solid var(--border-subtle);
  }

  .settings__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-8);
    padding: var(--sp-5) 0;
  }

  .settings__row + .settings__row { border-top: 1px solid var(--border-subtle); }

  .settings__row-label { font-size: var(--fs-ui); font-weight: var(--fw-medium); }
  .settings__row-hint { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--text-secondary); max-width: 52ch; }

  /* Zona de ações irreversíveis. Fica no fim, separada, e nunca colada a algo
     inofensivo. */
  .danger-zone {
    margin-top: var(--sp-10);
    padding: var(--sp-6);
    border: 1px solid var(--danger-subtle);
    border-radius: var(--r-lg);
    background: var(--danger-subtle);
  }

  /* ── Editor de foto e capa ────────────────────────────────────────────── */

  .avatar-edit {
    position: relative;
    flex: none;
    width: 80px;
    height: 80px;
    border-radius: var(--r-full);
    cursor: pointer;
    outline-offset: 4px;
  }

  .avatar-edit__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgb(0 0 0 / 0.55);
    border-radius: inherit;
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease);
  }

  .avatar-edit:hover .avatar-edit__overlay,
  .avatar-edit:focus-visible .avatar-edit__overlay,
  .avatar-edit--over .avatar-edit__overlay { opacity: 1; }

  /* Alvo de soltar bem visível: arrastar um arquivo para um lugar que não dá
     retorno visual é adivinhação. */
  .avatar-edit--over {
    box-shadow: 0 0 0 3px var(--accent);
  }

  .banner-edit {
    position: relative;
    height: 120px;
    background: var(--surface-inset);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-lg);
    overflow: hidden;
    cursor: pointer;
  }

  .banner-edit--over { border-color: var(--accent); border-style: solid; }

  .banner-edit__preview,
  .banner-edit__preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .banner-edit__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    font-size: var(--fs-small);
    color: var(--text-secondary);
    background: rgb(0 0 0 / 0.35);
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease);
  }

  /* Sem imagem, o rótulo fica sempre visível — senão o campo parece um vazio
     sem função. */
  .banner-edit__preview:empty + .banner-edit__overlay,
  .banner-edit:hover .banner-edit__overlay,
  .banner-edit:focus-visible .banner-edit__overlay {
    opacity: 1;
    color: var(--text-secondary);
    background: transparent;
  }

  .banner-edit:hover .banner-edit__preview:not(:empty) + .banner-edit__overlay {
    color: #fff;
    background: rgb(0 0 0 / 0.45);
  }

  .banner-edit__remove {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
  }

  .banner-edit__progress {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: block;
    border-radius: 0;
  }

  /* Amostra de tema no seletor de aparência. */
  .theme-option { display: flex; flex-direction: column; gap: var(--sp-4); cursor: pointer; }

  .theme-preview {
    height: 76px;
    padding: var(--sp-4);
    border: 2px solid var(--border-default);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--t-fast) var(--ease);
  }

  .theme-option input { position: absolute; opacity: 0; width: 0; height: 0; }
  .theme-option input:checked + .theme-preview { border-color: var(--accent); }
  .theme-option input:focus-visible + .theme-preview { outline: 2px solid var(--accent); outline-offset: 2px; }

  .theme-preview__bar { height: 6px; border-radius: var(--r-full); }

  @media (max-width: 860px) {
    .settings { grid-template-columns: minmax(0, 1fr); }
    .settings__nav { display: none; }
    .settings__main { padding: var(--sp-6); }
  }

  /* ════════════════════════════════════════════════════════════════════════
     Páginas de erro
     ════════════════════════════════════════════════════════════════════════ */

  .error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-6);
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--sp-9);
    text-align: center;
    background: var(--surface-canvas);
  }

  .error-page__code {
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }

  .error-page__title {
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    font-weight: var(--fw-bold);
    letter-spacing: -0.022em;
  }

  .error-page__text { max-width: 46ch; color: var(--text-secondary); line-height: 1.6; }

  .error-page__ref {
    margin-top: var(--sp-4);
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    color: var(--text-tertiary);
  }

  .error-page__trace {
    width: 100%;
    max-width: 900px;
    margin-top: var(--sp-8);
    text-align: left;
    font-size: var(--fs-small);
  }

  /* ════════════════════════════════════════════════════════════════════════
     Navegação sem recarregar
     ════════════════════════════════════════════════════════════════════════ */

  /* Barra de progresso do topo. Só aparece se a troca demorar mais de 180ms —
     a maior parte das navegações vem do prefetch e é instantânea. */
  .nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-tooltip);
    height: 2px;
    width: 0;
    background: var(--accent);
    opacity: 0;
    pointer-events: none;
    transition: width 900ms cubic-bezier(0, 0.6, 0.3, 1), opacity 160ms linear;
  }

  .nav-progress--active {
    width: 85%;
    opacity: 1;
  }

  .nav-progress--done {
    width: 100%;
    opacity: 0;
    transition: width 140ms linear, opacity 200ms linear 120ms;
  }

  /* Cruzamento suave onde o navegador suporta View Transitions. Curto de
     propósito: 120ms é o suficiente para não parecer um corte seco, e curto o
     bastante para não atrasar quem está navegando rápido. */
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 120ms;
  }

  /* As colunas laterais não devem participar da transição: elas quase sempre
     continuam iguais, e animá-las faria a interface inteira piscar a cada
     clique num canal. */
  .spaces,
  .nav {
    view-transition-name: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-progress { transition: none; }

    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
  }

  /* ════════════════════════════════════════════════════════════════════════
     Responsivo
     ════════════════════════════════════════════════════════════════════════ */

  @media (max-width: 1439px) {
    .shell--with-panel { grid-template-columns: var(--w-spaces) var(--w-nav) minmax(0, 1fr); }
    .shell--with-panel .panel-side { display: none; }
  }

  @media (max-width: 1099px) {
    :root { --w-spaces: 56px; --w-nav: 232px; }
  }

  /* Botão da gaveta: existe apenas onde a gaveta existe. */
  .drawer-toggle {
    display: none;
    position: fixed;
    top: var(--sp-4);
    left: var(--sp-4);
    z-index: calc(var(--z-overlay) + 1);
    box-shadow: var(--shadow-md);
  }

  @media (max-width: 859px) {
    .shell { grid-template-columns: minmax(0, 1fr); }

    .drawer-toggle { display: inline-grid; }

    /* Colunas 1 e 2 viram gaveta.

       O estado fechado usa `visibility: hidden` além do transform, e não é
       preciosismo: transform depende de o navegador compor a camada, e se por
       qualquer motivo ele não aplicar (transição travada, camada não
       promovida), a barra lateral reaparece por cima do conteúdo. Com
       visibility o fechado é fechado, e de quebra o conteúdo sai da ordem de
       tabulação enquanto está escondido. */
    .spaces,
    .nav {
      position: fixed;
      top: 0;
      bottom: 0;
      z-index: var(--z-overlay);
      visibility: hidden;
      transform: translateX(-100%);
    }

    .spaces { left: 0; width: var(--w-spaces); }
    .nav { left: var(--w-spaces); width: var(--w-nav); }

    /*
      A gaveta abre e fecha na hora, sem transição nem animação.

      As duas tentativas anteriores falharam pelo mesmo motivo. Com
      `transition: transform`, o estado só ficava certo se a transição
      concluísse. Com `animation`, pior: enquanto uma animação roda ela
      sobrepõe o `transform` declarado, então uma animação que não avança
      prende a gaveta fora da tela mesmo com `transform: none` na regra.

      Nos dois casos o resultado era o app inutilizável no celular — a barra
      lateral por cima do conteúdo, ou o menu abrindo invisível. Movimento que
      pode quebrar a correção não compensa: aqui o estado é sempre o declarado,
      e ele nunca depende de um quadro ser desenhado.
    */
    .shell--drawer .spaces,
    .shell--drawer .nav {
      visibility: visible;
      transform: none;
    }

    /* A topbar abre espaço para o botão da gaveta em vez de ficar embaixo dele.
       O espaço é constante: o botão continua no mesmo lugar com a gaveta
       aberta (é o que a fecha), então mexer no recuo só faria o título pular. */
    .topbar { padding-left: 56px; }

    .shell--drawer::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: calc(var(--z-overlay) - 1);
      background: var(--backdrop);
    }

    .home { padding: var(--sp-8) var(--sp-6) var(--sp-10); }
    .toast-region { right: var(--sp-4); left: var(--sp-4); bottom: var(--sp-4); max-width: none; }

    /* Telas estreitas: o conteúdo respira menos e nada pode vazar na
       horizontal. Uma barra de rolagem lateral num app de conversa é o sinal
       mais claro de layout quebrado. */
    .settings__main { padding: var(--sp-6) var(--sp-5) var(--sp-9); }
    .settings__row { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
    .settings__row .segmented { align-self: flex-start; }
    .home__grid { gap: var(--sp-8); }

    /* A próxima reunião vira empilhada: em 375px, três colunas viram três
       colunas ilegíveis. */
    .next-meeting { flex-wrap: wrap; }
    .next-meeting__time { padding-right: var(--sp-5); }

    .auth__content { max-width: none; }
    .modal { max-height: calc(100dvh - var(--sp-8)); }
    .palette-backdrop { padding-top: 8vh; }
  }

  /* Abaixo de 640px o campo de mensagem perde a linha de ajuda: ela ocupava
     duas linhas e empurrava o campo para fora da área visível. Os atalhos
     continuam funcionando e estão documentados em Configurações. */
  @media (max-width: 639px) {
    .composer__hint { display: none; }
    .composer { padding-inline: var(--sp-4); padding-bottom: var(--sp-4); }
    .msg { padding-inline: var(--sp-4); }
    .chat__intro { padding: var(--sp-7) var(--sp-4) var(--sp-6); }
    /* O padding da esquerda continua reservando o espaço do botão da gaveta;
       só o da direita encolhe. */
    .topbar { gap: var(--sp-3); padding-right: var(--sp-4); }
    .topbar__topic { display: none; }
    .home { padding: var(--sp-7) var(--sp-4) var(--sp-9); }
    .tabs { overflow-x: auto; scrollbar-width: none; }
    .tabs::-webkit-scrollbar { display: none; }
  }

  /* Alvo de toque mínimo no mobile, sem inflar a interface no desktop. */
  @media (pointer: coarse) {
    .btn--icon { width: 40px; height: 40px; }
    .item { min-height: 40px; }
  }
}