/* Tandom console — SHARED stylesheet (extracted verbatim from console.html, 2026-08-24).
   THE design system for every operator view, rfq/ views included: tokens in :root, base
   elements, chips/pills/buttons/tables. Rules: flat fills (no gradients), bright blue only
   for real CTAs/focus/selection, neutral chips with semantic dots. New views LINK this file;
   never inline-copy tokens. (HANDOFF_console_rework.md section 2 binds.) */

  /* design tokens — clean white base + solid blue accent (Figma product mockup) */
  /* gold lives ONLY in the T icon (an image); no gradients anywhere else — flat fills + hover states */
  /* FIGMA-PALETTE TRIAL (2026-08-05, uncommitted) — cream + periwinkle from the Tandom
     Figma file, replacing cool-gray + blue-600. Roll back: git checkout -- console.html */
  :root { --bg:#FFFFFF; --card:#fff; --panel:#fff; --soft:#F5F5F5; --ink:#0A0A0A; --mut:#737373; --line:#E5E5E5;
          --cream:#F7F4EE; --sand:#E3DAB4;                        /* warm accents: table headers, active bits */
          --acc:#5E8BFC; --acc-hover:#5076D6;                      /* bright blue: CTAs + focus ONLY */
          --acc-soft:#EEF3FE; --acc-border:#C7D7FE;                /* pale blue surfaces / soft border */
          --btn:#5E8BFC; --btn-hover:#5076D6;                      /* flat blue CTA, white text */
          --sel:#F7F4EE; --link:#333437;                          /* cream selection bg / near-black text links */
          --dot-ok:#16A34A; --dot-warn:#F97316; --dot-neutral:#737373;  /* subtle status dots (no loud pills) */
          --ok:#16A34A; --ok-soft:#E7F6EC; --warn:#F97316; --warn-soft:#FDEEE0;
          --bad:#DC2626; --danger:#DC2626; --danger-soft:#FBE9E9;
          --on-solid:#FFFFFF;                                     /* text on any solid fill */
          --head:#FAFAFA; --bubble-them:#F5F5F5;                  /* card headers / assistant bubble */
          --danger-border:#E5B4B4; --ok-border:#CFE5D6;
          /* state colours with documented intent (COTACAO_QUEUE_DESIGN, 2026-08-03):
             queued is the one TERMINAL state and owns a filled pill; the classification
             chips are deliberately louder than the neutral status pills. Values unchanged
             by the palette pass, but now editable in one place. */
          --queued:#5B6B9A; --draft:#B4B2A9;
          --chip-working-bg:#EEF2FF; --chip-working-fg:#3730A3;
          --chip-ok-bg:#ECFDF5;      --chip-ok-fg:#065F46;
          --chip-warn-bg:#FFF7ED;    --chip-warn-fg:#9A3412;
          --gate-bg:#FEF3C7; --gate-fg:#92400E; --gate-border:#FDE68A;
          --flag-bg:#FFFBEB; --flag-fg:#5B4A1E; --flag-border:#F2E6C4;
          --variant-bg:#F3E8FF; --variant-fg:#6B21A8; }
  * { box-sizing:border-box; }
  body { margin:0; font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
         background:var(--bg); color:var(--ink); font-feature-settings:"tnum"; }
  header { display:flex; align-items:center; gap:12px; padding:10px 22px;
           border-bottom:1px solid var(--line); background:var(--card); }
  header span { color:var(--mut); font-size:12px; }
  .brand { display:flex; align-items:center; gap:10px; }
  .brand .tico { height:23px; width:auto; display:block; }
  .brand .wm { height:18px; width:auto; display:block; }
  #tabs { display:flex; gap:4px; margin-left:36px; }
  .tab { border:0; background:transparent; font:inherit; font-weight:600; color:var(--mut);
         padding:6px 12px; border-radius:8px; cursor:pointer; display:flex; align-items:center; gap:7px; }
  .tab.on { background:var(--sel); color:var(--link); }
  .tab.dis { opacity:.45; cursor:default; }
  .tab { transition:background .15s, color .15s; }
  .tab:not(.on):not(.dis):hover { background:var(--soft); color:var(--ink); }
  .tab .n { background:var(--soft); color:var(--mut); border-radius:20px; font-size:11px;
            padding:1px 7px; font-weight:700; }
  .tab.on .n { background:var(--line); color:var(--ink); }
  .tab .n:empty { display:none; }
  /* cotações view */
  #view-cotacoes { max-width:900px; margin:0 auto; padding:18px 22px; }
  #view-cotacoes.wide { max-width:1400px; }
  .subtabs { display:flex; gap:6px; margin-bottom:16px; }
  .stab { border:1px solid var(--line); background:var(--card); border-radius:20px;
          padding:6px 14px; cursor:pointer; font:inherit; font-size:13px; color:var(--mut); font-weight:600;
          transition:background .15s, border-color .15s, color .15s; }
  .stab:hover:not(.on) { border-color:var(--link); color:var(--link); background:var(--sel); }
  .stab.on { background:var(--acc); border-color:var(--acc); color:var(--on-solid); }
  .qacts { display:flex; gap:8px; padding:10px 14px; }

  /* na fila: flat item table */
  .qtable-wrap { border:1px solid var(--line); border-radius:8px; background:var(--card); overflow:hidden; }
  table.qtable { border-collapse:separate; border-spacing:0; width:100%; font-size:13px; margin:0; }
  table.qtable th, table.qtable td { border-bottom:1px solid var(--line); padding:10px 12px;
               text-align:left; vertical-align:top; }
  table.qtable tbody tr:last-child td { border-bottom:0; }
  table.qtable thead th { background:var(--cream); font-size:11px; text-transform:uppercase;
               letter-spacing:.04em; color:var(--mut); font-weight:600; }
  table.qtable td .muted { font-size:11.5px; }
  table.qtable th.sel-h, table.qtable td.sel-c { width:34px; text-align:center; }
  table.qtable input[type=checkbox] { width:16px; height:16px; accent-color:var(--acc); cursor:pointer; }
  .linklike { border:0; background:transparent; color:var(--link); font-weight:600; cursor:pointer;
              font:inherit; font-size:13px; padding:0; }
  .ghost.sm { padding:5px 10px; font-size:12px; }
  .plano-actionbar { display:flex; align-items:center; gap:12px; margin-bottom:12px;
               background:var(--sel); border:1px solid var(--sel); border-radius:8px; padding:10px 14px; }
  .plano-actionbar span { font-size:13px; font-weight:600; color:var(--link); }

  /* dispatch-plan grid (plano proposto) */
  .plano-btn { border:0; border-radius:8px; padding:7px 14px; background:var(--btn); color:var(--on-solid);
               font-weight:600; cursor:pointer; font-size:13px; white-space:nowrap; margin-left:auto;
               transition:background .15s, box-shadow .15s; }
  .plano-btn:hover:not(:disabled) { background:var(--btn-hover); box-shadow:0 1px 3px rgba(37,99,235,.35); }
  .plano-btn:disabled { opacity:.5; cursor:default; }
  .spin { display:inline-block; width:14px; height:14px; margin-right:8px; vertical-align:-2px;
          border:2px solid var(--line); border-top-color:var(--link); border-radius:50%;
          animation:spin .8s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }
  .plano-back { border:0; background:transparent; color:var(--link); font-weight:600; cursor:pointer;
                font-size:13px; padding:4px 0; }
  .plano-h { font-size:15px; margin:6px 0 4px; }
  .plano-sub { color:var(--mut); font-size:12.5px; margin-bottom:12px; max-width:720px; }
  /* sticky header: title left, primary action right (replaces the full-width bar) */
  .plano-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
                position:sticky; top:0; z-index:6; background:var(--bg); padding:2px 0 8px;
                border-bottom:1px solid var(--line); margin-bottom:12px; }
  .plano-head-l { min-width:0; }
  .plano-head-l .plano-h { margin-bottom:0; }
  .plano-head-r { display:flex; align-items:center; gap:12px; flex-shrink:0; padding-top:4px; }
  /* filters over the right pane */
  .plano-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
  .plano-controls .lbl { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--mut); }
  .plano-controls input.psearch { border:1px solid var(--line); border-radius:20px; padding:5px 12px;
               font:inherit; font-size:12.5px; width:190px; }
  .fpill { border:1px solid var(--line); background:var(--card); border-radius:20px; padding:5px 12px;
               font:inherit; font-size:12.5px; color:var(--mut); cursor:pointer;
               transition:background .15s, border-color .15s, color .15s; }
  .fpill:hover:not(.on) { border-color:var(--link); color:var(--link); background:var(--sel); }
  .fpill.on { background:var(--acc); border-color:var(--acc); color:var(--on-solid); }
  .plano-controls select { border:1px solid var(--line); border-radius:20px; padding:5px 10px; font:inherit;
               font-size:12.5px; color:var(--ink); background:var(--card); cursor:pointer; }
  /* two-pane master-detail: items on the left, the item's suppliers on the right */
  .plano-2pane { display:flex; gap:16px; align-items:flex-start; }
  .plano-railcol { width:250px; flex-shrink:0; position:sticky; top:64px; }
  .rail-title { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--mut);
               font-weight:700; margin:0 0 6px 2px; }
  #plano-rail { border:1px solid var(--line); border-radius:8px; background:var(--card);
               overflow:hidden auto; max-height:calc(100vh - 180px); }
  .rail-it { padding:10px 12px; border-bottom:1px solid var(--line); cursor:pointer; }
  .rail-it:last-child { border-bottom:0; }
  .rail-it.on { background:var(--acc-soft); box-shadow:inset 3px 0 0 var(--acc); }
  .rail-it b { font-size:12.5px; font-weight:600; display:block; }
  .rail-it .meta { font-size:11px; color:var(--mut); margin-top:2px; }
  .rail-it .meta.warn { color:var(--warn); }
  /* the item + its filters + its suppliers live in ONE framed card */
  #plano-detail { flex:1; min-width:0; border:1px solid var(--line); border-radius:8px;
               background:var(--card); }   /* overflow visible so filter dropdowns can escape the card */
  .detail-head { background:var(--head); border-bottom:1px solid var(--line); padding:12px 14px; border-radius:7px 7px 0 0; }
  .detail-head b { font-size:14px; }
  .detail-head .muted { font-size:12px; margin-top:2px; }
  .detail-body { padding:12px 14px; }
  .detail-bulk { display:flex; gap:14px; margin:2px 0 10px; }
  .detail-bulk button { border:0; background:transparent; color:var(--link); font:inherit;
               font-size:12px; font-weight:600; cursor:pointer; padding:0; }
  #sup-list { border:1px solid var(--line); border-radius:8px; overflow:hidden; }
  #sup-list table { width:100%; border-collapse:collapse; font-size:13px; }
  #sup-list th { text-align:left; font-weight:600; color:var(--muted); font-size:11.5px;
                 text-transform:uppercase; letter-spacing:.02em; padding:8px 10px;
                 border-bottom:1px solid var(--line); white-space:nowrap; }
  #sup-list td { padding:8px 10px; border-top:1px solid var(--line); vertical-align:top; }
  #sup-list tr:first-child td { border-top:0; }
  #sup-list th.num, #sup-list td.num { text-align:right; white-space:nowrap; }
  #sup-list th.dotcol, #sup-list td.dotcol { text-align:center; white-space:nowrap; }
  .dots { letter-spacing:1px; color:var(--acc); font-size:12px; }
  .dots .off { color:var(--line); }
  .hlp { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
         border:1px solid var(--line); border-radius:50%; font-size:10px; color:var(--muted);
         margin-left:5px; cursor:help; vertical-align:middle; text-transform:none; }
  .hlp:hover, .hlp:focus-visible { border-color:var(--acc); color:var(--acc); background:var(--acc-soft); }
  /* Column help lived in a native title=: a 13px target behind a ~1s OS delay,
     with nothing on tap or keyboard, so the explanations went unread. This
     bubble is position:fixed because #sup-list is overflow:hidden and would
     clip an absolutely-positioned one. Hover, focus and click all open it. */
  #tip { position:fixed; z-index:40; display:none; max-width:290px;
         background:var(--card); border:1px solid var(--line); border-radius:8px;
         padding:8px 11px; box-shadow:0 6px 20px rgba(0,0,0,.14);
         font-size:12px; line-height:1.45; font-weight:400; color:var(--ink);
         text-transform:none; letter-spacing:normal; text-align:left; }
  #tip.on { display:block; }
  .sup-row { display:flex; align-items:flex-start; gap:10px; padding:9px 14px; border-top:1px solid var(--line); }
  .sup-row:first-child { border-top:0; }
  .sup-row input[type=checkbox] { width:16px; height:16px; accent-color:var(--acc); cursor:pointer;
               margin-top:2px; flex-shrink:0; }
  .sup-main { flex:1; min-width:0; }
  .sup-name { font-weight:600; }
  .sup-facts { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin-top:3px; }
  .sup-facts .muted { font-size:11.5px; }
  .role-lab { font-size:11px; background:var(--soft); color:var(--mut); border-radius:20px; padding:1px 8px; }
  .flag { cursor:pointer; }
  .flag-reason { display:none; font-size:12px; color:var(--flag-fg); background:var(--flag-bg); border:1px solid var(--flag-border);
               border-radius:6px; padding:6px 10px; margin-top:6px; }
  .flag-reason.open { display:block; }
  .cons-badge { font-size:11px; background:var(--soft); color:var(--mut); border-radius:20px; padding:2px 10px;
               font-weight:600; margin-top:5px; display:inline-block; }
  .pi-empty { padding:12px 14px; color:var(--mut); font-size:12.5px; }
  /* país multi-select dropdown */
  .dd { position:relative; display:inline-block; }
  .dd > summary { list-style:none; cursor:pointer; border:1px solid var(--line); background:var(--card);
               border-radius:20px; padding:5px 12px; font-size:12.5px; color:var(--mut); }
  .dd > summary::-webkit-details-marker { display:none; }
  .dd[open] > summary { background:var(--acc-soft); border-color:var(--acc); color:var(--acc); }
  .dd-menu { position:absolute; z-index:6; top:112%; left:0; min-width:190px; max-height:300px; overflow:auto;
               background:var(--card); border:1px solid var(--line); border-radius:8px;
               box-shadow:0 6px 20px rgba(0,0,0,.12); padding:6px; }
  .dd-menu label { display:flex; align-items:center; gap:8px; padding:5px 8px; font-size:12.5px;
               border-radius:6px; cursor:pointer; }
  .dd-menu label:hover { background:var(--soft); }
  .dd-note { font-size:11.5px; color:var(--mut); line-height:1.4; padding:4px 8px 7px; max-width:230px;
               border-bottom:1px solid var(--line); margin-bottom:4px; }
  .dd-pais .dd-menu { left:auto; right:0; }   /* rightmost control: open leftward, stay on-screen */
  /* "mínimo de bolinhas": one threshold row per dot column, inside the dropdown */
  .dots-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:3px 8px; font-size:12.5px; }
  .dots-btns { display:flex; gap:4px; }
  .dots-row .fpill { padding:2px 8px; font-size:11.5px; }
  .dots-keep { border-top:1px solid var(--line); margin-top:4px; }
  .dd-dots .dd-menu { min-width:320px; left:auto; right:0; }
  .dd-dots .dd-note { max-width:none; }   /* the note explains a 320px menu, not a 230px one */
  @media (max-width: 820px){ .plano-2pane { flex-direction:column; } .plano-railcol { width:100%; position:static; } #plano-rail { max-height:none; } }
  .plano-confirm.sticky { position:sticky; top:8px; z-index:5; box-shadow:0 2px 10px rgba(0,0,0,.06); }
  .plano-confirm { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
               background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 14px; }
  .plano-confirm-btn { border:0; border-radius:8px; padding:9px 18px; background:var(--btn); color:var(--on-solid);
               font-weight:600; cursor:pointer; margin-left:auto; white-space:nowrap;
               transition:background .15s, box-shadow .15s; }
  .plano-confirm-btn:hover:not(:disabled) { background:var(--btn-hover); box-shadow:0 1px 3px rgba(37,99,235,.35); }
  .plano-confirm-btn:disabled { opacity:.5; cursor:default; }
  .plano-msg { font-size:12.5px; color:var(--ink); }
  .plano-errs { background:var(--danger-soft); border:1px solid var(--danger-border); border-radius:8px; padding:10px 12px;
               margin-top:12px; font-size:12.5px; color:var(--bad); }
  .plano-done { background:var(--ok-soft); border:1px solid var(--ok-border); border-radius:8px; padding:12px 14px;
               margin-top:12px; }
  /* resizable 3-pane layout (left conversas / chat / itens) — flush panes,
     thin draggable dividers, widths persisted per-device in localStorage */
  #view-conversas { display:grid;
         grid-template-columns: var(--cw-left,260px) 7px minmax(320px,1fr) 7px var(--cw-right,340px);
         gap:0; padding:0; height:calc(100vh - 58px); }
  #view-conversas > #rail, #view-conversas > #chatCol { border:0; border-radius:0; }
  #view-conversas > #rail, #view-conversas > #chatCol, #view-conversas > #itemsCol {
         padding:16px 18px; min-width:0; background:var(--card); }
  /* right pane is flush like the others: drop the inner card chrome */
  #view-conversas > #itemsCol > .card { border:0; border-radius:0; padding:0; }
  .col-resizer { cursor:col-resize; display:flex; align-items:stretch; justify-content:center;
         touch-action:none; user-select:none; }
  .col-resizer::before { content:''; width:1px; background:var(--line); transition:background .12s, width .12s; }
  .col-resizer:hover::before, .col-resizer.dragging::before { width:2px; background:var(--mut); }

  /* conversation rail */
  #rail { display:flex; flex-direction:column; min-height:0; }
  #railList { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
  .rail-item { display:flex; align-items:center; gap:4px; width:100%; border:0; background:transparent;
               text-align:left; padding:8px 10px; border-radius:8px; cursor:pointer; font:inherit; color:var(--ink); }
  .rail-item:hover { background:var(--soft); }
  .rail-item.active { background:var(--sel); color:var(--link); font-weight:600; }
  /* kebab + pin (shared by chats and project headers) */
  .rail-kebab { border:0; background:transparent; color:var(--mut); cursor:pointer; opacity:0; flex-shrink:0;
               padding:2px 3px; border-radius:5px; display:flex; align-items:center; transition:opacity .12s, background .12s; }
  .rail-item:hover .rail-kebab, .rail-proj-head:hover .rail-kebab { opacity:.65; }
  .rail-kebab:hover { background:var(--card); color:var(--ink); opacity:1; }
  .rail-pin { color:var(--mut); flex-shrink:0; display:flex; align-items:center; }
  .rail-pin svg { width:12px; height:12px; }
  /* one-line title; on hover the full name scrolls if it overflows (JS-measured) */
  .rail-name { flex:1; min-width:0; display:block; overflow:hidden; }
  .rail-name-t { display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden;
               text-overflow:ellipsis; vertical-align:bottom; }
  .rail-item.marquee .rail-name-t { max-width:none; text-overflow:clip;
               animation:railmq var(--mq-dur,4s) ease-in-out infinite alternate; }
  @keyframes railmq { from{transform:translateX(0)} to{transform:translateX(var(--mq-shift,0))} }
  /* rail sections: project folders + Recentes (PR2) */
  .rail-action { display:flex; align-items:center; gap:9px; width:100%; border:0; background:transparent;
               padding:8px 10px; border-radius:8px; cursor:pointer; font:inherit; font-size:13px;
               font-weight:600; color:var(--ink); margin-bottom:10px; transition:background .12s; }
  .rail-action:hover { background:var(--soft); }
  .rail-action svg { color:var(--mut); flex-shrink:0; }
  .rail-sec-head { display:flex; align-items:center; justify-content:space-between; gap:6px;
               font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--mut);
               font-weight:700; margin:20px 4px 7px; }
  .rail-sec-head:first-of-type { margin-top:8px; }
  .rail-sec-add { border:0; background:transparent; color:var(--mut); cursor:pointer; font-size:16px;
               line-height:1; padding:0 4px; opacity:0; transition:opacity .12s, color .12s; }
  .rail-sec-head:hover .rail-sec-add { opacity:.75; }
  .rail-sec-add:hover { color:var(--ink); opacity:1; }
  .rail-proj { border-radius:8px; }
  .rail-proj-head { display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:8px;
               cursor:pointer; color:var(--ink); font-weight:600; font-size:13px; user-select:none; }
  .rail-proj-head:hover { background:var(--soft); }
  .rail-proj-caret { font-size:10px; color:var(--mut); transition:transform .12s; width:10px; flex-shrink:0; }
  .rail-proj-icon { color:var(--mut); flex-shrink:0; display:flex; align-items:center; }
  .rail-proj.collapsed .rail-proj-caret { transform:rotate(-90deg); }
  .rail-proj-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rail-proj-add { border:0; background:transparent; color:var(--mut); cursor:pointer; opacity:0; flex-shrink:0;
               padding:2px 3px; border-radius:5px; display:flex; align-items:center; transition:opacity .12s, background .12s; }
  .rail-proj-add svg { width:15px; height:15px; }
  .rail-proj-head:hover .rail-proj-add { opacity:.65; }
  .rail-proj-add:hover { background:var(--card); color:var(--ink); opacity:1; }
  .rail-sec-add svg { width:15px; height:15px; }
  .rail-proj-body { padding-left:10px; }
  .rail-proj.collapsed .rail-proj-body { display:none; }
  .rail-item.dragging { opacity:.45; }
  .drop-hover { outline:2px dashed var(--acc); outline-offset:-2px; background:var(--sel); }
  .rail-empty-proj { font-size:11px; color:var(--mut); padding:5px 10px; font-style:italic; }
  .rail-name-edit { display:block; width:100%; box-sizing:border-box; border:1px solid var(--acc);
               border-radius:6px; padding:3px 6px; font:inherit; color:var(--ink); background:var(--card); outline:none; }
  /* archived section */
  .rail-archived { margin-top:8px; }
  .rail-archived > summary { list-style:none; cursor:pointer; font-size:11px; text-transform:uppercase;
               letter-spacing:.05em; color:var(--mut); font-weight:700; margin:12px 4px 6px; }
  .rail-archived > summary::-webkit-details-marker { display:none; }
  /* context menu (⋯) */
  .ctx-menu { position:fixed; z-index:50; min-width:200px; background:var(--card); border:1px solid var(--line);
               border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.14); padding:5px; }
  .ctx-head { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--mut); padding:6px 9px 3px; }
  .ctx-sep { height:1px; background:var(--line); margin:5px 6px; }
  .ctx-item { display:flex; align-items:center; gap:9px; width:100%; border:0; background:transparent; text-align:left;
               padding:7px 9px; border-radius:6px; cursor:pointer; font:inherit; font-size:13px; color:var(--ink); }
  .ctx-item:hover { background:var(--soft); }
  .ctx-item svg { width:15px; height:15px; color:var(--mut); flex-shrink:0; }
  .ctx-item.danger { color:var(--bad); } .ctx-item.danger svg { color:var(--bad); }
  /* No bare `.dot` element rule here: status draws its dot as .chip::before, and
     an unscoped .dot{display:inline-block;width:7px} also matched the supplier
     table's dot columns, collapsing those th/td to their padding under
     border-box. Scope any new dot styling to its own class. */

  /* selected item card = the thread the composer is bound to */
  .item.sel { border:1.5px solid var(--acc); }
  .item.sel .item-head { background:var(--sel); }
  .talkhint { font-size:11px; color:var(--link); font-weight:600; margin-left:8px; }
  /* item drawer — the item's workspace slides OVER the room; geral stays anchored */
  #dback { position:fixed; inset:0; background:rgba(20,20,20,.28); opacity:0;
           pointer-events:none; transition:opacity .22s; z-index:19; }
  #dback.open { opacity:1; pointer-events:auto; }
  #drawer { position:fixed; top:0; right:0; height:100vh; width:min(760px, 68vw);
            background:var(--bg); border-left:1px solid var(--line);
            box-shadow:-12px 0 40px rgba(0,0,0,.14); z-index:20;
            transform:translateX(103%); transition:transform .24s ease;
            display:flex; flex-direction:column; padding:16px 18px; }
  #drawer.open { transform:translateX(0); }
  #dhead { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  #dhead b { font-size:15px; }
  #dclose { margin-left:auto; border:0; background:transparent; font-size:18px;
            cursor:pointer; color:var(--mut); padding:4px 8px; }
  #dact { display:none; align-items:center; gap:12px; margin-top:10px;
          background:var(--ok-soft); border:1px solid var(--ok-border); border-radius:8px; padding:9px 12px; }
  #dact.on { display:flex; }
  #dact span { font-size:12.5px; color:var(--ink); flex:1; }
  #dactBtn { border:0; border-radius:8px; padding:8px 16px; background:var(--btn); color:var(--on-solid);
             font-weight:600; cursor:pointer; font-size:13px; white-space:nowrap;
             transition:background .15s, box-shadow .15s; }
  #dactBtn:hover:not(:disabled) { background:var(--btn-hover); box-shadow:0 1px 3px rgba(37,99,235,.35); }
  #dactBtn:disabled { opacity:.5; }
  #dficha { background:var(--card); border:1px solid var(--line); border-radius:8px;
            padding:10px 12px; max-height:36vh; overflow-y:auto; margin-bottom:10px; }
  #dthread { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px;
             padding:4px 2px; }
  #dcomposer { margin-top:10px; }
  /* #newChat now styled via .rail-action (discreet, ChatGPT-style) */
  /* open questions = item state, rendered in the item panel (not a message) */
  #dq { display:none; }
  #dq.on { display:block; margin:10px 0 4px; padding:10px 12px;
           background:var(--soft); border:1px solid var(--line); border-radius:8px; }
  .dq-head { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
             color:var(--mut); margin-bottom:8px; }
  .dq-item { display:flex; gap:8px; align-items:flex-start; padding:5px 0; }
  .dq-item + .dq-item { border-top:1px solid var(--line); }
  .dq-n { flex:0 0 auto; width:18px; height:18px; border-radius:50%; margin-top:1px;
          background:var(--link); color:var(--on-solid); font-size:11px; font-weight:700;
          display:inline-flex; align-items:center; justify-content:center; }
  .dq-q { font-size:13px; line-height:1.45; }
  .dq-opts { margin-top:5px; display:flex; flex-wrap:wrap; gap:4px; }
  .dq-opt { font-size:11px; border:1px solid var(--line); border-radius:20px;
            padding:1px 8px; color:var(--mut); }
  /* geral thread → item pills: the pointer, never the question text */
  .qpills { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  .qpill { font-size:12px; font-weight:600; border-radius:20px; padding:3px 11px; cursor:pointer;
           background:var(--soft); border:1px solid var(--line); color:var(--link); }
  .qpill:hover { border-color:var(--link); }
  .qpill .qpill-n { color:var(--mut); font-weight:600; margin-left:5px; }
  #runbar { display:none; background:var(--soft); border:1px solid var(--line); border-radius:8px;
            padding:8px 12px; margin-bottom:12px; font-size:12.5px; color:var(--mut); }
  #runbar.on { display:flex; align-items:center; gap:8px; }
  #runbar a { color:var(--link); font-weight:600; font-size:12px; margin-left:auto;
              text-decoration:none; cursor:pointer; }
  #runbar a:hover { text-decoration:underline; }
  .runpulse { width:8px; height:8px; border-radius:50%; background:var(--mut); display:inline-block;
              animation:thinkpulse 1.1s ease-in-out infinite; }
  @keyframes runpulse { 50% { opacity:.35; } }
  /* a run in ANOTHER conversa pulses on that conversa's rail row — next to the
     thing it is about, never inside the conversa you are reading */
  .rail-run { display:none; width:6px; height:6px; border-radius:50%; flex:0 0 auto;
              background:var(--link); margin-right:6px;
              animation:thinkpulse 1.1s ease-in-out infinite; }
  .rail-item.running .rail-run { display:inline-block; }
  .item.stub { opacity:.85; border-style:dashed; }
  #releaseBar { display:none; background:var(--card); border:1px solid var(--line); border-radius:8px;
                padding:12px 14px; margin-bottom:14px; }
  #releaseBar.on { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  #releaseBar .rmsg { font-size:13px; }
  #releaseBtn { border:0; border-radius:8px; padding:8px 16px; background:var(--btn); color:var(--on-solid);
                font-weight:600; cursor:pointer; transition:background .15s, box-shadow .15s; }
  #releaseBtn:hover:not(:disabled) { background:var(--btn-hover); box-shadow:0 1px 3px rgba(37,99,235,.35); }
  #releaseBtn:disabled { opacity:.5; }
  .relchk { width:16px; height:16px; accent-color:var(--acc); margin-right:2px; flex-shrink:0; }
  .relchk:disabled { opacity:.3; cursor:not-allowed; }
  .card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px; }
  .card h2 { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); margin:0 0 10px; }

  /* preços pagos (S1 Comex benchmark, ROADMAP #23) --------------------------
     THE FIGURES ARE THE POINT. No reliability label renders here in any wording:
     clean/moderate/mixed/unknown are retired from every buyer-facing surface
     (HANDOFF_serving_surface.md §2). The range itself is the signal and a wide
     spread IS the warning. Every wording below comes from the API payload
     (`source_pt`, `period_pt`, `figure_labels_pt`, `state_pt`) rather than being
     written here — one contract, one place to change it. */
  #dmarket:not(:empty) { margin-bottom:10px; }
  .mkt { border:1px solid var(--line); border-radius:8px; overflow:hidden; }
  .mkt-h { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
           padding:9px 12px; background:var(--head); border-bottom:1px solid var(--line); }
  .mkt-h b { font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--mut);
             font-weight:600; }
  .mkt-h .mkt-sub { font-size:11.5px; color:var(--mut); }
  .mkt table { width:100%; border-collapse:collapse; font-size:12.5px; }
  .mkt th, .mkt td { padding:6px 12px; text-align:right; white-space:nowrap; }
  .mkt th:first-child, .mkt td:first-child { text-align:left; width:36%; }
  .mkt thead th { font-size:11px; text-transform:uppercase; letter-spacing:.04em;
                  color:var(--mut); font-weight:600; border-bottom:1px solid var(--line); }
  .mkt tbody tr + tr td { border-top:1px solid var(--line); }
  .mkt td.med { font-weight:600; color:var(--ink); }
  .mkt td.vol { color:var(--mut); font-size:11.5px; }
  .mkt-foot { padding:8px 12px; border-top:1px solid var(--line); background:var(--card);
              font-size:11px; color:var(--mut); line-height:1.5; word-break:break-word; }
  /* ⚠️ STALE IS LOUD ON PURPOSE. A missed monthly refresh must be visible on the
     surface itself, not only in a log nobody reads: the whole failure mode this
     closes is old prices that look current. Never soften this to a grey note. */
  .mkt.is-stale { border-color:var(--danger-border); }
  .mkt.is-stale .mkt-h { background:var(--danger-soft); border-bottom-color:var(--danger-border); }
  .mkt-stale { display:block; padding:8px 12px; background:var(--danger-soft);
               border-top:1px solid var(--danger-border); color:var(--bad);
               font-size:11.5px; font-weight:600; line-height:1.45; }

  /* chat */
  #chatCol { display:flex; flex-direction:column; min-height:0; }
  #thread { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:4px 2px; }
  /* new-chat hero (personality on an empty conversa) */
  .chat-hero { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
               text-align:center; gap:10px; padding:20px; }
  .chat-hero-title { font-size:26px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
  .chat-hero-sub { font-size:14px; color:var(--mut); max-width:440px; line-height:1.5; }
  .bubble { max-width:88%; border-radius:12px; padding:9px 12px; white-space:pre-wrap; font-size:13.5px; }
  .bubble.customer { background:var(--sel); color:var(--ink); align-self:flex-end; border-bottom-right-radius:3px; }
  .bubble.tandom { background:var(--bubble-them); align-self:flex-start; border-bottom-left-radius:3px; }
  /* quiet "thinking" line: pulsing dot + muted text, no loud box, no monospace */
  .bubble.pending { background:transparent; align-self:flex-start; color:var(--mut);
                    padding:4px 2px; font-size:12.5px; display:flex; align-items:center; gap:8px; max-width:100%; }
  .bubble.pending .ptext { display:inline-flex; align-items:center; gap:8px; }
  .bubble.pending .ptext::before { content:''; width:8px; height:8px; border-radius:50%;
                    background:var(--mut); animation:thinkpulse 1.1s ease-in-out infinite; flex-shrink:0; }
  @keyframes thinkpulse { 0%,100%{opacity:.25;transform:scale(.75)} 50%{opacity:1;transform:scale(1)} }
  .bubble .meta { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:6px; }
  .bubble .who { font-size:10px; color:var(--mut); text-transform:uppercase; letter-spacing:.05em; }
  .copybtn { border:0; background:transparent; color:var(--link); font-size:11px; cursor:pointer; padding:0; font-weight:600; }
  .bubble .tools { display:flex; align-items:center; gap:8px; margin-left:auto;
                   opacity:0; transition:opacity .15s; }
  .bubble:hover .tools { opacity:1; }
  .btime { font-size:10px; color:var(--mut); }
  .bubble.customer .btime { color:var(--mut); }
  .bubble.customer .copybtn { color:var(--link); }
  /* composer: both the attach icon and the send button live INSIDE the field,
     bottom-aligned (ChatGPT / Claude Code style) */
  #composer { margin-top:10px; }
  .composer-field { position:relative; display:flex; width:100%; }
  .composer-field textarea { flex:1; border:1px solid var(--line); border-radius:12px;
               padding:11px 48px 11px 40px; font:inherit; min-height:46px; max-height:140px; resize:vertical; }
  .composer-attach { position:absolute; left:8px; bottom:8px; width:28px; height:28px; display:flex;
               align-items:center; justify-content:center; border:0; background:transparent; color:var(--mut);
               border-radius:7px; cursor:pointer; padding:0; transition:background .12s, color .12s; }
  .composer-attach svg { width:16px; height:16px; }
  .composer-attach:hover { background:var(--soft); color:var(--ink); }
  .composer-send { position:absolute; right:8px; bottom:8px; width:32px; height:32px; flex-shrink:0; border:0;
               border-radius:8px; padding:0; background:var(--btn); color:var(--on-solid); font-size:16px; cursor:pointer;
               display:flex; align-items:center; justify-content:center; transition:background .15s, box-shadow .15s; }
  .composer-send:hover:not(:disabled) { background:var(--btn-hover); box-shadow:0 1px 3px rgba(37,99,235,.35); }
  .composer-send:disabled { opacity:.45; }
  .linklike:hover, .plano-back:hover, .detail-bulk button:hover, .copybtn:hover { text-decoration:underline; }
  /* new-chat empty state: hide the itens column, let the chat pane fill (3-col returns once items exist) */
  #view-conversas.solo { grid-template-columns: var(--cw-left,260px) 7px minmax(0,1fr); }
  #view-conversas.solo > #rz-right, #view-conversas.solo > #itemsCol { display:none; }
  .dropping { outline:2px dashed var(--acc); outline-offset:-6px; border-radius:8px; }
  .hint { font-size:11px; color:var(--mut); margin-top:6px; }

  /* items */
  #itemsCol { overflow-y:auto; min-height:0; }
  .item { border:1px solid var(--line); border-radius:8px; margin-bottom:14px; overflow:hidden; background:var(--card); }
  .item-head { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--head);
               border-bottom:1px solid var(--line); cursor:pointer; }
  .chip { font-size:11px; font-weight:600; border-radius:20px; padding:2px 10px; }
  /* status chips: one neutral pill + a small semantic dot — no loud fills */
  .chip.quote_ready, .chip.awaiting_customer, .chip.handed_off, .chip.draft, .chip.live {
      background:var(--soft); color:var(--mut); display:inline-flex; align-items:center; gap:6px; }
  .chip.quote_ready::before, .chip.awaiting_customer::before, .chip.handed_off::before,
  .chip.draft::before, .chip.live::before {
      content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0; background:var(--dot-neutral); }
  .chip.quote_ready::before { background:var(--dot-ok); }
  .chip.awaiting_customer::before { background:var(--dot-warn); }
  .chip.handed_off::before { background:var(--on-solid); }
  /* CLASSIFICATION PROGRESS — deliberately louder than the neutral status pills.
     The whole point is that it must be spottable across five rows at a glance
     while the user is wondering whether the page has frozen. */
  .chip.working { background:var(--chip-working-bg); color:var(--chip-working-fg); display:inline-flex;
      align-items:center; gap:6px; }
  .chip.ok { background:var(--chip-ok-bg); color:var(--chip-ok-fg); display:inline-flex;
      align-items:center; gap:6px; }
  .chip.warn { background:var(--chip-warn-bg); color:var(--chip-warn-fg); display:inline-flex;
      align-items:center; gap:6px; }
  .chip.working .spin { width:10px; height:10px; border-width:2px; }
  /* queued is the one TERMINAL state in this list, so it stops sharing the
     neutral pill every other status uses — a glance has to distinguish "sent"
     from "ready to send" (Marcelo, 2026-08-03). It fills with the colour this
     state ALREADY owns (--queued), not the accent: --btn is the action
     colour and a blue pill on a finished item would read as something to click. */
  .chip.handed_off { background:var(--queued); color:var(--on-solid); }
  #dact.done { background:var(--soft); border-color:var(--line); }
  #dact.done a { color:var(--link); font-weight:600; text-decoration:none; }
  #dact.done a:hover { text-decoration:underline; }
  .sup-count { margin-left:auto; font-size:12px; color:var(--ink); }
  .sup-link{color:var(--link);text-decoration:none;border-bottom:1px solid var(--line)} .sup-link:hover{border-bottom-color:var(--link)}
  .dq-assume{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px}
  .dq-as-line{font-size:13px;color:var(--ink);margin:3px 0}
  .ws-wrap{display:inline-flex;align-items:center;gap:6px;margin-left:18px}
  .ws-wrap select{border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);padding:4px 8px;font-size:13px;max-width:190px}
  .ws-ctx{font-size:12px;color:var(--mut)}
  .ws-modal{position:fixed;inset:0;background:rgba(31,41,51,.35);display:flex;align-items:center;justify-content:center;z-index:900}
  .ws-modal .box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;width:min(640px,92vw)}
  .ws-modal textarea{width:100%;min-height:260px;border:1px solid var(--line);border-radius:8px;padding:10px;font:13px/1.45 ui-monospace,monospace;color:var(--ink);background:var(--card)}
  .ws-modal .row{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
  .dom-sec{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
  .dom-sec .dom-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
  .dom-sec table{width:100%}
  .chip-neutral{display:inline-flex;align-items:center;gap:5px;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-size:11px;color:var(--mut);vertical-align:middle}
  .chip-neutral .dot{width:7px;height:7px;border-radius:50%;display:inline-block}
  .gate-pill { display:inline-block; font-size:11px; font-weight:600; border-radius:20px;
               padding:1px 9px; margin-top:4px; background:var(--gate-bg); color:var(--gate-fg);
               border:1px solid var(--gate-border); }
  .queued-head { font-size:11px; font-weight:700; letter-spacing:.04em;
                 text-transform:uppercase; color:var(--mut);
                 margin:16px 0 6px; padding-top:12px; border-top:1px solid var(--line); }
  .item.queued { opacity:.72; }
  .item.queued:hover { opacity:1; }
  .chip.live::before { background:var(--dot-warn); animation:thinkpulse 1.2s ease-in-out infinite; }
  .item-body { padding:12px 14px; display:none; }
  .item.open .item-body { display:block; }
  .spec { background:var(--soft); border-radius:6px; padding:10px; margin:6px 0; font-size:13px; }
  table { width:100%; border-collapse:collapse; font-size:13px; margin-top:8px; }
  td { padding:4px 8px; border-top:1px solid var(--line); }
  td.prov { width:22px; text-align:center; }
  .p-stated { color:var(--ok); } .p-inferred { color:var(--warn); } .p-gap { color:var(--bad); }
  .baseline { background:var(--danger-soft); border:1px dashed var(--danger-border); border-radius:6px; padding:8px 10px;
              font-size:12px; margin-top:8px; }
  .baseline b { color:var(--bad); font-size:11px; letter-spacing:.04em; }
  .rowbtns { display:flex; gap:8px; margin-top:8px; }
  .ghost { background:var(--sel); color:var(--link); font-weight:600; border:1px solid var(--line);
           border-radius:6px; padding:8px 12px; cursor:pointer; transition:background .15s; }
  .ghost:hover { background:var(--line); }
  .muted { color:var(--mut); font-size:12px; }
  .chip.rung-verified { background:var(--ok-soft); color:var(--ok); }
  .chip.rung-proven { background:var(--ok); color:var(--on-solid); }
  .flag { font-size:11px; background:var(--soft); color:var(--mut); border-radius:20px; padding:2px 10px;
          display:inline-flex; align-items:center; gap:6px; }
  .flag::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--dot-warn); flex-shrink:0; }
  .variant { display:inline-block; background:var(--variant-bg); color:var(--variant-fg); border-radius:20px;
             font-size:11px; padding:2px 10px; margin-left:6px; }
  @media (max-width: 980px) {
    #view-conversas { grid-template-columns: 1fr; height:auto; }
    .col-resizer { display:none; }
    #chatCol { height: 70vh; }
    #rail { display:none; }
  }
  #toast { position:fixed; bottom:18px; right:18px; background:var(--ink); color:var(--on-solid); border-radius:8px;
           padding:10px 16px; font-size:13px; display:none; z-index:9; }

/* plano supplier tables: the select-all header cell sits over the row checkboxes */
#sup-list th.sel-h { width: 34px; text-align: center; }
#sup-list th.sel-h input { cursor: pointer; }


/* Read-only profile (ruled 2026-08-31): the customer_viewer that the Nutriplan
   pilot ships on. Every write control in the console carries .btn-primary or
   .btn-write, so one rule takes them all out of that user's view. The gate is
   still the server; this is only about not offering what cannot be done. */
body[data-acesso="leitura"] .btn-primary,
body[data-acesso="leitura"] .btn-write { display: none !important; }
.hdr-leitura { font-size: 11.5px; color: var(--mut); border: 1px solid var(--line);
               border-radius: 999px; padding: 2px 9px; white-space: nowrap; }