:root {
  color-scheme: light;
  --ink: #172126;
  --muted: #68767d;
  --line: #d9e2e5;
  --panel: #ffffff;
  --canvas: #f3f6f5;
  --canvas-deep: #e9efed;
  --rail: #102229;
  --rail-soft: #19353d;
  --teal: #087f72;
  --teal-dark: #06675d;
  --teal-soft: #e3f4f0;
  --blue: #1769aa;
  --amber: #a95408;
  --amber-soft: #fff3dd;
  --red: #b42318;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(16,34,41,.05), 0 10px 30px rgba(16,34,41,.05);
  --shadow-lg: 0 28px 80px rgba(16,34,41,.17);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--canvas); }
body { margin: 0; min-width: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 88% -10%, rgba(8,127,114,.1), transparent 32rem), var(--canvas); }
button,input,select,textarea { font: inherit; }
button { cursor: pointer; }
button,input,select,textarea,summary { transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease; }
:focus-visible { outline: 3px solid rgba(23,105,170,.32); outline-offset: 2px; }
button:disabled,input:disabled,select:disabled,textarea:disabled { opacity: .62; cursor: not-allowed; }
.shell { display: grid; grid-template-columns: 224px minmax(0,1fr); min-height: 100vh; }
.rail { position: sticky; top: 0; z-index: 10; display: flex; flex-direction: column; height: 100vh; padding: 22px 16px; color: #edf5f2; background: linear-gradient(180deg,#102229 0%,#0d1b21 100%); }
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; padding: 2px 4px 22px; }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; flex: none; border-radius: 13px; color: white; background: linear-gradient(145deg,#0da08f,#087267); box-shadow: 0 12px 28px rgba(8,127,114,.3); font-size: 12px; font-weight: 850; }
.brand strong,.brand small { display: block; }.brand strong { font-size: 15px; }.brand small { color: #9fb0b7; margin-top: 2px; font-size: 12px; }
.nav { display: grid; gap: 7px; }
.nav-item { display: flex; width: 100%; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid transparent; border-radius: 11px; color: #b8c6ca; background: transparent; text-align: left; font-weight: 700; }
.nav-item > span:first-child { display: grid; width: 22px; place-items: center; color: #84a6a5; font-size: 17px; }
.nav-item:hover { color: white; background: rgba(255,255,255,.055); }
.nav-item.is-active { color: white; border-color: rgba(123,221,205,.16); background: rgba(8,127,114,.3); box-shadow: inset 3px 0 #64d2bf; }
.rail-foot { margin-top: auto; display: grid; gap: 14px; font-size: 12px; }.rail-foot a { color: #9ed6ce; text-decoration: none; }.rail-foot a:hover { color: white; }
.trust-note { display: grid; gap: 4px; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; color: #9fb0b7; background: rgba(255,255,255,.035); line-height: 1.45; }.trust-note strong { color: #e7f4f1; }
.main { min-width: 0; }
.topbar { display: flex; min-height: 104px; align-items: center; justify-content: space-between; gap: 24px; padding: 22px clamp(22px,4vw,52px); border-bottom: 1px solid rgba(207,220,221,.78); background: rgba(247,249,248,.84); backdrop-filter: blur(16px); }
.page-heading h1 { margin: 2px 0 4px; font-size: clamp(25px,3vw,34px); letter-spacing: -.04em; }.page-heading p { margin: 0; color: var(--muted); }
.eyebrow,.section-kicker,.hero-kicker { color: var(--teal); font-size: 11px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.top-actions { display: flex; align-items: center; gap: 10px; }.matter-chip { display: grid; min-width: 120px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: var(--shadow-sm); }.matter-chip span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }.matter-chip strong { overflow: hidden; text-overflow: ellipsis; }
.primary,.secondary,.text-button,.icon-button,.prompt-row button,.small-button { border: 0; border-radius: 10px; font-weight: 760; }
.primary { padding: 11px 15px; color: white; background: var(--teal); box-shadow: 0 8px 18px rgba(8,127,114,.2); }.primary:hover { background: var(--teal-dark); transform: translateY(-1px); }
.secondary { padding: 10px 14px; color: var(--ink); border: 1px solid var(--line); background: white; }.secondary:hover { border-color: #9bb5b5; background: #fbfdfc; }
.text-button { padding: 6px; color: var(--teal); background: transparent; }.text-button:hover { color: var(--teal-dark); text-decoration: underline; }
.icon-button { width: 36px; height: 36px; color: var(--teal); border: 1px solid var(--line); background: white; font-size: 20px; }
.connection-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #9aa6aa; }.connection-dot.is-online { background: #16a06a; box-shadow: 0 0 0 3px rgba(22,160,106,.13); }
.connection-panel { display: grid; grid-template-columns: minmax(220px,1.4fr) repeat(3,minmax(120px,.65fr)) minmax(220px,1fr) auto; gap: 12px; align-items: end; padding: 18px clamp(22px,4vw,52px); border-bottom: 1px solid var(--line); background: #e8f1ee; box-shadow: inset 0 -1px rgba(255,255,255,.7); }.connection-copy { display: grid; align-self: center; gap: 3px; }.connection-copy span { color: var(--muted); font-size: 12px; line-height: 1.45; }.connection-panel label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 750; }.connection-panel input { width: 100%; }.connection-panel .remember { display: flex; align-items: center; gap: 7px; grid-column: 5; }.remember input { width: auto; }.connection-panel .run-state { grid-column: 1/-1; }
.connection-panel[hidden] { display: none; }
.content { padding: clamp(24px,4vw,48px) clamp(22px,4vw,52px) 64px; }.view { animation: view-in 180ms ease-out; }.view[hidden] { display: none; }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.hero { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: clamp(24px,4vw,42px); overflow: hidden; border-radius: 22px; color: #effbf8; background: linear-gradient(125deg,#123840 0%,#0b605b 64%,#087f72 100%); box-shadow: var(--shadow-lg); position: relative; }.hero::after { content:""; position:absolute; width:260px; height:260px; right:-70px; top:-120px; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow: 0 0 0 38px rgba(255,255,255,.035),0 0 0 76px rgba(255,255,255,.025); }.hero > * { position: relative; z-index: 1; }.hero .hero-kicker { color: #9ce2d7; }.hero h2 { max-width: 760px; margin: 8px 0; font-size: clamp(26px,4vw,44px); letter-spacing: -.045em; line-height: 1.08; }.hero p { max-width: 760px; margin: 0; color: #c2d9d6; line-height: 1.6; }.hero .primary { flex: none; color: #0f342f; background: #ddfff8; box-shadow: none; }.hero .primary:hover { background: white; }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin: 18px 0; }.metric { display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-sm); }.metric span { color: var(--muted); font-size: 12px; font-weight: 750; }.metric strong { font-size: 30px; letter-spacing: -.04em; }.metric small { color: var(--muted); }.metric.warning strong { color: var(--amber); }
.dashboard-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }.span-two { grid-column: span 2; }
.panel { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-sm); }.panel-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }.panel-head h2,.section-intro h2,.thread-head h2,.chat-head h2 { margin: 4px 0 0; font-size: 19px; letter-spacing: -.025em; }.section-intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }.section-intro h2 { font-size: 28px; }.section-intro p { max-width: 780px; margin: 8px 0 0; color: var(--muted); line-height: 1.55; }
.stack { display: grid; gap: 10px; }.stack.compact { gap: 8px; }.empty { padding: 20px; border: 1px dashed #cbd8d9; border-radius: 11px; color: var(--muted); background: #fafcfb; text-align: center; line-height: 1.5; }
.list-item { display: grid; gap: 7px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdfc; }.list-item-top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.list-item h3 { margin: 0; font-size: 14px; }.item-meta { color: var(--muted); font-size: 12px; line-height: 1.45; }.item-copy { color: #425158; font-size: 13px; line-height: 1.55; white-space: pre-wrap; }.item-actions { display: flex; flex-wrap: wrap; gap: 7px; }.small-button { padding: 7px 9px; color: var(--teal); border: 1px solid #bedbd6; background: var(--teal-soft); font-size: 11px; }.small-button:hover { background: #d2eee8; }.small-button.neutral { color: #4f5e64; border-color: var(--line); background: white; }
.badge,.safety-badge,.scope-lock { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 5px 8px; border-radius: 999px; color: #087267; background: var(--teal-soft); font-size: 11px; font-weight: 800; }.badge.warning,.safety-badge.warning { color: #8b4609; background: var(--amber-soft); }.badge.muted { color: #5c6b71; background: #eef2f2; }
.brief-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }.brief-item { padding: 14px; border-radius: 12px; background: #f5f8f7; }.brief-item span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }.brief-item strong { font-size: 13px; line-height: 1.5; }.brief-item.full { grid-column: 1/-1; }
.value-panel { background: linear-gradient(180deg,#ffffff,#f2f8f6); }.value-list { display: grid; gap: 0; margin: 0; }.value-list div { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); }.value-list div:last-child { border: 0; }.value-list dt { color: var(--muted); }.value-list dd { margin: 0; font-weight: 850; }
.form-panel { padding: 24px; }.form-grid { display: grid; gap: 16px; }.form-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }.form-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }.form-grid label { display: grid; gap: 6px; min-width: 0; }.form-grid label > span,.connection-panel label > span { color: #4e5e64; font-size: 12px; font-weight: 760; }.full { grid-column: 1/-1; }.span-two { grid-column: span 2; }
input,select,textarea { width: 100%; min-width: 0; border: 1px solid #cbd7d9; border-radius: 10px; color: var(--ink); background: white; }.form-grid input,.form-grid select,.connection-panel input { min-height: 42px; padding: 9px 11px; }.form-grid textarea,.composer textarea { padding: 11px 12px; resize: vertical; line-height: 1.55; }.form-grid input:hover,.form-grid select:hover,.form-grid textarea:hover,.connection-panel input:hover,.composer textarea:hover { border-color: #9eb6b8; }.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.connection-panel input:focus,.composer textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(8,127,114,.1); outline: none; }
.check { display: flex!important; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 9px!important; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: #f7faf9; }.check input { width: auto; margin-top: 2px; }.check span { line-height: 1.5; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }.run-state { min-height: 18px; color: var(--muted); font-size: 12px; }.run-state.is-error { color: var(--red); }.run-state.is-success { color: var(--teal); }
.court-warning { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid #f0cea6; border-radius: 12px; color: #6f420d; background: var(--amber-soft); font-size: 13px; line-height: 1.5; }.court-warning strong { flex: none; }
.split-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }.split-grid.lists { margin-top: 18px; }.work-grid { align-items: start; }
.companion-view { height: calc(100vh - 200px); min-height: 620px; }.companion-layout { display: grid; grid-template-columns: 220px minmax(360px,1fr) 280px; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: var(--shadow-sm); }.thread-panel,.evidence-panel { min-width: 0; padding: 18px; background: #f7faf9; }.thread-panel { border-right: 1px solid var(--line); }.evidence-panel { border-left: 1px solid var(--line); }.thread-head,.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }.thread-list { display: grid; gap: 7px; max-height: calc(100% - 64px); overflow: auto; }.thread-item { width: 100%; padding: 11px; border: 1px solid transparent; border-radius: 10px; color: #405058; background: transparent; text-align: left; }.thread-item:hover { background: white; }.thread-item.is-active { border-color: #b9dcd5; color: var(--teal-dark); background: var(--teal-soft); }.thread-item strong,.thread-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.thread-item small { margin-top: 4px; color: var(--muted); }
.chat-panel { display: grid; grid-template-rows: auto minmax(0,1fr) auto auto auto; min-width: 0; padding: 20px; }.scope-lock { color: #53646a; background: #eff3f2; }.chat-messages { min-height: 0; overflow: auto; padding: 8px 4px 18px; scroll-behavior: smooth; }.chat-empty { display: grid; place-items: center; max-width: 520px; margin: 9vh auto 0; text-align: center; }.chat-empty h3 { margin: 12px 0 5px; font-size: 22px; }.chat-empty p { color: var(--muted); line-height: 1.6; }.companion-orb { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 18px; color: white; background: linear-gradient(145deg,#109887,#12535a); box-shadow: 0 14px 36px rgba(8,127,114,.25); font-size: 24px; }
.message { max-width: 82%; margin: 10px 0; padding: 13px 14px; border-radius: 14px; line-height: 1.6; white-space: pre-wrap; }.message.user { margin-left: auto; color: white; background: #174952; border-bottom-right-radius: 4px; }.message.assistant { border: 1px solid var(--line); background: #f8faf9; border-bottom-left-radius: 4px; }.message-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; color: var(--muted); font-size: 10px; }
.prompt-row { display: flex; gap: 7px; padding: 8px 0; overflow-x: auto; }.prompt-row button { flex: none; padding: 7px 9px; color: #486067; border: 1px solid var(--line); background: white; font-size: 11px; }.prompt-row button:hover { color: var(--teal-dark); border-color: #9fcac3; background: var(--teal-soft); }
.composer { padding: 10px; border: 1px solid #bfcfd1; border-radius: 14px; background: white; box-shadow: 0 12px 35px rgba(16,34,41,.08); }.composer textarea { min-height: 76px; border: 0; box-shadow: none!important; }.composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; border-top: 1px solid #edf1f1; }.composer-actions > span { color: var(--muted); font-size: 10px; }
.confidence { display: grid; gap: 4px; margin-bottom: 14px; padding: 14px; border-radius: 12px; background: #eaf5f2; }.confidence strong { font-size: 24px; }.confidence span { color: var(--muted); font-size: 11px; }.source-card { display: grid; gap: 5px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; color: inherit; background: white; text-decoration: none; }.source-card:hover { border-color: #9fcac3; }.source-card strong { font-size: 12px; }.source-card span { color: var(--muted); font-size: 10px; }.source-card p { margin: 0; color: #4f6067; font-size: 11px; line-height: 1.5; }.warning-card { padding: 10px; border-radius: 9px; color: #7a430c; background: var(--amber-soft); font-size: 11px; line-height: 1.45; }.evidence-actions { display: grid; gap: 8px; margin-top: 14px; }.evidence-actions button { width: 100%; }
.toast { position: fixed; z-index: 40; right: 24px; bottom: 24px; max-width: 360px; padding: 12px 15px; border-radius: 11px; color: white; background: #17383e; box-shadow: var(--shadow-lg); }.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (max-width: 1180px) { .connection-panel { grid-template-columns: repeat(3,minmax(0,1fr)); }.connection-copy,.token-field { grid-column: span 2; }.connection-panel .remember { grid-column: auto; }.companion-layout { grid-template-columns: 190px minmax(340px,1fr); }.evidence-panel { display: none; }.dashboard-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.value-panel { grid-column: span 2; } }
@media (max-width: 820px) { .shell { display: block; }.rail { position: sticky; top: 0; z-index: 20; width: 100%; height: auto; padding: 10px 12px; }.brand,.rail-foot { display: none; }.nav { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; }.nav-item { min-width: 0; justify-content: center; gap: 5px; padding: 9px 5px; font-size: 11px; }.nav-item > span:first-child { width: auto; }.topbar { min-height: 86px; padding: 16px 18px; }.page-heading #view-description,.eyebrow { display: none; }.top-actions { min-width: 0; }.matter-chip { min-width: 0; max-width: 130px; }.connection-panel { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 16px 18px; }.connection-copy,.token-field { grid-column: 1/-1; }.content { padding: 20px 18px 48px; }.metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.dashboard-grid,.split-grid { grid-template-columns: 1fr; }.span-two,.value-panel { grid-column: auto; }.form-grid.three { grid-template-columns: repeat(2,minmax(0,1fr)); }.form-grid.three .span-two { grid-column: 1/-1; }.companion-view { height: auto; min-height: 700px; }.companion-layout { grid-template-columns: 1fr; min-height: 700px; }.thread-panel { display: none; }.chat-panel { min-height: 700px; }.hero { align-items: start; flex-direction: column; }.section-intro { align-items: start; flex-direction: column; }.court-warning { align-items: start; flex-direction: column; } }
@media (max-width: 520px) { .nav-item { font-size: 9px; flex-direction: column; }.topbar { align-items: start; flex-wrap: wrap; }.top-actions { width: 100%; justify-content: space-between; }.matter-chip { display: grid; flex: 1; max-width: 210px; }.connection-panel,.form-grid.two,.form-grid.three,.metric-grid,.brief-grid { grid-template-columns: 1fr; }.connection-copy,.token-field,.connection-panel .remember,.full,.span-two { grid-column: auto!important; }.hero { padding: 24px 20px; }.hero h2 { font-size: 27px; }.panel,.form-panel { padding: 16px; }.content { padding-inline: 12px; }.message { max-width: 94%; }.composer-actions > span { display: none; }.composer-actions { justify-content: flex-end; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto!important; animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; } }