/* Paleta Estilo Laundry (1.4 dos requisitos). Terracota só em detalhes: contraste baixo para texto.
   Roxo = "precisa de você" (ações principais, esperas, item atual). */
@font-face {
  font-family: "Figtree"; font-weight: 300 900; font-display: swap;
  src: url("/static/fonts/figtree.woff2") format("woff2");  /* @fontsource-variable/figtree 5.3.0, OFL */
}
:root {
  --azul: #CFDEE5;
  --roxo: #663F7E;
  --terracota: #C79479;
  --petroleo: #445D59;
  --petroleo-escuro: #2F4440;
  --fundo: #F2F6F8;
  --linha: #DCE6EA;
  --texto: #1E2B29;
  --suave: #55625F;
  --erro: #9B2C2C;
  --ok: #2F6B4F;
  --raio: 14px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.5 "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: var(--fundo);
}
a { color: var(--roxo); }
h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 1rem; color: var(--petroleo-escuro); }
h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.muted { color: var(--suave); font-size: .9rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--roxo); outline-offset: 2px; }

/* Menu: coluna estreita no computador (direção A), barra de abas embaixo no celular (direção C). */
.layout { display: flex; min-height: 100vh; }
.nav {
  flex: 0 0 92px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 0; background: var(--petroleo);
}
.nav a, .nav button {
  position: relative; width: 76px; min-height: 56px; padding: 8px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; border-radius: 12px; background: none; color: #E6EEF1;
  font: inherit; font-size: .75rem; text-decoration: none; cursor: pointer;
}
.nav a:hover, .nav button:hover { background: rgba(255, 255, 255, .1); }
.nav a[aria-current="page"] { background: var(--azul); color: var(--petroleo-escuro); font-weight: 700; }
.nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav .badge { position: absolute; top: 4px; right: 14px; background: var(--roxo); }
.nav .nav-logo { min-height: 0; margin-bottom: 12px; padding: 0; }
.nav .nav-logo:hover { background: none; }
.nav-logo img { display: block; width: 64px; height: auto; }
.nav .nav-end { margin-top: auto; }
.nav form { margin: 0; }
.nav .mobile-only { display: none; }
.link { background: none; border: 0; font: inherit; cursor: pointer; width: 100%; text-align: left; color: var(--suave); }
main .link { width: auto; padding: 0; color: var(--roxo); text-decoration: underline; min-height: 0; }
.content { flex: 1; padding: 1.75rem 2rem; min-width: 0; max-width: 1180px; }

@media (max-width: 959px) {
  .layout { display: block; }
  .nav {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 10;
    height: auto; flex-direction: row; justify-content: space-around; gap: 0; overflow: visible;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--linha);
  }
  .nav a { flex: 1; width: auto; color: var(--suave); }
  .nav a:hover { background: none; }
  .nav a[aria-current="page"] { background: none; color: var(--roxo); }
  .nav .nav-logo, .nav .desktop-only { display: none; }
  .nav .mobile-only { display: flex; }
  .nav .badge { right: calc(50% - 22px); }
  .content { padding: 1.25rem 1rem calc(88px + env(safe-area-inset-bottom)); }
}

/* Tela "Mais" e lista de ajustes */
.profile { display: flex; align-items: center; gap: .75rem; background: #fff; border-radius: var(--raio); padding: 1rem; margin-bottom: 1rem; }
.avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--petroleo); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.group-title { font-size: .85rem; font-weight: 600; color: var(--suave); margin: 1.25rem .25rem .4rem; }
.group { background: #fff; border-radius: var(--raio); overflow: hidden; margin: 0 0 1rem; }
.group .row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  width: 100%; min-height: 52px; padding: .5rem 1rem; border: 0; border-bottom: 1px solid var(--fundo); border-radius: 0;
  background: #fff; color: var(--texto); font: inherit; text-decoration: none; text-align: left;
}
.group .row:last-child { border-bottom: 0; }
.group .row:hover { background: var(--fundo); }
.group .row .muted { text-align: right; }
.group .row.danger { justify-content: center; color: var(--erro); font-weight: 600; }

/* Componentes */
.card { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.25rem; margin-bottom: 1rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.stat { background: #fff; border: 1px solid var(--linha); border-top: 4px solid var(--petroleo); border-radius: var(--raio); padding: 1rem; }
.stat h2 { font-size: .9rem; color: var(--suave); font-weight: 600; }
.stat .value { font-size: 1.75rem; font-weight: 700; margin: .25rem 0; color: var(--petroleo); }
.stat p { margin: 0; }
.page-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }

.notice { padding: .75rem 1rem; border-radius: var(--raio); background: #fff; border-left: 4px solid var(--terracota); margin: 0 0 1rem; }
.notice.ok { border-left-color: var(--ok); background: #EEF6F1; }
.notice.error { border-left-color: var(--erro); background: #FBEFEF; }
.tag { display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-size: .85rem; }
.tag.on { background: #E3F0EA; color: var(--ok); }
.tag.off { background: #EEE; color: var(--suave); }
.copy code { display: block; word-break: break-all; background: #fff; border: 1px solid var(--azul); padding: .75rem; border-radius: var(--raio); }

/* Formulários: alvos de toque de pelo menos 44px */
form label { display: block; margin-bottom: 1rem; font-weight: 600; font-size: .95rem; }
input[type=email], input[type=password], input[type=text], input[type=tel], input[type=url], input[type=search], input:not([type]),
input[type=date], input[type=datetime-local], input[type=time], input[type=number], select {
  display: block; width: 100%; margin-top: .35rem; min-height: 44px;
  padding: .5rem .75rem; font: inherit; border: 1px solid #A9BBC3; border-radius: 8px; background: #fff;
}
label.check { display: flex; gap: .6rem; align-items: center; font-weight: 400; min-height: 44px; }
label.check input { width: 22px; height: 22px; accent-color: var(--roxo); }
button, .button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .5rem 1.1rem; font: inherit; font-weight: 600;
  border-radius: 12px; border: 1px solid var(--petroleo); background: #fff; color: var(--petroleo);
  cursor: pointer; text-decoration: none;
}
button.primary, .button.primary { background: var(--roxo); border-color: var(--roxo); color: #fff; }
button.primary:hover, .button.primary:hover { background: #55336A; }
.form { max-width: 520px; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 1rem; align-items: end; }

/* Tabelas viram cartões no celular (sem rolagem horizontal, 6.17) */
table.list { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--azul); border-radius: var(--raio); }
table.list th, table.list td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--azul); vertical-align: top; }
table.list th { font-size: .85rem; color: var(--suave); background: var(--fundo); }
table.list td.detail { font-size: .85rem; word-break: break-word; }
@media (max-width: 959px) {  /* com o menu lateral, abaixo disso 5 colunas não cabem */
  table.list, table.list tbody, table.list tr, table.list td { display: block; width: 100%; }
  table.list thead { display: none; }
  table.list { border: 0; background: none; }
  table.list tr { background: #fff; border: 1px solid var(--azul); border-radius: var(--raio); margin-bottom: .75rem; padding: .5rem 0; }
  table.list td { border: 0; padding: .3rem 1rem; }
  table.list td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--suave); }
}

/* Telas sem login */
.auth { max-width: 420px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.auth-logo { display: block; width: 180px; max-width: 60%; margin: 0 auto 1rem; }
.auth .card { padding: 1.5rem; }
.auth button.primary { width: 100%; }

/* Base de conhecimento */
textarea { display: block; width: 100%; margin-top: .35rem; padding: .6rem .75rem; font: inherit; border: 1px solid #A9BBC3; border-radius: 8px; resize: vertical; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1rem; }
.grid2.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }  /* cards com dt/dd: 4 colunas cortam o texto */
.hint { display: block; font-weight: 400; font-size: .8rem; color: var(--suave); margin-top: .25rem; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.actions form { margin: 0; }
.inline-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; }
.inline-form input[type=text], .inline-form input[type=file] { flex: 1 1 200px; width: auto; margin: 0; }
.inline-form select { flex: 0 1 240px; width: auto; margin: 0; }
.inline-form label { margin: 0; white-space: nowrap; }
.stat .value.text { font-size: 1.1rem; line-height: 1.3; overflow-wrap: break-word; }
.card.highlight { border-left: 4px solid var(--terracota); }
.card.current { border-left: 4px solid var(--ok); }
.content-text { white-space: pre-wrap; background: var(--fundo); border-radius: 8px; padding: .75rem 1rem; margin: .5rem 0; }
.content-text.small { font-size: .9rem; max-height: 16rem; overflow-y: auto; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: .45rem 0; border-bottom: 1px solid var(--fundo); }
details.card > summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; }
details.card > summary::before { content: "▸"; margin-right: .5rem; color: var(--petroleo); }
details.card[open] > summary::before { content: "▾"; }
details.card > summary h2 { margin: 0; }
fieldset.checklist { border: 1px solid var(--azul); border-radius: 8px; margin: 0 0 1rem; max-height: 20rem; overflow-y: auto; }
.chunk { border-top: 1px solid var(--azul); padding: .75rem 0; }
.chunk-head { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; align-items: center; }
.tokens { margin: 1rem 0; }
.stat.warn { border-top-color: var(--terracota); }
.stat.alert { border-top-color: var(--erro); }
.tag.warn { background: #F6EBE4; color: #7A4A30; }
.tag.alert, .tag.st-em-conflito { background: #FBEFEF; color: var(--erro); }
.tag.st-vigente { background: #E3F0EA; color: var(--ok); }
.tag.st-pendente, .tag.st-agendado { background: #F6EBE4; color: #7A4A30; }
.tag.st-vencido, .tag.st-sem-conteúdo-aprovado { background: #EEE; color: var(--suave); }

/* Simulador */
.chat { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.bubble { max-width: min(80%, 560px); padding: .5rem .75rem; border-radius: var(--raio); background: #fff; border: 1px solid var(--azul); }
.bubble.cliente { align-self: flex-end; background: #E7F1EC; border-color: #CFE3D8; }
.bubble.humano { border-left: 4px solid var(--terracota); }
/* Central: visão da loja, como no WhatsApp do celular (loja à direita, cliente à esquerda). */
.chat.loja .bubble.cliente { align-self: flex-start; background: #fff; border-color: var(--azul); }
.chat.loja .bubble.ia, .chat.loja .bubble.humano, .chat.loja .run { align-self: flex-end; }
.chat.loja .bubble.ia, .chat.loja .bubble.humano { background: #E7F1EC; border-color: #CFE3D8; }
.who-said { display: block; font-size: .75rem; color: var(--suave); }
.bubble-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.run { font-size: .85rem; color: var(--suave); max-width: min(80%, 560px); }
.run summary { cursor: pointer; }
.run dl { display: grid; grid-template-columns: max-content 1fr; gap: .1rem .75rem; margin: .5rem 0; }
.run dt { font-weight: 600; }
.run dd { margin: 0; overflow-wrap: anywhere; }
.steps { margin: 0; padding-left: 1.25rem; overflow-wrap: anywhere; }
.notice p { margin: 0 0 .5rem; }
.badge { display: inline-block; min-width: 1.4em; padding: 0 .4em; border-radius: 999px; background: var(--erro); color: #fff; font-size: .8rem; font-weight: 700; text-align: center; }
.badge[hidden] { display: none; }
.tabs { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-bottom: 1rem; }
.tabs a { padding: .4rem 0; text-decoration: none; border-bottom: 3px solid transparent; }
.tabs a[aria-current="page"], .tabs a.on { border-bottom-color: var(--roxo); font-weight: 600; color: var(--petroleo); }
tr.row-alert td:first-child { box-shadow: inset 4px 0 0 var(--erro); }
.media-note { font-size: .9rem; color: var(--suave); overflow-wrap: anywhere; }
@media (max-width: 767px) { .bubble, .run { max-width: 100%; } }
/* Avaliação da resposta pela equipe (etapa 5) */
.rate { font-size: .85rem; color: var(--suave); max-width: min(80%, 560px); }
.chat.loja .rate { align-self: flex-end; }
.rate summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: .4rem; }
.rate form { background: #fff; border: 1px solid var(--fundo); border-radius: 8px; padding: .75rem; margin-top: .25rem; color: inherit; }
fieldset.choice { border: 0; padding: 0; margin: 0 0 .5rem; display: flex; gap: 1rem; flex-wrap: wrap; }
fieldset.choice legend { font-weight: 600; margin-bottom: .25rem; }
.case { border-bottom: 1px solid var(--fundo); padding: .5rem 0; }
.case p { margin: .2rem 0; }
p.small { font-size: .9rem; overflow-wrap: anywhere; }
@media (max-width: 767px) { .rate { max-width: 100%; } }
/* Monitoramento e indicadores (etapa 5) */
dl.facts { display: grid; grid-template-columns: minmax(7rem, 40%) minmax(0, 1fr); gap: .35rem 1rem; margin: 0 0 .75rem; }
dl.facts dt { font-weight: 600; }
dl.facts dd { margin: 0; overflow-wrap: break-word; }
dl.facts .tag { white-space: normal; }
@media (max-width: 767px) { dl.facts { grid-template-columns: 1fr; } dl.facts dd { margin-bottom: .4rem; } }
.print-only { display: none; }
@media print {
  .nav, .no-print { display: none !important; }
  .print-only { display: block; }
  .layout, main { display: block; margin: 0; padding: 0; }
  .card, .stat { break-inside: avoid; }
}

/* Conversas (etapa 5.5, parte B): fila | conversa | cliente no computador; uma tela por vez no celular. */
.content.bleed { padding: 0; max-width: none; }
.inbox { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: start; }
.queue { grid-row: 1 / span 2; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: #fff; border-right: 1px solid var(--linha); }
.thread { height: 100vh; display: flex; flex-direction: column; min-width: 0; }
.thread-empty { align-items: center; justify-content: center; color: var(--suave); }
.client { background: #fff; border-top: 1px solid var(--linha); padding: 1.25rem; }
@media (min-width: 1280px) {
  .inbox { grid-template-columns: 320px minmax(0, 1fr) 300px; }
  .client { grid-column: 3; grid-row: 1; position: sticky; top: 0; height: 100vh; overflow-y: auto; border-top: 0; border-left: 1px solid var(--linha); }
  .client-link { display: none !important; }
}

.queue-head { padding: 1.25rem 1rem .5rem; }
.queue-head h1 { margin-bottom: .75rem; }
.queue-head .notice { font-size: .9rem; margin-bottom: .75rem; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pills a, .pills summary {
  display: inline-flex; cursor: pointer; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--linha); background: #fff; color: var(--petroleo-escuro); font-size: .875rem; text-decoration: none;
}
.pills summary { list-style: none; }
.pills summary::-webkit-details-marker { display: none; }
.pills a[aria-current], .pills summary[aria-current], .pills details[open] > summary { background: var(--petroleo); border-color: var(--petroleo); color: #fff; font-weight: 600; }
.period { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.pills details.dates { display: contents; }
.pills details.dates form { flex-basis: 100%; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: .75rem; }
.pills details.dates label { display: inline-flex; align-items: center; gap: .4rem; }
.pills details.dates input[type=date] { width: auto; margin: 0; }
.queue-list { list-style: none; margin: 0; padding: 0 0 1rem; }
.queue-group { font-size: .8rem; font-weight: 600; color: var(--suave); padding: .9rem 1rem .25rem; }
.queue-empty { padding: 1rem; color: var(--suave); }
.q-item { display: flex; gap: 12px; padding: 12px 16px; color: var(--texto); text-decoration: none; }
.q-item:hover { background: var(--fundo); }
.q-item[aria-current] { background: #EFE8F3; }
.q-item .avatar { width: 40px; height: 40px; background: var(--azul); color: var(--petroleo-escuro); }
.avatar.waiting, .q-item .avatar.waiting { background: var(--roxo); color: #fff; }
.q-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.q-top { display: flex; justify-content: space-between; gap: 8px; }
.q-top strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-time { flex: none; font-size: .8rem; color: var(--suave); }
.q-item.waiting .q-time { color: var(--roxo); font-weight: 700; }
.q-line { font-size: .875rem; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.q-tags .tag { font-size: .75rem; }

.thread-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--linha); }
.thread-title { flex: 1 1 220px; min-width: 0; }
.thread-bar { padding: 10px 20px; background: #fff; border-bottom: 1px solid var(--linha); }
.thread-title h1 { font-size: 1.25rem; margin: 0; }
.thread-title p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 0; }
.icon-btn { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--petroleo); }
.icon-btn:hover { background: var(--fundo); }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.back { display: none; }
.menu-pop { position: relative; }
.menu-pop > summary { list-style: none; }
.menu-pop > summary::-webkit-details-marker { display: none; }
.menu-pop .pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 260px;
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 12px 30px -12px rgba(30, 43, 41, .35);
}
.menu-pop .pop label { margin: 0; }
.menu-pop .pop select { margin: 0; }
.menu-pop .pop.up { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }
.menu-pop .pop input { margin: 0; }
.composer .attach { align-self: flex-end; }
.pop form, .pop-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.pop button { width: 100%; }
.mobile-actions { display: none; }
.client-back { display: none; align-items: center; gap: 6px; min-height: 44px; margin-bottom: 8px; font-weight: 600; text-decoration: none; }
.client-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.thread-body { flex: 1; overflow-y: auto; padding: 20px; }
.thread-body .chat { margin-bottom: 0; }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 12px 20px; background: #fff; border-top: 1px solid var(--linha); }
.composer textarea { flex: 1; margin: 0; min-height: 48px; border-radius: var(--raio); resize: vertical; }
.composer button { min-height: 48px; }
.chat.loja .bubble { border: 0; border-radius: 16px; }
.chat.loja .bubble.cliente { border: 1px solid var(--linha); border-top-left-radius: 4px; }
.chat.loja .bubble.ia, .chat.loja .bubble.humano { border-top-right-radius: 4px; }

.client h2 { font-size: .95rem; color: var(--petroleo-escuro); margin: 1.25rem 0 .5rem; }
.client-card { display: flex; align-items: center; gap: 12px; }
.client-card p { margin: 0; }
.client-name { font-weight: 700; }
.client .notice { margin-top: 1rem; }
.reason { background: #F6EEE9; border-radius: var(--raio); padding: 12px 14px; margin-top: 1rem; }
.reason h2 { font-size: .85rem; color: #7A4A30; margin: 0 0 4px; }
.reason p { margin: 0; }
.note { margin: .5rem 0; }

@media (max-width: 959px) {
  .inbox { display: block; }
  .thread { height: auto; display: block; }
  .thread-empty { display: none; }
  .queue { position: static; height: auto; border-right: 0; background: none; }
  .q-item { background: #fff; margin: 0 1rem 8px; border-radius: var(--raio); }
  .queue-group { padding-left: 1.25rem; }
  .content.bleed { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  /* conversa aberta: tela cheia, sem a barra de abas (volta pela seta) */
  body.focus .nav, body.focus .queue { display: none; }
  body.focus .content.bleed { padding-bottom: 0; }
  .back { display: inline-flex; }
  .thread-head { position: sticky; top: 0; z-index: 5; padding: 10px 12px; }
  /* topo numa linha: voltar, nome, Assumir, menu ⋯ e (i); a faixa de botões do computador some */
  .thread-bar { display: none; }
  .thread-head { flex-wrap: nowrap; gap: 4px; padding: 8px 6px 8px 4px; }
  .thread-title { flex: 1 1 0; }
  .thread-title h1 { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .thread-title h1 .muted, .thread-title .who-line { display: none; }
  .thread-title p { flex-wrap: nowrap; overflow: hidden; }
  .thread-title .tag { white-space: nowrap; }
  body.focus .thread { display: flex; flex-direction: column; min-height: 100dvh; }
  .mobile-actions { display: flex; align-items: center; gap: 2px; }
  .mobile-actions form { margin: 0; }
  .mobile-actions button.primary { padding: 0 14px; }
  .mobile-actions .pop { width: min(280px, 85vw); }
  /* dados do cliente: tela própria, aberta pelo (i) */
  .client { display: none; }
  .client:target, .client:has(:target) {
    display: block; position: fixed; inset: 0; z-index: 30; overflow-y: auto;
    border-top: 0; padding: 8px 16px calc(24px + env(safe-area-inset-bottom));
  }
  .client-back { display: inline-flex; }
  .thread-body { padding: 16px 12px; }
  .composer { position: sticky; bottom: 0; z-index: 5; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .client { border-top: 8px solid var(--fundo); }
}

/* Lista e detalhe (etapa 5.5, parte C): Clientes, Respostas e Simulador. Reaproveita a coluna da fila (.queue). */
.split { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: start; }
.pane { padding: 1.75rem 2rem; min-width: 0; max-width: 920px; }
.pane-empty { color: var(--suave); }
.split > .pane-empty { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.pane-title { font-size: 1.25rem; color: var(--petroleo-escuro); margin: 0 0 1rem; }
.back-link { display: none; margin: 0 0 .5rem; }
.list-title { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.list-title h1 { margin: 0; }
.list-title .button { padding: 0 14px; }
.queue-head > .muted { margin: 0 0 .5rem; }
.attention { margin: 0 0 .75rem; }
.attention a.tag { text-decoration: none; }
.list-search { display: flex; gap: 6px; margin: 0 0 .75rem; }
.list-search input { flex: 1; min-width: 0; margin: 0; }
.list-search button { flex: none; }
.list-search.stack { flex-direction: column; }
/* busca: campo arredondado com lupa, sem botão visível (Enter ou a tecla de busca do celular envia) */
.list-search input[type=search] {
  min-height: 44px; padding: 0 14px 0 40px; border: 1px solid transparent; border-radius: 12px;
  background: #EEF3F5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2355625F' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center;
}
.list-search input[type=search]:focus { background-color: #fff; border-color: #A9BBC3; }
.list-search input[type=search]::-webkit-search-cancel-button { cursor: pointer; }
.list-links { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .75rem 0 0; font-size: .9rem; }
.q-title { font-weight: 600; }
@media (max-width: 959px) {
  .split { display: block; }
  body.detail .split > .queue { display: none; }
  .split > .pane-empty { display: none; }
  .pane { padding: 1.25rem 1rem; }
  .back-link { display: block; }
}

/* Busca de conversas (etapa 5.5): trecho da mensagem com o termo marcado; a mensagem aberta pela busca fica destacada. */
.search-info { font-size: .875rem; margin: 0; }
.search-info a { margin-left: .25rem; }
.q-snippet { font-size: .875rem; color: var(--texto); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.q-snippet mark { background: #F3DCCB; color: inherit; border-radius: 3px; padding: 0 1px; }
.bubble { scroll-margin: 90px 0; }
.bubble:target { outline: 3px solid var(--terracota); outline-offset: 2px; }

/* Ajustes (etapa 5.5, parte E): lista com a situação de cada ajuste, formulários em blocos e "Salvar" fixo. */
.settings-col .group-title, .settings-col .group { margin-left: 1rem; margin-right: 1rem; }
.settings-col .group { border: 1px solid var(--linha); }
.group .row[aria-current] { background: var(--fundo); box-shadow: inset 3px 0 0 var(--roxo); font-weight: 600; }
.group .row .muted, .group .row .tag { font-weight: 400; font-size: .8rem; }
.group .row > .muted, .group .row > .tag { flex: none; white-space: nowrap; }
.group .row .row-body .muted { text-align: left; }
ul.group { list-style: none; padding: 0; }
.row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-body .muted, .row-body .detail { font-size: .85rem; overflow-wrap: break-word; }
.row-body .detail { color: var(--suave); }
.row-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; font-size: .8rem; }
.people .row, .log .row { justify-content: flex-start; }
.log .row { align-items: flex-start; padding-top: .75rem; padding-bottom: .75rem; }
.avatar.off { background: #B8C2C0; }
.pane .group { border: 1px solid var(--linha); }
.filter-box { margin-bottom: 1rem; }
.filter-box > summary {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem; list-style: none; cursor: pointer;
  border: 1px solid var(--petroleo); border-radius: 12px; background: #fff; color: var(--petroleo); font-weight: 600;
}
.filter-box > summary::-webkit-details-marker { display: none; }
.filter-box > summary::after { content: "▾"; font-size: .8rem; }
.filter-box[open] > summary::after { content: "▴"; }
.filter-box .filters { margin: .75rem 0 0; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem 1.25rem; }
.filter-box .filters label, .filter-box .filters > button, .filter-box .filters > a { margin-bottom: .75rem; }
.filter-box .filters > a { align-self: center; }

.settings-form { margin-bottom: 1rem; }
fieldset.block { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.25rem; margin: 0 0 1rem; min-width: 0; }
fieldset.block legend { float: left; width: 100%; padding: 0; margin-bottom: .9rem; font-weight: 700; font-size: 1.05rem; color: var(--petroleo-escuro); }
fieldset.block legend + * { clear: left; }
fieldset.block legend:has(+ .hint) { margin-bottom: .2rem; }
fieldset.block legend + .hint { margin: 0 0 1rem; font-size: .85rem; }
fieldset.block > :last-child { margin-bottom: 0; }
.hours { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; font-weight: 600; font-size: .95rem; }
.hours > span { flex-basis: 100%; }
.hours label { display: flex; align-items: center; gap: .4rem; margin: 0; font-weight: 400; }
.hours input, input.short { width: 5rem; margin-top: 0; text-align: center; }
label > input.short { margin-top: .35rem; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 1rem; }
.save-bar {
  position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end;
  margin: 0 -2rem; padding: .75rem 2rem; background: rgba(242, 246, 248, .94); border-top: 1px solid var(--linha);
  backdrop-filter: blur(4px);
}
@media (max-width: 959px) {
  .settings-col .group-title, .settings-col .group { margin-left: 0; margin-right: 0; }
  .settings-col { padding: 0 1rem; }
  .settings-col .queue-head { padding-left: 0; padding-right: 0; }
  .save-bar { bottom: calc(var(--tabbar, 64px) + env(safe-area-inset-bottom)); margin: 0 -1rem; padding: .75rem 1rem; }
}
/* Nas páginas de largura total, o "Alterações salvas" vira aviso flutuante que some sozinho. */
.content.bleed > .notice.ok {
  position: fixed; top: 1rem; left: 50%; z-index: 30; width: max-content; max-width: calc(100% - 2rem);
  transform: translateX(-50%); margin: 0; box-shadow: 0 6px 20px rgba(47, 68, 64, .18);
  animation: toast-out 5s forwards;
}
@media (min-width: 960px) { .content.bleed > .notice.ok { left: calc(50% + 46px); } }
@keyframes toast-out { 0%, 80% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

/* Ajuste fino (etapa 5.5): campos em pares iguais, arquivo no padrão dos campos, botões da barra com espaço. */
.pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
@media (max-width: 599px) { .pairs { grid-template-columns: 1fr; } }
.save-bar { gap: .5rem; }
@media (max-width: 959px) { .save-bar button { flex: 1; width: auto; } }
.list-links a[aria-current] { font-weight: 700; text-decoration: none; color: var(--petroleo-escuro); }
input[type=file] {
  display: block; width: 100%; min-height: 44px; margin-top: .35rem; padding: .3rem .4rem;
  font: inherit; font-size: .9rem; font-weight: 400; color: var(--suave);
  border: 1px dashed #A9BBC3; border-radius: 8px; background: #fff;
}
input[type=file]::file-selector-button {
  margin-right: .75rem; padding: .45rem .9rem; font: inherit; font-weight: 600; color: var(--petroleo);
  border: 1px solid var(--petroleo); border-radius: 10px; background: #fff; cursor: pointer;
}
.card > * + .actions, .card form + .actions { margin-top: .75rem; }
.send-form textarea { margin-top: 0; }
.send-form .hint { margin: .4rem 0 .75rem; }
@media (max-width: 599px) {
  /* No celular, os botões de um cartão ocupam a largura toda e ficam do mesmo tamanho. */
  .card .inline-form > button, .card .actions > button, .card .actions > .button, .card .actions > form { flex: 1 1 100%; }
  .card .actions > form > button { width: 100%; }
  input[type=file] { font-size: .8rem; }
  input[type=file]::file-selector-button { margin-right: .5rem; padding: .4rem .7rem; }
}
.pills details.dates label > span { min-width: 1.8rem; }
.read-filters { max-width: 760px; margin-bottom: 1rem; }
.read-filters .list-search { margin-bottom: .75rem; }