/* The live workspace has two real scroll regions below ordinary flow controls. */
body[data-view=messages] { height:100vh; height:100dvh; min-height:0; overflow:hidden; }
#messages-workspace { display:flex; flex:1; min-height:0; min-width:0; overflow:hidden; }
#live-messages-root { display:flex; flex:1; flex-direction:column; min-width:0; min-height:0; font-size:13px; }
.live-toolbar { flex-shrink:0; padding:12px 20px 10px; border-bottom:1px solid var(--line); background:var(--page); }
.live-heading { display:flex; align-items:center; justify-content:space-between; gap:12px 24px; }
.live-identity { min-width:0; }
.live-title { margin:0; font:500 16px/1.4 var(--font); }
.live-endpoint { margin-top:3px; color:var(--muted); overflow-wrap:anywhere; font:400 13px/1.5 var(--mono); }
.live-actions { display:flex; align-items:center; flex-wrap:wrap; flex-shrink:0; gap:8px; }
.live-actions .button { min-height:36px; padding:7px 12px; font-size:13px; }
.live-status { margin-top:6px; color:var(--muted); font-size:13px; line-height:1.5; }
#live-messages-root[data-stale=true] .live-status { color:var(--warning); }
.live-mobile-navigation { display:none; }
.live-columns { display:grid; grid-template-columns:360px minmax(0,1fr); flex:1; min-height:0; min-width:0; overflow:hidden; }
.live-browser { display:flex; flex-direction:column; min-height:0; min-width:0; border-right:1px solid var(--line); background:var(--page); }
.live-filters { display:grid; flex-shrink:0; gap:8px; padding:14px 16px 8px; }
.live-filters label { display:grid; grid-template-columns:88px minmax(0,1fr); align-items:center; min-width:0; gap:8px; color:var(--muted); font-size:13px; }
.live-filters input,.live-filters select {
  width:100%; min-width:0; min-height:36px; padding:7px 8px;
  border:1px solid var(--line); border-radius:0; background:var(--surface); color:var(--ink); font-size:13px;
}
.live-filters input::placeholder { color:var(--muted); }
.live-list-summary { flex-shrink:0; padding:4px 16px 10px; color:var(--muted); font-size:13px; line-height:1.4; }
.live-type-list { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.live-type {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 10px;
  width:100%; min-height:65px; padding:11px 13px; border:1px solid transparent; border-left:3px solid transparent; border-bottom-color:var(--soft);
}
.live-type[aria-pressed=true] { border-left-color:var(--accent); background:var(--soft); }
.live-type-name { min-width:0; overflow-wrap:anywhere; font:500 13px/1.5 var(--mono); }
.live-type-rate { white-space:nowrap; font:400 13px/1.5 var(--mono); }
.live-type-source,.live-type-age { color:var(--muted); font-size:13px; line-height:1.4; }
.live-type-age { text-align:right; white-space:nowrap; }
.live-empty { padding:12px 16px; }
.live-type-list:empty { flex:0; }
.live-detail-pane { min-height:0; min-width:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:18px 24px 28px; background:var(--surface); }
.live-detail-pane:focus-visible { outline:2px solid var(--ink); outline-offset:-3px; }
.live-detail-empty { margin-bottom:20px; }
.live-selected { max-width:1040px; }
.live-selected-title { margin:0 0 5px; overflow-wrap:anywhere; font:500 18px/1.4 var(--mono); }
.live-selected-title:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.live-selected-meta { white-space:pre-line; }
.live-note { color:var(--muted); font-size:13px; line-height:1.65; }
.live-payload,.live-wire,.live-diagnostics,.live-explanation { margin-top:16px; }
.live-payload summary,.live-wire summary,.live-diagnostics summary,.live-explanation summary { cursor:pointer; min-height:36px; padding:8px 0; font-size:14px; }
.live-payload summary:focus-visible,.live-wire summary:focus-visible,.live-diagnostics summary:focus-visible,.live-explanation summary:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.live-fields { margin-top:4px; }
.live-fields > div { display:grid; grid-template-columns:minmax(180px,1fr) minmax(0,2fr); gap:18px; padding:8px 0; border-bottom:1px solid var(--soft); }
.live-fields dt,.live-fields dd { min-width:0; overflow-wrap:anywhere; font:400 13px/1.6 var(--mono); }
.live-fields dt { color:var(--muted); }
.live-fields dd { text-align:left; }
.live-hex { margin:5px 0 0; padding:12px; border:1px solid var(--line); background:var(--image); color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere; font:400 13px/1.8 var(--mono); }
.live-diagnostics,.live-explanation { max-width:1040px; border-top:1px solid var(--line); padding-top:6px; }
.live-diagnostics .detail-list { max-width:700px; margin-top:0; font-size:13px; }
.live-diagnostics .detail-list dd { font-size:13px; }
.live-diagnostics .detail-list > div { padding:8px 0; font-size:13px; }
.live-diagnostics .live-note { margin-top:8px; }
.live-limits { margin-top:10px; }
@media (hover:hover) { .live-type:hover { background:var(--surface); border-bottom-color:var(--line); } }
@media (min-width:761px) and (max-width:1100px) {
  .live-columns { grid-template-columns:340px minmax(0,1fr); }
  .live-detail-pane { padding:16px 18px 24px; }
  .live-fields > div { grid-template-columns:minmax(120px,1fr) minmax(0,1fr); gap:12px; }
}
@media (min-width:761px) and (max-height:560px) {
  .live-toolbar { padding-top:8px; padding-bottom:8px; }
  .live-filters { grid-template-columns:repeat(2,minmax(0,1fr)); padding-top:10px; }
  .live-filters label { grid-template-columns:minmax(0,1fr); align-content:start; gap:4px; }
}
@media (max-width:760px) {
  .live-toolbar { padding:10px 14px; }
  .live-heading { flex-wrap:wrap; align-items:flex-start; gap:8px 12px; }
  .live-title { font-size:15px; }
  .live-actions { gap:6px; }
  .live-actions .button { min-height:40px; padding:7px 10px; }
  .live-mobile-navigation { display:flex; gap:8px; margin-top:10px; }
  .live-mobile-navigation .button { flex:1; justify-content:center; min-height:40px; font-size:13px; }
  .live-columns { display:flex; }
  .live-browser,.live-detail-pane { flex:1; width:100%; border-right:0; }
  #live-messages-root[data-mobile-view=types] .live-detail-pane { display:none; }
  #live-messages-root[data-mobile-view=fields] .live-browser { display:none; }
  .live-filters { padding:12px 14px 6px; }
  .live-filters input,.live-filters select { min-height:40px; }
  .live-list-summary { padding-left:14px; padding-right:14px; }
  .live-type { min-height:65px; padding-left:12px; padding-right:12px; }
  .live-detail-pane { padding:16px 16px 24px; }
  .live-selected-title { font-size:16px; }
  .live-fields > div { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
}
@media (pointer:coarse) {
  .live-actions .button,.live-mobile-navigation .button,.live-filters input,.live-filters select,.live-payload summary,.live-wire summary,.live-diagnostics summary,.live-explanation summary { min-height:44px; }
}