/* IBM Carbon Design System, Gray 10 theme, hand-written tokens (no framework build in this demo).
   Spacing scale 02=4 03=8 05=16 06=24 07=32; type: label-01, body-01, body-02, heading-02, heading-04, code-01. */
:root{
  --cds-background:#f4f4f4;--cds-layer-01:#ffffff;--cds-layer-02:#f4f4f4;--cds-layer-accent:#e0e0e0;
  --cds-field-01:#f4f4f4;--cds-field-02:#ffffff;--cds-border-subtle:#e0e0e0;--cds-border-strong:#8d8d8d;
  --cds-text-primary:#161616;--cds-text-secondary:#525252;--cds-text-placeholder:#a8a8a8;--cds-text-on-color:#ffffff;
  --cds-interactive:#0f62fe;--cds-button-primary-hover:#0353e9;--cds-button-primary-active:#002d9c;--cds-focus:#0f62fe;
  --cds-support-error:#da1e28;--cds-support-success:#24a148;--cds-support-warning:#f1c21b;--cds-support-info:#0043ce;
  --cds-tag-blue-bg:#d0e2ff;--cds-tag-blue-text:#0043ce;--cds-tag-green-bg:#a7f0ba;--cds-tag-green-text:#0e6027;
  --cds-tag-red-bg:#ffd7d9;--cds-tag-red-text:#a2191f;--cds-tag-gray-bg:#e0e0e0;--cds-tag-gray-text:#393939;--cds-tag-warm-bg:#fcf4d6;--cds-tag-warm-text:#684e00;
  --cds-notification-error-bg:#fff1f1;--cds-notification-info-bg:#edf5ff;--cds-header-bg:#161616;--cds-header-text:#f4f4f4;
  --font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}html,body{height:100%}
[hidden]{display:none!important}
body{margin:0;background:var(--cds-background);color:var(--cds-text-primary);font:14px/20px var(--font-sans);display:flex;flex-direction:column;letter-spacing:.16px}
.cds-label{font-size:12px;line-height:16px;letter-spacing:.32px;color:var(--cds-text-secondary);margin:0 0 8px}
.cds-body-01{font-size:14px;line-height:20px;letter-spacing:.16px}.cds-body-02{font-size:16px;line-height:24px;letter-spacing:0}
.cds-heading-02{font-size:16px;line-height:22px;font-weight:600;margin:0}.cds-heading-04{font-size:28px;line-height:36px;font-weight:400;margin:0 0 16px}
.text-secondary{color:var(--cds-text-secondary)}.cds-code{font-family:var(--font-mono);font-size:12px;line-height:16px;letter-spacing:.32px}

/* UI shell header */
.cds-header{height:48px;display:flex;align-items:center;background:var(--cds-header-bg);color:var(--cds-header-text);border-bottom:1px solid #393939;padding:0 16px;gap:16px}
.cds-header__name{display:flex;align-items:center;height:100%;color:var(--cds-header-text);text-decoration:none;font-size:14px;letter-spacing:.1px}
.cds-header__name .prefix{font-weight:600;margin-right:6px}.cds-header__name .prefix::after{content:"·";margin-left:6px;font-weight:400;color:#c6c6c6}
.cds-header__sub{color:#c6c6c6;font-size:12px;letter-spacing:.32px}
.cds-header__global{margin-left:auto;display:flex;align-items:center;gap:8px;height:100%}
.cds-header__global .user{font-weight:600;margin-right:4px}
.cds-header .cds-btn--ghost{color:var(--cds-header-text);height:48px;border-left:1px solid #393939;padding:0 16px}.cds-header .cds-btn--ghost:hover{background:#353535}
.tags span{display:inline-flex;align-items:center;height:24px;padding:0 8px;margin-left:4px;background:var(--cds-tag-blue-bg);color:var(--cds-tag-blue-text);border-radius:12px;font-size:12px;line-height:16px;letter-spacing:.32px}

/* Buttons (Carbon: square corners, left-aligned label, 48px default, 32px sm) */
.cds-btn{font:inherit;font-size:14px;line-height:18px;letter-spacing:.16px;cursor:pointer;border:1px solid transparent;border-radius:0;height:48px;padding:0 60px 0 15px;display:inline-flex;align-items:center;text-decoration:none;max-width:320px;min-width:fit-content;transition:background 70ms cubic-bezier(0,0,.38,.9)}
.cds-btn--primary{background:var(--cds-interactive);color:var(--cds-text-on-color)}.cds-btn--primary:hover{background:var(--cds-button-primary-hover)}.cds-btn--primary:active{background:var(--cds-button-primary-active)}
.cds-btn--ghost{background:transparent;color:var(--cds-interactive);padding:0 15px}.cds-btn--ghost:hover{background:#e5e5e5}
.cds-btn--sm{height:32px}.cds-btn:focus-visible{outline:2px solid var(--cds-focus);outline-offset:-2px;box-shadow:inset 0 0 0 3px #fff}
.cds-btn:disabled{background:#c6c6c6;color:#8d8d8d;cursor:not-allowed}

/* Tiles and tags */
.cds-tile{background:var(--cds-layer-01);padding:16px;border:none}
.cds-tag{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:12px;font:inherit;font-size:12px;line-height:16px;letter-spacing:.32px;border:1px solid transparent;cursor:default;white-space:nowrap;max-width:100%}
.cds-tag--outline{background:transparent;border-color:var(--cds-border-strong);color:var(--cds-text-primary);cursor:pointer;height:32px;padding:0 12px;font-size:14px}.cds-tag--outline:hover{background:#e5e5e5}
.cds-tag--green{background:var(--cds-tag-green-bg);color:var(--cds-tag-green-text)}.cds-tag--red{background:var(--cds-tag-red-bg);color:var(--cds-tag-red-text)}
.cds-tag--gray{background:var(--cds-tag-gray-bg);color:var(--cds-tag-gray-text)}.cds-tag--warm{background:var(--cds-tag-warm-bg);color:var(--cds-tag-warm-text)}

/* Sign-in: only shown when there is no session (boot() toggles the hidden attribute) */
.signin{flex:1;padding:48px 16px}
.signin-tile{max-width:640px;margin:0 auto;padding:32px}
.signin-tile .cds-body-02{margin:0 0 32px}

/* Chat layout */
.app{flex:1;display:grid;grid-template-columns:minmax(0,3fr) minmax(360px,2fr);gap:16px;padding:16px;min-height:0}
.chat,.trace{display:flex;flex-direction:column;min-height:0;padding:0}
.messages{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:85%;padding:12px 16px;white-space:pre-wrap;word-wrap:break-word;font-size:14px;line-height:20px}
.msg.user{align-self:flex-end;background:var(--cds-notification-info-bg);border-left:3px solid var(--cds-interactive)}
.msg.assistant{align-self:flex-start;background:var(--cds-layer-02)}
.msg.assistant.error{background:var(--cds-notification-error-bg);border-left:3px solid var(--cds-support-error)}
.msg p{margin:0 0 8px}.msg p:last-child{margin:0}.msg ul{margin:4px 0 8px 18px;padding:0}
.msg code{font-family:var(--font-mono);font-size:12px;background:var(--cds-layer-accent);padding:1px 4px}
.msg .cursor{display:inline-block;width:8px;height:1em;background:var(--cds-text-secondary);vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes blink{to{opacity:0}}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 8px}
.composer{display:flex;gap:8px;padding:16px;border-top:1px solid var(--cds-border-subtle);align-items:flex-end}
.cds-text-area{flex:1;resize:none;font:inherit;font-size:14px;line-height:20px;padding:11px 16px;background:var(--cds-field-01);color:var(--cds-text-primary);border:none;border-bottom:1px solid var(--cds-border-strong);border-radius:0;max-height:140px}
.cds-text-area::placeholder{color:var(--cds-text-placeholder)}.cds-text-area:focus{outline:2px solid var(--cds-focus);outline-offset:-2px}
.composer .cds-btn{height:42px;padding:0 15px}

/* Trace panel: one card per tool call, built like a Carbon structured list with a status bar */
.trace-head{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 16px;border-bottom:1px solid var(--cds-border-subtle)}
.cards{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.tcard{background:var(--cds-layer-02);border-left:3px solid var(--cds-border-strong);padding:12px 16px;font-size:14px;line-height:20px}
.tcard.ok{border-left-color:var(--cds-support-success)}.tcard.fail{border-left-color:var(--cds-support-error)}.tcard.pending{border-left-color:var(--cds-support-warning)}
.tcard .title{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-weight:600;margin-bottom:8px}
.tcard .title .t{font-family:var(--font-mono);font-size:12px;color:var(--cds-text-secondary);font-weight:400;white-space:nowrap}
.row{display:grid;grid-template-columns:72px 1fr;gap:8px;padding:8px 0;border-top:1px solid var(--cds-border-subtle)}
.row .k{color:var(--cds-text-secondary);font-size:12px;line-height:16px;letter-spacing:.32px;text-transform:uppercase;padding-top:4px}
.row .v{min-width:0}.row .v div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .v .big{white-space:normal}
.badge{margin-right:8px}
.mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.32px}
.muted{color:var(--cds-text-secondary)}
.reason{color:var(--cds-text-primary);white-space:normal!important}.tcard.fail .reason{color:var(--cds-support-error)}
@media (max-width:900px){.app{grid-template-columns:1fr;grid-auto-rows:minmax(0,1fr);padding:8px}.chat{min-height:60vh}.msg{max-width:95%}.cds-header__sub{display:none}}

/* ---- access panel (why 200 or 403) ---- */
.cds-header .cds-btn--ghost svg{margin-right:8px}
.access{margin:16px 16px 0;padding:16px}
.access-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px}
.access-head p{margin:4px 0 0;max-width:900px}
.access-body .err{color:var(--cds-support-error)}
.cds-table{width:100%;border-collapse:collapse;font-size:14px;line-height:20px;letter-spacing:.16px}
.cds-table th{background:var(--cds-layer-accent);text-align:left;font-weight:600;padding:0 16px;height:48px;border-bottom:1px solid var(--cds-border-subtle);vertical-align:middle}
.cds-table th .sub{display:block;font-weight:400;font-size:12px;line-height:16px;color:var(--cds-text-secondary);font-family:var(--font-mono)}
.cds-table td{padding:0 16px;height:48px;border-bottom:1px solid var(--cds-border-subtle);background:var(--cds-layer-01);vertical-align:middle}
.cds-table tr.asked td{background:var(--cds-notification-info-bg)}
.cds-table td .mono{display:block}
.cds-table td .tool{color:var(--cds-text-secondary);font-size:12px}
.cds-table .by{display:block;font-family:var(--font-mono);font-size:12px;color:var(--cds-text-secondary);margin-top:2px}
.cds-tag--blue{background:var(--cds-tag-blue-bg);color:var(--cds-tag-blue-text)}
.access details{margin-top:12px}.access summary{cursor:pointer;color:var(--cds-interactive);font-size:14px}
.access pre{font-family:var(--font-mono);font-size:12px;line-height:16px;background:var(--cds-layer-02);padding:12px 16px;margin:8px 0 0;overflow:auto;white-space:pre}