/* Shared Superset Agent workspace palette and responsive shell. */
:root { --primary:#168b68; --primary-dark:#0d6047; --primary-bg:#edf8f4; --line:#dce8e3; --ink:#243730; --muted:#718079; --surface:#fff; font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif; color:var(--ink); background:#f3f7f5; }
body { margin:0; min-width:320px; }
button, input, textarea, select { font:inherit; }
button, a, summary { -webkit-tap-highlight-color:transparent; }
button:disabled { opacity:.55; cursor:not-allowed; }
:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
[hidden] { display:none!important; }
.app-shell,.shell { display:grid; grid-template-columns:218px minmax(0,1fr); height:100dvh; min-height:0; overflow:hidden; }
.sidebar { position:static; height:100%; min-height:0; padding:20px 14px; display:flex; flex-direction:column; overflow-y:auto; color:var(--ink); background:linear-gradient(165deg,#edf8f4,#fff 48%); border-right:1px solid var(--line); }
.brand { display:flex; flex-direction:column; justify-content:center; gap:0; min-height:154px; padding:0 0 20px; border-bottom:1px solid var(--line); }
.brand-image { position:relative; width:174px; height:101px; overflow:hidden; }
.brand-image img { position:absolute; width:174px; height:174px; top:-38px; left:0; }
.brand div.brand-caption { text-align:center; }
.brand .brand-caption strong { font-size:13px; font-weight:600; }
.brand .brand-caption span { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
.view-nav, .sidebar nav { display:grid; gap:6px; padding:0; margin-top:22px; }
.nav-button,.nav-button:not(.active),.nav-link { width:auto; min-height:43px; height:auto; display:flex; justify-content:flex-start; gap:12px; align-items:center; padding:10px 13px; font-size:13px; color:#596d63; text-align:left; text-decoration:none; border:0; border-radius:8px; background:transparent; }
.nav-button span { color:inherit; }
.nav-button:hover,.nav-link:hover { color:var(--primary-dark); background:#f0f7f3; }
.nav-button.active,.nav-link.active { color:var(--primary-dark); background:#e5f4ed; box-shadow:inset 3px 0 var(--primary); }
.nav-button.active span { color:var(--primary); }
.connection-panel { margin-top:auto; padding:22px 8px 0; color:var(--muted); border-top:1px solid var(--line); line-height:1.6; }
.connection-panel > div { display:flex; align-items:center; gap:8px; }
.connection-panel span:not(.status-dot),.connection-panel .text-button { display:inline; }
.sidebar-footnote { font-size:11px; color:var(--muted); line-height:1.6; margin:12px 4px 0; }
.status-dot { width:7px; height:7px; border-radius:50%; background:#b4c1ba; flex-shrink:0; }
.status-dot.online { background:#37b58d; box-shadow:0 0 0 3px #37b58d19; }
.status-dot.offline { background:#bd765c; }
.main-area { min-height:0; overflow:hidden; background:radial-gradient(ellipse at top right,#def1e7,transparent 65%),#f8fbf9; }
.app-view { min-height:0; height:100%; overflow-y:auto; scrollbar-gutter:stable; }
.view-header,.view-header.compact,.topbar { min-height:84px; padding:20px 28px; margin:0; background:linear-gradient(115deg,#ffffffee 45%,#edf8f4cc); border-bottom:1px solid var(--line); }
.view-header h1,.topbar h1 { font-size:20px; font-weight:650; color:var(--ink); }
.view-header p,.topbar p { color:var(--muted); line-height:1.65; font-size:12px; }
.header-actions { flex-wrap:wrap; gap:8px; }
.primary-button,.send-button,.primary,.auth-box button { min-height:36px; padding:8px 16px; color:white; border:1px solid var(--primary); border-radius:6px; background:var(--primary); font-size:13px; }
.secondary-button { min-height:36px; padding:8px 12px; color:var(--primary-dark); border:1px solid #a5c6b6; border-radius:6px; background:white; font-size:12px; }
.primary-button:hover,.send-button:hover,.primary:hover { background:#117657; }
.secondary-button:hover { background:var(--primary-bg); }
.text-button,.summary-refresh { color:var(--primary); }
input,textarea,select { border-radius:6px; border:1px solid #bfd0c7; color:var(--ink); background:#fff; max-width:100%; }
input:focus,textarea:focus,select:focus { border-color:var(--primary); outline:none; box-shadow:0 0 0 3px #168b6814; }
label { font-weight:500; color:#5d7267; font-size:12px; }
.chat-layout { display:grid; height:100%; min-height:0; grid-template-columns:minmax(0,1fr) 320px; }
.conversation { height:100%; min-height:0; grid-template-rows:auto minmax(0,1fr) auto; background:transparent; }
.message-list { padding:26px clamp(20px,4vw,60px); overscroll-behavior:contain; }
.message-avatar { background:#e2f1e9; color:var(--primary-dark); border-radius:10px; }
.message-content { max-width:100%; overflow-wrap:anywhere; }
.message-content > strong { color:var(--ink); }
.user-message .message-content { background:#e6f4ed; border-color:#cce5d7; border-radius:14px 14px 4px 14px; }
.composer { padding:16px 24px 20px; background:#ffffffeb; border-top:1px solid var(--line); max-height:48vh; overflow:auto; }
.composer > textarea { width:100%; min-height:78px; padding:14px; background:#fff; border:1px solid #bfd0c7; border-radius:10px; resize:vertical; }
.activity-panel { height:100%; overflow:auto; background:#f6faf8; border-left:1px solid var(--line); }
.activity-header { background:transparent; border-color:var(--line); min-height:84px; }
.run-summary { background:transparent; border-color:var(--line); }
.summary-card,.trace-summary-card { border-color:var(--line); border-radius:10px; }
.activity-list { max-height:none; }
.activity-item details,.trace-item details { margin-top:8px; }
.activity-item summary,.trace-item summary { cursor:pointer; color:var(--muted); }
.activity-item pre,.trace-item pre { max-height:300px; overflow:auto; }
.settings-page { max-width:900px; padding:24px 28px 40px; }
.settings-card,.tool-form,.tool-output,.memory-toolbar,.memory-card,.memory-editor,.memory-raw { background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 5px 18px #174b3010; }
.settings-card { padding:24px; margin-bottom:20px; }
.settings-card h2 { font-size:15px; margin:0 0 10px; }
.settings-card p { color:var(--muted); font-size:12px; line-height:1.8; }
.settings-grid { gap:18px; }
.settings-grid label { display:block; line-height:1.8; }
.settings-grid textarea { width:100%; padding:10px; margin-top:5px; resize:vertical; }
.settings-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.settings-feedback { color:var(--primary-dark); font-size:12px; line-height:1.8; }
.settings-feedback.error { color:#a63e3b; }
.tool-layout { gap:20px; padding:24px 28px; }
.tool-form { padding:22px; }
.tool-output { overflow:hidden; }
.output-heading { border-bottom:1px solid var(--line); color:var(--muted); }
.tool-output pre { background:#f8fbf9; color:#40544a; margin:0; min-height:140px; max-height:60vh; overflow:auto; }
.document-list { display:grid; gap:12px; padding:18px; }
.document-card { padding:16px; border:1px solid var(--line); border-radius:9px; background:#fff; overflow-wrap:anywhere; }
.document-card h3 { margin:0 0 8px; font-size:14px; }
.document-card p { font-size:12px; color:var(--muted); line-height:1.7; margin:5px 0; }
.document-card .document-error { color:#a63e3b; }
.empty-state { padding:26px 18px; color:var(--muted); font-size:13px; text-align:center; line-height:1.8; }
.trace-toolbar,.trace-meta,.trace-summary,.trace-timeline { margin-left:28px; margin-right:28px; }
.trace-item { padding:16px; background:#fff; border:1px solid var(--line); border-radius:10px; margin-bottom:10px; }
.trace-title { gap:12px; }
.trace-title strong { font-size:13px; }
.trace-item .token-badge { margin-top:8px; color:var(--primary-dark); font-size:12px; }
.live-progress { margin-top:12px; padding:12px 14px; border-left:3px solid var(--primary); border-radius:6px; background:var(--primary-bg); font-size:12px; line-height:1.7; }
.auth-box { position:static; margin-top:auto; padding-top:22px; }
.auth-box label { color:var(--muted); }
.auth-box textarea { color:var(--ink); background:#fff; border-color:#bfd0c7; border-radius:6px; }
.shell > main { height:100%; overflow:auto; padding:0 28px 30px; }
.shell .topbar { margin:0 -28px; }
.kpi-grid { gap:12px; background:transparent; border:0; }
.kpi-grid article { padding:20px 16px; border:1px solid var(--line)!important; background:#fff; border-radius:12px; box-shadow:0 5px 18px #174b3008; }
.kpi-grid strong { color:var(--primary-dark); }
.band { border-color:var(--line); border-radius:12px; box-shadow:0 5px 18px #174b3008; }
.section-heading { border-color:var(--line); }
.range-control button.active { background:var(--primary-bg); color:var(--primary-dark); border-color:#a5c6b6; }
.range-control button { min-height:36px; }
.request-feedback { margin:18px 0 0; padding:12px 16px; border:1px solid #e8c7b9; border-radius:8px; background:#fff6ef; color:#915134; font-size:13px; }
.toast { border-radius:8px; z-index:20; }
@media(max-width:1200px) { .chat-layout { grid-template-columns:minmax(0,1fr) 280px; } .header-actions { gap:5px; } .view-header { padding:18px; gap:12px; } }
@media(max-width:980px) { .chat-layout { grid-template-columns:minmax(0,1fr); } .activity-panel { display:none; } .tool-layout { grid-template-columns:minmax(0,1fr); } .header-actions { max-width:200px; } }
@media(max-width:720px) {
  .app-shell,.shell { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  .sidebar { display:block; height:auto; max-height:190px; padding:10px 12px; border-right:0; border-bottom:1px solid var(--line); }
  .brand { min-height:0; flex-direction:row; justify-content:flex-start; padding:0; border:0; gap:10px; }
  .brand-image { width:80px; height:40px; } .brand-image img { width:80px; height:80px; top:-20px; }
  .brand div { display:block; }
  .brand .brand-caption span { display:none; }
  .sidebar nav { display:flex; justify-content:flex-start; overflow-x:auto; gap:4px; margin-top:8px; }
  .nav-button,.nav-button:not(.active),.nav-link { flex-shrink:0; white-space:nowrap; min-height:36px; padding:8px 10px; font-size:12px; }
  .nav-button span { display:none; }
  .connection-panel { display:flex; flex-wrap:wrap; gap:8px; padding:6px 0 0; margin-top:6px; font-size:10px; border:0; }
  .sidebar-footnote { display:none; }
  .view-header { min-height:72px; padding:14px; gap:8px; flex-wrap:wrap; }
  .view-header h1 { font-size:17px; }
  .view-header p { display:none; }
  .header-actions { max-width:none; } .header-actions button { min-height:32px; padding:6px 9px; }
  .message-list { padding:20px 14px; }
  .composer { padding:12px 14px; }
  .settings-page,.tool-layout { padding:16px; }
  .settings-card { padding:18px; }
  .settings-grid,.context-grid { grid-template-columns:1fr; }
  .trace-toolbar,.trace-meta,.trace-summary,.trace-timeline { margin-left:16px; margin-right:16px; }
  .shell .auth-box { display:flex; align-items:center; gap:8px; padding-top:8px; margin:0; }
  .shell .auth-box textarea { height:34px; flex:1; min-width:0; }
  .shell .auth-box label { display:none; }
  .shell .auth-box button { white-space:nowrap; min-height:34px; padding:6px 8px; font-size:11px; }
  .shell > main { padding:0 14px 24px; }
  .shell .topbar { margin:0 -14px; padding:18px 14px; gap:12px; }
  .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
}