/* chatApp -- sidebar, conversation list, settings and the chat panel.*/
:root {
  --bg:#0f1117; --bg2:#161822; --bg3:#1c1f2b;
  --border:#2a2d3a; --accent:#4b80ca; --accent-h:#3a6cb8;
  --text:#c9d1e0; --textd:#6b7280; --textdd:#3a3f52;
  --danger:#d9534f; --sw:260px; --tr:.2s ease; --bg-active:#1a2235;
}
/* Light mode — driven by 'preferredColorMode' (see index.js); matches
   fieldChatPanel.js's --cp-* light palette for visual consistency. */
:root[data-color-mode="light"] {
  --bg:#ffffff; --bg2:#f4f5f8; --bg3:#f0f1f5;
  --border:#d8dce6; --accent:#3568ad; --accent-h:#2a5590;
  --text:#1f2430; --textd:#5b6472; --textdd:#9aa2b0;
  --danger:#c9433e; --bg-active:#e3ecfb;
}
html,body{background:var(--bg)!important;color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;height:100%;overflow:hidden;}
#mainAppContent{display:flex;height:100vh;width:100vw;background:var(--bg);overflow:hidden;}
#loadingOverlay{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999;}
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
#sidebarToggle{position:fixed;top:10px;left:10px;z-index:2000000;width:30px;height:30px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;color:var(--textd);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:left .2s ease;}
#sidebarToggle:hover{color:var(--text);border-color:var(--accent);}
.sb-open #sidebarToggle{left:268px;}
#sidebar{width:260px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column;transition:width .2s ease,opacity .2s ease;position:relative;z-index:1000000;}
#mainAppContent:not(.sb-open) #sidebar{width:0;opacity:0;pointer-events:none;}
#sidebarInner{width:260px;height:100%;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;}
#sidebarInner::-webkit-scrollbar{width:3px;}
#sidebarInner::-webkit-scrollbar-thumb{background:var(--border);}
#sidebarHeader{padding:11px 14px 10px 48px;border-bottom:1px solid var(--border);flex-shrink:0;}
#appTitle{font-size:.88rem;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.04em;}
#sidebarActions{padding:8px 10px 4px;flex-shrink:0;}
.sideBtn{display:flex;align-items:center;gap:7px;border:none;border-radius:8px;padding:7px 12px;font-size:.82rem;font-weight:600;cursor:pointer;width:100%;transition:background .15s;margin-bottom:5px;}
.sideBtn.primary{background:var(--accent);color:#fff;}
.sideBtn.primary:hover{background:var(--accent-h);}
.sideBtn.secondary{background:var(--bg3);color:var(--textd);border:1px solid var(--border);}
.sideBtn.secondary:hover{color:var(--text);border-color:var(--accent);}
.sectionLabel{padding:6px 14px 3px;font-size:.67rem;font-weight:700;color:var(--textdd);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;}
#conversationList{list-style:none;padding:3px 6px;max-height:160px;overflow-y:auto;flex-shrink:0;}
#conversationList::-webkit-scrollbar{width:3px;}
#conversationList::-webkit-scrollbar-thumb{background:var(--border);}
.convItem{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:.8rem;color:var(--textd);user-select:none;transition:background .12s,color .12s;}
.convItem:hover{background:var(--bg3);color:var(--text);}
.convItem.active{background:var(--bg-active);color:var(--text);}
.convItem .convTitle{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.convItem .convDelete{opacity:0;background:none;border:none;color:var(--textdd);cursor:pointer;font-size:.85rem;padding:0 2px;transition:opacity .12s,color .12s;}
.convItem:hover .convDelete{opacity:1;}
.convItem .convDelete:hover{color:var(--danger);}
.panelDivider{height:1px;background:var(--border);margin:4px 0;flex-shrink:0;}
.sectionToggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:7px 14px;background:none;border:none;cursor:pointer;font-size:.67rem;font-weight:700;color:var(--textdd);text-transform:uppercase;letter-spacing:.06em;transition:color .15s;}
.sectionToggle:hover{color:var(--textd);}
.sectionToggle .chevron{transition:transform .2s;font-size:.7rem;}
.sectionToggle.open .chevron{transform:rotate(180deg);}
.collapsible{display:none;padding:0 10px 4px;}
.collapsible.open{display:block;}
.settingGroup{margin-bottom:4px;}
.settingGroupTitle{font-size:.67rem;font-weight:700;color:var(--accent);text-transform:uppercase;margin-bottom:3px;padding-top:2px;}
.settingRow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;}
.settingRowSlider{flex-direction:column;align-items:stretch;gap:4px;}
.settingLabel{font-size:.75rem;color:var(--textd);flex:1;}
.settingCheckLabel{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--textd);cursor:pointer;}
.settingCheckLabel input{accent-color:var(--accent);}
.settingInput{width:56px;background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:5px;padding:3px 6px;font-size:.77rem;text-align:right;outline:none;}
.settingInput:focus{border-color:var(--accent);}
.settingInputWide{width:70px;}
input[type="range"]{width:100%;accent-color:var(--accent);cursor:pointer;}
.evolvedRow{gap:6px;}
.evolvedDirName{flex:1;font-size:.72rem;color:var(--textd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:left;}
.evolvedBtn{background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:5px;padding:3px 8px;font-size:.72rem;cursor:pointer;outline:none;flex-shrink:0;}
.evolvedBtn:hover{border-color:var(--accent);}
.evolvedBtn.danger{color:#e06666;padding:3px 7px;}
.evolvedBtn.danger:hover{border-color:#e06666;}
#sidebarFooter{padding:8px 10px;border-top:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;margin-top:auto;}
.footerBtnRow{display:flex;gap:6px;justify-content:center;}
#userName{font-size:.78rem;color:var(--textd);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;text-align:center;}
.footerBtn{background:none;border:1px solid var(--border);border-radius:6px;color:var(--textd);cursor:pointer;padding:5px 8px;display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s;}
.footerBtn:hover{color:var(--text);border-color:var(--accent);}
.footerBtn.danger:hover{color:var(--danger);border-color:var(--danger);}
#mainArea{flex:1;background:var(--bg);}

/* KB Remote tree picker — inline in sidebar */
.kb-picker-trigger{display:flex;align-items:center;justify-content:space-between;background:var(--bg3);border:1px solid var(--border);border-radius:5px;padding:4px 8px;font-size:.77rem;color:var(--textd);cursor:pointer;width:100%;transition:border-color .15s;}
.kb-picker-trigger:hover,.kb-picker-trigger.open{border-color:var(--accent);color:var(--text);}
.kb-picker-trigger .kb-trigger-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kb-picker-trigger .kb-chevron{font-size:.6rem;flex-shrink:0;transition:transform .2s;}
.kb-picker-trigger.open .kb-chevron{transform:rotate(180deg);}
#kbTreeInline{display:none;margin-top:3px;background:var(--bg2);border:1px solid var(--border);border-radius:5px;max-height:200px;overflow-y:auto;overflow-x: auto;padding:4px 0;}
#kbTreeInline.open{display:block;}
#kbTreeInline::-webkit-scrollbar{width:3px;}
#kbTreeInline::-webkit-scrollbar-thumb{background:var(--border);}
.kb-tree-node{user-select:none;}
.kb-tree-content{display:flex;align-items:center;gap:6px;padding:4px 8px;cursor:pointer;font-size:.77rem;color:var(--textd);transition:background .12s,color .12s;white-space: nowrap;min-width: max-content;}
.kb-tree-content:hover{background:var(--bg3);color:var(--text);}
.kb-tree-content input[type=checkbox]{accent-color:var(--accent);cursor:pointer;flex-shrink:0;}
.kb-tree-content .kb-node-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kb-tree-content .kb-toggle{font-size:.55rem;color:var(--textdd);width:12px;flex-shrink:0;transition:transform .15s;}
.kb-tree-children{display:none;padding-left:12px;border-left:1px solid var(--border);margin-left:14px;}
.kb-tree-children.open{display:block;}

/* ── Sidebar: rules that used to be style="" attributes on the elements ────────────── */
/* Last row of a group: drops the gap .settingRow leaves for the next one. */
.settingRow.last{margin-bottom:0;}
/* A .settingRow whose children stack instead of sitting side by side (label over field). */
.settingRow.stacked{flex-direction:column;align-items:stretch;gap:3px;}
/* A .settingLabel for a secondary line (a range hint, a sub-label). */
.settingLabel.small{font-size:.69rem;}
/* These two sit as the only child of their row, so they drop .sideBtn's bottom gap. */
#llmBtn,#kbLocalBtn{margin-bottom:0;}
#kbLocalBtn{font-size:.77rem;padding:5px 10px;}
#kbChips{flex-wrap:wrap;gap:4px;margin-bottom:4px;}
#kbStatus{font-size:.69rem;color:var(--textdd);}
/* A text-only button: no box, turns red on hover. The hover used to be inline
   onmouseover/onmouseout handlers writing style.color -- CSS does it without script. */
#kbClearBtn{background:none;border:none;color:var(--textdd);cursor:pointer;font-size:.69rem;padding:0 2px;transition:color .12s;}
#kbClearBtn:hover{color:var(--danger);}
/* The headless Blockly workspace: in the DOM, never seen. Kept 1px rather than
   display:none because Blockly needs to measure it. */
#blocklyDiv{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;}