/**
 * rag-ai.css — the chat screen at https://vogo.me/rag-ai/.
 * Palette: the one of the /mcp/prompt/ pages, dark or light by <html data-theme> — set before the first paint
 * from the user's choice (the light/dark button) or, without one, from the system setting (index.php).
 * @file_version 1.0.181
 */

:root {
  /* Dark (16.10.2026): more contrast — page vs panel, visible outlines, secondary fills apart from the panel */
  --bg: #0e1117; --panel: #181c25; --line: #343c4a; --fg: #e8eaef; --muted: #a3acba;
  --acc: #4f9cff; --code: #2a303d; --mine: #24467a;
  --ok: #3fb950; --run: #d29922; --off: #f85149;
  --radius: 7px;
  --vogo-icon-blue: #0F6CBD;   /* VOGO icons style: flat outline glyphs in one blue (images/modele/vogo-icons-style.png) */
  /* (user, 16.10.2026) the menu section bands in VOGO icon blue, flat, corners of 5px */
  /* the same blue in both themes; (user, 16.10.2026) lighter and see-through, on the bands and on "Conversație nouă" */
  --sec-band: rgba(28, 124, 212, .8);
  --vogo-blue-light: #4996dd;   /* VOGO blue light (code-writing #general_constants): the band's blue as seen on white */
  --sec-band-radius: 5px;
}
:root[data-theme="light"] {
  --bg: #f5f6f8; --panel: #fff; --line: #dfe3ea; --fg: #1a1d24; --muted: #5b6472;
  --acc: #1f6feb; --code: #eef1f6; --mine: #dbe8ff;
}
/* Dark theme: the same blue, lighter, so the outline stays readable on the dark panel */
:root:not([data-theme="light"]) { --vogo-icon-blue: #4c9be8; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.55 system-ui, "Segoe UI", Roboto, sans-serif; }

/* Full-height column: bar, menu, thread (the only part that scrolls), composer */
/* --app-h = the visible height above the keyboard, set by rag-ai.js (Samsung Browser ignores interactive-widget) */
.app { display: flex; flex-direction: column; height: var(--app-h, 100dvh); max-width: 920px; margin: 0 auto; }

/* ---- top bar ---- */
.bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.bar-title { font-weight: 700; font-size: 17px; margin-right: auto; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.agent .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.agent.on .dot { background: var(--ok); }
.agent.off .dot { background: var(--off); }
.bar-btn { font: inherit; font-size: 14px; background: transparent; color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; cursor: pointer; }
.bar-btn:hover { border-color: var(--acc); }
.bar-btn.armed { border-color: var(--acc); color: var(--acc); }

/* ---- RAG menu: five columns on desktop, wrapping on the phone ---- */
.menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); max-height: 45dvh; overflow-y: auto; }
.menu-col { display: flex; flex-direction: column; gap: 4px; }
.menu-head { font-size: 13px; font-weight: 700; color: var(--muted); padding: 2px 4px; }
.opt { font: inherit; font-size: 14px; text-align: left; background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 9px; cursor: pointer; }
.opt:hover { border-color: var(--acc); }

/* ---- conversation ---- */
.thread { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 14px; }
.empty { margin: auto; color: var(--muted); text-align: center; }
.msg { max-width: 92%; border-radius: var(--radius); padding: 10px 13px; overflow-wrap: anywhere; }
.msg.mine { align-self: flex-end; background: var(--mine); white-space: pre-wrap; }
/* The agent's answer takes the whole width of the thread (user, 06.10.2026: no empty band on the right) */
.msg.ai { max-width: 100%; align-self: flex-start; background: var(--panel); border: 1px solid var(--line); }
.msg .meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
/* (user, 24.10.2026) "VOGO agent (model)": the model light grey, half transparent */
.msg .meta .msg-model { color: var(--muted); opacity: .6; font-weight: 400; }
.msg.mine .meta { justify-content: flex-end; }
.status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 1px 8px; border: 1px solid currentColor; }
.status.new { color: var(--muted); }
.status.running { color: var(--run); }
.status.processed { color: var(--ok); }
.status.cancelled { color: var(--muted); text-decoration: line-through; }
/* The X next to "nou": cancels a message the agent has not taken yet */
.cancel-cmd { font: inherit; font-size: 13px; line-height: 1; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; padding: 0; }
.cancel-cmd:hover { color: var(--off); border-color: var(--off); }
.cancel-cmd:disabled { opacity: .5; cursor: default; }
.new-session { font-size: 12px; color: var(--acc); }
/* The level that made the answer (user, 15.10.2026): 1 rules, 2 Haiku, 3 Claude. */
.msg.ai { position: relative; }
/* On the frame's bottom line, bottom right (user, 15.10.2026): the text interrupts the border, like a legend. */
.answer-level, .answer-top { position: absolute; bottom: 0; transform: translateY(50%); padding: 0 6px;
  background: var(--bg); font-size: 11px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.answer-level { right: 12px; transform: translateY(calc(50% + 3px)); }   /* 3 px lower (user, 15.10.2026) */
/* GO TOP: the same place at the left (user, 15.10.2026) — one discreet arrow, blue when touched. */
.answer-top { left: 12px; display: inline-flex; align-items: center; padding: 0 4px; border: 0;
  color: var(--muted); opacity: .7; cursor: pointer; }
.answer-top:hover, .answer-top:focus-visible { color: var(--acc); opacity: 1; }
.answer-level.level-1 { color: color-mix(in srgb, var(--ok) 50%, transparent); }   /* 50% (user, 15.10.2026) */
.answer-level.level-2 { color: color-mix(in srgb, var(--acc) 50%, transparent); }
.answer-level.level-3 { color: color-mix(in srgb, var(--muted) 50%, transparent); }
/* the work's duration (user, 21.10.2026, AGENTMOB D-097): discreet, before the model label or alone */
.answer-level-dur { color: color-mix(in srgb, var(--muted) 50%, transparent); }
.answer-dur { font-weight: 600; }

/* Markdown inside the answers */
.out p { margin: 0 0 8px; }
.out p:last-child { margin-bottom: 0; }
.out pre { background: var(--code); border-radius: var(--radius); padding: 10px; overflow-x: auto; font-size: 13px;
  /* Long lines wrap: the whole text is seen without a horizontal scroll (user, 11.10.2026) */
  white-space: pre-wrap; overflow-wrap: anywhere; }
.out pre code { white-space: inherit; }
/* Copy button in the top-right corner of a code block; the block keeps room for it */
.code-wrap { position: relative; }
.code-wrap pre { padding-right: 44px; }
.copy-code { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--muted); cursor: pointer; }
.copy-code:hover { color: var(--acc); border-color: var(--acc); }
.copy-code.copied { color: var(--ok); border-color: var(--ok); }
.out code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
/* Tables: a table wider than the screen scrolls sideways (thin scrollbar in the theme colours).
   Cells never break words letter by letter (.msg allows it); column widths follow their content (no upper cap),
   text columns keep 5em so they wrap into readable lines, the first column (#, Cod) takes only what it needs;
   long code such as file paths may break anywhere. */
.out table { border-collapse: collapse; display: block; overflow-x: auto; font-size: 13px; margin: 6px 0; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.out th, .out td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; overflow-wrap: normal; word-break: normal; min-width: 5em; }
.out th:first-child, .out td:first-child { min-width: 0; }
/* Code (a file path) may break anywhere, in the header too, so a long path cannot widen its column
   at the expense of the others (user, 06.10.2026) */
.out td code, .out th code { overflow-wrap: anywhere; }
/* A cell holding code (a file path) would shrink to almost nothing, since code may break anywhere */
.out td:has(> code), .out td:first-child:has(> code) { min-width: 6em; }
.out th { background: var(--code); }
.out a { color: var(--acc); }
.waiting { color: var(--muted); font-style: italic; }
/* "Run paralel" under a waiting message (AGENTMOB D-076) */
.run-parallel { margin-left: 8px; padding: 2px 10px; font: inherit; font-size: 13px; font-style: normal; font-weight: 600; color: var(--vogo-icon-blue); background: transparent; border: 1px solid var(--vogo-icon-blue); border-radius: 5px; cursor: pointer; }
.run-parallel:hover { color: #fff; background: var(--vogo-icon-blue); }
.run-parallel:disabled { opacity: .5; cursor: default; }
/* "Editează" on a waiting message (user, 21.10.2026), like "Run paralel". */
.wait-edit { margin-left: 8px; padding: 2px 10px; font: inherit; font-size: 13px; font-style: normal; font-weight: 600; color: var(--vogo-icon-blue); background: transparent; border: 1px solid var(--vogo-icon-blue); border-radius: 5px; cursor: pointer; }
.wait-edit:hover { color: #fff; background: var(--vogo-icon-blue); }
/* (user, 21.10.2026) both as square icon buttons, the words only in their tooltip */
.run-parallel, .wait-edit { width: 30px; height: 28px; padding: 0; display: inline-flex; align-items: center;
  justify-content: center; vertical-align: middle; font-size: 15px; }
/* (user, 21.10.2026) less in view: no border, smaller, slightly transparent; full colour on hover */
.run-parallel, .wait-edit { width: 24px; height: 24px; margin-left: 4px; font-size: 13px; border: none; opacity: .5; }
.run-parallel:hover, .wait-edit:hover { color: var(--vogo-icon-blue); background: var(--code); opacity: 1; }

/* ---- composer ---- */
.composer { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--panel); }
/* The field and the send arrow share one frame: the border is on .input-wrap, not on the textarea */
.input-wrap { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 4px 4px 0; }
.input-wrap:focus-within { border-color: var(--acc); }
.composer textarea { flex: 1; min-width: 0; width: 100%; font: inherit; color: var(--fg); background: transparent; border: none; padding: 5px 11px; resize: none; max-height: 160px; align-self: center; }
.composer textarea:focus { outline: none; }
.send-icon { flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--acc); color: #fff; border: none; border-radius: 50%; cursor: pointer; }
.send-icon:disabled { opacity: .5; cursor: default; }
.send { font: inherit; background: var(--acc); color: #fff; border: none; border-radius: var(--radius); padding: 0 16px; cursor: pointer; }
.send:disabled { opacity: .5; cursor: default; }

/* ---- own login (_auth.php, D15b) and the logout button in the bar ---- */
.login { margin: max(6vh, 24px) auto auto; width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.login-title { margin: 0 0 4px; font-size: 20px; font-weight: 700; text-align: center; }
.login input { font: inherit; font-size: 16px; min-height: 44px; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 11px; }
.login input:focus { outline: none; border-color: var(--acc); }
.login .send { min-height: 44px; }
.login-error { margin: 0; color: var(--off); text-align: center; }
/* First screens: the VOGO V above the title, the company and copyright at the bottom (user, 10.10.2026) */
.login-logo { display: block; width: 128px; height: 128px; margin: 0 auto 12px; object-fit: contain; }
.login-foot { margin-top: 24px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--muted, #6b7280); }
.login-foot p { margin: 0; }
.login-foot a { color: inherit; }
.bar-form { margin: 0; }

/* ---- attachments: clip button, files picked for the next message, files under a sent message ---- */
.attach { flex: none; width: 44px; height: 46px; font-size: 18px; background: transparent; color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0; cursor: pointer; }
.attach:hover { border-color: var(--acc); }
/* Picked files start where the text field starts: composer padding 14px + clip 44px + gap 8px (user, 05.10.2026) */
.attach-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 0 14px; border-top: 1px solid var(--line); background: var(--panel); }
.files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; white-space: normal; }
.file { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; background: var(--code); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 8px; overflow-wrap: anywhere; }
.file small { color: var(--muted); }
.file-remove { font: inherit; font-size: 15px; line-height: 1; background: transparent; color: var(--muted); border: none; cursor: pointer; padding: 0 2px; }
.file-remove:hover { color: var(--off); }
.attach-error { font-size: 13px; color: var(--off); align-self: center; }
/* Progress of a send with files: grey, it is not an error */
.attach-info { font-size: 13px; color: var(--muted); align-self: center; }

/* ---- top bar icons: the icons of the bar buttons are shown only on the phone ---- */
/* Every screen (user, 05.10.2026: the laptop like the phone): one row — the bar buttons are their icons only
   and the agent state only its dot (text on tap, or when the session expired); the bar is a card detached
   from the edges. */
.bar-icon { display: block; }
.bar-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; }
.bar-btn .bar-text { display: none; }
.bar { flex-wrap: nowrap; margin: 8px 8px 0; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
.agent { cursor: pointer; padding: 6px 4px; }
.agent .dot { width: 12px; height: 12px; }
.agent .agent-label { display: none; }
.agent.show-label .agent-label, .agent.expired .agent-label { display: inline; }

/* Laptop: the chat column takes 70% of the page width. .app spans the whole page and the column is made by side
   margins / paddings of 15%, so the scroll bar of the thread (and of the open menu) sits at the right edge of the page,
   not in the middle of it (user, 05.10.2026). */
@media (min-width: 601px) {
  .app { max-width: none; width: 100%; }
  .bar { margin: 8px 15% 0; }
  .composer, .attach-list { margin: 0 15%; }
  .thread, .menu { padding-left: calc(15% + 14px); padding-right: calc(15% + 14px); }
}

/* Phone: the bar floats at the top, fixed; .app keeps room for it so the menu and the thread start below it. */
@media (max-width: 600px) {
  .app { padding-top: calc(72px + env(safe-area-inset-top)); }
  .bar {
    position: fixed; z-index: 10; margin: 0;
    top: calc(8px + env(safe-area-inset-top)); left: 8px; right: 8px;
  }
}

/* ---- session actions (Conversație nouă, Ieșire): first row of the RAG menu, across all columns ---- */
.menu-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.menu-form { margin: 0; }
.menu-action { font: inherit; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; cursor: pointer; }
.menu-action:hover { border-color: var(--acc); }
.menu-action.armed { border-color: var(--acc); color: var(--acc); }
.menu-icon { display: block; flex: none; }

/* ---- light / dark button, before the agent dot: the moon in light mode, the sun in dark mode ---- */
.theme-btn { padding: 6px 9px; }
.theme-icon { display: block; flex: none; }
:root[data-theme="light"] .theme-sun { display: none; }
:root[data-theme="dark"] .theme-moon { display: none; }

/* ---- RAG menu header (title, close X, search) and the empty result; on every screen ---- */
.menu-top { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.menu-title { font-weight: 700; font-size: 16px; }
.menu-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; padding: 0; }
.menu-close:hover { border-color: var(--acc); }
.menu-search-wrap { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 11px; color: var(--muted); }
.menu-search-wrap:focus-within { border-color: var(--acc); }
.menu-search-icon { flex: none; }
.menu-search { flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--fg); background: transparent; border: none; padding: 9px 0; }
.menu-search:focus { outline: none; }
.menu-empty { grid-column: 1 / -1; color: var(--muted); text-align: center; padding: 24px 0; }

/* Phone: the menu covers the whole screen, above the floating bar, like an app screen:
   header fixed at the top, each category a card, each option a tall list row with its code as a badge. */
@media (max-width: 600px) {
  .menu {
    position: fixed; inset: 0; z-index: 20;
    display: flex; flex-direction: column; gap: 14px;
    max-height: none; border-bottom: none; background: var(--bg);
    padding: 0 12px calc(16px + env(safe-area-inset-bottom));
  }
  /* The cards keep their full height: in a fixed-height flex column they would otherwise shrink to fit the
     screen and cut their options, leaving nothing to scroll. */
  .menu > * { flex-shrink: 0; }
  .menu { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  body.menu-open { overflow: hidden; }
  .menu-top {
    position: sticky; top: 0; z-index: 1; background: var(--bg);
    padding: calc(12px + env(safe-area-inset-top)) 2px 10px;
    border-bottom: 1px solid var(--line);
  }
  .menu-title { font-size: 20px; }
  .menu-close { width: 44px; height: 44px; }
  .menu-search-wrap { min-height: 44px; border-radius: 999px; }
  .menu-actions .menu-action { flex: 1; justify-content: center; min-height: 44px; }
  .menu-actions .menu-form { display: flex; flex: 1; }
  .menu-col { gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .menu-head { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px 6px; }
  .opt {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px;
    font-size: 16px; border: none; border-top: 1px solid var(--line); border-radius: 0; padding: 8px 14px;
  }
  .opt b { flex: none; min-width: 36px; text-align: center; font-size: 13px; color: var(--acc); background: var(--code); border-radius: 999px; padding: 3px 8px; }
  .opt .opt-name { flex: 1; }
  .opt::after { content: "›"; color: var(--muted); font-size: 22px; line-height: 1; }
  .opt:active { background: var(--code); }
}

/* ---- quick alias of a menu option (rag-index "alias"), shown as a small tag after the name ---- */
.opt-alias { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }

/* ---- conversations in the menu: the open one highlighted, the rest one tap away ---- */
.menu-convs { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; }
.conv-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.conv { font: inherit; font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 10px; cursor: pointer; }
.conv:hover { border-color: var(--acc); }
.conv.current { border-color: var(--acc); }
.conv-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-date { flex: none; font-size: 12px; color: var(--muted); }
@media (max-width: 600px) {
  .conv-list { max-height: none; gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .conv { min-height: 50px; font-size: 16px; border: none; border-top: 1px solid var(--line); border-radius: 0; padding: 8px 14px; }
  .conv:first-child { border-top: none; }
}

/* Laptop (user, 05.10.2026): the open menu takes the whole space under the bar (the thread is hidden meanwhile,
   so there is one scroll, not two), and the conversations are small cards, several on a row. */
@media (min-width: 601px) {
  .menu { flex: 1 1 auto; min-height: 0; max-height: none; align-content: start; }
  body.menu-open .thread { display: none; }
  .conv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; max-height: none; }
  .conv { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; padding: 8px 10px; }
  .conv-title { width: 100%; }
  .conv-archived-toggle { grid-column: 1 / -1; }
}

/* ---- clip menu: camera, images, files; opens above the clip, inside the composer ---- */
.attach-menu { position: absolute; left: 14px; bottom: calc(100% + 6px); z-index: 15; display: flex; flex-direction: column; min-width: 220px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0, 0, 0, .2); overflow: hidden; }
.attach-menu button { font: inherit; font-size: 15px; text-align: left; background: transparent; color: var(--fg); border: none; border-top: 1px solid var(--line); padding: 12px 14px; min-height: 48px; cursor: pointer; }
.attach-menu button:first-child { border-top: none; }
.attach-menu button:hover, .attach-menu button:active { background: var(--code); }

/* ---- a sent file is a download button ---- */
.file-dl { font: inherit; font-size: 13px; color: var(--fg); cursor: pointer; }
.file-dl:hover { border-color: var(--acc); }
.file-dl:disabled { opacity: .6; cursor: default; }

/* ---- conversation sheet (long press in the menu): a card at the bottom, above everything ---- */
.conv { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.sheet { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .45); padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
.sheet-card { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, .3); }
.sheet-title { font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 4px; }
.sheet-btn { font: inherit; font-size: 16px; min-height: 48px; text-align: left; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; cursor: pointer; }
.sheet-btn:hover { border-color: var(--acc); }
.sheet-primary { background: var(--acc); color: #fff; border-color: var(--acc); text-align: center; }
.sheet-close { text-align: center; color: var(--muted); }
.sheet-rename { display: flex; flex-direction: column; gap: 8px; }
.sheet-input { font: inherit; font-size: 16px; min-height: 48px; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.sheet-input:focus { outline: none; border-color: var(--acc); }
.sheet-actions { display: flex; gap: 8px; }
.sheet-actions .sheet-btn { flex: 1; text-align: center; }
.sheet-error { margin: 0; min-height: 1em; font-size: 13px; color: var(--off); }

/* ---- archived conversations: a toggle under the active ones, then the archived rows, muted ---- */
.conv-archived-toggle { font: inherit; font-size: 13px; font-weight: 700; text-align: left; color: var(--muted); background: transparent; border: none; padding: 8px 4px; cursor: pointer; }
.conv.archived .conv-title { color: var(--muted); }
@media (max-width: 600px) {
  .conv-archived-toggle { border-top: 1px solid var(--line); padding: 12px 14px; background: var(--panel); }
}

/* ---- a link in the menu actions row (Kanban) looks like the buttons beside it ---- */
a.menu-action { text-decoration: none; }

/* ---- long message: first 10 lines + "Citește tot", which opens the full-screen reader (user, 05.10.2026) ---- */
.msg-text.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10; line-clamp: 10; overflow: hidden; }
.read-more { font: inherit; font-size: 14px; font-weight: 600; color: var(--acc); background: transparent; border: none; padding: 8px 0 2px; cursor: pointer; min-height: 32px; }
.reader { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: var(--bg); }
.reader-bar { display: flex; justify-content: flex-end; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; border-bottom: 1px solid var(--line); background: var(--panel); }
.reader-bar .bar-btn { min-height: 40px; padding: 6px 14px; }
.reader-text { flex: 1; overflow-y: auto; padding: 16px max(14px, calc((100% - 920px) / 2)) calc(24px + env(safe-area-inset-bottom)); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
body.reader-open { overflow: hidden; }

/* ---- queue of messages for later (user, 06.10.2026): the clock in the field saves, the stack button opens the queue ---- */
.queue-save { flex: none; width: 44px; height: 46px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; padding: 0; }
.queue-save:hover { color: var(--acc); border-color: var(--acc); }
.queue-save:disabled { opacity: .5; cursor: default; }
.queue-open { position: relative; flex: none; width: 44px; height: 46px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0; cursor: pointer; }
.queue-open:hover { border-color: var(--acc); }
.queue-badge { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--acc); border-radius: 999px; padding: 0 5px; }

/* The queue dialog: a bigger bottom card; header with the X at the top right, two tabs, the list scrolls inside */
.queue-card { max-width: 640px; max-height: calc(100dvh - 24px - env(safe-area-inset-top)); }
.queue-head { display: flex; align-items: center; gap: 8px; }
.queue-head .sheet-title { flex: 1; min-width: 0; padding-bottom: 0; }
.queue-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); }
.queue-tab { font: inherit; font-size: 15px; font-weight: 600; color: var(--muted); background: transparent; border: none; border-bottom: 2px solid transparent; padding: 8px 12px; min-height: 44px; cursor: pointer; }
.queue-tab.active { color: var(--acc); border-bottom-color: var(--acc); }
.queue-list { flex: 1 1 auto; min-height: 80px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.queue-empty { color: var(--muted); text-align: center; padding: 24px 0; }
.queue-item { display: flex; flex-direction: column; gap: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.queue-meta { font-size: 12px; color: var(--muted); }
.queue-text { white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.queue-item.sent .queue-text { color: var(--muted); }
.queue-item .files { margin-top: 0; }
.queue-actions { display: flex; gap: 8px; justify-content: flex-end; }
.queue-actions .sheet-btn { min-height: 40px; padding: 6px 14px; text-align: center; }
/* Editing: the delete button stays at the left of the footer, away from Save */
/* Item head (user, 07.10.2026): the date at the left, edit and delete as icons at the right */
.queue-top { display: flex; align-items: center; gap: 8px; }
.queue-top .queue-meta { flex: 1; min-width: 0; }
.queue-tools { display: flex; gap: 4px; }
.queue-tool { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--vogo-icon-blue); border: 1px solid transparent; border-radius: var(--radius); padding: 0; cursor: pointer; }
.queue-tool:hover { border-color: var(--line); }
.queue-tool:disabled { opacity: .5; cursor: default; }
.queue-tool-danger { color: var(--off); }
/* The text in a box like the composer, the send plane inside it at the right */
.queue-box { display: flex; align-items: flex-end; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 6px 6px 10px; }
.queue-box .queue-text { flex: 1; min-width: 0; align-self: center; }
.queue-edit { font: inherit; font-size: 16px; color: var(--fg); background: var(--panel); border: 1px solid var(--acc); border-radius: var(--radius); padding: 8px 10px; resize: vertical; min-height: 96px; }
.queue-edit:focus { outline: none; }

/* ---- conversation sheet: VOGO flat outline icons, permanent delete with its warning (user, 06.10.2026, D-011) ---- */
.sheet-btn-icon { display: flex; align-items: center; gap: 12px; }
.sheet-icon { display: block; flex: none; color: var(--vogo-icon-blue); }
.sheet-btn-icon > span { display: flex; align-items: center; gap: 12px; }
#conv-archive .face-restore { display: none; }
#conv-archive.is-archived .face-archive { display: none; }
#conv-archive.is-archived .face-restore { display: flex; }
.sheet-danger { color: var(--off); }
.sheet-danger .sheet-icon { color: var(--off); }
.sheet-danger:hover { border-color: var(--off); }
.sheet-warn { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--off); border-left-width: 4px; border-radius: 0 var(--radius) var(--radius) 0; padding: 10px 12px; }
.sheet-warn-text { margin: 0; font-size: 14px; }
.sheet-danger-solid { background: var(--off); color: #fff; border-color: var(--off); }
.sheet-danger-solid:disabled { opacity: .6; cursor: default; }

/* ---- top bar: the conversation title, renamed in place on double click (user, 06.10.2026) ---- */
.bar-title { cursor: text; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.bar-title-input { flex: 1; min-width: 0; margin-right: auto; font: inherit; font-weight: 700; font-size: 17px; color: var(--fg); background: var(--bg); border: 1px solid var(--acc); border-radius: var(--radius); padding: 3px 8px; }
.bar-title-input:focus { outline: none; }

/* ---- composer tools (clip, clock, queue): hidden, shown by a long press on the send arrow (user, 06.10.2026) ---- */
/* The tools card stands above the send arrow, centred on it: the arrow's centre is 37px from the composer's right
   edge (14px padding + 1px border + 4px field padding + 18px half arrow), the card is 58px wide (44px + 2 x 6px
   padding + 2 x 1px border), so its right edge is at 37 - 29 = 8px. It grows upwards from the arrow. */
.send-tools { position: absolute; right: 19px; bottom: calc(100% + 8px); z-index: 14; display: flex; flex-direction: column-reverse; gap: 8px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0, 0, 0, .2); transform-origin: bottom center; transform: scaleY(0); opacity: 0; pointer-events: none; transition: transform .16s ease-out, opacity .16s ease-out; }
.composer.tools-open .send-tools { transform: scaleY(1); opacity: 1; pointer-events: auto; }
.send-tools .attach, .send-tools .queue-save, .send-tools .queue-open { width: 44px; height: 44px; }
/* The clip menu opens to the left of the tools card, at the height of the clip */
.attach-menu { left: auto; right: calc(8px + 58px + 8px); bottom: 8px; }
.send-icon { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }

/* ---- VOGO icons style in the send-arrow pop-up and the clip menu (user, 06.10.2026): outline glyphs in one blue ---- */
.send-tools .attach, .send-tools .queue-save, .send-tools .queue-open { display: inline-flex; align-items: center; justify-content: center; color: var(--vogo-icon-blue); }
.send-tools svg { stroke-width: 1.8; }
.tool-icon { display: block; flex: none; color: var(--vogo-icon-blue); }
.attach-menu button { display: flex; align-items: center; gap: 12px; }

/* ---- VOGO icons style in the RAG menu actions (Conversație nouă, Kanban, Ieșire), user 06.10.2026 ---- */
.menu-icon { color: var(--vogo-icon-blue); stroke-width: 1.8; }

/* ---- RAG menu options: a long press opens their sheet, so the phone's own long-press menu is suppressed ---- */
.menu .opt { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ---- colour flags on conversations (user, 07.10.2026, like Outlook): the flag before the title; no line on the left (10.10.2026) ---- */
:root { --flag-red: #d13438; --flag-blue: #0f6cbd; --flag-green: #107c10; --flag-orange: #ca5010; --flag-violet: #8764b8; }
.flag-red { --flag: var(--flag-red); }
.flag-blue { --flag: var(--flag-blue); }
.flag-green { --flag: var(--flag-green); }
.flag-orange { --flag: var(--flag-orange); }
.flag-violet { --flag: var(--flag-violet); }
.conv-flag { display: inline-block; vertical-align: -2px; margin-right: 6px; color: var(--flag); }
.flag-row { display: flex; gap: 12px; padding: 4px 6px 8px; }
.flag-swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--panel); background: var(--flag); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.flag-swatch.current, .flag-swatch:hover { box-shadow: 0 0 0 2px var(--fg); }

/* ---- menu sections (user, 07.10.2026): a header per section, opening and closing it ---- */
.conv-sections, .menu-sec-rag, .menu-sec-jobs, .menu-sec-foi, .menu-sec-help { grid-column: 1 / -1; }
/* Ajutor (user, 17.10.2026): one row per topic, like FOI. */
.help-list { display: flex; flex-direction: column; gap: 6px; }
/* The groups of section 7 (VOGOHELP D-011): Compartimente, Produse, Chatul VOGO. */
.help-group { margin: 8px 2px 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.help-filter { height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--fg); font: inherit; font-size: 15px; }
/* Another question for the help agent, and the agent over the chat (user, 17.10.2026, VOGOHELP D-009). */
.help-ask { display: flex; gap: 6px; margin-top: 4px; }
.help-ask-input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--fg); font: inherit; font-size: 15px; }
.help-ask-send { flex: none; width: 44px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius); background: var(--acc); color: #fff; cursor: pointer; }
.help-agent { position: fixed; inset: 0; z-index: 104; display: flex; flex-direction: column; background: var(--bg); }
.help-agent-bar { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; border-bottom: 1px solid var(--line); background: var(--panel); }
.help-agent-title { flex: 1; font-size: 17px; font-weight: 700; }
.help-agent-frame { flex: 1; width: 100%; border: 0; }
.help-list .help-topic { justify-content: flex-start; text-align: left; height: auto; min-height: 40px; white-space: normal; padding: 8px 12px; }
/* FOI — Frequent Open Issues (user, 12.10.2026): one row each, code in bold, the text left-aligned and wrapping. */
.foi-list { display: flex; flex-direction: column; gap: 6px; }
.foi-list .foi { justify-content: flex-start; text-align: left; height: auto; min-height: 40px; white-space: normal; padding: 8px 12px; }
/* Jobs on demand (user, 11.10.2026): the buttons in a wrapping row. */
.job-list { display: flex; flex-wrap: wrap; gap: 8px; }
.conv-sections { display: flex; flex-direction: column; gap: 10px; }
.menu-sec { display: flex; flex-direction: column; gap: 6px; }
.sec-head { display: flex; align-items: center; gap: 8px; width: 100%; font: inherit; font-size: 14px; font-weight: 700; text-align: left; color: var(--muted); background: transparent; border: none; border-bottom: 1px solid var(--line); padding: 8px 4px; cursor: pointer; }
.sec-head:hover { color: var(--fg); }
.sec-chev::before { content: "▾"; display: inline-block; width: 1em; }
.menu-sec.collapsed .sec-chev::before { content: "▸"; }
.menu-sec.collapsed:not(.searching) > .sec-body { display: none; }
.sec-count { font-weight: 400; }
.sec-empty { color: var(--muted); font-size: 13px; padding: 6px 4px; }
/* Six columns A–F on one row on the laptop (F Personal, user 07.10.2026) */
.rag-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
@media (max-width: 600px) {
  .rag-cols { display: flex; flex-direction: column; gap: 14px; }
  .rag-cols > * { flex-shrink: 0; }
  .sec-head { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; padding: 12px 4px 8px; }
}

/* ==== menu and sheets refresh (user, 07.10.2026): the user's form model as reference — outlined fields, blue focus ring,
   light blue focused fill, clear hierarchy; VOGO font Inter; corners stay at var(--radius) (7px rule) ==== */
:root { --field-line: #cdd5e0; --field-focus: #eaf2ff; }
:root:not([data-theme="light"]) { --field-line: #465063; --field-focus: #1f2b3d; }
.menu, .sheet { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }

/* Header: title and X on the first row; search (narrower) and the actions on the second */
.menu-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.menu-title { flex: 1; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.menu-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.menu-tools .menu-search-wrap { flex: 0 1 300px; min-width: 180px; height: 40px; min-height: 0; background: var(--panel); border: 1px solid var(--field-line); border-radius: var(--radius); padding: 0 10px; }
.menu-tools .menu-search-wrap:focus-within { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); background: var(--field-focus); }
.menu-tools .menu-search { font-size: 14px; padding: 0; }
.menu-tools .menu-actions { display: flex; flex-wrap: nowrap; gap: 8px; }
.menu-tools .menu-action { height: 40px; min-height: 0; padding: 0 12px; font-size: 14px; font-weight: 500; background: var(--panel); border: 1px solid var(--field-line); border-radius: var(--radius); }
.menu-tools .menu-action:hover { border-color: var(--acc); color: var(--acc); background: var(--field-focus); }

/* Section headers: small capitals, the count as a pill */
.sec-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 12px 2px 8px; }
.sec-count { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; background: var(--code); border-radius: 999px; padding: 1px 8px; margin-left: 2px; }

/* Conversation cards and RAG options: thin outline, clear title, quiet date */
.conv { border-color: var(--field-line); padding: 10px 12px; transition: border-color .12s, background-color .12s; }
.conv:hover { border-color: var(--acc); }
.conv-title { font-size: 14px; font-weight: 600; }
.conv-date { font-size: 12px; }
.opt { border-color: var(--field-line); font-size: 14px; }
.menu-col > .menu-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 4px 2px 6px; }

/* Sheets (conversation, RAG option, flags): roomier card, bold title, outlined rows */
.sheet-card { padding: 16px; gap: 8px; }
.sheet-title { font-size: 17px; font-weight: 700; padding-bottom: 6px; }
.sheet-btn { font-size: 15px; min-height: 46px; background: var(--panel); border: 1px solid var(--field-line); border-radius: var(--radius); }
.sheet-btn:hover { border-color: var(--acc); background: var(--field-focus); }
.sheet-primary, .sheet-primary:hover { background: var(--acc); border-color: var(--acc); color: #fff; }
.sheet-close { color: var(--muted); }

/* Phone: the search takes the free width, the actions become icons (their names stay as tooltips and labels) */
@media (max-width: 600px) {
  .menu-tools { flex-wrap: nowrap; }
  .menu-tools .menu-search-wrap { flex: 1 1 auto; min-width: 0; height: 44px; border-radius: var(--radius); }
  .menu-tools .menu-actions .menu-action, .menu-tools .menu-actions .menu-form { flex: 0 0 auto; }
  .menu-tools .menu-action { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .menu-tools .menu-action span { display: none; }
  .sec-head { font-size: 12px; padding: 14px 2px 8px; }
}

/* ---- clickable decisions under "⚠ DECIZII NECESARE" (user, 07.10.2026) ---- */
.out table.decisions .dec-opt { cursor: pointer; transition: background-color .12s, box-shadow .12s; }
.out table.decisions .dec-opt:hover { background: var(--field-focus); }
.out table.decisions .dec-opt.picked { background: var(--field-focus); box-shadow: inset 0 0 0 2px var(--acc); font-weight: 600; }
.out table.decisions .dec-other { min-width: 9em; }
.out table.decisions .dec-other.picked { box-shadow: inset 0 0 0 2px var(--acc); }
.dec-other-btn { font: inherit; font-size: 13px; color: var(--acc); background: transparent; border: 1px dashed var(--acc); border-radius: var(--radius); padding: 3px 8px; cursor: pointer; }
.dec-other-text { display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 13px; color: var(--fg); background: var(--panel); border: 1px solid var(--acc); border-radius: var(--radius); padding: 5px 7px; resize: vertical; }
.dec-other-text:focus { outline: none; box-shadow: 0 0 0 1px var(--acc); }
.dec-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 4px; }
.dec-summary { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.dec-send { font: inherit; font-size: 14px; font-weight: 600; color: #fff; background: var(--acc); border: none; border-radius: var(--radius); padding: 7px 16px; cursor: pointer; flex: none; }
.dec-send:disabled { opacity: .45; cursor: default; }
.out table.decisions.sent .dec-opt, .out table.decisions.sent .dec-other-btn { cursor: default; pointer-events: none; }
/* ---- "Deconectare" (was Ieșire) stands alone on the right of the tools row, away from the X that closes the menu
   (user, 07.10.2026) ---- */
.menu-tools .menu-actions { flex: 1 1 auto; }
.menu-tools .menu-actions .menu-form { margin-left: auto; }

/* ---- edit mode of the RAG columns (user, 07.10.2026): pencil next to the title, drag, bin, "+ RAG nou" ---- */
.sec-head-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.sec-head-row .sec-head { flex: 1; border-bottom: none; }
.sec-edit { display: inline-flex; align-items: center; gap: 6px; flex: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--vogo-icon-blue); background: transparent; border: 1px solid var(--field-line); border-radius: var(--radius); padding: 4px 10px; cursor: pointer; }
.sec-edit:hover, .sec-edit[aria-pressed="true"] { border-color: var(--acc); background: var(--field-focus); }
.menu-sec-rag.editing .rag-cols { outline: 2px dashed var(--field-line); outline-offset: 4px; border-radius: var(--radius); }
.menu-sec-rag.editing .opt { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.menu-sec-rag.editing .opt::after { content: none; }
.opt.dragging { opacity: .35; }
.opt.pending-move { border-style: dashed; border-color: var(--acc); }
.opt.pending-delete { opacity: .45; text-decoration: line-through; }
.drag-ghost { position: fixed; z-index: 60; pointer-events: none; opacity: .92; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); background: var(--panel); }
.menu-col.drop-target { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: var(--radius); background: var(--field-focus); }
.opt-add { font: inherit; font-size: 13px; font-weight: 600; color: var(--acc); background: transparent; border: 1px dashed var(--acc); border-radius: var(--radius); padding: 6px 9px; cursor: pointer; text-align: left; }
.opt-add:hover { background: var(--field-focus); }
.opt-add:disabled { opacity: .5; cursor: default; }
.rag-trash { display: none; }
.menu-sec-rag.editing .rag-trash { display: flex; align-items: center; gap: 8px; position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 45; font-size: 14px; font-weight: 600; color: var(--off); background: var(--panel); border: 2px dashed var(--off); border-radius: var(--radius); padding: 12px 20px; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
.rag-trash .tool-icon { color: var(--off); }
.rag-trash.drop-target { background: var(--off); color: #fff; }
.rag-trash.drop-target .tool-icon { color: #fff; }
@media (max-width: 600px) {
  .opt-add { min-height: 46px; margin: 6px 14px 10px; }
}

/* ---- dictation (user, 07.10.2026): microphone in the send pop-up, red chip in the field while listening ---- */
.send-tools .dict-mic { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--vogo-icon-blue); background: transparent; border: 1px solid var(--line); border-radius: var(--radius); padding: 0; cursor: pointer; }
.send-tools .dict-mic:hover { border-color: var(--acc); }
.dict-chip { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 8px; border: 1px solid var(--off); border-radius: 999px; background: var(--panel); }
.dict-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--off); animation: dict-pulse 1s ease-in-out infinite; }
@keyframes dict-pulse { 50% { opacity: .25; } }
.dict-lang { font: inherit; font-size: 12px; font-weight: 700; color: var(--off); background: transparent; border: none; padding: 2px 4px; cursor: pointer; min-width: 28px; }
.dict-stop { width: 26px; height: 26px; border: none; border-radius: 50%; background: var(--off); cursor: pointer; padding: 0; position: relative; }
.dict-stop::after { content: ""; position: absolute; left: 9px; top: 9px; width: 8px; height: 8px; background: #fff; border-radius: 1px; }
.composer.dictating .input-wrap { border-color: var(--off); }
/* "Altceva" is a small "+" button (user, 07.10.2026); its name stays as tooltip and label */
.dec-other-btn { width: 30px; height: 28px; padding: 0; font-size: 18px; font-weight: 600; line-height: 1; border-style: dashed; }

/* ---- preview of a picked or pasted file before sending (user, 07.10.2026) ---- */
.file-preview { cursor: pointer; }
.file-preview:hover { border-color: var(--acc); }
.preview { position: fixed; inset: 0; z-index: 110; display: flex; flex-direction: column; background: rgba(10, 12, 16, .88); }
.preview-bar { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; color: #fff; }
.preview-name { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-close { flex: none; color: #fff; border-color: rgba(255, 255, 255, .4); background: transparent; }
/* The body scrolls a zoomed image; the image keeps centred with auto margins, so no part of it is cut off. */
.preview-body { flex: 1; min-height: 0; display: flex; align-items: flex-start; justify-content: flex-start; overflow: auto; padding: 8px 14px calc(16px + env(safe-area-inset-bottom)); }
.preview-body img { flex: none; margin: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius); background: #fff; user-select: none; }
.preview-body img.sized { max-width: none; max-height: none; }
/* Zoom in the image viewer (user, 20.10.2026): − / level / + / fit in the bar, only for images */
.preview-zoom { display: none; flex: none; align-items: center; gap: 6px; }
.preview.has-image .preview-zoom { display: flex; }
.preview-zoom-btn { color: #fff; border-color: rgba(255, 255, 255, .4); background: transparent; }
.preview-zoom-level { min-width: 48px; font-size: 13px; text-align: center; color: #fff; font-variant-numeric: tabular-nums; }
.preview-body.zoomed { cursor: grab; }
/* one finger scrolls, two fingers are the viewer's own pinch zoom (rag-ai.js), not the page's */
.preview-body { touch-action: pan-x pan-y; }
/* The sheets take only the visible height above the keyboard (Lilia, 21.10.2026, D-079): on the iPhone a fixed
   sheet over the whole screen kept its fields under the keyboard; the card scrolls inside it. */
.sheet { bottom: auto; height: var(--app-h, 100dvh); }
.sheet-card { max-height: 100%; overflow-y: auto; }
.preview-body.zoomed.dragging { cursor: grabbing; }
.preview-none { color: #fff; font-size: 15px; text-align: center; }
/* ---- status dots on conversations (user, 07.10.2026): red = waiting for decisions, green = done and not seen ---- */
.conv-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; flex: none; }
.conv-dot.dot-red { background: var(--flag-red); box-shadow: 0 0 0 3px rgba(209, 52, 56, .18); }
.conv-dot.dot-green { background: var(--ok); box-shadow: 0 0 0 3px rgba(63, 185, 80, .18); }
/* ---- "Sinteză": button in the send pop-up, full-screen summary of the last 5 requests (user, 07.10.2026) ---- */
.send-tools .summary-open { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--vogo-icon-blue); background: transparent; border: 1px solid var(--line); border-radius: var(--radius); padding: 0; cursor: pointer; }
.send-tools .summary-open:hover { border-color: var(--acc); }
.summary { position: fixed; inset: 0; z-index: 105; display: flex; flex-direction: column; background: var(--bg); font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
.summary-bar { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; border-bottom: 1px solid var(--line); background: var(--panel); }
.summary-title { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary-body { flex: 1; overflow-y: auto; padding: 14px max(14px, calc((100% - 920px) / 2)) calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.summary-item { background: var(--panel); border: 1px solid var(--field-line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.summary-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.summary-req { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.summary-text { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.summary-muted { color: var(--muted); font-style: italic; }
.summary-rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.summary-rows li { display: flex; justify-content: space-between; gap: 12px; border-top: 1px dashed var(--line); padding-top: 4px; }
.summary-rows li b { flex: none; max-width: 55%; text-align: right; font-weight: 600; }
/* An open request in "Sinteză" (user, 21.10.2026): a flag with the reason, an orange edge on the card. */
.summary-item.open { border-left: 3px solid var(--run); }
/* "Doar deschise" in the summary's bar and "Închide" on an orange card (user, 21.10.2026). */
.summary-only-open, .summary-only-cancelled { flex: none; height: 36px; padding: 0 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--run); background: transparent; border: 1px solid var(--run); border-radius: var(--radius); cursor: pointer; }
.summary-only-open[aria-pressed="true"], .summary-only-cancelled[aria-pressed="true"] { color: #fff; background: var(--run); }
.summary-done { font: inherit; font-size: 12px; font-weight: 600; color: var(--run); background: transparent; border: 1px solid var(--run); border-radius: var(--radius); padding: 3px 10px; cursor: pointer; }
.summary-done:disabled { opacity: .5; cursor: default; }
.summary-flag { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--run); }
.summary-empty { color: var(--muted); text-align: center; padding: 40px 0; }
/* Search: CTRL+F / magnifier bar, global results, back to results (user, 16.10.2026, AGENTMOB T-011).
   Under the top bar; the reader (z-index 100) covers it. Phone: full width; laptop: the width of the top bar. */
.find-bar { position: fixed; left: 8px; right: 8px; z-index: 96; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
.find-input { flex: 1 1 200px; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--field-line, var(--line)); border-radius: var(--radius); background: var(--bg); color: var(--fg); font: inherit; font-size: 15px; }
.find-count { min-width: 56px; text-align: center; font-size: 13px; color: var(--muted); white-space: nowrap; }
.find-nav, .find-close { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--fg); font-size: 16px; cursor: pointer; }
.find-bar.is-global .find-nav { display: none; }
.find-global { display: flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; cursor: pointer; user-select: none; }
.find-global input { width: 18px; height: 18px; accent-color: var(--acc); }
.find-panel { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 95; margin-top: 12px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .22); padding: 6px 0; }
.find-group + .find-group { border-top: 1px solid var(--line); }
.find-group-head { position: sticky; top: -6px; display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--panel); font-weight: 700; font-size: 14px; }
.find-group-head span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-group-head em { font-weight: 400; font-size: 12px; color: var(--muted); }
.find-group-head b { min-width: 24px; padding: 1px 7px; border-radius: 10px; background: var(--code); font-size: 12px; text-align: center; }
.find-item { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 8px 14px 8px 24px; border: 0; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.find-item:hover, .find-item:focus-visible { background: var(--code); }
.find-meta { font-size: 12px; color: var(--muted); }
.find-snippet { font-size: 14px; overflow-wrap: anywhere; }
.find-snippet mark, mark.find-mark { background: #ffd54f; color: #1a1d24; border-radius: 2px; padding: 0 1px; }
.find-empty { padding: 24px 14px; text-align: center; color: var(--muted); }
.find-back { position: fixed; left: 50%; transform: translateX(-50%); z-index: 96; margin-top: 6px; padding: 8px 16px; border: 0; border-radius: 18px; background: var(--acc); color: #fff; font: inherit; font-size: 14px; font-weight: 600; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); cursor: pointer; }
.msg.find-target { outline: 2px solid var(--acc); outline-offset: 3px; }
@media (min-width: 601px) {
  .find-bar, .find-panel { left: 15%; right: 15%; }
  .find-panel { bottom: 24px; }
}
/* Search in the summary (user, 16.10.2026) */
.summary-search { flex: 0 1 320px; min-width: 120px; height: 36px; padding: 0 12px; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--bg); color: inherit; font: inherit; font-size: 14px; }
/* "Continuă" on a summary request: follow-up with a REF prefix (user, 07.10.2026) */
.summary-ref { margin-left: auto; font: inherit; font-size: 12px; font-weight: 600; color: var(--acc); background: transparent; border: 1px solid var(--acc); border-radius: var(--radius); padding: 3px 10px; cursor: pointer; }
.summary-ref:hover { background: var(--field-focus); }
/* Copy icon before "Continuă" on a summary request (user, 20.10.2026) */
.summary-copy { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px; padding: 0; color: var(--acc); background: transparent; border: 1px solid var(--acc); border-radius: var(--radius); cursor: pointer; }
.summary-copy:hover { background: var(--field-focus); }
.summary-copy.copied { color: var(--ok); border-color: var(--ok); }
.summary-copy + .summary-ref { margin-left: 0; }
/* 21.10.2026 (user): the button that positions the conversation on the message, before the copy icon. */
.summary-goto { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px; padding: 0; color: var(--acc); background: transparent; border: 1px solid var(--acc); border-radius: var(--radius); cursor: pointer; }
.summary-goto:hover { background: var(--field-focus); }
.summary-goto + .summary-copy { margin-left: 0; }
/* "Sinteză" on the phone (user, 23.10.2026): the bar no longer pushes the screen sideways — the title, the two filters
   and ✕ stay on the first row, the search takes the full second row; the card's buttons wrap instead of overflowing. */
.summary { overflow-x: hidden; }
.summary-meta { flex-wrap: wrap; }
@media (max-width: 600px) {
  .summary-bar { flex-wrap: wrap; gap: 8px; padding-left: 12px; padding-right: 12px; }
  .summary-only-open, .summary-only-cancelled { padding: 0 10px; }
  .summary-search { order: 10; flex: 1 1 100%; min-width: 0; }
  .summary-body { padding-left: 10px; padding-right: 10px; }
  .summary-item { padding: 10px 12px; }
}
/* The jobs added by hand to section 5 (user, 23.10.2026): the pencil at the right, as on the FOI, on phone and laptop */
.job-list .job-user { position: relative; padding-right: 44px; }
.job-list .job-user .job-edit { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: inline-flex;
  align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 5px;
  color: var(--vogo-icon-blue); background: transparent; }
.job-list .job-user .job-edit:hover { border-color: var(--vogo-icon-blue); background: var(--field-focus); }
#job-sheet .job-command { min-height: 120px; resize: vertical; font: inherit; }
#job-sheet .sheet-actions .job-delete { flex: 0 0 48px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; color: var(--err, #d64545); }
#job-sheet .sheet-actions .job-delete:hover { border-color: var(--err, #d64545); }
#job-sheet .sheet-actions .job-delete[hidden] { display: none; }
@media (min-width: 601px) {
  #job-sheet { align-items: center; }
  #job-sheet .sheet-card { max-width: 520px; }
}
/* ---- edit mode, phone-friendly (user, 07.10.2026): floating "Gata", drag from the ⠿ handle, rows scroll ---- */
.opt-handle { flex: none; margin-left: auto; padding: 6px 4px 6px 12px; font-size: 20px; line-height: 1; color: var(--muted); touch-action: none; cursor: grab; }
.menu-sec-rag.editing .sec-edit { position: fixed; z-index: 46; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); padding: 10px 18px; font-size: 15px; color: #fff; background: var(--acc); border-color: var(--acc); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.menu-sec-rag.editing .sec-edit .tool-icon { color: #fff; }
/* Hourglass on a conversation the agent is working on (user, 07.10.2026) */
.conv-busy { display: inline-block; margin-right: 6px; font-size: 13px; line-height: 1; animation: conv-busy-pulse 1.6s ease-in-out infinite; }
@keyframes conv-busy-pulse { 50% { opacity: .45; } }
/* The dictation chip shows a small microphone instead of the dot (user, 07.10.2026); it keeps pulsing */
svg.dict-dot { width: 16px; height: 16px; background: none; border-radius: 0; color: var(--off); flex: none; }
/* ---- attachments like WhatsApp (user, 07.10.2026): the clip menu is a bottom sheet with large tiles, a grab bar on top
   and a dimmed page behind it (a tap outside closes it, rag-ai.js). VOGO blue icons, 7px corners. ---- */
.attach-menu {
  position: fixed; left: 50%; right: auto; bottom: 0; top: auto; transform: translateX(-50%);
  width: min(520px, 100%); min-width: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  padding: 26px 18px calc(22px + env(safe-area-inset-bottom));
  background: var(--panel); border: none; border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 0 0 100vmax rgba(10, 12, 16, .45), 0 -6px 24px rgba(0, 0, 0, .2); overflow: visible;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.attach-menu::before { content: ""; position: absolute; top: 9px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 999px; background: var(--line); }
.attach-menu button {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
  min-height: 0; padding: 4px 0; border: none; border-top: none; background: transparent;
  font-size: 14px; color: var(--fg); text-align: center;
}
.attach-menu button:hover, .attach-menu button:active { background: transparent; }
.attach-menu button .tool-icon { width: 28px; height: 28px; padding: 16px; box-sizing: content-box; border-radius: 50%; background: var(--field-focus); border: 1px solid var(--field-line); }
.attach-menu button:hover .tool-icon, .attach-menu button:active .tool-icon { border-color: var(--acc); }
/* The microphone sits where the stop square was and stops the dictation on tap (user, 07.10.2026) */
.dict-mic-stop { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; animation: dict-pulse 1.2s ease-in-out infinite; }
.dict-mic-stop::after { content: none; }
.dict-mic-stop svg.dict-dot { color: #fff; animation: none; }
.dict-chip { padding-left: 4px; }
/* ---- JANA mode button in the top bar (user, 07.10.2026): "J", blue when on ---- */
.jana-btn { min-width: 38px; justify-content: center; font-weight: 800; font-size: 16px; color: var(--muted); }
.jana-btn.on { color: #fff; background: var(--acc); border-color: var(--acc); }
/* ---- full-screen message editor on the phone (user, 07.10.2026) ---- */
.editor { position: fixed; inset: 0; z-index: 108; display: flex; flex-direction: column; background: var(--bg); }
.editor-bar { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; border-bottom: 1px solid var(--line); background: var(--panel); }
.editor-title { flex: 1; font-weight: 700; font-size: 17px; font-family: "Inter", system-ui, sans-serif; }
/* The close icon (X) in place of "Gata" (user, 10.10.2026). */
.editor-done { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--fg); background: transparent; border: 1px solid var(--field-line); border-radius: var(--radius); padding: 0; cursor: pointer; }
.editor-text { flex: 1; width: 100%; resize: none; border: none; outline: none; padding: 16px 16px calc(90px + env(safe-area-inset-bottom)); font: inherit; font-size: 17px; line-height: 1.5; color: var(--fg); background: var(--bg); }
body.editor-open { overflow: hidden; }
/* ---- clickable next steps under "➜ PAȘI URMĂTORI" (user, 07.10.2026) ---- */
.out ol.next-steps, .out ul.next-steps { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 8px; counter-reset: step; }
.out .next-step { counter-increment: step; position: relative; padding: 10px 12px 10px 40px; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--field-focus); cursor: pointer; transition: border-color .12s; }
.out .next-step::before { content: counter(step); position: absolute; left: 12px; top: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--acc); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.out .next-step:hover { border-color: var(--acc); }
.out .next-steps.done .next-step { cursor: default; opacity: .55; }
.out .next-steps.done .next-step.sent { opacity: 1; border-color: var(--ok); }
/* ---- text sizes on the phone (user, 07.10.2026): headings in answers close to the text, not the browser default ---- */
.out h1, .out h2, .out h3, .out h4, .out h5, .out h6 { line-height: 1.3; margin: 12px 0 6px; }
.out h1 { font-size: 1.3em; }
.out h2 { font-size: 1.18em; }
.out h3 { font-size: 1.08em; }
.out h4, .out h5, .out h6 { font-size: 1em; }
@media (max-width: 600px) {
  .msg { font-size: 15px; }
  .out h1 { font-size: 1.15em; }
  .out h2 { font-size: 1.08em; }
  .out h3, .out h4, .out h5, .out h6 { font-size: 1em; }
}
/* ---- microphone in the full-screen editor (user, 07.10.2026): blue at rest, red and pulsing while listening ---- */
/* Floating at the bottom right of the text area (user, 10.10.2026). */
.editor-mic { position: absolute; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 1; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; color: var(--vogo-icon-blue); background: var(--panel); border: 1px solid var(--field-line); border-radius: 50%; padding: 0; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.editor.dictating .editor-mic { color: #fff; background: var(--off); border-color: var(--off); animation: dict-pulse 1.2s ease-in-out infinite; }
/* ---- next steps compact (user, 07.10.2026): no heading, small pills on one line, wrapping when needed ---- */
.out .next-steps-head { display: none; }
.out ol.next-steps, .out ul.next-steps { flex-direction: row; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.out .next-step { padding: 4px 10px 4px 28px; border-radius: 999px; font-size: 14px; line-height: 1.4; }
.out .next-step::before { left: 6px; top: 50%; margin-top: -8px; width: 16px; height: 16px; font-size: 10px; }
/* "Next:" before the pills, on the same line; grey pills (user, 07.10.2026) */
.out ol.next-steps::before, .out ul.next-steps::before { content: "Next:"; align-self: center; font-size: 14px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.out .next-step { background: var(--code); border-color: var(--line); color: var(--fg); }
.out .next-step::before { background: var(--muted); }
.out .next-step:hover { border-color: var(--muted); }
.out .next-steps.done .next-step.sent { border-color: var(--muted); }
@media (max-width: 600px) {
  .out .next-step { font-size: 13px; padding: 3px 9px 3px 26px; }
  .out ol.next-steps::before, .out ul.next-steps::before { font-size: 13px; }
}
/* The copy icon at the end of a "Next" step (user, 23.10.2026): small, in the VOGO icon blue, usable after a send too */
.out .next-step-copy { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 22px; height: 22px; margin: -2px -4px 0 6px; color: var(--vogo-icon-blue); border-radius: 5px; cursor: pointer; }
.out .next-step-copy:hover { background: var(--field-focus); }
.out .next-step-copy.copied { color: var(--ok); }
.out .next-steps.done .next-step-copy { cursor: pointer; }
/* ---- conversation cards on the laptop: same height, two lines at most (user, 08.10.2026) ---- */
@media (min-width: 601px) {
  .conv-list { grid-auto-rows: 1fr; }
  .conv { justify-content: center; }
  .conv-date { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* ---- merge: the list of conversations to absorb (user, 08.10.2026) ---- */
.absorb-list { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.absorb-pick { min-height: 40px; padding: 8px 12px; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.absorb-pick.picked { border-color: var(--acc); box-shadow: inset 3px 0 0 var(--acc); }
.absorb-arch { color: var(--muted); font-size: 13px; }
/* ---- copy / clear (user, 08.10.2026) ---- */
/* In the field: two small buttons in the top-right corner, only once the text is longer than two lines */
.input-wrap { position: relative; }
.field-tools { display: none; position: absolute; top: 4px; right: 6px; z-index: 2; gap: 4px; }
.input-wrap.multi .field-tools { display: inline-flex; }
.input-wrap.multi textarea { padding-right: 62px; }
.field-tool { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; opacity: .85; }
.field-tool:hover { color: var(--fg); opacity: 1; }
/* On every message: a light grey copy icon in the corner of the header line */
.msg-copy { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; color: var(--muted); background: transparent; border: none; border-radius: 4px; cursor: pointer; opacity: .55; }
.msg-copy:hover { opacity: 1; }
.msg.ai .msg-copy { margin-left: auto; }
.msg.mine .msg-copy { margin-right: auto; }
.msg-copy.copied, .field-tool.copied { color: var(--ok); opacity: 1; }
/* ---- press, slide, release on the send arrow (user, 08.10.2026, phone only) ---- */
@media (max-width: 600px) {
  /* the finger may move after the long press without the page taking it as a scroll */
  #send { touch-action: none; }
  .send-tools button.slide-over { border-color: var(--acc); background: var(--field-focus); transform: scale(1.08); }
  /* the explanation of the button under the finger, on its left, from its title (user, 08.10.2026) */
  .send-tools button { position: relative; }
  .send-tools button.slide-over::after {
    content: attr(data-tip); position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    white-space: nowrap; font: 600 14px/1.3 "Inter", system-ui, sans-serif; color: #fff;
    background: rgba(26, 29, 33, .92); border-radius: var(--radius); padding: 7px 11px; pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  }
}
/* ---- desktop: the send pop-up to the right of the composer, outside the chat column (user, 08.10.2026) ---- */
@media (min-width: 1080px) {
  .send-tools { right: auto; left: calc(100% + 10px); bottom: 10px; }
}
/* ---- desktop: the same explanation on mouse over, on the left of the button (user, 08.10.2026) ---- */
@media (min-width: 601px) and (hover: hover) {
  .send-tools button { position: relative; }
  .send-tools button:hover::after {
    content: attr(data-tip); position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    white-space: nowrap; font: 600 13px/1.3 "Inter", system-ui, sans-serif; color: #fff;
    background: rgba(26, 29, 33, .92); border-radius: var(--radius); padding: 6px 10px; pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25); z-index: 20;
  }
}
/* ---- the X at the top of the send pop-up (user, 08.10.2026) ---- */
.send-tools .tools-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: var(--radius); padding: 0; cursor: pointer; }
.send-tools .tools-close:hover { color: var(--fg); border-color: var(--muted); }
/* The glyph inherits the grey: .tool-icon paints every icon blue, and X closes, it is not an action. */
.send-tools .tools-close .tool-icon { color: inherit; }
/* ---- how long ago, next to the copy icon, same faint grey (user, 08.10.2026) ---- */
.msg-corner { display: inline-flex; align-items: center; gap: 4px; }
.msg.ai .msg-corner { margin-left: auto; }
.msg.mine .msg-corner { margin-right: auto; }
.msg-corner .msg-copy { margin: 0; }
.msg-time { font-size: 12px; color: var(--muted); opacity: .7; white-space: nowrap; cursor: default; }
/* ---- ordering of the conversation lists, in the header of section 1 (user, 08.10.2026) ---- */
.menu-sec[data-sec="convs"] { position: relative; }
.conv-sort { position: absolute; top: 6px; right: 0; display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.conv-sort button { font: inherit; font-size: 12px; color: var(--muted); background: transparent; border: none; border-radius: 5px; padding: 3px 9px; cursor: pointer; }
.conv-sort button:hover { color: var(--fg); }
.conv-sort button.on { color: var(--fg); background: var(--code); font-weight: 600; }
/* ---- what the agent works on, floating above the message field (user, 08.10.2026) ---- */
.work-chip {
  position: absolute; right: 14px; bottom: calc(100% + 8px); z-index: 12; max-width: min(560px, calc(100% - 28px));
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font: inherit; font-size: 13px; line-height: 1.45; text-align: left; color: var(--fg);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14); cursor: pointer; opacity: .96;
}
.work-chip:hover { border-color: var(--muted); }
.work-chip-label { color: var(--muted); font-weight: 600; }
.composer.tools-open .work-chip { visibility: hidden; }
/* ---- the dictation microphone in the message field, left of the send arrow (user, 08.10.2026) ---- */
.input-wrap .dict-mic { flex: none; align-self: center; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--vogo-icon-blue); background: transparent; border: none; border-radius: 50%; cursor: pointer; }
.input-wrap .dict-mic:hover { background: var(--code); }
.composer.dictating .input-wrap .dict-mic { display: none !important; }
/* ---- ordering direction on the active button: ↓ natural, ↑ reversed (user, 08.10.2026) ---- */
.conv-sort button.on::after { content: " ↓"; }
.conv-sort button.on.reversed::after { content: " ↑"; }
/* ---- the attach clip in the message field, before the microphone (user, 08.10.2026) ---- */
.input-wrap .attach { flex: none; align-self: center; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--vogo-icon-blue); background: transparent; border: none; border-radius: 50%; cursor: pointer; }
.input-wrap .attach:hover { background: var(--code); }
.composer.dictating .input-wrap .attach { display: none; }
/* ---- the label when the agent has finished: green check (user, 08.10.2026) ---- */
.work-chip.done .work-chip-label { color: var(--ok); }
/* ---- X on the "Lucrează la" label (user, 08.10.2026) ---- */
.work-chip { padding-right: 30px; }
.work-chip-close { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--muted); background: transparent; border: none; border-radius: 50%; cursor: pointer; }
.work-chip-close:hover { color: var(--fg); background: var(--code); }
/* ---- "Mesaje mai vechi" at the top of the thread (user, 08.10.2026) ---- */
.older-btn { align-self: center; font: inherit; font-size: 13px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; cursor: pointer; }
.older-btn:hover { color: var(--fg); border-color: var(--muted); }
.older-btn:disabled { opacity: .5; cursor: default; }
/* ---- earlier requests under a short one, on the label (user, 08.10.2026) ---- */
.work-chip { -webkit-line-clamp: 5; }
.work-chip-context { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
/* ---- staging row at the end of the active conversations (user, 09.10.2026) ---- */
.conv-staging-head { grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 2px 2px; border-top: 1px dashed var(--line); margin-top: 4px; }
/* ---- desktop: floating "to the bottom" button (user, 09.10.2026); never on the phone ---- */
.to-bottom { display: none; }
@media (min-width: 601px) {
  .to-bottom.show { display: inline-flex; align-items: center; justify-content: center; position: absolute; left: 14px; bottom: calc(100% + 8px); z-index: 12; width: 40px; height: 40px; padding: 0; color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 50%; box-shadow: 0 6px 18px rgba(0, 0, 0, .16); cursor: pointer; }
  .to-bottom.show:hover { border-color: var(--muted); }
  .composer.tools-open .to-bottom { visibility: hidden; }
}
@media (min-width: 1080px) {
  .to-bottom.show { left: auto; right: -56px; bottom: calc(100% + 8px); }
}
/* ---- staging as one compact line of pills (user, 09.10.2026) ---- */
.conv-staging { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.conv-staging:empty { display: none; }
.conv-staging .conv-staging-head { grid-column: auto; margin: 0 4px 0 0; padding: 0; border: none; font-size: 11px; }
.conv-staging .conv.conv-staged { width: auto; min-height: 0; flex-direction: row; align-items: center; gap: 5px; padding: 3px 11px; font-size: 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.conv-staging .conv.conv-staged .conv-title { width: auto; max-width: 220px; }
.conv-staging .conv.conv-staged.current { border-color: var(--acc); }
/* ---- the "Lucrează la" label: desktop only (user, 09.10.2026) ---- */
@media (max-width: 600px) {
  .work-chip { display: none !important; }
}
/* ---- clip, microphone and dictation chip on the Send button's line, at the bottom of the field (user, 09.10.2026) ---- */
.input-wrap .attach, .input-wrap .dict-mic { align-self: flex-end; }
.input-wrap .dict-chip { align-self: flex-end; margin-bottom: 3px; }
/* ---- dictation chip as tall as Send; long text: full width, buttons on their own row (user, 09.10.2026) ---- */
.input-wrap .dict-chip { height: 36px; box-sizing: border-box; margin-bottom: 0; }
.input-wrap.multi { flex-wrap: wrap; row-gap: 4px; }
.input-wrap.multi textarea { flex: 1 1 100%; }
.input-wrap.multi .dict-chip, .input-wrap.multi .attach { margin-left: auto; }
/* ---- long text: copy / clear on the bottom row, left; no right padding on the text (user, 09.10.2026) ---- */
.input-wrap.multi textarea { padding-right: 11px; }
.input-wrap.multi .field-tools { position: static; align-self: center; margin-left: 8px; }

/* ---- Pause of a conversation (user, 10.10.2026) ----
   The bar's pause button (amber while the open conversation is paused), the band above the thread with the reason,
   the pause mark on the cards and pills, and the reason box in the conversation sheet. Amber = --run, the colour the
   page already uses for waiting. */
.pause-btn.is-on { color: var(--run); border-color: var(--run); }
.pause-band { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--run) 14%, var(--panel)); color: var(--fg); font-size: 14px; line-height: 1.4; }
.pause-band__icon { color: var(--run); font-size: 16px; }
.pause-band__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pause-band__btn { flex-shrink: 0; font: inherit; font-size: 13px; padding: 5px 10px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel); color: var(--fg); cursor: pointer; }
.pause-band__btn--main { border-color: var(--run); color: var(--run); font-weight: 600; }
.conv-paused { color: var(--run); margin-right: 4px; font-size: 13px; }
.sheet-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.sheet-textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.sheet-hint { margin: -2px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 600px) {
  .pause-band { flex-wrap: wrap; gap: 6px 8px; padding: 8px 12px; }
  .pause-band__text { flex-basis: calc(100% - 30px); }
}

/* ---- The Pauză group (user, 10.10.2026): between the active cards and Staging; each card has its reason under the
   title, on a full row, up to three lines. ---- */
.conv-pause-group { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.conv-pause-group:empty { display: none; }
.conv-pause-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--run); padding: 0 2px 2px; }
.conv.conv-with-reason { flex-wrap: wrap; row-gap: 3px; }
.conv-reason { flex-basis: 100%; min-width: 0; font-size: 12.5px; font-weight: 400; line-height: 1.4; color: var(--muted);
  white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* ---- Meniu RAG (user, 11.10.2026): the search up between the title and the X; the buttons take the whole row
   under it, each with its own border, 4 px (about 1 mm) apart ---- */
.menu-top .menu-title { flex: 0 0 auto; }
.menu-top > .menu-search-wrap { flex: 1 1 0; min-width: 0; height: 40px; min-height: 0; background: var(--panel);
  border: 1px solid var(--field-line); border-radius: var(--radius); padding: 0 10px; }
.menu-top > .menu-search-wrap:focus-within { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); background: var(--field-focus); }
.menu-top > .menu-search-wrap .menu-search { font-size: 16px; padding: 0; }
.menu-tools .menu-actions { flex: 1 1 auto; gap: 4px; margin-left: 0; }
.menu-tools .menu-actions .menu-action { flex: 1 1 0; justify-content: center; border-radius: var(--radius); margin-left: 0; }
.menu-tools .menu-actions .menu-form { display: flex; flex: 1 1 0; }
.menu-tools .menu-actions .menu-form .menu-action { width: 100%; }
@media (max-width: 600px) {
  .menu-top > .menu-search-wrap { height: 44px; }
  .menu-tools .menu-action { width: auto; }
}

/* ---- Text size drop-down under the menu button (user, 11.10.2026): A− / percentage / A+, one joined group ---- */
#menu-toggle { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.font-pop { position: fixed; z-index: 120; display: flex; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0, 0, 0, .18); overflow: hidden; }
.font-pop button { font: inherit; font-size: 18px; font-weight: 700; min-width: 56px; height: 48px; padding: 0 12px;
  background: transparent; color: var(--fg); border: none; border-left: 1px solid var(--line); cursor: pointer; }
.font-pop button:first-child { border-left: none; }
.font-pop button:active { background: var(--field-focus, rgba(0, 0, 0, .06)); }
.font-pop .font-pop-value { font-size: 14px; font-weight: 600; color: var(--muted); min-width: 64px; }

/* Todo (user, 11.10.2026): the ticked POIM tickets; the circle marks one done, a late one is red. */
.todo-list { display: flex; flex-direction: column; gap: 4px; }
.todo { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.todo.pending { opacity: .5; pointer-events: none; }
.todo-done { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--muted); background: transparent; cursor: pointer; padding: 0; }
.todo-done:hover { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 20%, transparent); }
.todo-link { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--fg); text-decoration: none; }
.todo-title { font-size: 14px; line-height: 1.35; }
.todo-meta { font-size: 12px; color: var(--muted); }
.todo.late .todo-meta { color: var(--off); }
.todo-empty { font-size: 13px; color: var(--muted); padding: 4px 2px; }

/* ---- Todo (user, 11.10.2026): the Active / Inactive switch (the sort switch's look, without arrows), the done rows,
   the "în chat" button, and the chat's top bar marked while a todo is dragged onto it ---- */
.menu-sec[data-sec="todo"] { position: relative; }
.todo-state button.on::after, .todo-state button.on.reversed::after { content: none; }
.todo { cursor: grab; }
.todo.is-done .todo-title { color: var(--muted); text-decoration: line-through; }
.todo-done.is-done { display: inline-flex; align-items: center; justify-content: center; border-color: var(--ok);
  color: var(--ok); font-size: 13px; font-weight: 700; cursor: default; }
.todo-link { flex: 1; }
.todo-chat { flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px;
  color: var(--acc); background: transparent; border: 1px solid var(--line); border-radius: var(--radius); padding: 0; cursor: pointer; }
.todo-chat:hover { border-color: var(--acc); }
body.todo-dragging header.bar { outline: 2px dashed var(--acc); outline-offset: -4px; }
/* Todo (11.10.2026): the copy icon on every row, "Activează" on the Inactive ones. */
.todo-copy { flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 24px; padding: 0; color: var(--muted); background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer; }
.todo-copy:hover { color: var(--acc); border-color: var(--acc); }
.todo-copy.copied { color: var(--ok); border-color: var(--ok); }
.todo-activate { flex: none; align-self: center; font: inherit; font-size: 12px; color: var(--ok); background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.todo-activate:hover { border-color: var(--ok); }

/* ---- (user, 11.10.2026) the queue count on the Send button; on the laptop the open menu covers the message field and
   Send too (on the phone the menu already covers the whole screen) ---- */
#send { position: relative; }
.send-queue-badge { top: -8px; right: -8px; min-width: 18px; height: 18px; font-size: 11px; border: 2px solid var(--panel); }
@media (min-width: 601px) {
  body.menu-open .composer { display: none; }
}

/* ---- (user, 11.10.2026) the long-press pop-up in two rows: text size, then staging / pause of the open conversation ---- */
.font-pop { flex-direction: column; }
.font-pop-row { display: flex; }
.font-pop-row > button { flex: 1 1 auto; }
.font-pop-conv { border-top: 1px solid var(--line); }
.font-pop-conv button { font-size: 14px; font-weight: 600; height: 42px; white-space: nowrap; }
/* (user, 21.10.2026) Staging / Pauză in accent when on; the delete icon last, narrow, VOGO blue (D-078) */
.font-pop-conv button.on { color: var(--acc); }
.font-pop-conv .font-pop-conv-delete { flex: 0 0 48px; display: flex; align-items: center; justify-content: center;
  color: var(--vogo-icon-blue); }

/* ---- (user, 11.10.2026) the long-press pop-up: "Preia un todo" and the Active todos under it ---- */
.font-pop-todo { border-top: 1px solid var(--line); }
.font-pop-todo button { font-size: 14px; font-weight: 600; height: 42px; white-space: nowrap; }
.font-pop-todos { display: flex; flex-direction: column; max-height: 50vh; max-width: 360px; overflow-y: auto;
  border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.font-pop-todos:not(:has(button)) { padding: 10px 14px; }
.font-pop .font-pop-todos button.font-pop-todo-item { height: auto; min-height: 40px; padding: 8px 14px; font-size: 14px;
  font-weight: 400; text-align: left; border-left: none; border-top: 1px solid var(--line); white-space: normal; }
.font-pop .font-pop-todos button.font-pop-todo-item:first-child { border-top: none; }
.font-pop .font-pop-todos button.font-pop-todo-item:hover { background: var(--code); }
.font-pop .font-pop-todos button.font-pop-todo-item.late { color: var(--off); }

/* ── The menu button coloured by the active conversations (user, 12.10.2026): the colours of their dots ── */
#menu-toggle.menu-dot-red { color: var(--flag-red); border-color: var(--flag-red); }
#menu-toggle.menu-dot-green { color: var(--ok); border-color: var(--ok); }
/* END The menu button coloured */

/* ── Long runs (user, 12.10.2026): more than 10 minutes of work — blinking red dot and menu button, red band ── */
.conv-dot.dot-blink, #menu-toggle.menu-dot-blink { animation: ragai-blink 1s ease-in-out infinite; }
@keyframes ragai-blink { 50% { opacity: .2; } }
.long-band { background: color-mix(in srgb, var(--flag-red) 14%, var(--panel)); }
.long-band__icon { color: var(--flag-red); }
.pause-band__btn--main.long-band__stop { border-color: var(--flag-red); color: var(--flag-red); }
/* END Long runs */

/* ── Manual todo (user, 12.10.2026): the "+" before Active / Inactive; add and edit open #todo-sheet ── */
.todo-state button.todo-add-btn { font-weight: 700; color: var(--acc); }
/* END Manual todo */

/* ── Todo pop-up after the UX review (user, 12.10.2026): VOGO icons in the head (kanban, save, X), growing title,
   zz.ll.aaaa date with a calendar button, no empty error gap, centred on a wide screen; the row pencil in VOGO blue ── */
.todo-sheet-head { display: flex; align-items: center; gap: 4px; }
.todo-sheet-head .sheet-title { flex: 1; min-width: 0; padding-bottom: 0; }
.todo-sheet-icon { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; color: var(--vogo-icon-blue); background: transparent; border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; }
.todo-sheet-icon:hover { border-color: var(--line); background: var(--code); }
.todo-sheet-icon:disabled { opacity: .5; cursor: default; }
.todo-sheet-text { resize: none; overflow: hidden; line-height: 1.4; }
.todo-sheet-date { position: relative; display: flex; align-items: center; gap: 6px; }
.todo-sheet-date .sheet-input { flex: 1; min-width: 0; }
.todo-sheet-picker { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; }
#todo-sheet .sheet-error:empty { display: none; }
@media (min-width: 700px) {
  #todo-sheet { align-items: center; }
}
.todo-copy.todo-edit { color: var(--vogo-icon-blue); }
/* "Pune un todo" from the top menu (user, 15.10.2026): the same pop-up over the whole screen */
#todo-sheet.sheet--full { align-items: stretch; padding: 0; }
#todo-sheet.sheet--full .sheet-card { max-width: none; height: 100%; border: 0; border-radius: 0; box-shadow: none;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
#todo-sheet.sheet--full .todo-sheet-text { min-height: 160px; }
/* VOGO field style = Material Design outlined (code-writing rule 14; reference app/registry/records/registry_records.css):
   Inactive — empty, no focus: the label inside, grey; the helper text below.  Hover — the outline darker.
   Focused — the label on the top border, primary; the outline 2px primary.  Activated — filled: the label on the
   border, grey.  Error — label and outline red; the message in the helper text's place.  is-filled: rag-ai.js. */
:is(#todo-sheet, #voice-sheet) { --md-outline: var(--field-line); --md-outline-hover: var(--muted); --md-primary: var(--acc);
  --md-error: var(--off); --md-label: var(--muted); }
:is(#todo-sheet, #voice-sheet) .md-field { position: relative; display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
:is(#todo-sheet, #voice-sheet) .md-field .sheet-input { width: 100%; box-sizing: border-box; min-height: 44px; font-size: 14px; line-height: 18px;
  padding: 12px; color: var(--fg); background: var(--panel); border: 1px solid var(--md-outline); border-radius: var(--radius);
  box-shadow: none; transition: border-color .15s, box-shadow .15s; }
:is(#todo-sheet, #voice-sheet) .md-field:hover .sheet-input { border-color: var(--md-outline-hover); }
:is(#todo-sheet, #voice-sheet) .md-field:focus-within .sheet-input { outline: 0; border-color: var(--md-primary); box-shadow: 0 0 0 1px var(--md-primary); }
:is(#todo-sheet, #voice-sheet) .md-field.is-invalid .sheet-input { border-color: var(--md-error); box-shadow: 0 0 0 1px var(--md-error); }
:is(#todo-sheet, #voice-sheet) .md-label { position: absolute; top: 13px; left: 13px; z-index: 2; max-width: calc(100% - 70px); padding: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: transparent; font-size: 14px; line-height: 18px;
  color: var(--md-label); pointer-events: none; transition: top .15s, left .15s, font-size .15s, color .15s, padding .15s; }
:is(#todo-sheet, #voice-sheet) .md-field:is(.is-filled, :focus-within, .is-invalid) .md-label { top: -8px; left: 10px; padding: 0 4px;
  font-size: 12px; background: var(--panel); }
:is(#todo-sheet, #voice-sheet) .md-field:focus-within .md-label { color: var(--md-primary); }
:is(#todo-sheet, #voice-sheet) .md-field.is-invalid .md-label { color: var(--md-error); }
:is(#todo-sheet, #voice-sheet) .md-help { display: block; min-height: 15px; padding: 0 13px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 11px; line-height: 15px; color: var(--muted); }
:is(#todo-sheet, #voice-sheet) .md-field.is-invalid .md-help { font-size: 0; }
:is(#todo-sheet, #voice-sheet) .md-field.is-invalid .md-help::after { content: attr(data-error); font-size: 12px; color: var(--md-error); }
/* The date and its hour on one row (D1b, 12.10.2026); the empty list shows only its label (rule 14, Inactive). */
:is(#todo-sheet, #voice-sheet) .todo-sheet-when { display: grid; grid-template-columns: 1fr 120px; gap: 10px; align-items: start; }
:is(#todo-sheet, #voice-sheet) .md-field:not(.is-filled):not(:focus-within) select { color: transparent; }
@media (max-width: 600px) {
  :is(#todo-sheet, #voice-sheet) .md-field .sheet-input { font-size: 16px; }   /* below 16 px the iPhone zooms the page on focus */
}
/* END Todo pop-up after the UX review */

/* ── Queued messages on the conversation cards (user, 13.10.2026): the number of the queue button's badge ── */
.conv-queued { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  margin-left: 6px; padding: 0 5px; font-size: 11px; font-weight: 700; line-height: 1; color: #fff;
  background: var(--acc); border-radius: 999px; vertical-align: middle; }
/* END Queued messages on the conversation cards */

/* ── Auto mode of the queue (user, 13.10.2026): a switch at the right of the tabs ── */
.queue-auto { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; }
.queue-auto input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.queue-auto-track { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--field-line);
  transition: background .15s; }
.queue-auto-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: left .15s; }
.queue-auto input:checked + .queue-auto-track { background: var(--acc); }
.queue-auto input:checked + .queue-auto-track .queue-auto-thumb { left: 18px; }
.queue-auto input:checked ~ .queue-auto-text { color: var(--acc); }
.queue-auto input:focus-visible + .queue-auto-track { outline: 2px solid var(--acc); outline-offset: 2px; }
/* END Auto mode of the queue */

/* ── Text to voice (user, 13.10.2026): the "Citire vocală" row of the menu button pop-up ── */
.font-pop .font-pop-voice button { font-size: 14px; font-weight: 600; }
.font-pop .font-pop-voice button .bi { margin-right: 8px; } /* the voice rows' icons (user, 18.10.2026) */
/* END Text to voice */

/* ── Voice on / off in the send pop-up (user, 13.10.2026): like the other tools; on = filled light blue ── */
.send-tools .voice-toggle { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--vogo-icon-blue); background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0; cursor: pointer; }
.send-tools .voice-toggle:hover { border-color: var(--acc); }
/* On: clearly marked — the blue of the icons, the icon white (user, 13.10.2026). */
.send-tools .voice-toggle.is-on { border-color: var(--vogo-icon-blue); background: var(--vogo-icon-blue); color: #fff; }
/* The voice is on: a speaker under the bar, on the right (user, 13.10.2026). */
.voice-badge { position: fixed; z-index: 11; top: calc(78px + env(safe-area-inset-top)); right: 14px; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--vogo-icon-blue); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  /* A switch (D1b): a tap turns the voice off / on; off = grey, crossed out. */
  border: none; padding: 0; cursor: pointer; }
.voice-badge.is-off { background: var(--muted); }
@media (min-width: 601px) {
  .voice-badge { top: 76px; right: calc(15% + 6px); }
}
/* END Voice on / off in the send pop-up */

/* ── The "Voce" window (user, 13.10.2026): the settings button in the send pop-up, the sliders, "Ascultă" ── */
.voice-slider { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.voice-slider label { font-size: 13px; font-weight: 600; color: var(--muted); }
.voice-slider label span { color: var(--fg); margin-left: 6px; }
.voice-slider input[type="range"] { width: 100%; accent-color: var(--acc); }
.voice-sheet-play { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--vogo-icon-blue); background: transparent;
  border: 1px solid var(--field-line); border-radius: var(--radius); padding: 8px 14px; cursor: pointer; }
.voice-sheet-play:hover { border-color: var(--acc); background: var(--field-focus); }
#voice-sheet .sheet-error:empty { display: none; }
/* The intro switch (user, 14.10.2026): the queue's "Auto" switch, on its own row in the window. */
.voice-sheet-intro { margin-left: 0; margin-top: 12px; align-self: flex-start; }
@media (min-width: 700px) {
  #voice-sheet { align-items: center; }
}
/* END The "Voce" window */

/* ── Voce: language and voice side by side, "Descarcă voci" (user, 13.10.2026) ── */
.voice-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) {
  .voice-pick { grid-template-columns: 1fr; }
}
.voice-sheet-get-help { padding: 0 2px; white-space: normal; }
/* END Voce: language and voice */

/* ── Voice commands (user, 13.10.2026): the options when a command is not understood ── */
.voice-options { position: fixed; z-index: 40; left: 14px; right: 14px; bottom: calc(96px + env(safe-area-inset-bottom));
  max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .3); }
.voice-options-title { margin: 0; font-weight: 700; }
.voice-options button { font: inherit; font-size: 15px; text-align: left; min-height: 44px; padding: 8px 12px;
  color: var(--fg); background: var(--bg); border: 1px solid var(--field-line); border-radius: var(--radius); cursor: pointer; }
.voice-options button:hover { border-color: var(--acc); }
.voice-options-hint { margin: 0; font-size: 12px; color: var(--muted); }
/* END Voice commands */

/* ── Todo nou: the microphone inside "Ce ai de făcut" (user, 13.10.2026) ── */
#todo-sheet .todo-sheet-mic { position: absolute; top: 2px; right: 2px; z-index: 3; }
#todo-sheet .todo-sheet-text { padding-right: 48px; }
/* END Todo nou: the microphone */
/* ---- (user, 16.10.2026) the menu's section titles (1. 2. 3. 4. …) on a gray band with white text, to stand out;
   the row of section 4 (title + Editează) takes the band too. The switches on the right (sort, Active / Inactive,
   Editează) sit inside the band, centred, see-through, the chosen one in white. ---- */
.sec-head, .sec-head:hover { color: #fff; background: var(--sec-band); border-bottom: none; border-radius: var(--sec-band-radius); padding: 11px 10px; }
.sec-head-row { background: var(--sec-band); border-bottom: none; border-radius: var(--sec-band-radius); padding-right: 8px; }
.sec-head-row .sec-head { background: transparent; }
.sec-head .sec-count { color: var(--fg); }
.menu-sec > .conv-sort { top: 7px; right: 8px; padding: 2px; border: none; border-radius: var(--sec-band-radius); background: rgba(255, 255, 255, .16); }
.menu-sec > .conv-sort button { color: rgba(255, 255, 255, .85); padding: 3px 10px; }
.menu-sec > .conv-sort button:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.menu-sec > .conv-sort button.on { color: #1a1d24; background: #fff; }
.menu-sec > .todo-state button.todo-add-btn { color: #fff; font-size: 15px; }
.sec-head-row .sec-edit { color: #fff; border-color: rgba(255, 255, 255, .45); }
.sec-head-row .sec-edit .tool-icon { color: #fff; }
.sec-head-row .sec-edit:hover, .sec-head-row .sec-edit[aria-pressed="true"] { border-color: #fff; background: rgba(255, 255, 255, .16); }

/* ---- (user, 16.10.2026) the voice options grouped under "Limbă și voce" in the long-press pop-up: the rows of the group on the secondary fill, lighter weight ---- */
.font-pop .font-pop-voice-item button { font-weight: 500; background: var(--code); }
/* (user, 21.10.2026) two voice boxes per row, equal halves; a long label wraps instead of widening the pop-up */
.font-pop .font-pop-voice-item button { flex: 1 1 0; min-width: 0; white-space: normal; height: auto; min-height: 42px;
  padding: 6px 8px; line-height: 1.25; }

/* ---- (user, 24.10.2026, VOGOLLM D-007) the AI settings row in two equal halves: "AI settings" and "Model forțat: … ▾";
   the models' list is a .font-pop-todos list under the row, like "Preia FOI"; the current model in the accent colour ---- */
/* (user, 24.10.2026) "Model forțat: Claude abonament ▾" was cut: "AI settings" takes only its text, the model's box
   takes the rest on one line, and its full text sets the menu's width when longer */
.font-pop .font-pop-ai-settings button { flex: 0 0 auto; }
.font-pop .font-pop-ai-settings button[data-engine] { flex: 1 0 auto; white-space: nowrap; }
.font-pop .font-pop-engines button.font-pop-todo-item.on { color: var(--acc); font-weight: 600; }

/* ---- (user, 16.10.2026) quick switch between the active conversations: the list under the bar button ---- */
.conv-switch-pop { position: fixed; z-index: 120; display: flex; flex-direction: column; min-width: 240px; max-width: min(360px, calc(100vw - 16px));
  max-height: 60vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.conv-switch-pop button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 8px 14px; font: inherit;
  font-size: 14px; font-weight: 600; text-align: left; color: var(--fg); background: transparent; border: none;
  border-top: 1px solid var(--line); cursor: pointer; }
.conv-switch-pop button:first-child { border-top: none; }
.conv-switch-pop button:hover { background: var(--code); }
.conv-switch-pop button.current { color: var(--acc); }
.conv-switch-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-switch-mark { flex: none; }
.conv-switch-empty { padding: 12px 14px; font-size: 14px; color: var(--muted); }

/* ---- (user, 16.10.2026) the discreet italic line under the title of section 4; hidden with the section folded ---- */
.sec-sub { margin: 6px 4px 8px; font-size: 13px; font-style: italic; line-height: 1.45; color: var(--muted); }
.menu-sec.collapsed .sec-sub { display: none; }

/* ==== Menu redesign, visual only (user, 16.10.2026, D1a): lighter hierarchy, same structure and functions ==== */
/* Section bands: slimmer; their switches re-centred */
.sec-head, .sec-head:hover { padding: 7px 10px; font-size: 12px; }
.menu-sec > .conv-sort { top: 4px; }
/* The open / close arrow of a band: a drawn chevron, larger and thicker than the text glyph (user, 19.10.2026) */
.sec-chev { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.sec-chev::before, .menu-sec.collapsed .sec-chev::before { content: ""; width: 9px; height: 9px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; }
.sec-chev::before { transform: translateY(-2px) rotate(45deg); }
.menu-sec.collapsed .sec-chev::before { transform: translateX(-2px) rotate(-45deg); }
.sec-head-row .sec-edit { padding: 2px 9px; font-size: 12px; }
.menu-sec { margin-bottom: 4px; }
/* The conversation open now: filled, with an accent bar on the left */
.conv.current { background: var(--field-focus); border-color: var(--acc); box-shadow: inset 3px 0 0 var(--acc); }
/* Staging: a discreet row of small pills */
.conv-staging .conv.conv-staged { font-size: 12px; padding: 2px 9px; color: var(--muted); background: transparent; }
.conv-staging .conv.conv-staged:hover { color: var(--fg); }
.conv-staging .conv.conv-staged.current { color: var(--acc); }
/* Staging ordering (user, 18.10.2026): small buttons after the title; with Categorie, a title line before each group */
.conv-staging-sort { display: inline-flex; gap: 2px; padding: 1px; margin-right: 4px; border: 1px solid var(--line); border-radius: 5px; }
.conv-staging-sort button { font: inherit; font-size: 11px; color: var(--muted); background: transparent; border: none; border-radius: 4px; padding: 2px 7px; cursor: pointer; }
.conv-staging-sort button:hover { color: var(--fg); }
.conv-staging-sort button.on { color: var(--fg); background: var(--code); font-weight: 600; }
.conv-staging-group { flex-basis: 100%; font-size: 11px; font-weight: 600; color: var(--acc); padding: 4px 2px 0; }
.menu-sec.searching .conv-staging-sort, .menu-sec.searching .conv-staging-group { display: none; }
/* Arhivate: the same row of pills, the whole width of its section, without Staging's top line */
#conv-archived > .conv-pills-archived { grid-column: 1 / -1; margin-top: 0; padding-top: 2px; border-top: none; }
@media (min-width: 601px) {
  /* Tools: icons only, the name in the tooltip; "Conversație nouă" the one filled button, with its text */
  .menu-tools .menu-actions { flex: 0 0 auto; gap: 6px; }
  .menu-tools .menu-actions .menu-action, .menu-tools .menu-actions .menu-form { flex: 0 0 auto; }
  .menu-tools .menu-actions .menu-action { width: 40px; padding: 0; justify-content: center; }
  .menu-tools .menu-actions .menu-action span { display: none; }
  .menu-tools .menu-actions #new-chat { width: auto; padding: 0 14px; color: #fff; background: var(--sec-band); border-color: transparent; font-weight: 600; }
  .menu-tools .menu-actions #new-chat span { display: inline; }
  .menu-tools .menu-actions #new-chat .menu-icon { color: #fff; }
  .menu-tools .menu-actions #new-chat:hover { filter: brightness(1.08); color: #fff; }
  /* Conversation cards: denser, a little wider so fewer titles are cut */
  .conv-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
  .conv { padding: 7px 10px; gap: 1px; }
  .conv-title { font-weight: 600; font-size: 14px; }
  .conv-date { font-size: 12px; }
}

/* ---- (user, 16.10.2026) conversation categories: the group titles of the "Categorie" ordering, the row in the sheet ---- */
.conv-group-head { grid-column: 1 / -1; margin: 6px 2px 0; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.conv-group-head:first-child { margin-top: 0; }
/* The cards' rows are equal (grid-auto-rows: 1fr); with group titles the rows take their own height, no gap under a title */
.conv-list:has(.conv-group-head) { grid-auto-rows: auto; }
/* (user, 16.10.2026) each category title on a band of translucent white, to stand out; fainter in the dark theme */
.conv-group-head { padding: 5px 10px; background: rgba(255, 255, 255, .75); border: 1px solid var(--line); border-radius: var(--radius); }
:root:not([data-theme="light"]) .conv-group-head { background: rgba(255, 255, 255, .06); }
.cat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 2px 8px; }
.cat-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.cat-row button { font: inherit; font-size: 13px; color: var(--fg); background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.cat-row button:hover { border-color: var(--acc); }
.cat-row button.current { color: #fff; background: var(--acc); border-color: var(--acc); }
@media (max-width: 600px) {
  .conv-group-head { padding: 8px 14px 4px; margin: 0; background: var(--bg); }
}

/* ---- (user, 16.10.2026, D1b D2a) the categories' nomenclature: the pencil on the band, the editor sheet. No colours
   (user, 16.10.2026): a group is only a wrapper, its band and cards sit in the list as before. ---- */
.conv-group { display: contents; }
/* A category's band is dragged onto another group to move the category (16.10.2026) */
.conv-group-head.cat-drag { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.conv-group-head.cat-drag-source { opacity: .45; }
.conv-group-head.cat-drop-target { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc); color: var(--acc); }
body.cat-dragging, body.cat-dragging * { cursor: grabbing !important; user-select: none; }
/* (user, 16.10.2026) on the laptop the band grows into a frame around all the cards of its category; the title sits
   at the top of the frame, the cards a little smaller, inside it. The whole frame shows the drag and the drop. */
@media (min-width: 601px) {
  .conv-group { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-rows: auto; gap: 5px; padding: 0 8px 8px; background: rgba(255, 255, 255, .75);
    border: 1px solid var(--line); border-radius: var(--radius); }
  :root:not([data-theme="light"]) .conv-group { background: rgba(255, 255, 255, .04); }
  .conv-group > .conv-group-head { margin: 0; padding: 6px 2px 2px; background: transparent; border: none; border-radius: 0; }
  /* (user, 16.10.2026) smaller cards in the category mode, more of them on a row */
  .conv-group > .conv { padding: 4px 8px; }
  .conv-group > .conv .conv-title { font-size: 12.5px; }
  .conv-group > .conv .conv-date { font-size: 11.5px; }
  .conv-group:has(> .cat-drag-source) { opacity: .45; }
  .conv-group > .conv-group-head.cat-drag-source { opacity: 1; }
  .conv-group:has(> .cat-drop-target) { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc); }
  .conv-group > .conv-group-head.cat-drop-target { box-shadow: none; }
  /* (user, 16.10.2026) the frame a brighter white, with a soft shine; the category title in the text colour (black) */
  :root[data-theme="light"] .conv-group { background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .08), inset 0 1px 0 #fff; }
}
.conv-group-head { color: var(--vogo-blue-light); }
.menu-sec > .conv-sort button.cat-edit-band { padding: 3px 8px; }
.cat-row .cat-new, .cat-row .cat-edit-open { min-width: 30px; font-weight: 700; color: var(--acc); }
.cat-new-input { font: inherit; font-size: 13px; width: 160px; padding: 4px 10px; color: var(--fg); background: var(--bg);
  border: 1px solid var(--acc); border-radius: 999px; }
.cat-new-input:focus { outline: none; }
.cat-editor .cat-edit-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; max-height: 60vh; overflow-y: auto; }
.cat-edit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); }
.cat-edit-title { flex: 1 1 180px; min-width: 0; font: inherit; font-size: 15px; color: var(--fg); background: var(--bg);
  border: 1px solid var(--field-line); border-radius: var(--radius); padding: 6px 10px; }
.cat-edit-title:focus { outline: none; border-color: var(--acc); }
.cat-edit-pos { flex: 0 0 76px; width: 76px; font: inherit; font-size: 15px; color: var(--fg); background: var(--bg);
  border: 1px solid var(--field-line); border-radius: var(--radius); padding: 6px 8px; text-align: right; }
.cat-edit-pos:focus { outline: none; border-color: var(--acc); }
.cat-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cat-del { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; color: var(--off);
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.cat-del:disabled { color: var(--muted); opacity: .45; cursor: not-allowed; }
.cat-edit-error { min-height: 1.2em; font-size: 13px; color: var(--off); }

/* (16.10.2026) the quick switch shows the menu's category titles when the menu is grouped */
.conv-switch-group { padding: 8px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); background: var(--bg); border-top: 1px solid var(--line); }
.conv-switch-group:first-child { border-top: none; }


/* (user, 16.10.2026) on the phone the switches of a section band (Vechime · Categorie · ✎ · Flag · A–Z, the ticket
   states) no longer float over the title: they go on a second line, under it, as the lower part of the same band */
@media (max-width: 600px) {
  .menu-sec:has(> .conv-sort) > .sec-head { border-radius: var(--sec-band-radius) var(--sec-band-radius) 0 0; }
  .menu-sec > .conv-sort { position: static; display: flex; width: 100%; box-sizing: border-box; margin: -1px 0 6px; padding: 2px 6px 6px;
    background: var(--sec-band); border-radius: 0 0 var(--sec-band-radius) var(--sec-band-radius); }
  .menu-sec > .conv-sort button { flex: 1 1 auto; padding: 6px 4px; font-size: 13px; }
  .menu-sec > .conv-sort button.cat-edit-band { flex: 0 0 auto; padding: 6px 10px; }
}

/* (user, 16.10.2026) the quick switch larger: each item with the card's second line (status, last activity, queue),
   the flag in its colour, the menu's ordering row on top, fixed while the list scrolls */
.conv-switch-pop { min-width: min(380px, calc(100vw - 16px)); max-width: min(520px, calc(100vw - 16px)); max-height: 78vh; }
.conv-switch-pop .conv-switch-item { min-height: 56px; padding: 9px 16px; font-size: 15px; }
.conv-switch-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.conv-switch-main .conv-switch-title { flex: none; }
.conv-switch-info { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 400; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-switch-sort { position: sticky; top: 0; z-index: 1; display: flex; gap: 2px; padding: 6px; background: var(--panel);
  border-bottom: 1px solid var(--line); }
.conv-switch-pop .conv-switch-sort button { flex: 1 1 auto; justify-content: center; width: auto; min-height: 32px; padding: 5px 8px;
  font-size: 13px; font-weight: 500; color: var(--muted); border: none; border-radius: 5px; }
.conv-switch-pop .conv-switch-sort button:hover { color: var(--fg); background: var(--code); }
.conv-switch-pop .conv-switch-sort button.on { color: #fff; background: var(--vogo-icon-blue); font-weight: 600; }
.conv-switch-sort button.on::after { content: " ↓"; }
.conv-switch-sort button.on.reversed::after { content: " ↑"; }
.conv-switch-sort + .conv-switch-item, .conv-switch-sort + .conv-switch-group { border-top: none; }

/* (user, 16.10.2026) section 4 in horizontal bands, like the category groups of section 1: on the laptop each column a
   full-width frame, its title on top (black), its options in a grid inside; on every screen the title is dragged onto
   another band to move it (rag-ai.js) */
.menu-sec-rag .rag-cols > .menu-col > .menu-head { color: var(--fg); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.menu-sec-rag .rag-cols > .menu-col.col-drag-source { opacity: .45; }
.menu-sec-rag .rag-cols > .menu-col.col-drop-target { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc); }
@media (min-width: 601px) {
  .menu-sec-rag .rag-cols { display: flex; flex-direction: column; gap: 8px; }
  .menu-sec-rag .rag-cols > .menu-col { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 5px;
    padding: 0 8px 8px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: var(--radius); }
  :root[data-theme="light"] .menu-sec-rag .rag-cols > .menu-col { background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .08); }
  .menu-sec-rag .rag-cols > .menu-col > .menu-head { grid-column: 1 / -1; padding: 6px 2px 2px; }
}

/* (user, 16.10.2026) on the laptop the switches sit in the vertical middle of the blue band: every band 40px high,
   the switch group 32px, 4px from the top and the bottom, its buttons centred */
@media (min-width: 601px) {
  .menu-sec > .sec-head { min-height: 40px; }
  .menu-sec > .conv-sort { top: 4px; height: 32px; align-items: stretch; }
  .menu-sec > .conv-sort button { display: inline-flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; line-height: 1; }
}

/* (user, 16.10.2026) the active cards small in every ordering (Vechime, Flag, A–Z), as in the category mode:
   columns from 150px, the same padding and type sizes as the cards of a category frame */
@media (min-width: 601px) {
  #conv-list:not(:has(.conv-group)),
  .conv-switch-cards .conv-list:not(:has(.conv-group)) { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px; }
  #conv-list > .conv, .conv-switch-cards .conv-list > .conv { padding: 4px 8px; }
  #conv-list > .conv .conv-title, .conv-switch-cards .conv-list > .conv .conv-title { font-size: 12.5px; }
  #conv-list > .conv .conv-date, .conv-switch-cards .conv-list > .conv .conv-date { font-size: 11.5px; }
}

/* (user, 16.10.2026) on the laptop the Todo cards half wide, two on a row; the archived cards small, as the active ones */
@media (min-width: 601px) {
  .todo-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; align-items: stretch; }
  .todo-list > .todo { min-width: 0; }
  #conv-archived { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px; }
  #conv-archived > .conv { padding: 4px 8px; }
  #conv-archived > .conv .conv-title { font-size: 12.5px; }
  #conv-archived > .conv .conv-date { font-size: 11.5px; }
}

/* (user, 16.10.2026) the note that the talk left the conversation's topic, in VOGO blue light and italic */
.out p.topic-note { color: var(--vogo-blue-light); font-style: italic; }

/* (user, 16.10.2026) the hour and minute a step of a running answer appeared: on the last step, and on every 5th */
.out p .step-time { margin-left: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }

/* (user, 16.10.2026) a long todo text shows two lines at most; a click on it opens the edit sheet (rag-ai.js) */
.todo-title { cursor: text; }
.todo-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }

/* (user, 16.10.2026) the options of section 4's bands smaller, as the cards of section 1 */
@media (min-width: 601px) {
  .menu-sec-rag .rag-cols > .menu-col { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .menu-sec-rag .rag-cols > .menu-col > .opt { padding: 4px 8px; font-size: 12.5px; }
}

/* (user, 16.10.2026) the long-press sheet of an option: what it holds and where it is stored, under its name */
.opt-sheet-info { margin: -4px 0 10px; font-size: 13px; line-height: 1.45; color: var(--muted); white-space: pre-line;
  overflow-wrap: anywhere; max-height: 40vh; overflow-y: auto; user-select: text; -webkit-user-select: text; }

/* (user, 16.10.2026) the todo's copy and "în chat" buttons: one above the other on the laptop, both in VOGO blue light */
.todo-btns { flex: none; align-self: center; display: flex; gap: 4px; }
.todo-btns .todo-copy, .todo-btns .todo-chat { color: var(--vogo-blue-light); border-color: color-mix(in srgb, var(--vogo-blue-light) 45%, var(--line)); }
.todo-btns .todo-copy:hover, .todo-btns .todo-chat:hover { border-color: var(--vogo-blue-light); }
@media (min-width: 601px) {
  .todo-btns { flex-direction: column; }
}

/* (user, 16.10.2026) laptop: the search smaller and the toolbox on its row — title, search, buttons, X at the right */
@media (min-width: 601px) {
  .menu-top { flex-wrap: nowrap; }
  .menu-top > .menu-search-wrap { flex: 0 1 260px; min-width: 160px; }
  .menu-top > .menu-tools { order: 2; width: auto; flex: 0 1 auto; min-width: 0; }
  .menu-top > .menu-close { order: 3; margin-left: auto; }
}

/* (user, 16.10.2026) a click or tap on the conversation title opens the list of the active conversations */
.bar-title { cursor: pointer; }
.bar-title:hover { color: var(--acc); }

/* (user, 16.10.2026) the icon of a conversation, in VOGO blue light: on the cards, in the bar and on the tabs */
.conv-icon { flex: none; color: var(--vogo-blue-light); vertical-align: -3px; margin-right: 5px; }
.bar-conv-icon { flex: none; display: inline-flex; color: var(--vogo-blue-light); }
.bar-conv-icon:empty { display: none; }
.bar-conv-icon .conv-icon { margin-right: 0; }

/* (user, 16.10.2026) the tabs of the recent conversations after the title: fixed width, only the ones that fit */
.bar-tabs { display: flex; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; overflow: hidden; }
.bar-tab { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 8px; font: inherit;
  font-size: 13px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
.bar-tab:hover { color: var(--fg); border-color: var(--vogo-blue-light); }
.bar-tab .conv-icon { margin-right: 0; }
.bar-tab .conv-dot, .bar-tab .conv-busy { margin-right: 0; }
.bar-tab-text { width: 13ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
@media (min-width: 601px) {
  /* The open conversation is the first tab: the title no longer takes the whole free width */
  .bar-title { flex: 0 1 auto; max-width: 22ch; margin-right: 0; }
}
@media (max-width: 600px) {
  /* The phone's bar has no room left beside the title and the buttons */
  .bar-tabs { display: none; }
}

/* (user, 16.10.2026) the down arrow after the conversation title: the title is a drop-down */
.bar-title-caret { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 28px;
  margin-left: -4px; padding: 0; color: var(--muted); background: transparent; border: none; cursor: pointer; }
.bar-title-caret:hover, .bar-title:hover + .bar-title-caret { color: var(--acc); }

/* (user, 16.10.2026) phone: the bar's search, theme and JANA buttons live in the long-press drop-down of the menu
   button (its first row); on the laptop they stay in the bar and the row is hidden */
.font-pop-bar { display: none; }
.font-pop-bar button { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: 58px; font-size: 12px; font-weight: 600; }
.font-pop-bar .font-pop-jana { font-size: 18px; font-weight: 700; line-height: 20px; }
.font-pop-bar button.on { color: var(--acc); }
@media (max-width: 600px) {
  .bar .find-btn, .bar #theme-toggle-bar, .bar #jana-toggle { display: none; }
  .font-pop-bar { display: flex; }
}


/* (user, 16.10.2026) the on / off row of the work note in the long-press drop-down: laptop only */
.font-pop-chip button.on { color: var(--acc); }
@media (max-width: 600px) {
  .font-pop-chip { display: none; }
}

/* (user, 16.10.2026) the bar tabs aligned to the right, next to the buttons: they do not move with the title's length */
.bar-tabs { justify-content: flex-end; }
.bar-tabs.measuring { justify-content: flex-start; }

/* (user, 16.10.2026) the "done, not read" dot in VOGO blue light instead of green: menu cards, tabs, the switch list */
.conv-dot.dot-green { background: var(--vogo-blue-light); box-shadow: 0 0 0 3px rgba(73, 150, 221, .2); }

/* (user, 16.10.2026) the conversation's long-press sheet: the actions and the info in their own boxes; phone: one
   column, the info first; laptop: the actions on the left, two per row, the info on the right over their height */
#conv-sheet .conv-sheet-body { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
#conv-sheet .conv-sheet-actions { display: flex; flex-direction: column; gap: 8px; }
#conv-sheet #conv-sheet-info { order: -1; }
.sheet-btn-icon i.sheet-icon { font-size: 20px; width: 22px; text-align: center; line-height: 1; }
.conv-icon-current { display: inline-flex; width: 22px; justify-content: center; color: var(--vogo-blue-light); }
.conv-icon-current .conv-icon, .conv-icon-current i { margin-right: 0; font-size: 20px; color: var(--vogo-blue-light); }
@media (min-width: 601px) {
  #conv-sheet { align-items: center; }
  #conv-sheet .sheet-card { max-width: 1000px; max-height: calc(100vh - 48px); padding: 18px; gap: 12px; }
  #conv-sheet .sheet-title { white-space: normal; }
  #conv-sheet .conv-sheet-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; }
  #conv-sheet .conv-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
  #conv-sheet .conv-sheet-actions > * { grid-column: 1 / -1; }
  #conv-sheet .conv-sheet-actions > .sheet-btn { grid-column: auto; }
  #conv-sheet .conv-sheet-actions > .cat-row { padding: 2px 0 4px; }
  /* The info takes the height of the actions (contain: size), never more, and scrolls inside */
  #conv-sheet #conv-sheet-info { order: 0; contain: size; min-height: 300px; max-height: none; margin: 0; overflow-y: auto;
    padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; font-size: 12.5px; }
  #conv-sheet .sheet-card:has(#conv-sheet-info[style*="none"]) { max-width: 640px; }
  #conv-sheet .conv-sheet-body:has(> #conv-sheet-info[style*="none"]) { grid-template-columns: 1fr; }
}

/* (user, 16.10.2026) the icon chooser (D-067 markup, /app/iam/icon-picker.js): over the sheet, search on top, the
   glyphs in a grid; a click picks one */
.icon-picker { position: fixed; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center; padding: 16px; }
.icon-picker[hidden] { display: none; }
.icon-picker-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.icon-picker-card { position: relative; width: 100%; max-width: 760px; max-height: calc(100vh - 48px); display: flex; flex-direction: column;
  gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 16px; box-shadow: 0 8px 28px rgba(0, 0, 0, .3); }
.icon-picker-head { display: flex; align-items: center; gap: 8px; }
.icon-picker-head h2 { flex: 1; margin: 0; font-size: 17px; font-weight: 700; }
.icon-picker-x { width: 36px; height: 36px; font-size: 16px; color: var(--muted); background: transparent; border: none; border-radius: 7px; cursor: pointer; }
.icon-picker-x:hover { color: var(--fg); background: var(--field-focus); }
.icon-picker-search { font: inherit; font-size: 15px; height: 42px; padding: 0 12px; color: var(--fg); background: var(--panel);
  border: 1px solid var(--field-line); border-radius: 7px; }
.icon-picker-search:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
.icon-picker-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.icon-picker-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.icon-picker-grid[hidden] { display: none; }
.icon-picker-grid .mnu-picker__item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; font: inherit;
  color: var(--fg); background: transparent; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
.icon-picker-grid .mnu-picker__item:hover { border-color: var(--vogo-blue-light); background: var(--field-focus); }
.icon-picker-grid .mnu-picker__item i { font-size: 22px; color: var(--vogo-blue-light); }
.icon-picker-grid .mnu-picker__item small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted); }

/* (user, 16.10.2026) the conversation cards of the menu without rounded corners (active and archived; the Staging
   pills keep theirs) */
#conv-list .conv, #conv-archived > .conv, .conv-switch-cards .conv-list .conv { border-radius: 0; }

/* (user, 16.10.2026) the Kanban link at the end of the Todo bar: the look of the bar's buttons */
.todo-state a.todo-kanban-link { display: inline-flex; align-items: center; font-size: 12px; color: var(--muted);
  text-decoration: none; border-radius: 5px; padding: 3px 9px; }
.todo-state a.todo-kanban-link:hover { color: var(--fg); }
.menu-sec > .todo-state a.todo-kanban-link { color: rgba(255, 255, 255, .85); padding: 3px 10px; }
.menu-sec > .todo-state a.todo-kanban-link:hover { color: #fff; background: rgba(255, 255, 255, .14); }

/* (user, 16.10.2026) the quick switch list: the title and its info (dot, "acum 1 min") on one row, the info on the
   right; the rows lower, so more conversations fit */
.conv-switch-main { flex-direction: row; align-items: center; gap: 10px; }
.conv-switch-main .conv-switch-title { flex: 1 1 auto; min-width: 0; }
.conv-switch-main .conv-switch-info { flex: none; white-space: nowrap; }
.conv-switch-pop button[data-conv] { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }

/* (user, 16.10.2026: "pe mobil nu arată ca aplicație mobilă"; "exact la fel ca meniul") the quick switch list on the
   phone: a sheet from under the top bar to the bottom of the screen, with a grab handle, holding the menu's own
   pieces — its ordering band (.menu-sec > .conv-sort) and a copy of its conversation cards (.conv-list .conv) —
   so it looks exactly like the menu; rag-ai.js gives the sheet this class on the phone only */
@media (max-width: 600px) {
  .conv-switch-sheet { position: fixed; z-index: 120; left: 0 !important; right: 0 !important; bottom: 0; display: flex;
    flex-direction: column; overflow-y: auto; padding: 0 10px calc(10px + env(safe-area-inset-bottom)); background: var(--bg);
    border-radius: 14px 14px 0 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, .25); animation: conv-sheet-up .18s ease-out; }
  .conv-switch-sheet::before { content: ""; flex: none; align-self: center; width: 40px; height: 4px; margin: 8px 0 8px;
    border-radius: 2px; background: var(--line); }
  .conv-switch-sheet > .menu-sec { margin: 0; }
  /* The band alone (no section title above it here): rounded on all corners, fixed while the cards scroll */
  .conv-switch-sheet > .menu-sec > .conv-sort { position: sticky; top: 0; z-index: 1; margin: 0 0 6px; padding: 6px;
    border-radius: var(--sec-band-radius); }
}
/* D1b (user, 19.10.2026): on the laptop too the quick switch list is the menu's section 1 — its blue band with the
   orderings and the search, then the same small cards, five on a row — in a panel as wide as the menu, under the bar */
@media (min-width: 601px) {
  .conv-switch-cards { position: fixed; z-index: 120; display: flex; flex-direction: column; max-height: 78vh; overflow-y: auto;
    padding: 0 10px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
  .conv-switch-cards > .menu-sec { margin: 0; }
  .conv-switch-cards > .menu-sec > .conv-sort { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end;
    height: auto; margin: 0 -10px 8px; padding: 6px 8px; background: var(--sec-band); border-radius: 0; }
  .conv-switch-cards .conv-switch-empty { padding: 12px 4px; font-size: 14px; color: var(--muted); }
  /* The band a little taller; the search field always shown, on the left; the orderings on the right (19.10.2026) */
  .conv-switch-cards > .menu-sec > .conv-sort { align-items: center; gap: 4px; min-height: 50px; padding: 8px 10px; }
  .conv-switch-cards > .menu-sec > .conv-sort button { font-size: 14px; padding: 6px 12px; }
  .conv-switch-cards .switch-search-tab { display: none !important; }
  .conv-switch-cards .switch-search-field { display: block; order: -1; flex: 0 1 320px; min-width: 0; height: 34px; margin-right: auto;
    padding: 0 12px; font: inherit; font-size: 14px; color: var(--fg); background: var(--panel); border: 1px solid transparent;
    border-radius: 5px; }
  .conv-switch-cards .switch-search-field:focus { outline: none; border-color: #fff; }
}
@keyframes conv-sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* (user, 16.10.2026) the search tab of the quick switch list (laptop and phone): a magnifier after the orderings; on,
   the band holds only the search field */
.switch-search-tab { flex: 0 0 auto !important; display: inline-flex; align-items: center; justify-content: center; }
.switch-search-field { display: none; }
.is-searching > [data-sort-proxy] { display: none !important; }
.is-searching > .switch-search-field { display: block; flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 10px; font: inherit;
  font-size: 14px; color: var(--fg); background: var(--panel); border: 1px solid var(--field-line); border-radius: 5px; }
.is-searching > .switch-search-field:focus { outline: none; border-color: var(--acc); }
.conv-switch-pop .conv-switch-sort button.switch-search-tab.is-on { color: #fff; background: var(--vogo-icon-blue); }
.menu-sec > .conv-sort button.switch-search-tab.is-on { color: #1a1d24; background: #fff; }
.conv-switch-sheet .conv-switch-empty { padding: 14px 6px; font-size: 15px; color: var(--muted); }
@media (max-width: 600px) {
  .is-searching > .switch-search-field { height: 36px; font-size: 16px; }
}

/* (user, 18.10.2026) the new specialization form: the page's sheet, centred on the laptop, X at the top right */
.spec-card { gap: 6px; }
.spec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.spec-head .sheet-title { flex: 1; padding-bottom: 0; }
.spec-x { flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
  background: transparent; border: none; border-radius: 7px; cursor: pointer; }
.spec-x:hover { color: var(--fg); background: var(--field-focus); }
.spec-check { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 15px; cursor: pointer; }
.spec-check input { width: 18px; height: 18px; }
#spec-sheet .sheet-actions { margin-top: 6px; }
@media (min-width: 601px) {
  #spec-sheet, #foi-sheet { align-items: center; }
  #spec-sheet .sheet-card, #foi-sheet .sheet-card { max-width: 520px; }
/* The text of a new FOI (user, 19.10.2026): a few lines, grows by hand */
#foi-sheet .foi-text { min-height: 96px; resize: vertical; font: inherit; }
/* FOI edit (user, 19.10.2026): the pencil at the right of each FOI, in the VOGO icon blue; two FOI on a row on the laptop */
.foi-list .foi { position: relative; padding-right: 44px; }
.foi-list .foi .foi-edit { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: inline-flex;
  align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 5px;
  color: var(--vogo-icon-blue); background: transparent; }
.foi-list .foi .foi-edit:hover { border-color: var(--vogo-icon-blue); background: var(--field-focus); }
.foi-list .foi .foi-edit[hidden] { display: none; }
/* The FOI sheet: copy in the head (a check colour for a moment), the bin a square left of Anulează */
#foi-sheet .foi-copy { color: var(--vogo-icon-blue); }
#foi-sheet .foi-copy.copied { color: var(--ok); }
#foi-sheet .sheet-actions .foi-delete { flex: 0 0 48px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; color: var(--err, #d64545); }
#foi-sheet .sheet-actions .foi-delete:hover { border-color: var(--err, #d64545); }
#foi-sheet .sheet-actions .foi-delete[hidden] { display: none; }
@media (min-width: 901px) {
  .foi-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
}

/* (user, 18.10.2026) section 4: Adaugă under Editează, the same width; hidden in the edit mode, where Editează floats */
.sec-btn-col { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 0; }
.sec-btn-col .sec-edit { justify-content: center; }
.menu-sec-rag.editing .sec-add { display: none; }

/* (user, 19.10.2026) the Staging pills as small white cards with 5 px corners (the archived pills unchanged) */
.conv-staging:not(.conv-pills-archived) .conv.conv-staged { border-radius: 5px; background: #fff; }
/* (user, 19.10.2026) dark theme: white pills made the gray text unreadable; the dark panel and light text instead */
:root:not([data-theme="light"]) .conv-staging:not(.conv-pills-archived) .conv.conv-staged { background: var(--panel); color: var(--fg); }

/* (user, 24.10.2026) collapse / expand a message and its answer: the chevron before the copy icon; collapsed = the
   message on one line, the answer only its header line (VOGO agent, hour) */
.msg-collapse { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; color: var(--muted); background: transparent; border: none; border-radius: 4px; cursor: pointer; opacity: .55; }
.msg-collapse:hover { opacity: 1; }
.msg-collapse i { transition: transform .15s ease; }
.msg.qa-collapsed .msg-collapse i { transform: rotate(-90deg); }
.msg.mine.qa-collapsed .msg-text { display: block; max-height: none; -webkit-line-clamp: unset; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg.mine.qa-collapsed .read-more,
.msg.mine.qa-collapsed .files { display: none; }
.msg.ai.qa-collapsed > :not(.meta) { display: none; }

/* (user, 24.10.2026) the FOI dialog larger, to edit a long text properly: on the laptop up to 960px wide, the text
   field about half of the screen high; on the phone the field is just as tall. It still grows by hand. */
@media (min-width: 601px) {
  #foi-sheet .sheet-card { width: 100%; max-width: min(960px, calc(100vw - 48px)); }
}
#foi-sheet .foi-text { min-height: min(55vh, 560px); font-size: 15px; line-height: 1.5; }

/* (user, 24.10.2026) the FOI dialog's fields in the VOGO Material outlined style (code-writing rule 14): an editable
   field always on white (the panel colour in the dark theme), only a disabled or read-only one grey; the label inside
   the empty field, on the top border when filled or focused; the helper text under the field. "Filled" without a
   script: the fields have placeholder=" ", so :placeholder-shown means empty. */
#foi-sheet .md-field { position: relative; display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
#foi-sheet .md-field .sheet-input { width: 100%; box-sizing: border-box; color: var(--fg); background: var(--panel);
  border: 1px solid var(--field-line, var(--line)); border-radius: var(--radius); box-shadow: none;
  transition: border-color .15s, box-shadow .15s; }
#foi-sheet .md-field .sheet-input::placeholder { color: transparent; }
#foi-sheet .md-field:hover .sheet-input { border-color: var(--muted); }
#foi-sheet .md-field:focus-within .sheet-input { outline: 0; border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
#foi-sheet .md-field .sheet-input:is(:disabled, [readonly]) { background: var(--bg); }
#foi-sheet .md-label { position: absolute; top: 13px; left: 13px; z-index: 2; max-width: calc(100% - 26px); padding: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: transparent; font-size: 14px; line-height: 18px;
  color: var(--muted); pointer-events: none; transition: top .15s, left .15s, font-size .15s, color .15s, padding .15s; }
#foi-sheet .md-field:is(:focus-within, :has(.sheet-input:not(:placeholder-shown))) .md-label { top: -8px; left: 10px;
  padding: 0 4px; font-size: 12px; background: var(--panel); }
#foi-sheet .md-field:focus-within .md-label { color: var(--acc); }
#foi-sheet .md-help { display: block; min-height: 15px; padding: 0 13px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 11.5px; line-height: 15px; color: var(--muted); }

/* (user, 24.10.2026) the answer's back-to-top icon in front of the duration / model label, which on the phone
   is wide enough to cover it */
.answer-level { z-index: 1; }
.answer-top { z-index: 2; }

/* (user, 24.10.2026) the long-press menu on the phone: every icon at the same 8 px from its text ("AI settings"
   touched it, "Limbă și voce" stood far), "Preia FOI" and "Social media" sharing one row, split in halves */
.font-pop .font-pop-todo button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.font-pop .font-pop-todo button > .bi,
.font-pop .font-pop-todo button > svg { flex: none; margin: 0; }
.font-pop .font-pop-voice button .bi { margin-right: 0; }
.font-pop .font-pop-foi button { flex: 1 1 0; min-width: 0; }
.font-pop .font-pop-foi button + button { border-left: 1px solid var(--line); }
.font-pop .font-pop-foi [data-social] .bi { color: var(--vogo-icon-blue, #0F6CBD); }

/* (user, 24.10.2026) the FOI's category in the menu: small and grey after the name; the drag & drop of the FOI; the
   new category's row in the FOI dialog */
.foi-list .foi .foi-cat { margin-left: 8px; font-size: 11.5px; font-weight: 500; color: var(--muted); opacity: .85; }
.foi-list.foi-sorting { user-select: none; -webkit-user-select: none; }
.foi-list.foi-sorting .foi { cursor: grabbing; }
.foi-list .foi.foi-dragging { opacity: .55; outline: 2px dashed var(--acc); outline-offset: -2px; }
#foi-sheet .foi-cat-new { display: flex; gap: 8px; align-items: flex-start; }
#foi-sheet .foi-cat-new .md-field { flex: 1; }
#foi-sheet .foi-cat-new .sheet-btn { flex: none; min-height: 44px; margin-top: 10px; }

/* (user, 24.10.2026) the FOI dialog fits the window (laptop and phone): the card takes the sheet's height, at most 900px
   on a tall screen; the text field takes the room left (at least 96px), so "Categorie" and the buttons stay visible
   without scrolling. Replaces the fixed min-height of the text field above. */
#foi-sheet .sheet-card { height: 100%; }
@media (min-width: 601px) {
  #foi-sheet .sheet-card { max-height: min(100%, 900px); }
}
#foi-sheet .md-field:has(#foi-text) { flex: 1 1 auto; min-height: 0; }
#foi-sheet .foi-text { flex: 1 1 auto; min-height: 96px; height: auto; }
/* The bin stays a small square on the phone too, where the sheet's buttons share the row equally. */
#foi-sheet .sheet-actions .sheet-btn.foi-delete { flex: 0 0 48px; width: 48px; padding: 0; }