/* I Love Doc premium presentation layer.
   Scope: appearance only. Existing app.js, IDs, API contracts and search controls unchanged. */
:root {
  --ink:#102037;
  --muted:#526079;
  --line:#e0e7f0;
  --surface:#fff;
  --background:#f4f7fc;
  --accent:#2267e9;
  --accent-light:#edf3ff;
  --nav:#111e35;
  font-family:'Inter','IBM Plex Sans Thai','Leelawadee UI',system-ui,sans-serif;
  font-size:15px;
}
html { scroll-behavior:smooth }
body {
  color:var(--ink);
  background:
    radial-gradient(ellipse 48% 28% at 72% -4%,#e7effd 0%, transparent 78%),
    linear-gradient(180deg,#f6f8fd 0%,#f2f5fa 100%);
  line-height:1.75;
  min-height:100vh;
}
button,input,textarea,select { font-family:inherit }
button { transition:background .14s,border-color .14s,transform .14s,box-shadow .14s }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid #3878ed;outline-offset:3px }

/* Sidebar: full-height dark navy column — branding and behavior retained. */
.sidebar { width:258px; padding:27px 17px 19px; background:linear-gradient(165deg,#14243e 0%,#0f1c31 62%,#0e1a2d 100%); border-right:1px solid #21324f; box-shadow:7px 0 28px rgba(13,30,52,.10) }
.brand { gap:13px; margin:0 8px 42px; font-size:18px;letter-spacing:-.03em }
.brand-mark { font-size:40px; filter:drop-shadow(0 3px 8px rgba(166,227,101,.17)) }
.brand small {color:#b3c3da;letter-spacing:.20em; font-size:10px;margin-top:1px}
.sidebar nav {display:grid;gap:8px}
.nav-item {width:100%;gap:14px;padding:14px 15px;border-radius:13px;color:#d3def0;font-size:14px;font-weight:600;min-height:52px}
.nav-item>span {font-family:system-ui;font-size:23px;color:#b6c7e1}
.nav-item.active{background:linear-gradient(100deg,#2b4c83,#223b64);box-shadow:inset 3px 0 #a8d866,0 7px 20px rgba(0,0,0,.15);color:#fff}
.nav-item:hover{background:#243a5a}
.nav-item b{background:#395477;color:#f7fbff;border-radius:8px;padding:1px 8px}
.sidebar-bottom{margin-top:auto;padding:20px 9px 0;border-top:1px solid #2e405b}
.local-tag{font-size:10px;font-weight:700;color:#b9e574;letter-spacing:.17em}
.sidebar-bottom p{font-size:12px;line-height:1.85;color:#c4d3e6}
.connection-badge{max-width:100%;padding:9px 11px;border-radius:10px;border-color:#496184;color:#fff;background:#213751;font-size:12px}
.connection-badge:hover{background:#2c476a}

main { margin-left:258px; min-width:0 }
.topbar {position:sticky;top:0;z-index:11; min-height:62px;height:auto;padding:12px clamp(20px,3vw,42px);background:rgba(255,255,255,.83); backdrop-filter:blur(16px); border-bottom:1px solid #e4ebf3; font-size:12px; font-weight:600;color:#354966}
.topbar .version{font-size:10px; letter-spacing:.1em;color:#556784}
.topbar .version span{background:#eaf0f9;border-radius:7px;padding:5px 8px;margin-left:9px}
.view{max-width:1680px;padding:33px clamp(20px,3vw,42px) 62px}
.page-heading{margin-bottom:24px;align-items:center}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.2em;color:#2a67cc}
h1{font-weight:800;letter-spacing:-.045em;font-size:clamp(27px,2.25vw,38px);line-height:1.34;margin:6px 0 3px}
h2{letter-spacing:-.03em}
.page-heading p{font-size:13px;color:#556780}
.button{font-weight:700;padding:11px 19px;border-radius:11px;font-size:13px}
.button.primary {background:linear-gradient(130deg,#286df0,#1e58d3);box-shadow:0 8px 18px rgba(36,93,209,.16);border:1px solid #2662dc;color:#fff}
.button.primary:hover{background:#1652c6;transform:translateY(-1px);box-shadow:0 12px 26px rgba(28,86,208,.18)}
.button.secondary{background:#fff;border-color:#d8e2ef;color:#1c324f;box-shadow:0 3px 9px rgba(25,49,86,.03)}
.button.secondary:hover{background:#f6f9ff;border-color:#bad0f5}

/* Data tiles */
.workspace-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;background:none;border:0;border-radius:0;overflow:visible;margin-bottom:23px}
.workspace-stats>div{background:#fff;min-height:100px;padding:21px 23px;display:flex;gap:5px;flex-direction:column;align-items:flex-start;justify-content:center;border:1px solid #e2e9f2;border-radius:16px;box-shadow:0 7px 24px rgba(29,52,92,.045)}
.workspace-stats>div:before{content:'';width:28px;height:3px;border-radius:999px;background:#77a7f6;margin-bottom:5px}
.workspace-stats>div:nth-child(2):before{background:#5db5a8}
.workspace-stats>div:nth-child(3):before{background:#9a8ae0}
.workspace-stats>div:nth-child(4):before{background:#d7b67b}
.workspace-stats strong{font-size:29px;line-height:1.2;letter-spacing:-.06em;font-weight:800;color:#14233c}
.workspace-stats span{font-size:12px;font-weight:500;color:#4a5b73}

/* Separate core question flow from diagnostics. No app logic or ids changed. */
.workspace-tab-navigation{display:flex;align-items:center;gap:8px;padding:6px;background:#eaf0f8;border:1px solid #dfe7f2;border-radius:16px;width:max-content;max-width:100%;margin-bottom:20px}
.workspace-tab{border:0;background:transparent;color:#425675;padding:11px 17px;border-radius:11px;font-size:14px;display:flex;align-items:center;gap:9px;font-weight:700;min-height:42px;white-space:nowrap}
.workspace-tab:hover{background:#f4f7fc}
.workspace-tab.active,.workspace-tab[aria-selected="true"]{background:#fff;color:#1f57bc;box-shadow:0 4px 12px rgba(32,65,108,.10)}
.tab-glyph{display:inline-grid;place-items:center;width:21px;height:21px;font-size:18px;color:inherit}
.tab-stage-count{border-radius:20px;background:#e5edfa;color:#476087;padding:1px 7px;font-size:10px;letter-spacing:.02em}
.workspace-tab-panel[hidden]{display:none!important}
.workspace-tab-panel{min-width:0}

/* Ask composer and options */
.chat-toolbar{margin:0 0 12px;padding:11px 17px;background:rgba(255,255,255,.8);border:1px solid #e0e8f2;border-radius:14px;gap:15px;min-height:49px;box-shadow:0 4px 16px #15325706}
.chat-toolbar label{font-weight:600;font-size:13px}
.chat-toolbar button{font-size:12px;font-weight:700}
.chat-toolbar details{width:100%;flex-basis:100%}
.search-box{background:linear-gradient(180deg,#fff,#fcfdff);padding:24px 28px 22px;border:1px solid #dce6f3;border-radius:21px;box-shadow:0 15px 36px rgba(24,53,94,.065)}
.search-box > label{font-size:15px;font-weight:700;display:block;margin:0 0 9px;color:#182d4a}
#query {width:100%;border:1px solid #d7e2ef;border-radius:13px;background:#fbfcff;min-height:134px;padding:17px 19px;margin:0;font-size:15px;line-height:1.85;box-shadow:inset 0 1px 2px #10203a04;transition:border-color .15s,box-shadow .15s;resize:vertical}
#query:focus{outline:0;border-color:#7daaf3;box-shadow:0 0 0 4px #2d71e614}
textarea::placeholder{color:#718096}
.search-settings{background:#f8fafd;border:1px solid #e5ebf4;border-radius:13px;margin:15px 0 0;padding:9px 14px}
.search-settings > summary{font-size:13px;font-weight:700;color:#425a77;padding:4px 0}
.search-settings[open]{padding-bottom:16px}
.search-settings details{background:#fff;border:1px solid #e7edf5;border-radius:11px;padding:11px 12px}
.search-controls{gap:13px}
.search-controls label{color:#344761}
select,input:not([type=checkbox]):not([type=file]){border-color:#d9e3ef;border-radius:9px;padding:9px 11px;font-size:13px}
.check{font-size:13px;color:#304564}
.search-actions{margin-top:18px;gap:15px}
#search-submit{min-width:158px;height:47px;font-size:14px;border-radius:12px}
#search-submit span{margin-left:10px}
#answer-progress{padding:13px 18px;margin:16px 0;border-radius:13px;background:#edf5ff;border:1px solid #dceafe;color:#1d416d}
.examples{gap:8px;margin:14px 0 21px;font-weight:600;color:#455b76}
.examples button{background:#fff;border:1px solid #e0e8f3;border-radius:999px;padding:7px 13px;font-size:12px;color:#25456e}
.examples button:hover{border-color:#93b3e4;background:#f0f6ff}
.empty-panel{background:#fff;border:1px dashed #c9d8e9;border-radius:19px;padding:30px 22px;box-shadow:0 6px 20px #13325206}
.empty-symbol{font-size:31px;color:#386bb8}
.empty-panel h2{font-size:19px}

/* Answer focus (result tabs are the original JS implementation). */
#results-area{margin-top:18px}
.run-meta{font-size:12px;font-weight:700;color:#5a6e8b;margin-bottom:12px}
#results-area .result-grid {grid-template-columns:minmax(0,1.35fr) minmax(280px,.8fr);gap:15px;align-items:start}
#results-area .result-grid.tabbed-results{display:block!important}
.answer-panel,.evidence-panel{min-width:0}
.answer-panel{background:#fff;padding:25px 27px;border:1px solid #e0e8f2;border-radius:19px;box-shadow:0 10px 28px #1e395b0b}
.evidence-panel{border:1px solid #e0e8f2;border-radius:19px;padding:22px;background:rgba(255,255,255,.88);box-shadow:0 8px 25px #14345a0a}
#answer-content{max-width:none;font-size:15px;color:#16253c}
#answer-content .answer-prose{font-size:15px;line-height:1.9}
#answer-content .answer-prose p{line-height:1.95;white-space:pre-wrap}
#answer-content .answer-intro{border-bottom:1px solid #e9eef5;color:#516780}
#answer-content .answer-sources{border:1px solid #e4eaf3;background:#f7faff;border-radius:13px}
#answer-content blockquote{color:#263f5f;background:#fff;border-radius:10px}
.panel-title{align-items:center;margin-bottom:12px}
.panel-title h2{font-size:18px;font-weight:800;margin:0}
.badge{border-radius:999px;padding:5px 10px;font-weight:700}
.result-tabs{background:#eaf0f8;border:1px solid #dfe7f1;padding:5px;border-radius:13px;display:flex;gap:5px;margin-bottom:14px}
.result-tabs button{border:0;border-radius:9px;background:transparent;color:#3d5574;padding:9px 14px;font-size:13px;font-weight:700}
.result-tabs button[aria-selected="true"]{color:#1d57c0;background:#fff;box-shadow:0 3px 9px #25456f15}
.audit-panel,.history-panel{padding:22px;border-color:#e0e8f2;border-radius:18px}
.answer-actions{gap:9px}
.answer-actions button{color:#254c82;background:#fff;border:1px solid #d9e4f0;border-radius:10px;font-size:12px;font-weight:700;padding:8px 12px}
.evidence-card{border:1px solid #e4ebf4;border-radius:13px;background:#fff;padding:16px;margin-bottom:11px}
.evidence-top h3{font-size:13px;color:#1c3e70}
.rank{border-radius:7px;font-weight:700}
.evidence-card p{font-size:13px;line-height:1.8}
.evidence-actions .text-button{font-size:12px}
.citation{border-radius:7px;padding:5px 9px;color:#1c5acc;background:#eaf2ff;font-weight:700}
.notice{border-radius:12px}

/* Pipeline: dedicated step-by-step tab, original telemetry still live and exported. */
.pipeline-intro{border:1px solid #dfe7f2;border-radius:20px;padding:24px 26px;margin-bottom:18px;background:linear-gradient(125deg,#fff 0%,#f4f8fe 100%);box-shadow:0 8px 22px #1b39600a}
.pipeline-kicker{font-size:11px;color:#295dbc;letter-spacing:.15em;font-weight:800}
.pipeline-kicker span{padding:0 6px;color:#96a7c2}
.pipeline-intro h2{font-size:25px;letter-spacing:-.035em;margin:8px 0 5px}
.pipeline-intro p{font-size:13px;color:#506581;max-width:750px;margin:0;line-height:1.9}
.pipeline-empty{text-align:center;padding:48px 18px;background:#fff;border:1px dashed #d4e1ef;border-radius:19px;color:#3a506f}
.pipeline-empty-icon{display:grid;place-items:center;width:60px;height:60px;margin:0 auto 14px;border-radius:19px;background:#eef5ff;color:#2b6de6;font-size:35px}
.pipeline-empty h3{margin:0;font-size:18px;color:#183250}.pipeline-empty p{font-size:13px;color:#5e7290;margin:6px auto 20px;max-width:560px}
#pipeline-mount:has(.processing-monitor) .pipeline-empty{display:none}
#pipeline-mount .processing-monitor{background:transparent;border:0;padding:0;box-shadow:none;margin:0}
#pipeline-mount .monitor-heading{background:#fff;border:1px solid #e1e9f2;padding:18px 22px;border-radius:18px;box-shadow:0 6px 18px #1b3d630a;margin-bottom:14px}
#pipeline-mount .monitor-heading h3{margin:0 0 3px;color:#193451;font-size:18px}
#pipeline-mount .monitor-eyebrow{color:#2d65c6;font-size:10px;font-weight:800;letter-spacing:.16em}
#pipeline-mount .monitor-actions button{font-size:12px;font-weight:700;padding:9px 12px;border-radius:9px;color:#234a79}
#pipeline-mount .monitor-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 24px}
#pipeline-mount .monitor-stat{background:#fff;border:1px solid #e0e8f1;border-radius:15px;padding:18px;min-height:90px;box-shadow:0 5px 18px #18365309}
#pipeline-mount .monitor-stat span{color:#526882;font-size:12px;font-weight:700}
#pipeline-mount .monitor-stat strong{font-size:19px;color:#1b3557;overflow-wrap:anywhere}
#pipeline-mount .processing-tree{display:grid;grid-template-columns:1fr;gap:0;counter-reset:stage;position:relative;margin:10px 0 24px}
#pipeline-mount .processing-tree-node{counter-increment:stage;position:relative;background:#fff;border:1px solid #e1e9f2;border-left:1px solid #e1e9f2;border-radius:16px;margin:0 0 18px 42px;padding:18px 22px;box-shadow:0 5px 17px #1836530a;min-height:85px}
#pipeline-mount .processing-tree-node::before{content:counter(stage);position:absolute;left:-58px;top:13px;display:grid;place-items:center;width:39px;height:39px;color:#fff;background:linear-gradient(145deg,#336fda,#1b55bd);border-radius:13px;box-shadow:0 6px 12px #2e69c82b;font-weight:800;font-size:17px;z-index:1}
#pipeline-mount .processing-tree-node:not(:last-child)::after{content:'';position:absolute;width:2px;height:calc(100% + 18px);left:-39px;top:26px;background:#cfdff5;z-index:0}
#pipeline-mount .processing-tree-node>strong{font-size:15px;color:#173555;font-weight:800}
#pipeline-mount .processing-tree-node>p{font-size:13px;color:#445d7b;margin:6px 0 3px;line-height:1.9}
#pipeline-mount .processing-tree-node ul{font-size:12px;color:#486281;line-height:1.9;display:grid;gap:3px;margin:10px 0 0;padding-left:20px}
#pipeline-mount .processing-monitor>details{background:#fff;border:1px solid #e0e8f1;border-radius:17px;padding:14px 18px;margin-bottom:15px}
#pipeline-mount .processing-monitor>details>summary{font-size:13px;font-weight:700;color:#204974}
#pipeline-mount .monitor-events{border-radius:12px;background:#13243d;color:#ebf3ff;padding:16px;white-space:pre-wrap}
#pipeline-mount .stream-draft{background:#f3f7ff;border-color:#c9def8;border-radius:15px}

/* Gentle consistency across other existing pages. */
.upload-panel,.settings-panel,.document-card,.settings-explanation,.statistics-chart,.km-sidebar,.km-main,.km-detail{border-radius:16px}
.upload-drop-zone{border-radius:16px;background:#f8fbff}
.document-card,.settings-panel{box-shadow:0 5px 18px #1c3b5e09}
dialog{border-radius:20px;box-shadow:0 22px 80px #13274338}
#toast{border-radius:12px;background:#183653;box-shadow:0 15px 38px #10264237}

@media(max-width:1150px){
  .sidebar{width:220px}
  main{margin-left:220px}
  .view{padding:27px 24px 45px}
  .result-grid,#results-area .result-grid{grid-template-columns:1fr}
  .workspace-stats{gap:9px}
  .workspace-stats>div{padding:17px}
  .workspace-stats strong{font-size:25px}
}
@media(max-width:760px){
  .sidebar{position:static;width:100%;padding:12px 15px;display:block;box-shadow:none}
  .brand{margin:0 0 8px;font-size:16px}
  .brand small{display:block;font-size:9px}
  .brand-mark{font-size:30px}
  .sidebar nav{display:flex;flex-wrap:nowrap;overflow:auto;gap:5px}
  .nav-item{flex:none;width:max-content;min-width:130px;min-height:42px;padding:9px 12px;font-size:12px;gap:7px}
  .nav-item>span{font-size:16px;width:auto}
  .sidebar-bottom{display:none}
  main{margin-left:0}
  .topbar{position:static;padding:8px 17px;min-height:43px}
  .view{padding:20px 14px 40px}
  h1{font-size:26px}
  .page-heading{align-items:flex-start;gap:8px}
  .page-heading>.button{padding:8px 10px}
  .workspace-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .workspace-stats>div{min-height:90px;padding:14px 16px}
  .workspace-tab-navigation{width:100%;gap:3px}
  .workspace-tab{flex:1;justify-content:center;font-size:12px;padding:10px 8px;gap:5px}
  .tab-stage-count{display:none}
  .search-box{padding:16px;border-radius:15px}
  #query{min-height:120px;padding:13px;font-size:14px}
  .search-actions{gap:13px;align-items:stretch}
  .search-actions .button.primary{width:100%}
  .answer-panel,.evidence-panel{padding:17px}
  .pipeline-intro{padding:18px}
  .pipeline-intro h2{font-size:22px}
  #pipeline-mount .monitor-stats{grid-template-columns:1fr}
  #pipeline-mount .processing-tree-node{margin-left:37px;padding:15px 16px}
  #pipeline-mount .processing-tree-node::before{left:-53px;width:36px;height:36px}
  #pipeline-mount .processing-tree-node:not(:last-child)::after{left:-35px}
  #pipeline-mount .monitor-heading{padding:16px}
  #pipeline-mount .monitor-actions{width:100%}
  #pipeline-mount .monitor-actions button{flex:1}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}