html, body { margin: 0; height: 100%; background: #f8fafc; color: #15181d; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { overflow: hidden; }
button { font: inherit; }
.muted { color: #667085 !important; }

.shell { display: grid; grid-template-columns: 206px 1fr; height: 100vh; background: #f8fafc; }
.app-rail { position: relative; display: flex; flex-direction: column; background: #f4f5f7; border-right: 1px solid #e4e7ec; padding: 18px 12px 14px; overflow: hidden; }
.brand-mark { width: 34px; height: 34px; border: 1px solid #d0d5dd; border-radius: 9px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; background:white; margin-bottom: 28px; }
.rail-company { display:flex; align-items:center; gap:9px; padding: 4px 4px 22px; }
.company-badge { width:27px; height:27px; display:flex; align-items:center; justify-content:center; border-radius:4px; background:#e8f3e9; color:#32734a; font-size:21px; font-weight:800; font-style:italic; }
.rail-nav .mud-nav-link { border-radius: 7px; margin-bottom: 4px; font-size: 13px; }
.rail-nav .mud-nav-link.active { background:#e5e7eb; color:#111827; }
.rail-footer { margin-top:auto; border-top:1px solid #e4e7ec; padding-top:12px; }
.user-row { display:flex; gap:9px; align-items:center; margin-top:10px; }
.shell-main { min-width:0; min-height:0; }

.chat-page { height:100vh; display:grid; grid-template-columns: 292px 1fr; background:white; }
.session-pane { border-right:1px solid #e4e7ec; background:#fff; padding: 14px 10px; overflow:hidden; display:flex; flex-direction:column; }
.session-pane-header { display:flex; justify-content:space-between; align-items:flex-start; padding:4px 5px 10px; }
.new-session-button { background:#4b5563 !important; color:white !important; text-transform:none !important; font-weight:600 !important; }
.session-list { margin-top:10px; overflow-y:auto; }
.session-row { width:100%; display:grid; grid-template-columns:minmax(0,1fr) 30px; align-items:center; border-radius:7px; }
.session-row:hover, .session-row.selected { background:#f2f4f7; }
.session-item { width:100%; min-width:0; border:0; background:transparent; display:grid; grid-template-columns:20px minmax(0,1fr); align-items:flex-start; gap:8px; padding:10px 4px 10px 8px; border-radius:7px; text-align:left; cursor:pointer; color:#20242b; }
.session-leading-icon { width:20px; display:flex; justify-content:center; align-items:flex-start; padding-top:1px; }
.session-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.session-title { font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.session-age { color:#667085; font-size:11px; }
.session-delete { opacity:.42; justify-self:center; }
.session-row:hover .session-delete, .session-row.selected .session-delete { opacity:.9; }

.conversation-pane { position:relative; min-width:0; min-height:0; display:flex; flex-direction:column; background:#fbfcfd; }
.conversation-topbar { height:44px; border-bottom:1px solid #e4e7ec; display:flex; align-items:center; justify-content:space-between; padding:0 18px; background:white; }
.empty-chat { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px; transform: translateY(-3vh); }
.empty-greeting { font-weight:700 !important; margin-bottom:8px !important; }
.empty-composer-wrap, .suggestions { width:min(700px, 80vw); }
.suggestions { margin-top:30px; background:white; }
.suggestion { width:100%; display:flex; align-items:center; gap:10px; border:0; background:transparent; padding:10px 8px; text-align:left; border-radius:7px; cursor:pointer; color:#20242b; font-size:13px; }
.suggestion:hover { background:#f8fafc; }

.conversation-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:26px 24px 160px; }
.conversation-width { width:min(880px, calc(100vw - 570px)); min-width:460px; margin:0 auto; }
.composer-dock { position:absolute; left:0; right:0; bottom:0; padding:20px 24px 28px; background:linear-gradient(to bottom, rgba(251,252,253,0), #fbfcfd 30%); pointer-events:none; }
.composer-dock .conversation-width { pointer-events:auto; }
.chat-composer { background:white; border-color:#d8dde5 !important; box-shadow:0 5px 18px rgba(16,24,40,.05); }
.composer-text .mud-input-root { font-size:13px; }
.composer-toolbar { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #f0f2f5; padding-top:5px; }
.provider-controls { display:flex; align-items:center; gap:8px; }
.provider-select { width:105px; }
.model-input { width:180px; }

.message-block { margin: 0 0 26px; }
.message-block.user { display:flex; justify-content:flex-end; }
.user-bubble { max-width:80%; background:#f1f2f4; padding:10px 13px; border-radius:11px; font-size:14px; line-height:1.45; }
.message-block.assistant { color:#1f2937; }
.trace-summary { color:#667085; font-size:11px; margin-bottom:6px; }
.trace-panels { margin-bottom:12px; }
.trace-panels .mud-expand-panel { box-shadow:none !important; border-bottom:1px solid #eef0f2; background:transparent; }
.trace-panels .mud-expand-panel-header { min-height:38px; padding:0 4px; }
.trace-title { display:flex; align-items:center; gap:8px; width:100%; font-size:11.5px; }
.trace-kind { font-weight:650; color:#111827; }
.trace-name { color:#344054; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.trace-duration { margin-left:auto; color:#667085; font-size:11px; }
.json-label { display:block; color:#475467 !important; margin-bottom:4px !important; font-weight:700 !important; }
.json-box { background:#f8fafc; border:1px solid #eaecf0; border-radius:6px; padding:10px; overflow-x:auto; overflow-y:visible; max-height:none; font-size:11.5px; line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.assistant-answer { white-space:pre-wrap; font-size:15px; line-height:1.62; padding-top:3px; }
.agent-working { display:flex; gap:10px; align-items:center; color:#667085; padding:10px 0 30px; }

.skills-page { height:100vh; overflow:auto; padding:26px 30px; background:#fbfcfd; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; max-width:1200px; margin:0 auto 22px; }
.skills-grid { display:grid; grid-template-columns: 360px minmax(0, 1fr); gap:18px; max-width:1200px; margin:0 auto; }
.skill-list-card, .skill-editor-card { background:white; }
.skill-list-item { width:100%; border:0; background:transparent; text-align:left; border-radius:8px; padding:11px; margin-bottom:3px; cursor:pointer; }
.skill-list-item:hover, .skill-list-item.selected { background:#f2f4f7; }
.skill-list-title-row { display:flex; align-items:center; gap:7px; }
.skill-name { font-weight:650; font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.skill-state { margin-left:auto; font-size:10px; padding:2px 6px; border-radius:10px; text-transform:uppercase; letter-spacing:.03em; }
.skill-state.active { background:#ecfdf3; color:#027a48; }
.skill-state.draft { background:#fff6ed; color:#b54708; }
.skill-description { display:block; color:#667085; font-size:11px; margin:5px 0 0 31px; line-height:1.4; }
.skill-editor-card { min-height:660px; }
.skill-empty { min-height:560px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.skill-editor-top { display:grid; grid-template-columns:1fr 160px; gap:12px; }
.skill-body-editor textarea { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size:12px !important; line-height:1.5 !important; }
.editor-actions { display:flex; justify-content:space-between; align-items:center; margin-top:14px; gap:15px; }

@media (max-width: 1000px) {
  .shell { grid-template-columns: 72px 1fr; }
  .app-rail { padding:14px 8px; }
  .rail-company .mud-typography, .rail-nav .mud-nav-link-text, .rail-footer .mud-typography, .user-row > div { display:none; }
  .rail-company { justify-content:center; }
  .brand-mark { margin-left:auto; margin-right:auto; }
  .chat-page { grid-template-columns:240px 1fr; }
  .conversation-width { width:min(760px, calc(100vw - 350px)); min-width:320px; }
}

/* v0.4: session usage + rendered markdown */
.conversation-topbar-right { display:flex; align-items:center; gap:14px; }
.session-usage { display:flex; align-items:center; gap:12px; font-size:12px; color:#475467; white-space:nowrap; }
.session-token-count { font-variant-numeric: tabular-nums; }
.session-estimated-cost { color:#111827; font-weight:650; font-variant-numeric: tabular-nums; }

.assistant-answer { white-space:normal; }
.markdown-body { font-size:15px; line-height:1.62; }
.markdown-body > :first-child { margin-top:0; }
.markdown-body > :last-child { margin-bottom:0; }
.markdown-body p { margin:0 0 12px; }
.markdown-body strong { font-weight:700; color:#111827; }
.markdown-body em { font-style:italic; }
.markdown-body code { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:#f2f4f7; border:1px solid #eaecf0; border-radius:4px; padding:1px 4px; font-size:.92em; }
.markdown-body pre { background:#f8fafc; border:1px solid #eaecf0; border-radius:7px; padding:11px; overflow:auto; }
.markdown-body pre code { background:transparent; border:0; padding:0; }
.markdown-body ul, .markdown-body ol { margin:8px 0 14px 22px; padding:0; }
.markdown-body li { margin:3px 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { color:#111827; margin:18px 0 9px; line-height:1.3; }
.markdown-body h1 { font-size:22px; }
.markdown-body h2 { font-size:18px; }
.markdown-body h3 { font-size:15px; }
.markdown-body table { width:100%; border-collapse:separate; border-spacing:0; margin:12px 0 18px; border:1px solid #dfe3e8; border-radius:8px; overflow:hidden; background:#fff; }
.markdown-body th, .markdown-body td { padding:9px 12px; border-bottom:1px solid #e6e9ed; text-align:left; vertical-align:top; }
.markdown-body th { background:#f8fafc; color:#111827; font-weight:700; }
.markdown-body tr:last-child td { border-bottom:0; }
.markdown-body blockquote { margin:12px 0; padding:4px 0 4px 12px; border-left:3px solid #d0d5dd; color:#475467; }


/* v0.8: the conversation owns vertical scrolling.
   Expanded tool traces must never trap the mouse wheel/touchpad. */
.conversation-scroll {
  overflow-y:scroll;
  overflow-x:hidden;
  overscroll-behavior-y:auto;
  scrollbar-gutter:stable;
  touch-action:pan-y;
}
.trace-content {
  max-height:none;
  overflow:visible;
  overscroll-behavior:auto;
  touch-action:auto;
  padding:2px 8px 8px 0;
}
.trace-content .json-box {
  max-height:none;
  overflow-x:auto;
  overflow-y:visible;
  overscroll-behavior:auto;
}

/* v0.11 workspace attachments */
.composer-attachments { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px; }
.composer-actions { display:flex; align-items:center; gap:2px; }
.attachment-picker { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; cursor:pointer; color:#596579; }
.attachment-picker:hover { background:#f2f4f7; }
.attachment-picker.disabled { opacity:.45; cursor:default; pointer-events:none; }
.attachment-picker input[type=file] { display:none; }
.user-attachments { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; padding-top:8px; border-top:1px solid rgba(0,0,0,.06); }
.user-attachment-link { display:inline-flex; align-items:center; gap:4px; text-decoration:none; color:#315b8a; font-size:12px; background:white; border:1px solid #d9dee6; border-radius:7px; padding:4px 7px; }
.user-attachment-link:hover { background:#f7f9fb; }

/* v0.12 helpdesk */
.helpdesk-page .session-pane { background:#fbfcfb; }
.helpdesk-page .new-session-button { background:#335f49 !important; }
.helpdesk-page .conversation-pane { background:#fcfdfc; }
.helpdesk-page .composer-dock { background:linear-gradient(to bottom, rgba(252,253,252,0), #fcfdfc 30%); }
.helpdesk-page .empty-greeting { font-size:28px !important; }
.helpdesk-page .suggestions { border-color:#dde6e0 !important; }
.helpdesk-composer-label { font-size:12px; color:#667085; padding-left:4px; }

.knowledge-page { height:100vh; overflow:auto; padding:28px 32px 48px; background:#fbfcfd; }
.knowledge-header { max-width:1180px; margin:0 auto 22px; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.knowledge-page > .mud-alert { max-width:1180px; margin-left:auto; margin-right:auto; }
.knowledge-grid { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(320px, .7fr); gap:18px; align-items:start; }
.knowledge-card { background:white; min-height:320px; }
.knowledge-card-title { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:16px; }
.knowledge-upload { display:inline-flex; align-items:center; gap:7px; border:1px solid #d0d5dd; border-radius:8px; padding:8px 11px; font-size:12px; font-weight:650; cursor:pointer; background:#fff; color:#344054; white-space:nowrap; }
.knowledge-upload:hover { background:#f8fafc; }
.knowledge-upload input[type=file] { display:none; }
.knowledge-working { display:flex; align-items:center; gap:8px; color:#667085; font-size:12px; margin:8px 0 12px; }
.knowledge-empty { min-height:205px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; color:#98a2b3; border:1px dashed #d8dde5; border-radius:9px; }
.knowledge-file-list { border-top:1px solid #eef0f2; }
.knowledge-file-row { display:flex; gap:10px; align-items:flex-start; padding:12px 2px; border-bottom:1px solid #eef0f2; }
.knowledge-file-copy { display:flex; flex-direction:column; min-width:0; gap:3px; }
.knowledge-file-name { font-size:13px; font-weight:650; color:#20242b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.knowledge-file-meta { font-size:11px; color:#667085; }
.pipeline-list { display:flex; flex-direction:column; gap:13px; }
.pipeline-list > div { display:grid; grid-template-columns:14px 92px 1fr; align-items:center; column-gap:7px; font-size:12px; }
.pipeline-list strong { color:#344054; }
.pipeline-list span:last-child { color:#667085; }
.pipeline-dot { width:8px; height:8px; border-radius:50%; background:#d0d5dd; display:inline-block; }
.pipeline-dot.ready { background:#3b7a57; }

@media (max-width: 900px) {
  .knowledge-grid { grid-template-columns:1fr; }
  .knowledge-header { flex-direction:column; }
}

/* v0.17 Microsoft Entra authentication */
.public-shell { min-height:100vh; background:linear-gradient(135deg,#f7faf8 0%,#eef3f0 100%); overflow:auto; }
.landing-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px; box-sizing:border-box; }
.landing-card { width:min(620px,calc(100vw - 48px)); background:white; border:1px solid #dfe5e1; border-radius:16px; padding:52px 54px; box-shadow:0 18px 50px rgba(16,24,40,.08); text-align:left; }
.landing-mark { width:48px; height:48px; border:1px solid #cfd8d2; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; margin-bottom:26px; background:#fff; }
.landing-kicker { color:#335f49 !important; font-weight:750 !important; letter-spacing:.08em !important; }
.landing-title { margin:4px 0 12px !important; font-weight:750 !important; letter-spacing:-.025em !important; }
.landing-copy { max-width:510px; color:#596579 !important; line-height:1.65 !important; margin-bottom:30px !important; }
.auth-message-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:30px; box-sizing:border-box; }
.auth-message-card { width:min(480px,calc(100vw - 48px)); background:#fff; }
.user-copy { min-width:0; }
.user-display-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-upn { display:block; max-width:145px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rail-signout { margin-top:9px; display:flex; align-items:center; gap:7px; color:#667085; text-decoration:none; font-size:11.5px; padding:5px 6px; border-radius:6px; }
.rail-signout:hover { color:#344054; background:#eaecf0; }
.auth-diagnostics-page { height:100vh; overflow:auto; padding:28px 32px 48px; background:#fbfcfd; box-sizing:border-box; }
.auth-diagnostics-header { max-width:1080px; margin:0 auto 22px; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.auth-diagnostics-card { max-width:1080px; margin:0 auto; background:white; }
.diagnostic-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 34px; }
.diagnostic-grid > div { min-width:0; display:flex; flex-direction:column; gap:4px; padding:13px 0; border-bottom:1px solid #eef0f2; }
.diagnostic-grid span { color:#667085; font-size:11.5px; }
.diagnostic-grid strong { color:#20242b; font-size:13px; overflow-wrap:anywhere; }
.diagnostic-grid .mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; font-weight:550; }
@media (max-width:780px) { .diagnostic-grid { grid-template-columns:1fr; } .landing-card { padding:36px 30px; } }