:root {
  --bg: #0b0d0f;
  --panel: #111417;
  --panel-2: #171b1f;
  --line: #272d32;
  --text: #f2f5f3;
  --muted: #8f9994;
  --accent: #b6f36b;
  --accent-dark: #17220f;
  --user: #28301f;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.topbar {
  height: 72px;
  max-width: 1548px;
  margin: auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark, .mini-avatar {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--accent); color: #11150e;
  font-weight: 850;
}
.brand strong { display: block; font-size: 16px; letter-spacing: -.02em; }
.brand small { display: block; margin-top: 1px; color: var(--muted); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.system-state { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 8px; }
.system-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(182,243,107,.7); }
.app-frame { min-height: calc(100vh - 72px); display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.module-nav { position: sticky; top: 0; height: calc(100vh - 72px); padding: 26px 14px 18px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #0d1012; }
.module-nav-label { padding: 0 13px 14px; color: #59615d; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.module-nav-inner { display: flex; flex-direction: column; gap: 5px; }
.module-link { position: relative; min-height: 54px; padding: 0 13px; display: flex; align-items: center; gap: 13px; border-radius: 10px; color: var(--muted); transition: color .18s, background .18s, transform .18s; }
.module-link span { width: 20px; font-size: 10px; font-variant-numeric: tabular-nums; color: #59615d; }
.module-link strong { font-size: 15px; font-weight: 650; letter-spacing: -.015em; white-space: nowrap; }
.module-link:hover { color: var(--text); background: rgba(255,255,255,.035); transform: translateX(2px); }
.module-link.active { color: var(--text); background: var(--panel-2); }
.module-link.active span { color: var(--accent); }
.module-link.active:before { content: ""; position: absolute; left: -14px; top: 13px; bottom: 13px; width: 2px; background: var(--accent); }
.module-nav-footer { margin-top: auto; padding: 16px 13px 0; display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--line); color: #68716c; font-size: 10px; }
.module-nav-footer i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(182,243,107,.45); }
main { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 28px; }

.module-placeholder { position: relative; min-height: calc(100vh - 72px); display: flex; align-items: center; overflow: hidden; }
.module-placeholder-copy { position: relative; z-index: 1; padding: 80px 0 120px; animation: rise .45s ease both; }
.module-placeholder h1 { margin: 0; max-width: 800px; font-size: clamp(50px, 8vw, 96px); line-height: .92; letter-spacing: -.06em; }
.module-placeholder-copy > p:not(.eyebrow) { margin: 22px 0 30px; color: var(--muted); font-size: 16px; }
.module-pending { display: inline-flex; align-items: center; gap: 9px; padding-top: 18px; border-top: 1px solid var(--line); color: #707974; font-size: 11px; letter-spacing: .04em; }
.module-pending i { width: 7px; height: 7px; border-radius: 50%; background: #59615d; }
.module-watermark { position: absolute; right: -24px; top: 50%; transform: translateY(-52%); color: transparent; -webkit-text-stroke: 1px #20262a; font-size: min(42vw, 520px); font-weight: 850; line-height: 1; letter-spacing: -.1em; user-select: none; animation: watermark-in .7s ease both; }

.workspace-intro { padding: 90px 0 38px; max-width: 650px; animation: rise .45s ease both; }
.eyebrow { margin: 0 0 12px; color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.workspace-intro h1 { margin: 0; font-size: clamp(38px, 6vw, 64px); line-height: .98; letter-spacing: -.055em; }
.workspace-intro > p:last-child { max-width: 520px; margin: 24px 0 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.new-case { padding: 28px 0 78px; border-bottom: 1px solid var(--line); }
.model-picker-head { max-width: 860px; margin-bottom: 18px; padding-bottom: 16px; display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid var(--line); }
.model-picker-head div > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.model-picker-head strong { font-size: 15px; }
.model-picker-head > small { color: #626b66; font-size: 10px; }
.new-case .model-picker { display: grid; grid-template-columns: minmax(310px, 1fr) minmax(260px, .8fr) auto; max-width: 860px; gap: 12px; align-items: end; }
.new-case label { min-width: 0; }
.new-case label > span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
select, input[type=text] { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); padding: 13px 14px; outline: none; }
select:focus, input:focus, textarea:focus { border-color: #4b5748; }
.model-select-wrap select { min-height: 50px; font-weight: 650; }
.model-preview { min-height: 50px; padding: 7px 10px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.model-chip { max-width: 112px; padding: 6px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 7px; background: var(--accent-dark); color: var(--accent); font-size: 10px; font-weight: 750; }
.model-preview div { min-width: 0; }
.model-preview strong, .model-preview small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-preview strong { font-size: 11px; }.model-preview small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.new-case button, .resolve-form button, .case-actions form > button {
  align-self: flex-end; border: 0; border-radius: 10px; background: var(--accent); color: #12170e; font-weight: 750; padding: 14px 20px;
}
.new-case button span { margin-left: 22px; }
.case-list { padding: 46px 0 80px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.section-heading h2 { margin: 0; font-size: 19px; }
.section-heading > span { color: var(--muted); font-size: 12px; }
.case-list ul { list-style: none; margin: 0; padding: 0; }
.case-row { border-top: 1px solid var(--line); }
.case-row:last-child { border-bottom: 1px solid var(--line); }
.case-row a { min-height: 78px; display: flex; align-items: center; gap: 16px; padding: 13px 8px; transition: background .18s, padding .18s; }
.case-row a:hover { padding-left: 14px; background: var(--panel); }
.case-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: none; border: 1px solid #3a4335; border-radius: 12px; color: var(--accent); font-size: 12px; font-weight: 800; }
.case-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.case-copy strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-copy small, .date { color: var(--muted); font-size: 11px; }
.status { padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 750; white-space: nowrap; }
.status-open { color: var(--accent); background: var(--accent-dark); }
.status-resolved { color: #afb5b1; background: #24282a; }
.date { margin-left: auto; }
.row-arrow { color: var(--muted); font-size: 22px; }
.empty { color: var(--muted); }

.case-shell { max-width: 880px; min-height: calc(100vh - 72px); margin: auto; display: flex; flex-direction: column; }
.case-header { position: sticky; top: 0; z-index: 10; min-height: 82px; display: flex; align-items: center; gap: 16px; background: rgba(11,13,15,.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.back { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }
.case-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.assistant-avatar { position: relative; flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--panel-2); border: 1px solid #364032; }
.assistant-avatar:before, .assistant-avatar:after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; top: 15px; background: var(--accent); }
.assistant-avatar:before { left: 12px; }.assistant-avatar:after { right: 12px; }
.assistant-avatar i { position: absolute; bottom: 10px; width: 14px; height: 5px; border-bottom: 2px solid var(--accent); border-radius: 50%; }
.case-title p { margin: 0 0 3px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.case-title h1 { margin: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-header > .status { margin-left: auto; }
.usage-summary { position: relative; }
.usage-summary summary { list-style: none; min-width: 92px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; text-align: right; }
.usage-summary summary::-webkit-details-marker { display: none; }
.usage-summary summary span { display: block; color: var(--accent); font-size: 11px; font-weight: 750; }
.usage-summary summary small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.usage-popover { position: absolute; z-index: 30; right: 0; top: 48px; width: 260px; padding: 16px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.usage-popover > strong { font-size: 12px; }.usage-popover > p { color: var(--muted); font-size: 11px; }
.usage-popover dl { margin: 12px 0 0; }
.usage-popover dl div { display: flex; justify-content: space-between; padding: 6px 0; color: var(--muted); font-size: 11px; }
.usage-popover dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.usage-popover .usage-total { margin-top: 5px; padding-top: 11px; border-top: 1px solid var(--line); }
.usage-popover .usage-total dd { color: var(--accent); font-weight: 750; }
.case-actions { position: relative; }
.case-actions summary { list-style: none; width: 36px; height: 36px; display: grid; place-items: center; color: var(--muted); cursor: pointer; }
.case-actions summary::-webkit-details-marker { display: none; }
.case-actions form { position: absolute; right: 0; top: 44px; width: 290px; padding: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.45); display: flex; gap: 8px; }
.case-actions input { min-width: 0; }
.case-actions button { white-space: nowrap; padding: 10px 12px; }

.transcript { flex: 1; display: flex; flex-direction: column; gap: 26px; padding: 42px 0 190px; }
.welcome-message { text-align: center; max-width: 570px; margin: auto; padding: 50px 0 100px; animation: rise .5s ease both; }
.assistant-avatar.large { width: 68px; height: 68px; margin: 0 auto 28px; border-radius: 22px; transform: scale(1.15); }
.welcome-message h2 { margin: 0; font-size: clamp(30px, 5vw, 44px); letter-spacing: -.045em; }
.welcome-message > p:not(.eyebrow) { color: var(--muted); line-height: 1.6; }
.prompt-hints { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.prompt-hints button { border: 1px solid var(--line); border-radius: 999px; background: transparent; color: #bcc4c0; padding: 9px 13px; font-size: 12px; transition: .18s; }
.prompt-hints button:hover { border-color: #52604d; color: var(--accent); transform: translateY(-2px); }
.message { max-width: 78%; animation: rise .32s ease both; }
.message.role-user { align-self: flex-end; }
.message.role-assistant { align-self: flex-start; }
.message-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--muted); font-size: 11px; font-weight: 700; }
.role-user .message-head { justify-content: flex-end; }
.mini-avatar { width: 24px; height: 24px; border-radius: 8px; font-size: 11px; }
.content { padding: 15px 17px; border: 1px solid var(--line); border-radius: 4px 16px 16px 16px; background: var(--panel); white-space: pre-wrap; line-height: 1.65; font-size: 14px; }
.role-user .content { background: var(--user); border-color: #39432e; border-radius: 16px 4px 16px 16px; }
.message-usage { display: flex; align-items: center; gap: 7px; margin: 7px 4px 0; color: #66706a; font-size: 9px; font-variant-numeric: tabular-nums; }
.message-usage i { width: 3px; height: 3px; border-radius: 50%; background: #4d5651; }
.message-usage.legacy { display: block; opacity: .65; }
.photos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.photos img { max-width: min(260px, 100%); border-radius: 12px; border: 1px solid var(--line); }
.thinking { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; animation: rise .25s ease; }
.thinking[hidden] { display: none; }
.thinking i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); animation: pulse 1s infinite; }
.thinking i:nth-last-child(2) { animation-delay: .15s; }.thinking i:last-child { animation-delay: .3s; }

.composer-dock { position: fixed; z-index: 20; bottom: 0; left: 248px; right: 0; padding: 18px 24px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 22%); }
.composer { max-width: 820px; min-height: 66px; margin: 20px auto 0; padding: 9px; display: flex; align-items: flex-end; gap: 9px; border: 1px solid #384039; border-radius: 18px; background: #15191b; box-shadow: 0 18px 55px rgba(0,0,0,.45); transition: border .2s, box-shadow .2s; }
.composer:focus-within { border-color: #607051; box-shadow: 0 18px 60px rgba(0,0,0,.6), 0 0 0 3px rgba(182,243,107,.05); }
.attach { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border-radius: 12px; color: var(--muted); cursor: pointer; transition: .18s; }
.attach:hover { background: #22272a; color: var(--accent); }
.attach input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.attach span { font-size: 25px; font-weight: 300; }
.compose-field { flex: 1; min-width: 0; }
.composer textarea { display: block; width: 100%; max-height: 150px; min-height: 42px; padding: 11px 3px 7px; resize: none; overflow-y: auto; border: 0; outline: 0; background: transparent; color: var(--text); line-height: 1.45; }
.composer textarea::placeholder { color: #6f7873; }
.file-status { display: block; color: var(--accent); font-size: 10px; padding: 0 3px 4px; }
.send { width: 44px; height: 44px; flex: none; border: 0; border-radius: 13px; background: var(--accent); color: #11160d; font-size: 22px; font-weight: 800; transition: transform .15s, opacity .15s; }
.send:hover { transform: translateY(-2px); }.send:disabled { opacity: .45; cursor: wait; transform: none; }
.composer-note { max-width: 820px; margin: 7px auto 0; text-align: center; color: #606863; font-size: 10px; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 70%, 100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
@keyframes watermark-in { from { opacity: 0; transform: translate(24px, -52%); } to { opacity: 1; transform: translate(0, -52%); } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

@media (max-width: 820px) {
  .topbar { height: 62px; padding: 0 16px; }
  .system-state { font-size: 0; }.system-state i { width: 8px; height: 8px; }
  .app-frame { min-height: calc(100vh - 62px); display: block; }
  .module-nav { position: sticky; top: 0; z-index: 40; width: 100%; height: 50px; padding: 0; display: block; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .module-nav::-webkit-scrollbar { display: none; }
  .module-nav-label, .module-nav-footer { display: none; }
  .module-nav-inner { width: max-content; min-width: 100%; padding: 0 10px; display: flex; flex-direction: row; gap: 0; }
  .module-link { min-width: auto; min-height: 49px; padding: 0 14px; border-radius: 0; }
  .module-link strong { font-size: 13px; }
  .module-link:hover { transform: none; }
  .module-link.active:before { left: 12px; right: 12px; top: auto; bottom: 0; width: auto; height: 2px; }
  .module-placeholder { min-height: calc(100vh - 111px); }
  .module-watermark { right: -8px; font-size: 72vw; }
  main { padding: 0 16px; }
  .workspace-intro { padding-top: 62px; }
  .model-picker-head { align-items: flex-start; gap: 10px; }
  .model-picker-head > small { text-align: right; }
  .new-case .model-picker { display: flex; flex-direction: column; align-items: stretch; }
  .new-case button { align-self: stretch; display: flex; justify-content: space-between; }
  .date { display: none; }
  .case-row .status { margin-left: auto; }
  .case-header { min-height: 72px; gap: 9px; }
  .assistant-avatar { width: 38px; height: 38px; }
  .case-header > .status { font-size: 0; width: 8px; height: 8px; padding: 0; background: var(--accent); }
  .usage-summary summary { min-width: 66px; }
  .usage-summary summary small { display: none; }
  .case-title h1 { max-width: 170px; }
  .message { max-width: 92%; }
  .transcript { padding-top: 28px; padding-bottom: 160px; }
  .welcome-message { padding: 35px 6px 60px; }
  .composer-dock { left: 0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .composer { margin-top: 20px; border-radius: 16px; }
  .composer-note { display: none; }
}

/* ============================================================
   MAC USTA / UNIFIED WORKSHOP THEME
   Deep navy instrument frame + warm work surface
   ============================================================ */
:root {
  --bg: #f1efe9;
  --panel: #fbfaf7;
  --panel-2: #f5f2ec;
  --line: #ddd9d0;
  --text: #19273b;
  --muted: #718095;
  --accent: #4368dd;
  --accent-dark: #e9eeff;
  --user: #edf1ff;
  --nav: #17253b;
  --nav-2: #1e304a;
  --coral: #ef6d65;
  --mint: #25aa83;
  --amber: #e5a441;
}

html { color-scheme: light; }
body {
  background:
    radial-gradient(circle at 78% 10%, rgba(67,104,221,.08), transparent 30rem),
    #f1efe9;
  color: var(--text);
}

.topbar {
  position: relative;
  z-index: 50;
  height: 68px;
  max-width: none;
  padding: 0 26px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: #142237;
  color: #fff;
  box-shadow: 0 8px 24px rgba(18,33,53,.14);
}
.brand-mark, .mini-avatar {
  background: linear-gradient(145deg, #ff8177, #e85b64);
  color: #fff;
  box-shadow: 0 7px 18px rgba(232,91,100,.24);
}
.brand strong { color: #fff; }
.system-state { color: #aeb9c9; }
.system-state i { background: var(--mint); box-shadow: 0 0 0 4px rgba(37,170,131,.12), 0 0 14px rgba(37,170,131,.38); }

.app-frame { min-height: calc(100vh - 68px); grid-template-columns: 224px minmax(0,1fr); }
.module-nav {
  height: calc(100vh - 68px);
  padding: 25px 12px 17px;
  border-right: 1px solid rgba(255,255,255,.07);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 30%),
    var(--nav);
  color: #fff;
}
.module-nav-label { color: #73829a; padding-inline: 14px; }
.module-link { color: #a7b3c4; border-radius: 12px; }
.module-link span { color: #667992; }
.module-link:hover { color: #fff; background: rgba(255,255,255,.055); }
.module-link.active {
  color: #fff;
  background: var(--nav-2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.055), 0 9px 22px rgba(5,15,29,.17);
}
.module-link.active span { color: #8faaff; }
.module-link.active::before { left: -12px; background: var(--coral); width: 3px; border-radius: 0 4px 4px 0; }
.module-nav-footer { border-color: rgba(255,255,255,.08); color: #7f8da2; }
.module-nav-footer i { background: var(--mint); box-shadow: 0 0 0 4px rgba(37,170,131,.1); }

main { max-width: 1120px; padding: 0 clamp(24px,3vw,44px); }

.workspace-intro { position: relative; padding: 76px 0 34px; max-width: 720px; }
.workspace-intro::before {
  content: "01";
  position: absolute;
  top: 48px;
  right: -185px;
  color: rgba(67,104,221,.065);
  font-size: 190px;
  font-weight: 850;
  letter-spacing: -.09em;
  line-height: 1;
  pointer-events: none;
}
.eyebrow { color: #d95861; }
.workspace-intro h1 { color: #17253b; font-size: clamp(42px,6vw,70px); }
.workspace-intro > p:last-child { color: #68778b; }

.new-case { padding: 26px 0 64px; border-color: #d9d5cc; }
.model-picker-head { border-color: #d9d5cc; }
.model-picker-head div > span, .new-case label > span { color: #738196; }
.model-picker-head > small { color: #8a938f; }
select, input[type=text] {
  border-color: #d8d5ce;
  background: rgba(255,255,255,.72);
  color: #1a293f;
  box-shadow: 0 5px 16px rgba(38,50,69,.035);
}
select:focus, input:focus, textarea:focus { border-color: #8ca2ea; box-shadow: 0 0 0 3px rgba(67,104,221,.09); }
.model-preview { border-color: #d8d5ce; background: rgba(255,255,255,.58); }
.model-chip { background: #e7edff; color: #365bc9; }
.new-case button, .resolve-form button, .case-actions form > button {
  border-radius: 12px;
  background: #4368dd;
  color: #fff;
  box-shadow: 0 9px 22px rgba(67,104,221,.2);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.new-case button:hover, .resolve-form button:hover, .case-actions form > button:hover { transform: translateY(-2px); background: #3558c6; box-shadow: 0 13px 28px rgba(67,104,221,.25); }

.case-list { padding-top: 38px; }
.case-row { border-color: #d9d5cc; }
.case-row a { border-radius: 13px; }
.case-row a:hover { background: rgba(255,255,255,.64); }
.case-icon { border-color: #b9c7f2; background: #e9eeff; color: #365bc9; }
.case-copy small, .date { color: #7b8798; }
.status-open { color: #13775c; background: #e2f5ee; }
.status-resolved { color: #667386; background: #e7e9ec; }

.module-placeholder { min-height: calc(100vh - 68px); }
.module-placeholder h1 { color: #17253b; }
.module-placeholder-copy > p:not(.eyebrow) { color: #6e7b8e; }
.module-pending { border-color: #d8d4cb; color: #758195; }
.module-pending i { background: var(--amber); box-shadow: 0 0 0 4px rgba(229,164,65,.11); }
.module-watermark { -webkit-text-stroke-color: rgba(67,104,221,.12); }

.case-shell { max-width: 920px; }
.case-header {
  background: rgba(241,239,233,.9);
  border-color: #dad6ce;
  backdrop-filter: blur(18px) saturate(145%);
}
.back { border-color: #d5d2ca; background: rgba(255,255,255,.55); color: #66758b; }
.assistant-avatar { background: #e9eeff; border-color: #c1cdf4; }
.assistant-avatar::before, .assistant-avatar::after { background: #4368dd; }
.assistant-avatar i { border-color: #4368dd; }
.case-title p, .message-head { color: #788598; }
.usage-summary summary { border-color: #d5d2ca; background: rgba(255,255,255,.55); }
.usage-summary summary span { color: #4368dd; }
.usage-popover, .case-actions form { background: #fbfaf7; border-color: #d8d5ce; box-shadow: 0 20px 60px rgba(29,42,60,.16); }
.usage-popover dd { color: #1a293f; }
.usage-popover .usage-total dd { color: #4368dd; }
.content { border-color: #d9d6cf; background: #fbfaf7; color: #1a293f; box-shadow: 0 7px 18px rgba(35,48,66,.035); }
.role-user .content { background: #e9eeff; border-color: #c5d0f5; }
.message-usage { color: #8791a0; }
.prompt-hints button { border-color: #d3d0c9; color: #637286; background: rgba(255,255,255,.38); }
.prompt-hints button:hover { border-color: #9bb0f1; color: #3558c6; background: #eef2ff; }
.thinking i { background: #4368dd; }

.composer-dock { left: 224px; background: linear-gradient(transparent, #f1efe9 26%); }
.composer { border-color: #d3d0c8; background: #fbfaf7; box-shadow: 0 18px 50px rgba(30,44,63,.15); }
.composer:focus-within { border-color: #8ca2ea; box-shadow: 0 18px 55px rgba(30,44,63,.17), 0 0 0 3px rgba(67,104,221,.08); }
.composer textarea { color: #1a293f; }
.composer textarea::placeholder { color: #8a94a2; }
.attach { color: #768397; }
.attach:hover { background: #edf1ff; color: #4368dd; }
.send { background: #4368dd; color: #fff; box-shadow: 0 7px 18px rgba(67,104,221,.2); }
.composer-note { color: #89919b; }

@media (max-width: 820px) {
  .topbar { height: 62px; background: #142237; }
  .app-frame { min-height: calc(100vh - 62px); }
  .module-nav { height: 52px; padding: 0; background: #17253b; border-bottom-color: rgba(255,255,255,.07); }
  .module-nav-inner { padding-inline: 10px; }
  .module-link { min-height: 51px; color: #a7b3c4; }
  .module-link.active { background: transparent; box-shadow: none; }
  .module-link.active::before { left: 12px; width: auto; height: 3px; background: var(--coral); }
  main { padding-inline: 16px; }
  .workspace-intro::before { right: -20px; top: 36px; font-size: 120px; }
  .composer-dock { left: 0; }
}