/* graphApp -- sidebar, tabs, panels and the converter.*/
:root {
  --bg:#0f1117; --bg2:#ffffff; --bg3:#f2fbfa;
  --border:#d4eeeb; --accent:#1a9e96; --accent-h:#127870;
  --text:#0d3532; --textd:#1a6460; --textdd:#3d9e98;
  --danger:#d9534f; --sw:260px; --tr:.2s ease;
}
html,body{background:#ffffff!important;color:#333333;font-family:'Segoe UI',system-ui,sans-serif;height:100%;overflow:hidden;}
#mainAppContent{display:flex;height:100vh;width:100vw;background:#ffffff;overflow:hidden;}
#loadingOverlay{position:fixed;inset:0;background:#0f1117;display:flex;align-items:center;justify-content:center;z-index:9999;}
.spinner{width:32px;height:32px;border:3px solid #d4eeeb;border-top-color:#1a9e96;border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
/* While the input files are read (seconds): a veil over the page, with what is being read */
#filesLoading{position:fixed;inset:0;z-index:2000001;background:rgba(255,255,255,.65);display:none;align-items:center;justify-content:center;}
#filesLoading.show{display:flex;}
#filesLoading .loadingCard{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #d4eeeb;border-radius:10px;padding:16px 22px;box-shadow:0 6px 24px rgba(13,53,50,.15);font-size:.95rem;color:#0d3532;max-width:70vw;}
#filesLoading .loadingCard span{overflow-wrap:anywhere;}
#sidebarToggle{position:fixed;top:10px;left:10px;z-index:2000000;width:30px;height:30px;background:#ffffff;border:1px solid #d4eeeb;border-radius:6px;color:#1a6460;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:left .2s ease;}
#sidebarToggle:hover{color:#0d3532;border-color:#1a9e96;}
.sb-open #sidebarToggle{left:268px;}
#sidebar{width:260px;flex-shrink:0;background:#ffffff;border-right:1px solid #d4eeeb;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:#d4eeeb;}
#sidebarHeader{padding:11px 14px 10px 48px;border-bottom:1px solid #d4eeeb;flex-shrink:0;}
#appTitle{font-size:.88rem;font-weight:700;color:#0d3532;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:#1a9e96;color:#fff;}
.sideBtn.primary:hover{background:#127870;}
.sideBtn.secondary{background:#f2fbfa;color:#1a6460;border:1px solid #d4eeeb;}
.sideBtn.secondary:hover{color:#0d3532;border-color:#1a9e96;}
.sectionLabel{padding:6px 14px 3px;font-size:.67rem;font-weight:700;color:#3d9e98;text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;}
/* Collapsible section heading. Same .open convention as #kbTreeInline, so the two
   disclosures in this sidebar behave alike. */
.sectionToggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;}
.sectionToggle:hover{color:#1a9e96;}
.sectionToggle .chev{font-size:.6rem;transition:transform .2s;}
.sectionToggle.open .chev{transform:rotate(180deg);}
#langRow{display:none;padding:2px 10px 6px;gap:4px;align-items:center;}
#langRow.open{display:flex;}
.panelDivider{height:1px;background:#d4eeeb;margin:4px 0;flex-shrink:0;}
.settingGroup{margin-bottom:4px;}
.settingRow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;}
.settingLabel{font-size:.75rem;color:#1a6460;flex:1;}
/* The input files' labels, status and small buttons (Load, Clear) */
.fieldLabel{font-size:.8rem;color:#1a6460;}
/* Section headings inside the sidebar. A modifier, not a change to .fieldLabel:
   that class also styles #fileStatus ("Ready"), which should stay light. */
.fieldLabel.strong{font-weight:600;}
.miniBtn{background:#f2fbfa;border:1px solid #d4eeeb;border-radius:5px;color:#1a6460;cursor:pointer;font-size:.8rem;padding:2px 9px;transition:color .12s,border-color .12s;}
.miniBtn:hover{color:#0d3532;border-color:#1a9e96;}
.miniBtn.danger:hover{color:#d9534f;border-color:#d9534f;}
#sidebarFooter{padding:8px 10px;border-top:1px solid #d4eeeb;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:#1a6460;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;text-align:center;}
.footerBtn{background:none;border:1px solid #d4eeeb;border-radius:6px;color:#1a6460;cursor:pointer;padding:5px 8px;display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s;}
.footerBtn:hover{color:#0d3532;border-color:#1a9e96;}
.footerBtn.danger:hover{color:#d9534f;border-color:#d9534f;}
#mainArea{flex:1;min-width:0;background:#ffffff;display:flex;flex-direction:column;}
/* Main tabs (Graph | Converter) and the Converter panel */
#mainTabs{height:34px;flex-shrink:0;display:flex;align-items:flex-end;gap:2px;padding:0 10px 0 48px;border-bottom:1px solid #d4eeeb;background:#f2fbfa;}
.mainTab,.convSubtab{background:none;border:1px solid transparent;border-bottom:none;border-radius:6px 6px 0 0;padding:6px 14px;font-size:.8rem;font-weight:600;color:#1a6460;cursor:pointer;}
.mainTab:hover,.convSubtab:hover{color:#0d3532;}
.mainTab.active,.convSubtab.active{background:#ffffff;border-color:#d4eeeb;color:#0d3532;margin-bottom:-1px;}
#converterPanel{flex:1;min-height:0;flex-direction:column;}
/* Side by side: the graph (a fixed overlay, fitGraphToMainArea) takes the left half, the Converter the right one. */
#converterPanel.split{margin-left:50%;border-left:1px solid #c4e5e2;}
.convSubtabs{display:flex;flex-wrap:wrap;row-gap:4px;gap:2px;padding:6px 12px 0;border-bottom:1px solid #d4eeeb;flex-shrink:0;}
.convBody{flex:1;min-height:0;overflow:auto;padding:10px 14px;font-size:.82rem;color:#0d3532;}
.convToolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.convBtn{background:#f2fbfa;color:#1a6460;border:1px solid #d4eeeb;border-radius:6px;padding:5px 12px;font-size:.78rem;font-weight:600;cursor:pointer;}
.convBtn:hover{border-color:#1a9e96;color:#0d3532;}
.convBtn.primary{background:#1a9e96;color:#fff;border-color:#1a9e96;}
.convBtn.primary:hover{background:#127870;}
.convSearch{border:1px solid #d4eeeb;border-radius:5px;padding:4px 8px;font-size:.78rem;color:#0d3532;background:#fff;width:220px;}
.convSearch:focus{outline:none;border-color:#1a9e96;}
.convSelect{border:1px solid #d4eeeb;border-radius:5px;padding:4px 6px;font-size:.78rem;color:#0d3532;background:#fff;}
.convState{font-size:.75rem;color:#3d9e98;}
.convNote{font-size:.75rem;color:#1a6460;margin:0 0 8px;}
.convZoom{margin-left:auto;display:flex;gap:4px;align-items:center;}
.convTable.tabulator,.convTable .tabulator{font-size:calc(14px * var(--convZoom, 1));}
.tabulator-row.convPicked,.tabulator-row.convPicked .tabulator-cell{background:#ffe9a8 !important;}
.convHeader{margin-bottom:8px;}
.convHeader summary{cursor:pointer;}
.convHeaderGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 12px;margin-top:6px;}
.convHeaderField{display:flex;flex-direction:column;gap:2px;}
.convHeaderInput{width:100%;box-sizing:border-box;}
.convFile{font-size:.78rem;color:#0d3532;margin:10px 0 4px;}
.convTable{margin-bottom:8px;font-size:.78rem;}
.convWarnings ul{margin:4px 0 8px 18px;font-size:.76rem;color:#8a5a00;}
.convWarnings li{margin-bottom:2px;}
.convPreview{background:#f7fbfb;border:1px solid #d4eeeb;border-radius:6px;padding:8px;font-size:.72rem;white-space:pre;overflow:auto;max-height:60vh;}
/* KB Remote tree picker */
.kb-picker-trigger{display:flex;align-items:center;justify-content:space-between;background:#f2fbfa;border:1px solid #d4eeeb;border-radius:5px;padding:4px 8px;font-size:.77rem;color:#1a6460;cursor:pointer;width:100%;transition:border-color .15s;}
.kb-picker-trigger:hover,.kb-picker-trigger.open{border-color:#1a9e96;color:#0d3532;}
/* Same box and type as the "Upload Files" button (.sideBtn) right above it, so the
   two file pickers read as one pair. Scoped to the id: the class also dresses
   #langSelect, which belongs to another section and keeps its smaller look. */
#kbPickerTrigger{font-size:.82rem;font-weight:600;padding:7px 12px;border-radius:8px;}
.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:#ffffff;border:1px solid #d4eeeb;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:#d4eeeb;}
.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:#1a6460;transition:background .12s,color .12s;white-space:nowrap;min-width:max-content;}
.kb-tree-content:hover{background:#f2fbfa;color:#0d3532;}
.kb-tree-content input[type=checkbox]{accent-color:#1a9e96;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:#3d9e98;width:12px;flex-shrink:0;transition:transform .15s;}
.kb-tree-children{display:none;padding-left:12px;border-left:1px solid #d4eeeb;margin-left:14px;}
.kb-tree-children.open{display:block;}

/* ── Sidebar layout: rules that used to be style="" attributes on the elements ──────── */
/* A section's body: the padded strip under a .sectionLabel heading. */
.sectionBody{padding:4px 10px 6px;}
/* The remote picker's body sits tighter, between the chips above and the actions below. */
.pickerBody{padding:2px 10px 4px;}
/* Status + actions for the whole input section; the rule above it separates it from the
   remote picker, whose block it is deliberately not part of. */
.inputActions{margin-top:2px;border-top:1px solid #e8f5f4;}
/* A .settingRow whose children stack instead of sitting side by side (label over field). */
.settingRow.stacked{flex-direction:column;align-items:stretch;gap:3px;}
/* Last row of a group: drops the gap .settingRow leaves for the next one. */
.settingRow.last{margin-bottom:0;}
/* Row whose single control stays on the left instead of being pushed to the far edge. */
.settingRow.start{justify-content:flex-start;}

#inputFilesLabel{padding:8px 10px 3px;}
#fileChips{flex-wrap:wrap;gap:4px;padding:0 10px 4px;}
#fileStatus{color:#3d9e98;flex:1;}
#langSelect{flex:1;}
/* The headless Blockly workspace: present in the DOM, never seen (see the PIPELINE MAP
   comment in index.js). Kept 1px rather than display:none because Blockly needs to measure. */
#blocklyDiv{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;}