/* AENET Cloud Public — Chat Surface styles (v1.0).
 *
 * POM::AENET_CHAT_MAIN_WEB_DISPLAY_INTEGRATION_V1
 *
 * All colors resolve through RGBM tokens (--rgbm-*), all fonts through
 * FGRID role classes (f-role-*). No hard-coded chat colors/fonts, no
 * random z-index (ZGRID layers below). The Chat Surface reuses the main
 * shell (topbar/nav/footer) — this file styles only the chat regions.
 */

/* COLOR.CHAT.* semantic aliases (resolve via RGBM — POM §62). */
:root {
  --color-chat-user: var(--rgbm-action);
  --color-chat-assistant: var(--rgbm-insight);
  --color-chat-streaming: var(--rgbm-system);
  --color-chat-error: var(--rgbm-guard);
  --color-chat-composer: var(--rgbm-navigation);
  --color-chat-surface: var(--panel);
  --color-chat-surface-2: var(--panel-2);
  --z-chat-message: 0;
  --z-chat-composer: 1;
  --z-chat-drawer: 2;
  --z-chat-floating: 3;
  --z-chat-modal: 4;
}

/* ─── Shell ─────────────────────────────────────────────────────────── */
/* The shared shell turns <main> into an 8/12-column bento grid
 * (body[data-page] main). The Chat Surface is a full-width flex column —
 * this override (higher specificity + later in the cascade) restores the
 * intended layout without touching the shared shell rules. */
body[data-page="chat"] main {
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
  gap: var(--dgrid-space-04);
  padding: var(--dgrid-space-04) var(--dgrid-space-05);
  height: auto;
  min-height: calc(100vh - var(--dgrid-header-system) - var(--dgrid-status-height));
  overflow: visible;
}

.chat-shell {
  display: flex;
  flex-direction: column;
  gap: var(--dgrid-space-04);
  padding: var(--dgrid-space-05) 0;
  min-height: calc(100vh - var(--dgrid-header-system) - var(--dgrid-status-height));
}

/* B00 — Chat header */
.chat-header-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dgrid-space-04);
  padding: var(--dgrid-space-04) var(--dgrid-space-05);
  background: var(--color-chat-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.chat-header-title { display: flex; align-items: baseline; gap: var(--dgrid-space-04); flex-wrap: wrap; }
.chat-header-title h1 { margin: 0; font-size: var(--fgrid-page-title-size); }
.chat-header-session { color: var(--text-dim); }
.chat-header-meta { display: flex; gap: var(--dgrid-space-02); flex-wrap: wrap; }
.chat-meta-pill {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 0.06em;
}

/* B10 — Chat subnav */
.chat-subnav-inner {
  display: flex;
  align-items: center;
  gap: var(--dgrid-space-02);
  padding: 0 var(--dgrid-space-05);
  border-bottom: 1px solid var(--border);
}
.chat-subnav-item {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: var(--fgrid-body-size);
  padding: 8px 12px;
  cursor: pointer;
}
.chat-subnav-item:hover { color: var(--text); }
.chat-subnav-item.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.chat-subnav-note { margin-left: auto; color: var(--text-faint); padding-bottom: 6px; }

/* ─── Body: expanded 3-column ───────────────────────────────────────── */
.chat-body {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 280px;
  gap: var(--dgrid-space-04);
  padding: 0 var(--dgrid-space-05);
  flex: 1;
  min-height: 420px;
}

/* C00 — Sessions */
.chat-sessions {
  background: var(--color-chat-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--dgrid-space-03);
  overflow-y: auto;
  max-height: 68vh;
  z-index: var(--z-chat-message);
}
.chat-session-list { display: flex; flex-direction: column; gap: 6px; }
.chat-session-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: var(--color-chat-surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.chat-session-item:hover { border-color: var(--border-strong); }
.chat-session-item.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.chat-session-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-session-type { color: var(--text-faint); font-size: 10px; }

/* D00/D10 — Workspace + message stream */
.chat-workspace {
  display: flex;
  flex-direction: column;
  gap: var(--dgrid-space-03);
  min-width: 0;
  z-index: var(--z-chat-message);
}
.chat-stream {
  flex: 1;
  background: var(--color-chat-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--dgrid-space-04);
  overflow-y: auto;
  max-height: 68vh;
}
/* KAP-grid owns D10 scroll semantics. The browser only supplies the
 * contained overflow transport required by keyboard, touch and assistive
 * technology; the document itself remains locked in the expanded shell. */
.chat-stream[data-kap-grid-scroll="K.PUBLIC.CHAT.D10"] {
  scrollbar-gutter: stable;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  overflow-anchor: none;
  contain: layout paint;
  scroll-behavior: auto;
}
.chat-stream[data-kap-grid-scroll="K.PUBLIC.CHAT.D10"][data-kap-grid-at-start="true"] {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rgbm-system) 20%, transparent);
}
.chat-stream[data-kap-grid-scroll="K.PUBLIC.CHAT.D10"][data-kap-grid-at-end="true"] {
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--rgbm-system) 20%, transparent);
}
.chat-message-stream {
  display: flex;
  flex-direction: column;
  gap: var(--dgrid-space-04);
  contain: layout paint style;
  overflow-anchor: none;
}
.chat-message {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 82%;
}
.chat-message-user { align-self: flex-end; align-items: flex-end; }
.chat-message-assistant { align-self: flex-start; align-items: flex-start; }
.chat-message-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-faint);
  font-size: 10px;
}
.chat-message-role { font-weight: 600; letter-spacing: 0.08em; }
.chat-message-user .chat-message-role { color: var(--color-chat-user); }
.chat-message-assistant .chat-message-role { color: var(--color-chat-assistant); }
.chat-message-eng { color: var(--text-faint); font-size: 9px; }
.chat-message-content {
  background: var(--color-chat-surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--fgrid-body-size);
  line-height: 1.5;
}
.chat-message-user .chat-message-content { border-color: color-mix(in srgb, var(--color-chat-user) 35%, var(--border)); }

/* D20 — Composer */
.chat-composer {
  background: var(--color-chat-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--dgrid-space-03);
  z-index: var(--z-chat-composer);
}
.chat-composer-inner { display: flex; flex-direction: column; gap: 8px; }
.chat-composer-input {
  width: 100%;
  resize: vertical;
  min-height: 48px;
  background: var(--color-chat-surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
}
.chat-composer-input:focus { outline: none; border-color: var(--color-chat-composer); }
.chat-composer-input:disabled { opacity: 0.55; cursor: not-allowed; }
.chat-composer-actions { display: flex; align-items: center; gap: var(--dgrid-space-03); }
.chat-composer-send {
  background: var(--color-chat-composer);
  border: none;
  color: #08131f;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
}
.chat-composer-send:disabled { opacity: 0.45; cursor: not-allowed; }
.chat-composer-note { color: var(--text-faint); font-size: 10px; }

/* D30 — Context inspector */
.chat-context {
  background: var(--color-chat-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--dgrid-space-03);
  overflow-y: auto;
  max-height: 68vh;
  z-index: var(--z-chat-message);
}
.chat-context-label { color: var(--text-faint); margin: 0 0 8px; letter-spacing: 0.1em; }
.chat-context-list { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.chat-context-row { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fgrid-body-size); }
.chat-context-row dt { color: var(--text-faint); }
.chat-context-row dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.chat-context-note { color: var(--text-faint); font-size: 10px; line-height: 1.5; margin-top: 10px; }

/* F00 — Status bar */
.chat-status {
  padding: 8px var(--dgrid-space-05);
  border-top: 1px solid var(--border);
  z-index: var(--z-chat-message);
}
.chat-status-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dgrid-space-04);
  align-items: center;
  color: var(--text-dim);
  font-size: 11px;
}
.chat-status-item b { color: var(--text); font-weight: 600; }
.chat-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rgbm-guard); }
.chat-status-dot.on { background: var(--rgbm-action); }
.chat-status-session { margin-left: auto; }
.chat-status-eng code { color: var(--text-faint); font-size: 10px; }

/* States: loading / error / empty / entry */
.chat-loading, .chat-error, .chat-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-dim);
  font-size: var(--fgrid-body-size);
  border: 1px dashed var(--border);
  border-radius: 10px;
}
.chat-error { color: var(--color-chat-error); border-color: var(--color-chat-error); }
.chat-entry { padding: 32px 24px; max-width: 560px; margin: 0 auto; text-align: center; }
.chat-entry h2 { color: var(--text); }
.chat-entry p { color: var(--text-dim); }
.chat-entry-actions { display: flex; justify-content: center; gap: var(--dgrid-space-03); margin-top: 16px; }
.chat-connect {
  background: var(--accent);
  border: none;
  color: #08131f;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 8px;
  cursor: pointer;
}
.chat-connect-eng { background: var(--color-chat-surface-2); color: var(--text-dim); border: 1px solid var(--border); }
.chat-entry-note { font-size: 11px; color: var(--text-faint); margin-top: 12px; }

/* ─── Medium: drawers ────────────────────────────────────────────────── */
@media (max-width: 1199px) and (min-width: 768px) {
  .chat-body { grid-template-columns: minmax(0, 1fr); }
  .chat-sessions, .chat-context {
    position: fixed !important;
    top: var(--dgrid-header-system);
    bottom: var(--dgrid-status-height);
    width: 300px;
    max-height: none;
    z-index: var(--z-chat-drawer);
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .chat-sessions { left: 0; border-right: 1px solid var(--border-strong); }
  .chat-context { right: 0; transform: translateX(100%); border-left: 1px solid var(--border-strong); }
  body.chat-sessions-open .chat-sessions { transform: translateX(0); }
  body.chat-context-open .chat-context { transform: translateX(0); }
}

/* ─── Compact: bottom sheets ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .chat-body { grid-template-columns: minmax(0, 1fr); }
  .chat-sessions, .chat-context {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46vh;
    max-height: none;
    border-radius: 14px 14px 0 0;
    z-index: var(--z-chat-drawer);
    transform: translateY(105%);
    transition: transform 0.2s ease;
  }
  body.chat-sessions-open .chat-sessions { transform: translateY(0); }
  body.chat-context-open .chat-context { transform: translateY(0); }
  .chat-subnav-note { display: none; }
  .chat-header-title h1 { font-size: 20px; }
  .chat-message { max-width: 94%; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-sessions, .chat-context { transition: none; }
  .chat-stream[data-kap-grid-scroll="K.PUBLIC.CHAT.D10"] { scroll-behavior: auto; }
}

/* DGRID CHAT workstation composition v2.
   The shared page shell owns the header/context/footer rows. This adapter
   gives PAGE.CHAT one bounded application surface: header → tabs → split
   workspace → status. The message stream is the only flexible region; the
   session and context panels never compete with the composer for height. */
html:has(body[data-page="chat"]){height:100%;overflow:hidden;}
body[data-page="chat"]{
  min-width:0;
  height:100vh;
  overflow:hidden;
  display:grid;
  grid-template-rows:64px minmax(0,1fr) 72px;
}
body[data-page="chat"] > header.site{grid-row:1;min-height:0;position:relative;overflow:visible;}
body[data-page="chat"] > .wrap{
  grid-row:2;
  width:100%;max-width:none;min-height:0;padding:0 18px;
  display:flex;flex-direction:column;
}
body[data-page="chat"] .context-bar{flex:0 0 52px;min-height:0;overflow:hidden;}
body[data-page="chat"] .route-context{min-height:0;padding:4px 6px;overflow:hidden;}
body[data-page="chat"] main.content-field{
  flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:0 0 8px;
  display:block;overflow:hidden;
}
body[data-page="chat"] .chat-shell{
  height:100%;min-height:0;padding:8px 0;
  display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;
  gap:8px;overflow:hidden;
}
body[data-page="chat"] .chat-header,
body[data-page="chat"] .chat-subnav,
body[data-page="chat"] .chat-status{min-width:0;min-height:0;}
body[data-page="chat"] .chat-header-inner{
  min-height:52px;padding:10px 14px;border-radius:4px;
  background:rgba(16,26,46,.9);
}
body[data-page="chat"] .chat-header-title h1{font-size:20px;line-height:1.1;}
body[data-page="chat"] .chat-header-title{gap:12px;}
body[data-page="chat"] .chat-header-session{display:flex;align-items:center;gap:6px;max-width:42ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body[data-page="chat"] .chat-header-session-label{color:var(--rgbm-system);font:8px/1 var(--mono);letter-spacing:.1em;}
body[data-page="chat"] .chat-header-meta{justify-content:flex-end;}
body[data-page="chat"] .chat-meta-pill{border-radius:3px;padding:3px 6px;font-size:8px;}
body[data-page="chat"] .chat-meta-pill b{color:var(--rgbm-system);font:700 10px var(--mono);}
body[data-page="chat"] .chat-header-meta[data-fgrid="FGRID.CHAT.META"]{align-items:center;}
body[data-page="chat"] .chat-header-meta[data-fgrid="FGRID.CHAT.META"] .chat-meta-pill:first-child{border-color:var(--rgbm-system);}
body[data-page="chat"] .chat-subnav-inner{
  min-height:32px;padding:0 8px;border:1px solid var(--border);
  background:rgba(7,12,24,.76);
}
body[data-page="chat"] .chat-subnav-item{padding:7px 10px;font-size:11px;}
body[data-page="chat"] .chat-body{
  min-height:0;height:100%;padding:0;display:grid;
  grid-template-columns:minmax(210px,2.5fr) minmax(0,7fr) minmax(230px,2.5fr);
  gap:8px;overflow:hidden;
}
body[data-page="chat"] .chat-sessions,
body[data-page="chat"] .chat-context,
body[data-page="chat"] .chat-stream,
body[data-page="chat"] .chat-composer{
  min-width:0;border-radius:4px;background:rgba(16,26,46,.86);
}
body[data-page="chat"] .chat-sessions,
body[data-page="chat"] .chat-context{
  height:100%;max-height:none;padding:8px;overflow:auto;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
  overflow-anchor:none;
  contain:layout paint;
}
body[data-page="chat"] .chat-panel-head{
  display:flex;align-items:center;gap:7px;min-height:24px;margin-bottom:8px;
  color:var(--text);font:700 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
}
body[data-page="chat"] .chat-panel-head code{color:var(--rgbm-system);font-size:9px;}
body[data-page="chat"] .chat-session-list{gap:4px;}
body[data-page="chat"] .chat-session-item{padding:8px;border-radius:3px;}
body[data-page="chat"] .chat-workspace{height:100%;min-height:0;gap:8px;}
body[data-page="chat"] .chat-stream{height:auto;min-height:0;max-height:none;padding:12px;overflow:auto;}
body[data-page="chat"] .chat-message-stream{min-height:100%;justify-content:flex-start;}
body[data-page="chat"] .chat-empty,
body[data-page="chat"] .chat-entry{border-radius:3px;}
body[data-page="chat"] .chat-entry{max-width:640px;padding:56px 32px;margin:auto;}
body[data-page="chat"] .chat-entry h2{font-size:22px;line-height:1.2;}
body[data-page="chat"] .chat-entry p{font-size:13px;line-height:1.6;}
body[data-page="chat"] .chat-composer{flex:0 0 auto;padding:8px;}
body[data-page="chat"] .chat-composer-input{min-height:46px;border-radius:3px;padding:8px 10px;}
body[data-page="chat"] .chat-composer-send,
body[data-page="chat"] .chat-connect{border-radius:3px;padding:7px 14px;}
body[data-page="chat"] .chat-connect{background:var(--rgbm-navigation);color:var(--bg);}
body[data-page="chat"] .chat-connect-eng{background:var(--color-chat-surface-2);color:var(--text);}
body[data-page="chat"] .chat-context-inner{min-width:0;}
body[data-page="chat"] .chat-context-label{margin:0 0 10px;font-size:10px;}
body[data-page="chat"] .chat-status{padding:6px 8px;border:1px solid var(--border);background:rgba(7,12,24,.8);}
body[data-page="chat"] .chat-status-line{gap:8px;font-size:9px;}
body[data-page="chat"] > footer.site{grid-row:3;min-height:0;height:72px;padding:0 18px;overflow:hidden;}
body[data-page="chat"] > footer.site .wrap{width:100%;max-width:none;padding:0;min-width:0;}
body[data-page="chat"] > footer.site .grid{width:100%;font-size:11px;}
body[data-page="chat"] > footer.site .system-bus{font-size:10px;}

/* B10 API projection — mirrors the public API page's contract bar and
 * D01–D08 connection strip. The source remains K.PUBLIC.API; Chat only
 * projects the relationship so users can see the route into the gateway. */
body[data-page="chat"] .chat-contract-bar{
  min-width:0;min-height:0;padding:10px 14px;border:1px solid var(--border);
  background:rgba(16,26,46,.82);display:flex;justify-content:space-between;
  gap:18px;align-items:center;overflow:hidden;
}
body[data-page="chat"] .chat-contract-identity{min-width:0;overflow:hidden;}
body[data-page="chat"] .chat-contract-bar .eyebrow{margin:0 0 3px;font-size:10px;letter-spacing:1.5px;}
body[data-page="chat"] .chat-contract-bar h2{margin:0;font-size:17px;line-height:1.15;}
body[data-page="chat"] .chat-contract-source{margin:4px 0 0;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body[data-page="chat"] .chat-contract-metrics{display:flex;gap:18px;align-items:center;flex:0 0 auto;}
body[data-page="chat"] .chat-contract-metrics div{display:grid;gap:3px;text-align:right;}
body[data-page="chat"] .chat-contract-metrics span{color:var(--text-faint);font-size:9px;text-transform:uppercase;letter-spacing:1px;white-space:nowrap;}
body[data-page="chat"] .chat-contract-metrics strong{color:var(--rgbm-system);font:700 15px var(--mono);}
body[data-page="chat"] .chat-contract-link{padding:7px 10px;border:1px solid var(--border-strong);color:var(--rgbm-navigation);font:10px var(--mono);white-space:nowrap;text-decoration:none;}
body[data-page="chat"] .chat-contract-link:hover{border-color:var(--rgbm-navigation);color:var(--text);}
body[data-page="chat"] .chat-connection-structure{
  min-width:0;min-height:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
  gap:6px;overflow:hidden;
}
body[data-page="chat"] .chat-connection-structure span{
  min-width:0;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;gap:6px;padding:7px 8px;border:1px solid var(--border);
  background:var(--color-chat-surface-2);box-shadow:inset 0 2px 0 var(--rgbm-navigation);
}
body[data-page="chat"] .chat-connection-structure code{color:var(--rgbm-system);font:700 10px var(--mono);}
body[data-page="chat"] .chat-connection-structure b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font:700 9px var(--mono);letter-spacing:.03em;}

/* Keep the new contract rows inside the same bounded shell; D10 remains the
 * flexible vertical region and the composer keeps its existing write gate. */
body[data-page="chat"] .chat-shell{grid-template-rows:auto auto auto auto minmax(0,1fr) auto;}

@media (max-width: 1199px) {
  body[data-page="chat"]{min-width:0;height:auto;min-height:100vh;overflow-x:hidden;overflow-y:auto;display:block;}
  body[data-page="chat"] > .wrap{display:block;min-height:0;padding:0 16px;}
  body[data-page="chat"] main.content-field{overflow:visible;padding-bottom:16px;}
  body[data-page="chat"] .chat-shell{height:auto;min-height:0;padding:8px 0;overflow:visible;}
  body[data-page="chat"] .chat-body{height:clamp(520px,calc(100vh - 430px),720px);}
  body[data-page="chat"] .chat-connection-structure{grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;}
  body[data-page="chat"] > footer.site{height:auto;min-height:72px;}
}

@media (max-width: 767px) {
  body[data-page="chat"] .chat-contract-bar{align-items:flex-start;flex-direction:column;gap:10px;}
  body[data-page="chat"] .chat-contract-metrics{width:100%;justify-content:space-between;gap:8px;}
  body[data-page="chat"] .chat-connection-structure{grid-template-columns:repeat(2,minmax(0,1fr));}
  body[data-page="chat"] .chat-body{height:calc(var(--aenet-viewport-h) - 340px);min-height:420px;}
  body[data-page="chat"] .chat-header-inner{align-items:flex-start;flex-direction:column;}
  body[data-page="chat"] .chat-header-meta{justify-content:flex-start;width:100%;}
  body[data-page="chat"] .chat-entry-actions{flex-wrap:wrap;max-width:100%;}
  body[data-page="chat"] .chat-entry-actions .chat-connect:first-child{flex:1 1 100%;}
  body[data-page="chat"] .chat-entry-actions .chat-connect-eng{flex:1 1 0;min-width:0;}
}

/* ═══════════════════════════════════════════════════════════════════════
 * SURFACE.HOME.CHAT_ENTRY (POM::AENET_HOME_CHAT_UNIFIED_SURFACE_V1 §12/§27)
 * Quick chat surface on PAGE.HOME. Same tokens, same grid language, same
 * RGBM/FGRID — no second color or font universe (POM §54/§110).
 * ═══════════════════════════════════════════════════════════════════════ */

.home-chat-entry-block { grid-column: 1 / -1; }

.home-chat-entry {
  display: flex;
  flex-direction: column;
  gap: var(--dgrid-space-04);
  padding: var(--dgrid-space-05);
  background: var(--color-chat-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.home-chat-entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dgrid-space-04);
  flex-wrap: wrap;
}

.home-chat-entry-title { display: flex; align-items: baseline; gap: var(--dgrid-space-03); flex-wrap: wrap; }
.home-chat-entry-title h2 { margin: 0; }
.home-chat-entry-eyebrow { color: var(--text-dim); letter-spacing: 0.05em; }

.home-chat-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.home-chat-status-meta { opacity: 0.75; }
.home-chat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: var(--color-chat-streaming);
}
.home-chat-dot.on { background: var(--color-chat-assistant); }
.home-chat-dot.off { background: var(--color-chat-error); }
.home-chat-dot.auth { background: var(--color-chat-streaming); }

.home-chat-entry-body {
  display: flex;
  flex-direction: column;
  gap: var(--dgrid-space-04);
}

.home-chat-quick { display: flex; flex-direction: column; gap: var(--dgrid-space-02); }
.home-chat-input-label { color: var(--text-dim); letter-spacing: 0.05em; }

.home-chat-input-row {
  display: flex;
  gap: var(--dgrid-space-03);
  align-items: flex-end;
}
.home-chat-input {
  flex: 1;
  min-width: 0;
  resize: vertical;
  padding: var(--dgrid-space-03);
  background: var(--color-chat-surface-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-family: inherit;
}
.home-chat-input:focus { outline: 2px solid var(--color-chat-composer); outline-offset: 1px; }
.home-chat-input:disabled { opacity: 0.55; cursor: not-allowed; }

.home-chat-send { white-space: nowrap; }

.home-chat-note {
  min-height: 1.2em;
  color: var(--text-dim);
  font-size: 12px;
}

.home-chat-actions {
  display: flex;
  align-items: center;
  gap: var(--dgrid-space-03);
  flex-wrap: wrap;
}

.home-chat-resume { display: inline-flex; align-items: center; gap: 8px; }
.home-chat-resume-label { font-weight: 600; }
.home-chat-resume-name {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.75;
  font-size: 12px;
}

.home-chat-auth { color: var(--text-dim); margin: 0; }

/* Compact home: the quick surface flows naturally; no custom breakpoints
 * — the Display Contract's responsive model owns it (POM §70). */
@media (max-width: 767px) {
  .home-chat-input-row { flex-direction: column; align-items: stretch; }
  .home-chat-send { width: 100%; }
  .home-chat-entry-head { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .home-chat-entry, .home-chat-dot { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * PAGE.CHAT — Design structure view (chat system design blueprint)
 * Rendered by chat-surface.js from web/assets/data/chat-system-design.json.
 * Same RGBM/FGRID/ZGRID tokens — no new color or font universe (POM §113).
 * ═══════════════════════════════════════════════════════════════════════ */

/* Design view takes the whole workspace: sessions/context/composer collapse. */
body[data-page="chat"].chat-design-open .chat-body {
  grid-template-columns: minmax(0, 1fr);
}
body[data-page="chat"].chat-design-open .chat-sessions,
body[data-page="chat"].chat-design-open .chat-context,
body[data-page="chat"].chat-design-open .chat-composer { display: none !important; }
body[data-page="chat"].chat-design-open .chat-workspace { grid-template-columns: minmax(0, 1fr); }
body[data-page="chat"].chat-design-open .chat-stream {
  height: 100%;
  max-height: none;
  overflow: auto;
  padding: var(--dgrid-space-04);
}

.chat-design {
  display: flex;
  flex-direction: column;
  gap: var(--dgrid-space-04);
  max-width: 1080px;
  margin: 0 auto;
}

.chat-design-head { padding: 4px 2px 0; }
.chat-design-kicker {
  color: var(--rgbm-system);
  letter-spacing: 0.1em;
  margin: 0 0 6px;
  font-size: 10px;
}
.chat-design-head h2 { margin: 0 0 8px; }
.chat-design-intro {
  margin: 0;
  color: var(--text-dim);
  max-width: 72ch;
  line-height: 1.6;
}

.chat-design-section {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--color-chat-surface);
  padding: var(--dgrid-space-04);
}
.chat-design-section > h3 {
  margin: 0 0 10px;
  color: var(--text);
  letter-spacing: 0.1em;
  font-size: 11px;
}

/* Layers — vertical stack of the runtime design model. */
.chat-design-layer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-design-layer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 6px;
  background: var(--color-chat-surface-2);
}
.chat-design-layer[data-boundary="public"] { border-left-color: var(--rgbm-action); }
.chat-design-layer[data-boundary="public-edge"] { border-left-color: var(--rgbm-system); }
.chat-design-layer[data-boundary="private"] { border-left-color: var(--rgbm-guard); }
.chat-design-layer-id {
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--text);
  min-width: 150px;
}
.chat-design-layer-role { flex: 1; min-width: 0; color: var(--text-dim); font-size: 12px; margin: 0; }
.chat-design-layer-boundary {
  font: 8px/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--text-faint);
  white-space: nowrap;
}

/* Regions — display region blueprint (B00…F00). */
.chat-design-region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.chat-design-region {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--color-chat-surface-2);
}
.chat-design-region code {
  color: var(--rgbm-system);
  font: 700 11px/1 var(--mono);
}
.chat-design-region-ui {
  color: var(--text);
  font: 8px/1.4 var(--mono);
  overflow-wrap: anywhere;
}
.chat-design-region-role { color: var(--text-faint); font-size: 10px; }

.chat-design-mode-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-design-mode { display: flex; gap: 10px; font-size: 12px; margin: 0; }
.chat-design-mode b { color: var(--rgbm-navigation); font: 700 9px/1 var(--mono); letter-spacing: 0.06em; min-width: 92px; }
.chat-design-mode span { color: var(--text-dim); }

/* Session / message model. */
.chat-design-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-design-row { display: flex; gap: 12px; align-items: baseline; }
.chat-design-row dt {
  color: var(--text-faint);
  min-width: 110px;
  letter-spacing: 0.08em;
  font-size: 10px;
}
.chat-design-row dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chat-design-row code,
.chat-design-state-list code {
  font: 9px/1.4 var(--mono);
  color: var(--text);
  background: var(--color-chat-surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
}

/* Runtime states. */
.chat-design-state-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Public boundary guarantees. */
.chat-design-guarantee-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-design-guarantee {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--color-chat-surface-2);
}
.chat-design-guarantee[data-code] { border-left-color: var(--rgbm-guard); border-left-width: 3px; }
.chat-design-guarantee-code {
  font: 9px/1 var(--mono);
  color: var(--color-chat-error);
  min-width: 150px;
}
.chat-design-guarantee span { color: var(--text-dim); font-size: 12px; margin: 0; }

.chat-design-source {
  color: var(--text-faint);
  font-size: 10px;
  line-height: 1.6;
  padding: 0 2px 4px;
}

@media (max-width: 767px) {
  .chat-design-layer { flex-direction: column; align-items: flex-start; gap: 6px; }
  .chat-design-layer-id, .chat-design-guarantee-code { min-width: 0; }
  .chat-design-row { flex-direction: column; gap: 2px; }
}