/* ==========================================================================
   ENGINE INT — UI 2026 UPGRADE LAYER  (Batch A + B + C + D + E)
   --------------------------------------------------------------------------
   This file is ADDITIVE. It loads AFTER style.css and only refines
   presentation. No existing class is removed, no logic depends on it.
   Removing this one <link> returns the app to the previous look.
   ========================================================================== */

/* ---------- A. DESIGN TOKENS ------------------------------------------- */

:root{
    /* spacing scale */
    --u1:4px;  --u2:8px;  --u3:12px; --u4:16px;
    --u5:20px; --u6:24px; --u7:32px; --u8:40px;

    /* radius scale */
    --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;

    /* elevation */
    --e1:0 1px 2px rgba(43,29,21,.06);
    --e2:0 2px 6px rgba(43,29,21,.07), 0 1px 2px rgba(43,29,21,.05);
    --e3:0 8px 24px rgba(43,29,21,.10), 0 2px 6px rgba(43,29,21,.06);
    --e4:0 20px 56px rgba(43,29,21,.18), 0 4px 12px rgba(43,29,21,.08);

    /* semantic status */
    --st-ok:#2f8b67;      --st-ok-bg:#e8f4ee;
    --st-warn:#b8801f;    --st-warn-bg:#fbf1de;
    --st-risk:#b34d46;    --st-risk-bg:#fbeceb;
    --st-idle:#7b7168;    --st-idle-bg:#f0ece7;
    --st-info:#2f6ba3;    --st-info-bg:#e9f1f8;

    /* motion */
    --t-fast:140ms cubic-bezier(.4,0,.2,1);
    --t-mid:220ms cubic-bezier(.4,0,.2,1);
    --t-slow:320ms cubic-bezier(.16,1,.3,1);
}

@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
        animation-duration:.001ms !important;
        transition-duration:.001ms !important;
    }
}

/* ---------- A. TYPOGRAPHY ---------------------------------------------- */

body{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    letter-spacing:-.005em;
}

.page h1{ font-size:22px; line-height:1.2; font-weight:700; letter-spacing:-.02em; }
.page h2{ font-size:17px; line-height:1.25; font-weight:650; letter-spacing:-.015em; }
.page h3{ font-size:14px; line-height:1.3; font-weight:650; }

.panel-head strong,
.panel-head b{
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.muted, small{ color:var(--muted); }

/* ---------- A. CARDS / PANELS ------------------------------------------ */

.panel{
    border-radius:var(--r-lg);
    box-shadow:var(--e2);
    border:1px solid var(--line);
    transition:box-shadow var(--t-mid), transform var(--t-mid), border-color var(--t-mid);
}

.panel:hover{ box-shadow:var(--e3); }

.panel .panel{ box-shadow:none; }          /* avoid nested card depth stacking */

.panel-head{
    padding:var(--u4) var(--u5);
    border-bottom:1px solid var(--line);
    gap:var(--u3);
}

/* ---------- A. BUTTONS -------------------------------------------------- */

.btn-primary,
.btn-secondary,
.text-btn,
button.ghost{
    border-radius:var(--r-md);
    transition:background var(--t-fast), color var(--t-fast),
               box-shadow var(--t-fast), transform var(--t-fast),
               border-color var(--t-fast);
}

.btn-primary{ box-shadow:var(--e1); }
.btn-primary:hover{ box-shadow:var(--e2); transform:translateY(-1px); }
.btn-primary:active{ transform:translateY(0) scale(.985); box-shadow:none; }

.btn-secondary:hover{ transform:translateY(-1px); }
.btn-secondary:active{ transform:translateY(0) scale(.985); }

.text-btn:hover{ text-decoration:underline; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
    outline:2px solid var(--accent2);
    outline-offset:2px;
    border-radius:var(--r-sm);
}

/* ---------- A. FORMS ---------------------------------------------------- */

.modal-form input,
.modal-form select,
.modal-form textarea,
.page input,
.page select,
.page textarea{
    border-radius:var(--r-md);
    transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.modal-form input:focus,
.modal-form select:focus,
.modal-form textarea:focus,
.page input:focus,
.page select:focus,
.page textarea:focus{
    border-color:var(--accent2);
    box-shadow:0 0 0 3px rgba(183,139,103,.18);
    outline:none;
}

.modal-form label{ gap:var(--u1); }

.modal-form label.req > span:first-child::after,
.modal-form label.required::after{
    content:" *";
    color:var(--st-risk);
    font-weight:700;
}

.field-error{
    display:block;
    margin-top:var(--u1);
    font-size:11px;
    font-weight:600;
    color:var(--st-risk);
}

input.invalid, select.invalid, textarea.invalid{
    border-color:var(--st-risk) !important;
    background:var(--st-risk-bg);
}

/* ---------- B. SIDEBAR / NAVIGATION ------------------------------------ */

.sidebar{
    transition:width var(--t-slow);
    overflow-x:hidden;
}

.sidebar nav{
    display:flex;
    flex-direction:column;
    gap:2px;
    overflow-y:auto;
    padding-right:2px;
}

.sidebar nav button{
    display:flex;
    align-items:center;
    gap:10px;
    border-radius:var(--r-md);
    padding:9px 11px;
    position:relative;
    transition:background var(--t-fast), color var(--t-fast), padding var(--t-fast);
}

.sidebar nav button .nav-ico{
    width:18px;
    flex:0 0 18px;
    text-align:center;
    font-size:13px;
    opacity:.75;
}

.sidebar nav button:hover{ background:rgba(255,255,255,.07); }

.sidebar nav button.active{
    background:rgba(255,255,255,.12);
    font-weight:650;
}

.sidebar nav button.active::before{
    content:"";
    position:absolute;
    left:-14px;
    top:8px;
    bottom:8px;
    width:3px;
    border-radius:0 3px 3px 0;
    background:var(--accent2);
}

/* nav group headings injected by ui2026.js */
.nav-group{
    font-size:9px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#a99589;
    padding:14px 11px 5px;
    font-weight:700;
    user-select:none;
}

.side-collapse{
    margin:var(--u2) 0 0;
    background:transparent;
    border:1px solid rgba(255,255,255,.14);
    color:#cdbcb1;
    border-radius:var(--r-md);
    padding:6px 8px;
    font-size:10px;
    letter-spacing:.1em;
}
.side-collapse:hover{ background:rgba(255,255,255,.08); color:#fff; }

/* collapsed rail mode */
body.nav-collapsed .sidebar{ width:66px; padding-left:9px; padding-right:9px; }
body.nav-collapsed .sidebar .side-brand > div,
body.nav-collapsed .sidebar .workspace-label,
body.nav-collapsed .sidebar .nav-group,
body.nav-collapsed .sidebar .build-stamp,
body.nav-collapsed .sidebar .user-chip,
body.nav-collapsed .sidebar nav button .nav-label,
body.nav-collapsed .sidebar .side-bottom button:not(.side-collapse){ display:none; }
body.nav-collapsed .sidebar nav button{ justify-content:center; padding:10px 0; }
body.nav-collapsed .sidebar nav button.active::before{ left:-9px; }
body.nav-collapsed .main{ margin-left:66px; }
body.nav-collapsed .sidebar .side-bottom .side-collapse{ display:block !important; width:100%; text-align:center; padding:8px 0; font-size:13px; }
body.nav-collapsed .sidebar .side-bottom{ display:block !important; }

/* ---------- B. TOPBAR / PAGE HEADER ------------------------------------ */

.topbar{
    backdrop-filter:saturate(140%) blur(8px);
    box-shadow:var(--e1);
}

.topbar .crumb{
    display:flex;
    align-items:center;
    gap:var(--u2);
    font-size:12px;
    color:var(--muted);
}

.topbar .crumb span::after{
    content:"›";
    margin-left:var(--u2);
    opacity:.5;
}

.topbar .crumb b{ color:var(--ink); font-weight:650; }

/* injected contextual subtitle */
.page-context{
    font-size:11px;
    color:var(--muted);
    margin-left:var(--u2);
    padding-left:var(--u2);
    border-left:1px solid var(--line);
}

/* ---------- E. KPI CARDS ----------------------------------------------- */

.kpis{ gap:var(--u3); }

.kpis > div{
    border-radius:var(--r-lg);
    box-shadow:var(--e1);
    padding:var(--u4) var(--u5);
    position:relative;
    overflow:hidden;
    transition:transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
}

.kpis > div[role="button"]{ cursor:pointer; }

.kpis > div[role="button"]:hover{
    transform:translateY(-2px);
    box-shadow:var(--e3);
    border-color:var(--accent2);
}

.kpis > div::after{
    content:"";
    position:absolute;
    left:0; top:0; bottom:0;
    width:3px;
    background:var(--accent2);
    opacity:0;
    transition:opacity var(--t-mid);
}
.kpis > div[role="button"]:hover::after{ opacity:1; }

.kpis b{ font-variant-numeric:tabular-nums; letter-spacing:-.03em; }

.kpis > div.kpi-risk::after{ background:var(--st-risk); opacity:1; }
.kpis > div.kpi-warn::after{ background:var(--st-warn); opacity:1; }
.kpis > div.kpi-ok::after{   background:var(--st-ok);   opacity:1; }

/* ---------- D/E. STATUS BADGES, KPI CHIPS, PROGRESS -------------------- */

.badge{
    border-radius:var(--r-pill);
    font-size:10px;
    font-weight:700;
    letter-spacing:.06em;
    padding:3px 9px;
    white-space:nowrap;
}

.st-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-radius:var(--r-pill);
    padding:3px 10px;
    font-size:11px;
    font-weight:650;
}
.st-chip::before{
    content:"";
    width:6px; height:6px;
    border-radius:50%;
    background:currentColor;
}
.st-chip.ok{   color:var(--st-ok);   background:var(--st-ok-bg); }
.st-chip.warn{ color:var(--st-warn); background:var(--st-warn-bg); }
.st-chip.risk{ color:var(--st-risk); background:var(--st-risk-bg); }
.st-chip.idle{ color:var(--st-idle); background:var(--st-idle-bg); }
.st-chip.info{ color:var(--st-info); background:var(--st-info-bg); }

.progress-track{
    height:6px;
    border-radius:var(--r-pill);
    background:var(--surface2);
    overflow:hidden;
}
.progress-fill{
    height:100%;
    border-radius:var(--r-pill);
    background:var(--accent2);
    transition:width var(--t-slow);
}
.progress-fill.ok{ background:var(--st-ok); }
.progress-fill.warn{ background:var(--st-warn); }
.progress-fill.risk{ background:var(--st-risk); }

/* ---------- A/E. TABLES ------------------------------------------------- */

.table-wrap{
    overflow:auto;
    border-radius:var(--r-md);
    -webkit-overflow-scrolling:touch;
}

table thead th{
    position:sticky;
    top:0;
    z-index:2;
    background:var(--surface2);
    font-size:10px;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--muted);
    font-weight:700;
    white-space:nowrap;
}

table tbody tr{ transition:background var(--t-fast); }
table tbody tr:hover{ background:rgba(183,139,103,.07); }

table td, table th{ padding:9px 12px; }

table td.num, table th.num{ text-align:right; font-variant-numeric:tabular-nums; }

th.sortable{ cursor:pointer; user-select:none; }
th.sortable:hover{ color:var(--ink); }
th.sortable::after{
    content:"↕";
    margin-left:6px;
    opacity:.35;
    font-size:9px;
}
th.sortable.sort-asc::after{  content:"↑"; opacity:.9; }
th.sortable.sort-desc::after{ content:"↓"; opacity:.9; }

.table-toolbar{
    display:flex;
    align-items:center;
    gap:var(--u2);
    flex-wrap:wrap;
    padding:var(--u2) var(--u4);
    border-bottom:1px solid var(--line);
}
.table-toolbar input[type="search"]{
    min-width:180px;
    flex:1 1 180px;
    max-width:320px;
    padding:6px 10px;
    font-size:12px;
}
.table-toolbar .count{
    font-size:11px;
    color:var(--muted);
    margin-left:auto;
    font-variant-numeric:tabular-nums;
}

/* ---------- A. EMPTY / LOADING STATES ---------------------------------- */

.empty{
    text-align:center;
    padding:var(--u7) var(--u4);
    color:var(--muted);
    font-size:13px;
}
.empty .empty-title{
    display:block;
    font-weight:650;
    color:var(--ink);
    margin-bottom:var(--u1);
    font-size:14px;
}

.skeleton{
    background:linear-gradient(90deg,var(--surface2) 25%,#faf7f3 50%,var(--surface2) 75%);
    background-size:200% 100%;
    animation:skel 1.2s ease-in-out infinite;
    border-radius:var(--r-sm);
    height:12px;
    margin:8px 0;
}
@keyframes skel{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ---------- A. MODAL / TOAST MOTION ------------------------------------ */

.modal:not([hidden]){ animation:fadeIn var(--t-mid) both; }
.modal-card{
    border-radius:var(--r-xl);
    box-shadow:var(--e4);
    animation:popIn var(--t-slow) both;
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes popIn{ from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none} }

/* ==========================================================================
   C. AI ASSISTANT — PREMIUM DOCK PANEL
   ========================================================================== */

.ai-fab{
    border-radius:var(--r-pill) !important;
    box-shadow:var(--e3) !important;
    transition:transform var(--t-mid), box-shadow var(--t-mid) !important;
}
.ai-fab:hover{ transform:translateY(-2px) !important; box-shadow:var(--e4) !important; }

#aiDock{
    position:fixed;
    right:20px;
    bottom:20px;
    width:420px;
    max-width:calc(100vw - 24px);
    height:min(660px, calc(100vh - 40px));
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-xl);
    box-shadow:var(--e4);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    z-index:1200;
    animation:dockIn var(--t-slow) both;
}
#aiDock[hidden]{ display:none; }
#aiDock.closing{ animation:dockOut 180ms both; }

@keyframes dockIn{ from{opacity:0; transform:translateY(16px) scale(.97)} to{opacity:1; transform:none} }
@keyframes dockOut{ to{opacity:0; transform:translateY(12px) scale(.98)} }

body.ai-dock-wide #aiDock{ width:min(780px, calc(100vw - 40px)); height:calc(100vh - 40px); }

.ai-dock-head{
    display:flex;
    align-items:center;
    gap:var(--u3);
    padding:var(--u3) var(--u4);
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,var(--surface),var(--surface2));
}
.ai-dock-head .ai-avatar{
    width:30px; height:30px;
    border-radius:9px;
    display:grid; place-items:center;
    background:var(--accent);
    color:#fff;
    font-size:13px;
    font-weight:800;
    flex:0 0 30px;
}
.ai-dock-head .ai-title{ line-height:1.2; }
.ai-dock-head .ai-title b{ display:block; font-size:13px; letter-spacing:.01em; }
.ai-dock-head .ai-title span{ font-size:10px; color:var(--muted); letter-spacing:.06em; }
.ai-dock-head .ai-head-actions{ margin-left:auto; display:flex; gap:var(--u1); }
.ai-dock-head .ai-icon-btn{
    background:transparent;
    border:1px solid transparent;
    color:var(--muted);
    border-radius:var(--r-sm);
    padding:5px 8px;
    font-size:12px;
    line-height:1;
    transition:background var(--t-fast), color var(--t-fast);
}
.ai-dock-head .ai-icon-btn:hover{ background:var(--surface2); color:var(--ink); }

.ai-model-chip{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:9px;
    letter-spacing:.08em;
    font-weight:700;
    text-transform:uppercase;
    color:var(--st-info);
    background:var(--st-info-bg);
    border-radius:var(--r-pill);
    padding:2px 8px;
}
.ai-model-chip::before{
    content:"";
    width:5px; height:5px;
    border-radius:50%;
    background:var(--st-ok);
}

.ai-stream{
    flex:1;
    overflow-y:auto;
    padding:var(--u4);
    display:flex;
    flex-direction:column;
    gap:var(--u4);
    scroll-behavior:smooth;
    background:var(--bg);
}

.ai-turn{ animation:msgIn var(--t-mid) both; max-width:100%; }
@keyframes msgIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

.ai-turn .ai-meta{
    display:flex;
    align-items:center;
    gap:var(--u2);
    font-size:10px;
    color:var(--muted);
    margin-bottom:5px;
    letter-spacing:.05em;
    text-transform:uppercase;
    font-weight:650;
}
.ai-turn .ai-time{ opacity:.6; font-weight:500; letter-spacing:0; text-transform:none; }

.ai-turn .ai-bubble{
    border-radius:var(--r-lg);
    padding:var(--u3) var(--u4);
    font-size:13px;
    line-height:1.6;
    border:1px solid var(--line);
    background:var(--surface);
    box-shadow:var(--e1);
    overflow-wrap:anywhere;
}

.ai-turn.user{ align-self:flex-end; max-width:88%; }
.ai-turn.user .ai-meta{ justify-content:flex-end; }
.ai-turn.user .ai-bubble{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
    border-bottom-right-radius:var(--r-sm);
}

.ai-turn.agent .ai-bubble{ border-bottom-left-radius:var(--r-sm); }

.ai-turn.system .ai-bubble{
    background:var(--st-info-bg);
    border-color:transparent;
    color:var(--st-info);
    font-size:12px;
    text-align:center;
    box-shadow:none;
}
.ai-turn.error .ai-bubble{
    background:var(--st-risk-bg);
    border-color:rgba(179,77,70,.25);
    color:var(--st-risk);
}

/* thinking + typing animation */
.ai-thinking{ display:flex; align-items:center; gap:var(--u2); color:var(--muted); font-size:12px; }
.ai-dots{ display:inline-flex; gap:4px; }
.ai-dots i{
    width:6px; height:6px;
    border-radius:50%;
    background:var(--accent2);
    display:block;
    animation:dot 1.1s infinite ease-in-out;
}
.ai-dots i:nth-child(2){ animation-delay:.15s }
.ai-dots i:nth-child(3){ animation-delay:.3s }
@keyframes dot{ 0%,80%,100%{ transform:translateY(0); opacity:.4 } 40%{ transform:translateY(-4px); opacity:1 } }

.ai-caret{
    display:inline-block;
    width:2px;
    height:1em;
    background:var(--accent);
    margin-left:2px;
    vertical-align:-2px;
    animation:caret .9s steps(1) infinite;
}
@keyframes caret{ 50%{ opacity:0 } }

/* rich markdown rendering inside AI answers */
.ai-rich > *:first-child{ margin-top:0 }
.ai-rich > *:last-child{ margin-bottom:0 }
.ai-rich h3{ font-size:13px; font-weight:700; margin:14px 0 6px; letter-spacing:-.01em; }
.ai-rich h4{
    font-size:10px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--muted); margin:14px 0 5px;
}
.ai-rich p{ margin:0 0 9px; }
.ai-rich ul, .ai-rich ol{ margin:0 0 9px; padding-left:18px; }
.ai-rich li{ margin-bottom:4px; }
.ai-rich strong{ font-weight:700; }
.ai-rich code{
    background:var(--surface2);
    border-radius:var(--r-sm);
    padding:1px 5px;
    font-size:12px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.ai-rich pre{
    background:var(--surface2);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    padding:var(--u3);
    overflow:auto;
    font-size:12px;
    margin:0 0 9px;
}
.ai-rich pre code{ background:none; padding:0; }
.ai-rich table{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
    margin:0 0 9px;
    border:1px solid var(--line);
    border-radius:var(--r-md);
    overflow:hidden;
}
.ai-rich th{
    background:var(--surface2);
    text-align:left;
    font-size:9px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    padding:6px 9px;
}
.ai-rich td{ padding:6px 9px; border-top:1px solid var(--line); }
.ai-rich blockquote{
    margin:0 0 9px;
    padding:8px 12px;
    border-left:3px solid var(--accent2);
    background:var(--surface2);
    border-radius:0 var(--r-sm) var(--r-sm) 0;
    color:var(--muted);
}
.ai-rich hr{ border:none; border-top:1px solid var(--line); margin:12px 0; }

/* AI answer KPI strip / alert cards */
.ai-kpis{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
    gap:var(--u2);
    margin:0 0 10px;
}
.ai-kpi{
    background:var(--surface2);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    padding:8px 10px;
}
.ai-kpi span{
    display:block;
    font-size:9px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    font-weight:700;
}
.ai-kpi b{ font-size:16px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

.ai-alert{
    display:flex;
    gap:var(--u2);
    align-items:flex-start;
    border-radius:var(--r-md);
    padding:9px 11px;
    font-size:12px;
    margin:0 0 9px;
    border:1px solid transparent;
}
.ai-alert.warn{ background:var(--st-warn-bg); color:#7a5510; border-color:rgba(184,128,31,.25); }
.ai-alert.risk{ background:var(--st-risk-bg); color:#7d3430; border-color:rgba(179,77,70,.25); }
.ai-alert.ok{   background:var(--st-ok-bg);   color:#1d5b44; border-color:rgba(47,139,103,.25); }

/* per-message footer actions */
.ai-msg-actions{
    display:flex;
    gap:var(--u1);
    margin-top:var(--u2);
    opacity:0;
    transition:opacity var(--t-fast);
}
.ai-turn:hover .ai-msg-actions,
.ai-turn:focus-within .ai-msg-actions{ opacity:1; }
.ai-msg-actions button{
    background:transparent;
    border:1px solid var(--line);
    color:var(--muted);
    border-radius:var(--r-sm);
    font-size:10px;
    letter-spacing:.05em;
    font-weight:650;
    padding:3px 8px;
    transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.ai-msg-actions button:hover{ background:var(--surface2); color:var(--ink); border-color:var(--accent2); }

/* suggestion chips */
.ai-suggests{
    display:flex;
    gap:var(--u1);
    flex-wrap:wrap;
    padding:var(--u2) var(--u4) 0;
}
.ai-chip{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    padding:5px 11px;
    font-size:11px;
    color:var(--ink);
    transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.ai-chip:hover{ background:var(--surface2); border-color:var(--accent2); transform:translateY(-1px); }

/* composer */
.ai-composer{
    border-top:1px solid var(--line);
    padding:var(--u3) var(--u4) var(--u3);
    background:var(--surface);
}
.ai-input-shell{
    display:flex;
    align-items:flex-end;
    gap:var(--u2);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    background:var(--surface);
    padding:var(--u2);
    transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.ai-input-shell:focus-within{
    border-color:var(--accent2);
    box-shadow:0 0 0 3px rgba(183,139,103,.16);
}
.ai-input-shell textarea{
    flex:1;
    border:none;
    outline:none;
    resize:none;
    background:transparent;
    font-size:13px;
    line-height:1.5;
    max-height:132px;
    min-height:22px;
    padding:3px 4px;
    color:var(--ink);
}
.ai-send{
    border:none;
    background:var(--accent);
    color:#fff;
    border-radius:var(--r-md);
    width:34px; height:34px;
    display:grid; place-items:center;
    font-size:14px;
    flex:0 0 34px;
    transition:background var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}
.ai-send:hover{ transform:translateY(-1px); }
.ai-send:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.ai-stop{
    border:1px solid var(--st-risk);
    background:var(--st-risk-bg);
    color:var(--st-risk);
    border-radius:var(--r-md);
    height:34px;
    padding:0 12px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.05em;
    flex:0 0 auto;
}

.ai-hints{
    display:flex;
    align-items:center;
    gap:var(--u2);
    margin-top:6px;
    font-size:10px;
    color:var(--muted);
}
.ai-hints kbd{
    background:var(--surface2);
    border:1px solid var(--line);
    border-bottom-width:2px;
    border-radius:4px;
    padding:1px 5px;
    font-size:9px;
    font-family:inherit;
}

/* ---------- 11. RESPONSIVE --------------------------------------------- */

@media (max-width:1024px){
    #aiDock{ width:min(420px, calc(100vw - 24px)); }
    .kpis{ gap:var(--u2); }
}

@media (max-width:820px){
    #aiDock{
        right:0; bottom:0; left:0;
        width:100%;
        max-width:100%;
        height:88vh;
        border-radius:var(--r-xl) var(--r-xl) 0 0;
    }
    body.ai-dock-wide #aiDock{ width:100%; height:100vh; border-radius:0; }
    .ai-fab{ bottom:14px !important; right:14px !important; padding:11px 16px !important; }

    .page{ padding-left:var(--u3); padding-right:var(--u3); }
    .kpis{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
    .table-toolbar input[type="search"]{ max-width:none; }
}

@media (max-width:640px){
    .page h1{ font-size:19px; }
    .panel-head{ padding:var(--u3) var(--u4); }
    .ai-suggests{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:var(--u1); }
    .ai-chip{ white-space:nowrap; }
}

/* landscape phones: keep the dock usable */
@media (max-height:520px) and (orientation:landscape){
    #aiDock{ height:96vh; }
    .ai-stream{ padding:var(--u3); gap:var(--u3); }
}

/* ==========================================================================
 | P9 — Lead lifecycle (Leads screen, pipeline strip, scope tabs)
 * ========================================================================== */
.scope-tabs { display:flex; gap:4px; flex-wrap:wrap; }
.scope-tabs button {
    font-size:11px; letter-spacing:.06em; padding:5px 10px; border-radius:999px;
    border:1px solid var(--line, #d8d2c8); background:transparent; cursor:pointer;
}
.scope-tabs button.active { background:var(--accent, #b4632a); color:#fff; border-color:transparent; }

.pipe-title { font-size:11px; letter-spacing:.1em; opacity:.7; padding:12px 14px 0; }
.pipe-strip { display:flex; gap:10px; flex-wrap:wrap; padding:12px 14px; }
.pipe-cell {
    flex:1 1 130px; min-width:120px; border:1px solid var(--line, #e1dbd1);
    border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:4px;
    background:var(--surface, #fff);
}
.pipe-cell span { font-size:10.5px; letter-spacing:.07em; opacity:.75; }
.pipe-cell b { font-size:20px; line-height:1; }
.pipe-cell[role="button"] { cursor:pointer; }
.pipe-cell[role="button"]:hover { border-color:var(--accent, #b4632a); }
.pipe-cell.pipe-strong { border-left:3px solid var(--st-ok, #2e7d32); }

.lc-chip { font-size:10px; font-weight:600; padding:1px 7px; border-radius:999px; border:1px solid var(--line, #ddd); white-space:nowrap; }
.lc-chip.lc-won { background:rgba(46,125,50,.12); }
.lc-chip.lc-lost { background:rgba(198,40,40,.12); }
.lc-chip.lc-proposal { background:rgba(126,87,194,.12); }
.lc-chip.lc-qualified { background:rgba(21,101,192,.12); }
.lc-chip.lc-lead { background:rgba(245,166,35,.15); }
.lc-chip.lc-dormant { background:rgba(120,120,120,.12); }

.lc-select { font-size:11.5px; padding:4px 6px; max-width:150px; }
.leads-grid td { vertical-align:top; }
.leads-grid .muted { font-size:11px; opacity:.7; }
.leads-grid .warn-line { font-size:11px; color:var(--st-warn, #b26a00); margin-top:3px; }
.leads-grid .cell-overdue { color:var(--st-bad, #c62828); font-weight:600; }
.lead-actions { display:flex; flex-wrap:wrap; gap:4px; }
.lead-actions button { font-size:11px; padding:4px 8px; border-radius:6px; cursor:pointer; }
.lead-actions .btn-mini-primary { background:var(--accent, #b4632a); color:#fff; border-color:transparent; }
.table-scroll { overflow-x:auto; }

@media (max-width: 760px) {
    .pipe-cell { flex:1 1 45%; }
    .leads-grid { min-width:820px; }
}

/* ---------- BOQ grid: everything visible in one go, sticky header ---------- */
.boq-scroll { max-height: 58vh; overflow: auto; border: 1px solid var(--line, #e6ded4); border-radius: 8px; }
.boq-table { width: 100%; table-layout: fixed; font-size: 12px; border-collapse: collapse; }
.boq-table thead th {
    position: sticky; top: 0; z-index: 3;
    background: var(--surface-2, #f4efe8);
    font-size: 10.5px; letter-spacing: .04em; padding: 7px 6px; white-space: nowrap;
}
.boq-table td { padding: 4px 5px; vertical-align: middle; }
.boq-table input, .boq-table select {
    width: 100%; min-width: 0; font-size: 12px; padding: 4px 6px; border-radius: 6px; box-sizing: border-box;
}
.boq-table .c-cat   { width: 12%; }
.boq-table .c-item  { width: 24%; }
.boq-table .c-make  { width: 11%; }
.boq-table .c-unit  { width: 7%; }
.boq-table .c-qty   { width: 6.5%; }
.boq-table .c-rate  { width: 9%; }
.boq-table .c-gst   { width: 7%; }
.boq-table .c-amt   { width: 10%; text-align: right; }
.boq-table .c-tax   { width: 8%; text-align: right; color: var(--muted, #7b6b5b); }
.boq-table .c-line  { width: 10%; text-align: right; font-weight: 600; }
.boq-table .c-del   { width: 3.5%; text-align: center; }
.boq-table .c-amt input { text-align: right; }
.boq-table .c-del button { padding: 2px 7px; }

@media (max-width: 900px) {
    .boq-scroll { max-height: none; }
    .boq-table { table-layout: auto; min-width: 860px; }
}