@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap');
:root{
  --bg:#f5f7fb;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-3:#eef2f7;
  --text:#182230;
  --muted:#718096;
  --muted-2:#9aa6b2;
  --border:#e3e8ef;
  --border-strong:#d3dae4;
  --accent:#5b5bd6;
  --accent-2:#7878e8;
  --accent-soft:#eeefff;
  --success:#2e9b67;
  --danger:#d45a5a;
  --shadow:0 8px 24px rgba(20,35,60,.055);
  --radius:12px;
  --editor-min:280px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --control-sm:30px;
  --control-md:34px;
  --control-lg:38px;
  --text-xs:10px;
  --text-sm:12px;
  --text-md:13px;
}
[data-theme="dark"]{
  --bg:#0b1018;
  --surface:#121923;
  --surface-2:#151e2a;
  --surface-3:#1b2634;
  --text:#e9eef5;
  --muted:#93a1b1;
  --muted-2:#68778a;
  --border:#263343;
  --border-strong:#344255;
  --accent:#8989f7;
  --accent-2:#a1a1ff;
  --accent-soft:#252541;
  --success:#55c58d;
  --danger:#ed7777;
  --shadow:0 14px 34px rgba(0,0,0,.18);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--text);overflow:hidden;
}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.app-shell{height:100%;display:flex;flex-direction:column}
.topbar{display:none}
.brand{display:flex;align-items:center;gap:11px}
.brand-icon{width:34px;height:34px;flex-shrink:0}
.brand-mark{
  width:34px;height:34px;border-radius:10px;background:var(--accent);
  color:#fff;display:grid;place-items:center;font-weight:800;box-shadow:0 7px 18px rgba(91,91,214,.25);flex-shrink:0;
}
#brandText { overflow: hidden; white-space: nowrap; }
.brand-name{
  font-size:18px;font-weight:800;letter-spacing:-.03em;white-space:nowrap;
  color:var(--text); overflow: hidden; text-overflow: ellipsis;
}
.brand-subtitle{font-size:10px;color:var(--muted);margin-top:2px;letter-spacing:.06em;font-weight:500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.top-actions{display:flex;gap:7px;align-items:center}
.icon-btn,.avatar-btn,.mini-btn{
  border:1px solid var(--border);background:var(--surface);color:var(--muted);
  display:flex;align-items:center;justify-content:center;padding:0;transition:.16s ease;
}
.icon-btn{width:34px;height:34px;border-radius:9px}
.icon-btn:hover,.mini-btn:hover{border-color:var(--border-strong);color:var(--text);background:var(--surface-2)}
.avatar-btn{width:34px;height:34px;border-radius:50%;font-size:12px;font-weight:700;background:var(--surface-3)}
.workspace{min-height:0;flex:1;display:flex;position:relative}
.sidebar-overlay { display: none; }
.sidebar{
  width:260px;flex:0 0 260px;border-right:1px solid var(--border);background:var(--surface);
  padding:16px 12px 10px;display:flex;flex-direction:column;transition:.2s ease;
}
.sidebar.collapsed { width: 58px; flex-basis: 58px; padding: 16px 12px 10px; overflow: hidden; cursor: pointer; }
.sidebar.collapsed #brandText,
.sidebar.collapsed .doc-list-head span,
.sidebar.collapsed #documentList,
.sidebar.collapsed #saveState,
.sidebar.collapsed .privacy-card,
.sidebar.collapsed .storage-note { display: none !important; }

/* ================================
   COLLAPSED SIDEBAR BRAND
   ================================ */

.sidebar.collapsed .sidebar-head {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;

    padding: 0 0 14px 0 !important;
    margin: 0 !important;

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

    flex-shrink: 0 !important;
    overflow: visible !important;
}

.sidebar.collapsed .brand {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;

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

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

    flex: 0 0 34px !important;
    overflow: visible !important;
}

.sidebar.collapsed .brand-icon {
    display: block !important;

    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;

    max-width: 34px !important;
    max-height: 34px !important;

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

    object-fit: contain !important;

    visibility: visible !important;
    opacity: 1 !important;

    flex: 0 0 34px !important;
}

.sidebar.collapsed #brandText {
    display: none !important;
}
.sidebar.collapsed .doc-list-head { padding: 10px 0; display: block; flex-shrink: 0; }
.sidebar.collapsed .doc-list-actions { flex-direction: column; gap: 8px; align-items: center; }
.sidebar.collapsed .sidebar-utils {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
}

.sidebar.collapsed .sidebar-utils-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
}
.sidebar-head,.doc-list-head{display:flex;align-items:center;justify-content:space-between}
.sidebar-head{padding:0 0 12px 0}
.eyebrow{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);font-weight:800}
.mini-btn{width:28px;height:28px;border-radius:8px;font-size:13px}
.doc-list-head{padding:9px 0 7px 0;font-size:11px;font-weight:750;color:var(--muted)}
.doc-list-actions{display:flex;align-items:center;gap:6px}
.document-list{overflow:auto;display:flex;flex-direction:column;gap:3px;flex:1}
.doc-item{
  width:100%;display:flex;align-items:center;gap:9px;text-align:left;padding:8px 9px;border:1px solid transparent;
  background:transparent;color:var(--text);border-radius:8px;
}
.doc-item:hover{background:var(--surface-2)}
.doc-item.active{background:var(--accent-soft);border-color:rgba(91,91,214,.15)}
.doc-icon{font-size:12px;color:var(--muted)}
.doc-item-title{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-footer{margin-top:auto}
.privacy-card{display:flex;gap:9px;padding:11px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2)}
.privacy-icon{width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.privacy-card strong{font-size:11px}.privacy-card p{margin:3px 0 0;font-size:9px;line-height:1.4;color:var(--muted)}
.storage-note{font-size:9px;color:var(--muted-2);padding:9px 4px 0;text-align:center}
.main-area{min-width:0;flex:1;display:flex;flex-direction:column}
.doc-title-wrap{display:flex;align-items:center;gap:10px;min-width:0;position:absolute;left:50%;transform:translateX(-50%);width:min(520px,48vw);justify-content:center}
.doc-title{border:0;min-width:0;background:transparent;outline:0;color:var(--text);font-size:14px;font-weight:750;width:min(420px,50vw)}
.save-state{font-size:10px;color:var(--muted-2);white-space:nowrap}
.save-state:not(.saving):not(.error)::before{content:"✓ ";color:var(--success)}
.save-state.saving{color:var(--accent)}.save-state.error{color:var(--danger)}
.ai-toolbar{
  min-height:50px;padding:7px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--surface);border-bottom:1px solid var(--border)
}
.ai-left,.ai-controls{display:flex;align-items:center;gap:8px;min-width:0}
.ai-chip{display:flex;align-items:center;gap:7px;min-height:32px;padding:6px 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);font-size:11px;color:var(--muted);white-space:nowrap}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--muted-2)}
.status-dot.ready{background:var(--success);box-shadow:0 0 0 3px rgba(46,155,103,.1)}
.status-dot.loading{background:var(--accent);animation:pulse 1.2s infinite}
.status-dot.error{background:var(--danger)}
@keyframes pulse{50%{opacity:.35}}
.model-select{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:10px}
.model-select select{
  max-width:190px;border:1px solid var(--border);border-radius:8px;padding:7px 28px 7px 8px;
  color:var(--text);background:var(--surface-2);outline:0;font-size:10px;
  cursor:pointer;transition:.14s ease;
}
.model-select select:hover{border-color:var(--border-strong);background:var(--surface-3)}
.model-select select:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(91,91,214,.12)}

/* Custom Mode Picker */
.mode-picker { position: relative; display: flex; align-items: center; color: var(--muted); font-size: 11px; }
.mode-picker-trigger {
  display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 11px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
  color: var(--text); font-size: 11px; cursor: pointer; transition: .14s ease;
  white-space: nowrap; justify-content: space-between;
}
.mode-picker-trigger:hover { border-color: var(--border-strong); background: var(--surface-3); }
.mode-picker-trigger.open { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(91,91,214,.12); }
.picker-mode-label { font-weight: 500; }
.mode-picker-menu {
  display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 50;
  min-width: 170px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.18); padding: 6px;
  flex-direction: column; gap: 2px;
}
.mode-picker-menu.open { display: flex; }
.mode-option {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: .12s ease;
  border: 1px solid transparent; background: transparent; color: var(--text);
  font-size: 11px; font-weight: 500; text-align: left; width: 100%;
}
.mode-option:hover { background: var(--surface-2); border-color: var(--border); }
.mode-option.selected { background: var(--accent-soft); border-color: rgba(91,91,214,.18); font-weight: 700; color: var(--accent); }
.secondary-btn,.primary-btn,.text-btn{
  border:1px solid var(--border);border-radius:8px;padding:7px 11px;font-size:11px;font-weight:750;min-height:34px
}
.secondary-btn{background:var(--surface);color:var(--text)}
.secondary-btn:hover{background:var(--surface-2)}
.primary-btn{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 6px 16px rgba(91,91,214,.2)}
.primary-btn:hover{background:var(--accent-2)}
.primary-btn:disabled{opacity:.55;cursor:not-allowed}
.text-btn{background:transparent;border:0;color:var(--accent);padding:3px}
.spark{margin-right:3px}
.custom-strip{display:flex;align-items:center;gap:10px;padding:6px 16px;border-bottom:1px solid var(--border);background:var(--surface-2);font-size:11px}
.custom-label{font-weight:750;color:var(--accent)}.custom-strip #customInstructionPreview{color:var(--muted);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hidden{display:none!important}
.editor-stage{min-height:0;flex:1;display:grid;grid-template-columns:minmax(var(--editor-min),1fr) 8px minmax(var(--editor-min),1fr);padding:10px;gap:0}
.pane{min-width:0;min-height:0;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:11px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.pane-head{height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 9px 0 12px;border-bottom:1px solid var(--border);background:var(--surface)}
.pane-head>div:first-child{display:flex;align-items:center;gap:8px}
.pane-kicker{font-size:10px;font-weight:800;letter-spacing:.10em;color:var(--muted-2)}
.result-kicker{color:var(--accent)}
.pane-title{font-size:11px;font-weight:750}
.pane-doc-name-input, .pane-doc-name-display {
  flex: 1 1 auto;
  margin: 0 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  padding: 4px 6px;
  outline: none;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.pane-doc-name-input:hover, .pane-doc-name-input:focus {
  border-color: var(--border);
  background: var(--surface-2);
}
.pane-actions{display:flex;gap:3px;flex-shrink:0;align-items:center}
.pane-actions .toolbar-sep{height:28px;margin:0 2px}
/* ── Editor Toolbar ─────────────────────────────── */
.editor-toolbar-wrapper{
  display:flex;align-items:center;
  position:sticky;top:0;z-index:10;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
  min-height:36px;
  padding-right: 3px;
}
.editor-toolbar{
  display:flex;align-items:center;gap:2px;padding:4px 7px;
  flex-wrap:nowrap;
  flex:1;min-width:0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.editor-toolbar::-webkit-scrollbar {
  height: 4px;
}
.editor-toolbar::-webkit-scrollbar-track {
  background: transparent;
}
.editor-toolbar::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: 4px;
}
.toolbar-btn{
  width:28px;height:28px;border:1px solid transparent;border-radius:6px;
  background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;cursor:pointer;transition:.14s ease;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  padding:0;line-height:1;
  flex-shrink: 0;
}
.toolbar-btn:hover{background:var(--surface-3);color:var(--text);border-color:var(--border)}
.toolbar-btn:focus-visible,.mini-btn:focus-visible,.icon-btn:focus-visible,.secondary-btn:focus-visible,.primary-btn:focus-visible,.mode-picker-trigger:focus-visible,.model-picker-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.toolbar-btn.active{background:var(--accent-soft);color:var(--accent);border-color:rgba(91,91,214,.2)}
.toolbar-sep{width:1px;height:20px;background:var(--border-strong);margin:0 4px; flex-shrink:0;}

/* Toolbar Dropdown */
.toolbar-dropdown { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); z-index: 10; min-width: 140px; border-radius: 6px; padding: 4px; flex-direction: column; gap: 2px; }
.toolbar-dropdown:hover > .dropdown-menu { display: flex; }
.dropdown-menu button { background: none; border: none; padding: 6px 12px; text-align: left; cursor: pointer; color: var(--text); border-radius: 4px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.dropdown-menu button:hover { background: var(--surface-3); }

/* Symbols Menu (must be after dropdown-menu to override display: flex) */
.symbols-menu {
  position: absolute; top: 100%; left: 0; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); z-index: 10; border-radius: 6px; padding: 4px;
  grid-template-columns: repeat(6, 1fr); gap: 2px; min-width: 200px; width: max-content;
}
.toolbar-dropdown:hover > .symbols-menu { display: grid !important; }
.symbols-menu button { justify-content: center; padding: 6px; }
.menu-header { grid-column: 1 / -1; font-size: 10px; font-weight: 800; color: var(--muted); padding: 4px 6px 2px; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }
.menu-header:first-child { margin-top: 0; }

/* ── Editor wrap ────────────────────────────────── */
.editor-wrap{min-height:0;flex:1;position:relative;overflow:auto}
.editor.pane-body{flex:1;overflow-y:auto;position:relative}
.editor-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--surface); z-index: 5; }
.spinner { width: 24px; height: 24px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.math-block { display: block !important; text-align: center !important; margin: 12px 0; }
.math-inline { display: inline-block; }


/* TipTap Table Styles */
.tiptap table { border-collapse: collapse; table-layout: fixed; width: 100%; margin: 0; overflow: hidden; }
.tiptap td, .tiptap th { min-width: 1em; border: 1px solid var(--border); padding: 5px 8px; vertical-align: top; box-sizing: border-box; position: relative; }
.tiptap th { background-color: var(--surface-hover); font-weight: bold; text-align: left; }
.tiptap .selectedCell:after { z-index: 2; position: absolute; content: ""; left: 0; right: 0; top: 0; bottom: 0; background: rgba(200, 200, 255, 0.4); pointer-events: none; }
.tiptap .column-resize-handle { position: absolute; right: -2px; top: 0; bottom: -2px; width: 4px; background-color: var(--accent); pointer-events: none; }

.tiptap{min-height:100%;padding:12px 20px 80px;outline:0;font-size:13px;line-height:1.7;color:var(--text)}
.tiptap p{margin:0 0 12px}.tiptap h1{font-size:24px;line-height:1.2;margin:0 0 16px}.tiptap h2{font-size:19px;margin:18px 0 10px}.tiptap h3{font-size:15px;margin:14px 0 8px}
.tiptap strong{font-weight:800}.tiptap em{font-style:italic}.tiptap u{text-decoration:underline}
.tiptap ul,.tiptap ol{padding-left:24px;margin:8px 0 14px}.tiptap li{margin:4px 0}
.tiptap blockquote{border-left:3px solid var(--accent);margin:14px 0;padding:8px 14px;background:var(--accent-soft);border-radius:0 8px 8px 0}
.tiptap a{color:var(--accent);text-decoration:underline}
.tiptap code{background:var(--surface-3);padding:2px 5px;border-radius:5px;font-size:.9em}
.tiptap pre{background:#111827;color:#e5e7eb;padding:14px;border-radius:9px;overflow:auto}
.tiptap pre code{background:transparent;color:inherit;padding:0;border-radius:0;font-size:inherit}
.tiptap hr{border:0;border-top:1px solid var(--border);margin:20px 0}
.tiptap table{border-collapse:collapse;width:100%;margin:14px 0;font-size:12px}
.tiptap th,.tiptap td{border:1px solid var(--border-strong);padding:7px 9px;vertical-align:top}
.tiptap th{background:var(--surface-2);font-weight:800}
.tiptap .selectedCell{background:var(--accent-soft)}
.tiptap p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;color:var(--muted-2);pointer-events:none;height:0}
.pane-foot{height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 11px;border-top:1px solid var(--border);color:var(--muted-2);font-size:10px;background:var(--surface-2)}
.splitter{cursor:col-resize;position:relative}.splitter:after{content:"";position:absolute;left:3px;top:45%;height:32px;width:2px;border-radius:2px;background:var(--border)}.splitter:hover:after{background:var(--border-strong)}
.empty-result{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;color:var(--muted);pointer-events:none;background:linear-gradient(180deg,transparent,var(--surface) 35%)}
.empty-result strong{font-size:13px;color:var(--text)}.empty-result span{font-size:11px;max-width:250px;text-align:center;line-height:1.5}
.empty-icon{width:38px;height:38px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:18px}
.pane-single{grid-column:1/4}
.toast-region{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:20}
.toast{padding:10px 12px;border:1px solid var(--border);background:var(--surface);color:var(--text);box-shadow:var(--shadow);border-radius:10px;font-size:10px;max-width:310px}
.toast.error{border-color:rgba(212,90,90,.3)}.toast.success{border-color:rgba(46,155,103,.3)}
.modal{width:min(520px,calc(100vw - 32px));border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text);box-shadow:0 30px 90px rgba(0,0,0,.25);padding:0}
.modal::backdrop{background:rgba(15,23,42,.42);backdrop-filter:blur(3px)}
.modal form{padding:20px}.modal-head{display:flex;align-items:flex-start;justify-content:space-between}.modal h2{margin:4px 0 0;font-size:18px}
.modal-copy{font-size:11px;color:var(--muted);line-height:1.6}
.modal textarea{width:100%;resize:vertical;border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:10px;padding:11px;outline:0;font-size:12px;line-height:1.5}
.modal textarea:focus{border-color:var(--accent)}
.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:24px}

.custom-model-list, .cache-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.model-item, .cache-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; background: var(--surface-2); border-radius: 6px; font-size: 11px; }
.cache-status { color: var(--success); font-weight: bold; }
.cache-status.missing { color: var(--muted); font-weight: normal; }

.model-info{font-size:11px;color:var(--muted);padding:10px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2)}
.progress-track{height:7px;background:var(--surface-3);border-radius:99px;overflow:hidden;margin-top:14px}
.progress-bar{height:100%;width:0;background:var(--accent);transition:width .2s ease}
.progress-label{font-size:9px;color:var(--muted);margin-top:6px}
@media (max-width:900px){
  .sidebar{width:220px;flex-basis:220px}
  .model-select{flex:1}.model-select select{max-width:none;flex:1}
  .ai-toolbar{padding:6px 10px;gap:6px}
  .ai-left,.ai-controls{gap:6px}
  .model-picker{min-width:0;flex:1}
  .model-picker-trigger{max-width:180px}
}
#sidebarToggleBtn svg { transition: transform 0.2s ease; }
#sidebarToggleBtn.collapsed svg { transform: rotate(180deg); }
@media (max-width:700px){
  .workspace { overflow-x: hidden; position: relative; }
  .sidebar { width: 260px; flex: 0 0 260px; position: absolute; height: 100%; z-index: 101; top: 0; left: 0; }
  .sidebar.collapsed { width: 0 !important; flex-basis: 0 !important; padding: 0 !important; }
  .sidebar-overlay.active { display: block; position: absolute; inset: 0; background: rgba(15, 23, 42, 0.4); z-index: 100; backdrop-filter: blur(2px); cursor: pointer; }
  .main-area { flex: 0 0 100%; transition: .2s ease; }
  .document-bar{padding:0 10px}
  .ai-toolbar{
    padding:6px 8px!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:4px!important;
    overflow:visible!important;
  }
  .ai-left{
    width:auto!important;
    flex:1 1 auto;
    min-width:0;
    flex-wrap:nowrap!important;
    gap:4px!important;
  }
  .ai-controls{
    width:auto!important;
    flex:0 0 auto;
    flex-wrap:nowrap!important;
    gap:4px!important;
  }
  
  #aiStatus, .picker-provider, .picker-divider, .mode-select span, #customPromptBtn{display:none!important}
  
  .ai-chip{padding:0;border:none;background:transparent;min-width:auto;flex-shrink:0;}
  
  #sidebarToggleBtn{flex-shrink:0!important;display:grid!important;}
  
  .model-picker{min-width:0;flex:1 1 auto;}
  .model-picker-trigger{
    padding:6px 8px;
    width:100%;
    max-width:130px;
    min-width:0;
    font-size:11px;
    border-radius:6px;
    gap:3px;
    overflow:hidden;
  }
  .picker-model{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;}
  
  .mode-picker-trigger{padding:6px 8px;max-width:90px;border-radius:6px;font-size:11px;flex-shrink:0;gap:3px;overflow:hidden;}
  .picker-mode-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;}
  
  #generateBtn{padding:6px 10px;font-size:11px;border-radius:6px;white-space:nowrap;flex-shrink:0;}

  .editor-stage{padding:6px;display:grid!important;grid-template-columns:1fr!important;gap:6px;}
  .pane{border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,0.06);}
  .pane-head{height:34px;padding:0 10px;}
  .pane-doc-name-display, .pane-doc-name-input{font-size:10px;margin:0 8px;}
  
  .tiptap{padding:14px 12px 60px}
  .splitter{cursor:row-resize;margin:2px 0;}
  .splitter:after{left:50%;transform:translateX(-50%);top:5px;height:3px;width:40px;border-radius:3px;background:var(--border-strong)}
}

/* v0.4.0: model progress, fixed title, and footer links */
.progress-header{display:flex;justify-content:space-between;gap:12px;font-size:9px;color:var(--muted);margin-top:6px}
.creator-link,.feedback-link{color:inherit;text-decoration:none}
.creator-link:hover,.feedback-link:hover{text-decoration:underline}

/* v0.4.0 */
.primary-btn.stop-btn{background:var(--danger);border-color:var(--danger);box-shadow:0 6px 16px rgba(212,90,90,.22)}
.primary-btn.stop-btn:hover{filter:brightness(.96);background:var(--danger);}
.stop-icon{font-size:9px;margin-right:4px}
.danger-zone{background:rgba(212,90,90,.035);border-radius:10px;padding-left:10px;padding-right:10px}
.danger-action{color:var(--danger);border-color:rgba(212,90,90,.3)}
.danger-action:hover{background:rgba(212,90,90,.06);}
.progress-header{min-height:18px}
@media (max-width:700px){.doc-title-wrap{width:42vw}.doc-title{font-size:12px}}

/* v0.4.1: Document item 3-dot menu & generating highlight */
.doc-item-row{display:flex;align-items:center;gap:0;position:relative}
.doc-item-row .doc-item{flex:1;min-width:0}
.doc-item-menu-btn{
  width:28px;height:28px;border:none;background:transparent;color:var(--muted-2);
  display:flex;align-items:center;justify-content:center;padding:0;border-radius:7px;font-size:16px;cursor:pointer;
  opacity:0;transition:opacity .15s ease,background .14s ease;flex-shrink:0;
  line-height:1;letter-spacing:1px;
}
.doc-item-row:hover .doc-item-menu-btn,
.doc-item-menu-btn.open{opacity:1}
.doc-item-menu-btn:hover{background:var(--surface-3);color:var(--text)}
.doc-item-dropdown{
  display:none;position:absolute;right:0;top:100%;z-index:30;
  min-width:130px;padding:4px;background:var(--surface);
  border:1px solid var(--border);border-radius:9px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);flex-direction:column;gap:2px;
}
.doc-item-dropdown.visible{display:flex}
.doc-item-dropdown button{
  background:none;border:none;padding:7px 10px;text-align:left;cursor:pointer;
  color:var(--text);border-radius:6px;font-size:11px;font-weight:600;
  display:flex;align-items:center;gap:7px;
}
.doc-item-dropdown button:hover{background:var(--surface-2)}
.doc-item-dropdown button.danger-option{color:var(--danger)}
.doc-item-dropdown button.danger-option:hover{background:rgba(212,90,90,.07)}

/* Generating highlight: pulsing left accent border */
.doc-item.generating{
  border-left:3px solid var(--accent);
  background:var(--accent-soft);
  animation:doc-gen-pulse 1.6s ease-in-out infinite;
}
@keyframes doc-gen-pulse{
  0%,100%{background:var(--accent-soft)}
  50%{background:rgba(91,91,214,.12)}
}

/* Sidebar utilities (save state, theme, settings) */
.sidebar-utils{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-top:1px solid var(--border);gap:4px}
.sidebar-utils .save-state{font-size:10px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:center;display:block}
.sidebar-utils>div{flex-shrink:0}
.sidebar-utils-actions{display:flex;gap:4px}
.sidebar-toggle-btn{font-size:15px!important;width:32px!important;height:32px!important}
.sidebar-head{gap:8px}
.sidebar-head .brand{min-width:0;flex:1;overflow:hidden}
.sidebar.collapsed .sidebar-head .brand{display:none}

/* ── v0.5.0 Model Picker ────────────────────────── */
.model-picker{position:relative;display:inline-flex;align-items:center}
.model-picker-trigger{
  display:flex;align-items:center;gap:5px;padding:6px 10px;
  border:1px solid var(--border);border-radius:8px;background:var(--surface-2);
  color:var(--text);font-size:10px;cursor:pointer;transition:.14s ease;
  white-space:nowrap;max-width:240px;
}
.model-picker-trigger:hover{border-color:var(--border-strong);background:var(--surface-3)}
.model-picker-trigger.open{border-color:var(--accent);box-shadow:0 0 0 2px rgba(91,91,214,.12)}
.picker-provider{font-weight:800;color:var(--accent);flex-shrink:0}
.picker-divider{color:var(--muted-2)}
.picker-model{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker-caret{color:var(--muted-2);font-size:8px;margin-left:2px;flex-shrink:0}

.model-picker-menu{
  display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:50;
  min-width:300px;max-width:380px;max-height:380px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 16px 48px rgba(0,0,0,.18);padding:6px;
}
.model-picker-menu.open{display:block}
.model-group{margin-bottom:2px}
.model-group-header{
  font-size:9px;font-weight:850;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted-2);padding:8px 10px 4px;display:flex;align-items:center;gap:6px;
}
.model-group-header::before{content:"";width:3px;height:12px;border-radius:2px;background:var(--accent);flex-shrink:0}
.model-divider{height:1px;background:var(--border);margin:4px 8px}
.model-option{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 10px;border-radius:8px;cursor:pointer;transition:.12s ease;
  border:1px solid transparent;
}
.model-option:hover{background:var(--surface-2);border-color:var(--border)}
.model-option.selected{background:var(--accent-soft);border-color:rgba(91,91,214,.18)}
.model-option-info{display:flex;align-items:center;gap:7px;min-width:0;flex:1}
.model-option-bullet{width:6px;height:6px;border-radius:50%;background:transparent;flex-shrink:0}
.model-option.selected .model-option-bullet{background:var(--accent)}
.model-option-name{font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.model-option-right{display:flex;align-items:center;gap:5px;flex-shrink:0}
.model-badge{font-size:8px;font-weight:700;padding:2px 6px;border-radius:4px;white-space:nowrap}
.model-badge.cached{color:var(--success);background:rgba(46,155,103,.1)}
.model-badge.ready{color:var(--success);background:rgba(46,155,103,.1)}
.model-badge.needs-key{color:var(--muted);background:var(--surface-3)}
.model-badge.needs-download{color:var(--muted-2);background:var(--surface-3)}
.model-option-download{
  width:22px;height:22px;border:1px solid var(--border);border-radius:6px;
  background:var(--surface);color:var(--accent);display:grid;place-items:center;
  font-size:11px;cursor:pointer;transition:.14s ease;flex-shrink:0;padding:0;
}
.model-option-download:hover{background:var(--accent-soft);border-color:var(--accent)}

/* ── Settings Dialog & Vertical Tabs ─────────────── */
.modal.settings-modal{
  width:min(720px,calc(100vw - 28px));
  max-width:720px;
  padding:0;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 30px 90px rgba(0,0,0,.25);
}
.settings-form{
  padding:0 !important;
  display:flex;
  flex-direction:column;
  max-height:85vh;
  margin:0;
  width: 100%;
}
.settings-modal-head{
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
  background:var(--surface);
  flex-shrink:0;
}
.settings-modal-head h2{
  margin:2px 0 0;
  font-size:17px;
  font-weight:750;
  color:var(--text);
}
.settings-head-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.settings-save-btn{
  padding:6px 14px;
  font-size:11px;
  font-weight:750;
  border-radius:8px;
  height:fit-content;
  white-space:nowrap;
}
.settings-layout{
  display:flex;
  flex-direction:row;
  flex:1;
  min-height:0;
  overflow:hidden;
  background:var(--surface);
}
.settings-tabs{
  width:175px;
  flex-shrink:0;
  background:var(--surface-2);
  border-right:1px solid var(--border);
  padding:14px 8px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
}
.settings-tabs-list{
  display:flex;
  flex-direction:column;
  gap:4px;
  width:100%;
  flex:1;
}
.settings-tab.tab-bottom {
  margin-top: auto;
}
.settings-tab{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  padding:9px 12px;
  border:1px solid transparent;
  border-left:3px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  font-size:11px;
  font-weight:650;
  font-family:inherit;
  text-align:left;
  cursor:pointer;
  position:relative;
  transition:background .14s ease,color .14s ease,border-color .14s ease;
  user-select:none;
  box-sizing:border-box;
}
.settings-tab:hover{
  color:var(--text);
  background:var(--surface-3);
}
.settings-tab:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
}
.settings-tab.active{
  color:var(--accent);
  background:var(--accent-soft);
  font-weight:750;
  border-color:rgba(91,91,214,.18);
  border-left-color:var(--accent);
}
.settings-tab-icon{
  flex-shrink:0;
  color:inherit;
  opacity:.85;
  transition:opacity .14s ease;
}
.settings-tab.active .settings-tab-icon{
  opacity:1;
  color:var(--accent);
}
.settings-tab-label{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.settings-panels{
  flex:1;
  min-width:0;
  padding:20px 24px;
  max-height:min(65vh,520px);
  overflow-y:auto;
  box-sizing:border-box;
}
.settings-panel{
  display:none;
}
.settings-panel.active{
  display:block;
  animation:fadeInPanel .14s ease;
}
.settings-panel:focus-visible{
  outline:none;
}
@keyframes fadeInPanel{
  from{opacity:0;transform:translateY(2px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes highlightPulse{
  0%{box-shadow:0 0 0 0 rgba(91,91,214,.55);border-color:var(--accent)}
  50%{box-shadow:0 0 0 5px rgba(91,91,214,.28);border-color:var(--accent)}
  100%{box-shadow:0 0 0 0 rgba(91,91,214,0)}
}
.highlight-pulse{
  animation:highlightPulse 1.6s ease-out !important;
  border-color:var(--accent) !important;
}

/* Settings Dialog Responsiveness & Accessibility on smaller screens */
@media (max-width:680px){
  .settings-tabs{width:145px;padding:12px 6px}
  .settings-tab{padding:8px 10px;font-size:10.5px;gap:7px}
  .settings-panels{padding:16px 18px}
}

@media (max-width:540px){
  .modal.settings-modal{
    width:calc(100vw - 16px);
    max-height:92vh;
    border-radius:12px;
  }
  .settings-modal-head{
    padding:10px 14px;
  }
  .settings-modal-head h2{
    font-size:15px;
  }
  .settings-save-btn{
    padding:5px 10px;
    font-size:10px;
  }
  .settings-layout{
    flex-direction:column;
  }
  .settings-tabs{
    width:100%;
    border-right:none;
    border-bottom:1px solid var(--border);
    padding:6px 10px;
    flex-shrink:0;
  }
  .settings-tabs-list{
    flex-direction:row;
    gap:4px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .settings-tab.tab-bottom {
    margin-top: 0;
  }
  .settings-tab{
    flex:1;
    justify-content:center;
    padding:7px 10px;
    font-size:10px;
    border-left:1px solid transparent;
    border-bottom:2px solid transparent;
    border-radius:6px;
  }
  .settings-tab.active{
    border-left-color:transparent;
    border-bottom-color:var(--accent);
  }
  .settings-panels{
    padding:14px;
    max-height:60vh;
  }
}

/* ── v0.5.0 Settings Sections ───────────────────── */
.settings-section{margin-bottom:20px}
.settings-section-header{
  font-size:11px;font-weight:800;color:var(--text);
  padding-bottom:8px;margin-bottom:12px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:7px;
}
.settings-section-header::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--accent);flex-shrink:0}

/* ── v0.5.0 Model Cards ─────────────────────────── */
.model-card{
  border:1px solid var(--border);border-radius:10px;padding:10px 12px;
  background:var(--surface-2);margin-bottom:8px;
}
.model-card-name{font-size:11px;font-weight:750;display:flex;align-items:center;gap:6px}
.model-card-specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.model-spec{
  font-size:9px;color:var(--muted);padding:2px 7px;
  border:1px solid var(--border);border-radius:5px;background:var(--surface);
}
.model-card-status{font-size:10px;margin-top:6px;display:flex;align-items:center;gap:5px}
.model-card-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:8px}
.model-card-actions button{font-size:10px;padding:5px 10px}
.default-badge{
  font-size:8px;font-weight:800;padding:2px 7px;border-radius:4px;
  background:var(--accent-soft);color:var(--accent);letter-spacing:.04em;
}

/* ── v0.5.0 Add Model Form ──────────────────────── */
.add-model-section{margin-top:8px}
.add-model-toggle{
  font-size:10px;font-weight:700;color:var(--accent);background:transparent;
  border:1px dashed var(--border);border-radius:8px;padding:7px 12px;
  width:100%;cursor:pointer;transition:.14s ease;
}
.add-model-toggle:hover{border-color:var(--accent);background:var(--accent-soft)}
.add-model-form{
  margin-top:8px;padding:10px;border:1px solid var(--border);
  border-radius:8px;background:var(--surface);
  display:none;flex-direction:column;gap:8px;
}
.add-model-form.open{display:flex}
.add-model-form .form-input{
  width:100%;border:1px solid var(--border);background:var(--surface-2);
  color:var(--text);border-radius:7px;padding:7px 10px;outline:0;font-size:11px;
}
.add-model-form .form-input:focus{border-color:var(--accent)}
.add-model-validation{font-size:10px;color:var(--muted);line-height:1.5}
.add-model-validation.valid{color:var(--success)}
.add-model-validation.invalid{color:var(--danger)}

/* ── v0.5.0 API Model Row ───────────────────────── */
.api-model-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 10px;border:1px solid var(--border);border-radius:8px;
  background:var(--surface-2);margin-bottom:6px;font-size:11px;
}
.api-model-row-name{font-weight:600;display:flex;align-items:center;gap:6px}
.api-model-row button.remove-btn{
  width:22px;height:22px;border:1px solid var(--border);border-radius:6px;
  background:var(--surface);color:var(--danger);display:grid;place-items:center;
  font-size:11px;cursor:pointer;transition:.14s ease;padding:0;
}
.api-model-row button.remove-btn:hover{background:rgba(212,90,90,.08);border-color:rgba(212,90,90,.3)}

/* ── v0.5.0 Master Reset ────────────────────────── */
.master-reset{
  margin-top:16px;padding:14px;border:1px solid rgba(212,90,90,.25);
  border-radius:10px;background:rgba(212,90,90,.03);
}
.master-reset-label{font-size:11px;font-weight:800;color:var(--danger);margin-bottom:4px}
.master-reset-note{font-size:10px;color:var(--muted);line-height:1.5;margin-bottom:10px}
.master-reset-btn{
  width:100%;padding:9px;border:1px solid rgba(212,90,90,.35);border-radius:8px;
  background:rgba(212,90,90,.06);color:var(--danger);font-weight:800;font-size:11px;
  cursor:pointer;transition:.14s ease;
}
.master-reset-btn:hover{background:rgba(212,90,90,.12);border-color:rgba(212,90,90,.5)}

/* ── v0.5.0 Form input (settings) ───────────────── */
.modal .form-input{
  width:100%;border:1px solid var(--border);background:var(--surface-2);
  color:var(--text);border-radius:8px;padding:8px 10px;outline:0;font-size:11px;
}
.modal .form-input:focus{border-color:var(--accent)}
.modal-field label{font-size:11px;font-weight:700;color:var(--text);display:block;margin-bottom:5px}

/* ── TipTap Formats (Lists, Tables, Blockquotes) ── */
.tiptap ul, .tiptap ol { padding-left: 1.5rem; margin: 0.5rem 0; }
.tiptap li { margin-bottom: 0.25rem; }
.tiptap ul[data-type="taskList"] { list-style: none; padding: 0; }
.tiptap ul[data-type="taskList"] li { display: flex; align-items: flex-start; }
.tiptap ul[data-type="taskList"] li > label { margin-right: 0.5rem; user-select: none; }
.tiptap ul[data-type="taskList"] li > div { flex: 1; }
.tiptap ul[data-type="taskList"] input[type="checkbox"] { margin-top: 3px; cursor: pointer; }
.tiptap table { border-collapse: collapse; margin: 1rem 0; width: 100%; overflow: hidden; border-radius: 4px; box-shadow: 0 0 0 1px var(--border); }
.tiptap table th, .tiptap table td { border: 1px solid var(--border); padding: 6px 10px; min-width: 1em; }
.tiptap table th { background: var(--surface-2); font-weight: bold; text-align: left; }
.tiptap blockquote { border-left: 3px solid var(--accent); margin: 0.75rem 0; color: var(--text); background: var(--surface-2); padding: 8px 14px; border-radius: 0 8px 8px 0; }
.tiptap mark {
  background-color: #fef08a;
  color: #1e293b;
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 500;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
[data-theme="dark"] .tiptap mark {
  background-color: #854d0e;
  color: #fef08a;
}

/* ── GitHub-Style Alert Callout Boxes ── */
.tiptap blockquote.callout,
blockquote.callout {
  border-left: 4px solid var(--callout-border, var(--accent));
  background: var(--callout-bg, var(--surface-2));
  border-radius: 8px;
  padding: 10px 14px;
  margin: 1rem 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.tiptap blockquote.callout .callout-title,
blockquote.callout .callout-title {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  color: var(--callout-title-color, var(--text));
  user-select: none;
}
.tiptap blockquote.callout p:last-child,
blockquote.callout p:last-child {
  margin-bottom: 0;
}

/* Callout Variants (Light Mode) */
.tiptap blockquote.callout-tip, blockquote.callout-tip {
  --callout-border: #10b981;
  --callout-bg: rgba(16, 185, 129, 0.08);
  --callout-title-color: #047857;
}
.tiptap blockquote.callout-warning, blockquote.callout-warning {
  --callout-border: #f59e0b;
  --callout-bg: rgba(245, 158, 11, 0.08);
  --callout-title-color: #b45309;
}
.tiptap blockquote.callout-important, blockquote.callout-important {
  --callout-border: #6366f1;
  --callout-bg: rgba(99, 102, 241, 0.08);
  --callout-title-color: #4338ca;
}
.tiptap blockquote.callout-note, blockquote.callout-note {
  --callout-border: #0ea5e9;
  --callout-bg: rgba(14, 165, 233, 0.08);
  --callout-title-color: #0369a1;
}
.tiptap blockquote.callout-caution, blockquote.callout-caution {
  --callout-border: #ef4444;
  --callout-bg: rgba(239, 68, 68, 0.08);
  --callout-title-color: #b91c1c;
}

/* Callout Variants (Dark Mode) */
[data-theme="dark"] .tiptap blockquote.callout-tip, [data-theme="dark"] blockquote.callout-tip {
  --callout-border: #34d399;
  --callout-bg: rgba(16, 185, 129, 0.12);
  --callout-title-color: #6ee7b7;
}
[data-theme="dark"] .tiptap blockquote.callout-warning, [data-theme="dark"] blockquote.callout-warning {
  --callout-border: #fbbf24;
  --callout-bg: rgba(245, 158, 11, 0.12);
  --callout-title-color: #fcd34d;
}
[data-theme="dark"] .tiptap blockquote.callout-important, [data-theme="dark"] blockquote.callout-important {
  --callout-border: #818cf8;
  --callout-bg: rgba(99, 102, 241, 0.12);
  --callout-title-color: #a5b4fc;
}
[data-theme="dark"] .tiptap blockquote.callout-note, [data-theme="dark"] blockquote.callout-note {
  --callout-border: #38bdf8;
  --callout-bg: rgba(14, 165, 233, 0.12);
  --callout-title-color: #7dd3fc;
}
[data-theme="dark"] .tiptap blockquote.callout-caution, [data-theme="dark"] blockquote.callout-caution {
  --callout-border: #f87171;
  --callout-bg: rgba(239, 68, 68, 0.12);
  --callout-title-color: #fca5a5;
}


/* document import */
.import-file-row{display:flex;align-items:center;gap:10px;margin-top:18px;padding:12px;border:1px dashed var(--border);border-radius:12px;background:var(--surface-2)}
.import-file-name{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.import-options{display:grid;gap:8px;margin-top:14px}
.import-option{display:flex;gap:10px;align-items:flex-start;padding:11px;border:1px solid var(--border);border-radius:10px;cursor:pointer;background:var(--surface)}
.import-option:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.import-option input{margin-top:3px}
.import-option span{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--text)}
.import-option small{font-size:10px;color:var(--muted);line-height:1.5}
.import-progress{margin-top:14px}
.import-warning{margin-top:12px;padding:9px 10px;border-radius:9px;background:var(--surface-2);color:var(--muted);font-size:10px;line-height:1.5}
.import-warning.error{color:var(--danger,#b42318)}
.hidden{display:none!important}

/* enhanced import model picker */
.import-ai-model{display:grid;gap:6px;margin-top:12px;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
.import-ai-model label{font-size:11px;font-weight:750;color:var(--text)}
.import-ai-model select{width:100%;min-height:34px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);padding:6px 9px;font:inherit;font-size:11px}
.import-ai-model small{font-size:10px;color:var(--muted);line-height:1.45}
.import-ai-model.hidden{display:none}

/* ── v0.7.1 Export format picker ───────────────── */
.export-format-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 6px}
.export-format-btn{display:flex;align-items:center;gap:11px;text-align:left;padding:13px 12px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);color:var(--text);cursor:pointer;transition:.14s ease}
.export-format-btn:hover{border-color:var(--accent);background:var(--surface-3);transform:translateY(-1px)}
.export-format-print{grid-column:1 / -1}
.export-format-btn strong{display:block;font-size:12px}.export-format-btn small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.export-format-icon{width:34px;height:38px;display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:6px;background:var(--surface);font-size:11px;font-weight:900;flex-shrink:0}
.export-format-btn[hidden]{display:none!important}
.export-format-btn > span:nth-child(2){flex:1}
.export-format-source-notes{grid-column:1 / -1;border-color:var(--border-strong);background:var(--surface-2);position:relative}
.export-format-source-notes:hover{border-color:var(--accent);background:var(--surface-3);box-shadow:0 4px 14px rgba(91,91,214,.1);transform:translateY(-1px)}
.export-format-icon-source{color:var(--accent);background:var(--accent-soft);border-color:rgba(91,91,214,.3)}
.export-format-pill{font-size:10px;font-weight:700;padding:3px 8px;border-radius:99px;background:var(--accent-soft);color:var(--accent);border:1px solid rgba(91,91,214,.25);white-space:nowrap;margin-left:auto}
@media (max-width:500px){.export-format-grid{grid-template-columns:1fr}}


/* v0.9.4 export/status and modal error visibility */
.export-status{position:fixed;right:18px;bottom:18px;width:min(330px,calc(100vw - 36px));padding:11px 13px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);box-shadow:0 18px 50px rgba(0,0,0,.22);z-index:2147483000;pointer-events:none}
.export-status-head{display:flex;justify-content:space-between;gap:12px;font-size:10px;font-weight:700}
.export-status-track{height:6px;margin-top:8px;background:var(--surface-3);border-radius:99px;overflow:hidden}
.export-status-bar{height:100%;width:0;background:var(--accent);transition:width .18s ease}
.modal-error{margin:12px 0 2px;padding:9px 11px;border:1px solid rgba(212,90,90,.5);background:rgba(212,90,90,.1);color:var(--text);border-radius:9px;font-size:10px;line-height:1.5}
.modal-error.hidden{display:none}

.export-status[hidden]{display:none!important}
.modal-error::before{content:"⚠ ";font-weight:800}

/* ================================
   MINDMAP MODE
   ================================ */
.result-editor-wrap.mindmap-active #resultEditor { display: none; }
.mindmap-view { min-height:0; flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--surface); }
.mindmap-view.hidden { display:none!important; }
.mindmap-toolbar { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; border-bottom:1px solid var(--border); background:var(--surface-2); }
.mindmap-tabs { display:flex; gap:4px; min-width:0; }
.mindmap-tab { border:1px solid transparent; background:transparent; color:var(--muted); border-radius:7px; padding:6px 9px; font-size:10px; font-weight:700; cursor:pointer; }
.mindmap-tab:hover { background:var(--surface-3); color:var(--text); }
.mindmap-tab.selected { background:var(--accent-soft); color:var(--accent); border-color:rgba(91,91,214,.16); }
.mindmap-section-select { max-width:190px; min-width:100px; border:1px solid var(--border); border-radius:7px; padding:6px 8px; background:var(--surface); color:var(--text); font-size:10px; }
.mindmap-coverage { flex:0 0 auto; padding:6px 12px; border-bottom:1px solid var(--border); color:var(--muted); font-size:9px; line-height:1.4; }
.mindmap-coverage strong { color:var(--text); }
.mindmap-canvas { min-height:0; flex:1; overflow:auto; padding:16px; display:flex; align-items:flex-start; justify-content:center; }
.mindmap-svg-wrap { min-width:100%; display:flex; justify-content:center; align-items:flex-start; }
.mindmap-svg-wrap svg { max-width:none; height:auto; min-width:760px; }
.mindmap-loading,.mindmap-empty { width:100%; min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--muted); font-size:11px; text-align:center; }
.mindmap-empty strong { color:var(--text); font-size:12px; }
.mindmap-empty span { max-width:420px; }
.mindmap-view .mindmap-svg-wrap .nodeLabel { font-size:12px; }
@media (max-width:700px){
  .mindmap-toolbar { align-items:stretch; flex-direction:column; }
  .mindmap-tabs { overflow:auto; }
  .mindmap-section-select { max-width:none; width:100%; }
  .mindmap-canvas { padding:10px; justify-content:flex-start; }
}
.mindmap-fallback-note{flex:0 0 auto;padding:7px 12px;border-bottom:1px solid var(--border);background:var(--surface-2);color:var(--muted);font-size:9px;text-align:center}


/* Help & information / sidebar footer */
.sidebar-utils{
  position:relative;
  display:grid !important;
  grid-template-columns:1fr auto 1fr;
  align-items:center !important;
  justify-content:stretch !important;
  width:100%;
  min-height:34px;
  gap:8px;
}
.sidebar-utils-info{display:flex;align-items:center;justify-content:flex-start}
.sidebar-utils-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px}
.info-btn{flex-shrink:0}
.save-state{justify-self:center;white-space:nowrap}
.creator-link{
  color:var(--accent);
  font-weight:700;
  text-decoration:none !important;
  transition:color .15s ease;
}
.creator-link:hover,.creator-link:focus-visible{
  color:var(--accent-2);
  text-decoration:none !important;
}
.info-dialog{width:min(500px,calc(100vw - 32px));}
.info-dialog form{max-height:min(720px,calc(100vh - 40px));overflow:auto;}
.info-links{display:flex;flex-direction:column;gap:8px;margin:18px 0 4px;}
.info-link-card{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:11px;
  color:var(--text);
  background:var(--surface-2);
  text-decoration:none;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.info-link-card:hover{
  border-color:var(--border-strong);
  background:var(--surface-3);
  transform:translateY(-1px);
}
.info-link-icon{
  width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);
  font-weight:800;font-size:14px;
}
.info-link-copy{display:flex;flex-direction:column;gap:3px;min-width:0;}
.info-link-copy strong{font-size:12px;font-weight:750;}
.info-link-copy small{font-size:10px;line-height:1.45;color:var(--muted);}
.info-link-arrow{font-size:15px;color:var(--muted-2);padding-left:6px;}
.info-dialog-footer{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:16px;padding-top:12px;border-top:1px solid var(--border);
  font-size:10px;color:var(--muted-2);
}
.info-dialog-footer a{color:var(--accent);text-decoration:none;font-weight:650;}
.info-dialog-footer a:hover{text-decoration:underline;}

@media (max-width:700px){
  .info-link-card{grid-template-columns:32px minmax(0,1fr) auto;}
  .info-dialog-footer{align-items:flex-start;flex-direction:column;}
}


/* Collapsed sidebar: keep utility controls discoverable and stack them. */
.sidebar.collapsed .sidebar-utils{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
}
.sidebar.collapsed .sidebar-utils-info,
.sidebar.collapsed .sidebar-utils-actions{
  width:100%;
  display:flex !important;
  flex-direction:column !important;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.sidebar.collapsed .save-state{display:none !important;}


/* ================================================================
   v0.15.0 — Phase 4 productivity polish
   Progressive disclosure, focus mode, responsive controls,
   stronger hierarchy, and accessible interaction targets.
   ================================================================ */
:root{
  --radius-sm:6px;
  --radius-md:9px;
  --radius-lg:12px;
  --focus-ring:0 0 0 3px rgba(91,91,214,.16);
}

/* Document navigation: quieter chrome, clearer active document. */
.doc-list-head{font-size:12px;padding-top:10px;padding-bottom:8px}
.document-list{gap:2px;padding-right:2px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.doc-item-row{border-radius:9px}
.doc-item{
  min-height:34px;
  padding:7px 9px 7px 8px;
  border-left:3px solid transparent;
  border-radius:8px;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.doc-item:hover{background:var(--surface-2)}
.doc-item.active{
  background:var(--accent-soft);
  border-color:rgba(91,91,214,.12);
  border-left-color:var(--accent);
}
.doc-item-title{font-size:12px;font-weight:500}
.doc-item.active .doc-item-title{font-weight:650}
.doc-icon{font-size:11px}
.doc-item-menu-btn{width:30px;height:30px}

/* Focus mode: make the active pane feel like the workspace, not a modal card. */
.pane.hidden{display:none!important}
.pane:has(+ .splitter.hidden),
.splitter.hidden + .pane{box-shadow:none}
.editor-stage:has(.splitter.hidden){padding:8px}
.editor-stage:has(.splitter.hidden) .pane{border-radius:9px;box-shadow:none}

/* Pane controls remain discoverable but visually secondary. */
.pane-actions .mini-btn{
  width:30px;height:30px;border-radius:7px;
}
.pane-actions .toolbar-sep{height:20px;margin:0 3px}
.pane-doc-name-input,.pane-doc-name-display{font-size:12px}

/* Editor toolbar: keep primary tools visible, improve scanability and touch targets. */
.editor-toolbar-wrapper{min-height:38px;background:var(--surface-2)}
.editor-toolbar{gap:3px;padding:5px 8px}
.toolbar-btn{
  width:30px;height:28px;border-radius:7px;font-size:11px;
}
.toolbar-sep{height:20px;margin:0 5px;background:var(--border-strong)}
.toolbar-btn:hover{transform:none}
.toolbar-btn:focus-visible,
.mini-btn:focus-visible,
.icon-btn:focus-visible,
.secondary-btn:focus-visible,
.primary-btn:focus-visible,
.mode-picker-trigger:focus-visible,
.model-picker-trigger:focus-visible,
.doc-item:focus-visible,
.doc-item-menu-btn:focus-visible,
.text-btn:focus-visible,
.splitter:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:var(--focus-ring);
}

/* Custom instructions are a compact status, not a second toolbar. */
.custom-strip{
  min-height:32px;
  padding:5px 14px;
  gap:8px;
  background:var(--surface-2);
  font-size:11px;
}
.custom-label{font-size:10px;letter-spacing:.02em}
.custom-strip .text-btn{padding:4px 7px;font-size:10px}

/* Splitter: quiet at rest, obvious while interacting. */
.splitter{width:8px}
.splitter:after{transition:background .14s ease,width .14s ease,height .14s ease}
.splitter:hover:after,.splitter.dragging:after{background:var(--accent);width:3px}
.splitter.dragging{cursor:col-resize}

/* Save state is intentionally quiet but legible. */
.sidebar-utils{padding:7px 8px;min-height:36px}
.save-state{font-size:10px;font-weight:500}

/* Slightly stronger pane footer legibility without competing with content. */
.pane-foot{height:31px;font-size:10px}

/* Do not depend on inline display:none for the restore icon. */
.icon-min{display:none}

/* Desktop toolbar remains fully discoverable; narrower widths progressively simplify. */
@media (max-width:900px){
  .editor-toolbar{scrollbar-width:none}
  .editor-toolbar::-webkit-scrollbar{display:none}
}
@media (max-width:700px){
  .doc-list-head{font-size:11px}
  .doc-item{min-height:36px}
  .editor-toolbar-wrapper{min-height:36px}
  .editor-toolbar{padding:4px 6px;gap:2px}
  .toolbar-btn{width:30px;height:28px}
  .toolbar-sep{margin:0 3px}
  .pane-actions .mini-btn{width:30px;height:30px}
  .editor-stage:has(.splitter.hidden){padding:6px}
  .splitter.dragging{cursor:row-resize}
}

/* Avoid tiny, low-contrast chrome in high-density desktop layouts. */
@media (min-width:701px){
  .ai-chip,.model-picker-trigger,.mode-picker-trigger,.secondary-btn,.primary-btn{font-size:11px}
  .mini-btn{width:30px;height:30px}
}

/* Reduced motion: preserve functionality without animated UI noise. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ================================================================
   v0.16.0 — Workspace redesign
   Calm chrome, stronger hierarchy, document-first layout,
   semantic toolbar grouping, library search, and responsive workspace.
   ================================================================ */
:root{
  --workspace-gap:10px;
  --pane-radius:10px;
  --pane-head-h:40px;
  --toolbar-h:38px;
  --pane-foot-h:27px;
  --sidebar-w:242px;
}

.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}

/* ---------- App frame ---------- */
.sidebar{
  width:var(--sidebar-w);
  flex-basis:var(--sidebar-w);
  padding:14px 10px 9px;
  background:var(--surface);
}
.sidebar-head{padding:0 2px 12px}
.brand{gap:10px}
.brand-icon{width:34px;height:34px}
.brand-name{font-size:18px}
.brand-subtitle{font-size:9px;letter-spacing:.055em}

.main-area{min-width:0;background:var(--bg)}
.ai-toolbar{
  min-height:52px;
  padding:7px 12px;
  gap:10px;
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 rgba(20,35,60,.02);
  position:relative;
  z-index:20;
}
.ai-left,.ai-controls{gap:7px}
.ai-left{min-width:0}
.ai-controls{flex:0 0 auto;padding-left:10px;border-left:1px solid var(--border)}
.ai-chip{
  min-height:32px;
  padding:5px 9px;
  border-color:transparent;
  background:var(--surface-2);
  color:var(--muted);
}
.model-picker-trigger{
  min-height:32px;
  max-width:min(250px,28vw);
  padding:5px 9px;
  font-size:11px;
  border-radius:8px;
}
.picker-model{min-width:0;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mode-picker-trigger{min-height:32px;padding:5px 10px;font-size:11px;border-radius:8px;background:var(--surface)}
.mode-picker-menu{min-width:200px;padding:6px;box-shadow:0 18px 44px rgba(20,35,60,.14)}
.mode-option{font-size:11px;padding:8px 10px}
.mode-customize-option{margin-top:4px;padding-top:9px;border-top:1px solid var(--border)!important;border-radius:6px;color:var(--accent);font-weight:650}
.primary-btn{min-height:34px;border-radius:8px;padding:7px 13px;font-size:11px;font-weight:750}

.sidebar.collapsed .doc-search-wrap,.sidebar.collapsed .creator-credit{display:none}

/* ---------- Document library ---------- */
.doc-list-head{padding:8px 3px 7px;font-size:11px;color:var(--muted)}
.doc-list-actions{gap:5px}
.doc-list-actions .mini-btn{width:30px;height:30px}
.doc-search-wrap{
  position:relative;
  margin:0 1px 7px;
  flex:0 0 auto;
}
.doc-search{
  width:100%;height:32px;
  padding:6px 28px 6px 30px;
  border:1px solid var(--border);
  border-radius:8px;
  outline:none;
  background:var(--surface-2);
  color:var(--text);
  font-size:11px;
  transition:border-color .14s ease,background .14s ease,box-shadow .14s ease;
}
.doc-search::placeholder{color:var(--muted-2)}
.doc-search:hover{border-color:var(--border-strong)}
.doc-search:focus{border-color:var(--accent);background:var(--surface);box-shadow:var(--focus-ring)}
.doc-search-icon{position:absolute;left:10px;top:8px;color:var(--muted-2);pointer-events:none}
.doc-search-key{
  position:absolute;right:7px;top:7px;
  min-width:17px;height:18px;padding:0 4px;
  display:grid;place-items:center;
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--muted-2);
  background:var(--surface);
  font:600 9px/1 Inter,ui-sans-serif,sans-serif;
}
.doc-search-empty{
  padding:18px 8px;
  text-align:center;
  color:var(--muted-2);
  font-size:10px;
}
.document-list{gap:2px;padding-right:1px}
.doc-item-row{min-height:35px}
.doc-item{min-height:35px;padding:6px 8px;border-left-width:3px;border-radius:8px;gap:8px}
.doc-item-title{font-size:11px;font-weight:520}
.doc-item.active .doc-item-title{font-weight:680}
.doc-icon{font-size:10px}
.doc-item-menu-btn{width:28px;height:28px}

.sidebar-footer{padding-top:7px}
.sidebar-utils{min-height:34px;padding:5px 4px 0!important}
.creator-credit{
  padding:5px 3px 1px;
  text-align:center;
  color:var(--muted-2);
  font-size:9px;
  line-height:1.35;
}
.creator-credit span{color:#f97316}
.creator-link{font-size:9px}

/* ---------- Workspace panes ---------- */
.editor-stage{
  min-height:0;
  padding:9px 10px 10px;
  gap:0;
  background:var(--bg);
}
.pane{
  min-width:0;
  min-height:0;
  border:1px solid var(--border);
  border-radius:var(--pane-radius);
  background:var(--surface);
  box-shadow:0 2px 8px rgba(20,35,60,.025);
  overflow:hidden;
}
.pane-source{border-color:var(--border)}
.pane-result{border-color:color-mix(in srgb, var(--accent) 16%, var(--border))}
.pane-head{
  height:var(--pane-head-h);
  min-height:var(--pane-head-h);
  padding:0 9px;
  gap:7px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.pane-kicker{
  display:inline-flex;
  align-items:center;
  height:20px;
  padding:0 5px;
  border-radius:4px;
  font-size:9px;
  letter-spacing:.1em;
  font-weight:800;
  color:var(--muted-2);
}
.result-kicker{color:var(--accent);background:var(--accent-soft)}
.pane-doc-name-input,.pane-doc-name-display{
  min-width:0;
  margin:0;
  font-size:12px;
  font-weight:680;
  letter-spacing:-.01em;
  line-height:1.2;
}
.pane-doc-name-input{text-overflow:ellipsis}
.pane-actions{gap:2px}
.pane-actions .mini-btn{width:30px;height:30px;border-color:transparent;background:transparent;border-radius:7px;color:var(--muted)}
.pane-actions .mini-btn:hover{background:var(--surface-3);border-color:var(--border);color:var(--text)}
.pane-actions .toolbar-sep{height:18px;margin:0 2px;background:var(--border)}

.editor-wrap,.result-editor-wrap{background:var(--surface)}
.editor-toolbar-wrapper{
  min-height:var(--toolbar-h);
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.editor-toolbar{
  min-height:var(--toolbar-h);
  gap:0;
  padding:4px 7px;
  align-items:center;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
.editor-toolbar::-webkit-scrollbar{display:none}
.toolbar-group{
  display:flex;
  align-items:center;
  gap:2px;
  flex:0 0 auto;
}
.toolbar-group-sep{
  width:1px;
  height:20px;
  flex:0 0 1px;
  margin:0 6px;
  background:var(--border-strong);
}
.toolbar-btn{
  width:29px;
  height:28px;
  min-width:29px;
  border:1px solid transparent;
  border-radius:6px;
  font-size:11px;
  color:var(--muted);
  background:transparent;
}
.toolbar-btn:hover{background:var(--surface);border-color:var(--border);color:var(--text)}
.toolbar-btn.active{background:var(--accent-soft);border-color:rgba(91,91,214,.18);color:var(--accent)}
.toolbar-dropdown{position:relative;display:flex;align-items:center}

/* The document is the hero: generous reading space, restrained chrome. */
.tiptap{
  padding:22px 25px 56px;
  font-size:14px;
  line-height:1.62;
}
.tiptap h1{font-size:25px;line-height:1.18;letter-spacing:-.025em;margin:0 0 18px}
.tiptap h2{font-size:19px;line-height:1.25;letter-spacing:-.015em;margin:22px 0 10px}
.tiptap h3{font-size:15px;line-height:1.3;margin:18px 0 8px}
.tiptap p{margin:0 0 12px}
.tiptap ul,.tiptap ol{margin:0 0 14px;padding-left:24px}
.tiptap li{margin:4px 0}
.tiptap table{font-size:13px}
.tiptap blockquote{margin:16px 0}

.pane-foot{
  height:var(--pane-foot-h);
  min-height:var(--pane-foot-h);
  padding:0 10px;
  border-top:1px solid var(--border);
  background:var(--surface-2);
  font-size:9px;
}
.splitter{width:8px;background:transparent}
.splitter:after{left:50%;transform:translateX(-50%);width:2px;height:34px;top:calc(50% - 17px);background:var(--border)}
.splitter:hover:after,.splitter.dragging:after{width:3px;background:var(--accent)}
.splitter:focus-visible{outline:none;box-shadow:none}
.splitter:focus-visible:after{background:var(--accent);width:3px;box-shadow:0 0 0 3px var(--accent-soft)}

/* Focus/maximized workspace becomes a clean reading surface. */
.editor-stage:has(.splitter.hidden){padding:0}
.editor-stage:has(.splitter.hidden) .pane{border-radius:0;border:0;box-shadow:none}
.editor-stage:has(.splitter.hidden) .pane-head{height:42px;min-height:42px;padding:0 14px}
.editor-stage:has(.splitter.hidden) .editor-toolbar-wrapper{min-height:40px}
.editor-stage:has(.splitter.hidden) .editor-toolbar{min-height:40px;padding-left:12px}
.editor-stage:has(.splitter.hidden) .tiptap{padding-left:clamp(22px,4vw,64px);padding-right:clamp(22px,4vw,64px)}

/* Result should be identifiable without becoming a colored card. */
.pane-result .pane-head{box-shadow:inset 0 2px 0 var(--accent)}
.pane-result .pane-foot{color:var(--accent)}

/* Custom instruction: one quiet context row. */
.custom-strip{
  min-height:30px;
  padding:4px 12px;
  background:var(--accent-soft);
  border-bottom:1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  color:var(--muted);
  font-size:10px;
}
.custom-label{color:var(--accent);font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.08em}
.custom-strip .text-btn{font-size:10px}

/* Empty result state */
.empty-result{background:var(--surface)}
.empty-result .empty-icon{width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--accent)}
.empty-result strong{font-size:13px}
.empty-result span{font-size:11px;color:var(--muted)}

/* ---------- Medium screens ---------- */
@media (max-width:1100px) and (min-width:701px){
  :root{--sidebar-w:220px}
  .sidebar{width:var(--sidebar-w);flex-basis:var(--sidebar-w)}
  .ai-toolbar{padding:6px 9px;gap:7px}
  .ai-chip{max-width:165px}
  .model-picker-trigger{max-width:210px}
  .picker-model{max-width:165px}
  .tiptap{padding-left:18px;padding-right:18px}
  .tiptap h1{font-size:23px}
}

/* ---------- Small screens ---------- */
@media (max-width:700px){
  .sidebar{width:min(86vw,300px);flex-basis:min(86vw,300px);padding:13px 10px 8px}
  .sidebar.collapsed{width:0!important;flex-basis:0!important;padding:0!important}
  .sidebar-overlay.active{background:rgba(15,23,42,.32);backdrop-filter:blur(3px)}
  .ai-toolbar{min-height:48px;padding:6px 7px;gap:5px}
  .ai-left{gap:4px}
  .ai-controls{gap:4px;padding-left:0;border-left:0}
  .ai-chip{padding:0;border:0;background:transparent;min-width:7px}
  #aiStatus,.picker-provider,.picker-divider{display:none!important}
  .model-picker{min-width:0;max-width:38vw}
  .model-picker-trigger{max-width:38vw;padding:5px 7px}
  .picker-model{max-width:28vw}
  .mode-picker-trigger{max-width:86px;padding:5px 7px}
  #generateBtn{min-height:32px;padding:6px 10px}
  .doc-search-key{display:none}
  .editor-stage{padding:5px 5px 6px;gap:5px}
  .pane{border-radius:9px;box-shadow:0 1px 5px rgba(20,35,60,.03)}
  .pane-head{height:36px;min-height:36px;padding:0 7px}
  .pane-kicker{font-size:8px}
  .pane-doc-name-input,.pane-doc-name-display{font-size:10px}
  .pane-actions .mini-btn{width:29px;height:29px}
  .pane-actions [data-action="download-source"],.pane-actions [data-action="download-draft"]{display:none}
  .editor-toolbar-wrapper{min-height:36px}
  .editor-toolbar{min-height:36px;padding:4px 5px}
  .toolbar-btn{width:29px;height:28px;min-width:29px}
  .toolbar-group-sep{height:18px;margin:0 4px}
  .tiptap{padding:17px 14px 48px;font-size:14px;line-height:1.58}
  .tiptap h1{font-size:22px}
  .tiptap h2{font-size:18px}
  .tiptap table{font-size:12px}
  .pane-foot{height:26px;min-height:26px;padding:0 8px;font-size:9px}
  .creator-credit{display:none}
  .editor-stage:has(.splitter.hidden){padding:0}
  .editor-stage:has(.splitter.hidden) .tiptap{padding:18px 15px 50px}
}

@media (max-width:430px){
  .brand-name{font-size:17px}
  .ai-toolbar{padding:5px 6px}
  .sidebar-toggle-btn{width:30px!important;height:30px!important}
  .model-picker{max-width:34vw}
  .model-picker-trigger{max-width:34vw;font-size:10px}
  .picker-model{max-width:24vw}
  .mode-picker-trigger{max-width:78px;font-size:10px}
  #generateBtn{padding:6px 8px;font-size:10px}
  .pane-actions .mini-btn[data-action="copy-source"],.pane-actions .mini-btn[data-action="copy-result"]{display:none}
  .tiptap{padding-left:12px;padding-right:12px}
}

@media (prefers-reduced-motion:reduce){
  .doc-search,.toolbar-btn,.doc-item,.pane-actions .mini-btn{transition:none}
}


/* v0.16.1 — responsive workspace refinements */
.sidebar-head-toggle{flex:0 0 auto;width:32px!important;height:32px!important}
.mobile-sidebar-toggle{display:none!important}
.sidebar.collapsed .sidebar-head-toggle{opacity:0;pointer-events:none;width:0!important;padding:0;border:0}
.creator-credit{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}
.creator-links{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto}
.creator-icon-link{width:22px;height:22px;display:inline-grid;place-items:center;border:1px solid transparent;border-radius:6px;color:var(--muted);text-decoration:none;transition:background .14s ease,border-color .14s ease,color .14s ease}
.creator-icon-link:hover,.creator-icon-link:focus-visible{color:var(--text);background:var(--surface-2);border-color:var(--border)}

@media (max-width:1100px) and (min-width:701px){
  .mode-picker-menu{width:min(200px,calc(100vw - 24px));max-height:calc(100vh - 74px);overflow-y:auto;overscroll-behavior:contain}
  .mode-option{white-space:nowrap;min-height:34px}
  .sidebar-footer{min-width:0;overflow:hidden}
  .sidebar-utils{grid-template-columns:auto minmax(0,1fr) auto;gap:5px!important}
  .sidebar-utils-actions{gap:4px}
  .creator-credit{font-size:8.5px;gap:5px}
  .creator-icon-link{width:21px;height:21px}
}

@media (max-width:700px){
  .sidebar-head-toggle{display:none!important}
  .mobile-sidebar-toggle{display:grid!important}
  .editor-stage:not(:has(.splitter.hidden)) .editor-toolbar-wrapper{display:none!important}
  .editor-stage:not(:has(.splitter.hidden)) .pane-actions [data-action="render-math-source"],
  .editor-stage:not(:has(.splitter.hidden)) .pane-actions [data-action="render-math-result"],
  .editor-stage:not(:has(.splitter.hidden)) .pane-actions [data-action="copy-source"],
  .editor-stage:not(:has(.splitter.hidden)) .pane-actions [data-action="copy-result"]{display:none!important}
  .editor-stage:not(:has(.splitter.hidden)) .pane-actions .toolbar-sep{display:none!important}
  .editor-stage:not(:has(.splitter.hidden)) .pane-actions [data-action="download-source"],
  .editor-stage:not(:has(.splitter.hidden)) .pane-actions [data-action="download-draft"],
  .editor-stage:not(:has(.splitter.hidden)) .pane-actions .max-btn{display:flex!important}

  .editor-stage:has(.splitter.hidden) .editor-toolbar-wrapper{display:flex!important}
  .editor-stage:has(.splitter.hidden) .pane-actions [data-action="render-math-source"],
  .editor-stage:has(.splitter.hidden) .pane-actions [data-action="render-math-result"],
  .editor-stage:has(.splitter.hidden) .pane-actions [data-action="copy-source"],
  .editor-stage:has(.splitter.hidden) .pane-actions [data-action="download-source"],
  .editor-stage:has(.splitter.hidden) .pane-actions [data-action="render-math-result"],
  .editor-stage:has(.splitter.hidden) .pane-actions [data-action="copy-result"],
  .editor-stage:has(.splitter.hidden) .pane-actions [data-action="download-draft"],
  .editor-stage:has(.splitter.hidden) .pane-actions .max-btn{display:flex!important}
  .editor-stage:has(.splitter.hidden) .pane-actions .toolbar-sep{display:inline-block!important}
  .creator-credit{display:flex;font-size:8.5px;gap:5px;padding:4px 2px 0}
}

@media (max-width:430px){
  .creator-credit{gap:4px}
  .creator-icon-link{width:21px;height:21px}
}

/* PDF source representation: Original is a read-only viewer; Raw keeps the existing editor. */
.source-mode-toggle{display:inline-flex;align-items:center;gap:2px;margin-left:8px;padding:2px;border:1px solid var(--border);border-radius:7px;background:var(--surface-2)}
.source-mode-toggle.hidden{display:none!important}
.source-mode-btn{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:9px;font-weight:750;padding:4px 8px;border-radius:5px;cursor:pointer;line-height:1}
.source-mode-btn:hover{color:var(--text);background:var(--surface-3)}
.source-mode-btn.active{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.source-mode-btn.unavailable{color:var(--muted-2);opacity:.58}
.source-content-wrap{position:relative;overflow:hidden;display:flex;flex:1;min-height:0}
.source-pdf-viewer{position:absolute;inset:0;background:var(--surface-2)}
.source-pdf-viewer iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.source-raw-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px;text-align:center;color:var(--muted);font-size:11px;line-height:1.5}
.source-raw-empty strong{color:var(--text);font-size:13px}
.source-raw-empty.hidden{display:none!important}
.source-content-wrap>.editor-host{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.source-content-wrap>.editor-host>.tiptap{min-height:max-content}
.pane-source.pdf-original-mode .source-mode-toggle{margin-left:8px}
.pane-source.pdf-original-mode .pane-actions [data-action="render-math-source"],
.pane-source.pdf-original-mode .pane-actions [data-action="copy-source"],
.pane-source.pdf-original-mode .pane-actions [data-action="render-math-source"] + .toolbar-sep{display:none!important}
.pane-source.pdf-original-mode .source-mode-toggle + .pane-doc-name-input{ }
@media (max-width:700px){
  .source-mode-toggle{margin-left:5px}
  .source-mode-btn{font-size:8px;padding:4px 6px}
}

/* ── PDF Settings ───────────────────────────────── */
.pdf-policy-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.pdf-policy-grid > div{
  border:1px solid var(--border);
  border-radius:8px;
  padding:9px 10px;
  background:var(--surface-2);
  display:flex;
  flex-direction:column;
  gap:3px;
}
.pdf-policy-grid strong{font-size:10px;color:var(--text)}
.pdf-policy-grid span{font-size:9px;color:var(--muted)}
.settings-check-row,
.pdf-model-row{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:8px 9px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  cursor:pointer;
  box-sizing:border-box;
}
.settings-check-row input,
.pdf-model-row input{margin-top:2px;flex-shrink:0;accent-color:var(--accent)}
.settings-check-row span,
.pdf-model-row span{display:flex;flex-direction:column;gap:3px;min-width:0}
.settings-check-row strong,
.pdf-model-row strong{font-size:10px;color:var(--text)}
.settings-check-row small,
.pdf-model-row small{font-size:9px;color:var(--muted);line-height:1.35}
.pdf-model-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.pdf-model-row:has(input:disabled){opacity:.72;cursor:default}
.settings-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field-hint{display:block;font-size:9px;color:var(--muted);line-height:1.4;margin-top:5px}
.pdf-context-card{
  margin-top:12px;
  padding:10px 11px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.pdf-context-card strong{font-size:10px;color:var(--text)}
.pdf-context-card span{font-size:9px;color:var(--accent);font-weight:700}
.pdf-context-card small{font-size:9px;color:var(--muted);line-height:1.4}
@media (max-width:540px){
  .pdf-policy-grid,.settings-form-grid{grid-template-columns:1fr}
}