:root{
    --bg:#07110d;
    --surface:#0b1711;
    --surface2:#102019;
    --surface3:#14271e;
    --line:#213c2f;
    --line-soft:rgba(255,255,255,.07);
    --green:#27dc72;
    --green2:#79f3a5;
    --text:#f3faf5;
    --muted:#8ea99a;
    --muted2:#bad0c2;
}

*{
    box-sizing:border-box;
}

html,body{
    margin:0;
    min-height:100%;
}

body{
    background:
        radial-gradient(circle at 15% -10%,rgba(39,220,114,.10),transparent 28%),
        var(--bg);
    color:var(--text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

button,
textarea,
select{
    font:inherit;
}

button{
    cursor:pointer;
}

.shell{
    min-height:100vh;
}

.topbar{
    height:76px;
    padding:0 24px;
    border-bottom:1px solid var(--line-soft);
    background:rgba(7,17,13,.91);
    backdrop-filter:blur(18px);

    display:flex;
    align-items:center;
    justify-content:space-between;

    position:sticky;
    top:0;
    z-index:100;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;

    text-decoration:none;
    color:var(--text);
}

.brand-core{
    width:44px;
    height:44px;

    border-radius:15px;

    display:grid;
    place-items:center;

    color:#041008;
    font-weight:950;

    background:
        linear-gradient(
            145deg,
            #9affbc,
            var(--green)
        );

    box-shadow:
        0 0 35px rgba(39,220,114,.22);
}

.brand div:last-child{
    display:grid;
}

.brand strong{
    letter-spacing:-.02em;
}

.brand small{
    color:var(--muted);
    margin-top:2px;
}

.top-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.system-status{
    display:flex;
    align-items:center;
    gap:8px;

    color:#bcd4c5;
    font-size:13px;
}

.system-status i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 16px var(--green);
}

#languageSelect{
    background:var(--surface2);
    color:var(--text);

    border:1px solid var(--line);
    border-radius:12px;

    padding:10px 12px;
}

.workspace{
    min-height:calc(100vh - 76px);

    display:grid;
    grid-template-columns:
        300px
        minmax(420px,1fr)
        280px;
}

.left-panel,
.right-panel{
    padding:22px;
}

.left-panel{
    border-right:1px solid var(--line-soft);
}

.right-panel{
    border-left:1px solid var(--line-soft);
}

.assistant-card{
    min-height:310px;

    padding:25px;

    border:1px solid var(--line);
    border-radius:28px;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(39,220,114,.13),
            transparent 35%
        ),
        var(--surface);
}

.persona{
    min-height:155px;

    display:grid;
    justify-items:center;
    align-content:center;

    position:relative;
}

.persona-orbit{
    width:130px;
    height:130px;

    border:1px solid rgba(121,243,165,.18);
    border-radius:50%;

    display:grid;
    place-items:center;

    box-shadow:
        0 0 0 18px rgba(39,220,114,.025),
        0 0 0 38px rgba(39,220,114,.015);
}

.persona-core{
    width:88px;
    height:88px;

    border-radius:50%;

    display:grid;
    place-items:center;

    color:#031008;
    font-weight:950;

    background:
        radial-gradient(
            circle at 35% 25%,
            #b0ffc9,
            var(--green)
        );

    box-shadow:
        0 0 45px rgba(39,220,114,.34);
}

.live-pill{
    margin-top:20px;

    color:var(--green2);
    font-size:10px;
    font-weight:900;
    letter-spacing:.1em;
}

.persona-copy small,
.context-card small,
.intelligence-card small,
.privacy-card small,
.conversation-head small{
    color:var(--green2);
    font-size:10px;
    font-weight:900;
    letter-spacing:.14em;
}

.persona-copy h1{
    margin:9px 0;
    font-size:28px;
    letter-spacing:-.04em;
}

.persona-copy p{
    color:var(--muted2);
    line-height:1.65;
    font-size:14px;
}

.capabilities{
    display:grid;
    gap:8px;
    margin-top:15px;
}

.capabilities button{
    text-align:left;
    color:#d9ebe0;

    display:flex;
    align-items:center;
    gap:11px;

    padding:12px 13px;

    background:transparent;
    border:1px solid transparent;
    border-radius:12px;
}

.capabilities button:hover{
    background:var(--surface2);
    border-color:var(--line);
}

.capabilities span{
    color:#668174;
    font-size:10px;
}

.conversation-panel{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.conversation-head{
    padding:29px 30px 20px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-bottom:1px solid var(--line-soft);
}

.conversation-head h2{
    margin:7px 0 0;
    font-size:24px;
    letter-spacing:-.035em;
}

.ghost-button{
    color:#cfe2d6;
    background:transparent;

    border:1px solid var(--line);
    border-radius:11px;

    padding:9px 12px;
}

.messages{
    flex:1;
    min-height:430px;

    padding:30px;

    overflow:auto;
}

.message{
    width:min(780px,100%);
    margin:0 auto 18px;

    display:flex;
    align-items:flex-start;
    gap:12px;
}

.user-message{
    justify-content:flex-end;
}

.message-avatar{
    flex:none;

    width:34px;
    height:34px;

    border-radius:11px;

    display:grid;
    place-items:center;

    font-size:12px;
    font-weight:950;

    color:#051108;
    background:var(--green);
}

.bubble{
    max-width:82%;

    padding:15px 17px;

    border:1px solid var(--line-soft);
    border-radius:
        4px
        18px
        18px
        18px;

    background:var(--surface2);
}

.user-message .bubble{
    background:#173826;

    border-radius:
        18px
        4px
        18px
        18px;
}

.bubble strong{
    color:var(--green2);
    font-size:11px;
}

.bubble p{
    margin:6px 0 0;

    color:#e3f0e8;
    line-height:1.7;

    white-space:pre-wrap;
}

.thinking{
    width:min(780px,calc(100% - 60px));
    margin:0 auto 10px;

    color:var(--muted);
    font-size:12px;
}

.thinking span{
    width:5px;
    height:5px;

    display:inline-block;
    margin-right:3px;

    border-radius:50%;
    background:var(--green);
}

.composer-wrap{
    padding:0 30px 26px;
}

.context-strip{
    width:min(780px,100%);
    margin:auto auto 9px;

    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

.context-strip button{
    padding:7px 10px;

    color:var(--muted2);
    font-size:11px;

    background:transparent;
    border:1px solid var(--line);
    border-radius:999px;
}

.composer{
    width:min(780px,100%);
    margin:auto;

    padding:8px;

    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;

    border:1px solid #2d5943;
    border-radius:20px;

    background:#0c1a13;

    box-shadow:
        0 20px 55px rgba(0,0,0,.28);
}

.composer textarea{
    resize:none;

    min-height:50px;
    max-height:170px;

    padding:13px;

    color:var(--text);
    line-height:1.5;

    background:transparent;
    border:0;
    outline:0;
}

.composer textarea::placeholder{
    color:#647e70;
}

#sendButton{
    align-self:end;

    width:46px;
    height:46px;

    border:0;
    border-radius:14px;

    color:#031008;
    font-size:22px;

    background:var(--green);
}

#sendButton:disabled{
    opacity:.5;
}

.composer-note{
    width:min(780px,100%);
    margin:8px auto 0;

    text-align:center;

    color:#617b6d;
    font-size:10px;
}

.context-card,
.intelligence-card,
.privacy-card{
    padding:17px;

    border:1px solid var(--line);
    border-radius:20px;

    background:var(--surface);

    margin-bottom:13px;
}

.context-row{
    padding:12px 0;

    display:flex;
    justify-content:space-between;
    gap:10px;

    border-bottom:1px solid var(--line-soft);
}

.context-row:last-child{
    border-bottom:0;
}

.context-row span{
    color:var(--muted);
    font-size:12px;
}

.context-row strong{
    font-size:12px;
    text-align:right;
}

.intelligence-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:15px;
}

.intelligence-tags span{
    padding:7px 9px;

    color:#bad2c3;
    font-size:10px;

    background:#11241a;
    border:1px solid var(--line);
    border-radius:999px;
}

.privacy-card p{
    color:var(--muted);
    line-height:1.6;
    font-size:12px;
}

@media(max-width:1180px){
    .workspace{
        grid-template-columns:260px 1fr;
    }

    .right-panel{
        display:none;
    }
}

@media(max-width:820px){
    .workspace{
        display:block;
    }

    .left-panel{
        border-right:0;
        border-bottom:1px solid var(--line-soft);
    }

    .assistant-card{
        min-height:auto;
        display:grid;
        grid-template-columns:150px 1fr;
        gap:20px;
        align-items:center;
    }

    .capabilities{
        grid-template-columns:repeat(3,1fr);
    }

    .persona{
        min-height:160px;
    }
}

@media(max-width:620px){
    .topbar{
        height:68px;
        padding:0 13px;
    }

    .system-status{
        display:none;
    }

    .workspace{
        min-height:calc(100vh - 68px);
    }

    .left-panel{
        padding:14px;
    }

    .assistant-card{
        display:block;
        padding:18px;
    }

    .persona{
        min-height:145px;
    }

    .persona-copy{
        text-align:center;
    }

    .capabilities{
        display:none;
    }

    .conversation-head{
        padding:20px 15px;
    }

    .conversation-head h2{
        font-size:19px;
    }

    .messages{
        padding:20px 14px;
        min-height:420px;
    }

    .bubble{
        max-width:90%;
    }

    .composer-wrap{
        padding:0 12px 18px;
    }

    .context-strip{
        overflow:auto;
        flex-wrap:nowrap;
    }

    .context-strip button{
        flex:none;
    }
}

.photo-modal[hidden]{
    display:none;
}

.photo-modal{
    position:fixed;
    inset:0;
    z-index:1000;
}

.photo-backdrop{
    position:absolute;
    inset:0;
    background:rgba(1,8,5,.76);
    backdrop-filter:blur(8px);
}

.photo-sheet{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);

    width:min(620px,calc(100% - 28px));

    padding:22px;

    border:1px solid var(--line);
    border-radius:26px;

    background:#0b1811;

    box-shadow:
        0 40px 120px rgba(0,0,0,.55);
}

.photo-sheet-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;

    margin-bottom:18px;
}

.photo-sheet-head small{
    color:var(--green2);
    font-size:10px;
    font-weight:900;
    letter-spacing:.14em;
}

.photo-sheet-head h3{
    margin:5px 0 0;
    font-size:22px;
}

.photo-close{
    width:38px;
    height:38px;

    border:1px solid var(--line);
    border-radius:12px;

    color:var(--text);
    background:transparent;

    font-size:24px;
}

.photo-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.photo-option{
    min-height:110px;

    padding:18px;

    text-align:left;

    border:1px solid var(--line);
    border-radius:18px;

    background:var(--surface2);
    color:var(--text);
}

.photo-option:hover{
    border-color:#3e7f5e;
    background:#12281d;
}

.photo-option strong{
    display:block;
    margin-bottom:8px;
    font-size:15px;
}

.photo-option span{
    color:var(--muted);
    font-size:12px;
}

.photo-preview-area{
    margin-top:14px;
}

.photo-preview-area img{
    display:block;

    width:100%;
    max-height:390px;

    object-fit:contain;

    border-radius:18px;

    background:#06100b;
    border:1px solid var(--line);
}

.photo-preview-meta{
    display:flex;
    justify-content:space-between;
    gap:12px;

    margin:12px 2px;

    font-size:12px;
}

.photo-preview-meta span{
    color:var(--muted);
}

.photo-preview-buttons{
    display:grid;
    grid-template-columns:140px 1fr;
    gap:8px;
}

.secondary-photo-button,
.analyse-photo-button{
    min-height:46px;

    border-radius:13px;
    font-weight:800;
}

.secondary-photo-button{
    color:var(--text);
    border:1px solid var(--line);
    background:transparent;
}

.analyse-photo-button{
    color:#031008;
    border:0;
    background:var(--green);
}

@media(max-width:620px){
    .photo-sheet{
        top:auto;
        bottom:0;
        transform:translateX(-50%);

        width:100%;

        border-radius:24px 24px 0 0;
    }

    .photo-actions{
        grid-template-columns:1fr;
    }
}

.photo-concern{
    margin:14px 0;
}

.photo-concern label{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    margin-bottom:8px;

    color:var(--text);
    font-size:12px;
    font-weight:800;
}

.photo-concern label span{
    color:var(--muted);
    font-size:10px;
    font-weight:500;
}

.photo-concern textarea{
    width:100%;
    min-height:84px;

    resize:vertical;

    padding:12px 13px;

    color:var(--text);
    background:#08140e;

    border:1px solid var(--line);
    border-radius:14px;

    outline:none;
}

.photo-concern textarea:focus{
    border-color:#3e7f5e;
}

.photo-suggestions{
    display:flex;
    flex-wrap:wrap;
    gap:6px;

    margin-top:8px;
}

.photo-suggestions button{
    padding:7px 10px;

    color:var(--muted2);

    background:#102219;
    border:1px solid var(--line);
    border-radius:999px;

    font-size:10px;
}

.photo-suggestions button:hover{
    color:var(--text);
    border-color:#3e7f5e;
}

.image-message{
    margin-top:8px;
}

.image-bubble{
    padding:8px;
    overflow:hidden;
}

.chat-image-preview{
    display:block;

    width:min(420px,100%);
    max-height:420px;

    object-fit:contain;

    border-radius:14px;

    background:#06100b;
}

.scan-inline-meta{
    padding:10px 6px 4px;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.scan-inline-meta > div{
    display:flex;
    align-items:center;
    gap:9px;
}

.scan-inline-meta strong{
    color:#eaf7ee;
}

.scan-inline-meta small{
    color:var(--muted);
    font-size:10px;
}

.scan-live-status{
    padding:4px 7px;

    border:1px solid var(--line);
    border-radius:999px;

    color:var(--green2);
    font-size:9px;
    text-transform:uppercase;
}

/* =========================================================
   UNNA ACNOVA PUBLIC THEME
   ========================================================= */

.public-theme-toggle {
    min-height: 40px;
    padding: 8px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--panel);
    color: var(--text);
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
}

.public-theme-toggle:hover {
    transform: translateY(-1px);
}

html[data-theme="light"] {
    --bg: #f3f7f1;
    --panel: #ffffff;
    --panel2: #edf5ef;
    --line: #bdd4c4;
    --text: #10291b;
    --muted: #526f5e;
}

html[data-theme="light"] body {
    background:
        radial-gradient(
            circle at 85% 0%,
            rgba(34,197,94,.07),
            transparent 30%
        ),
        #f3f7f1;
    color: #10291b;
}

html[data-theme="light"] header,
html[data-theme="light"] aside {
    background: #ffffff;
}

html[data-theme="light"] .message,
html[data-theme="light"] .assistant-message,
html[data-theme="light"] .context-card {
    background: #ffffff;
    color: #10291b;
    border-color: #c4d8ca;
}

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background: #ffffff;
    color: #10291b;
    border-color: #b9d0c0;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #708778;
}



/* =========================================================
   UNNA ACNOVA PUBLIC — LIGHT MODE READABILITY
   Authoritative public light-theme refinement
   ========================================================= */

html[data-theme="light"] {
    --bg:#f4f8f5;
    --surface:#ffffff;
    --surface2:#f0f6f2;
    --surface3:#e8f2ec;

    --line:#bfd3c6;
    --line-soft:rgba(13,61,38,.12);

    --green:#16b85b;
    --green2:#087a3b;

    --text:#092417;
    --muted:#526b5d;
    --muted2:#294c39;
}


/* PAGE + STRUCTURE */

html[data-theme="light"] body {
    color:var(--text);
    background:
        radial-gradient(
            circle at 15% -10%,
            rgba(22,184,91,.09),
            transparent 30%
        ),
        var(--bg);
}

html[data-theme="light"] .topbar {
    background:rgba(255,255,255,.94);
    border-bottom-color:var(--line-soft);
}

html[data-theme="light"] .left-panel {
    border-right-color:var(--line-soft);
}

html[data-theme="light"] .right-panel {
    border-left-color:var(--line-soft);
}


/* BRAND */

html[data-theme="light"] .brand {
    color:var(--text);
}

html[data-theme="light"] .brand strong {
    color:#071f14;
}

html[data-theme="light"] .brand small {
    color:#4b6657;
}


/* ONLINE STATUS */

html[data-theme="light"] .system-status {
    color:#33714e;
}

html[data-theme="light"] .system-status i {
    background:#20c866;
}


/* TOP CONTROLS */

html[data-theme="light"] .public-theme-toggle,
html[data-theme="light"] #languageSelect {
    color:#102d1e;
    background:#ffffff;
    border-color:#b9d0c1;
}

html[data-theme="light"] .public-theme-toggle:hover,
html[data-theme="light"] #languageSelect:hover {
    border-color:#6fa987;
}


/* UNNA PERSONA CARD */

html[data-theme="light"] .assistant-card {
    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(39,220,114,.13),
            transparent 37%
        ),
        #ffffff;

    border-color:#bdd4c5;
    box-shadow:0 14px 40px rgba(20,65,40,.06);
}

html[data-theme="light"] .persona-copy h1 {
    color:#092719;
}

html[data-theme="light"] .persona-copy p {
    color:#385b48;
}

html[data-theme="light"] .persona-copy small,
html[data-theme="light"] .context-card small,
html[data-theme="light"] .intelligence-card small,
html[data-theme="light"] .privacy-card small,
html[data-theme="light"] .conversation-head small {
    color:#079447;
}

html[data-theme="light"] .live-pill {
    color:#078b43;
}


/* LEFT CAPABILITIES */

html[data-theme="light"] .capabilities button {
    color:#244b37;
}

html[data-theme="light"] .capabilities button span {
    color:#698274;
}

html[data-theme="light"] .capabilities button:hover {
    color:#08783c;
    background:#eaf6ee;
}


/* CONVERSATION */

html[data-theme="light"] .conversation-panel {
    color:var(--text);
}

html[data-theme="light"] .conversation-head h2 {
    color:#082719;
}

html[data-theme="light"] .messages {
    color:#102d1e;
}


/* UNNA MESSAGE */

html[data-theme="light"] .message .bubble,
html[data-theme="light"] .unna-message .bubble {
    background:#ffffff;
    color:#143425;
    border:1px solid #c5d9cc;
    box-shadow:0 12px 34px rgba(14,59,35,.06);
}

html[data-theme="light"] .message .bubble strong,
html[data-theme="light"] .unna-message .bubble strong {
    color:#078d43;
}

html[data-theme="light"] .message .bubble p,
html[data-theme="light"] .unna-message .bubble p {
    color:#173d29;
}


/* MESSAGE AVATAR */

html[data-theme="light"] .message-avatar {
    color:#052313;
}


/* RIGHT CONTEXT CARDS */

html[data-theme="light"] .context-card,
html[data-theme="light"] .intelligence-card,
html[data-theme="light"] .privacy-card {
    background:#ffffff;
    color:#143425;
    border-color:#bfd5c7;
    box-shadow:0 10px 30px rgba(15,62,37,.05);
}

html[data-theme="light"] .context-row {
    color:#466353;
}

html[data-theme="light"] .context-row span {
    color:#526d5d;
}

html[data-theme="light"] .context-row strong {
    color:#082719;
}


/* INTELLIGENCE TAGS / CHIPS */

html[data-theme="light"] .intelligence-card button,
html[data-theme="light"] .intelligence-card span {
    color:#21553a;
    border-color:#9fc5ae;
}


/* CONTEXT STRIP */

html[data-theme="light"] .context-strip button {
    color:#3e6650;
    background:#f7faf8;
    border-color:#bdd4c5;
}

html[data-theme="light"] .context-strip button:hover {
    color:#08783c;
    background:#eaf6ee;
    border-color:#7cb693;
}


/* COMPOSER */

html[data-theme="light"] .composer {
    background:#ffffff;
    border-color:#86ae96;
    box-shadow:0 16px 42px rgba(11,64,36,.10);
}

html[data-theme="light"] .composer textarea {
    background:#ffffff;
    color:#102f20;
}

html[data-theme="light"] .composer textarea::placeholder {
    color:#70877a;
    opacity:1;
}

html[data-theme="light"] .composer-note {
    color:#647d6f;
}


/* SECONDARY BUTTON */

html[data-theme="light"] .ghost-button {
    color:#315a43;
    border-color:#b8cfc0;
    background:#f8fbf9;
}

html[data-theme="light"] .ghost-button:hover {
    color:#08783c;
    background:#eaf6ee;
}


/* THINKING */

html[data-theme="light"] .thinking {
    color:#3d6650;
}


/* SELECT OPTIONS */

html[data-theme="light"] #languageSelect option {
    color:#102d1e;
    background:#ffffff;
}


/* LINKS / GENERIC MUTED TEXT */

html[data-theme="light"] a {
    color:inherit;
}


/* ACCESSIBILITY */

html[data-theme="light"] button:focus-visible,
html[data-theme="light"] textarea:focus-visible,
html[data-theme="light"] select:focus-visible {
    outline:3px solid rgba(22,184,91,.22);
    outline-offset:2px;
}


/* MOBILE LIGHT SURFACES */

@media (max-width: 980px) {
    html[data-theme="light"] .left-panel,
    html[data-theme="light"] .right-panel,
    html[data-theme="light"] .conversation-panel {
        background:var(--bg);
    }
}


/* =========================================================
   UNNA FOR ACNOVA
   PREMIUM AGRICULTURAL INTELLIGENCE UX
   ========================================================= */


/* ---------- SHARED VISUAL LANGUAGE ---------- */

:root{
    --unna-green:#20c96b;
    --unna-green-dark:#08713c;
    --unna-lime:#8deb7a;
    --unna-cyan:#1db8a7;
    --unna-blue:#3b82f6;
    --unna-amber:#f59e0b;
    --unna-red:#ef4444;

    --radius-sm:12px;
    --radius-md:18px;
    --radius-lg:24px;

    --shadow-soft:
        0 14px 40px rgba(0,0,0,.10);

    --shadow-green:
        0 18px 48px rgba(32,201,107,.13);
}


/* ---------- WORKSPACE ---------- */

.workspace{
    gap:0;
}

.left-panel,
.right-panel{
    position:relative;
}

.conversation-panel{
    position:relative;
    overflow:hidden;
}

.conversation-panel::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
        radial-gradient(
            circle at 55% 0%,
            rgba(39,220,114,.08),
            transparent 34%
        );
}


/* ---------- LEFT INTELLIGENCE PROFILE ---------- */

.assistant-card{
    position:relative;
    overflow:hidden;
}

.assistant-card::after{
    content:"";
    position:absolute;

    width:130px;
    height:130px;

    right:-55px;
    bottom:-55px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(39,220,114,.16),
            transparent 70%
        );
}

.persona-core{
    position:relative;
}

.persona-core::after{
    content:"";

    position:absolute;
    inset:-12px;

    border:1px solid rgba(39,220,114,.22);
    border-radius:50%;

    animation:
        unnaPulse 3s ease-in-out infinite;
}

@keyframes unnaPulse{
    0%,100%{
        transform:scale(.94);
        opacity:.35;
    }

    50%{
        transform:scale(1.08);
        opacity:.8;
    }
}

.persona-copy h1{
    font-weight:850;
}

.persona-copy p{
    line-height:1.7;
}


/* ---------- CAPABILITIES ---------- */

.capabilities{
    display:grid;
    gap:6px;
    margin-top:18px;
}

.capabilities button{
    min-height:46px;

    display:flex;
    align-items:center;
    gap:12px;

    padding:0 12px;

    border:1px solid transparent;
    border-radius:12px;

    color:var(--muted2);
    background:transparent;

    text-align:left;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.capabilities button span{
    width:25px;

    font-size:9px;
    font-weight:850;
    letter-spacing:.08em;

    color:var(--muted);
}

.capabilities button:hover{
    transform:translateX(4px);

    border-color:var(--line);

    background:
        linear-gradient(
            90deg,
            rgba(39,220,114,.10),
            transparent
        );

    color:var(--text);
}


/* ---------- CONVERSATION HEADER ---------- */

.conversation-head{
    min-height:94px;

    position:relative;
    z-index:1;

    padding:24px 28px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-bottom:1px solid var(--line-soft);
}

.conversation-head h2{
    margin:7px 0 0;

    font-size:
        clamp(23px,2vw,30px);

    letter-spacing:-.035em;
}


/* ---------- MESSAGE CANVAS ---------- */

.messages{
    position:relative;
    z-index:1;

    width:100%;
    max-width:860px;

    margin:0 auto;

    padding:
        36px
        28px
        180px;
}

.message{
    margin-bottom:20px;
}

.unna-message{
    align-items:flex-start;
}

.unna-message .bubble{
    width:min(690px,88%);
    max-width:none;

    padding:22px 24px;

    border-radius:
        8px
        22px
        22px
        22px;

    line-height:1.7;
}

.unna-message .bubble strong{
    display:block;

    margin-bottom:10px;

    font-size:10px;
    font-weight:900;

    letter-spacing:.08em;
}

.unna-message .bubble p{
    margin:0;

    font-size:15px;
    line-height:1.75;
}

.message-avatar{
    flex:0 0 auto;

    width:36px;
    height:36px;

    display:grid;
    place-items:center;

    border-radius:11px;

    font-weight:900;

    background:
        linear-gradient(
            145deg,
            #86f6ad,
            var(--green)
        );

    box-shadow:
        0 9px 25px rgba(39,220,114,.18);
}


/* ---------- RIGHT INTELLIGENCE COLUMN ---------- */

.right-panel{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.context-card,
.intelligence-card,
.privacy-card{
    border-radius:18px;
}

.context-card{
    position:relative;
    overflow:hidden;
}

.context-card::before{
    content:"";

    position:absolute;
    left:0;
    top:18px;
    bottom:18px;

    width:3px;

    border-radius:99px;

    background:
        linear-gradient(
            var(--green),
            var(--unna-cyan)
        );
}

.context-row{
    min-height:50px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.context-row + .context-row{
    border-top:1px solid var(--line-soft);
}

.context-row span{
    font-size:11px;
}

.context-row strong{
    max-width:145px;

    text-align:right;

    font-size:11px;
    font-weight:800;
}


/* ---------- INTELLIGENCE CAPABILITY PILLS ---------- */

.intelligence-card{
    position:relative;
}

.intelligence-card > div{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

.intelligence-card button,
.intelligence-card span{
    border-radius:999px;

    padding:7px 9px;

    font-size:9px;

    transition:
        transform .18s ease,
        border-color .18s ease;
}

.intelligence-card button:hover,
.intelligence-card span:hover{
    transform:translateY(-1px);
}


/* ---------- COMPOSER AS PRIMARY ACTION ---------- */

.composer-wrap{
    position:absolute;

    left:50%;
    bottom:18px;

    z-index:20;

    width:min(760px,calc(100% - 48px));

    transform:translateX(-50%);
}

.context-strip{
    margin-bottom:8px;

    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.context-strip button{
    min-height:32px;

    padding:6px 11px;

    border-radius:999px;

    font-size:9px;
    font-weight:700;
}

.composer{
    padding:6px 7px 6px 18px;

    display:flex;
    align-items:flex-end;
    gap:8px;

    border-radius:22px;
}

.composer textarea{
    min-height:46px;
    max-height:160px;

    padding:12px 0;

    border:0 !important;
    outline:0 !important;

    resize:none;
}

#sendButton{
    flex:0 0 auto;

    width:44px;
    height:44px;

    display:grid;
    place-items:center;

    border:0;
    border-radius:15px;

    color:#04150b;

    background:
        linear-gradient(
            145deg,
            #74f4a2,
            var(--green)
        );

    font-size:18px;
    font-weight:900;

    box-shadow:
        0 10px 26px rgba(39,220,114,.24);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

#sendButton:hover{
    transform:translateY(-2px);

    box-shadow:
        0 14px 34px rgba(39,220,114,.30);
}

.composer-note{
    margin-top:6px;

    text-align:center;

    font-size:8px;
}


/* =========================================================
   LIGHT MODE — PREMIUM
   ========================================================= */

html[data-theme="light"] body{
    background:
        radial-gradient(
            circle at 56% -10%,
            rgba(22,184,91,.10),
            transparent 34%
        ),
        #f2f7f3;
}

html[data-theme="light"] .conversation-panel{
    background:
        linear-gradient(
            180deg,
            #f1f8f3 0%,
            #f7faf8 42%,
            #f4f8f5 100%
        );
}

html[data-theme="light"] .left-panel,
html[data-theme="light"] .right-panel{
    background:#ffffff;
}

html[data-theme="light"] .assistant-card{
    background:
        radial-gradient(
            circle at 50% 17%,
            rgba(27,207,104,.18),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f5fbf7
        );

    border-color:#b9d9c4;

    box-shadow:
        0 16px 42px rgba(16,80,45,.08);
}

html[data-theme="light"] .persona-copy h1{
    color:#09291a;
}

html[data-theme="light"] .persona-copy p{
    color:#365e48;
}

html[data-theme="light"] .capabilities button{
    color:#28513b;
}

html[data-theme="light"] .capabilities button:hover{
    border-color:#a8cfb6;

    background:
        linear-gradient(
            90deg,
            #e6f7ec,
            #f8fbf9
        );
}

html[data-theme="light"] .conversation-head{
    background:
        rgba(245,250,247,.78);

    backdrop-filter:blur(16px);
}

html[data-theme="light"] .unna-message .bubble{
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7fbf8
        );

    border-color:#bcd7c6;

    box-shadow:
        0 16px 40px rgba(21,75,45,.08);
}

html[data-theme="light"] .context-card,
html[data-theme="light"] .intelligence-card,
html[data-theme="light"] .privacy-card{
    background:
        linear-gradient(
            150deg,
            #ffffff,
            #f7fbf8
        );

    border-color:#bcd8c6;

    box-shadow:
        0 12px 34px rgba(15,70,40,.065);
}

html[data-theme="light"] .intelligence-card button,
html[data-theme="light"] .intelligence-card span{
    color:#125c35;

    border:1px solid #a6ccb4;

    background:#edf8f1;
}

html[data-theme="light"] .composer{
    background:
        rgba(255,255,255,.96);

    border:1px solid #72b58b;

    box-shadow:
        0 20px 56px rgba(12,77,42,.15);

    backdrop-filter:blur(18px);
}

html[data-theme="light"] .context-strip button{
    color:#235b3b;

    background:
        rgba(255,255,255,.92);

    border-color:#a8cdb5;

    box-shadow:
        0 5px 15px rgba(18,70,43,.04);
}

html[data-theme="light"] .ghost-button{
    color:#164b31;

    background:#ffffff;

    border-color:#b2d0bc;
}


/* =========================================================
   DARK MODE — PREMIUM
   ========================================================= */

html:not([data-theme="light"]) .conversation-panel{
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(32,201,107,.075),
            transparent 30%
        ),
        #06110c;
}

html:not([data-theme="light"]) .assistant-card{
    box-shadow:
        0 18px 50px rgba(0,0,0,.18);
}

html:not([data-theme="light"]) .unna-message .bubble{
    background:
        linear-gradient(
            145deg,
            #10251a,
            #0d1d15
        );

    box-shadow:
        0 18px 45px rgba(0,0,0,.18);
}

html:not([data-theme="light"]) .context-card,
html:not([data-theme="light"]) .intelligence-card,
html:not([data-theme="light"]) .privacy-card{
    background:
        linear-gradient(
            145deg,
            #0d2017,
            #09170f
        );
}


/* ---------- RESPONSIVE ---------- */

@media(max-width:1180px){

    .workspace{
        grid-template-columns:
            250px
            minmax(420px,1fr);
    }

    .right-panel{
        display:none;
    }
}

@media(max-width:760px){

    .workspace{
        display:block;
    }

    .left-panel{
        display:none;
    }

    .conversation-panel{
        min-height:
            calc(100vh - 76px);
    }

    .messages{
        padding:
            26px
            16px
            170px;
    }

    .conversation-head{
        padding:
            18px
            16px;
    }

    .composer-wrap{
        width:
            calc(100% - 24px);

        bottom:10px;
    }
}


/* Never render hidden operational modals */
.context-modal[hidden]{
    display:none !important;
}

.context-modal{
    position:fixed;
    inset:0;
    z-index:5000;

    display:grid;
    place-items:center;

    padding:20px;
}

.context-modal-backdrop{
    position:absolute;
    inset:0;

    background:rgba(3,18,11,.58);
    backdrop-filter:blur(8px);
}

.context-modal-card{
    position:relative;
    z-index:1;

    width:min(720px,calc(100vw - 32px));
    max-height:88vh;
    overflow:auto;

    padding:22px;

    border:1px solid var(--line);
    border-radius:22px;

    background:var(--surface);
    color:var(--text);

    box-shadow:0 28px 80px rgba(0,0,0,.28);
}

.context-modal-card header,
.context-modal-card footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.context-modal-card header{
    margin-bottom:18px;
}

.context-modal-card header h3{
    margin:5px 0 0;
}

.context-modal-card header > button{
    width:36px;
    height:36px;

    border:1px solid var(--line);
    border-radius:11px;

    background:var(--surface2);
    color:var(--text);

    font-size:20px;
}

.context-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.context-form-grid label{
    display:grid;
    gap:6px;

    color:var(--muted);
    font-size:11px;
}

.context-form-grid input,
.context-form-grid select{
    min-height:43px;
    padding:10px 12px;

    border:1px solid var(--line);
    border-radius:11px;

    background:var(--surface2);
    color:var(--text);
}

.context-modal-card footer{
    margin-top:18px;
}

.primary-context-action{
    min-height:42px;
    padding:9px 15px;

    border:0;
    border-radius:11px;

    background:var(--green);
    color:#04170c;

    font-weight:850;
}

.location-live-button{
    min-height:42px;
    padding:9px 13px;

    border:1px solid var(--line);
    border-radius:11px;

    background:var(--surface2);
    color:var(--text);
}

.location-actions{
    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:15px;
}

.context-helper{
    color:var(--muted);
    line-height:1.6;
}

.context-active{
    border-color:var(--green) !important;
    background:rgba(32,201,107,.10) !important;
}

@media(max-width:650px){
    .context-form-grid{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   UNNA ACNOVA — COMPOSER FINAL ALIGNMENT
   ========================================================= */

.composer {
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;

    width: 100% !important;
    min-height: 58px !important;

    padding: 7px 7px 7px 16px !important;
    gap: 10px !important;

    box-sizing: border-box !important;
}

.composer textarea {
    display: block !important;
    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;
    min-height: 42px !important;
    max-height: 150px !important;

    margin: 0 !important;
    padding: 10px 4px !important;

    border: 0 !important;
    outline: 0 !important;
    resize: none !important;

    box-sizing: border-box !important;
}

.composer button,
.composer button[type="submit"] {
    position: static !important;

    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    align-self: flex-end !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 14px !important;
}

/* Keep operational context actions above composer */
.context-strip {
    width: 100%;
    box-sizing: border-box;
}

/* Mobile */
@media (max-width: 680px) {
    .composer {
        min-height: 54px !important;
        padding: 6px 6px 6px 12px !important;
    }

    .composer button,
    .composer button[type="submit"] {
        flex-basis: 42px !important;
        width: 42px !important;
        height: 42px !important;
    }
}