/* nondro's shared visual language: ink, limestone, bronze, and signal teal. */
:root {
  color-scheme: dark;
  --bg: #0c1318; --panel: #131e25; --panel2: #1c2a32;
  --text: #edece5; --muted: #9babb3; --accent: #7bd8c0;
  --line: #2a3942; --gold: #d6bc87; --danger: #f09b9b;
  --radius: 12px; --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}
body { font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font-family: inherit; font-size: 14px; }
button, .btn { min-height: 40px; border: 1px solid transparent; border-radius: 7px; transition: background .16s, border-color .16s, color .16s; }
button:hover, .btn:hover { filter: brightness(1.08); }
button:disabled { opacity: .48; cursor: not-allowed; }
input, textarea, select { color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; }
select { min-height: 40px; }
input::placeholder, textarea::placeholder { color: #82949f; opacity: 1; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
input:focus, textarea:focus { border-color: var(--accent); }
h1, h2, h3 { letter-spacing: -.025em; line-height: 1.2; }
h1 { font-size: clamp(26px, 3vw, 38px); font-weight: 550; }
h2 { font-size: 22px; font-weight: 550; }
h3 { font-size: 18px; font-weight: 550; }
a { text-underline-offset: 4px; }
.ui-icon { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }
.eyebrow { font-size: 10px; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin: 0 0 9px; }
.small { font-size: 13px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 12px 20px; background: var(--accent); color: var(--bg); }
.skip-link:focus { top: 10px; }
.ghost-btn { border-color: var(--line); color: var(--text); }
.error { color: var(--danger); }
.topbar { min-height: 72px; background: #10191f; border-bottom: 1px solid var(--line); padding: 0 28px; gap: 20px; }
.workspace-topbar { position: relative; z-index: 30; }
.workspace-brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.workspace-brand > .ui-icon { width: 32px; height: 32px; color: var(--gold); }
.workspace-brand > span { font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.workspace-brand small { display: block; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-top: 6px; }
.workspace-nav { display: flex; align-items: stretch; gap: 3px; align-self: stretch; }
.workspace-nav a { display: flex; align-items: center; gap: 8px; padding: 0 14px; text-decoration: none; color: var(--muted); font-size: 13px; border-bottom: 2px solid transparent; }
.workspace-nav a.active { color: var(--text); border-bottom-color: var(--accent); background: linear-gradient(transparent, #7bd8c008); }
.workspace-nav a:hover { color: var(--text); background: #ffffff04; }
.workspace-nav .ui-icon { width: 17px; height: 17px; }
.account-menu { position: relative; flex-shrink: 0; }
.account-menu > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 42px; font-size: 12px; }
.account-menu > summary::-webkit-details-marker { display: none; }
.avatar { width: 30px; height: 30px; display: grid; place-items: center; background: #273b3e; color: #b3e6d6; border: 1px solid #48615c; border-radius: 50%; font-weight: 600; }
.account-popover { position: absolute; right: 0; top: 48px; width: 250px; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 60px #0008; z-index: 40; }
.account-popover p:not(.eyebrow) { margin: 0 0 14px; color: var(--text); overflow-wrap: anywhere; font-size: 13px; }
.account-popover a { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 10px 4px; text-decoration: none; }
.account-popover a:hover { color: var(--accent); }
/* The canvas owns the viewport; the assistant is a small floating dock. */
body.canvas .workspace { display: block; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 62% 44%, #1a303037, transparent 62%), var(--bg); }
.workspace::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#68808626 .7px, transparent .7px); background-size: 24px 24px; pointer-events: none; z-index: -1; }
body.canvas #cy { position: absolute; inset: 127px 0 34px; height: auto; width: 100%; }
.map-heading { position: absolute; top: 22px; left: 28px; right: 28px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.map-heading .eyebrow { margin-bottom: 4px; font-size: 9px; }
.map-heading h1 { font-size: 27px; margin: 0; font-weight: 450; letter-spacing: -.035em; }
.map-heading > p { font-size: 12px; color: var(--muted); margin: 0 0 3px; }
.map-title-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin: 0 0 4px 9px; }
.map-toolbar { position: absolute; top: 88px; left: 28px; right: 28px; z-index: 8; display: flex; gap: 8px; align-items: center; }
.graph-search-wrap { margin: 0; display: flex; align-items: center; gap: 9px; flex: 1; min-width: 120px; max-width: 500px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: #111b22; color: var(--muted); }
.graph-search-wrap:focus-within { border-color: var(--accent); }
.graph-search-wrap input { padding: 0; background: transparent; border: 0; min-width: 0; font-size: 13px; height: 36px; }
.graph-search-wrap input:focus-visible { outline: none; }
kbd { font: 11px var(--font); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.map-toolbar .topology-controls { position: static; padding: 0; border: 0; background: transparent; max-width: none; }
.map-toolbar select, .map-tools select { background: #111b22; font-size: 12px; border-color: var(--line); }
.map-toolbar .canvas-add, .map-toolbar .new-object { position: static; font-size: 12px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 7px 12px; border-radius: 7px; }
.map-toolbar .canvas-add { background: #17232b; color: var(--text); border: 1px solid var(--line); }
.map-toolbar .new-object { color: #112820; background: var(--accent); }
.toolbar-divider { height: 20px; width: 1px; background: var(--line); margin: 0 3px; flex-shrink: 0; }
.workspace-briefing { position: absolute; top: 153px; left: 28px; width: 248px; z-index: 7; border: 1px solid #314249; border-radius: 11px; background: #111b22ed; box-shadow: 0 10px 50px #0002; backdrop-filter: blur(16px); }
.briefing-heading { display: flex; justify-content: space-between; width: 100%; align-items: center; padding: 15px 16px; min-height: 52px; background: transparent; color: var(--text); font-size: 13px; border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.briefing-heading > span { display: flex; align-items: center; gap: 9px; }
.briefing-heading > span .ui-icon { color: var(--gold); }
#briefing-body { padding: 16px; max-height: calc(100dvh - 390px); overflow-y: auto; scrollbar-width: thin; }
.workspace-briefing.is-collapsed #briefing-body { display: none; }
.workspace-briefing.is-collapsed .briefing-heading { border-bottom-color: transparent; }
.role-context .eyebrow { display: block; font-size: 9px; margin-bottom: 3px; }
.role-context strong { font-size: 15px; font-weight: 550; }
.role-context p { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 8px 0 23px; }
.attention-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.attention-heading h2 { font-size: 13px; margin: 0; font-weight: 500; letter-spacing: 0; }
.count-badge { min-width: 23px; text-align: center; color: var(--gold); background: #d6bc8715; border: 1px solid #d6bc8733; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-variant-numeric: tabular-nums; }
#attention-list { display: flex; flex-direction: column; gap: 6px; }
#attention-list button, #attention-list a { display: block; background: #1a272d; border: 1px solid #2d3d43; border-left: 2px solid var(--gold); border-radius: 5px; text-align: left; color: var(--text); padding: 10px; width: 100%; font-size: 12px; font-weight: 450; text-decoration: none; }
#attention-list button:hover, #attention-list a:hover { border-color: var(--gold); }
#attention-list small, #attention-list .attention-meta { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
#attention-empty { font-size: 12px; line-height: 1.6; margin: 8px 0; }
.briefing-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; text-decoration: none; padding: 12px 0 0; }
.briefing-link .ui-icon { width: 15px; }
.briefing-divider { border-top: 1px solid var(--line); margin: 18px 0; }
.prompt-shortcut { display: flex; align-items: center; gap: 9px; background: transparent; color: var(--muted); text-align: left; width: 100%; padding: 7px 0; font-weight: 400; font-size: 11px; }
.prompt-shortcut > .ui-icon { width: 16px; }
.prompt-shortcut > .ui-icon:last-child { margin-left: auto; width: 13px; }
.prompt-shortcut:hover { color: var(--accent); }
.object-directory { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.object-directory > summary { font-size: 12px; color: var(--muted); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 7px; }
.object-directory > summary::-webkit-details-marker { display: none; }
.object-directory .ui-icon { width: 16px; }
#graph-summary { margin-left: auto; font-size: 10px; }
#graph-results { list-style: none; padding: 0; margin: 8px 0 0; max-height: 210px; overflow-y: auto; }
#graph-results button { width: 100%; text-align: left; padding: 8px; font-size: 12px; font-weight: 400; color: var(--text); background: transparent; border-bottom: 1px solid var(--line); border-radius: 0; overflow-wrap: anywhere; }
#graph-results button:hover { color: var(--accent); background: var(--panel2); }
.map-empty { position: absolute; top: 45%; left: max(55%, 450px); transform: translate(-50%, -50%); max-width: 390px; width: calc(100% - 48px); text-align: center; z-index: 2; }
.empty-mark { display: inline-grid; place-items: center; color: var(--gold); width: 64px; height: 64px; border: 1px solid #d6bc873d; transform: rotate(45deg); border-radius: 16px; margin: 0 0 30px; background: #d6bc8705; box-shadow: 0 0 0 14px #d6bc8703, 0 0 0 28px #d6bc8702; }
.empty-mark .ui-icon { transform: rotate(-45deg); width: 30px; height: 30px; }
.map-empty h2 { font-size: 25px; font-weight: 400; margin: 0 0 12px; }
.map-empty > p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 0 0 22px; }
.map-empty .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 12px; }
.map-tools { position: absolute; z-index: 6; bottom: 31px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 8px; background: #121d24f2; white-space: nowrap; }
.map-tools button { background: transparent; color: var(--muted); min-height: 32px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; padding: 4px 7px; }
.map-tools button:hover, .map-tools button[aria-pressed=true] { color: var(--accent); background: #7bd8c014; }
.map-tools .ui-icon { width: 17px; height: 17px; }
.map-tools select { min-height: 32px; max-width: 130px; padding: 3px 5px; border: 0; background: transparent; font-size: 11px; color: var(--muted); }
.map-tools #view-toggle { position: static; border: 0; font-size: 18px; }
.map-selection { position: absolute; top: 145px; left: 50%; transform: translateX(-50%); z-index: 5; font-size: 12px; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.map-selection:has(#graph-selection:empty) { display: none; }
.map-selection button { min-height: 30px; padding: 3px 8px; font-size: 11px; background: var(--panel2); color: var(--text); }
.map-footer { position: absolute; bottom: 0; left: 0; right: 0; height: 25px; display: flex; align-items: center; padding: 0 16px; gap: 18px; font-size: 9px; color: #8b9ba5; border-top: 1px solid #29373b6b; background: #0e171c; z-index: 4; }
.map-presence { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.map-presence i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
#map-help-toggle { margin-left: auto; background: none; color: var(--muted); padding: 0; min-height: 22px; }
#map-help-toggle .ui-icon { width: 14px; height: 14px; }
#topology-coverage { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend-disclosure { position: absolute; z-index: 6; bottom: 37px; left: 28px; }
.legend-disclosure > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--muted); font-size: 11px; list-style: none; min-height: 30px; }
.legend-disclosure > summary::-webkit-details-marker { display: none; }
.legend-disclosure .ui-icon { width: 16px; }
.legend-disclosure .legend { bottom: 40px; left: 0; min-width: 200px; max-width: 240px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; border: 1px solid var(--line); background: var(--panel); border-radius: 9px; font-size: 11px; box-shadow: 0 8px 40px #0004; }
body.canvas .toolbox { right: 28px; top: 153px; font-size: 12px; background: var(--panel); border-color: var(--line); }
body.canvas .toolbox #toolbox-header { display: flex; align-items: center; gap: 6px; min-height: 36px; font-size: 12px; }
body.canvas .detail { right: 28px; top: 146px; width: 360px; max-height: calc(100% - 176px); background: #142028fa; border: 1px solid #3e5158; box-shadow: 0 16px 80px #0005; padding: 24px; border-radius: 11px; z-index: 14; backdrop-filter: blur(24px); }
.detail h3 { padding-right: 18px; font-size: 21px; line-height: 1.35; }
.detail #detail-meta { font-size: 11px; overflow-wrap: anywhere; color: var(--muted); }
.detail #detail-info { font-size: 13px; line-height: 1.7; }
.detail-actions { flex-wrap: wrap; gap: 7px; margin: 18px 0; }
.detail-actions button { font-size: 12px; padding: 8px 11px; }
.detail-actions .stop { background: #d0868612; color: #e1a1a1; border: 1px solid #d0868640; }
.detail h4 { font-size: 12px; font-weight: 550; margin: 22px 0 10px; color: var(--text); }
.detail ul { font-size: 12px; line-height: 1.7; }
.detail pre { border: 1px solid var(--line); font-size: 11px; padding: 12px; }
.technical-details { margin: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; }
.technical-details > summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.detail .close { min-width: 36px; min-height: 36px; top: 8px; right: 8px; padding: 7px; }
#annotate-form { flex-wrap: wrap; }
#annotate-form button { padding: 6px 10px; font-size: 12px; }
/* The dock expands upwards. No screen width creates a chat sidebar. */
body.canvas .chat { position: absolute; z-index: 12; left: 50%; bottom: 88px; transform: translateX(-50%); width: min(680px, calc(100% - 64px)); max-width: 100%; height: auto; max-height: min(65dvh, 600px); min-height: 0; border: 1px solid #425851; border-radius: 13px; background: #15232bf5; box-shadow: 0 12px 50px #0006, 0 0 0 4px #b3e8d703; backdrop-filter: blur(24px); overflow: visible; }
.chat-dock-heading { display: flex; align-items: center; gap: 8px; padding: 11px 14px 0; min-height: 33px; flex-shrink: 0; }
.ontology-spark { color: var(--accent); display: flex; }
.ontology-spark .ui-icon { width: 17px; height: 17px; }
.chat-dock-heading strong { font-size: 11px; font-weight: 550; }
.chat-aux-label { font-size: 10px; color: var(--muted); padding-left: 10px; border-left: 1px solid var(--line); }
#chat-toggle { margin-left: auto; padding: 0; min-height: 24px; display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--muted); background: transparent; font-weight: 400; }
#chat-toggle .ui-icon { width: 13px; height: 13px; }
body.canvas .chat:not(.is-expanded) { height: auto !important; }
.chat:not(.is-expanded) .chat-messages, .chat:not(.is-expanded) .chat-header, .chat:not(.is-expanded) .chat-grip { display: none; }
body.canvas .chat-grip { position: absolute; top: -5px; left: 0; right: 0; bottom: auto; width: 100%; height: 12px; cursor: ns-resize; margin: 0; }
body.canvas .chat-grip::before { width: 35px; height: 3px; background: #5b706c; }
.chat.is-expanded { height: 420px; }
.chat.is-expanded #chat-toggle .ui-icon { transform: rotate(180deg); }
.chat-header { padding: 10px 14px 0; align-items: center; flex-shrink: 0; }
.chat-header #conv-current, .chat-header #conv-new, .llm-menu #llm-current { font-size: 11px; min-height: 30px; border: 1px solid var(--line); background: #101b22; color: var(--muted); }
.chat-header #conv-new, .llm-menu #llm-current { display: flex; align-items: center; gap: 5px; }
.chat-header #conv-new .ui-icon, .llm-menu .ui-icon { width: 14px; height: 14px; }
.chat-header #conv-current { min-width: 0; }
body.canvas .chat-header .conv-list, .llm-menu .conv-list { bottom: 100%; top: auto; margin: 0 0 8px; border-color: var(--line); }
.chat-messages { padding: 14px; min-height: 60px; font-size: 13px; overscroll-behavior: contain; }
.chat-messages .placeholder { font-size: 13px; margin: 6px 0; }
.msg { font-size: 13px; line-height: 1.7; padding: 9px 13px; border-radius: 9px; }
.msg.user { background: #284238; }
.msg.assistant { background: #1d2c34; }
.chat-form { align-items: flex-end; padding: 10px 12px 12px; gap: 5px; flex-shrink: 0; }
.chat-form textarea { border: 0; background: transparent; padding: 6px 4px; font-size: 14px; line-height: 1.7; min-height: 36px; max-height: 130px; }
.chat-form textarea:focus-visible { outline-offset: 0; }
.chat-form button { flex-shrink: 0; width: 36px; height: 36px; min-height: 36px; padding: 8px; border-radius: 7px; }
.chat-form .voice-toggle { background: transparent; color: var(--muted); }
.chat-form .voice-toggle:hover { color: var(--accent); background: #7bd8c015; }
.chat-form .voice-toggle[aria-pressed=true] { color: #ffb8a6; background: #b85b352a; box-shadow: 0 0 0 1px #e1896866; }
.chat-form .chat-send { background: var(--accent); color: #143c30; }
.voice-status { margin: -3px 16px 10px; color: var(--muted); font-size: 11px; flex-shrink: 0; }
.voice-status:empty { display: none; }
body.canvas .pending-wrap { position: absolute; right: 28px; bottom: 36px; z-index: 8; }
#pending-btn { display: flex; align-items: center; gap: 7px; color: var(--gold); background: #d6bc8711; border: 1px solid #d6bc8738; padding: 5px 10px; min-height: 33px; font-size: 11px; }
#pending-btn .ui-icon { width: 15px; height: 15px; }
#pending-list { top: auto; bottom: 43px; right: 0; left: auto; width: 330px; max-width: calc(100vw - 32px); border-color: var(--line); }
.modal { z-index: 50; backdrop-filter: blur(8px); }
.modal-box { border-color: #405159; background: var(--panel); padding: 26px; border-radius: 14px; box-shadow: 0 20px 80px #0009; }
.modal-box h3 { font-size: 22px; margin-bottom: 12px; }
.modal-box .hint { font-size: 14px; line-height: 1.8; }
.modal-box label { font-size: 13px; }
.modal-box .notice-body { font-size: 14px; line-height: 1.75; }
@media (min-width: 1550px) { body.canvas .chat { width: 760px; } .workspace-briefing { width: 270px; } }
@media (max-width: 1180px) {
  .workspace-brand small { display: none; } .workspace-brand > span { font-size: 20px; }
  .workspace-nav a { padding: 0 10px; } .map-heading > p { display: none; }
  .account-name { display: none; } .workspace-briefing { width: 224px; }
  body.canvas .chat { width: min(590px, calc(100% - 48px)); } .chat-aux-label { display: none; }
}
@media (max-width: 900px) {
  .topbar { padding: 0 18px; gap: 10px; min-height: 62px; }
  .workspace-nav a { padding: 0 9px; font-size: 12px; gap: 6px; }
  .workspace-brand > span { display: none; } .workspace-brand > .ui-icon { width: 26px; }
  .map-heading { left: 20px; right: 20px; top: 18px; } .map-heading h1 { font-size: 24px; }
  .map-toolbar { left: 20px; right: 20px; top: 81px; gap: 6px; }
  .map-toolbar .canvas-add span, .map-toolbar .new-object span { display: none; }
  .map-toolbar .canvas-add, .map-toolbar .new-object { padding: 8px; }
  .workspace-briefing { top: 142px; left: 20px; width: 220px; }
  #briefing-body { max-height: calc(100dvh - 410px); }
  body.canvas .detail { right: 20px; top: 140px; width: 330px; max-height: calc(100% - 165px); }
  .map-empty { left: 64%; max-width: 290px; } .map-empty h2 { font-size: 22px; }
  .legend-disclosure { left: 20px; bottom: 39px; } .legend-disclosure > summary { font-size: 0; }
  .legend-disclosure > summary .ui-icon { width: 20px; }
  body.canvas .pending-wrap { right: 20px; bottom: 37px; } #pending-btn > span:last-child { display: none; }
  body.canvas .chat { width: min(620px, calc(100% - 40px)); }
}
@media (max-width: 600px) {
  body.canvas .topbar { flex-wrap: nowrap; min-height: 57px; padding: 0 12px; gap: 7px; }
  .workspace-nav { flex: 1; justify-content: center; gap: 0; }
  .workspace-nav a { flex-direction: column; justify-content: center; gap: 2px; padding: 7px 7px; font-size: 8px; }
  .workspace-nav .ui-icon { width: 17px; height: 17px; }
  .workspace-brand > .ui-icon { width: 23px; } .account-menu summary > .ui-icon { display: none; }
  .avatar { width: 27px; height: 27px; font-size: 11px; }
  .map-heading { left: 16px; top: 16px; } .map-heading h1 { font-size: 20px; }
  .map-heading .eyebrow { font-size: 8px; }
  .map-toolbar { top: 76px; left: 12px; right: 12px; display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 7px; }
  .graph-search-wrap { grid-column: 1 / -1; height: 38px; max-width: none; }
  .graph-search-wrap input { font-size: 12px; }
  .graph-search-wrap kbd { display: none; }
  .map-toolbar .topology-controls { grid-column: 1; grid-row: 2; }
  .map-toolbar .topology-controls select { width: 100%; }
  .map-toolbar #graph-status { grid-column: 1; grid-row: 3; display: none; }
  .map-toolbar .toolbar-divider { display: none; }
  .map-toolbar select, .map-toolbar .topology-controls select { font-size: 11px; min-height: 36px; padding: 6px 8px; }
  .map-toolbar .canvas-add { grid-column: 2; grid-row: 2; min-height: 36px; }
  .map-toolbar .new-object { grid-column: 3; grid-row: 2; min-height: 36px; }
  .map-toolbar .canvas-add span { display: inline; font-size: 11px; }
  body.canvas #cy { top: 163px; bottom: 26px; }
  .workspace-briefing { top: 173px; left: 12px; width: 190px; }
  .briefing-heading { padding: 9px 11px; min-height: 38px; font-size: 11px; }
  .briefing-heading .ui-icon { width: 16px; height: 16px; }
  #briefing-body { padding: 12px; max-height: calc(100dvh - 410px); }
  .role-context p { margin-bottom: 14px; }
  .map-empty { top: 48%; left: 50%; max-width: 310px; }
  .empty-mark { width: 46px; height: 46px; margin-bottom: 20px; }
  .empty-mark .ui-icon { width: 24px; }
  .map-empty .eyebrow { font-size: 8px; }
  .map-empty h2 { font-size: 21px; } .map-empty > p:not(.eyebrow) { font-size: 12px; }
  body.canvas .toolbox { top: 174px; right: 12px; }
  body.canvas .detail { top: 167px; right: 10px; width: calc(100% - 20px); max-height: calc(100% - 181px); padding: 22px; z-index: 18; }
  body.canvas .chat { bottom: 85px; width: calc(100% - 24px); border-radius: 11px; max-height: calc(100% - 195px); }
  .chat-dock-heading { padding: 8px 12px 0; } .chat-dock-heading strong { font-size: 10px; }
  #chat-toggle { font-size: 9px; } .chat-form { padding: 6px 10px 9px; }
  .chat-form textarea { font-size: 16px; line-height: 1.5; }
  .chat-form textarea::placeholder { font-size: 12px; }
  .chat-header { padding: 8px 10px 0; gap: 5px; flex-wrap: wrap; }
  .chat-header #conv-current { flex-basis: 45%; } .llm-menu #llm-current { max-width: 120px; }
  #llm-current-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .voice-status { font-size: 10px; margin: -1px 12px 8px; }
  .map-tools { bottom: 32px; max-width: calc(100% - 82px); padding: 4px; }
  .map-tools button { padding: 5px; min-width: 29px; min-height: 36px; }
  .map-tools button > span { display: none; }
  .map-tools select { font-size: 10px; width: 84px; min-height: 36px; }
  .map-tools .toolbar-divider { margin: 0; }
  .map-tools #view-toggle { display: none; }
  .legend-disclosure { left: 12px; bottom: 40px; }
  body.canvas .pending-wrap { right: 12px; bottom: 39px; }
  #pending-btn { min-height: 30px; padding: 3px 5px; gap: 3px; } #pending-btn .ui-icon { display: none; }
  .map-footer { font-size: 8px; gap: 9px; padding: 0 12px; }
  .map-selection { top: 218px; left: auto; right: 12px; transform: none; font-size: 10px; }
}
@media (max-height: 700px) {
  .map-heading { top: 12px; } .map-heading h1 { font-size: 23px; }
  .map-toolbar { top: 70px; } .workspace-briefing { top: 128px; }
  body.canvas #cy { top: 117px; } body.canvas .chat { bottom: 80px; }
  #briefing-body { max-height: calc(100dvh - 325px); }
  .map-empty { top: 44%; } .empty-mark { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
#attention-list { list-style: none; padding: 0; margin: 0; }
#attention-list .attention-item { display: flex; gap: 9px; align-items: flex-start; }
.attention-marker { display: grid; place-items: center; width: 18px; height: 18px; flex-shrink: 0; font-size: 11px; color: var(--gold); border: 1px solid #d6bc8744; border-radius: 4px; }
.attention-item strong { font-weight: 500; line-height: 1.5; }
#graph-results small { display: block; font-size: 10px; color: var(--muted); }
#graph-summary { max-width: 77px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#map-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas .pending-wrap #pending-btn { background: #d6bc8711; color: var(--gold); border: 1px solid #d6bc8744; border-radius: 7px; }
.legend-disclosure .sw.live { border-color: #b0bdc2; }
#map-status:empty { display: none; }
@media (max-width: 600px) { #map-status { max-width: 130px; } }
/* Menus stay inside the expanded dock's vertical space, including short screens. */
body.canvas .chat-header .conv-list { top: 100%; bottom: auto; margin: 5px 0 0; max-height: min(30dvh, 240px); }
.legend-disclosure .legend { bottom: calc(var(--chat-h, 120px) + 62px); }
@media (max-width: 600px) {
  .map-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px 36px; }
  .map-toolbar #graph-status { display: block; grid-column: 2; grid-row: 2; min-width: 0; }
  .map-toolbar .canvas-add { grid-column: 3; justify-content: center; }
  .map-toolbar .canvas-add span { display: none; }
  .map-toolbar .new-object { grid-column: 4; }
  .map-toolbar:not(:has(.topology-controls)) #graph-status { grid-column: 1 / 3; }
}
@media (min-width: 601px) and (max-height: 800px) {
  .map-heading { top: 13px; } .map-heading h1 { font-size: 23px; }
  .map-toolbar { top: 67px; } body.canvas #cy { top: 111px; }
  .workspace-briefing { top: 126px; } body.canvas .detail { top: 121px; }
}
/* The overview scrolls above the dock on overlapping tablet/phone layouts. */
@media (max-width: 900px) {
  #briefing-body { max-height: max(80px, calc(100dvh - var(--chat-h, 130px) - 382px)); }
}