/* The model's input form (chat/inputform.py -> needs_input).

   A MODAL over the whole chat, not a block in the transcript. Inline, it was inserted as a
   sibling of the answer bubble inside `.msg{display:flex}
` — so the bubble kept its
   max-width:80% and the form was squeezed into the ~20% left over, with every text input
   about 30px wide. It is a form the user must actually fill in, so it gets the screen.

   display:grid on the backdrop (not flex) so `place-items:center` handles both axes and the
   card can still shrink below its content height and scroll on a short screen.  */
/* Above the cookie banner (z-index:2000 in _cookie_banner.html). At 1000 the banner covered
   the bottom of the sheet — i.e. the „Изпрати" button — for every visitor who had not yet
   accepted cookies, which on a phone made the form impossible to submit. */
.ni-back{position:fixed; inset:0; z-index:2100; display:grid; place-items:center;
         background:rgba(4,7,11,.72); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
         padding:20px; overscroll-behavior:contain;}
.ni-back[hidden]{display:none;}
/* display:block is NOT redundant — a global `form{display:flex;align-items:flex-end}
` styles
   the chat input bar and would otherwise lay the title, note, fields and buttons out in one
   row. Every DOM assertion still passed; only the screenshot showed it. */
.needs-input{display:block; width:min(560px,100%); max-height:min(86vh,720px); overflow-y:auto;
             border:1px solid var(--border,#30363d); border-radius:14px; padding:20px 22px;
             margin:0; background:var(--panel,#161b22); align-items:stretch; gap:0;
             box-shadow:0 24px 60px -12px rgba(0,0,0,.7);}
/* Hidden BY DEFAULT; the small inline script above the footer adds `ready` and shows them.

   Nothing may paint before that decision is made. The cards are the first thing on the page
   and the largest, so anything shown and then removed — or removed and then shown — is half a
   second of movement under the reader's eyes, every load.

   Two things therefore hold together and neither is optional: this rule, and the reveal being
   INLINE. As a linked file the reveal waits on the network and the cards arrive late.

   The server does its half separately: it does not render a card this visitor has closed, so
   there is nothing here to reveal in the first place. */
.dismissable { position:relative; display:none; }
.dismissable.ready { display:block; }
/* „Готови задачи" is ONE card rather than eleven separate buttons: that way the „×" applies to
   something the viewer sees as one thing, and does not look as if it hides only the last topic.
   The frame used to be on the example-questions card below it; that card is gone (it said the
   same thing twice) and the frame moved up here with the job.
   The padding is equal on all four sides. It was „10px 10px 4px" — measured, 11 pixels above
   the buttons and 5 below them — and the card looked as if it had been set down crooked. */
.dismissable[data-card="flows"] { border:1px solid var(--border,#30363d); border-radius:14px;
  padding:10px; margin-top:10px; }
/* a 28px circle with a 40px target — the same bargain as with the security code */
.card-x::after { content:""; position:absolute; top:50%; left:50%; width:40px; height:40px;
  transform:translate(-50%,-50%); }
.card-x { position:absolute; top:6px; right:8px; z-index:3; width:28px; height:28px;
  /* --inset and not a translucent black: on the light theme that painted a dark disc on a
     white card, which read as a filled control rather than a dismiss. */
  border-radius:50%; border:1px solid transparent; background:var(--inset,#0d1218);
  color:var(--muted,#8b98a5); font-size:18px; line-height:1; cursor:pointer; }
.card-x:hover { color:var(--text,#c9d1d9); border-color:var(--border,#30363d); }
.needs-input .ni-head{display:flex; align-items:flex-start; gap:10px; margin-bottom:5px;}
.needs-input .ni-title{font-weight:600; font-size:1.06rem; flex:1; min-width:0;}
.needs-input .ni-x{flex:none; width:32px; height:32px; margin:-4px -4px 0 0; border-radius:8px;
  border:1px solid transparent; background:none; color:var(--text,#c9d1d9); font-size:1.35rem;
  line-height:1; cursor:pointer; opacity:.7;}
.needs-input .ni-x:hover{opacity:1; border-color:var(--border,#30363d);}
.needs-input .ni-x:focus-visible{outline:2px solid var(--accent,#3fb950); outline-offset:2px;}
.needs-input .ni-note{opacity:.75; font-size:.9em; margin-bottom:14px;}
/* One column: the label sits ABOVE its field. The old two-column grid gave the label a
   `minmax(120px,auto)` track, which is what starved the inputs once the form was narrow. */
.needs-input .ni-fields{display:block;}
.needs-input .ni-section{margin:22px 0 4px; padding-bottom:5px; font-weight:600;
  font-size:.95em; letter-spacing:.02em; color:var(--accent,#3fb950);
  border-bottom:1px solid var(--border,#30363d);}
.needs-input .ni-section:first-child{margin-top:4px;}
.needs-input .ni-row-holder[hidden]{display:none;}
.needs-input .ni-opt-toggle{display:inline-flex; align-items:center; gap:7px; float:right;
  font-weight:400; font-size:.88em; color:var(--muted,#8b98a5); cursor:pointer;}
.needs-input .ni-opt-toggle input{width:16px; height:16px; margin:0; accent-color:var(--accent,#3fb950);}
.needs-input label{display:block; font-size:.92em; opacity:.9; margin:12px 0 5px;}
.needs-input .ni-req{color:var(--danger,#f85149)}
/* 16px on the inputs is deliberate: iOS Safari zooms the whole page when a focused field is
   smaller than that, which on a modal means the user lands zoomed-in and has to pinch back. */
.needs-input input,.needs-input textarea,.needs-input select{
    width:100%; box-sizing:border-box; padding:11px 12px; border-radius:8px; font-size:16px;
    border:1px solid var(--border,#30363d); background:var(--bg,#0d1117); color:inherit;
    font-family:inherit;}
.needs-input input:focus,.needs-input textarea:focus,.needs-input select:focus{
    outline:none; border-color:var(--accent,#3fb950);}
.needs-input input:focus-visible,.needs-input textarea:focus-visible,.needs-input select:focus-visible{
    outline:2px solid var(--accent,#3fb950); outline-offset:2px;}
/* The flex row shrank the textarea to one line despite rows=3, so its height is stated. */
.needs-input textarea{min-height:86px; resize:vertical;}
/* the field + its „?" button on one line */
.needs-input .ni-row{display:flex; align-items:stretch; gap:8px;}
.needs-input .ni-row > input,.needs-input .ni-row > textarea,.needs-input .ni-row > select{flex:1; min-width:0;}
/* 34px, and a hit area padded out to the 44px touch minimum via the row's own height */
.needs-input .ni-help{flex:none; width:34px; align-self:center; height:34px; border-radius:50%;
    border:1px solid var(--border,#30363d); background:transparent; color:var(--muted,#8b98a5);
    font:inherit; font-weight:700; cursor:pointer; line-height:1;}
.needs-input .ni-help:hover{color:var(--accent,#3fb950); border-color:var(--accent,#3fb950);}
.needs-input .ni-help[aria-expanded="true"]{color:var(--accent,#3fb950); border-color:var(--accent,#3fb950);
    background:rgba(63,185,80,.1);}
.needs-input .ni-helptext{margin:7px 0 0; padding:9px 11px; border-radius:8px; font-size:.88em;
    line-height:1.5; color:var(--muted,#8b98a5); background:var(--bg,#0d1117);
    border:1px solid var(--border,#30363d); border-left:3px solid var(--accent,#3fb950);}
.needs-input .ni-helptext[hidden]{display:none;}
/* radio / checkbox groups: one option per row, each row a full-width tap target */
.needs-input .ni-group{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.needs-input .ni-opt{display:flex; align-items:flex-start; gap:10px; margin:0; padding:9px 11px;
    border:1px solid var(--border,#30363d); border-radius:8px; cursor:pointer; font-size:.95em;
    opacity:1; line-height:1.4;}
.needs-input .ni-opt:hover{border-color:var(--accent,#3fb950); background:rgba(63,185,80,.06);}
.needs-input .ni-opt input{width:18px; height:18px; flex:none; margin:1px 0 0; accent-color:var(--accent,#3fb950);}
.needs-input .ni-opt:has(input:checked){border-color:var(--accent,#3fb950); background:rgba(63,185,80,.1);}
.needs-input .ni-save{display:flex; align-items:center; gap:9px; margin-top:18px;
    font-size:.9em; color:var(--muted,#8b98a5); cursor:pointer;}
.needs-input .ni-save input{width:auto; flex:none;}
.needs-input .ni-bar{display:flex; gap:10px; margin-top:20px;}
.needs-input .ni-send{flex:1; padding:12px 18px; border-radius:9px; border:0; background:#238636;
                      color:#fff; cursor:pointer; font:inherit; font-weight:600; font-size:15px;}
.needs-input .ni-send:hover{filter:brightness(1.1);}
.needs-input .ni-skip{padding:12px 18px; border-radius:9px; border:1px solid var(--border,#30363d);
                      background:transparent; color:inherit; cursor:pointer; font:inherit; font-size:15px;}
.needs-input .ni-skip:hover{border-color:var(--muted,#8b98a5);}
/* the filled-documents result block in the transcript */
.ni-dl{display:inline-flex; align-items:center; gap:7px; margin:4px 6px 4px 0; padding:9px 14px;
    border-radius:9px; border:1px solid var(--accent,#3fb950); background:transparent;
    color:var(--accent,#3fb950); font:inherit; font-size:.92em; cursor:pointer;}
.ni-dl:hover{background:rgba(63,185,80,.12);}
.ni-dl:disabled{opacity:.6; cursor:default;}
.ni-dl-zip{background:var(--accent,#3fb950); color:var(--on-accent,#0d1218); font-weight:600;}
.ni-dl-zip:hover{filter:brightness(1.1); background:var(--accent,#3fb950);}
.ni-dl-list{display:flex; flex-wrap:wrap; margin-top:8px;}
/* „working on it" line: the answer has stopped but the turn has not */
.ni-pending{display:flex; align-items:center; gap:9px; margin-top:10px; color:var(--muted,#8b98a5);
    font-size:.92em;}
.ni-spin{width:13px; height:13px; flex:none; border:2px solid #ffffff30;
    border-top-color:var(--accent,#3fb950); border-radius:50%; animation:nisp .7s linear infinite;}
@keyframes nisp{to{transform:rotate(360deg);}}
.ni-verify{margin-top:10px;}
.ni-skipped{color:#f0883e; font-size:.9em; margin-top:8px;}
.ni-note{opacity:.7; font-size:.9em; margin-top:8px;}
/* A failure has to read as one. At .7 opacity a red that is merely „the error colour"
   sinks into the surrounding grey and the sentence reads like a status line. */
.ni-note-bad{opacity:1; color:var(--danger, #e5484d);}
.ni-saved{color:var(--muted,#8b98a5); font-size:.9em; margin-top:8px;}
.ni-issues{margin-top:10px; padding:10px 12px; border-radius:9px;
  border:1px solid rgba(210,153,34,.45); background:rgba(210,153,34,.08); font-size:.93em;}
.ni-issues ul{margin:6px 0 0; padding-left:20px;}
.ni-issues code{background:rgba(127,127,127,.16); padding:1px 5px; border-radius:4px;}
@media(max-width:560px){
  /* one download per row on a phone, so the file names stay readable */
  .ni-dl{width:100%; justify-content:center; margin-right:0;}
  .ni-dl-list{flex-direction:column;}
  /* Bottom sheet on a phone: reachable with a thumb, and it does not fight the on-screen
     keyboard the way a vertically centred card does. */
  .ni-back{place-items:end center; padding:0;}
  .needs-input{width:100%; max-height:88vh; border-radius:16px 16px 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom));}
  .needs-input .ni-bar{position:sticky; bottom:0; background:var(--panel,#161b22); padding-top:12px; margin-top:16px;}
}
:root { --bg:#0f1419; --panel:#1a212b; --user:var(--link,#2563eb); --bot:var(--panel-2,#243140);
          --text:#e6edf3; --muted:#8b98a5; --accent:#3fb950; --border:#2d3744; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,'Segoe UI',Roboto,sans-serif; background:var(--bg);
         color:var(--text); height:100vh; height:100dvh; height:var(--app-height,100dvh);
         display:flex; flex-direction:column; overflow:hidden; }
header { padding:10px 16px; border-bottom:1px solid var(--border); display:flex;
           align-items:center; gap:10px; flex:none; }
.brand { display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--text); min-width:0; }
.brand .logo { width:24px; height:24px; flex:none; display:block; }
.brand .bname { font-size:16px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand:hover { opacity:.85; }
.nav-desktop { display:none; align-items:center; gap:4px; margin-left:10px; min-width:0; }
.nav-desktop a, .nav-desktop button { background:none; border:none; color:var(--muted); font:inherit;
        font-size:13.5px; padding:7px 10px; border-radius:8px; cursor:pointer; text-decoration:none; white-space:nowrap; }
.nav-desktop a:hover, .nav-desktop button:hover { color:var(--text); background:var(--panel); }
@media (min-width:760px){ .nav-desktop { display:flex; } }
.hactions { margin-left:auto; display:flex; align-items:center; gap:8px; flex:none; }
.cta-pill { background:var(--accent); color:var(--on-accent,#0d1218); font-weight:700; font-size:13px; padding:7px 14px;
              border-radius:20px; text-decoration:none; white-space:nowrap; }
.cta-pill:hover { filter:brightness(1.08); }
.icon-btn { background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:10px;
              width:40px; height:40px; font-size:18px; cursor:pointer; display:flex; align-items:center;
              justify-content:center; flex:none; }
.icon-btn:hover { border-color:var(--accent); }
.menu-wrap { position:relative; }
.menu { position:absolute; top:calc(100% + 8px); right:0; min-width:220px; background:var(--panel);
          border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 34px rgba(0,0,0,.5);
          padding:6px; z-index:45; display:flex; flex-direction:column; }
.menu.hidden { display:none; }
.menu-user { font-size:12px; color:var(--muted); padding:8px 12px 8px; border-bottom:1px solid var(--border);
               margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-item { display:block; width:100%; text-align:left; background:none; border:none; color:var(--text);
               font:inherit; font-size:14px; padding:10px 12px; border-radius:8px; cursor:pointer; text-decoration:none; }
.menu-item:hover { background:var(--inset,#0d1218); }
.menu-item.primary { color:var(--accent); font-weight:600; }
.menu-item.danger { color:var(--danger,#f85149); }
.menu form { margin:0; }
#log { flex:1; overflow-y:auto; padding:20px; max-width:860px; width:100%;
         margin:0 auto; }
.msg { margin:14px 0; display:flex; }
.msg.user { justify-content:flex-end; }
.bubble { max-width:80%; padding:11px 15px; border-radius:14px; line-height:1.55;
            white-space:pre-wrap; word-wrap:break-word; }
.user .bubble { background:var(--user); border-bottom-right-radius:4px; }
.bot .bubble { background:var(--bot); border-bottom-left-radius:4px; }
.files-in { margin-top:7px; display:flex; flex-wrap:wrap; gap:6px; }
.files-in .f { font-size:12px; background:var(--inset,#0d1218); border:1px solid var(--border);
                 border-radius:6px; padding:2px 8px; color:var(--muted); }
.dl { max-width:80%; margin:6px 0 0 2px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.dl .lbl { color:var(--muted); font-size:12px; }
.dl button { background:var(--inset,#0d1218); color:var(--muted); border:1px solid var(--border);
               border-radius:6px; padding:3px 10px; font-size:12px; font-weight:600; cursor:pointer; }
.dl button:hover { color:var(--text); border-color:var(--accent); }
/* point in time („към дата") — the banner, the composer control and the version tags */
  .asof-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 8px;
              padding:7px 12px; border:1px solid var(--border); border-left:3px solid var(--accent);
              border-radius:8px; background:var(--panel); font-size:13px; color:var(--text); }
.asof-bar button { background:none; border:1px solid var(--border); color:var(--muted);
                     font:inherit; font-size:12px; padding:3px 9px; border-radius:6px; cursor:pointer; }
.asof-bar button:hover { color:var(--text); border-color:var(--muted); }
.asof-pick { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; }
/* „Към дата" sits IN THE ROW of the question, between the field and „Питай" — hence their
   height and their rounding. It was 38px against 46 on its neighbours and 8px radius against
   their 10: a small difference, but the eye catches it at once, because the three things are
   side by side. */
.asof-pick button { display:inline-flex; align-items:center; justify-content:center; gap:6px;
                      background:none; border:1px solid var(--border); color:var(--muted);
                      border-radius:10px; padding:0 14px; min-height:46px; font:inherit;
                      font-size:14px; cursor:pointer; white-space:nowrap; }
.asof-pick button:hover { color:var(--text); border-color:var(--muted); }
.asof-pick button[aria-expanded="true"] { color:var(--text); border-color:var(--muted); }
.asof-pick button.on { color:var(--accent); border-color:var(--accent); }
.asof-pick input[hidden] { display:none; }
.asof-pick input { background:var(--bg); color:var(--text); border:1px solid var(--border);
                     border-radius:6px; padding:4px 7px; font:inherit; font-size:13px;
                     color-scheme:dark; }
.src .ver { color:var(--accent); font-size:12px; }
.src .stale { color:var(--warn,#d29922); font-size:12px; }
.asof-notes { max-width:80%; margin:6px 0 0 2px; font-size:12.5px; color:var(--muted);
                border-left:2px solid var(--border); padding:2px 0 2px 10px; }
.asof-notes b { color:var(--text); font-weight:600; display:block; margin-bottom:2px; }
.sources { max-width:80%; margin:6px 0 0 2px; font-size:13px; }
.sources summary { cursor:pointer; color:var(--muted); user-select:none; }
.src { border-left:3px solid var(--border); padding:6px 10px; margin:8px 0;
         background:var(--inset,#0d1218); border-radius:0 6px 6px 0; }
.src .ref { color:var(--accent); font-weight:600; }
.src .law { color:var(--muted); }
.src { cursor:pointer; }
.src:hover { border-left-color:var(--accent); }
.src .body { color:var(--text,#c9d4de); margin-top:4px; max-height:140px; overflow:auto;
               white-space:pre-wrap; }
.src.caselaw { border-left-color:#c99a3a; cursor:default; }
/* case law — indicative */
  .src.caselaw .ref { color:var(--warn,#dcae4f); }
.src.caselaw:hover { border-left-color:var(--warn,#dcae4f); }
.cite { color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
/* the model separates sections of a long answer with „---"; unstyled it inherits the
   browser default, which is a heavy inset line that reads as a box edge in a bubble */
.bubble hr { border:0; border-top:1px solid var(--border); margin:12px 0; }
.bubble i { font-style:italic; }
.cite:hover { color:var(--accent,#5fd277); text-decoration:underline; }
/* external links in answers — blue, so they read apart from the green law citations */
  .ext { color:var(--link,#79c0ff); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
.ext:hover { filter:brightness(1.15); }
/* the two states an answer bubble can end in, by role: the theme decides the red and the amber */
.err { color:var(--danger,#f85149); }
.warn { color:var(--warn,#d29922); }
/* law viewer drawer */
  #viewer { position:fixed; top:0; right:0; height:100vh; height:100dvh; width:min(460px,94vw); background:var(--panel);
            border-left:1px solid var(--border); box-shadow:-8px 0 28px rgba(0,0,0,.45);
            display:flex; flex-direction:column; transform:translateX(0); transition:transform .2s ease; z-index:300; }
#viewer.hidden { transform:translateX(101%); }
.vhead { display:flex; align-items:flex-start; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); }
#vtitle { flex:1; font-weight:600; font-size:14px; color:var(--accent); line-height:1.4; }
/* The target, not the glyph: 19×24 is below every finger guideline. The size of the „×"
   stays; only the area that accepts it grows. */
#vclose { background:none; border:none; color:var(--muted); font-size:24px; line-height:1;
          cursor:pointer; width:40px; height:40px; display:inline-flex; align-items:center;
          justify-content:center; border-radius:9px; padding:0; }
#vclose:hover { color:var(--text); }
#vbody { padding:16px; overflow-y:auto; white-space:pre-wrap; line-height:1.65; font-size:14px; color:var(--text,#c9d4de); flex:1; }
#vfoot { padding:11px 16px; border-top:1px solid var(--border); flex:none; }
#vfoot:empty { display:none; }
#vfoot a { color:var(--accent); text-decoration:none; font-size:13px; font-weight:600; }
#vfoot a:hover { text-decoration:underline; }
/* chat history drawer (left) */
  #history { position:fixed; top:0; left:0; height:100vh; height:100dvh; width:min(320px,90vw); background:var(--panel);
             border-right:1px solid var(--border); box-shadow:8px 0 28px rgba(0,0,0,.45);
             display:flex; flex-direction:column; /* Above the sticky header (which sits at 200) — otherwise it covers the top of the
                drawer along with its close button. */
             transform:translateX(0); transition:transform .2s ease; z-index:310; }
#history.hidden { transform:translateX(-101%); }
.hhead { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); }
.hhead b { flex:1; font-size:14px; }
#hclose { background:none; border:none; color:var(--muted); font-size:24px; line-height:1;
          cursor:pointer; width:40px; height:40px; display:inline-flex; align-items:center;
          justify-content:center; border-radius:9px; padding:0; }
#hclose:hover { color:var(--text); }
#newchat { margin:12px 16px 6px; padding:0 12px; min-height:40px; background:var(--user); color:#fff; border:none;
             border-radius:9px; font-size:14px; cursor:pointer; font-weight:600; }
#chat-list { overflow-y:auto; padding:6px 10px 16px; }
.chat-item { display:flex; align-items:center; gap:6px; padding:9px 10px; border-radius:8px; cursor:pointer; }
.chat-item:hover { background:var(--inset,#0d1218); }
.chat-item.active { background:var(--inset,#0d1218); outline:1px solid var(--border); }
.chat-item .t { flex:1; font-size:13.5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-item .del { background:none; border:none; color:var(--muted); cursor:pointer; font-size:16px; line-height:1; padding:0 3px; opacity:0; }
.chat-item:hover .del { opacity:1; }
.chat-item .del:hover { color:var(--danger,#f85149); }
#chat-list .empty { color:var(--muted); font-size:13px; padding:10px; }
.hist-btn { background:var(--panel); color:var(--muted); border:1px solid var(--border); border-radius:8px;
              padding:5px 10px; font-size:13px; cursor:pointer; }
.hist-btn:hover { color:var(--text); border-color:var(--accent); }
.chat-item .sh { background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px; padding:0 3px; opacity:0; }
.chat-item:hover .sh { opacity:.85; }
.chat-item .sh:hover { opacity:1; }
/* share-link modal */
  #share-modal { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:320; }
.share-box { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:18px; width:min(460px,92vw); }
.share-h { font-weight:600; margin-bottom:10px; }
#share-url { width:100%; background:var(--inset,#0d1218); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:9px 11px; font-size:13px; }
.share-actions { display:flex; gap:8px; margin-top:10px; }
.share-actions button { padding:7px 14px; border-radius:8px; border:1px solid var(--border); background:var(--inset,#0d1218); color:var(--text); cursor:pointer; font-size:13px; }
#share-copy { background:var(--user); border-color:var(--user); color:#fff; font-weight:600; }
.share-note { color:var(--muted); font-size:12px; margin-top:10px; }
.hint { color:var(--muted); font-size:13px; }
/* hero: document RAG — the main selling point */
  .docs-hero { display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--text);
               margin:0 0 16px; padding:15px 18px; border:1px solid var(--accent); border-radius:16px;
               /* --panel between the two, so the middle of the sweep follows the theme as
                  well as its ends; a fixed midpoint made the light hero a dark band. */
               background:linear-gradient(135deg,var(--accent-bg,#16281a) 0%,
                                          var(--panel,#111d27) 60%,var(--bg,#0f1419) 100%);
               transition:transform .15s ease, box-shadow .15s ease; }
.docs-hero:hover { transform:translateY(-2px); box-shadow:0 8px 26px rgba(63,185,80,.18); }
.docs-hero .dh-ico { font-size:38px; flex:none; }
.docs-hero .dh-body { flex:1; display:flex; flex-direction:column; gap:5px; }
.docs-hero .dh-tag { color:var(--accent); font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.docs-hero .dh-title { font-size:18px; font-weight:700; line-height:1.25; }
.docs-hero .dh-sub { color:var(--muted); font-size:13.5px; line-height:1.55; }
.docs-hero .dh-cta { flex:none; background:var(--accent); color:var(--on-accent,#0d1218); font-weight:700; font-size:14px;
                       padding:11px 18px; border-radius:10px; white-space:nowrap; }
@media (max-width:640px){
    .docs-hero { flex-direction:column; align-items:stretch; gap:7px; padding:12px 14px; margin-bottom:12px; }
    .docs-hero .dh-ico { display:none; }              /* the 📄 already lives in the tag line */
    .docs-hero .dh-tag::before { content:'📄 '; }
    .docs-hero .dh-title { font-size:15.5px; }
    /* Clamped to two lines. Together with the shorter copy this is what takes the card from
       about 280px to about 150px — the difference between „the chat is below the fold" and
       „the chat is the page". The link still leads to the full explanation. */
    .docs-hero .dh-sub { font-size:12.5px; display:-webkit-box; -webkit-box-orient:vertical;
      -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
    .docs-hero .dh-cta { text-align:center; padding:10px; }
  }
footer { border-top:1px solid var(--border); padding:12px 20px;
           padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)); flex:none; }
.foot-inner { max-width:860px; margin:0 auto; }
#files-bar { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
#files-bar:empty { display:none; }
#files-bar .chip { font-size:12px; background:var(--panel); border:1px solid var(--border);
                     border-radius:6px; padding:3px 6px 3px 9px; display:flex; align-items:center; gap:6px; }
#files-bar .chip b { font-weight:600; }
#files-bar .chip .sz { color:var(--muted); }
#files-bar .chip .x { cursor:pointer; color:var(--muted); border:none; background:none;
                        font-size:15px; line-height:1; padding:0 2px; }
#files-bar .chip .x:hover { color:var(--danger,#f85149); }
form { display:flex; gap:10px; align-items:flex-end; position:relative; }
.qwrap { flex:1; min-width:0; position:relative; display:flex; }
textarea { flex:1; resize:none; background:var(--panel); color:var(--text);
             border:1px solid var(--border); border-radius:10px; padding:11px 44px 11px 14px;
             font-size:15px; font-family:inherit; line-height:22px;
             height:46px; max-height:244px; overflow-y:auto; }
/* 10 lines ×22 + padding/border, then scroll */
  /* 💡 predictive follow-up suggestions — docked in the right side of the question field */
  #suggest-btn { position:absolute; right:7px; bottom:7px; width:32px; height:32px; padding:0;
                 background:none; border:none; border-radius:8px; font-size:17px; line-height:1;
                 cursor:pointer; opacity:.55; display:none; }
#suggest-btn.on { display:block; }
#suggest-btn:hover { opacity:1; background:var(--bot); }
#suggest-pop { position:absolute; right:0; bottom:calc(100% + 10px); z-index:30;
                 width:min(440px, calc(100vw - 24px)); background:var(--panel);
                 border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 34px rgba(0,0,0,.5);
                 padding:8px; }
#suggest-pop.hidden { display:none; }
#suggest-pop .sg-h { color:var(--muted); font-size:12px; padding:4px 9px 6px; }
#suggest-pop .sg { display:block; width:100%; text-align:left; background:none; border:none;
                     color:var(--text); font-size:13.5px; font-family:inherit; line-height:1.4;
                     border-radius:8px; padding:8px 9px; cursor:pointer; }
#suggest-pop .sg:hover { background:var(--bot); }
#suggest-pop .sg-empty { color:var(--muted); font-size:13px; padding:6px 9px 8px; }
.attach { background:var(--panel); color:var(--muted); border:1px solid var(--border);
            border-radius:10px; width:46px; height:46px; font-size:19px; cursor:pointer; flex:none; }
.attach:hover { color:var(--text); border-color:var(--accent); }
button.send { background:var(--user); color:#fff; border:none; border-radius:10px;
                padding:0 20px; height:46px; font-size:15px; cursor:pointer; font-weight:600; flex:none; }
button:disabled { opacity:.5; cursor:default; }
.dots::after { content:'…'; animation:b 1.2s infinite; }
@keyframes b { 0%,100%{opacity:.3} 50%{opacity:1} }
/* markdown in bot answers */
  .bubble.md { white-space:normal; }
.bubble.md p { margin:7px 0; }
.bubble.md p:first-child { margin-top:0; }
.bubble.md p:last-child { margin-bottom:0; }
.bubble.md h4 { margin:12px 0 5px; font-size:15px; font-weight:700; }
.bubble.md ul, .bubble.md ol { margin:7px 0; padding-left:22px; }
.bubble.md li { margin:3px 0; }
.bubble.md code { background:var(--inset,#0d1218); border:1px solid var(--border); padding:1px 5px; border-radius:5px; font-size:13px; }
.bubble.md pre { background:var(--inset,#0d1218); border:1px solid var(--border); border-radius:8px; padding:10px 12px;
                   overflow-x:auto; margin:8px 0; }
.bubble.md pre code { background:none; border:none; padding:0; }
/* stop-generation state of the send button */
  button.send.stop { background:var(--danger,#f85149); }
/* 👍/👎 feedback */
  .fb { max-width:80%; margin:4px 0 0 2px; display:flex; gap:4px; }
.fb button { background:none; border:1px solid transparent; border-radius:7px; font-size:14px;
               cursor:pointer; padding:2px 7px; opacity:.55; }
.fb button:hover { opacity:1; border-color:var(--border); }
.fb button.sel { opacity:1; border-color:var(--accent); background:var(--accent-bg,#16281a); }
.fb button:disabled { cursor:default; }
/* history drawer: search + rename */
  #chat-search { margin:8px 16px 2px; padding:8px 11px; background:var(--inset,#0d1218); color:var(--text);
                 border:1px solid var(--border); border-radius:8px; font-size:13.5px; font-family:inherit; }
.chat-item .ed { background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px; padding:0 3px; opacity:0; }
.chat-item:hover .ed { opacity:.85; }
.chat-item .ed:hover { opacity:1; }
@media (hover:none){ .chat-item .ed { opacity:.65; } }
/* legal footer */
  .legal { color:var(--muted); font-size:11.5px; text-align:center; margin-top:8px; }
.legal a { color:var(--muted); }
/* touch devices: row actions must be visible without hover */
  @media (hover:none){
    .chat-item .del, .chat-item .sh { opacity:.65; }
  }
/* mobile: tighten paddings so everything fits */
  @media (max-width:600px){
    header { padding:9px 12px; }
    .brand .bname { font-size:15px; }
    .cta-pill { padding:6px 12px; font-size:12.5px; }
    #log { padding:14px 12px; }
    footer { padding:10px 12px; padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); }
    form { gap:8px; flex-wrap:wrap; }
    /* keep 📎 · question · Питай on the top row; drop the date picker to its own row below */
    .attach { order:1; }
    .qwrap { order:2; }
    button.send { order:3; }
    .asof-pick { order:4; flex-basis:100%; justify-content:flex-start; margin-top:2px; }
    .attach { width:42px; height:42px; font-size:18px; }
    textarea { height:42px; padding:10px 42px 10px 12px; font-size:16px; line-height:20px; max-height:222px; }   /* 16px stops iOS zoom-on-focus; 10 lines ×20 + padding/border */
    #suggest-btn { right:5px; bottom:5px; }
    #captcha-input { font-size:16px; }
    button.send { padding:0 15px; height:42px; }
    .bubble { max-width:90%; }
    .dl, .sources { max-width:100%; }
    .menu { min-width:min(260px,calc(100vw - 24px)); }
    .hint { font-size:12.5px; }
  }
/* captcha — its own row above the input */
  .captcha-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.cap-img-wrap { position:relative; flex:none; line-height:0; }
/* Height is ours, width is the picture's: `auto` reads the ratio from the img's own
   width/height attributes, which the page fills in from the drawing itself. A width pinned
   here instead would go on squeezing or stretching the digits the moment the PNG changed. */
#captcha-img { height:42px; width:auto; border:1px solid var(--border); border-radius:9px;
                 cursor:pointer; display:block; background:var(--panel); }
#captcha-img:hover { border-color:var(--accent); }
/* The circle stays 18px — it sits on the corner of the picture and anything larger would
   cover it. The finger, though, gets 40×40 through ::after, which is transparent and spills
   out beyond the circle. So the target is the size it should be, without anything looking
   different. */
#cap-close::after { content:""; position:absolute; top:50%; left:50%; width:40px; height:40px;
               transform:translate(-50%,-50%); }
#cap-close { position:absolute; top:-7px; right:-7px; width:18px; height:18px; border-radius:50%;
               background:var(--danger,#f85149); color:#fff; border:1.5px solid var(--panel); font-size:11px; line-height:1;
               cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; }
#cap-close:hover { background:#ff6b60; }
/* Six digits made the picture twice as wide, so the input can no longer hold a fixed 130px:
   at 360px the row was 203 + 10 + 130 and the field was pushed off the edge. It now shrinks
   into whatever is left, down to a floor that still shows six characters. */
#captcha-input { flex:1 1 130px; min-width:96px; max-width:150px; height:42px; text-align:center;
                   letter-spacing:1px; font-size:15px;
                   background:var(--panel); color:var(--text); border:1px solid var(--border);
                   border-radius:9px; font-family:inherit; padding:0 8px; }
#captcha-input.bad { border-color:var(--danger,#f85149); }
#captcha-err { color:var(--danger,#f85149); font-size:12.5px; flex:0 1 auto; min-height:16px; }
/* agent activity panel (see agentStep) */
  /* `.msg{display:flex}` is a ROW, and agentStep inserts this as a sibling BEFORE the bubble
     — so it became a full-height left-hand column and squeezed the answer, exactly the bug
     the needs-input form hit and that the note at the top of this file describes. The form
     escaped by becoming a modal; a progress panel belongs inline, above the answer, so the
     message that carries one stacks instead. `align-items:flex-start` keeps the bubble from
     being stretched to the panel's width. */
  .msg.bot:has(.agent-panel){flex-direction:column; align-items:flex-start;}
  .msg.bot:has(.agent-panel) > .bubble{max-width:100%;}
  .agent-panel{margin:0 0 8px; padding:8px 12px; border-left:2px solid var(--border,#2d3744);
    background:rgba(63,185,80,.05); border-radius:0 8px 8px 0; font-size:13px;
    /* it is a note above the answer, not a sidebar: never taller than its content, and
       never wider than the answer it belongs to */
    align-self:stretch; max-width:100%;}
.agent-head{display:flex; align-items:center; gap:8px; color:var(--muted,#8b949e);}
.agent-title{font-size:12.5px;}
.agent-spin{width:11px; height:11px; border:2px solid var(--border,#2d3744); border-top-color:var(--accent,#3fb950);
    border-radius:50%; display:inline-block; animation:agent-rot .8s linear infinite; flex:none;}
@keyframes agent-rot{to{transform:rotate(360deg)}}
.agent-steps{list-style:none; margin:7px 0 0; padding:0; display:flex; flex-direction:column; gap:5px;}
.agent-steps li{display:flex; gap:7px; align-items:flex-start; color:var(--muted,#8b949e); line-height:1.45;
    opacity:.85; animation:agent-in .25s ease-out;}
.agent-steps li b{color:var(--text,#c9d3de); font-weight:600;}
.agent-steps li.running{opacity:1; color:var(--text,#c9d3de);}
.agent-ico{flex:none;}
@keyframes agent-in{from{opacity:0; transform:translateY(-3px)} to{opacity:.85}}
.agent-collapsed .agent-steps{display:none;}
.agent-collapsed .agent-title:hover{color:var(--accent,#3fb950);}
@media (prefers-reduced-motion: reduce){
    .agent-spin{animation:none;} .agent-steps li{animation:none;}
  }

/* The anonymous „keep this conversation" line. Height is the whole point: it sits in the
   message stream and must never push the conversation off the screen, so it is one row, 13px,
   and it wraps rather than growing a second block. Padding-right leaves room for the „×". */
.save-offer.dismissable.ready { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:10px 0 2px; padding:9px 42px 9px 12px; border:1px solid var(--border);
  border-radius:10px; background:var(--panel); font-size:13px; line-height:1.45;
  color:var(--muted); }
.save-offer .so-cta { color:var(--accent); font-weight:600; text-decoration:none; }
.save-offer .so-cta:hover { text-decoration:underline; }
.save-offer .so-cta:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* centred vertically on a one-line row, and without the dark disc the card corners need */
.save-offer .so-x { top:50%; right:7px; transform:translateY(-50%); background:none; }

/* Privacy Mode. The switch reads as OFF until pressed — a security control that looks armed
   when it is not is worse than none. */
/* Same row as 📎, „Към дата" and „Питай", so the same height and the same rounding — the
   comment on .asof-pick button above says why: 46px and radius 10 on its neighbours, and the
   eye catches a button that is neither when all four sit side by side. This one shipped as a
   13px pill with 6px padding and looked like it belonged to a different page. */
.privacy-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px;
               flex:none; background:none; border:1px solid var(--border);
               color:var(--muted); border-radius:10px; padding:0 14px; min-height:46px;
               font:inherit; font-size:14px; cursor:pointer; white-space:nowrap; }
.privacy-btn:hover { color:var(--text); border-color:var(--muted); }
.privacy-btn.on { color:var(--accent); border-color:var(--accent); font-weight:600; }
.redacted-note { margin-top:10px; font-size:12.5px; color:var(--muted);
                 border-top:1px dashed var(--border); padding-top:8px; }
/* On a phone the row wraps and 📎 drops to 42px; the label goes, the height follows. */
@media (max-width:600px){
  .privacy-btn { min-height:42px; padding:0 12px; }
  .privacy-btn span { display:none; }
}

/* Готови задачи. A grid of outcomes, not a wall of prompts: the title is what the person came
   to do, the note is what they get back. Two columns on a phone would make each unreadable, so
   it drops to one. */
.flows { display:flex; flex-direction:column; gap:14px; }
.flows-h { font-size:13.5px; font-weight:600; color:var(--text); }
.flows-h .muted { font-weight:400; }
.tools-strip { font-size:12.5px; color:var(--muted); margin:6px 0 8px; line-height:1.7; overflow-wrap:anywhere; }
.tools-strip .ts-l { font-weight:600; margin-right:4px; }
.tools-strip a { color:var(--accent,#3fb950); text-decoration:none; }
.tools-strip a:hover { text-decoration:underline; }
.flow-gt { font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
           color:var(--muted); margin:0 0 6px 2px; }
.flow-g { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:8px; }
.flow-g .flow-gt { grid-column:1 / -1; }
.flow { display:flex; align-items:flex-start; gap:9px; text-align:left; cursor:pointer;
        background:var(--panel); border:1px solid var(--border); border-radius:10px;
        padding:10px 12px; color:var(--text); font:inherit; }
.flow:hover { border-color:var(--accent); }
.flow .ico { font-size:17px; line-height:1.2; flex:none; }
.flow .ft { display:flex; flex-direction:column; gap:2px; min-width:0; }
.flow .ft b { font-size:13.5px; font-weight:600; }
.flow .ft em { font-size:12px; color:var(--muted); font-style:normal; }
@media (max-width:600px){ .flow-g { grid-template-columns:1fr; } }

/* „Покажи ми промените" — sits with the attachment chips, because it is a choice about the
   file that was just attached, not a global setting. Same pill shape as a chip so the row
   reads as one thing. */
.track-btn { display:inline-flex; align-items:center; gap:6px; background:none;
             border:1px dashed var(--border); color:var(--muted); border-radius:14px;
             padding:5px 11px; font-size:12.5px; cursor:pointer; white-space:nowrap; }
.track-btn:hover { color:var(--text); border-color:var(--muted); }
.track-btn.on { border-style:solid; border-color:var(--accent); color:var(--accent);
                font-weight:600; }
.track-btn .ti { font-size:14px; }

/* „Разговор за: …" — the documents a reopened conversation was about.
   At the top of the log and not in the footer: it is context for everything above it, and a
   scope the user cannot see is a scope they will blame the answers for. */
.chat-docs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 14px;
  padding:9px 12px; border:1px solid var(--border,#2d3744); border-radius:11px;
  background:var(--panel,#1a212b); }
.chat-docs .cd-l { font-size:12.5px; color:var(--muted,#8b98a5); }
.chat-docs .cd { font-size:13px; color:var(--text,#e6edf3); text-decoration:none;
  border:1px solid var(--border-2,#30363d); border-radius:8px; padding:4px 9px;
  max-width:min(320px,60vw); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-docs .cd:hover { border-color:var(--accent,#3fb950); }
.chat-docs .cd-x { margin-left:auto; background:none; border:0; cursor:pointer;
  color:var(--muted,#8b98a5); font-size:17px; line-height:1; padding:2px 4px; }
.chat-docs .cd-x:hover { color:var(--text,#e6edf3); }