/* ═══════════════════════════════════════════════════════════════════
   A CASA DO CLIENTE (.cm-*) — celular E desktop
   ───────────────────────────────────────────────────────────────────
   Desenhada em 27/08/2026 para o celular e estendida ao desktop em
   28/08 (pedido dele: "simplificar as telas"). Tudo aqui é
   body.mode-client — a agência (modo editor) nunca vê nada disto.

   O que este arquivo veste:
     • a HOME (.cm-home) — a tela de chegada nos DOIS tamanhos: no
       celular, coluna cheia; no desktop, coluna centrada com mais ar;
     • a aba MENSAGENS (#mensagensSection, .cm-msgs-*);
     • o cabeçalho compacto do cliente (encolhe o .cw-header por CSS);
     • SÓ NO CELULAR: a barra de baixo (.cm-nav) e a folha "Mais"
       (.cm-veu/.cm-sheet) — no desktop a régua de abas continua.

   Nada de cor nova: só os tokens da marca — que o white label da
   agência já sobrescreve sozinho no modo cliente.
   ═══════════════════════════════════════════════════════════════════ */

/* fora do celular do cliente, a barra e a folha não existem */
.cm-nav, .cm-veu { display: none; }
/* a aba Mensagens segue o padrão das outras seções (setTab mostra) */
#mensagensSection { display: none; }
/* Mensagens e Início são do CLIENTE: a agência editando não os tem */
.mode-editor #tabMensagens,
.mode-editor #mensagensSection { display: none !important; }

/* ═══ CABEÇALHO COMPACTO (modo cliente, todas as larguras) ══════════
   Status, segmento e e-mail são ficha de agência; para o cliente
   sobra o que o identifica: foto, nome, @handle e a logo da agência. */
body.mode-client .cw-eyebrow,
body.mode-client .cw-badge { display: none; }
body.mode-client .cw-meta .cw-meta-item:not(:first-child),
body.mode-client .cw-meta .cw-meta-sep,
body.mode-client .cw-meta .cw-meta-empty { display: none; }
body.mode-client .cw-meta { margin-top: 0; }
body.mode-client .cw-avatar {
  width: 48px; height: 48px; border-radius: 14px; font-size: 17px;
}
body.mode-client .cw-name { font-size: 20px; }
body.mode-client .cw-header-body { padding: 16px 20px; }

/* ═══ A HOME (.cm-home) — os componentes, nos dois tamanhos ═════════ */
body.mode-client .cm-home {
  padding: 18px 16px 8px;
  max-width: 760px;
  margin: 0 auto;
}

.cmh-hello { margin-bottom: 16px; }
.cmh-hello h1 {
  margin: 0 0 3px; font-size: 21px; font-weight: 600;
  color: var(--text-primary); line-height: 1.3;
}
.cmh-hello p { margin: 0; font-size: 13.5px; color: var(--text-secondary); }

/* ── o cartão de atenção: a primeira pergunta da tela ─────────────── */
.cm-hero {
  background: var(--brand-faint); border: 1px solid var(--brand-ring);
  border-radius: var(--radius-xl); padding: 18px 16px; margin-bottom: 14px;
}
.cm-hero-corpo { display: flex; gap: 14px; align-items: flex-start; }
.cm-hero-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.cm-hero-eyebrow {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 8px;
}
.cm-hero-tit {
  font-size: 18.5px; font-weight: 600; line-height: 1.32;
  color: var(--text-primary); margin-bottom: 6px;
}
.cm-hero-sub { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); margin-bottom: 14px; }
.cm-hero-thumb {
  position: relative; flex: 0 0 104px; width: 104px; height: 130px;
  border-radius: var(--radius); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--text-muted);
}
.cm-hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-hero-tipo {
  position: absolute; top: 8px; right: 8px;
  display: flex; align-items: center; gap: 4px;
  background: rgba(18,19,26,0.62); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 12px; pointer-events: none;
}
.cm-hero-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 12.5px; color: var(--text-secondary); min-width: 0;
}
.cm-hero-meta strong {
  font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-hero-meta svg { flex: 0 0 auto; color: var(--text-muted); }

/* "você está em dia": a boa notícia também merece cartão — mas sem
   botão, porque não há nada a fazer (e é essa a notícia) */
.cm-hero.cm-hero-ok { background: var(--surface); border-color: var(--border); text-align: center; }
.cm-hero-ok .cm-hero-emoji { font-size: 34px; display: block; margin-bottom: 8px; }
.cm-hero-ok .cm-hero-tit { display: block; margin-bottom: 4px; }
.cm-hero-ok .cm-hero-sub { display: block; margin-bottom: 2px; }

/* o botão principal — o mesmo desenho da tela de aprovação */
.cm-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 48px; padding: 12px 16px; border-radius: var(--radius);
  border: 1px solid transparent; width: 100%;
  background: var(--brand); color: #fff; cursor: pointer;
  font-family: var(--fonte); font-size: 14.5px; font-weight: 600;
  transition: all var(--transition); white-space: nowrap;
}
.cm-btn:active { background: var(--brand-dark); }
.cm-btn:hover { background: var(--brand-dark); }

/* ── cartões da Home ──────────────────────────────────────────────── */
.cm-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  margin-bottom: 14px; overflow: hidden;
}
.cm-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 16px 4px;
}
.cm-card-head h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.cm-link {
  border: 0; background: none; padding: 4px 0; cursor: pointer;
  font-family: var(--fonte); font-size: 13px; font-weight: 600; color: var(--brand);
}

/* ── próxima publicação ───────────────────────────────────────────── */
.cm-next {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; border: 0; background: none; cursor: pointer;
  font-family: var(--fonte); text-align: left;
}
.cm-next:hover, .cm-next:active { background: var(--surface-hover); }
.cm-next-ico {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-faint); color: var(--brand);
}
.cm-next-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-next-eyebrow { font-size: 11.5px; font-weight: 600; color: var(--brand); white-space: nowrap; }
.cm-next-tit {
  font-size: 14.5px; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-next-meta { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-secondary); }
.cm-pill {
  flex: 0 0 auto; padding: 5px 11px; border-radius: 14px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.cm-pill-agendada { background: var(--warning-bg); color: var(--warning); }
.cm-pill-espera   { background: var(--brand-faint); color: var(--brand); }
.cm-pill-ok       { background: var(--success-bg); color: var(--success); }

/* ── entregas esperando (Produções) ───────────────────────────────── */
.cm-ent {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 16px; border: 0; border-top: 1px solid var(--border);
  background: none; cursor: pointer; font-family: var(--fonte); text-align: left;
}
.cm-ent:first-of-type { border-top: 0; }
.cm-ent:hover, .cm-ent:active { background: var(--surface-hover); }
.cm-ent-thumb {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; overflow: hidden;
  display: grid; place-items: center; background: var(--brand-faint); color: var(--brand);
}
.cm-ent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-ent-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-ent-tit {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-ent-meta { font-size: 12.5px; color: var(--text-secondary); }
.cm-go { flex: 0 0 auto; color: var(--text-muted); font-size: 18px; }

/* ── atividade recente ────────────────────────────────────────────── */
.cm-tl { padding: 8px 16px 14px; }
.cm-tl-item {
  position: relative; display: flex; gap: 12px; width: 100%;
  padding: 9px 0; border: 0; background: none; cursor: pointer;
  font-family: var(--fonte); text-align: left;
}
/* o fio que liga os pontos — some no último */
.cm-tl-item::before {
  content: ''; position: absolute; left: 17px; top: 44px; bottom: -9px;
  width: 2px; background: var(--border);
}
.cm-tl-item:last-child::before { display: none; }
.cm-tl-ico {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 12px;
  display: grid; place-items: center; position: relative; z-index: 1;
  background: var(--brand-faint); color: var(--brand);
}
.cm-tl-ico.cm-tl-ok  { background: var(--success-bg); color: var(--success); }
.cm-tl-ico.cm-tl-msg { background: var(--feed-bg, var(--brand-faint)); color: var(--feed, var(--brand)); }
.cm-tl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; }
.cm-tl-quando { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand); }
.cm-tl-tit {
  font-size: 13.5px; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-tl-txt { font-size: 12.5px; color: var(--text-secondary); }
.cm-vazio {
  padding: 22px 16px 26px; text-align: center;
  font-size: 13px; line-height: 1.55; color: var(--text-secondary);
}

/* ── acesso rápido ──────────────────────────────────────────────────
   Dois conjuntos, um por tamanho (ver cliente-mobile.js#_acessoHtml):
   .cm-qa-cel = atalhos do celular (as abas de todo dia);
   .cm-qa-desk = as áreas que saíram da régua do desktop. */
.cm-qa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 10px 10px 14px; }
.cm-qa-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 10px 2px; border: 0; background: none; border-radius: var(--radius);
  cursor: pointer; font-family: var(--fonte);
  font-size: 11.5px; font-weight: 500; color: var(--text-secondary);
}
.cm-qa-item svg { color: var(--brand); }
.cm-qa-item:hover, .cm-qa-item:active { background: var(--surface-hover); }
/* a bolinha de "tem mensagem nova" — no desktop a aba saiu da régua e
   este atalho é quem carrega o aviso */
.cm-qa-badge {
  position: absolute; top: 4px; left: calc(50% + 8px);
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  border: 2px solid var(--surface); box-sizing: content-box;
}
/* no celular, os itens do desktop ficam de fora (as áreas deles moram
   na folha "Mais") */
@media (max-width: 768px) {
  .cm-qa-desk { display: none; }
}

/* ═══ MENSAGENS — a aba, nos dois tamanhos ══════════════════════════ */
.cm-msgs-inner { max-width: 720px; margin: 0 auto; padding: 18px 16px 40px; }
.cm-msgs-cab { margin-bottom: 16px; }
.cm-msgs-cab h1 {
  margin: 0 0 3px; font-size: 21px; font-weight: 600;
  color: var(--text-primary); line-height: 1.3;
}
.cm-msgs-cab p { margin: 0; font-size: 13.5px; color: var(--text-secondary); }

.cm-conv {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 14px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); cursor: pointer;
  font-family: var(--fonte); text-align: left;
}
.cm-conv:hover, .cm-conv:active { border-color: var(--brand-light); }
.cm-conv-thumb {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px; overflow: hidden;
  display: grid; place-items: center; background: var(--bg); color: var(--text-muted);
}
.cm-conv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-conv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-conv-tit {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--text-primary);
}
.cm-conv-tit > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-conv-nova { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--brand); }
.cm-conv-msg {
  font-size: 13px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-conv-quando { flex: 0 0 auto; align-self: flex-start; font-size: 11.5px; color: var(--text-muted); }

/* a conversa aberta */
.cm-volta {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 2px 0 14px; padding: 8px 12px 8px 6px;
  border: 0; background: none; border-radius: var(--radius);
  font-family: var(--fonte); font-size: 13.5px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer;
}
.cm-volta:hover, .cm-volta:active { background: var(--surface-hover); color: var(--text-primary); }
.cm-fio { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.cm-msg { max-width: 84%; display: flex; flex-direction: column; gap: 3px; }
.cm-msg-caixa {
  padding: 10px 13px; border-radius: var(--radius-lg);
  font-size: 14px; line-height: 1.5; color: var(--text-primary);
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.cm-msg-info { font-size: 11px; color: var(--text-muted); padding: 0 4px; }
.cm-msg.de-agencia { align-self: flex-start; }
.cm-msg.de-agencia .cm-msg-caixa {
  background: var(--surface); border: 1px solid var(--border);
  border-bottom-left-radius: 6px;
}
.cm-msg.de-cliente { align-self: flex-end; align-items: flex-end; }
.cm-msg.de-cliente .cm-msg-caixa {
  background: var(--brand-faint); border: 1px solid var(--brand-ring);
  border-bottom-right-radius: 6px;
}

.cm-fio-pub {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 13px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); cursor: pointer;
  font-family: var(--fonte); text-align: left;
}
.cm-fio-pub:hover, .cm-fio-pub:active { border-color: var(--brand-light); }

.cm-resp { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.cm-resp textarea {
  flex: 1; border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 12px 13px; font-family: var(--fonte); font-size: 15px; line-height: 1.45;
  color: var(--text-primary); background: var(--surface); resize: none; min-height: 46px;
}
.cm-resp textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.cm-resp .cm-btn { width: auto; flex: 0 0 auto; min-height: 46px; padding: 12px 16px; }
.cm-resp .cm-btn:disabled { opacity: .45; cursor: default; }

/* ═══ módulos desligados: as portas somem junto com as abas ═════════ */
body.sem-planejamento .cm-so-planejamento { display: none !important; }
body.sem-producoes .cm-so-producoes,
body.prod-cliente-off .cm-so-producoes { display: none !important; }

/* ═══ DESKTOP (≥769px): a mesma tela, com mais ar ═══════════════════
   Uma coluna centrada de propósito — o painel de duas colunas cheio de
   números é exatamente a cara de sistema que este redesenho veio tirar. */
@media (min-width: 769px) {
  /* ── a régua reduzida (28/08, pedido dele) ────────────────────────
     Só o essencial fica na navegação: Início · Agenda · Conteúdos ·
     Produções. Mensagens, Tarefas, Reuniões, Marca e Métricas viraram
     portas nomeadas no "Acesso rápido" do Início — saem da régua, não
     do produto. Só no MODO CLIENTE: a agência editando precisa de
     todas as abas para trabalhar. */
  body.mode-client #tabMensagens,
  body.mode-client #tabTarefas,
  body.mode-client #tabReunioes,
  body.mode-client #tabMarca,
  body.mode-client #tabMetricas { display: none !important; }
  /* com 4 abas a régua fica CENTRADA (pedido dele, 28/08) — encostada à
     esquerda parecia sobra de menu, não menu */
  body.mode-client .cw-tabs { justify-content: center; }
  /* os atalhos do celular somem: essas abas continuam na régua */
  body.mode-client .cm-qa-cel { display: none; }
  .cm-qa { grid-template-columns: repeat(5, 1fr); }

  /* Os cartões de entrega ficam CENTRADOS no olhar do cliente (28/08,
     pedido dele vendo o link real): a grade da agência cria colunas
     vazias na largura toda e encostava 2 cartões à esquerda. Largura
     fixa + conjunto no centro; a agência mantém a grade de trabalho. */
  body.mode-client #producoesSection .prod-lista {
    /* auto-FIT, não auto-fill: o fill mantém as colunas vazias e o
       "centro" vira o centro das colunas, não dos cartões (medido:
       86px à esquerda, 442 à direita) */
    grid-template-columns: repeat(auto-fit, 340px);
    justify-content: center;
  }
  /* ...e o resto da tela acompanha: título, busca e filtros no centro
     (pedido dele, 28/08 — meio centrado, meio à esquerda parecia
     inacabado). Só no olhar do cliente; a agência trabalha alinhada. */
  body.mode-client #producoesSection .section-header { text-align: center; }
  body.mode-client #producoesSection .prod-bar-cliente { justify-content: center; }
  body.mode-client #producoesSection .prod-busca { flex: 1 1 460px; }
  body.mode-client #producoesSection .prod-filtros { justify-content: center; }

  body.mode-client .cm-home { padding: 30px 20px 60px; }
  .cmh-hello { margin-bottom: 22px; }
  .cmh-hello h1 { font-size: 26px; }
  .cmh-hello p { font-size: 14.5px; }
  .cm-hero { padding: 26px 26px 22px; }
  .cm-hero-tit { font-size: 22px; }
  .cm-hero-sub { font-size: 14.5px; }
  .cm-hero-thumb { flex-basis: 140px; width: 140px; height: 172px; }
  .cm-hero-txt .cm-btn { width: auto; min-width: 240px; }
  .cm-card-head { padding: 17px 20px 4px; }
  .cm-next, .cm-ent { padding: 15px 20px; }
  .cm-tl { padding: 8px 20px 16px; }
  .cm-msgs-inner { padding: 30px 20px 60px; }
  .cm-msgs-cab h1 { font-size: 24px; }
}

/* ═══ SÓ NO CELULAR: barra de baixo, folha "Mais" e a casca ═════════ */
@media (max-width: 768px) {

  /* a régua de 8 abas sai de cena: a navegação do cliente passa a ser
     a barra de baixo + a folha "Mais" (nenhuma aba deixa de existir —
     só muda a porta de entrada) */
  body.mode-client .cw-tabs { display: none; }

  /* o conteúdo precisa de folga para a barra de baixo não cobrir o fim
     da página — folga MAIOR que a barra (≈66px), medida com a MIRA da
     peneira: com 76px o último cartão ainda ficava com o centro
     debaixo da barra no fim da rolagem */
  body.mode-client .main { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }

  /* cabeçalho ainda mais compacto no celular */
  body.mode-client .cw-header-body { padding: 12px 16px; }
  body.mode-client .cw-avatar {
    width: 40px; height: 40px; border-radius: 12px; font-size: 15px;
  }
  body.mode-client .cw-ident { flex: 1 1 auto; padding-right: 46px; }
  body.mode-client .cw-name { font-size: 17px; }
  /* a logo da agência fica no canto, na LINHA do nome — o .cw-header-body
     já é position:relative no celular (06-cliente-conteudos.css) */
  body.mode-client .cw-agency-logo {
    position: absolute; top: 12px; right: 16px;
    width: 38px; height: 38px; border-radius: 10px; font-size: 14px;
  }
  /* o toggle Editar/Ver como cliente é a volta do gerente — continua à
     vista, numa linha própria abaixo do nome (o cliente por link nunca
     o teve: .role-client o esconde, e o cabeçalho dele fica numa linha) */
  body.mode-client .cw-actions { width: 100%; }
  body.mode-client .cw-action-row { justify-content: flex-start; }
  body.mode-client .mode-group { flex: 0 1 320px; }
  /* ⚠️ Não esconder a .cw-actions inteira no role-client: a LOGO DA
     AGÊNCIA mora dentro dela (white label) e sumia junto — pego na
     prova visual de 27/08. O toggle o .role-client já esconde
     (04-reunioes-entrada.css); como a logo é absoluta, a fileira vazia
     não ocupa altura e o cabeçalho do link fica numa linha só. */
  /* "Mais ações" guarda botões que o modo cliente esconde todos —
     sobraria um botão que abre nada */
  body.mode-client .cw-more-btn { display: none; }

  /* ═══ A BARRA DE BAIXO ═══════════════════════════════════════════ */
  body.mode-client .cm-nav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  /* páginas de tela cheia por cima (editor de publicação z-60, coleção
     z-300) já cobrem a barra; estas linhas só evitam o vulto dela em
     transições — mesmo padrão do .bottom-nav da agência */
  body:has(.pub-page.open) .cm-nav,
  body:has(.prod-page.aberta) .cm-nav { display: none; }

  .cm-nav-item {
    position: relative; flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; border: 0; background: none; cursor: pointer;
    font-family: var(--fonte); font-size: 11px; font-weight: 500;
    color: var(--text-secondary);
  }
  .cm-nav-item svg { display: block; }
  .cm-nav-item.is-on { color: var(--brand); font-weight: 600; }
  .cm-nav-item:active { color: var(--brand); }
  .cm-nav-badge {
    position: absolute; top: 1px; left: calc(50% + 6px);
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1;
    border: 2px solid var(--surface); box-sizing: content-box;
  }

  /* ═══ A FOLHA "MAIS" ═════════════════════════════════════════════ */
  body.mode-client .cm-veu.aberta {
    display: flex; align-items: flex-end;
    position: fixed; inset: 0; z-index: 210;
    background: rgba(18,19,26,0.45);
  }
  .cm-sheet {
    width: 100%; background: var(--surface);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 8px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    max-height: 85vh; overflow-y: auto;
    animation: cmSobe .2s ease;
  }
  @keyframes cmSobe { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }
  .cm-sheet::before {
    content: ''; display: block; width: 38px; height: 4px; border-radius: 2px;
    background: var(--border-strong); margin: 6px auto 12px;
  }
  .cm-sheet-tit {
    margin: 0 4px 8px; font-size: 16px; font-weight: 600; color: var(--text-primary);
  }
  .cm-sheet-item {
    display: flex; align-items: center; gap: 13px; width: 100%;
    padding: 14px 8px; border: 0; background: none; cursor: pointer;
    font-family: var(--fonte); text-align: left;
    border-top: 1px solid var(--border);
  }
  .cm-sheet-item:first-of-type { border-top: 0; }
  .cm-sheet-item:active { background: var(--surface-hover); }
  .cm-sheet-ico {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--brand-faint); color: var(--brand);
  }
  .cm-sheet-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .cm-sheet-txt strong { font-size: 14.5px; font-weight: 600; color: var(--text-primary); }
  .cm-sheet-txt small { font-size: 12.5px; color: var(--text-secondary); }
}

/* larguras apertadas (320px): a barra encolhe a letra, nada corta */
@media (max-width: 359px) {
  .cm-nav-item { font-size: 10px; }
  .cm-qa { grid-template-columns: repeat(2, 1fr); }
  .cm-hero-thumb { flex-basis: 88px; width: 88px; height: 110px; }
}