/* 04-rasymas.css — Rasymo laukas, agento darbo juostele, priedu miniatiuros.

   Issskirta is public/index.html 2026-08-31 (UX refresh, 0 etapas). Failu TVARKA
   yra reiksminga: numeriai varduose = ta pati eiles tvarka, kokia buvo monolite. */
  /* --- rasymo laukas --- */
  /* position:relative — atrama mygtukui „i apacia“ (#zemyn), kuris kabo virs lauko */
  #composer{padding:0 0 14px;background:var(--bg);position:relative}
  .cbox{max-width:760px;margin:0 auto;padding:0 24px}
  .cin{border:1px solid var(--line-strong);border-radius:var(--r-xl);background:var(--bg);padding:8px 8px 8px 14px;
       box-shadow:var(--shadow-1);transition:border-color var(--greitas),box-shadow var(--greitas)}
  .cin:focus-within{border-color:var(--accent);box-shadow:var(--ziedas)}
  #input{width:100%;background:none;border:none;color:var(--text);padding:6px 0 2px;font:inherit;
         resize:none;max-height:200px;min-height:26px;line-height:1.5}
  #input:focus{outline:none}
  #input::placeholder{color:var(--muted)}
  .crow{display:flex;align-items:center;gap:8px;margin-top:4px}
  /* Ikoninis mygtukas — kvadratas, o ne tiek, kiek atsitiktinai uzima jaustukas. */
  #attach{background:none;border:1px solid transparent;border-radius:var(--r-md);cursor:pointer;
          width:var(--mygt-h-s);height:var(--mygt-h-s);display:flex;align-items:center;justify-content:center;
          font-size:var(--ik-btn);line-height:1;color:var(--faint);flex:0 0 auto;transition:border-color var(--greitas),color var(--greitas)}
  #attach:hover{border-color:var(--line-strong);color:var(--text)}
  #attach:focus{outline:none;border-color:var(--line-strong)}
  /* `background-color`, o ne `background`: trumpinys nuvalytu bendra sarasu rodykle
     (zr. 01-zodynas.css `select`). Tokia klaida tyli — rodykle tiesiog dingsta. */
  #model{background-color:transparent;border:1px solid transparent;color:var(--muted);
         border-radius:var(--r-md);height:var(--mygt-h-s);padding:0 26px 0 var(--t3);font-size:var(--tx-s);
         max-width:230px;cursor:pointer;background-position:right 6px center}
  #model:hover{border-color:var(--line-strong)}
  #model:focus{outline:none;border-color:var(--line-strong)}
  .cspace{flex:1}
  /* SIUSTI — pagrindinis veiksmas, tad GRAFITAS, o ne melyna: melyna sioje
     sistemoje reiskia akcenta (aktyvus juosteles punktas). Dvi rolės viena spalva
     reiske, kad „kur as esu“ ir „ka cia daryti“ atrodo vienodai.
     Kvadratas 36x36, o ne apskritimas: apskritimas cia buvo vienintele tokia forma
     visoje sasajoje. Neaktyvus — `opacity:.5` ir be pelės (etalonas); kontrasto
     riba neaktyviems valdikliams netaikoma, tad cia opacity leidziama. */
  #send{width:var(--mygt-ik);height:var(--mygt-ik);border-radius:var(--r-md);border:none;
        background:var(--primary);color:var(--primary-foreground);
        cursor:pointer;font-size:var(--ik-btn);line-height:1;display:flex;align-items:center;justify-content:center;
        flex:0 0 auto;box-shadow:var(--shadow);transition:background var(--greitas),box-shadow var(--greitas)}
  #send:hover{background:var(--text);box-shadow:var(--shadow-h)}
  #send:focus-visible{outline:none;box-shadow:var(--ziedas)}
  #send.off{opacity:.5;cursor:default;pointer-events:none;box-shadow:none}
  /* Variantas „konturinis“, mazas dydis. */
  #stop{display:none;align-items:center;gap:var(--t2);height:var(--mygt-h-s);padding:0 var(--t3);
        border-radius:var(--r-md);border:1px solid var(--line-strong);
        background:var(--bg);color:var(--text);cursor:pointer;font-size:var(--tx-m);font-weight:500}
  #stop:hover{border-color:var(--err);color:var(--err)}
  #stop i{width:8px;height:8px;background:currentColor;border-radius:var(--r-2xs);display:block}
  body.dirba #stop{display:flex}
  /* juostele „agentas dirba" — su ratuku, veiksmu ir laikrodziu */
  #dirbaZingsnis{font-variant-numeric:tabular-nums}
  #dirba{display:none;align-items:center;gap:8px;max-width:760px;margin:0 auto 7px;
         padding:0 26px;font-size:var(--tx-s);color:var(--muted)}
  body.dirba #dirba{display:flex}
  #dirbaVeiksmas{color:var(--text);font-weight:600}
  #dirba .dsub{color:var(--faint)}
  /* Klaviaturai iskilus vietos maza — uzrasai, kuriuos jau perskaitei, pasitraukia. */
  body.klaviatura .cpat,body.klaviatura #empty{display:none}
  #dirbaLaikas{font-variant-numeric:tabular-nums}
  .cpat{max-width:760px;margin:7px auto 0;padding:0 26px;font-size:var(--tx-xs);color:var(--faint);text-align:center}

  /* nebaigtas darbas (zyme diske po nutrukusio ejimo) */
  #nebaigtaBox{display:none;margin-bottom:9px}
  #nebaigtaBox.on{display:block}
  #nebaigta{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--accent-soft);
            border:1px solid var(--accent-line);border-radius:var(--r-lg);font-size:var(--tx-m)}
  #nebaigta .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
  #nebaigta button{border:1px solid var(--line-strong);background:var(--bg);color:var(--text);border-radius:var(--r-md);
                   height:var(--mygt-h-s);padding:0 var(--t3);cursor:pointer;font-size:var(--tx-m);font-weight:500;flex:0 0 auto}
  #nebaigta button:hover{border-color:var(--line-strong)}
  #nebaigta #tesk{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground);
                  box-shadow:var(--shadow)}
  /* pasenusi zyme (>para) — tas pats blokas be issiskiriancios spalvos */
  #nebaigtaBox.senas #nebaigta{background:transparent;border-color:var(--line);color:var(--muted)}
  #nebaigtaBox.senas #nebaigta #tesk{background:var(--bg);border-color:var(--line-strong);
                                     color:var(--muted);font-weight:400}
  .item .zyme{flex:0 0 auto;color:var(--accent-text);font-size:var(--tx-s)}

  /* nuotrauku miniatiuros rasymo lauke */
  #thumbs{display:flex;gap:8px;flex-wrap:wrap}
  #thumbs:empty{display:none}
  #thumbs:not(:empty){padding:6px 0 10px}
  .thumb{position:relative;flex:0 0 auto;line-height:0}
  .thumb img{height:54px;width:54px;object-fit:cover;border-radius:var(--r-sm);
             border:1px solid var(--line);display:block;cursor:zoom-in}
  .thumb .x{position:absolute;top:-6px;right:-6px;width:19px;height:19px;line-height:17px;text-align:center;
            border-radius: var(--r-round);background:var(--bg);border:1px solid var(--line-strong);color:var(--text);
            font-size:var(--tx-m);cursor:pointer}
  .thumb .x:hover{background:var(--err-solid);border-color:var(--err-solid);color:var(--on-err)}
  /* failo klipsas rasymo lauke */
  .chip{position:relative;display:flex;align-items:center;gap:7px;max-width:230px;
        padding:7px 24px 7px 9px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--bg)}
  .chip .fi{font-size:var(--tx-xl);line-height:1;flex:0 0 auto}
  .chip .fn{font-size:var(--tx-m);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chip .fd{font-size:var(--tx-xs);color:var(--muted);flex:0 0 auto}
  .chip .x{position:absolute;top:-6px;right:-6px;width:19px;height:19px;line-height:17px;text-align:center;
           border-radius: var(--r-round);background:var(--bg);border:1px solid var(--line-strong);color:var(--text);font-size:var(--tx-m);cursor:pointer}
  .chip .x:hover{background:var(--err-solid);border-color:var(--err-solid);color:var(--on-err)}
  /* failu klipsai pacioje zinuteje */
  .msgfiles{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
  .msg.user .bubble.mediaonly .msgfiles{margin-bottom:0}
  .fchip{display:flex;align-items:center;gap:7px;max-width:260px;padding:6px 10px;
         border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg)}
  .fchip .fi{font-size:var(--tx-l);line-height:1;flex:0 0 auto}
  .fchip .fn{font-size:var(--tx-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fchip .fd{font-size:var(--tx-xs);color:var(--muted);flex:0 0 auto}
  a.fchip{text-decoration:none;color:inherit;cursor:pointer}
  a.fchip:hover{border-color:var(--accent)}

  /* kortelės su failais, kuriuos agentas realiai sukure ar pakeite */
  .arts{margin-top:10px;display:flex;flex-direction:column;gap:7px}
  .arth{font-size:var(--tx-s);color:var(--muted);letter-spacing:.02em}
  .art{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);overflow:hidden}
  .art .ah{display:flex;align-items:center;gap:9px;padding:8px 10px}
  .art .ai{font-size:var(--tx-xl);line-height:1;flex:0 0 auto}
  .art .an{font-size:var(--tx-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
  .art .ad{font-size:var(--tx-xs);color:var(--muted);flex:0 0 auto}
  .art .ab{font-size:var(--tx-s);padding:3px 9px;border:1px solid var(--line);border-radius:var(--r-sm);
           background:none;color:var(--muted);cursor:pointer;text-decoration:none;flex:0 0 auto}
  .art .ab:hover{border-color:var(--accent);color:var(--text)}
  a.fchip .fn,a.fchip .fi{color:var(--text)}
  .art .ap{border-top:1px solid var(--line);margin:0;padding:9px 11px;max-height:270px;overflow:auto;
           font:var(--tx-m)/1.5 var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);white-space:pre-wrap;
           word-break:break-word;color:var(--text)}
  .art img.ap{display:block;padding:0;max-width:100%;max-height:300px;object-fit:contain;white-space:normal}
  /* dingusio failo kortele: anksciau blankinta opacity:.55 — tekstas krisdavo iki 3,7:1.
     Dabar ta pati zinute perduodama brukšnine linija ir spalva, kuria dar galima skaityti. */
  .art.dingo{border-style:dashed}
  .art.dingo .an{color:var(--muted)}
  .art.dingo .ad{color:var(--err-text)}
  /* KADA sios kortelės matomos. Numatyta — nerodom (zr. sasaja.js, KORT_REZIMAI).
     Suskleistame rezime lieka tik antrastes eilute: ji nieko neuzima, bet neleidzia
     failams dingti be zinios. Rodykle ta pati, kaip irankio bloko (.chev), ir sukasi
     taip pat — tas pats gestas turi atrodyti taip pat. */
  html[data-failai="nerodom"] .arts{display:none}
  html[data-failai="suskleista"] .arts>.art{display:none}
  html[data-failai="suskleista"] .arts.atskleista>.art{display:block}
  html[data-failai="suskleista"] .arth{cursor:pointer;width:fit-content}
  html[data-failai="suskleista"] .arth:hover{color:var(--text)}
  html[data-failai="suskleista"] .arth::after{content:"▶";display:inline-block;margin-left:6px;
         font-size:var(--tx-xs);color:var(--faint);transition:transform var(--greitas)}
  html[data-failai="suskleista"] .arts.atskleista .arth::after{transform:rotate(90deg)}
  #composer.drag .cin{border-color:var(--accent);border-style:dashed}

  /* nuotraukos pacioje zinuteje */
  .msgmedia{display:flex;flex-wrap:wrap;gap:6px}
  .msgmedia img{max-width:100%;max-height:320px;border-radius:var(--r-md);border:1px solid var(--line);
                display:block;cursor:zoom-in}
  .msg.user .bubble .msgmedia{margin-bottom:8px}
  .msg.user .bubble.mediaonly{background:none;padding:0;border:none}
  .msg.user .bubble.mediaonly .msgmedia{margin-bottom:0}
  .msg.bot .msgmedia{margin-top:8px}