/* ALRIX Connect, in the look of the course "ALRIX · Fluência em IA" (plataforma/site/app.css; the type rule in
   plataforma/docs/design/TIPOGRAFIA-RITMO.md). Paper, ink and one red; Satoshi for titles, Geist for text, Geist Mono for counts
   and times. Four sizes: 14 (times, counts, the small line under a row), 16 (text), 20 (who and what is asked, in a card),
   28 (screen titles; 32 on a computer; 44 only for the sign-in title on a computer). Three weights: 400, 500, 600 (600 only on
   the main button). 2 px corners; groups set apart by space or a hairline; the triangle grid only as a still texture that fades
   out. No gradients as decoration, no heavy shadows. Plain CSS, no build; everything from 'self' (strict CSP: nothing inline;
   the few sizes set from code go through the CSSOM). */
@font-face { font-family: Satoshi; src: url(fonts/satoshi.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Geist; src: url(fonts/geist.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url(fonts/geist-mono.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light dark;
  /* the course's colours (app.css :root): papel, tinta, the red (TERRA, the delta's own fill), fio, suave, tinta2, mudo */
  --bg: #f5f5f0;
  --surface: #f5f5f0;          /* fields and sheets sit on the paper, as in the course (no white cards) */
  --tint: #e9e9e1;             /* suave: hover, pressed, selected, the other person's message */
  --line: #d8dad1;             /* fio */
  --ink: #262922;              /* tinta */
  --muted: #565a50;            /* tinta2: secondary text, 6.5:1 on paper */
  --faint: #6b6e65;            /* mudo: placeholders, icons at rest */
  --accent: #b53b23;           /* TERRA: the one red */
  --accent-ink: #f5f5f0;
  --bloco: #262922; --bloco-t: #f5f5f0; --bloco-t2: #c9cbc0;   /* the course's inverted block: your own messages */
  /* states and marks, inside the ALRIX palette (PALETA_ALRIX.json "ui"): the red for late, urgent and errors; OLIVE, GOLD,
     AMBER and GREEN darkened on paper until text passes AA. One meaning per colour: red = late or wrong, green = done or well,
     amber = needs a look, the highlighter = what the search found. */
  --urgent: #b53b23; --urgent-soft: #f4e4dd;
  --today: #262922;
  --ok: #2f6b4c; --ok-soft: #dde9e0;
  --warn: #7a5c0c; --warn-soft: #f2e5c2;
  --bad: #b53b23;
  --hl: #efe0a6;
  /* the channels: one hue each, from the ALRIX palette's project accents, darkened on paper. Every pair passes 4.5:1 for
     text: the colour on paper, on --tint and on its own -soft, and paper on the colour (tile glyphs, active chips). */
  --ch-teams: #584f94; --ch-teams-soft: #e5e3ef;
  --ch-outlook: #2c5a7f; --ch-outlook-soft: #dce6ee;
  --ch-whatsapp: #16665c; --ch-whatsapp-soft: #d8eae5;
  --ch-alrix: #53651a; --ch-alrix-soft: #e4eacf;
  --ch-gmail: #883f70; --ch-gmail-soft: #f0dfe9;
  --ch-mara: #75580f; --ch-mara-soft: #f1e0b8;
  --ch-on: #f5f5f0;
  --shadow: 0 12px 40px rgba(38, 41, 34, 0.14);
  --backdrop: rgba(38, 41, 34, 0.42);
  --f-titulo: Satoshi, Geist, system-ui, sans-serif;
  --f-texto: Geist, system-ui, sans-serif;
  --f-numero: 'Geist Mono', ui-monospace, monospace;
  --t-meta: 0.875rem;    /* 14 */
  --t-apoio: 1rem;       /* 16 */
  --t-corpo: 1.25rem;    /* 20 */
  --t-secao: 1.25rem;    /* 20: a card's title is set like the ask it carries */
  --t-titulo: 1.75rem;   /* 28; 32 on a computer */
  --t-titulo-d: 2.75rem; /* 44, the sign-in title on a computer */
  --e-dentro: 12px;
  --e-entre: 24px;
  --raio: 2px;
  --grade: 32px 55.4256px;   /* the triangle grid tile (brand/trama.svg): side 32, height 32 x sqrt(3) */
  --nav-h: 62px;
  --pad-l: 20px;             /* a row's left edge (0 inside a card, where the body has its own) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #262922;
    --surface: #262922;
    --tint: #32352d;
    --line: #4a4e43;
    --ink: #f5f5f0;
    --muted: #c9cbc0;
    --faint: #8f9286;
    --accent: #dfa17e;
    --accent-ink: #262922;
    --bloco: #1b1d17; --bloco-t: #f5f5f0; --bloco-t2: #c9cbc0;
    --urgent: #e9a184; --urgent-soft: #4b3d31;
    --today: #f5f5f0;
    --ok: #61c795; --ok-soft: #2b4436;
    --warn: #e6b422; --warn-soft: #463f22;
    --bad: #e9a184;
    --hl: #5b4f22;
    --ch-teams: #bab3e8; --ch-teams-soft: #393651;
    --ch-outlook: #96bfe0; --ch-outlook-soft: #2c3b47;
    --ch-whatsapp: #72cbb8; --ch-whatsapp-soft: #22413b;
    --ch-alrix: #b9cc78; --ch-alrix-soft: #384126;
    --ch-gmail: #e3a8d0; --ch-gmail-soft: #483042;
    --ch-mara: #e8b449; --ch-mara-soft: #4a4026;
    --ch-on: #262922;
    --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    --backdrop: rgba(10, 11, 9, 0.6);
  }
}
@media (min-width: 900px) {
  :root { --t-titulo: 2rem; --e-dentro: 16px; --e-entre: 32px; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-apoio)/1.5 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  overscroll-behavior: none;
}
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 500; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }
.noscript { padding: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.dot-sep { margin: 0 6px; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }   /* the course's focus ring */
.menu-item:focus-visible, .nav-item:focus-visible, .sheet-option:focus-visible, .crow-link:focus-visible, .person-tile:focus-visible,
.thread-row:focus-visible, .ch-strip-item:focus-visible { outline-offset: -3px; }

#app, .shell { height: 100vh; height: 100dvh; }

/* the first frame: the app mark (icons/icon.svg) in its 132 px box, centred, on paper or graphite, as the iOS launch images
   (icons/launch: the same box, the same rounding, the same file's drawing) */
#app.boot { background: var(--bg); }
#app.boot::before {
  content: ""; position: fixed; width: 132px; height: 132px;
  left: calc(50% - 66px); top: calc(50% - 66px);
  left: round(down, 50% - 66px, 1px); top: round(down, 50% - 66px, 1px);
  background: url(icons/icon.svg) center / 100% 100% no-repeat;
}

/* the marks (js/brand.js): the delta in the red, the wordmark in the ink with its "I" in the red */
.delta { display: block; overflow: visible; }
.delta .delta-mark { fill: var(--accent); }
.delta .delta-halo { fill: none; stroke: var(--bg); stroke-width: 6; stroke-linejoin: round; }
.wordmark { display: block; width: auto; height: 22px; color: var(--ink); flex: none; }
.wordmark rect { fill: var(--accent); }
/* the lockup "ALRIX Connect": the wordmark sits on the baseline of the product name (the svg's baseline is its bottom edge) */
.brand-line, .rail-brand { align-items: baseline; gap: 8px; }
.brand-line .wordmark, .rail-brand .wordmark { height: 16px; }
/* the app mark (js/brand.js appMark) opens the lockup: its box sits on the baseline like the wordmark's and moves down by
   half the difference, so the tile is centred on the 16 px letters (24 px on the phone, 20 px in the rail) */
.app-mark { display: block; flex: none; width: 24px; height: 24px; }
.brand-line .app-mark { position: relative; top: 4px; }
.rail-brand .app-mark { width: 20px; height: 20px; position: relative; top: 2px; }
.brand-name { font: 500 var(--t-corpo)/1 var(--f-titulo); letter-spacing: -0.01em; color: var(--ink); }
.brand-line { display: flex; margin-bottom: 14px; }

/* the triangle grid (brand/trama.svg as a mask, in the hairline colour), strong in the middle and gone at the edges */
.login-art::before, .detail-root:has(> .detail-empty)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--line);
  -webkit-mask: url(brand/trama.svg) center / var(--grade) repeat, radial-gradient(circle closest-side, #000 22%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask: url(brand/trama.svg) center / var(--grade) repeat intersect, radial-gradient(circle closest-side, #000 22%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
}

/* ---------- Buttons, fields, keys ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border: 2px solid var(--ink); border-radius: var(--raio);
  background: transparent; color: var(--ink);
  font: 500 var(--t-apoio)/1.15 var(--f-texto);
  cursor: pointer; text-decoration: none; text-align: center; white-space: nowrap;
  transition: transform 0.24s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn:hover { background: var(--tint); }
.btn:active { transform: scale(0.97); transition-duration: 0s; }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.btn.primary { background: var(--ink); color: var(--bg); font-family: var(--f-titulo); font-weight: 600; }
.btn.primary:hover { background: var(--ink); border-color: var(--accent); }
.btn.quiet { border-color: transparent; color: var(--ink); padding: 0 10px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.btn.quiet:hover { background: var(--tint); }
.btn.danger { color: var(--bad); border-color: currentColor; }
.btn.danger:hover { background: var(--urgent-soft); }
.btn.small { min-height: 40px; padding: 0 14px; border-width: 1px; }
.btn.small.primary { border-width: 2px; }
.btn.quiet.small { padding: 0 8px; }
.btn.block { width: 100%; }
.btn .icon { width: 20px; height: 20px; }
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-btn {
  width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--raio); background: transparent; cursor: pointer; color: var(--muted);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.icon-btn:hover { background: var(--tint); color: var(--ink); }
.icon-btn:disabled { opacity: 0.4; cursor: default; }
.icon-btn .icon { width: 22px; height: 22px; }
.icon-btn.spinning .icon { animation: spin 0.7s linear; }
.link-btn { border: 0; background: none; padding: 8px 2px; color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; min-height: 40px; }
.text-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; flex: none;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--raio);
  font: 500 var(--t-meta)/1 var(--f-numero); color: var(--muted); background: var(--bg);
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-weight: 500; color: var(--muted); }
input {
  width: 100%; min-height: 56px; padding: 0 16px;
  border: 1px solid var(--ink); border-radius: var(--raio);
  background: var(--surface); color: var(--ink);
  font: 500 var(--t-corpo)/1.2 var(--f-texto);
}
input[aria-invalid="true"] { outline: 2px solid var(--ink); outline-offset: 3px; }
::placeholder { color: var(--faint); opacity: 1; }
.form-msg { color: var(--ink); font-weight: 500; border-left: 4px solid var(--ink); padding: 2px 0 2px 12px; }
.form-msg.ok { color: var(--ok); border-left-color: var(--ok); }
.stack { display: flex; flex-direction: column; gap: 20px; }
.form { max-width: 420px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.btn-row.center { justify-content: center; }
.note { color: var(--muted); font-size: var(--t-meta); line-height: 1.45; }

/* ---------- Login (the course's acesso: art band, mark and wordmark on its hairline, title, line, form) ---------- */
.login { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.login-art {
  position: relative; flex: none; overflow: hidden;
  height: clamp(132px, 22dvh, 220px); padding-top: var(--safe-t);
  border-bottom: 1px solid var(--line);
}
.login-delta { position: absolute; left: 50%; top: calc(50% + var(--safe-t) / 2); width: clamp(84px, 14dvh, 132px); height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); }
.login-card {
  width: 100%; max-width: 34rem; margin: 0 auto;
  padding: 16px 20px calc(32px + var(--safe-b));
  display: flex; flex-direction: column; gap: var(--e-dentro);
}
.login-top { display: flex; padding: 4px 0 var(--e-dentro); border-bottom: 1px solid var(--line); margin-bottom: calc(var(--e-entre) - var(--e-dentro)); }
.login-brand { position: relative; }
/* the mark before the wordmark on its hairline: both stand on the line's foot (the wordmark's rule stays under it alone); the
   32 px tile moves down 5 px so it is centred on the 22 px letters */
.login-top { align-items: flex-end; gap: 12px; }
.login-top .login-mark { width: 32px; height: 32px; position: relative; top: 5px; }
.login-brand::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--e-dentro) - 1px); height: 1px; background: var(--ink); }
.login-card h1 { font: 500 var(--t-titulo)/1.06 var(--f-titulo); letter-spacing: -0.025em; }
.login-lead { font-size: var(--t-corpo); line-height: 1.45; margin-bottom: calc(var(--e-entre) - var(--e-dentro)); }
.login-form { display: flex; flex-direction: column; gap: 20px; }
.login-form .btn { min-height: 56px; margin-top: calc(var(--e-entre) - 20px); }
#app:has(.login) { overflow-y: auto; }

/* ---------- Shell: phone first ---------- */
.shell { position: relative; }
.panes { display: block; height: 100%; }
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: space-around;
  padding: 0 var(--safe-r) var(--safe-b) var(--safe-l);
  height: calc(var(--nav-h) + var(--safe-b));
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
}
.rail-brand, .rail-search, .nav-item.rail-only { display: none; }
.nav-item {
  position: relative; flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 0; background: none; cursor: pointer;
  color: var(--muted); font-weight: 500; line-height: 1.1;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav-item[aria-current="page"] { color: var(--ink); }
.nav-item[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: calc(50% - 14px); width: 28px; height: 2px; background: var(--ink); }
.nav-icon { display: inline-flex; }
.nav-icon .icon { width: 24px; height: 24px; }
.nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a count beside the icon's top corner, with a ring of paper so it never runs into the glyph */
.badge {
  position: absolute; top: 1px; left: calc(50% + 11px);
  min-width: 20px; height: 20px; padding: 0 4px; border-radius: var(--raio);
  background: var(--muted); color: var(--bg); box-shadow: 0 0 0 2px var(--bg);
  font: 500 var(--t-meta)/20px var(--f-texto); font-variant-numeric: tabular-nums; text-align: center;
}
.badge.strong { background: var(--urgent); color: var(--accent-ink); }
.badge.dot { min-width: 10px; width: 10px; height: 10px; padding: 0; top: 8px; left: calc(50% + 10px); border-radius: 50%; background: var(--warn); }
.badge.dot.ok { background: var(--ok); }
.badge.dot.bad { background: var(--bad); }

.pane-list {
  height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: var(--safe-t) var(--safe-r) calc(var(--nav-h) + var(--safe-b)) var(--safe-l);
  container: list / inline-size;
}
.pane-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 16px 12px 12px var(--pad-l); }
.pane-head-text { min-width: 0; }
.pane-title { font: 500 var(--t-titulo)/1.08 var(--f-titulo); letter-spacing: -0.025em; overflow-wrap: anywhere; }
.pane-sub { min-height: 24px; margin-top: 6px; }
.pane-head .icon-btn { margin-bottom: -6px; }

.pane-detail {
  position: fixed; inset: 0; z-index: 40;
  background: var(--bg);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: var(--safe-t) var(--safe-r) 0 var(--safe-l);
  transform: translateX(100%); visibility: hidden;
  transition: transform 0.38s var(--ease), visibility 0s linear 0.38s;
  container: detail / inline-size;
}
.shell[data-detail="open"] .pane-detail { transform: none; visibility: visible; transition: transform 0.38s var(--ease), visibility 0s; }
.detail-root { position: relative; min-height: 100%; display: flex; flex-direction: column; }
.detail-body { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 8px 20px 28px; display: flex; flex-direction: column; gap: 20px; --pad-l: 0px; }
.detail-body.narrow { gap: 24px; }

.topbar {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: 4px; min-height: 60px; padding: 8px 8px 8px 4px;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.topbar-title { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }
.back-btn { color: var(--ink); }

.actionbar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  padding: 12px 20px calc(12px + var(--safe-b));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.actionbar:empty { display: none; }
.actionbar .btn { flex: 1; max-width: 240px; }

/* the grid fades out under the text (paper in the middle, as the course keeps it "apagada sob o texto") */
.detail-empty { position: relative; margin: auto; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 72px; background: radial-gradient(closest-side, var(--bg) 66%, transparent 100%); }
.detail-empty-mark { width: 56px; height: 56px; border: 1px solid var(--line); border-radius: var(--raio); background: var(--bg); color: var(--ink); display: flex; align-items: center; justify-content: center; }

/* ---------- Sections: a kicker (caps, the second ink, the red bar), a count in mono; a hairline between groups ---------- */
.sec { display: flex; flex-direction: column; padding-top: 14px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 0 12px 4px var(--pad-l); }
.sec-title { display: flex; align-items: baseline; gap: 10px; font: 500 var(--t-meta)/1.2 var(--f-texto); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; min-width: 0; }
.sec-title::before { content: ""; width: 3px; height: 0.95em; flex: none; align-self: center; background: var(--accent); }
.sec > .sec-title { padding: 0 12px 8px var(--pad-l); }
.sec-n { font: 500 var(--t-meta)/1 var(--f-texto); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--ink); }
.sec-link { display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 0 4px 0 8px; font-weight: 500; font-size: var(--t-meta); border-radius: var(--raio); white-space: nowrap; }
.sec-link .icon { width: 18px; height: 18px; }
.sec-link:hover { background: var(--tint); }
.detail-body .sec { padding-top: 0; }

/* ---------- Rows: two dense lines, full width, hairlines between them (DECISOES: "sem cartões arredondados") ---------- */
.rows { padding: 0; }
.crow { position: relative; overflow: hidden; touch-action: pan-y; }
.crow-in { position: relative; display: flex; align-items: stretch; background: var(--bg); transition: background-color 0.15s var(--ease); }
.crow + .crow > .crow-in::before { content: ""; position: absolute; left: calc(var(--pad-l) + 36px); right: 0; top: 0; height: 1px; background: var(--line); z-index: 1; }
.crow-link {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "mark l1 time" "mark l2 n";
  column-gap: 12px; row-gap: 1px; align-items: center;
  padding: 10px 14px 10px var(--pad-l); min-height: 60px;
}
.crow-link > .ch-mark { grid-area: mark; align-self: start; margin-top: 1px; }
.crow-l1 { grid-area: l1; display: flex; align-items: baseline; gap: 8px; min-width: 0; line-height: 1.35; }
.crow-who { flex: 0 1 auto; min-width: 0; max-width: 100%; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow-ctx { flex: 1 1 0; min-width: 2.5em; color: var(--muted); font-size: var(--t-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow-time { grid-area: time; font: 400 var(--t-meta)/1.35 var(--f-texto); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; justify-self: end; }
.crow-time.late { color: var(--urgent); font-weight: 500; }
.crow-l2 { grid-area: l2; display: flex; align-items: center; gap: 6px; min-width: 0; line-height: 1.4; }
.crow-link:not(:has(.crow-n)) .crow-l2 { grid-column: 2 / 4; }
.crow-ask { min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow-l2 .prio-dot { width: 10px; height: 9px; }
.crow-l2 .analyzing { flex: none; font-size: var(--t-meta); }
.crow-n {
  grid-area: n; justify-self: end; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--raio);
  background: var(--ink); color: var(--bg); font: 500 var(--t-meta)/20px var(--f-texto); font-variant-numeric: tabular-nums; text-align: center;
}
.crow.snoozed .crow-who { color: var(--muted); }
.crow:hover .crow-in, .crow:focus-within .crow-in { background: var(--tint); }
.crow[aria-current="true"] .crow-in, .crow.kbd .crow-in { background: var(--tint); box-shadow: inset 3px 0 0 var(--ch, var(--ink)); }
.crow[aria-current="true"] > .crow-in::before, .crow[aria-current="true"] + .crow > .crow-in::before { display: none; }
@media (hover: hover) and (pointer: fine) {
  .crow-who.has-person:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
}

/* the row's actions: over the time on hover or keyboard focus (computer), always under the row on Hoje */
.crow-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: var(--raio); background: transparent; color: var(--ink); cursor: pointer;
  font: 500 var(--t-meta)/1 var(--f-texto); white-space: nowrap;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.crow-act .icon { width: 18px; height: 18px; }
.crow-acts.hover {
  position: absolute; top: 0; bottom: 0; right: 0; z-index: 2;
  display: flex; align-items: center; gap: 2px; padding: 0 8px 0 28px;
  background: linear-gradient(to right, transparent 0, var(--tint) 24px);
  opacity: 0; pointer-events: none; transition: opacity 0.12s var(--ease);
}
.crow-acts.hover .crow-act { width: 36px; height: 36px; }
.crow-acts.hover .crow-act-label { display: none; }
.crow-acts.hover .crow-act:hover { background: var(--bg); }
.crow:hover .crow-acts.hover, .crow:focus-within .crow-acts.hover { opacity: 1; pointer-events: auto; }
@media (hover: none) { .crow-acts.hover { display: none; } }
.crow.inline .crow-in { flex-direction: column; }
.crow-acts.inline { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px calc(var(--pad-l) + 36px); margin-top: -2px; }
.crow-acts.inline .crow-act { min-height: 40px; padding: 0 12px; border: 1px solid var(--line); }
.crow-acts.inline .crow-act.reply { border-color: var(--ink); }
.crow-acts.inline .crow-act:hover { background: var(--bg); border-color: var(--ink); }

/* sliding on a phone: right = Feito (green), left = Adiar (ink); the colour fills once the row has gone far enough */
.crow-bg { position: absolute; inset: 0; display: none; align-items: center; justify-content: space-between; padding: 0 20px; font-weight: 500; }
.crow.swiping .crow-bg, .crow.settling .crow-bg { display: flex; }
.crow-bg-done, .crow-bg-snooze { display: none; align-items: center; gap: 8px; }
.crow-bg .icon { width: 22px; height: 22px; transition: transform 0.15s var(--ease); }
.crow.sw-right .crow-bg { background: var(--ok-soft); color: var(--ok); }
.crow.sw-right .crow-bg-done { display: inline-flex; }
.crow.sw-left .crow-bg { background: var(--tint); color: var(--ink); justify-content: flex-end; }
.crow.sw-left .crow-bg-snooze { display: inline-flex; }
.crow.armed.sw-right .crow-bg { background: var(--ok); color: var(--bg); }
.crow.armed.sw-left .crow-bg { background: var(--ink); color: var(--bg); }
.crow.armed .crow-bg .icon { transform: scale(1.15); }
.crow.swiping .crow-in { background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
.crow.settling .crow-in { transition: transform 0.22s var(--ease); }
.more-wrap { display: flex; justify-content: center; padding: 16px 16px 24px; }

/* where a conversation comes from: .ch-<key> sets the channel's colours, every piece below reads them (js/channels.js) */
.ch-teams { --ch: var(--ch-teams); --ch-soft: var(--ch-teams-soft); }
.ch-outlook { --ch: var(--ch-outlook); --ch-soft: var(--ch-outlook-soft); }
.ch-whatsapp { --ch: var(--ch-whatsapp); --ch-soft: var(--ch-whatsapp-soft); }
.ch-alrix { --ch: var(--ch-alrix); --ch-soft: var(--ch-alrix-soft); }
.ch-gmail { --ch: var(--ch-gmail); --ch-soft: var(--ch-gmail-soft); }
.ch-mara { --ch: var(--ch-mara); --ch-soft: var(--ch-mara-soft); }
.ch-other { --ch: var(--muted); --ch-soft: var(--tint); }
/* the channel's tile: its own glyph in paper on its colour, like an app icon */
.ch-mark { width: 36px; height: 36px; border-radius: var(--raio); display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--ch, var(--muted)); color: var(--ch-on); }
.ch-mark .icon { width: 22px; height: 22px; stroke-width: 1.85; }
.ch-mark.xs { width: 18px; height: 18px; }
.ch-mark.xs .icon { width: 12px; height: 12px; stroke-width: 2.1; }
.ch-mark.sm { width: 24px; height: 24px; }
.ch-mark.sm .icon { width: 16px; height: 16px; }
.ch-mark.md { width: 40px; height: 40px; }
.ch-mark.md .icon { width: 24px; height: 24px; }
.ch-mark.lg { width: 48px; height: 48px; }
.ch-mark.lg .icon { width: 28px; height: 28px; }
.ch-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--ch); font-weight: 500; }
.mini-marks { display: inline-flex; gap: 3px; flex: none; }
.row-ch { flex: none; color: var(--ch); font-weight: 500; }
.row-people { min-width: 0; margin-left: 0.3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* priority marks: the delta's triangle; urgent filled in the red, today in outline */
.prio { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.prio-dot { width: 11px; height: 10px; flex: none; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.prio.today .prio-dot { clip-path: polygon(evenodd, 50% 0, 100% 100%, 0 100%, 50% 0, 50% 34%, 20% 84%, 80% 84%, 50% 34%); }
.prio.urgent { color: var(--urgent); }
.prio.today { color: var(--today); }
.analyzing, .analyzing-line { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 400; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; animation: pulse 1.4s ease-in-out infinite; }

.empty { padding: 40px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--e-dentro); }
.empty-title { font: 500 var(--t-corpo)/1.2 var(--f-titulo); letter-spacing: -0.01em; color: var(--ink); }
.sec .empty { padding: 16px var(--pad-l) 20px; align-items: flex-start; text-align: left; gap: 4px; }
.sec .empty-title { font-size: var(--t-apoio); }

/* ---------- Skeleton ---------- */
.skel { display: block; border-radius: var(--raio); background: linear-gradient(90deg, var(--tint) 0%, var(--line) 50%, var(--tint) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skel-row { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 12px 20px; min-height: 60px; }
.skel-mark { width: 24px; height: 24px; }
.skel-lines { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.skel-line { height: 12px; }
.skel-line.tall { height: 22px; }
.skel-block { height: 120px; }
.w40 { width: 40%; } .w60 { width: 60%; } .w70 { width: 70%; } .w90 { width: 90%; }
.detail-skeleton { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; }

/* ---------- Search entry (Hoje, the lists, the rail) and the search screen ---------- */
.search-entry {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 12px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--raio); background: var(--surface); color: var(--muted);
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.search-entry:hover { border-color: var(--ink); color: var(--ink); }
.search-entry .icon { width: 20px; height: 20px; }
.search-entry-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-search { margin: 0 12px 12px var(--pad-l); }
.today-head { flex-direction: column; align-items: stretch; gap: 12px; }
@media (hover: none) { .hide-touch { display: none; } }

.search-head { position: sticky; top: 0; z-index: 4; background: var(--bg); padding-top: 8px; }
.search-bar { display: flex; align-items: center; gap: 4px; min-height: 60px; padding: 4px 8px 4px 4px; border-bottom: 1px solid var(--line); transition: box-shadow 0.15s var(--ease); }
.search-bar:focus-within { box-shadow: inset 0 -2px 0 var(--ink); }
.search-back { color: var(--ink); }
.search-icon { width: 20px; height: 20px; color: var(--muted); margin: 0 4px; }
.search-input { flex: 1; min-width: 0; min-height: 48px; padding: 0 4px; border: 0; background: transparent; font: 500 var(--t-corpo)/1.2 var(--f-texto); }
.search-input:focus-visible { outline: none; }
.search-input::-webkit-search-cancel-button { display: none; }
.search-head + .chips { padding-top: 12px; }
.search-start { display: flex; flex-direction: column; gap: 16px; padding: 16px 16px 16px var(--pad-l); --pad-l: 0px; }
.search-start .sec { padding-top: 0; }
.hits { position: relative; list-style: none; margin: 0; padding: 0 14px 10px calc(var(--pad-l) + 36px); display: flex; flex-direction: column; gap: 6px; background: var(--bg); }
.crow:hover > .hits, .crow[aria-current="true"] > .hits { background: var(--tint); }
.crow[aria-current="true"] > .hits { box-shadow: inset 3px 0 0 var(--ch, var(--ink)); }
.hit { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: var(--t-meta); line-height: 1.45; padding-left: 10px; border-left: 1px solid var(--line); }
.hit-meta { display: flex; gap: 8px; color: var(--muted); }
.hit-who { font-weight: 500; color: var(--ink); }
.hit-meta time { font-variant-numeric: tabular-nums; }
.hit-text { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
mark { background: var(--hl); color: var(--ink); border-radius: 1px; padding: 0 1px; }

/* people: initials on a square tile (no faces, no avatars from the channels), the channels they use as small tiles */
.initials {
  width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raio); background: var(--tint); color: var(--ink);
  font: 500 var(--t-meta)/1 var(--f-titulo); letter-spacing: 0.03em;
}
.initials.lg { width: 56px; height: 56px; font-size: var(--t-corpo); }
.person-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sec > .person-chips { padding: 0 12px 12px var(--pad-l); }
.person-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 0 12px 0 6px; border: 1px solid var(--line); border-radius: var(--raio); font-weight: 500; }
.person-chip .initials { width: 30px; height: 30px; }
.person-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-chip:hover { border-color: var(--ink); }
.person-link { text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.person-link:hover { text-decoration-color: currentColor; }
.person-title { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.person-title > div { min-width: 0; }
.person-head .pane-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.pane-back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; margin: -8px 0 4px -10px; padding: 0 10px 0 4px; color: var(--ink); font-weight: 500; border: 0; background: none; cursor: pointer; border-radius: var(--raio); }
.pane-back:hover { background: var(--tint); }

/* ---------- Hoje ---------- */
.hoje { display: flex; flex-direction: column; min-height: 100%; }
.today-body { flex: 1; }
.today-line { margin-top: 6px; color: var(--muted); }
.line-item, .line-part { white-space: nowrap; }
a.line-part { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a.line-part:hover { text-decoration-color: currentColor; }
.swipe-hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 12px 6px calc(var(--pad-l) + 36px); font-size: var(--t-meta); color: var(--muted); }
.swipe-hint .link-btn { min-height: 36px; font-size: var(--t-meta); }
.today-tools { display: flex; gap: 8px; }
.today-tools .search-entry { flex: 1; }
.ask-compact { min-height: 44px; padding: 0 12px; gap: 6px; }
.ask-compact .icon { color: var(--accent); }
.head-actions { display: flex; align-items: center; flex: none; }
.ask-icon-btn .icon { color: var(--accent); }
.today-grid { border-top: 1px solid var(--line); margin-top: 8px; }
.today-grid:not(:has(.sec)) { display: none; }
.today-col:empty { display: none; }
.today-col > .sec + .sec { border-top: 1px solid var(--line); margin-top: 6px; }
.today-col .sec, .today-col + .today-col .sec:first-child { padding-bottom: 6px; }
.today-col + .today-col:not(:empty) { border-top: 1px solid var(--line); }
@container list (min-width: 620px) {
  .today-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .today-grid:has(> .today-col:empty) > .today-col { grid-column: 1 / -1; }
  /* One column alone (no combinados today) takes the whole width, and its people sit side by side: no empty half. */
  .today-grid > .today-col:only-child { grid-column: 1 / -1; }
  .today-col:only-child .person-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); column-gap: 1px; }
  .today-col + .today-col:not(:empty) { border-top: 0; border-left: 1px solid var(--line); }
  .crow.inline .crow-in { flex-direction: row; align-items: center; }
  .crow-acts.inline { flex-wrap: nowrap; padding: 0 12px 0 0; margin: 0; }
  .crow-acts.inline .crow-act { min-height: 36px; padding: 0 10px; }
}
@container list (min-width: 620px) and (max-width: 899px) {
  .crow-acts.inline .crow-act:not(.reply) { width: 36px; padding: 0; }
  .crow-acts.inline .crow-act:not(.reply) .crow-act-label { display: none; }
}
/* the combinados due today and the cobranças, as compact rows */
.hoje .cm-row, .person-screen .cm-row { grid-template-columns: 24px minmax(0, 1fr); padding: 10px 12px 10px var(--pad-l); }
.hoje .cm-row > .ch-mark, .person-screen .cm-row > .ch-mark { width: 24px; height: 24px; }
.hoje .cm-row > .ch-mark .icon, .person-screen .cm-row > .ch-mark .icon { width: 16px; height: 16px; }
.hoje .cm-row + .cm-row::before, .person-screen .cm-row + .cm-row::before { left: calc(var(--pad-l) + 36px); }
.hoje .cm-open, .person-screen .cm-open { font-size: var(--t-apoio); flex-basis: 100%; }
.hoje .cm-main, .person-screen .cm-main { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 1px; }
.hoje .cm-what, .person-screen .cm-what { -webkit-line-clamp: 1; line-clamp: 1; }
.hoje .cm-meta, .person-screen .cm-meta { flex: 0 1 auto; overflow: hidden; }
.hoje .cm-meta .row-people, .person-screen .cm-meta .row-people { text-overflow: ellipsis; }
.hoje .cm-actions, .person-screen .cm-actions { flex-basis: 100%; }
.hoje .cm-actions, .person-screen .cm-actions { margin-top: 6px; }
.hoje .cm-actions .btn.small, .person-screen .cm-actions .btn.small { min-height: 36px; padding: 0 12px; font-size: var(--t-meta); }
.hoje .cm-actions .icon-btn, .person-screen .cm-actions .icon-btn { width: 36px; height: 36px; }
.hoje .cm-when, .person-screen .cm-when { font-size: var(--t-meta); margin-top: 0; }
/* the agenda (once it is captured): the time in mono, the meeting, where; the one going on now on its channel's colour */
.ag-list { list-style: none; padding: 0 0 4px; }
.ag-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px 8px var(--pad-l); min-height: 52px; box-shadow: inset 3px 0 0 transparent; }
.ag-row + .ag-row { border-top: 1px solid var(--line); }
.ag-row.live { background: var(--ch-soft); box-shadow: inset 3px 0 0 var(--ch); }
.ag-row.past { color: var(--muted); }
.ag-time { font: 400 var(--t-meta)/1.3 var(--f-numero); font-variant-numeric: tabular-nums; }
.ag-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.ag-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-where { font-size: var(--t-meta); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-row.live .ag-where { color: var(--ch); font-weight: 500; }
.ag-row .btn.small { min-height: 36px; }
/* who is waiting, adding up the channels */
.person-tiles { display: flex; flex-direction: column; padding-bottom: 4px; }
.person-tile { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 52px; padding: 8px 12px 8px var(--pad-l); transition: background-color 0.15s var(--ease); }
.person-tile + .person-tile { border-top: 1px solid var(--line); }
.person-tile:hover { background: var(--tint); }
.person-tile-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.person-tile-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-tile-sub { font-size: var(--t-meta); color: var(--muted); }
.person-tile-sub.late { color: var(--urgent); font-weight: 500; }
/* the channels: six tiles with a state dot, loud only when one is not well */
.ch-block { display: flex; flex-direction: column; padding-bottom: 6px; }
.ch-strip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 2px 12px 8px calc(var(--pad-l) - 4px); }
.ch-strip { display: flex; gap: 2px; }
.ch-strip-item { position: relative; display: inline-flex; padding: 6px; border-radius: var(--raio); }
.ch-strip-item:hover { background: var(--tint); }
.ch-strip-item .state-dot { position: absolute; right: 3px; bottom: 3px; width: 9px; height: 9px; box-shadow: 0 0 0 2px var(--bg); }
.ch-strip-item.ok .state-dot { background: var(--ok); }
.ch-strip-item.busy .state-dot { background: var(--warn); animation: pulse 1.4s ease-in-out infinite; }
.ch-strip-item.warn .state-dot { background: var(--bad); }
.ch-strip-item.off .state-dot { background: var(--bg); box-shadow: 0 0 0 2px var(--bg), inset 0 0 0 1.5px var(--faint); }
.ch-strip-item.off .ch-mark { opacity: 0.45; }
.ch-issues { list-style: none; padding: 0; }
.ch-issue { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 8px var(--pad-l); border-top: 1px solid var(--line); }
.ch-issue-text { min-width: 0; font-size: var(--t-meta); line-height: 1.4; }
.ch-issue-name { color: var(--ch); font-weight: 500; }
.ch-issue .btn.small { min-height: 36px; }
.today-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 12px 14px var(--pad-l); border-top: 1px solid var(--line); }
.today-foot-link { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--raio); font-weight: 500; }
.today-foot-link:hover { border-color: var(--ink); }
.today-foot-link .sec-n { color: var(--muted); }

/* the fixed field at the foot of Hoje (a button on a phone, over the tab bar) */
.ask-bar {
  position: sticky; bottom: 0; z-index: 4; margin-top: auto;
  padding: 10px 12px 12px var(--pad-l);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.ask-field { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 4px 0 12px; border: 1px solid var(--ink); border-radius: var(--raio); background: var(--surface); }
.ask-field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.ask-icon { width: 20px; height: 20px; color: var(--accent); }
.ask-input { flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; font: 400 var(--t-apoio)/1.3 var(--f-texto); }
.ask-input:focus-visible { outline: none; }
.ask-send { width: 40px; height: 40px; background: var(--ink); color: var(--bg); }
.ask-send:hover { background: var(--ink); color: var(--bg); }
.ask-send:disabled { background: var(--tint); color: var(--faint); opacity: 1; }

/* ---------- Card: who, channel and wait on top; what they ask; combinados; the person elsewhere; the conversation ---------- */
.id { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding-left: 4px; }
.id-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.id-name { font: 500 var(--t-corpo)/1.2 var(--f-titulo); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.id-sub { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--t-meta); color: var(--muted); white-space: nowrap; overflow: hidden; }
.id-sub > span:first-child { flex: none; color: var(--ch); font-weight: 500; }
.id-wait { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
@container detail (max-width: 700px) {
  .topbar-actions .btn-label { display: none; }
  .topbar-actions .btn.small { min-width: 40px; padding: 0; border-color: transparent; }
  .topbar-actions .btn.small:hover { background: var(--tint); }
}
.id-wait.late { color: var(--urgent); font-weight: 500; }
.id-wait-word { white-space: pre; }
@container detail (max-width: 480px) { .id-wait-word { display: none; } }
.id-wait .prio-dot { width: 9px; height: 8px; }
.card-head { display: flex; flex-direction: column; gap: 6px; }
.card-title { font: 500 var(--t-secao)/1.25 var(--f-titulo); letter-spacing: -0.01em; overflow-wrap: anywhere; text-wrap: balance; }
.card-people { color: var(--muted); font-size: var(--t-meta); overflow-wrap: anywhere; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: var(--t-meta); }
.snooze-note { color: var(--today); font-weight: 500; }

.block { display: flex; flex-direction: column; gap: 12px; }
.block + .block { padding-top: 20px; border-top: 1px solid var(--line); }
.card-head + .block { padding-top: 4px; }
.block-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 36px; margin: -6px 0 -4px; }
.block-head .btn { margin-left: auto; }
.block-title { display: flex; align-items: center; gap: 10px; font: 500 var(--t-meta)/1.2 var(--f-texto); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.block-title::before { content: ""; width: 3px; height: 1em; flex: none; background: var(--accent); }
.summary { font-size: var(--t-apoio); line-height: 1.55; overflow-wrap: anywhere; }
.fact { display: flex; flex-direction: column; gap: 4px; }
.label { font-size: var(--t-meta); font-weight: 500; color: var(--muted); }
.fact-text { font-size: var(--t-apoio); line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.facts-inline { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.draft { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; background: var(--tint); border-radius: var(--raio); padding: 12px 16px; user-select: text; -webkit-user-select: text; }

.ask-block { gap: 14px; }
.ask-block .label { text-transform: uppercase; letter-spacing: 0.1em; }
.ask-main, .ask-sug { display: flex; flex-direction: column; gap: 4px; }
.ask-text { font: 500 var(--t-corpo)/1.4 var(--f-texto); overflow-wrap: anywhere; }
.ask-sug { padding-left: 12px; border-left: 2px solid var(--line); }
.ask-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.fact-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--raio); font-size: var(--t-meta); }
.fact-chip .icon { width: 16px; height: 16px; color: var(--muted); }
.ask-resumo { color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.related .rows { margin: -4px 0 0; }
.related .crow-link { min-height: 56px; padding-right: 0; }

/* the conversation, compact: chats as bubbles (theirs on the channel's soft colour, his in ink), e-mails as blocks */
.convo { display: flex; flex-direction: column; gap: 6px; }
.more-msgs { align-self: center; margin-top: -6px; }
.day-sep { align-self: center; padding: 8px 0 2px; font-size: var(--t-meta); font-weight: 500; color: var(--muted); }
.msg { max-width: 86%; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: var(--raio); background: var(--tint); overflow-wrap: anywhere; line-height: 1.45; }
.msg.theirs { align-self: flex-start; }
.msg.mine { align-self: flex-end; background: var(--bloco); color: var(--bloco-t); }
.msg.mine .muted, .msg.mine .msg-meta { color: var(--bloco-t2); }
.msg.notice { border: 1px dashed var(--muted); background: transparent; }
.msg.deleted .msg-text { color: var(--muted); font-style: italic; }
.msg-meta { display: flex; align-items: baseline; gap: 8px; font-size: var(--t-meta); color: var(--muted); }
.msg-meta time, .msg-time { font-variant-numeric: tabular-nums; }
.msg-time { align-self: flex-end; font-size: var(--t-meta); color: var(--muted); line-height: 1.2; }
.msg-subject { font-weight: 500; }
.msg-text { white-space: pre-wrap; user-select: text; -webkit-user-select: text; }
.msg-text.clamp { display: -webkit-box; -webkit-line-clamp: 8; line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.tag { align-self: flex-start; display: inline-block; font-size: var(--t-meta); font-weight: 500; color: var(--muted); border: 1px solid var(--line); border-radius: var(--raio); padding: 0 8px; margin-left: 8px; }
.msg .tag { margin-left: 0; }
.msg.mine .tag { color: var(--bloco-t2); border-color: currentColor; }
.convo .msg.theirs { background: var(--ch-soft); }
.convo .msg.theirs .msg-who { color: var(--ch); font-weight: 500; }
.media-chip { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-weight: 500; color: var(--ch); }
.media-chip .icon { width: 20px; height: 20px; }
.msg.mine .media-chip { color: var(--bloco-t2); }
.mail-thread { display: flex; flex-direction: column; }
.mail { display: flex; flex-direction: column; gap: 8px; padding: 14px 0 14px 14px; border-left: 3px solid var(--ch); }
.mail + .mail { box-shadow: 0 -1px 0 var(--line); }
.mail.mine { border-left-color: var(--ink); }
.mail.notice { border-left-style: dashed; }
.mail-head { display: flex; flex-direction: column; gap: 2px; }
.mail-from { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.mail-who { font-weight: 500; }
.mail.theirs .mail-who { color: var(--ch); }
.mail-to { font-size: var(--t-meta); color: var(--muted); }
.mail-when { margin-left: auto; font: 400 var(--t-meta)/1.3 var(--f-texto); font-variant-numeric: tabular-nums; color: var(--muted); }
.mail-subject { font-weight: 500; font-size: var(--t-meta); }
.mail-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; user-select: text; -webkit-user-select: text; }
.mail-text.clamp { display: -webkit-box; -webkit-line-clamp: 10; line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden; }
.mail.deleted .mail-text { color: var(--muted); font-style: italic; }
.mail .tag { margin-left: 0; }
.mara-facts { display: grid; gap: 14px; }
.risk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.risk-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.risk-value { font-weight: 500; padding: 2px 10px; border-radius: var(--raio); }
.risk-value.yes { background: var(--warn-soft); color: var(--warn); }
.risk-value.no { background: var(--ok-soft); color: var(--ok); }
.risk-value.unknown { background: var(--urgent-soft); color: var(--bad); }
.mara-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* the reply box, always at the foot: quick replies as chips that fill it, the text, then Enviar (or Copiar) */
.composer {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 16px calc(10px + var(--safe-b));
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.composer > * { width: 100%; max-width: 720px; margin-inline: auto; }
.qchips { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px 0; }
.qchips::-webkit-scrollbar { display: none; }
.qchips.more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.qchip {
  flex: none; max-width: min(80%, 22rem); display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--ch, var(--line)); border-radius: var(--raio); background: var(--bg); color: var(--ink); cursor: pointer;
  font: 400 var(--t-meta)/1.2 var(--f-texto); white-space: nowrap;
  transition: background-color 0.15s var(--ease);
}
.qchip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qchip:hover { background: var(--ch-soft, var(--tint)); }
.qchip.draft { border-style: dashed; }
.qchip .icon { width: 16px; height: 16px; }
.composer-field { display: flex; flex-direction: column; gap: 4px; padding: 2px 4px 4px 12px; border: 1px solid var(--ink); border-radius: var(--raio); background: var(--surface); }
.composer-field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.reply-text { width: 100%; min-height: 48px; max-height: 40vh; resize: none; padding: 10px 8px 4px 0; border: 0; background: transparent; color: var(--ink); font: 400 var(--t-apoio)/1.45 var(--f-texto); }
.reply-text:focus-visible { outline: none; }
.reply-text:disabled { color: var(--muted); }
.composer-btns { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.composer-foot { min-height: 20px; }
.composer-foot .note, .composer-foot .send-line { font-size: var(--t-meta); }
.send-line { display: flex; align-items: center; gap: 10px; margin: 0; }
.send-line.ok { color: var(--ok); font-weight: 500; }
.send-line.warn, .note.warn { color: var(--warn); }
.send-line .btn.small { min-height: 32px; }
.cobranca-note { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 500; font-size: var(--t-meta); }
.cobranca-note .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--accent); }

/* ---------- Pergunte ao Connect ---------- */
.asst-head { display: flex; align-items: center; gap: 10px; padding: 0 28px; color: var(--ink); }
.asst-head .icon { color: var(--accent); }
.asst-title { font: 500 var(--t-titulo)/1.1 var(--f-titulo); letter-spacing: -0.02em; }
.asst-body { padding-top: 16px; }
.asst-home { display: flex; flex-direction: column; gap: 24px; }
.asst-suggest { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@container detail (min-width: 560px) { .asst-suggest { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.suggest { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--raio); background: transparent; color: var(--ink); text-align: left; cursor: pointer; line-height: 1.35; }
.suggest:hover { border-color: var(--ink); }
.suggest .icon { width: 18px; height: 18px; color: var(--accent); }
.thread-list { list-style: none; padding: 0; }
.thread-list li + li .thread-row { border-top: 1px solid var(--line); }
.thread-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 6px; border-radius: var(--raio); }
.thread-row:hover { background: var(--tint); }
.thread-row > .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--muted); }
.thread-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.thread-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-preview { font-size: var(--t-meta); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-when { font: 400 var(--t-meta)/1.4 var(--f-texto); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.asst-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.asst-msg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.asst-msg.mine { align-items: flex-end; }
.asst-bubble { max-width: 86%; padding: 8px 12px; border-radius: var(--raio); background: var(--bloco); color: var(--bloco-t); white-space: pre-wrap; overflow-wrap: anywhere; }
.asst-when { font: 400 var(--t-meta)/1.2 var(--f-texto); font-variant-numeric: tabular-nums; color: var(--faint); }
.asst-text-body { display: flex; flex-direction: column; gap: 8px; line-height: 1.55; overflow-wrap: anywhere; }
.asst-text-body p { white-space: pre-wrap; }
.asst-text-body ul { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.asst-text-body li::marker { color: var(--accent); }
.asst-msg.streaming .asst-text-body > :last-child::after { content: ""; display: inline-block; width: 7px; height: 1em; margin-left: 3px; vertical-align: -2px; background: var(--accent); animation: blink 1s steps(2, start) infinite; }
.props { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.prop { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--ch, var(--ink)); border-radius: var(--raio); background: var(--bg); }
.prop-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.prop-who { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.prop-who strong { font-weight: 500; }
.prop-kind { color: var(--muted); }
.prop-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; padding: 10px 12px; border-radius: var(--raio); background: var(--ch-soft, var(--tint)); }
.prop-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.prop-acts:empty, .prop-state:empty { display: none; }
.prop-state { display: flex; align-items: center; gap: 8px; font-size: var(--t-meta); color: var(--muted); }
.prop-state .link-btn { min-height: 32px; padding: 4px 2px; }
.prop.sent .prop-state, .prop.accepted .prop-state { color: var(--ok); font-weight: 500; }
.prop.rejected .prop-text { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.asst-composer {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 16px calc(10px + var(--safe-b));
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.asst-composer > * { width: 100%; max-width: 720px; margin-inline: auto; }
.asst-field { display: flex; align-items: flex-end; gap: 8px; padding: 4px 4px 4px 12px; border: 1px solid var(--ink); border-radius: var(--raio); background: var(--surface); }
.asst-field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.asst-text { flex: 1; min-width: 0; min-height: 40px; max-height: 180px; resize: none; padding: 8px 0; border: 0; background: transparent; font: 400 var(--t-apoio)/1.45 var(--f-texto); }
.asst-text:focus-visible { outline: none; }
.asst-send { min-height: 40px; padding: 0 12px; }
.asst-note { font-size: var(--t-meta); color: var(--muted); }

/* ---------- Mais ---------- */
.menu { padding: 0 0 8px; }
.menu-item { position: relative; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 14px; padding: 8px 12px 8px var(--pad-l); min-height: 60px; transition: background-color 0.2s var(--ease); }
.menu-item::after { content: ""; position: absolute; left: calc(var(--pad-l) + 46px); right: 0; bottom: 0; height: 1px; background: var(--line); }
.menu-item:last-child::after { display: none; }
.menu-item:hover { background: var(--tint); }
.menu-item[aria-current="true"] { background: var(--tint); box-shadow: inset 3px 0 0 var(--ink); }
.menu-item[aria-current="true"]::after { display: none; }
.menu-icon { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--raio); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.menu-icon .icon { width: 18px; height: 18px; }
.menu-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.menu-text .muted { font-size: var(--t-meta); }
.menu-label { font-weight: 500; }
.menu-go .icon { width: 18px; height: 18px; }
.menu-foot { padding: 16px 12px 24px; border-top: 1px solid var(--line); margin-top: 8px; }
.menu-status { display: flex; align-items: center; gap: 8px; }

.plain-list { display: flex; flex-direction: column; }
.plain-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.plain-row:first-child { border-top: 0; }
.plain-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.plain-title { font-weight: 500; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.plain-title.warn { color: var(--bad); }
.health-detail { overflow-wrap: anywhere; }
.health-state { font-weight: 400; color: var(--muted); }
.health-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); flex: none; display: inline-block; margin-right: 2px; }
.health-dot.ok { background: var(--ok); }
.health-dot.warn { background: var(--warn); }
.health-dot.bad { background: var(--bad); }
.status-line { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.steps { padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }

/* Mais > Agentes: one row per key (what it may do, when it was used), then the log of uses (never any content) */
.agent-list { list-style: none; padding: 0; }
.agent-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.agent-list > .agent-row:first-child { border-top: 0; padding-top: 4px; }
.agent-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.agent-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 500; }
.agent-name .tag { margin-left: 0; }
.agent-scopes { display: flex; flex-wrap: wrap; gap: 6px; }
.scope { font-size: var(--t-meta); line-height: 1; padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--raio); }
.agent-meta { font-size: var(--t-meta); color: var(--muted); }
.agent-row.revoked .agent-name > span:first-child { color: var(--muted); }
.agent-row .btn.small { flex: none; }
.agents .chips { padding: 4px 0 8px; }
.use-list { list-style: none; padding: 0; }
.use-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); }
.use-list > .use-row:first-child { border-top: 0; }
.use-when { font: 400 var(--t-meta)/1.4 var(--f-texto); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.use-main { min-width: 0; line-height: 1.45; }
.use-what { font-weight: 500; }
.use-who { color: var(--muted); }
.use-result { color: var(--bad); font-weight: 500; }
.use-tool { font: 400 var(--t-meta)/1.4 var(--f-numero); color: var(--faint); }

/* the shortcuts sheet */
.keys-sheet { display: flex; flex-direction: column; gap: 12px; }
.keys-list { display: flex; flex-direction: column; }
.keys-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 12px; align-items: center; min-height: 40px; padding: 4px; border-top: 1px solid var(--line); }
.keys-row:first-child { border-top: 0; }
.keys-row dt { display: flex; gap: 4px; }

/* ---------- Channels in the lists ---------- */
/* the filter over a lane: Todos and one chip per channel; on a phone they scroll sideways inside their own strip */
.chips {
  position: relative; display: flex; gap: 6px; padding: 0 12px 10px var(--pad-l); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-padding-inline: 48px; --fl: 0px; --fr: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
}
.chips.fade-l { --fl: 32px; }
.chips.fade-r { --fr: 56px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--raio); background: transparent; color: var(--ink); font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.chip:hover { background: var(--tint); }
.chip:focus-visible { outline-offset: 2px; }
.chip-icon { width: 18px; height: 18px; color: var(--ch); }
.chip-n { font: 500 var(--t-meta)/1 var(--f-texto); font-variant-numeric: tabular-nums; color: var(--muted); }
.chip[aria-current="true"], .chip[aria-pressed="true"] { background: var(--ch, var(--ink)); border-color: var(--ch, var(--ink)); color: var(--ch-on); }
.chip[aria-current="true"] .chip-icon, .chip[aria-current="true"] .chip-n, .chip[aria-pressed="true"] .chip-icon, .chip[aria-pressed="true"] .chip-n { color: var(--ch-on); }
.chip.all[aria-current="true"], .chip.all[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip.all[aria-current="true"] .chip-n, .chip.all[aria-pressed="true"] .chip-n { color: var(--bg); }
.agents .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* the band on top of a card (older screens): the channel's tile, name and what kind of conversation, on its soft colour */
.ch-band { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; background: var(--ch-soft); border-left: 4px solid var(--ch); border-radius: var(--raio); }
.ch-band-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ch-band-name { color: var(--ch); font-weight: 500; }
.ch-band-sub { color: var(--ink); overflow-wrap: anywhere; }

/* ---------- Conexões ---------- */
.state-pill { display: inline-flex; align-items: center; gap: 8px; padding: 2px 10px; border-radius: var(--raio); font-weight: 500; font-size: var(--t-meta); white-space: nowrap; background: var(--tint); color: var(--ink); }
.state-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.state-pill.ok { background: var(--ok-soft); color: var(--ok); }
.state-pill.busy .state-dot { animation: pulse 1.4s ease-in-out infinite; }
.state-pill.warn { background: var(--warn-soft); color: var(--warn); }
.state-pill.bad { background: var(--urgent-soft); color: var(--bad); }
.state-pill.paused { color: var(--muted); }
.state-pill.off { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.state-pill.off .state-dot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

.conn-summary .health-dot { margin-right: 8px; vertical-align: 1px; }
.conn-summary .muted { display: block; }
.conn-list { padding-bottom: 24px; }
.group-title { padding: 16px 12px 6px var(--pad-l); font: 500 var(--t-meta)/1.2 var(--f-texto); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.conn-group + .conn-group { border-top: 1px solid var(--line); margin-top: 8px; }
.conn-row { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 12px 12px 12px var(--pad-l); transition: background-color 0.2s var(--ease); }
.conn-row + .conn-row::before { content: ""; position: absolute; left: calc(var(--pad-l) + 48px); right: 0; top: 0; height: 1px; background: var(--line); }
.conn-row:hover { background: var(--tint); }
.conn-row[aria-current="true"] { background: var(--tint); box-shadow: inset 3px 0 0 var(--ch); }
.conn-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conn-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 28px; }
/* the name is the row's link and covers the whole row; the button stays clickable over it */
.conn-name { font-weight: 500; line-height: 1.3; }
.conn-name::after { content: ""; position: absolute; inset: 0; }
.conn-name:focus-visible { outline: none; }
.conn-row:has(.conn-name:focus-visible) { outline: 3px solid var(--ink); outline-offset: -3px; }
.conn-headline, .conn-meta, .conn-today { overflow-wrap: anywhere; }
.conn-meta, .conn-today { font-size: var(--t-meta); }
.conn-today { font-variant-numeric: tabular-nums; }
.conn-cta { position: relative; z-index: 1; align-self: flex-start; margin-top: 8px; }
.conn-list .promises { padding: 24px var(--pad-l) 8px; border-top: 1px solid var(--line); margin-top: 16px; }

.overall { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border-radius: var(--raio); background: var(--tint); }
.overall.ok { background: var(--ok-soft); }
.overall.warn { background: var(--warn-soft); }
.overall.bad { background: var(--urgent-soft); }
.overall-mark { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg); color: var(--ink); }
.overall.ok .overall-mark { color: var(--ok); }
.overall.warn .overall-mark { color: var(--warn); }
.overall.bad .overall-mark { color: var(--bad); }
.overall-title { font: 500 var(--t-corpo)/1.3 var(--f-titulo); margin-bottom: 4px; }
.need-list { display: flex; flex-direction: column; }
.need-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.need-row:first-child { border-top: 0; padding-top: 0; }
.need-name { font-weight: 500; }
.need-row .btn { grid-column: 2; justify-self: start; }
.promise-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.promise-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
.promise-icon { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--raio); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.promise-icon .icon { width: 20px; height: 20px; }
.promise-title { font-weight: 500; }

.conn-head { display: flex; flex-direction: column; gap: var(--e-dentro); }
.conn-title, .flow-head { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; background: var(--ch-soft); border-left: 4px solid var(--ch); border-radius: var(--raio); }
.conn-title-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conn-title-text p { color: var(--ink); overflow-wrap: anywhere; }
.conn-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.conn-headline-lg { font-size: var(--t-apoio); line-height: 1.45; overflow-wrap: anywhere; }
.stats { display: flex; flex-wrap: wrap; gap: 16px 40px; margin: 0; }
.stat { display: flex; flex-direction: column-reverse; gap: 2px; }
.stat dt { margin: 0; font-size: var(--t-meta); color: var(--muted); }
.stat-n { margin: 0; font: 500 var(--t-titulo)/1 var(--f-numero); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.check:first-child { border-top: 0; padding-top: 0; }
.check-icon { display: inline-flex; color: var(--faint); }
.check.ok .check-icon { color: var(--ok); }
.check.problem .check-icon { color: var(--bad); }
.check-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.check-label { font-weight: 500; }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timeline li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; padding: 8px 0; border-top: 1px solid var(--line); }
.timeline li:first-child { border-top: 0; padding-top: 0; }
.timeline-at { font: 400 var(--t-meta)/1.5 var(--f-texto); font-variant-numeric: tabular-nums; color: var(--muted); }
.timeline-text { overflow-wrap: anywhere; }
.action-list { display: flex; flex-direction: column; gap: 14px; }
.action-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 20px; align-items: center; }
.action-row .btn { justify-self: start; }
.tech { border-top: 1px solid var(--line); padding-top: 8px; }
.tech summary { display: flex; align-items: center; min-height: 40px; cursor: pointer; font-weight: 500; color: var(--muted); }
.tech summary::marker { color: var(--muted); }
.tech-list { margin: 8px 0 0; display: grid; gap: 10px; }
.tech-list > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; }
.tech-list dt { color: var(--muted); }
.tech-list dd { margin: 0; font-family: var(--f-numero); overflow-wrap: anywhere; }
.sheet-option.danger { color: var(--bad); }

/* the linking flows: WhatsApp (QR code or 8-letter code) and the mailboxes */
.flow-lead { line-height: 1.5; }
.seg { display: flex; align-self: flex-start; max-width: 100%; padding: 3px; gap: 3px; border: 1px solid var(--ink); border-radius: var(--raio); }
.seg-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--raio); background: transparent; color: var(--ink); font-weight: 500; line-height: 1.2; text-align: left; cursor: pointer; }
.seg-btn:hover { background: var(--tint); }
.seg-btn[aria-pressed="true"], .seg-btn[aria-current="page"] { background: var(--ink); color: var(--bg); }
.seg-btn .icon { width: 20px; height: 20px; }
a.seg-btn { text-decoration: none; }
.qr-layout, .code-layout { display: grid; gap: 24px; }
.qr-side { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
/* the code always on white, with its quiet zone, even in the dark theme: phones read it best that way */
.qr-frame { width: 296px; height: 296px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: var(--raio); display: flex; align-items: center; justify-content: center; }
.qr-frame.loading { background: var(--tint); }
.qr-img { display: block; width: 286px; height: 286px; image-rendering: pixelated; }
.qr-wait { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 500; }
.qr-bar { width: 296px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.qr-bar-fill { display: block; height: 100%; background: var(--ch-whatsapp); transform-origin: left center; transition: transform 1s linear; }
.qr-timer, .code-timer { font-variant-numeric: tabular-nums; }
.steps.big { font-size: var(--t-apoio); line-height: 1.45; gap: 14px; padding-left: 26px; }
.steps strong { font-weight: 500; }
.steps li::marker { font-family: var(--f-numero); color: var(--muted); }
.step-action { margin-top: 10px; }
.code-box { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--raio); min-width: 0; }
.pair-code { display: flex; align-items: center; gap: 4px; font: 500 var(--t-titulo)/1 var(--f-numero); user-select: all; -webkit-user-select: all; }
.pair-code .char { width: clamp(26px, 8vw, 40px); height: 52px; display: inline-flex; align-items: center; justify-content: center; background: var(--ch-whatsapp-soft); color: var(--ink); border-radius: var(--raio); }
.pair-code .sep { padding: 0 4px; color: var(--muted); }
.phone-input { display: flex; align-items: stretch; border: 1px solid var(--ink); border-radius: var(--raio); background: var(--surface); }
.phone-input:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; }
.phone-input input { border: 0; min-width: 0; padding-left: 12px; }
.phone-input input:focus-visible { outline: none; }
.phone-prefix { display: flex; align-items: center; padding: 0 12px 0 16px; border-right: 1px solid var(--line); color: var(--muted); font: 500 var(--t-corpo)/1 var(--f-texto); }
.pair-msg { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-left: 4px solid var(--warn); background: var(--warn-soft); border-radius: var(--raio); }
.pair-msg-title, .setup-fail-title { font: 500 var(--t-apoio)/1.35 var(--f-titulo); }
.done-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; background: var(--ok-soft); border-radius: var(--raio); }
.done-mark { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ok); color: var(--bg); }
.done-title { font: 500 var(--t-corpo)/1.2 var(--f-titulo); letter-spacing: -0.01em; }
.done-panel.compact .done-title { font-size: var(--t-apoio); }
.flow-promise { display: flex; align-items: flex-start; gap: 10px; }
.flow-promise .icon { width: 20px; height: 20px; margin-top: 2px; }
.setup-line { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.setup-status:empty { display: none; }
.setup-status { display: flex; flex-direction: column; gap: 6px; }
.setup-fail { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 14px 18px 14px 14px; border-left: 4px solid var(--bad); background: var(--urgent-soft); border-radius: var(--raio); }
.setup-fail .check-icon { color: var(--bad); }
.setup-state:empty { display: none; }
.hint { font-size: var(--t-meta); }

/* ---------- Combinados e cobranças (docs/DIA-A-DIA.md) ---------- */
/* Em aberto | Concluídos: the segmented control of the WhatsApp flow, as links */
.cm-views { width: fit-content; margin: 0 12px 8px var(--pad-l); }
/* two groups, each with its kicker, a count in mono and one line in plain words; a hairline between the groups */
.cm-group + .cm-group { border-top: 1px solid var(--line); margin-top: 6px; }
.cm-group-head { display: flex; flex-direction: column; gap: 2px; padding: 16px 12px 4px var(--pad-l); }
.cm-group-head .group-title { display: flex; align-items: baseline; gap: 10px; padding: 0; }
.cm-group-head .muted { font-size: var(--t-meta); }
.group-n { font-family: var(--f-texto); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--ink); }
.cm-none { padding: 6px 12px 20px var(--pad-l); }
/* a row as the lanes' rows: the channel's tile, then what (the row's link, it covers the row), who, when and the actions */
.cm-list { list-style: none; margin: 0; padding: 0 0 6px; }
.cm-row { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 12px 12px 12px var(--pad-l); transition: background-color 0.2s var(--ease); }
.cm-row > .ch-mark { width: 24px; height: 24px; margin-top: 1px; }
.cm-row > .ch-mark .icon { width: 16px; height: 16px; }
.cm-row + .cm-row::before { content: ""; position: absolute; left: calc(var(--pad-l) + 36px); right: 0; top: 0; height: 1px; background: var(--line); }
.cm-row:hover { background: var(--tint); }
.cm-row[aria-current="true"] { background: var(--tint); box-shadow: inset 3px 0 0 var(--ch, var(--ink)); }
.cm-row[aria-current="true"]::before, .cm-row[aria-current="true"] + .cm-row::before { display: none; }
.cm-main { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 1px; }
.cm-main > .cm-open, .cm-main > .cm-actions { flex-basis: 100%; }
.cm-main > .cm-meta { flex: 0 1 auto; overflow: hidden; }
.cm-main > .cm-meta .row-people { text-overflow: ellipsis; }
.cm-main > .cm-when { margin-top: 0; }
.cm-open { font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.cm-open::after { content: ""; position: absolute; inset: 0; }
.cm-open:focus-visible { outline: none; }
.cm-row:has(.cm-open:focus-visible) { outline: 3px solid var(--ink); outline-offset: -3px; }
.cm-what { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-meta { display: flex; min-width: 0; white-space: nowrap; font-size: var(--t-meta); }
.cm-row.snoozed .cm-open { color: var(--muted); }
/* when: overdue in the red with the delta's triangle and its word ("venceu", "sem resposta"); due today in ink; the rest quiet */
.cm-when { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; font-size: var(--t-meta); color: var(--muted); overflow-wrap: anywhere; }
.cm-when.late { color: var(--urgent); font-weight: 500; }
.cm-when.today { color: var(--ink); font-weight: 500; }
.cm-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.cm-actions .btn.small { min-height: 36px; padding: 0 12px; font-size: var(--t-meta); }
.cm-actions .icon-btn { width: 36px; height: 36px; color: var(--ink); }
/* inside a card: one item per combinado, hairlines between them */
.cm-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cm-item { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-top: 1px solid var(--line); }
.cm-item:first-child { border-top: 0; padding-top: 0; }
.cm-item:last-child { padding-bottom: 0; }
.cm-what-lg { line-height: 1.45; font-weight: 500; overflow-wrap: anywhere; }
.cm-item.closed .cm-what-lg { color: var(--muted); }
.cm-item .cm-actions { margin-top: 6px; }
/* "Escolher data" in its sheet */
.sheet-form { display: flex; flex-direction: column; gap: 16px; padding: 0 4px 8px; }
.date-fields { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; }
.date-fields input { min-height: 52px; padding: 0 12px; font-family: var(--f-numero); font-variant-numeric: tabular-nums; }

/* ---------- Mais > Avisos: settings with a switch, times, a line in plain words each ---------- */
.settings { display: flex; flex-direction: column; }
.setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); }
.setting:first-child { border-top: 0; padding-top: 0; }
.setting-name { grid-column: 1; font: 500 var(--t-apoio)/1.35 var(--f-texto); overflow-wrap: anywhere; }
.setting .switch { grid-column: 2; grid-row: 1; }
.setting-text { grid-column: 1 / -1; color: var(--muted); max-width: 62ch; font-size: var(--t-meta); line-height: 1.5; }
.setting-fields { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-top: 8px; }
.time-field { gap: 6px; }
.time-field label { font-size: var(--t-meta); }
.time-input { width: 9rem; min-height: 48px; padding: 0 12px; font: 500 var(--t-apoio)/1.2 var(--f-numero); font-variant-numeric: tabular-nums; }
.time-input:disabled { opacity: 0.5; }
/* the switch: square like the rest (2 px corners), its state also in a word */
.switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 0 0 8px; border: 0; border-radius: var(--raio); background: none; color: var(--ink); font-weight: 500; cursor: pointer; }
.switch-word { min-width: 4.75em; text-align: right; color: var(--muted); font-size: var(--t-meta); }
.switch[aria-checked="true"] .switch-word { color: var(--ink); }
.switch-track { position: relative; flex: none; width: 48px; height: 28px; border: 2px solid var(--ink); border-radius: var(--raio); background: transparent; transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.switch-knob { position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 1px; background: var(--ink); transition: transform 0.24s var(--ease), background-color 0.2s var(--ease); }
.switch[aria-checked="true"] .switch-track { background: var(--ink); }
.switch[aria-checked="true"] .switch-knob { transform: translateX(20px); background: var(--bg); }
.switch:hover .switch-track { box-shadow: 0 0 0 3px var(--tint); }

/* ---------- Toast and sheet ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + 16px); z-index: 80;
  max-width: min(92vw, 440px); padding: 12px 20px; border-radius: var(--raio);
  background: var(--ink); color: var(--bg); font-weight: 500; text-align: center;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.3s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--urgent); color: var(--accent-ink); }
/* with "Desfazer": the line and its one button; clickable only while it shows, and out of the Tab order when hidden */
.toast.has-action { display: flex; align-items: center; gap: 16px; width: max-content; padding: 6px 6px 6px 20px; text-align: left; }
.toast.has-action.show { pointer-events: auto; }
.toast-action {
  flex: none; min-height: 40px; padding: 0 14px; border: 1px solid currentColor; border-radius: var(--raio);
  background: transparent; color: inherit; font: 500 var(--t-apoio)/1 var(--f-texto); cursor: pointer;
}
.toast-action:hover { background: color-mix(in srgb, var(--bg) 16%, transparent); }
.toast-action:focus-visible { outline: 3px solid var(--bg); outline-offset: 2px; }
.toast:not(.show) .toast-action { visibility: hidden; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: transparent; transition: background-color 0.2s var(--ease); }
.sheet-backdrop.open { background: var(--backdrop); }
.sheet {
  width: 100%; max-width: 480px; max-height: 92dvh; overflow-y: auto; background: var(--bg); border-radius: var(--raio) var(--raio) 0 0; border-top: 1px solid var(--line); box-shadow: var(--shadow);
  padding: 20px 20px calc(16px + var(--safe-b)); display: flex; flex-direction: column; gap: 8px;
  transform: translateY(24px); opacity: 0; transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.sheet-backdrop.open .sheet { transform: none; opacity: 1; }
.sheet-title { font: 500 var(--t-corpo)/1.25 var(--f-titulo); letter-spacing: -0.01em; padding: 0 4px; overflow-wrap: anywhere; }
.sheet-hint { padding: 0 4px 8px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.sheet-options { display: flex; flex-direction: column; margin-bottom: 8px; }
.sheet-option { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 52px; padding: 0 4px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; cursor: pointer; font-weight: 500; border-radius: 0; transition: background-color 0.2s var(--ease); }
.sheet-option:first-child { border-top: 0; }
.sheet-option:hover { background: var(--tint); }

/* ---------- Phone ---------- */
@media (max-width: 899px) {
  .hide-phone { display: none !important; }
  /* four tabs; "Combinados" (about 94 px in Geist 16) gets a little more of the bar so it is never cut: 100 px of 360 */
  .nav-item[data-key="combinados"] { flex-grow: 1.15; }
  .ask-bar { display: none; }
  /* Hoje's rows as Agora's: tap opens, slide right = Feito, left = Adiar (the buttons stay on the computer) */
  .crow-acts.inline { display: none; }
  .crow.inline .crow-in { flex-direction: row; }
  .today-line { font-size: var(--t-meta); }
  /* 4. one header line everywhere but Hoje: the small mark, the title, the count, then search, ask and refresh */
  .pane-head.compact { align-items: center; gap: 4px; min-height: 56px; padding: 8px 4px 8px var(--pad-l); }
  .pane-head.compact .pane-head-text { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; column-gap: 10px; row-gap: 2px; }
  .pane-head.compact .brand-line { margin: 0; }
  .pane-head.compact .brand-line .wordmark, .pane-head.compact .brand-line .brand-name { display: none; }
  .pane-head.compact .brand-line .app-mark { top: 0; }
  .pane-head.compact .pane-title { font-size: var(--t-corpo); line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; }
  .pane-head.compact .pane-sub { flex: 1 1 0; min-width: 0; min-height: 0; margin: 0; font-size: var(--t-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pane-head.compact .conn-summary { flex-basis: 100%; white-space: normal; }
  .pane-head.compact .pane-back { margin: 0 0 0 -10px; }
  .pane-head.compact .pane-back + .brand-line { display: none; }
  .pane-head.compact .icon-btn { margin-bottom: 0; }
  .topbar-actions .btn-label { display: none; }
  .topbar-actions .btn.small { min-width: 44px; min-height: 44px; padding: 0; border-color: transparent; }
  .topbar-actions .btn.small:hover { background: var(--tint); }
  .use-row { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .use-tool { display: none; }
  .detail-body { padding-bottom: 20px; }
  .crow-acts.inline .crow-act-label { display: inline; }
}
@media (max-width: 380px) {
  .crow-acts.inline .crow-act { padding: 0 10px; }
}

/* ---------- Computer: rail, list (or Hoje), the right column ---------- */
@media (min-width: 900px) {
  body { overflow: hidden; }
  .shell { display: grid; grid-template-columns: 72px 360px minmax(0, 1fr); }
  .shell[data-view="hoje"] { grid-template-columns: 72px minmax(0, 1.1fr) minmax(400px, 1fr); }
  .panes { display: contents; }
  .nav {
    position: static; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px;
    height: 100dvh; padding: 16px 10px; border-top: 0; border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: none;
    background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .rail-brand { display: flex; padding: 8px 0 20px 4px; margin: 0 0 12px; border-bottom: 1px solid var(--line); }
  .rail-search { display: block; margin-bottom: 10px; }
  .brand-line { display: none; }
  .nav-item.rail-only { display: flex; }
  .nav-item { flex: none; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 0 12px; min-height: 42px; border-radius: var(--raio); text-align: left; font-size: var(--t-apoio); }
  .nav-item:hover { background: var(--tint); }
  .nav-item[aria-current="page"] { background: var(--tint); }
  .nav-item[aria-current="page"]::before { top: 10px; bottom: 10px; left: 0; width: 3px; height: auto; }
  /* the day (Hoje, Agora, Para ler, Combinados), the assistant, where conversations rest, then the foot */
  .nav-item[data-key="assistente"], .nav-item[data-key="adiados"] { margin-top: 14px; }
  .nav-item[data-key="conexoes"] { margin-top: auto; }
  .nav-item[data-key="assistente"] .nav-icon { color: var(--accent); }
  .nav-keys .kbd { margin-left: auto; }
  .phone-only { display: none !important; }
  .nav-label { overflow: visible; }
  .nav-icon { width: 24px; }
  .badge { position: static; margin-left: auto; top: auto; left: auto; box-shadow: none; }
  .badge.dot { position: static; margin-left: auto; }
  .pane-list { padding: 0; border-right: 1px solid var(--line); }
  .pane-head { padding: 24px 12px 14px var(--pad-l); }
  .today-tools { display: none; }
  .pane-detail { position: static; height: 100dvh; padding: 0; transform: none; visibility: visible; transition: none; }
  .back-btn { display: none; }
  .topbar { padding: 10px 16px 10px 24px; min-height: 68px; border-bottom: 1px solid var(--line); }
  .topbar-title { display: none; }
  .topbar-actions .btn.small { min-height: 36px; padding: 0 12px; }
  /* nothing to show in the bar on a computer (Mais sections, a fresh question): no empty band on top */
  .topbar:not(:has(> .id)):not(:has(> .topbar-actions:not(:empty))) { display: none; }
  .detail-root:has(> .topbar[hidden], > .asst-head:first-child) > .asst-head { padding-top: 24px; }
  .detail-body { padding: 18px 28px 32px; }
  .asst-body { padding-top: 12px; }
  .detail-root > .asst-head { padding-top: 18px; }
  .detail-root:has(> .asst-head) > .topbar { border-bottom: 0; min-height: 52px; }
  .composer, .asst-composer { padding: 12px 28px 14px; }
  .actionbar { justify-content: flex-start; padding: 12px 28px; }
  .actionbar .btn { flex: none; min-width: 128px; }
  .ask-bar { padding: 12px 16px 14px var(--pad-l); }
  .toast { left: 16px; bottom: 16px; transform: translateY(12px); }
  .toast.show { transform: none; }
  .sheet-backdrop { align-items: center; }
  .sheet { border-radius: var(--raio); border: 1px solid var(--line); padding: 24px 24px 18px; }
  /* the sign-in, half and half (DECISOES "Desktop meio a meio"): the art on one side, the form centred in the other */
  .login { display: grid; grid-template-columns: 1fr 1fr; min-height: 100dvh; }
  .login-art { position: sticky; top: 0; height: 100dvh; padding-top: 0; border-bottom: 0; border-right: 1px solid var(--line); }
  .login-delta { top: 50%; width: 132px; }
  .login-card { align-self: center; max-width: calc(34rem + 2 * clamp(32px, 5vw, 80px)); padding: 32px clamp(32px, 5vw, 80px); }
  .login-card h1 { font-size: var(--t-titulo-d); }
}
/* 900-1199: the rail keeps only the icons (their names stay for screen readers and in the tooltip) */
@media (min-width: 900px) and (max-width: 1199px) {
  .rail-brand { justify-content: center; padding: 8px 0 16px; }
  .rail-brand .wordmark, .rail-brand .brand-name { display: none; }
  .rail-brand .app-mark { top: 0; }
  .nav-item { justify-content: center; padding: 0; gap: 0; }
  .nav-label, .rail-search .search-entry-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .rail-search .search-entry { justify-content: center; padding: 0; border-color: transparent; }
  .rail-search .kbd, .nav-keys .kbd { display: none; }
  .badge { position: absolute; top: 3px; left: calc(50% + 6px); margin: 0; box-shadow: 0 0 0 2px var(--bg); }
  .badge.dot { position: absolute; top: 8px; left: calc(50% + 8px); margin: 0; }
  .nav-item[aria-current="page"]::before { left: -10px; }
}
@media (min-width: 1200px) {
  .shell { grid-template-columns: 232px 390px minmax(0, 1fr); }
  .shell[data-view="hoje"] { grid-template-columns: 232px minmax(0, 1.2fr) minmax(420px, 1fr); }
  .nav { padding: 24px 12px; }
}
@media (min-width: 1500px) {
  .shell { grid-template-columns: 248px 430px minmax(0, 1fr); }
  .shell[data-view="hoje"] { grid-template-columns: 248px minmax(0, 1.25fr) minmax(480px, 1fr); }
  .detail-body { padding: 20px 40px 36px; }
  .composer, .asst-composer { padding: 12px 40px 16px; }
  .asst-head { padding: 0 40px; }
}
@media (min-width: 900px) {
  .qr-layout, .code-layout { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 36px; }
  .action-row { grid-template-columns: minmax(200px, auto) minmax(0, 1fr); }
  .tech-list > div { grid-template-columns: 10rem minmax(0, 1fr); }
  .timeline li { grid-template-columns: 9rem minmax(0, 1fr); }
}
@media (min-width: 1200px) {
  .need-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .need-row .btn { grid-column: auto; }
  .promises:not(.phone-only) .promise-list { grid-template-columns: 1fr 1fr; gap: 20px 32px; }
}

/* ---------- Motion ---------- */
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }
@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
  .pane-detail { transition: none; }
  .asst-msg.streaming .asst-text-body > :last-child::after { animation: none; }
}