#diagnosticAgentPage.active {
  margin: 0 -20px -20px;
  min-height: calc(100svh - 79px);
  color: #dce5eb;
  background: #111827;
}
.da-shell { min-height: inherit; background: #111827; --da-line: rgba(148,163,184,.16); --da-muted: #8f9baa; --da-accent: #20c7ad; }
.da-shell button, .da-shell input, .da-shell select, .da-shell textarea { font: inherit; letter-spacing: 0; }
.da-shell svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.da-header { display:flex; align-items:center; justify-content:space-between; min-height:80px; padding:14px 24px; border-bottom:1px solid var(--da-line); background:#171e2a; }
.da-title { display:flex; align-items:center; gap:12px; min-width:0; }
.da-title-icon { display:grid; place-items:center; width:46px; height:46px; flex:0 0 46px; color:#0d1719; background:var(--da-accent); border-radius:6px; }
.da-title-icon svg { width:28px; height:28px; stroke-width:2; }
.da-title h2 { margin:0; color:#f5f8fa; font-size:26px; font-weight:650; line-height:1.25; letter-spacing:0; }
.da-title p { margin:2px 0 0; color:var(--da-muted); font-size:16px; line-height:1.4; letter-spacing:0; }
.da-header-actions { display:flex; align-items:center; gap:12px; }
.da-ready { display:flex; align-items:center; gap:7px; color:#aeb9c5; font-size:16px; white-space:nowrap; }
.da-ready i { width:7px; height:7px; border-radius:50%; background:var(--da-accent); box-shadow:0 0 0 4px rgba(32,199,173,.11); }
.da-icon-button { display:grid; place-items:center; width:36px; height:36px; padding:0; color:#b9c5d1; border:1px solid var(--da-line); border-radius:4px; background:#1c2532; }
.da-icon-button:hover { color:#fff; border-color:rgba(32,199,173,.6); background:#222d3b; transform:none; }
.da-workspace { display:grid; grid-template-columns:280px minmax(420px,1fr) 310px; min-height:calc(100svh - 159px); }
.da-context, .da-trail { background:#151c27; }
.da-context { border-right:1px solid var(--da-line); padding:22px 18px; }
.da-context section + section { margin-top:26px; padding-top:22px; border-top:1px solid var(--da-line); }
.da-context h3, .da-trail h3 { margin:0 0 15px; color:#eef3f6; font-size:19px; font-weight:650; letter-spacing:0; }
.da-context label:not(.da-check) { display:block; margin:14px 0 6px; color:var(--da-muted); font-size:15px; }
.da-sn-field { position:relative; }
.da-sn-field > svg { position:absolute; top:50%; left:10px; width:16px; height:16px; color:#718095; transform:translateY(-50%); pointer-events:none; }
.da-sn-field input, .da-context select { width:100%; height:46px; border:1px solid rgba(148,163,184,.2); border-radius:4px; outline:0; color:#e9eef2; background:#101722; font-size:17px; }
.da-sn-field input { padding:0 9px 0 34px; font-family:Consolas, monospace; text-transform:uppercase; }
.da-context select { padding:0 9px; }
.da-sn-field input:focus, .da-context select:focus, .da-composer:focus-within { border-color:rgba(32,199,173,.72); box-shadow:0 0 0 2px rgba(32,199,173,.1); }
.da-check { display:flex; align-items:center; gap:9px; min-height:42px; color:#bdc7d1; font-size:16px; cursor:pointer; }
.da-check input { width:18px; height:18px; accent-color:var(--da-accent); }
.da-source > div { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:42px; color:#b9c5d0; font-size:15px; }
.da-source span { display:flex; align-items:center; gap:7px; }
.da-source svg { width:15px; height:15px; color:#748398; }
.da-source em { color:#68d8c5; font-style:normal; }
.da-conversation { display:flex; flex-direction:column; min-width:0; min-height:0; background:#111827; }
.da-messages { flex:1; min-height:360px; max-height:calc(100svh - 302px); padding:30px clamp(22px,4vw,64px) 18px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#394658 transparent; }
.da-message { display:flex; align-items:flex-start; gap:11px; width:min(760px,100%); margin:0 auto 22px; animation:da-rise .2s ease-out; }
.da-avatar { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; margin-top:19px; color:#071614; border-radius:5px; background:var(--da-accent); }
.da-avatar svg { width:18px; height:18px; }
.da-message > div { min-width:0; max-width:calc(100% - 41px); }
.da-message-meta { margin:0 0 6px; color:#7f8b9a; font-size:14px; }
.da-bubble { padding:16px 18px; border:1px solid var(--da-line); border-radius:6px; color:#ccd5dd; background:#1b2431; font-size:18px; line-height:1.75; }
.da-bubble > strong { display:block; margin-bottom:4px; color:#f0f4f7; font-size:20px; }
.da-bubble p { margin:0; }
.da-user { justify-content:flex-end; }
.da-user > div { max-width:78%; }
.da-user .da-message-meta { text-align:right; }
.da-user .da-bubble { color:#e9f7f4; border-color:rgba(32,199,173,.22); background:#17302f; }
.da-result { padding:0; overflow:hidden; }
.da-result-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--da-line); background:rgba(255,255,255,.018); }
.da-result-head small { display:block; color:#7f8c99; font-size:14px; }
.da-result-head strong { display:block; color:#f3f7f9; font-size:20px; }
.da-result-head > span { flex:0 0 auto; padding:4px 9px; color:#61d6c1; border:1px solid rgba(32,199,173,.3); border-radius:3px; font-size:14px; }
.da-result > p { padding:14px 16px 3px; }
.da-result section { padding:11px 16px 2px; }
.da-result h4 { margin:0 0 7px; color:#94a4b5; font-size:16px; font-weight:600; }
.da-result ul, .da-result ol { margin:0; padding-left:18px; }
.da-result li { margin:4px 0; }
.da-result li::marker { color:var(--da-accent); }
.da-result footer { display:flex; align-items:center; gap:9px; margin-top:13px; padding:10px 18px; border-top:1px solid var(--da-line); color:#788696; font-size:14px; }
.da-result footer strong { color:#aeb9c4; font-family:Consolas, monospace; font-weight:500; }
.da-quick { display:flex; flex-wrap:wrap; gap:7px; width:min(760px,calc(100% - 44px)); margin:0 auto 12px; }
.da-quick[hidden] { display:none; }
.da-quick button { min-height:42px; padding:8px 13px; color:#aab6c3; border:1px solid rgba(148,163,184,.18); border-radius:4px; background:#161e2a; font-size:16px; text-align:left; }
.da-quick button:hover { color:#e9f4f2; border-color:rgba(32,199,173,.42); background:#1b2a32; transform:none; }
.da-composer { display:grid; grid-template-columns:minmax(0,1fr) 42px; align-items:end; gap:8px; width:min(760px,calc(100% - 44px)); margin:0 auto 22px; padding:7px; border:1px solid rgba(148,163,184,.23); border-radius:6px; background:#192230; transition:border-color .15s ease, box-shadow .15s ease; }
.da-composer textarea { width:100%; height:54px; max-height:150px; padding:10px; resize:none; overflow-y:auto; color:#ecf1f4; border:0; outline:0; background:transparent; font-size:18px; line-height:1.7; }
.da-composer textarea::placeholder { color:#718092; }
.da-composer textarea:disabled { opacity:.58; }
.da-composer button { display:grid; place-items:center; width:42px; height:42px; padding:0; color:#081714; border:0; border-radius:4px; background:var(--da-accent); }
.da-composer button:hover { background:#42d4bb; transform:none; }
.da-thinking { display:flex; align-items:center; gap:5px; width:min(760px,100%); margin:0 auto 22px; padding-left:41px; color:#7d8a99; font-size:15px; }
.da-thinking span { width:5px; height:5px; border-radius:50%; background:#62cfbd; animation:da-pulse .9s infinite alternate; }
.da-thinking span:nth-child(2) { animation-delay:.15s; }.da-thinking span:nth-child(3) { animation-delay:.3s; }.da-thinking em { margin-left:5px; font-style:normal; }
.da-trail { display:flex; flex-direction:column; border-left:1px solid var(--da-line); padding:22px 18px; }
.da-trail-step { position:relative; display:grid; grid-template-columns:27px minmax(0,1fr); gap:9px; min-height:70px; color:#6f7d8d; }
.da-trail-step:not(:last-child)::after { position:absolute; top:27px; bottom:0; left:13px; width:1px; background:#303b49; content:""; }
.da-trail-step > span { position:relative; z-index:1; display:grid; place-items:center; width:30px; height:30px; color:#7a8796; border:1px solid #3b4654; border-radius:50%; background:#151c27; font-size:14px; }
.da-trail-step svg { width:14px; height:14px; }
.da-trail-step strong, .da-trail-step small { display:block; letter-spacing:0; }
.da-trail-step strong { margin-top:2px; font-size:16px; font-weight:550; }.da-trail-step small { margin-top:2px; color:#687686; font-size:14px; }
.da-trail-step.is-active strong { color:#e4ebef; }.da-trail-step.is-active > span { color:#0b1716; border-color:var(--da-accent); background:var(--da-accent); box-shadow:0 0 0 4px rgba(32,199,173,.09); }
.da-trail-step.is-done strong { color:#aebac4; }.da-trail-step.is-done > span { color:#61d4c0; border-color:rgba(32,199,173,.55); }
.da-trail footer { display:grid; grid-template-columns:1fr auto; gap:5px 10px; margin-top:auto; padding-top:16px; border-top:1px solid var(--da-line); color:#6f7d8b; font-size:14px; }
.da-trail footer strong { color:#a8b4bf; font-weight:500; text-align:right; }
body.light #diagnosticAgentPage.active, body.light .da-shell { color:#25313b; background:#f5f7f8; }
body.light .da-shell { --da-line:#dbe2e7; --da-muted:#6e7b86; --da-accent:#0ea58f; }
body.light .da-header { background:#fff; } body.light .da-title h2 { color:#17232c; } body.light .da-title-icon { color:#fff; }
body.light .da-icon-button, body.light .da-context, body.light .da-trail { background:#f7f9fa; }
body.light .da-icon-button { color:#596775; } body.light .da-conversation { background:#f5f7f8; }
body.light .da-sn-field input, body.light .da-context select { color:#25313b; background:#fff; }
body.light .da-bubble { color:#394753; background:#fff; } body.light .da-bubble > strong, body.light .da-result-head strong { color:#1d2a34; }
body.light .da-user .da-bubble { color:#173f39; background:#e5f6f2; } body.light .da-composer { background:#fff; } body.light .da-composer textarea { color:#24313c; }
body.light .da-quick button { color:#52616e; background:#fff; } body.light .da-trail-step > span { background:#f7f9fa; }
@keyframes da-rise { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@keyframes da-pulse { from { opacity:.35; transform:translateY(1px); } to { opacity:1; transform:translateY(-1px); } }
@media (prefers-reduced-motion:reduce) { .da-message, .da-thinking span { animation:none; } }
@media (max-width:1150px) {
  .da-workspace { grid-template-columns:220px minmax(0,1fr); }
  .da-trail { grid-column:1 / -1; display:grid; grid-template-columns:160px minmax(0,1fr); gap:0 20px; border-top:1px solid var(--da-line); border-left:0; }
  .da-trail h3 { grid-column:1; }.da-trail #daTrail { grid-column:2; display:grid; grid-template-columns:repeat(3,1fr); }
  .da-trail-step { min-height:54px; }.da-trail-step:not(:last-child)::after { top:13px; right:0; bottom:auto; left:27px; width:auto; height:1px; }
  .da-trail footer { grid-column:1; grid-row:2; margin-top:0; padding-top:0; border-top:0; }
}
@media (max-width:720px) {
  #diagnosticAgentPage.active { margin:0 -20px -20px; }
  .da-header { min-height:70px; padding:10px 14px; }.da-ready { display:none; }.da-title h2 { font-size:22px; }.da-title p { display:none; }
  .da-workspace { display:flex; flex-direction:column; min-height:calc(100svh - 185px); }
  .da-context { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; padding:14px; border-right:0; border-bottom:1px solid var(--da-line); }
  .da-context section + section { margin-top:0; padding-top:0; border-top:0; }.da-context .da-source { display:none; }
  .da-conversation { order:2; min-height:520px; }.da-messages { min-height:310px; max-height:58svh; padding:22px 14px 14px; }
  .da-quick, .da-composer { width:calc(100% - 28px); }.da-quick { overflow-x:auto; flex-wrap:nowrap; }.da-quick button { flex:0 0 auto; }
  .da-composer { margin-bottom:14px; }.da-user > div { max-width:88%; }
  .da-trail { order:3; display:block; padding:16px 14px; }.da-trail #daTrail { display:grid; grid-template-columns:repeat(3,1fr); }
  .da-trail h3, .da-trail footer { display:none; }.da-trail-step { grid-template-columns:24px minmax(0,1fr); gap:6px; min-height:48px; }.da-trail-step > span { width:24px; height:24px; }
  .da-trail-step:not(:last-child)::after { top:12px; left:24px; }.da-trail-step strong { font-size:14px; }.da-trail-step small { display:none; }
}