/*
 * COPIE. Originalul e `public/css/od_ai.css`, al portalului vechi.
 *
 * De pe 14 septembrie 2026 v4 nu mai ia NIMIC de la portalul CodeIgniter la
 * rulare: foile, fonturile, imaginile si pluginurile stau in `v4/web/public/`
 * si se servesc de sub `base`-ul aplicatiei (vezi `vite.config.ts`, PORTAL_STYLES).
 * Regulile de stil sunt neschimbate; in `app.css` caile `url(/public/...)` au
 * devenit relative la foaie (`url(../fonts/...)`, `url(../images/...)`).
 * Pana cand portalul vechi dispare, cele doua copii se tin la fel.
 */
/*
 * Sertarul OptimumDesk AI - tras din dreapta, peste pagina, ca Memo.
 *
 * Sta inchis in afara ecranului si aluneca inauntru pe .is-open: o singura
 * proprietate animata (transform), fara re-asezari de pagina. Overlay-ul
 * inchide la click si tine restul paginii la locul ei.
 *
 * -----------------------------------------------------------------------------
 * DE UNDE VINE FELUL IN CARE ARATA
 * -----------------------------------------------------------------------------
 *
 * Nu se inventeaza aici. Culorile vin din `tokens.css`, iar forma din cele doua
 * panouri pe care portalul le avea deja:
 *
 *   - CHAT (`resources/sass/components/_messaging.scss`, `.quick-chat`) - banda
 *     colorata a modulului sus, firul de mesaje la mijloc cu bule mici si coada
 *     care arata dincotro vine replica, bara de scris jos cu linie deasupra.
 *   - MEMO (`memo_notes.css`) - randurile de lista cu titlu, un rand de rezumat
 *     si ora la dreapta; butoane mici, cu chenar subtire.
 *
 * De acolo si raza de 3px peste tot: e raza proiectului. Sertarul avea 8, 10 si
 * 12 px, adica arata a fereastra adusa de altundeva - corecta in sine, straina
 * langa restul. Cand se schimba felul chatului, se schimba si aici.
 */

/*
 * -----------------------------------------------------------------------------
 * ADAM STA PE BARA, SI SE RIDICA DE ACOLO
 * -----------------------------------------------------------------------------
 *
 * Pana pe 5 septembrie 2026 panoul venea din DREAPTA, peste pagina, cu un voal
 * care stingea tot dedesubt: ca sa intrebi ceva, plecai din ce faceai, si un
 * click oriunde in afara lui il inchidea - inclusiv unul dat din greseala,
 * dupa care raspunsul parea pierdut.
 *
 * Acum: Adam sta jos in dreapta, sprijinit cu labutele de bara. Cand il apesi,
 * se ridica un panou de sub el, pana aproape de capul de tabel, si RAMANE
 * acolo cat lucrezi - nu-l inchide nici clickul in pagina, nici trecerea pe
 * alt ecran (starea se tine in browser, vezi od_ai.js). Se retrage doar cand ii
 * spui, cu sageata in jos.
 *
 * De aceea e si TRANSLUCID: sta peste pagina si nu mai are voal dedesubt, deci
 * trebuie sa se vada ca ce e sub el e viu, nu stins. Cu `backdrop-filter` textul
 * de dedesubt se estompeaza si al panoului ramane lizibil; unde filtrul nu
 * exista, fundalul e aproape opac - mai bine opac decat de necitit.
 *
 * Voalul (`.od-ai-overlay`) a disparut cu totul, si din macheta, si de aici.
 */

/*
 * LOCUL LUI: coltul din dreapta jos, cu labutele PESTE muchia barii.
 *
 * `--od-ai-foot` e cat tine, de la marginea de jos a ferestrei, pana la muchia
 * de sus a barii - masurat de od_ai.js pe bara adevarata (vezi acolo de ce se
 * masoara muchia, si nu inaltimea).
 *
 * Labutele lui se opresc CHIAR PE muchie, fara sa intre sub ea. Au intrat intai
 * 10 pixeli, apoi 4, si de fiecare data a iesit scufundat: labutele tin ultimii
 * 11px din desen, deci orice pixel intrat sub muchie se ia din singurul lucru
 * care arata ca se sprijina. Sta pe bara, nu in ea.
 */
.od-ai-perch {
    position: fixed;
    /* Locul pe latime il masoara od_ai.js: sta la stanga insignelor de lucru
       din coltul barii, ca sa nu le acopere. 26px e coltul gol, cat nu sunt. */
    right: var(--od-ai-perch-right, 26px);
    /*
     * Labutele CALCA pe muchie, nu se opresc la ea.
     *
     * Desenul are labutele in ultimii 11px, tocmai ca sa se vada ca se sprijina.
     * Asezat cu marginea de jos exact pe muchia barii, nu se sprijina de nimic:
     * st a lipit de ea, ca o poza taiata pe linie. Patru puncte in jos si
     * labutele ajung pe fata barii - jumatate deasupra muchiei, jumatate pe ea.
     *
     * DE CE N-A MERS DE DOUA ORI PANA ACUM. S-a incercat cu 10, apoi cu 4, si de
     * fiecare data a iesit scufundat - dar nu din cauza numarului: bara si el
     * erau pe ACEEASI cota (1003), iar ea vine dupa el in pagina, deci ea se
     * desena peste. Orice pixel coborat sub muchie era inghitit, si labutele -
     * singurul lucru care arata ca se sprijina - dispareau primele. Se vede la
     * `elementFromPoint` chiar in dreptul lor: raspundea `od-mbar-mods`.
     *
     * Cota de mai jos e leacul; cei patru pixeli sunt abia dupa aceea.
     */
    /* Doi pixeli, nu patru: sta PE linie, nu intra in randul insignelor de sub
       el (7 septembrie 2026). Labutele tot ating fata barii. */
    bottom: calc(var(--od-ai-foot, 39px) - 2px);
    /*
     * DEASUPRA barii, nu la egalitate cu ea.
     *
     * El e omuletul, ea e polita pe care sta. La cota egala castiga cine e mai
     * jos in document - si acolo e bara, fiindca macheta ei se deseneaza la
     * sfarsit, iar a lui la inceputul paginii.
     *
     * 1004, cat panoul de filtre - cu care nu se bate niciodata: cat acela e
     * ridicat, Adam e stins (vezi `mobile_module_bar.css`).
     */
    z-index: 1004;
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: pointer;
    filter: drop-shadow(0 4px 10px rgba(20, 26, 33, .35));
    transition: transform .18s ease, opacity .18s ease;
}

.od-ai-perch:hover,
.od-ai-perch:focus-visible {
    /* Se ridica putin, cat sa se vada ca raspunde la mana. */
    transform: translateY(-3px);
    outline: none;
}

/*
 * Cat panoul e sus, Adam de pe bara se stinge: acelasi cap sta in antetul
 * panoului, si asa se citeste ca s-a ridicat EL, nu ca s-a deschis inca o
 * fereastra peste pagina.
 */
.od-ai-perch.is-away {
    transform: translateY(14px);
    opacity: 0;
    pointer-events: none;
}

/* Cate raspunsuri te asteapta. Aceleasi culori ca insigna din antet. */
.od-ai-perch-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #f0ad4e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.od-ai-perch-badge[hidden] {
    display: none;
}

/*
 * VORBA LUI, DEASUPRA CAPULUI SI LA DREAPTA
 *
 * Pe verticala: LANGA capul lui, nu deasupra - se citeste ca o vorba, nu ca un
 * titlu. Varful ("v"-ul) iese din marginea ei din STANGA si arata spre el; jos
 * in stanga nu arata spre nimic (7 septembrie 2026). Inaltimea lui se masoara
 * in od_ai.js (`--od-ai-perch-h`), nu se scrie de mana.
 *
 * Pe orizontala: LA DREAPTA lui, pe fasia de deasupra insignelor. Fasia aia e
 * pagina goala si tine cat toate insignele la un loc, vreo doua sute si ceva de
 * pixeli. Pusa la stanga lui cadea peste tabel ("informatiile apar la dreapta
 * pe desktop", 6 septembrie 2026). Incepe de la umarul lui drept si se intinde
 * pana la marginea ferestrei - `left` si `right` deodata, deci nu poate nici
 * sa-l acopere, nici sa iasa din ecran. Coada e jos-stanga, spre capul lui.
 *
 * Nu se poate apasa (`pointer-events: none`): e o vorba, nu un buton, iar sub
 * ea sta pagina, care trebuie sa ramana a omului.
 */
.od-ai-say {
    position: fixed;
    right: 14px;
    /* De la umarul lui drept incolo: `--od-ai-perch-right` e cat e de la
       marginea ferestrei pana la marginea lui din dreapta. */
    left: calc(100% - var(--od-ai-perch-right, 26px) + 10px);
    bottom: calc(var(--od-ai-foot, 39px) + var(--od-ai-perch-h, 46px) / 2 - 14px);
    z-index: 1003;
    max-width: none;
    padding: 8px 11px;
    border-radius: 3px;
    background: #2f3742;
    color: #fff;
    font-size: 12px;
    line-height: 1.35;
    box-shadow: 0 6px 18px rgba(20, 26, 33, .28);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .25s ease, transform .25s ease;
}

.od-ai-say.is-on {
    opacity: 1;
    transform: translateY(0);
}

.od-ai-say[hidden] {
    display: none;
}

/* Coada, spre capul lui: pe muchia din stanga, la inaltimea gurii. */
.od-ai-say::after {
    content: '';
    position: absolute;
    left: -4px;
    bottom: 12px;
    width: 10px;
    height: 10px;
    background: #2f3742;
    transform: rotate(45deg);
}

/* Cand vine de la clopotel, dunga de grija sta pe muchia dinspre el - aceeasi
   parte cu coada, ca sa nu se bata cu ea la privire. */
.od-ai-say.is-news::after {
    background: #f0ad4e;
}

/* Cand vorba vine de la clopotel, nu din gluma: o dunga in culoarea grijii. */
.od-ai-say.is-news {
    border-left: 3px solid #f0ad4e;
}

/*
 * PE TELEFON, VORBA TRECE LA STANGA LUI.
 *
 * Pe ecran lat, fasia dintre Adam si marginea ferestrei tine doua sute si ceva
 * de pixeli - acolo incape o vorba. Pe 393px nu mai tine nimic: el sta la 64 de
 * margine, iar bula, ancorata tot de margine si lata de cel putin 190, ii
 * ajungea FIX PESTE CAP. Masurat: bula 189-379, capul 283-329.
 *
 * Deci pe telefon se muta de partea cealalta: marginea ei din dreapta se
 * opreste cu zece pixeli inainte de umarul lui, si creste spre stanga, cat
 * ramane pana la marginea ferestrei. Coada trece si ea pe muchia din dreapta -
 * ea arata incotro e cel care vorbeste, si ar fi ramas aratand in gol.
 *
 * Cei 56: 46 cat e capul lui, si zece cat sa nu-i sufle in ureche.
 */
@media (max-width: 767px) {
    .od-ai-say {
        right: calc(var(--od-ai-perch-right, 26px) + 56px);
        /*
         * `border-box` ca latimea maxima sa insemne CHIAR latimea.
         *
         * Implicit, `max-width` masoara doar continutul, iar cei 22 de pixeli de
         * chenar vin peste - masurat: bula lunga ajungea fix la x=0, lipita de
         * muchia ecranului. Asa raman doisprezece pixeli de aer si de partea
         * cealalta.
         */
        box-sizing: border-box;
        max-width: calc(100vw - var(--od-ai-perch-right, 26px) - 68px);
    }

    .od-ai-say::after {
        left: auto;
        right: -4px;
    }
}

/*
 * PANOUL: ancorat jos, creste in sus.
 *
 * `bottom` si `height` le scrie od_ai.js: inaltimea se opreste sub capul de
 * tabel al listei de pe ecran, ca sa ramana la vedere DUPA ce ordonezi si dupa
 * ce te uiti unde esti. Aici sunt doar valorile de plecare, pentru clipa de
 * dinaintea primei masuratori.
 *
 * Inchis, e coborat sub marginea de jos (`translateY`) - nu ascuns cu
 * `display`: asa urcatul si coboratul sunt aceeasi miscare, pe o singura
 * proprietate, si nu se reaseaza nimic in pagina.
 */
.od-ai-drawer {
    position: fixed;
    right: 18px;
    left: auto;
    top: auto;
    /* Aceeasi rama jos ca in dreapta: 18px de bara, 18px de margine. */
    bottom: calc(var(--od-ai-foot, 39px) + 18px);
    width: 440px;
    max-width: calc(100vw - 36px);
    height: 460px;
    /*
     * Rotunjit cat cardurile portalului (`--odb-radius`, 14px), nu cat o
     * casuta de formular. Trei pixeli erau ai desenului vechi, de cand tot ce
     * avea colturi in portal avea trei; tablourile, bara de module de pe telefon
     * si panourile ei s-au rotunjit intre timp, iar panoul lui Adam ramasese
     * singurul dreptunghi ascutit de pe ecran.
     *
     * FARA `overflow: hidden`, si dinadins: el a fost scos pe 5 septembrie 2026,
     * cand coada randului din antet - modul si sageata de coborare - iesea
     * afara si taiata devenea invizibila. Randul s-a reparat intre timp
     * (`flex-wrap: nowrap` plus numele care se strange), dar regula ramane:
     * daca vreodata iese iar ceva, mai bine se vede pe jumatate decat deloc.
     *
     * Deci colturile se rotunjesc PE BUCATILE care ating muchia - antetul verde
     * sus, randul MCP jos, si valul care acopera tot - nu prin taierea
     * panoului. Vezi mai jos.
     */
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 44px rgba(20, 26, 33, .3);
    transform: translateY(calc(100% + var(--od-ai-foot, 39px) + 60px));
    transition: transform .26s cubic-bezier(.22, .61, .36, 1), opacity .18s ease;
    opacity: 0;
    /*
     * 1002, nu 1001, de cand macheta lui a urcat in capul paginii.
     *
     * La cote egale castiga cine e scris mai jos in document. Panoul statea in
     * subsol si batea bara laterala a omului (tot 1001); acum e primul lucru din
     * pagina, deci pe cota veche ar fi ramas EL dedesubt. Cu bara de jos
     * (`#pageFooter`, 1002) nu se bate: nu se ating - panoul se opreste la 18px
     * deasupra ei.
     */
    z-index: 1002;
    display: flex;
    flex-direction: column;
    font-size: 13px;
    pointer-events: none;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .od-ai-drawer {
        /* Cat se vede prin el: destul cat sa se stie ca pagina de dedesubt e
           vie, nu atat cat sa se citeasca prin scrisul lui. Cu firul lasat fara
           fundal propriu (vezi `.od-ai-chat`), stratul asta e chiar tot ce sta
           intre discutie si pagina. */
        background: rgba(255, 255, 255, .74);
        /* Ceata subtire, nu geam mat: la 12px pagina de dedesubt se facea o
           pata alba si nu se mai vedea ca e ceva viu acolo. La 8 se ghicesc
           randurile si culorile, fara ca scrisul lor sa se amestece cu al
           panoului. */
        -webkit-backdrop-filter: blur(8px) saturate(140%);
        backdrop-filter: blur(8px) saturate(140%);
    }
}

.od-ai-drawer.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/*
 * MARIT PESTE PORTAL, NU PESTE TOT BROWSERUL.
 *
 * Cerut de Roxana, 25 septembrie 2026: un buton mic care face panoul mare
 * "peste portal, nu peste tot browserul". Deci NU `requestFullscreen()` - aia
 * ia tot ecranul si ascunde si bara browserului si filele. Aici panoul creste
 * cat locul portalului si ramane un element al paginii.
 *
 * NUMAI IN v4. Copia portalului vechi n-are butonul si n-are regulile de aici:
 * ce e nou se face in `v4/`, iar butonul il deseneaza `AdamDrawer.tsx`, nu
 * `od_ai.js`. Cand cele doua se compara, aici e in plus, ca golurile antetului.
 *
 * Se opreste exact intre barile fixe ale portalului, ca sertarul Change
 * Proposals (`change_drawer.css`): antetul e pe z-index 1040 si subsolul
 * `#pageFooter` pe 1002, iar panoul e pe 1002 si scris mai sus in pagina -
 * adica sub amandoua. Un panou intins pana in muchii ar fi trecut DEDESUBTUL
 * lor si ar fi lasat exact ce nu trebuie: o dunga de portal peste el, sus si
 * jos. Asa, cele doua bari raman la vedere si intregi, si intre ele nu se mai
 * vede nimic din portal.
 *
 * Masurile vin din JS (`fitAboveBar`), ca variabile - nu ca stiluri in linie:
 * `--od-ai-head-h` cat e antetul fix acum, `--od-ai-foot` cat e subsolul.
 * Cifrele de rezerva (50 / 39) sunt inaltimile lor masurate, pentru clipa
 * dinaintea primei masuratori. Cei 12px sunt rama panoului; nu 18, fiindca aici
 * nu mai e un cartonas in colt, ci o suprafata de lucru.
 */
.od-ai-drawer.is-wide {
    /*
     * Aproape opac, spre deosebire de panoul mic.
     *
     * Ceata de 8px si cei 74% (vezi `@supports`, mai sus) sunt buni cat panoul
     * tine un colt: se vede ca pagina de dedesubt e vie. Peste TOT portalul,
     * acelasi strat lasa capul de tabel si randurile sa se citeasca prin
     * raspuns - masurat headless la 1440x900, cu o lista de aparate dedesubt:
     * scrisul lui Adam statea peste scrisul listei. Cand panoul e suprafata de
     * lucru, se citeste el, nu ce a ramas dedesubt.
     */
    background: rgba(255, 255, 255, .97);
    top: calc(var(--od-ai-head-h, 50px) + 12px);
    bottom: calc(var(--od-ai-foot, 39px) + 12px);
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    height: auto;
}

/*
 * Cu panoul lat, un raspuns intins pe 1400px nu se mai citeste: ochiul pierde
 * randul la intoarcere. Firul isi tine deci o coloana de citit in mijloc, iar
 * restul latimii ramane loc alb - la fel ca in orice ecran de text al
 * portalului. Bulele string tot 88% DIN COLOANA, deci coada si asezarea lor
 * (stanga / dreapta) raman neschimbate.
 */
.od-ai-drawer.is-wide .od-ai-chat {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/*
 * PE TELEFON NU E NIMIC DE MARIT, DECI NU E NICIUN BUTON.
 *
 * Panoul tine oricum cat ecranul pe lat, la 8px de fiecare margine, si randul
 * antetului e cel mai strans de acolo. Un buton care ar face aproape nimic, pe
 * ecranul unde locul e cel mai scump, nu se pune.
 *
 * Si starea, daca a venit marita de pe ecranul lat, nu se agata de telefon:
 * geometria se intoarce la cea de aici. Componenta o strange oricum singura sub
 * 768px (vezi `AdamDrawer.tsx`) - regula asta e pentru clipa dintre desenare si
 * masuratoare, ca sa nu clipeasca.
 */
@media (max-width: 767px) {
    .od-ai-wide {
        display: none;
    }

    .od-ai-drawer.is-wide {
        top: auto;
        left: 8px;
        right: 8px;
        /* Aceleasi cifre ca in regula de baza a panoului. */
        bottom: calc(var(--od-ai-foot, 39px) + 18px);
        height: 460px;
    }

    .od-ai-drawer.is-wide .od-ai-chat {
        max-width: none;
    }
}

/* Sageata care aduce inapoi capul panoului: nu se vede decat cat scrii pe
   telefon. Pe ecran lat n-are ce ascunde. */
.od-ai-peek {
    display: none;
}

/*
 * CAT SCRII, RAMAN DISCUTIA SI CAMPUL. ATAT.
 *
 * Cu tastatura sus, din panou se vede cam jumatate. Ce se da la o parte, si de
 * ce - masurat la 393x852 cu o tastatura de 340, unde raman 512 puncte:
 *
 *   antetul       50   numele, treapta, modul. Optiuni; in clipa in care scrii
 *                      nu alegi, scrii.
 *   banda         35   All / Device, History, + New. La fel.
 *   randul MCP    47   si el se aseza fix intre campul de scris si degetul tau.
 *
 * Adica o suta treizeci si doi din cinci sute doisprezece - un sfert din ce se
 * mai vedea - pentru lucruri pe care nu le atinge nimeni cat scrie. Se duc in
 * raspuns, adica in singurul lucru care se citeste atunci.
 *
 * NU DISPAR: sageata de sus le aduce la loc si tot ea le trimite inapoi. O
 * optiune ascunsa la care nu se mai poate ajunge nu e o simplificare.
 *
 * Panoul isi masoara singur locul in ecranul ramas - vezi `fitToKeyboard()` din
 * od_ai.js; aici se spune doar ce se da la o parte.
 */
@media (max-width: 767px) {
    body.od-ai-typing .od-ai-head,
    body.od-ai-typing .od-ai-toolbar,
    body.od-ai-typing .od-ai-mcp {
        display: none;
    }

    /* Cerute inapoi, capul si banda se intorc; randul de jos NU - el statea
       intre camp si tastatura, si acolo ar sta si acum. */
    body.od-ai-typing.od-ai-peeked .od-ai-head {
        display: flex;
    }

    body.od-ai-typing.od-ai-peeked .od-ai-toolbar {
        display: flex;
    }

    /*
     * Sageata: mica, pe mijlocul muchiei de sus, ca manerul unui sertar.
     *
     * Nu in colt: acolo ar fi aratat a inchidere, iar ea nu inchide nimic. Pe
     * mijloc si lata cat un deget, se citeste a "mai e ceva deasupra".
     */
    body.od-ai-typing .od-ai-peek {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 100%;
        height: 22px;
        padding: 0;
        border: 0;
        border-bottom: 1px solid var(--od-rule-soft, #e3e7ec);
        background: var(--od-surface-soft, #f7f9fa);
        color: var(--od-ink-soft, #5a6472);
        font-size: 11px;
        cursor: pointer;
    }

    /* Varful arata incotro merge capul daca apesi: in jos cat e ascuns, in sus
       cat e la vedere. */
    body.od-ai-typing.od-ai-peeked .od-ai-peek i {
        transform: rotate(180deg);
    }

    .od-ai-peek i {
        transition: transform .16s ease;
    }
}

/* Asezarea de telefon a campului de scris sta mai jos, DUPA regulile lui de
   baza: la specificitate egala hotaraste ordinea din fisier, iar `font-size`-ul
   de 16px trebuie sa aiba ultimul cuvant peste cel de 13. Masurat: scris aici,
   iesea tot 13, adica exact zoomul pe care il repara. */

/*
 * PE TELEFON, PANOUL TINE CAT MENIUL.
 *
 * Pe ecran lat are 440px si sta lipit la dreapta, la 18 de margine. Pe 393px
 * regula veche il facea de 357 si il tinea tot in dreapta - deci nici cat
 * ecranul, nici pe mijloc, ci decalat cu zece pixeli fata de bara de module de
 * sub el. Doua dreptunghiuri aproape aliniate se citesc mai prost decat doua
 * limpede diferite.
 *
 * Aici tine exact cat ea: aceleasi opt puncte de fiecare parte.
 */
@media (max-width: 767px) {
    .od-ai-drawer {
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
    }
}

/*
 * PUS LA LOC, NU RIDICAT DIN NOU.
 *
 * Portalul schimba paginile cu incarcari intregi, iar panoul lasat sus se pune
 * la loc la fiecare. Cu miscarea pornita, la fiecare click intr-o lista el
 * cobora si urca iar - adica exact ce spuneam ca nu se mai intampla. Cat tine
 * asezarea de la incarcare nu se misca nimic; clasa pleaca imediat dupa, deci
 * coborarea de mai tarziu, cea CERUTA, e din nou animata.
 */
.od-ai-drawer.od-ai-instant,
.od-ai-perch.od-ai-instant {
    transition: none !important;
}

/*
 * Antetul: banda colorata a modulului, ca la Chat (`.chat-header` din
 * _messaging.scss) - acolo e turcoazul Easeedesk, aici verdele Opteemum, care e
 * modulul sub al carui drept traieste agentul.
 *
 * Pana acum era o bara alba cu o linie sub ea: corect, dar strain de restul
 * portalului. Un panou cu fir de mesaje arata la fel peste tot - banda de sus,
 * firul la mijloc, bara de scris jos - si asa se recunoaste dintr-o privire ce
 * fel de ecran e.
 */
.od-ai-head {
    display: flex;
    align-items: center;
    /*
     * v4 (14 septembrie 2026): goluri de 6, nu 10, si 10px la margini, nu 14.
     *
     * Treapta nu se mai strange (vezi `.od-ai-head .od-ai-tier`), deci locul
     * ei - masurat headless la 440px: 86px cu Deep/Balanced/Quick in lista,
     * fata de 45 cati ii ramaneau cu Investigation + Dynamic - se ia din
     * goluri si din margini, nu din nume. Copia portalului n-are schimbarea.
     */
    gap: 6px;
    padding: 12px 10px;
    background: var(--od-opteemum-deep, #198461);
    color: var(--od-ink-on-color, #fff);
}

/*
 * Colturile, pe bucatile care ating muchia panoului.
 *
 * Panoul e rotunjit la 14, dar nu se taie pe rotunjire (vezi `.od-ai-drawer`),
 * deci fiecare bucata cu fundal propriu care sta lipita de o muchie trebuie sa
 * stie singura de colt: antetul verde sus, randul MCP jos, si valul care
 * acopera tot cat se cere o incuviintare.
 */
.od-ai-head { border-radius: 14px 14px 0 0; }
.od-ai-mcp { border-radius: 0 0 14px 14px; }
.od-ai-gate { border-radius: 14px; }

/*
 * BANDA ANTETULUI: CE E DE APASAT NU IESE NICIODATA DIN EA
 *
 * Capul lui Adam a adaugat 26px plus spatiul lui unui rand care era deja plin:
 * cap, nume, treapta (pana la 130px cand sunt mai multe), insigna de mod si
 * sageata. Cu treapta la vedere se trecea de 440, iar coada randului - adica
 * fix modul si sageata de coborare - iesea afara din panou si nu se mai vedea.
 * (Panoul avea si `overflow: hidden`, care le taia de tot; a plecat si acela.)
 *
 * Acum: se strange NUMELE, care se poate citi si pe jumatate, cu trei puncte la
 * capat. Capul, modul si sageata nu se string niciodata - ele nu se pot citi
 * pe jumatate.
 */
.od-ai-head {
    flex-wrap: nowrap;
}

/* Marimea lui vine din desenul insusi, scrisa cu `!important` peste regula
   globala `svg { width: 100% !important }` din app.css - vezi adam.php. Aici se
   spune doar ca nu se strange si nu se intinde in rand. */
.od-ai-head .od-adam {
    flex: 0 0 auto;
    display: block;
}

/*
 * Numele nu se strange: e al lui, si "Adam I..." nu e un nume.
 *
 * Incape intreg de cand comutatorul Fixed / Dynamic a plecat din banda in
 * alveola de sub bara - masurat la 440px, cu "Full Access" scris in insigna si
 * cu treapta la vedere.
 */
.od-ai-head .od-ai-title {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Nu se strange: "Q.." nu e o treapta. Locul vine din golurile de mai sus. */
.od-ai-head .od-ai-tier {
    flex: 0 0 auto;
}

.od-ai-head .od-ai-mode-switch,
.od-ai-head .od-ai-wide,
.od-ai-head .od-ai-close {
    flex: 0 0 auto;
}

.od-ai-head .od-ai-title { color: var(--od-ink-on-color, #fff); }
.od-ai-close { color: var(--od-ink-on-color, #fff); opacity: .85; }
.od-ai-close:hover { opacity: 1; }

/*
 * Butonul de marire: un semn, cat sageata de coborare de langa el.
 *
 * Randul antetului era deja plin la 440px (vezi mai sus), deci butonul asta nu
 * are voie sa impinga nimic: 11px de semn si 3px de umplutura pe lateral - opt
 * pixeli mai ingust decat inchiderea. Masurat headless la 440: randul ramane
 * intreg, cu treapta si "Full Access" la vedere.
 */
.od-ai-wide {
    border: 0;
    background: none;
    color: var(--od-ink-on-color, #fff);
    opacity: .85;
    font-size: 11px;
    line-height: 1;
    padding: 4px 3px;
    cursor: pointer;
}

.od-ai-wide:hover { opacity: 1; }

.od-ai-head strong { font-size: 14px; }

/*
 * Numele si treapta stau IMPREUNA, la stanga; modul si inchiderea sunt impinse
 * la dreapta de comutatorul de mod (`margin-left: auto`).
 *
 * Pana pe 4 septembrie 2026 titlul lua tot spatiul liber (`flex: 1`), deci
 * treapta plutea singura in mijlocul benzii, la o palma de numele ei si lipita
 * de insigna de mod - se citea ca si cum ar tine de mod. Spatiul se pune acum
 * DUPA treapta, nu inainte, si tot acolo ramane si cand treapta e ascunsa (o
 * singura treapta), unde `margin-right: auto` pe un element ascuns n-ar fi
 * tinut nimic.
 */
.od-ai-title { flex: 0 1 auto; min-width: 0; }

/*
 * Treapta, LANGA nume: un select mic, in culorile benzii - contur alb pe
 * verde, ca insigna de mod - nu o casuta alba de formular in mijlocul
 * antetului. Optiunile raman cu textul inchis pe alb: lista desfacuta o
 * deseneaza browserul, nu banda.
 */
.od-ai-tier {
    margin-left: -2px;
    max-width: 130px;
    height: 24px;
    padding: 0 20px 0 8px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 12px;
    background: rgba(255, 255, 255, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 8px center;
    color: var(--od-ink-on-color, #fff);
    font-size: 12px;
    font-weight: 600;
    line-height: 22px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-overflow: ellipsis;
}

.od-ai-tier:hover, .od-ai-tier:focus { background-color: rgba(255, 255, 255, .22); outline: none; }
.od-ai-tier option { color: #1f2933; background: #fff; font-weight: 400; }

/* Al doilea rand: scop la stanga, actiunile secundare la dreapta. */
.od-ai-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-bottom: 1px solid var(--od-rule-soft, #e3e7ec);
    background: var(--od-surface-alt, #fafbfc);
}

.od-ai-toolbar-gap { flex: 1; }

.od-ai-mode {
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    background: var(--od-ground, #eef0f2);
    color: var(--od-ink, #3d4752);
}

.od-ai-mode-switch { position: relative; margin-left: auto; }

.od-ai-mode {
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

/*
 * Se deschide spre STANGA, nu spre dreapta.
 *
 * Insigna de mod sta lipita de marginea din dreapta a antetului, iar meniul ei
 * are 190px si mai mult: agatat cu `left: 0` de insigna, pleca in afara
 * sertarului si se taia - se citea "reads and investigates onl", "any comman",
 * "a platform admin can turn". Ancorat la dreapta, creste spre interior, unde e
 * loc. La fel face si meniul de istoric, din acelasi motiv.
 */
/*
 * Culoarea textului se ia inapoi de la banda.
 *
 * Meniul e copil al insignei, care sta in antet - iar antetul are text ALB, ca
 * sa se vada pe verde. Meniul insa e o suprafata alba: titlurile lui, care nu
 * aveau culoare a lor, mosteneau albul si dispareau. Se vedeau doar Incident si
 * Full Access, fiindca ele au rosul lor scris anume - de-aia arata ca lipsesc
 * exact primele doua.
 */
.od-ai-mode-menu {
    color: var(--od-ink, #1f2933);
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    margin-top: 4px;
    background: var(--od-surface, #fff);
    border: 1px solid var(--od-rule, #d5dae1);
    border-radius: 3px;
    box-shadow: 0 6px 18px rgba(20, 26, 33, .16);
    z-index: 5;
    min-width: 190px;
    overflow: hidden;
}

.od-ai-mode-pick {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    /* Culoarea, scrisa AICI, nu lasata sa se mosteneasca.
       Un buton nu mosteneste `color` de la parinte in mod implicit, dar
       reset-urile o pun pe `inherit` - si atunci mostenea albul benzii de sus,
       iar titlurile dispareau pe alb. Depindea de ce foaie apuca sa fie
       incarcata; scrisa aici, nu mai depinde de niciuna. */
    color: var(--od-ink, #1f2933);
}

.od-ai-mode-pick:hover { background: var(--od-surface-alt, #f3f5f7); }
.od-ai-mode-pick strong { display: block; }
.od-ai-mode-pick span { color: var(--od-ink-faint, #6b7480); font-size: 11px; }
.od-ai-mode-pick[data-mode="incident"] strong { color: var(--od-crit, #b42318); }

/*
 * Insigna sta acum pe banda verde a modulului, si asta schimba socoteala.
 *
 * Un verde pe verde s-ar fi pierdut cu totul - modul implicit ar fi devenit
 * invizibil. Deci cele doua moduri LINISTITE se retrag in alb, cu numele
 * colorat, iar cele doua care ating masinile raman pline si tipatoare: pe
 * ecranul asta ele trebuie sa se vada de la distanta, nu sa se aseze frumos.
 */
.od-ai-mode.mode-problem  { background: var(--od-surface, #fff); color: var(--od-ok, #2e7d32); }
.od-ai-mode.mode-change   { background: var(--od-surface, #fff); color: #1f5f8b; }
.od-ai-mode.mode-incident { background: var(--od-crit, #b42318); color: var(--od-surface, #fff); }
/* Full Access: negru, ca sa se citeasca "usa cea mai larga" dintr-o privire. */
.od-ai-mode.mode-full     { background: var(--od-ink, #1a1d21); color: var(--od-surface, #fff); }

/* Treapta Full Access din meniu: numele in rosu, ca sa sara in ochi. */
.od-ai-mode-pick.od-ai-mode-full strong { color: var(--od-crit, #b42318); }

/* Avertismentul de sub Full Access. */
.od-ai-mode-warn {
    padding: 8px 12px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--od-crit, #b42318);
    background: var(--od-crit-bg, #fdecea);
    border-top: 1px solid var(--od-crit-bg, #f5c6c0);
}

.od-ai-mode-warn strong { color: var(--od-crit, #b42318); }

/*
 * Randul de istoric, dupa `.memo-item` din notele Memo: titlu ingrosat pe un
 * rand, un rand de rezumat sub el, si ora in coltul din dreapta-sus.
 *
 * Marginea din dreapta e mai lata dinadins - acolo sta ora, si fara loc lasat
 * pentru ea titlul ar fi trecut pe dedesubt.
 */
.od-ai-history-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--od-ground, #f0f2f5);
    background: none;
    padding: 9px 12px;
    cursor: pointer;
}

/* Titlul si ora pe acelasi rand, impartite de flex - nu cu ora asezata absolut
   si o margine ghicita sub ea, cum e la Memo. Acolo ora e scurta ("3m ago");
   aici, cand `moment` nu e incarcat, cade pe data intreaga - iar atunci titlul
   trecea PESTE ea. Flex-ul nu are cum sa greseasca: ora isi ia cat ii trebuie,
   titlul primeste restul si se taie el. */
.od-ai-history-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.od-ai-history-item:hover { background: var(--od-surface-alt, #f3f5f7); }

.od-ai-history-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--od-ink, #1f2933);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Un singur rand, taiat - ca la Memo: doua discutii care incep la fel se
   deosebesc dupa titlu, nu dupa jumatate de paragraf. */
.od-ai-history-meta {
    display: block;
    font-size: 12px;
    color: var(--od-ink-faint, #6b7480);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.od-ai-history-when {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--od-ink-faint, #8a93a0);
    white-space: nowrap;
}

/* Ce a lasat in urma discutia: cifrele se citesc dintr-o privire, si cele care
   inseamna o atingere pe masini au culoarea lor. */
.od-ai-history-made { color: var(--od-ink-soft, #5b6672); }
.od-ai-history-made .is-cmd { color: var(--od-crit, #b42318); font-weight: 600; }
.od-ai-history-made .is-chg { color: #1f5f8b; font-weight: 600; }
.od-ai-history-made .is-tkt { color: var(--od-easeedesk, #32777e); font-weight: 600; }

.od-ai-history-empty {
    padding: 10px 12px;
    font-size: 11px;
    color: var(--od-ink-faint, #8a93a0);
}

.od-ai-modes-link { font-size: 11px; margin-left: auto; }

/* Culoarea vine de sus, de la banda - vezi `.od-ai-head`. Regula asta e doar
   forma butonului; daca ar pune si `color`, ar castiga ea (vine mai tarziu) si
   inchiderea ar fi ramas gri pe verde. */
.od-ai-close {
    border: 0;
    background: none;
    /* 20px era marimea lui "x"-ul scris ca litera. Acum e o sageata desenata cu
       fontul de iconite, si la 20 ar fi fost cat titlul de langa ea. */
    font-size: 14px;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
}

.od-ai-chat {
    flex: 1 1 auto;
    overflow-y: auto;
    /* Palma de sus a plecat odata cu alveola: Fixed / Dynamic sta acum in bara,
       si nu mai atarna nimic peste inceputul firului. */
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /*
     * Fara fundal propriu: fundalul e al PANOULUI, si el e translucid.
     *
     * Firul avea aici culoarea paginilor portalului, plina - si atunci degeaba
     * era panoul translucid, ca pe toata inaltimea lui statea un strat opac
     * peste. Acum se vede prin el pana la pagina de dedesubt, iar bulele si
     * cartonasele raman `--od-surface`, deci se ridica de pe fundal exact ca
     * panourile portalului.
     */
    background: transparent;
}

.od-ai-hello {
    color: var(--od-ink-soft, #5a6472);
    background: var(--od-surface, #fff);
    border: 1px dashed var(--od-rule, #d5dae1);
    border-radius: 3px;
    padding: 10px 12px;
}

/*
 * Bulele, dupa `.message` din chat: raza mica, umplutura stransa, si coada care
 * arata dincotro vine mesajul. Coada e ce face un fir sa arate a discutie si nu
 * a lista de cartonase - de-aia o are si chatul.
 */
.od-ai-msg {
    position: relative;
    max-width: 88%;
    padding: 8px 10px;
    border-radius: 3px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.od-ai-msg::after {
    content: " ";
    position: absolute;
    bottom: -6px;
    height: 0;
    width: 0;
    border: 7px solid transparent;
    pointer-events: none;
}

.od-ai-msg.from-ai::after {
    left: 0;
    border-left-color: var(--od-surface, #fff);
}

.od-ai-msg.from-user::after {
    right: 0;
    border-right-color: #1f5f8b;
}

/* Salutul si randul de asteptare nu sunt replici: n-au coada. */
.od-ai-hello::after,
.od-ai-msg.is-waiting::after { display: none; }

/* Butonul de copiere, coltul din dreapta-sus al unui raspuns, la hover. */
.od-ai-copy {
    position: absolute;
    top: 4px;
    right: 4px;
    border: 0;
    background: var(--od-surface-alt, #f3f5f7);
    color: var(--od-ink-faint, #6b7480);
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity .12s ease;
}

.od-ai-msg.from-ai:hover .od-ai-copy { opacity: 1; }
.od-ai-copy:hover { background: var(--od-rule-soft, #e6e9ed); }
.od-ai-copy.od-ai-copied { opacity: 1; color: var(--od-ok, #2e7d32); }
.od-ai-copy.od-ai-copied::after { content: ' copiat'; }

/* Send a ramas Send: oprirea s-a mutat langa ce ruleaza, in randul de lucru
   (`.od-ai-wait-stop`). Cat butonul asta se facea Stop, nu se putea scrie nimic
   in timp ce agentul lucra - iar gandul care-ti vine tocmai atunci se pierdea. */

.od-ai-msg.from-user {
    align-self: flex-end;
    background: #1f5f8b;
    color: var(--od-surface, #fff);
    border-bottom-right-radius: 3px;
}

.od-ai-msg.from-ai {
    align-self: flex-start;
    background: var(--od-surface, #fff);
    border: 1px solid var(--od-rule-soft, #e3e7ec);
    border-bottom-left-radius: 3px;
}

/* Pasii agentului: CE a facut, nu doar ce a zis. Mici, sub raspuns. */
.od-ai-steps {
    align-self: flex-start;
    font-size: 11px;
    color: var(--od-ink-faint, #6b7480);
    max-width: 88%;
}

/*
 * Culoarea se scrie AICI, dinadins.
 *
 * Fara ea, `code` mostenea rosul-visiniu din stilul implicit al temei, iar
 * lista de unelte de sub un raspuns arata ca un raport de erori. Scrie exact pe
 * dos: ce a cautat agentul ca sa poata raspunde.
 */
.od-ai-steps code {
    background: var(--od-ground, #eef0f2);
    color: var(--od-ink-soft, #4a5560);
    border-radius: 3px;
    padding: 1px 5px;
}

/* Randul strans: cate unelte, si desfacerea. */
.od-ai-steps-toggle {
    border: 0;
    background: none;
    padding: 2px 0;
    font-size: 11px;
    color: var(--od-ink-faint, #6b7480);
    cursor: pointer;
    font-family: inherit;
}

.od-ai-steps-toggle:hover { color: #1f5f8b; }

.od-ai-steps-caret { font-size: 9px; margin-left: 2px; }

.od-ai-steps-body { margin-top: 4px; }

.od-ai-steps-body > div { padding: 1px 0; }

.od-ai-msg.is-waiting {
    color: var(--od-ink-faint, #6b7480);
    font-style: italic;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/*
 * Rotita: singurul semn ca lucrul merge inainte.
 *
 * Un text stat pe loc arata identic cu o pagina inghetata, iar o investigatie
 * poate cauta minute intregi intre doua unelte. Se invarte, si langa ea scrie ce
 * face acum si de cat timp.
 */
.od-ai-spinner {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    border: 2px solid var(--od-rule, #d7dce2);
    border-top-color: #1f5f8b;
    border-radius: 50%;
    animation: od-ai-spin .7s linear infinite;
}

@keyframes od-ai-spin {
    to { transform: rotate(360deg); }
}

/* Cine a cerut sa nu i se miste nimic pe ecran nu primeste o rotita care se
   invarte, ci una care doar pulseaza incet. */
@media (prefers-reduced-motion: reduce) {
    .od-ai-spinner {
        animation: od-ai-pulse 1.4s ease-in-out infinite;
    }

    @keyframes od-ai-pulse {
        50% { opacity: .35; }
    }
}

.od-ai-wait-time {
    font-style: normal;
    font-size: 11px;
    color: var(--od-ink-faint, #8a93a0);
}

/*
 * Rezumatul gandirii, pe randul de sub cel de lucru: doua linii, cu coada
 * textului. E partea care spune omului LA CE se gandeste agentul - deci mai
 * inchisa la culoare decat ceasul, drept, nu inclinat, si pe rand propriu
 * (100% din latime, altfel flex-ul o punea pe acelasi rand cu butonul).
 */
.od-ai-wait-note {
    flex: 0 0 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.4;
    font-style: normal;
    color: var(--od-ink-soft, #4b5563);
    white-space: normal;
}

/*
 * CAMPUL PE TOT RANDUL, TRIMITEREA DEDESUBT.
 *
 * "Send" scris cu litere statea la dreapta campului si ii lua din latime la
 * fiecare rand - iar intrebarile pentru agent sunt propozitii intregi, cu nume
 * de masini in ele, nu trei cuvinte. Acum campul merge de la un capat la altul
 * si trimiterea e o iconita patrata pe randul de sub el, in dreapta.
 */
.od-ai-compose {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--od-rule-soft, #e3e7ec);
}

.od-ai-compose-field {
    position: relative;
}

.od-ai-compose textarea {
    width: 100%;
    resize: none;
    border: 1px solid var(--od-rule, #d5dae1);
    /*
     * Rotunjit, ca panoul care il tine.
     *
     * Trei pixeli erau ai desenului vechi, cand tot ce avea colturi in portal
     * avea trei. Panoul s-a rotunjit la 14, cardurile tabloului la fel, iar
     * campul de scris ramasese singurul dreptunghi ascutit dinauntru. Zece, nu
     * paisprezece: e un lucru IN panou, si o casuta rotunjita cat invelisul ei
     * pare lipita de el.
     */
    border-radius: 10px;
    /* Loc in dreapta cat butonul, ca ultimul cuvant scris sa nu ajunga sub el. */
    padding: 7px 42px 7px 10px;
    font-size: 13px;
    background: var(--od-surface, #fff);
    display: block;
}

/*
 * Trimiterea sta IN camp, in coltul lui din dreapta jos.
 *
 * Rotunjita, dar nu rotunda: rotunda e semnul ferestrelor de vorbit intre
 * oameni, iar asta e o unealta a portalului. Opt, cat sa se citeasca de aceeasi
 * familie cu campul de zece care o tine si cu panoul de paisprezece de deasupra
 * - erau trei, din desenul vechi in care tot ce avea colturi avea trei.
 * Si mica: e langa text, nu deasupra lui - un patrat de 34 langa un rand de
 * 13px arata ca un buton care s-a asezat gresit.
 */
.od-ai-send {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #1f5f8b;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

.od-ai-send:hover,
.od-ai-send:focus-visible {
    background: #17516f;
    color: #fff;
    outline: none;
}




.od-ai-mcp {
    border-top: 1px solid var(--od-rule-soft, #e3e7ec);
    padding: 8px 14px 12px;
    background: var(--od-surface-alt, #fbfbfc);
}

/* Randul de jos: legatura MCP la stanga, activitatea agentului la dreapta.
   `.od-ai-mcp-body` iese din rand (100%) ca sa se desfaca dedesubt, nu langa. */
.od-ai-mcp {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.od-ai-mcp-toggle { font-size: 11px; }

.od-ai-activity-link {
    margin-left: auto;
    font-size: 11px;
}

.od-ai-mcp-body { font-size: 11px; color: var(--od-ink-soft, #5a6472); margin-top: 8px; flex-basis: 100%; }

.od-ai-mcp-body pre {
    font-size: 10px;
    background: var(--od-ground, #f0f2f4);
    border-radius: 3px;
    padding: 8px;
    overflow-x: auto;
}

/* Argumentele scurte de langa unealta, in randul de pasi. */
.od-ai-steps .od-ai-step-args {
    color: var(--od-ink-faint, #8a93a0);
    font-size: 11px;
    word-break: break-all;
}

/* Comutatorul de scop: All / This device - un control segmentat mic. */
.od-ai-scope-switch {
    display: inline-flex;
    border: 1px solid var(--od-rule, #d7dce2);
    border-radius: 3px;
    overflow: hidden;
}

.od-ai-scope {
    border: 0;
    background: var(--od-surface-alt, #f3f5f7);
    color: var(--od-ink-faint, #6b7480);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    cursor: pointer;
}

.od-ai-scope + .od-ai-scope { border-left: 1px solid var(--od-rule, #d7dce2); }

.od-ai-scope.is-active {
    background: #1f5f8b;
    color: var(--od-surface, #fff);
}

/*
 * =============================================================================
 * FIXED / DYNAMIC: ALVEOLA DINTRE ZONA DE SUS SI DISCUTIE
 * =============================================================================
 *
 * A stat si langa scop (se citea ca o alegere despre CE intrebi, ceea ce nu e),
 * si langa nume (unde nu mai incapea treapta). Locul lui e chiar la granita:
 * ATARNA de zona de sus - de acolo isi ia intelesul, fiindca ea tine scopul si
 * masina - si spanzura peste inceputul discutiei, fiindca despre ea hotaraste:
 * daca firul se schimba sub tine cand te muti, sau nu.
 *
 * Cutia lui are inaltime ZERO si pastila e asezata absolut in ea: asa nu
 * imparte panoul intr-un al treilea rand, ci se lasa peste fir. Discutia
 * primeste in schimb o palma de loc sus (`.od-ai-chat`), ca primul mesaj sa nu
 * intre sub ea.
 *
 * Un singur buton care isi spune starea, nu doua alaturi: sunt exact doua
 * feluri, si al doilea n-ar spune nimic in plus. Semnul se schimba odata cu
 * numele - o tinta cand urmareste, un lacat cand sta pe loc - ca sa se vada din
 * coada ochiului, fara sa citesti.
 */
.od-ai-follow-dock {
    position: relative;
    flex: 0 0 auto;
}

.od-ai-follow-wrap {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/*
 * Fara chenar si fara fundal.
 *
 * In alveola de sub bara pastila avea nevoie de un contur ca sa se vada ca e un
 * lucru; in bara nu mai are - acolo e deja intre unelte, pe fundalul ei, si un
 * al doilea dreptunghi desenat peste el ar face doua rame una in alta. Culoarea
 * o ia de la bara, ca titlul si ca butonul de inchidere.
 */
.od-ai-follow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 2px;
    border: 0;
    background: none;
    color: var(--od-ink-on-color, #fff);
    opacity: .85;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.od-ai-follow:hover {
    opacity: 1;
}

.od-ai-follow.is-static {
    /* Sta pe loc: scris plin, nu stins - singura piedica pusa dinadins din bara. */
    opacity: 1;
}

/*
 * Litera "i". Rotunda si mica: nu e o fapta, e o lamurire - si se vede ca nu e
 * de acelasi fel cu butonul de langa ea.
 */
.od-ai-follow-why {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: none;
    color: var(--od-ink-on-color, #fff);
    opacity: .6;
    font-size: 7px;
    line-height: 1;
    cursor: pointer;
}

.od-ai-follow-why:hover {
    opacity: 1;
}

/*
 * Lamurirea. Se deschide la click, nu la trecerea mouse-ului: un tooltip pe
 * care il vezi doar daca stai cu mouse-ul peste el nu e o explicatie, e o
 * loterie. Se agata sub el, la stanga, ca sa nu iasa din panou.
 */
.od-ai-follow-note {
    position: absolute;
    top: calc(100% + 8px);
    /* Sub pastila, pe mijlocul ei - dar niciodata in afara panoului: din bara,
       pastila poate sta destul de la stanga cat 130px la stanga ei sa iasa. */
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 24px);
    z-index: 30;
    width: 260px;
    max-width: 70vw;
    padding: 10px 12px;
    border-radius: 3px;
    background: var(--od-surface, #fff);
    color: var(--od-ink, #3d4752);
    font-size: 11.5px;
    line-height: 1.4;
    font-weight: 400;
    box-shadow: 0 8px 24px rgba(20, 26, 33, .28);
}

.od-ai-follow-note[hidden] {
    display: none;
}

.od-ai-follow-note p {
    margin: 0 0 7px;
}

.od-ai-follow-note p:last-child {
    margin-bottom: 0;
}

.od-ai-follow-note-fine {
    color: var(--od-ink-faint, #7b8490);
}


/* =============================================================================
   BARA DE JOS: actiuni pe discutie, Claude MCP, Direct Commands
   ============================================================================= */

/* Trei iconite, nu un meniu: sunt trei, se folosesc des, si bara de sus e a
   scopului. Titlul fiecareia spune ce face - iconita singura nu e de ajuns. */
.od-ai-acts {
    display: flex;
    align-items: center;
    gap: 2px;
}

.od-ai-act {
    border: 0;
    background: none;
    color: var(--od-ink-faint, #6b7480);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 5px 7px;
    border-radius: 3px;
    /* Suprafata de apasat nu depinde de fontul de iconite. Fara minimele astea
       butonul iesea de 14x10 px cand fontul nu apucase sa se incarce - adica
       aproape de neapasat, si invizibil pe deasupra. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 26px;
}

.od-ai-act:hover {
    background: var(--od-rule-soft, #e8ecef);
    color: var(--od-ink, #1f2933);
}

/* Semn scurt ca actiunea a fost dusa la capat - clipboard-ul mai ales, care
   altfel nu se vede nicaieri ca s-a intamplat. */
.od-ai-act.is-done { color: var(--od-ok, #008300); }

/* Numarul de comenzi directe. Zero nu se arata deloc (elementul e `hidden`):
   un "0" langa o eticheta cere atentie fara sa aiba ce spune. */
.od-ai-cmd-badge {
    display: inline-block;
    min-width: 16px;
    padding: 0 5px;
    margin-left: 3px;
    border-radius: 3px;
    background: var(--od-proactivitee, #d83430);
    color: var(--od-ink-on-color, #fff);
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
}

/* =============================================================================
   ALEGEREA MASINII
   ============================================================================= */

.od-ai-device { position: relative; }

.od-ai-device-pick {
    border: 1px solid var(--od-rule, #d9dee4);
    background: var(--od-surface, #fff);
    color: var(--od-ink, #1f2933);
    border-radius: 3px;
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.od-ai-device-pick:hover { background: var(--od-surface-alt, #f7f9fa); }

/* Aici era incuietoarea de pe fisa unei masini ("nu se mai alege, e o stare").
   A plecat: de pe fisa unei masini se intreaba cel mai des despre alta, iar un
   buton care arata ceva si nu se lasa apasat nu spune nimanui de ce. */

.od-ai-device-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    width: 260px;
    background: var(--od-surface, #fff);
    border: 1px solid var(--od-rule, #d9dee4);
    border-radius: 3px;
    box-shadow: 0 6px 18px rgba(20, 26, 33, .16);
    z-index: 7;
    overflow: hidden;
}

.od-ai-device-search {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--od-rule-soft, #e8ecef);
    padding: 8px 10px;
    font-size: 12px;
    outline: none;
}

.od-ai-device-list {
    max-height: 260px;
    overflow-y: auto;
}

.od-ai-device-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--od-ground, #f4f6f8);
    background: none;
    padding: 7px 10px;
    cursor: pointer;
    font-size: 12px;
}

.od-ai-device-item:hover { background: var(--od-surface-alt, #f7f9fa); }
.od-ai-device-item:last-child { border-bottom: 0; }

.od-ai-device-item .od-ai-device-os {
    display: block;
    font-size: 10px;
    color: var(--od-ink-faint, #6b7480);
    margin-top: 1px;
}

.od-ai-device-empty {
    padding: 10px;
    font-size: 11px;
    color: var(--od-ink-faint, #6b7480);
}

/* =============================================================================
   PANOUL DE SESIUNE: comenzile si propunerile discutiei de acum
   ============================================================================= */

/*
 * Ia locul firului cat e deschis, si il lasa intreg dedesubt.
 *
 * Nu e asezat absolut: sertarul e o coloana flex, iar un panou absolut s-ar fi
 * agatat de TOT sertarul - deci ar fi acoperit si bara de scris, si randul de
 * jos. Asa, e un frate al firului care ii ia rolul; firul se ascunde, nu se
 * goleste, si te intorci la el inchizand panoul.
 */
.od-ai-panel {
    flex: 1 1 auto;
    min-height: 0;
    background: var(--od-ground, #f4f6f8);
    display: flex;
    flex-direction: column;
}

.od-ai-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--od-surface, #fff);
    border-bottom: 1px solid var(--od-rule-soft, #e8ecef);
}

.od-ai-panel-head strong { flex: 1; min-width: 0; font-size: 13px; }

.od-ai-panel-close {
    border: 0;
    background: none;
    font-size: 18px;
    line-height: 1;
    color: var(--od-ink-faint, #6b7480);
    cursor: pointer;
}

/* Acelasi corp ca la Change: panouri albe pe fundalul paginii. */
.od-ai-panel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px;
}

.od-ai-panel-body .panel {
    background: var(--od-surface, #fff);
    border: 1px solid var(--od-rule-soft, #e8ecef);
    border-radius: 3px;
    margin-bottom: 10px;
}

.od-ai-panel-body .panel-body { padding: 12px; }

/*
 * O LISTA umple panoul cap la cap, ca la Memo: randurile se ating de margini si
 * se despart intre ele printr-o linie. Cartonasele (Changes, comenzi) au aer in
 * jur, lista nu - altfel randurile ar pluti si n-ar mai arata a lista.
 */
.od-ai-panel-body.is-list {
    padding: 0;
    background: var(--od-surface, #fff);
}

.od-ai-session-link {
    font-size: 11px;
    white-space: nowrap;
    cursor: pointer;
}


/*
 * `hidden` trebuie sa ASCUNDA, si pe elementele astea nu ascundea.
 *
 * Regula implicita a browserului pentru [hidden] e `display: none`, dar ea vine
 * din foaia lui si pierde in fata oricarei reguli de-a noastra cu clasa. Firul
 * si panoul sunt amandoua `display: flex` - deci `hidden = true` din JS nu facea
 * NIMIC: panoul se deschidea, iar discutia ramanea deasupra lui, si se vedeau
 * amandoua. Se prinde doar uitandu-te la ecran.
 */
.od-ai-chat[hidden],
.od-ai-panel[hidden] { display: none !important; }

/* Si legaturile de sesiune, din acelasi motiv: `hidden` trebuie sa ascunda
   oricat de tarziu ar veni o regula de-a noastra peste ele. */
.od-ai-mcp a[hidden] { display: none !important; }

/*
 * Randul de jos incape pe UN rand.
 *
 * Cu Change mutat langa Direct Commands, patru bucati nu mai incapeau in 440px
 * si ultima cadea dedesubt - iar un rand de jos pe doua randuri arata a
 * greseala, nu a asezare. Legaturile se string la dreapta printr-un singur gol
 * elastic, nu prin `margin-left: auto` pe fiecare (doua marginile automate se
 * bat cap in cap), si textul lor nu se rupe.
 *
 * `wrap`, nu `nowrap`: cele patru bucati incap oricum pe un rand (golul elastic
 * mai are loc), iar `nowrap` tinea si nota MCP pe acelasi rand - `flex-basis:
 * 100%` nu rupe randul intr-un container care nu rupe - si o scotea din sertar.
 */
.od-ai-mcp { flex-wrap: wrap; gap: 8px; }

/*
 * MCP sta primul, la stanga; golul elastic imbranceste spre dreapta doar ce
 * vine dupa actiuni. `margin-left: auto` a plecat de pe MCP: doua marginile
 * automate pe acelasi rand se bat cap in cap, iar acum imbranceala are un
 * singur loc - `.od-ai-gap`.
 */
.od-ai-mcp-toggle { margin-left: 0; order: -1; }
.od-ai-gap { flex: 1 1 auto; min-width: 0; }
.od-ai-activity-link { margin-left: 0; }

/*
 * "+ New" e rosu: e singurul buton din bara dupa care nu te mai intorci.
 *
 * Culoarea e cea a platformei pentru "atentie, asta strica ceva" - aceeasi cu
 * a insignei de schimbari neautorizate - nu un rosu ales aici. La hover se
 * inchide, ca sa se simta ca e un buton, nu un semn.
 */
.od-ai-new { color: #d64635; }
.od-ai-new:hover,
.od-ai-new:focus { color: #a03328; }
.od-ai-mcp > a { white-space: nowrap; }

/* Lamurirea MCP se desface DEDESUBT, deci ea are voie sa iasa din rand. */
.od-ai-mcp-body { flex-basis: 100%; }

/* =============================================================================
   USA FULL ACCESS: riscurile, invoirea si codul
   ============================================================================= */

/*
 * Acopera tot sertarul, dinadins.
 *
 * E singurul loc din fereastra unde omul deschide ceva ce nu se poate lua
 * inapoi. Un panou care lasa discutia la vedere l-ar fi facut sa para inca un
 * pas dintr-un flux; asa, ecranul se opreste si intreaba.
 */
.od-ai-gate {
    position: absolute;
    inset: 0;
    z-index: 8;
    background: rgba(20, 26, 33, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.od-ai-gate[hidden] { display: none !important; }

.od-ai-gate-box {
    background: var(--od-surface, #fff);
    border: 2px solid var(--od-crit, #b42318);
    border-radius: 3px;
    padding: 14px 16px;
    max-height: 100%;
    overflow-y: auto;
    width: 100%;
}

.od-ai-gate-head {
    font-size: 14px;
    font-weight: 700;
    color: var(--od-crit, #b42318);
    margin-bottom: 8px;
}

/* Rosu, ca in email - acelasi lucru spus la fel in amandoua locurile. */
.od-ai-gate-risks {
    margin: 0 0 10px;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.5;
    color: #7a1b12;
    background: var(--od-crit-bg, #fbe6e4);
    border-radius: 3px;
    padding: 10px 10px 10px 26px;
}

.od-ai-gate-risks li { margin-bottom: 5px; }
.od-ai-gate-risks li:last-child { margin-bottom: 0; }

.od-ai-gate-sent {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--od-ink-soft, #5b6672);
}

.od-ai-gate-agree {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--od-ink, #1f2933);
    margin-bottom: 8px;
    cursor: pointer;
}

.od-ai-gate-agree input { margin-right: 6px; }

/* `hidden` trebuie sa ascunda si aici - vezi celelalte doua locuri unde regula
   implicita a browserului pierdea in fata unei reguli de-a noastra. */
.od-ai-gate-code[hidden] { display: none !important; }

.od-ai-gate-code {
    width: 100%;
    border: 1px solid var(--od-rule, #d9dee4);
    border-radius: 3px;
    padding: 7px 10px;
    font-size: 15px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: Menlo, Consolas, monospace;
}

.od-ai-gate-error {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--od-crit, #b42318);
}

.od-ai-gate-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

.od-ai-gate-cancel,
.od-ai-gate-go {
    border: 1px solid var(--od-rule, #d9dee4);
    background: var(--od-surface, #fff);
    color: var(--od-ink, #1f2933);
    border-radius: 3px;
    font-size: 12px;
    padding: 6px 12px;
    cursor: pointer;
}

.od-ai-gate-go {
    background: var(--od-crit, #b42318);
    border-color: var(--od-crit, #b42318);
    color: var(--od-ink-on-color, #fff);
    font-weight: 600;
}

/* Stins inseamna stins: fara invoire si fara cod, butonul nu pare apasabil. */
.od-ai-gate-go[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

/* =============================================================================
   TEXTUL AGENTULUI: titluri, liste, cod
   ============================================================================= */

/*
 * Bula are `white-space: pre-wrap`, deci randurile noi conteaza deja. De-aia
 * titlurile si punctele de lista sunt `span`-uri de bloc, nu `<h3>`/`<ul>`:
 * acelea vin cu marginile lor si s-ar aduna peste randurile pastrate, iar
 * textul ar respira de doua ori.
 */
.od-ai-msg .od-ai-h {
    display: block;
    font-weight: 700;
    font-size: 13px;
    color: var(--od-ink, #1f2933);
    margin-top: 2px;
}

/* Bulina se pune din CSS, nu in text: asa se aliniaza randul rupt sub litera,
   nu sub semn. */
.od-ai-msg .od-ai-li {
    display: block;
    padding-left: 14px;
    position: relative;
}

.od-ai-msg .od-ai-li::before {
    content: "\2022";
    position: absolute;
    left: 3px;
    color: var(--od-ink-faint, #6b7480);
}

/*
 * Lista numerotata: numarul TINE LOCUL bulinei, nu se aduna cu ea.
 *
 * Fara asta ar iesi "\2022 1. primul pas" - o bulina si un numar unul langa
 * altul, adica doua semne pentru acelasi lucru. Numarul atarna in stanga, iar
 * randul rupt se aliniaza sub litera, nu sub cifra.
 */
.od-ai-msg .od-ai-li.od-ai-num {
    padding-left: 22px;
    text-indent: -19px;
}

.od-ai-msg .od-ai-li.od-ai-num::before {
    content: none;
}

.od-ai-msg .od-ai-rule {
    border: 0;
    border-top: 1px solid var(--od-rule-soft, #e8ecef);
    margin: 8px 0;
}

.od-ai-msg code {
    background: var(--od-ground, #f4f6f8);
    border: 1px solid var(--od-rule-soft, #e8ecef);
    border-radius: 3px;
    padding: 0 4px;
    font-size: 11px;
    font-family: Menlo, Consolas, monospace;
    color: var(--od-ink, #1f2933);
}

/* Bula omului e albastra: un cod pe fundal inchis are nevoie de alt chenar. */
.od-ai-msg.from-user code {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .3);
    color: inherit;
}

/* =============================================================================
   COADA DE MESAJE, SI OPRIREA LANGA CE RULEAZA
   ============================================================================= */

/*
 * Un mesaj scris cat agentul lucreaza se vede pe loc, dar se stie ca asteapta.
 * Fara semnul asta ar parea trimis si ignorat - iar omul l-ar scrie din nou.
 */
.od-ai-msg.is-queued {
    opacity: .6;
    /* Ancora X-ului de mai jos, si loc pentru el ca sa nu stea peste text. */
    position: relative;
    padding-right: 26px;
}

/*
 * X-ul care scoate un mesaj din coada.
 *
 * Se arata la hover, nu tot timpul: coada are adesea doua-trei mesaje, iar trei
 * X-uri permanente ar fi facut din ce astepti un rand de butoane. Cat nu-l
 * cauti, nu e acolo; cand duci mausul peste bula, apare.
 *
 * Ramane vizibil si la focus din tastatura - altfel ar fi un buton pe care
 * numai mausul il gaseste.
 */
.od-ai-queued-x {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 18px;
    height: 18px;
    padding: 0;
    line-height: 16px;
    text-align: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .18);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, background .12s ease;
}

.od-ai-msg.is-queued:hover .od-ai-queued-x,
.od-ai-queued-x:focus {
    opacity: 1;
}

.od-ai-queued-x:hover { background: #b42318; }

.od-ai-msg.is-queued::before {
    content: attr(data-queued);
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
    opacity: .8;
    margin-bottom: 3px;
}

/* Oprirea, in randul de lucru: discreta cat merge, apasabila cand vrei. */
.od-ai-wait-stop {
    position: relative;
    flex: 0 0 auto;
    /* Cat rotita de dinainte: un semn discret, nu un buton mare. Tinta de
       apasat e ceva mai larga decat cercul (padding), fara sa se vada. */
    width: 14px;
    height: 14px;
    margin-left: 2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Inelul care se invarte, pe marginea butonului. */
.od-ai-wait-stop-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--od-rule, #d7dce2);
    border-top-color: #1f5f8b;
    animation: od-ai-spin .7s linear infinite;
}

/* Semnul de oprire: un patratel rosu, ca pe orice aparat. Fara text. */
.od-ai-wait-stop-label {
    position: relative;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: var(--od-crit, #b42318);
}

.od-ai-wait-stop:hover {
    background: var(--od-crit-soft, #fdecea);
}

/* Tinta de apasat, mai larga decat semnul, invizibila. */
.od-ai-wait-stop::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
}

.od-ai-wait-stop:hover .od-ai-wait-stop-ring {
    border-color: var(--od-crit, #b42318);
    border-top-color: var(--od-crit, #b42318);
    animation-duration: .35s;
}

@media (prefers-reduced-motion: reduce) {
    .od-ai-wait-stop-ring {
        animation: od-ai-pulse 1.4s ease-in-out infinite;
    }
}


/* =============================================================================
   CE RULEAZA ACUM
   =============================================================================

   Banda sta INTRE bara de sus si conversatie: e despre ce se intampla, nu
   despre ce s-a scris, si trebuie vazuta fara sa derulezi. Se arata numai cand
   are ce arata - vezi `paintRunning()`.

   Randurile sunt butoane fiindca duc undeva; arata insa a randuri, nu a
   butoane, ca sa nu concureze cu Send. */
.od-ai-running {
    flex: 0 0 auto;
    margin: 0 10px 8px;
    padding: 8px 10px;
    border: 1px solid #cfe0ea;
    border-left: 3px solid #6ba0b8;
    border-radius: 3px;
    background: #f4f9fb;
}

.od-ai-running-head {
    font-size: 11px;
    font-weight: 600;
    color: #40707f;
    margin-bottom: 4px;
}

.od-ai-running-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

/* Randul care duce la discutie ia toata latimea; butonul de langa el nu. */
.od-ai-running-open {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 12px;
    color: #2f3b44;
}

.od-ai-running-open:hover { color: #1c6b86; }

/*
 * O rulare intrerupta nu se mai invarte.
 *
 * Rotita spune "lucreaza". Pe ceva care s-a oprit singur, ea ar fi minutit mai
 * departe - exact ce s-a intamplat cu rularea de 39 de minute care murise
 * demult. Semnul de mirare si culoarea galbena spun altceva: e ceva de inchis,
 * nu de asteptat.
 */
.od-ai-running-dead {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #f0ad4e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    flex: 0 0 14px;
}

/*
 * Pe una intrerupta, MOTIVUL trece pe randul lui.
 *
 * Pe un singur rand, "no answer - the run was interrupted" se taia dupa doua
 * cuvinte - si tocmai el e vestea. Numele masinii e lung si nu se poate scurta
 * (dupa el recunosti despre ce e vorba), asa ca se lasa in jos ce nu incape.
 * Randurile vii raman pe un rand: acolo intrebarea e context, nu veste.
 */
.od-ai-running-row.is-dead .od-ai-running-open { flex-wrap: wrap; }

.od-ai-running-row.is-dead .od-ai-running-q {
    /* Ultimul in ordine vizuala, desi in markup vine inaintea ceasului: asa
       linia intai ramane "semn - nume - ceas", si motivul coboara sub ele. */
    order: 1;
    flex: 1 0 100%;
    margin-left: 22px;
    font-style: italic;
    white-space: normal;
    color: #9c6112;
}

/* Ceasul ramane pe PRIMA linie, la dreapta numelui. Imbrancitura spre dreapta
   se pune aici, nu pe intrebare: aia a coborat pe randul de sub. */
.od-ai-running-row.is-dead .od-ai-running-time {
    margin-left: auto;
    color: #9c6112;
}

/* Stop / Dismiss: mic, langa randul lui, ca sa nu concureze cu el. */
.od-ai-running-act {
    flex: 0 0 auto;
    padding: 1px 8px;
    border: 1px solid #cfe0ea;
    border-radius: 3px;
    background: #fff;
    font-size: 11px;
    color: #40707f;
    cursor: pointer;
}

.od-ai-running-act:hover { background: #eef4f7; }
.od-ai-running-act[disabled] { opacity: .6; cursor: default; }
.od-ai-running-row.is-dead .od-ai-running-act { border-color: #f0d3a0; color: #9c6112; }

.od-ai-running-where { font-weight: 600; white-space: nowrap; }

/* Intrebarea se strange, ca ceasul sa ramana vizibil oricat de lunga ar fi. */
.od-ai-running-q {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #6b7680;
}

.od-ai-running-time {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: #40707f;
}


/* =============================================================================
   COMENZILE DISCUTIEI, GRUPATE PE MASINA
   =============================================================================

   Numele masinii o data, si sub el comenzile ei. Pe trei comenzi, numele aparea
   de trei ori si nu se mai vedea ca sunt ale aceleiasi masini. */
.od-cmd-device {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eef1f3;
}

.od-cmd-count { font-size: 11px; color: #8b95a1; }

/* A doua comanda si urmatoarele se despart de cea de deasupra. */
.od-cmd-run + .od-cmd-run {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #eef1f3;
}

.od-cmd-run { padding-top: 8px; }

.od-cmd-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
}

.od-cmd-at { margin-left: auto; color: #8b95a1; }

.od-cmd-line {
    margin: 6px 0 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 11px;
}

/* -----------------------------------------------------------------------------
   VALIDATION
   -----------------------------------------------------------------------------

   Randul sta la DREAPTA: comanda se citeste de la stanga, iar proba ei vine
   dupa. Semnul din fata raspunde la "a mers?" fara sa desfaci nimic. */
.od-val-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 6px;
}

.od-val {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #6b7680;
    text-decoration: none;
}

.od-val:hover, .od-val:focus { text-decoration: none; color: #2f3b44; }

.od-val.is-ok  { color: #2f7d3f; }
.od-val.is-bad { color: #a03328; }

.od-val-mark { font-size: 10px; }

/* Sageata arata in jos cand e strans, in sus cand e desfacut - asa se vede
   care validare e deschisa cand sunt trei una sub alta. */
.od-val-chev { font-size: 9px; transition: transform .15s ease; }
.od-val.is-open .od-val-chev { transform: rotate(180deg); }

/*
 * Iesirea, RETRASA de la stanga.
 *
 * Nu incepe de la marginea panoului, ci putin mai spre dreapta: asa, cand
 * doua-trei validari stau una sub alta, se vede dintr-o privire care bucati
 * sunt probe si care sunt comenzi. Fundalul repeta raspunsul semnului de sus -
 * verde daca a mers, rosu daca nu - ca sa nu trebuiasca sa te uiti inapoi.
 */
.od-val-out {
    align-self: stretch;
    margin: 6px 0 0 24px;
    padding: 8px 10px;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 11px;
    border-radius: 3px;
    border: 1px solid #e8ecef;
    border-left: 3px solid #b7c0c8;
    background: #f7f9fa;
}

.od-val-out.is-ok  { border-left-color: #5FB644; background: #eff8ec; }
.od-val-out.is-bad { border-left-color: #d64635; background: #fbeeec; }

/* "Explain this" pe randurile jurnalelor: stins pana treci cu mouse-ul. */
.js-ai-explain { display: inline-block; margin-left: 4px; opacity: .45; vertical-align: middle; line-height: 0; }
.js-ai-explain:hover { opacity: 1; }
tr:hover .js-ai-explain { opacity: .8; }

/*
 * Sagetile de ordine ale treptelor.
 *
 * Lista de trepte E selectorul din sertar (vezi `Config::tiersFor()`), deci
 * ordinea de pe ecranul de setari se vede la fiecare intrebare. Pana pe 4
 * septembrie 2026 ea traia in cod - Deep, Balanced, Quick - si o firma care
 * lucreaza aproape numai pe Quick trecea zilnic peste Deep.
 */
.aia-tier-cell-move { width: 34px; padding-right: 0; vertical-align: middle; white-space: nowrap; }

/*
 * Manerul de tras: mana merge direct unde vrea, in loc sa apese de doua ori pe
 * o sageata. Sagetile raman langa el, pentru tastatura - un maner care se poate
 * folosi numai cu mouse-ul inchide usa cui nu-l are.
 */
.aia-tier-grip {
    display: inline-block;
    vertical-align: middle;
    color: var(--od-ink-faint, #b3bac3);
    font-size: 12px;
    letter-spacing: -3px;
    padding: 0 4px 0 0;
    cursor: grab;
    user-select: none;
}

.aia-tier-grip:active { cursor: grabbing; }
.aia-tier-row:hover .aia-tier-grip { color: var(--od-ink-faint, #6b7480); }

/* Randul tras: se vede ca e in mana, si unde va cadea. */
.aia-tier-row.is-dragging { opacity: .5; background: var(--od-surface-alt, #f3f5f7); }

/* Manerul la stanga, sagetile una sub alta langa el - masurat, nu presupus:
   la `float` sagetile treceau sub maner si randul crestea cu 26px. */
.aia-tier-move-wrap { display: flex; align-items: center; gap: 2px; }
.aia-tier-move-wrap .aia-tier-grip { padding: 0; }
.aia-tier-arrows { display: flex; flex-direction: column; }

.aia-tier-move {
    display: block;
    border: 0;
    background: transparent;
    color: var(--od-ink-faint, #8a93a0);
    font-size: 9px;
    line-height: 10px;
    padding: 1px 3px;
    cursor: pointer;
}

.aia-tier-move:hover { color: var(--od-ink, #1f2933); }
.aia-tier-row:first-child .aia-tier-move[data-move="up"],
.aia-tier-row:last-child .aia-tier-move[data-move="down"] { visibility: hidden; }

/*
 * Fila Companies: ce se hotaraste despre un client.
 *
 * Un rand pe firma, cu butonul lui de Save - nu un Save mare peste tot
 * tabelul: doua sute de firme intr-un singur buton inseamna ca o greseala pe
 * una le atinge pe toate.
 */
.aia-companies { width: 100%; border-collapse: collapse; margin-top: 8px; }
.aia-companies th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--od-ink-faint, #6b7480);
    border-bottom: 1px solid var(--od-rule-soft, #e3e7ec);
    padding: 4px 8px 4px 0;
}
.aia-companies td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--od-ground, #f0f2f5); vertical-align: middle; }
.aia-companies .aia-num { width: 92px; }

.aia-company-defaults { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.aia-company-defaults .aia-num { width: 110px; display: block; }


/*
 * ASEZAREA CAMPULUI DE SCRIS PE TELEFON, LA SFARSITUL FOII.
 *
 * Aici, si nu langa celelalte reguli de telefon de mai sus: la specificitate
 * egala hotaraste ordinea din fisier, iar `font-size: 16px` trebuie sa aiba
 * ultimul cuvant peste cei 13 ai regulii de baza (`.od-ai-compose textarea`,
 * scrisa dupa ele). Masurat: pus mai sus, iesea tot 13px - adica exact zoomul
 * pe care il repara.
 */

/*
 * PE TELEFON, CAMPUL DE SCRIS ARE UN SINGUR RAND.
 *
 * `rows="2"` e bun pe ecran lat, unde panoul are 460px inaltime si doua randuri
 * goale nu deranjeaza pe nimeni. Pe telefon panoul tine cat tine, iar cele doua
 * randuri se scad din discutie - din singurul lucru pentru care e deschis.
 *
 * Se scrie din foaie, nu din `rows`: latimea ecranului o stie browserul, nu
 * PHP-ul care deseneaza macheta. Textul mai lung de un rand se deruleaza in
 * camp, ca in orice casuta de chat.
 *
 * 36px: 20 randul de text la 13px, plus cei 7 de sus si de jos, plus chenarul.
 */
@media (max-width: 767px) {
    /*
     * SAISPREZECE, NU TREISPREZECE - ALTFEL TELEFONUL MARESTE TOATA PAGINA.
     *
     * Safari de pe iOS face un lucru pe care nu-l cere nimeni: cand pui cursorul
     * intr-un camp scris sub 16px, MARESTE pagina ca sa poti citi ce scrii. Nu
     * doar campul - toata pagina. Panoul iese din ecran pe dreapta, antetul se
     * taie la "Full Acces", bara de module ramane pe jumatate afara. Se vede in
     * captura din 6 septembrie 2026: totul cu vreun sfert mai mare, si nimic
     * aliniat.
     *
     * Iar la iesirea din camp nu se micsoreaza singura la loc. Omul ramane cu
     * portalul marit si nu stie ce a apasat.
     *
     * Leacul e chiar 16px pe campurile in care se scrie - sub atat, zoomul e
     * regula, nu o scapare. NU se pune `maximum-scale=1` in `viewport`, cum se
     * face prin alte parti: aia opreste si maritul cu doua degete, adica ia
     * ochilor slabi singurul lucru care ii ajuta.
     *
     * `.od-search-input` era deja pe 16 - de acolo se stie ca leacul e cel bun.
     */
    .od-ai-compose textarea,
    .od-ai-device-search,
    .od-ai-gate-code {
        font-size: 16px;
    }

    .od-ai-compose textarea {
        height: 36px;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    /*
     * Si trimiterea se aseaza pe mijlocul randului.
     *
     * Pe campul de doua randuri sta la 6 de fund, in coltul lui, si acolo e
     * locul ei. Pe unul de 36 aia lasa doi pixeli deasupra si sase dedesubt -
     * masurat - adica un buton care pare cazut. Pe mijloc, nu conteaza cat e
     * campul de inalt.
     */
    .od-ai-send {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }
}