:root {
  color-scheme: dark;
  --ink: #f4f6ff;
  --muted: #aab5d5;
  --surface: #141e3dde;
  --surface-strong: #202d55f5;
  --line: #8f9bcf;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-width: 320px; height: 100%; min-height: 100%; overflow: hidden; background: #0b1127; }
body { color: var(--ink); font-family: Inter, ui-rounded, system-ui, sans-serif; }
button, select, textarea { font: inherit; }
button, select { -webkit-tap-highlight-color: transparent; }

.app-shell { position: relative; width: 100%; height: 100dvh; min-height: 100dvh; overflow: hidden; background: #111b3a; }
.topbar { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; min-height: 64px; padding: max(12px, env(safe-area-inset-top)) 16px 12px; pointer-events: none; background: linear-gradient(180deg, #0a1028cc 0%, #0a102800 100%); }
.brand, .topbar-actions { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 760; letter-spacing: -.03em; text-shadow: 0 1px 7px #080c20; }
.brand-mark { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 auto; border-radius: 10px; background: linear-gradient(135deg, #9c88ff, #6685ff); box-shadow: 0 5px 16px #1c2b64; }
.assistant-label { max-width: 145px; overflow: hidden; color: #c7d1fb; font-size: .69rem; font-weight: 600; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.save-status { color: var(--muted); font-size: .73rem; }
.maps-button { min-height: 34px; padding: 0 9px; color: var(--ink); background: #1e2a4ed9; border: 1px solid #4a5c92; border-radius: 10px; font-size: .78rem; }
.icon-select { min-height: 34px; padding: 0 8px; color: var(--ink); background: #1e2a4ed9; border: 1px solid #4a5c92; border-radius: 10px; font-size: .78rem; }

.canvas-panel { position: absolute; inset: 0; margin: 0; overflow: hidden; background: radial-gradient(circle at 50% 45%, #233568 0, #101a38 43%, #090f24 100%); touch-action: none; }
.canvas-panel::before { position: absolute; inset: 0; content: ''; pointer-events: none; opacity: .24; background-image: radial-gradient(#8d9ed445 1px, transparent 1px); background-size: 24px 24px; }
#mindmap { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.map-hint { position: absolute; z-index: 2; top: max(72px, calc(env(safe-area-inset-top) + 62px)); left: 12px; max-width: calc(100% - 24px); overflow: hidden; padding: 7px 10px; color: var(--muted); background: #0a1028a8; border: 1px solid #33456f75; border-radius: 10px; font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; backdrop-filter: blur(9px); }
.project-summary { position: absolute; z-index: 2; top: max(72px, calc(env(safe-area-inset-top) + 62px)); right: 12px; display: flex; gap: 4px; font-size: .67rem; pointer-events: none; }
.project-summary span { padding: 5px 7px; color: #dce4ff; background: #0a1028a8; border: 1px solid #3e4f8575; border-radius: 7px; backdrop-filter: blur(9px); }
.zoom-controls { position: absolute; z-index: 3; right: 14px; bottom: 151px; display: flex; gap: 4px; padding: 4px; background: #101936c9; border: 1px solid #3b4b7d; border-radius: 12px; backdrop-filter: blur(10px); }
.zoom-controls button { width: 34px; height: 32px; border: 0; border-radius: 8px; color: var(--ink); background: transparent; font-size: 1.2rem; }
.zoom-controls button:active { background: #364978; }

.conversation { position: absolute; z-index: 6; right: 0; bottom: 0; left: 0; padding: 54px 12px max(11px, env(safe-area-inset-bottom)); background: linear-gradient(0deg, #080d20f8 0%, #080d20df 46%, #080d2000 100%); }
.activity { display: inline-block; max-width: min(86%, 460px); min-height: 0; margin: 0 0 9px; padding: 8px 11px; color: #d8e0ff; background: #1d2b51ed; border: 1px solid #405586; border-radius: 14px 14px 14px 4px; box-shadow: 0 8px 28px #060a1b33; font-size: .76rem; line-height: 1.35; }
.activity code, .slash-help code { color: #c8d1ff; font-family: inherit; }
.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: end; gap: 8px; }
textarea { width: 100%; min-height: 50px; max-height: 112px; padding: 14px 15px; resize: none; color: var(--ink); background: var(--surface-strong); border: 1px solid #465b91; border-radius: 24px; outline: none; line-height: 1.3; box-shadow: 0 10px 30px #05091b66; }
textarea:focus { border-color: #94a8ff; box-shadow: 0 0 0 3px #8296ff26, 0 10px 30px #05091b66; }
textarea::placeholder { color: #9aa7d2; }
#send-button { display: grid; width: 48px; height: 48px; place-items: center; border: 0; border-radius: 50%; color: white; background: linear-gradient(135deg, #8d82ff, #547df4); box-shadow: 0 8px 19px #334dc977; font-size: 1.25rem; }
#send-button:disabled { opacity: .55; }
.slash-help { margin: 7px 5px 0; overflow: hidden; color: #aab5d5; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.slash-help code { margin-right: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.maps-dialog[hidden] { display: none; }
.maps-dialog { position: absolute; z-index: 20; inset: 0; }
.maps-backdrop { position: absolute; inset: 0; background: #030714a8; backdrop-filter: blur(5px); }
.maps-sheet { position: absolute; right: 0; bottom: 0; left: 0; max-height: min(78dvh, 620px); padding: 17px 16px max(20px, env(safe-area-inset-bottom)); overflow: auto; color: var(--ink); background: #111a35; border: 1px solid #3b4c80; border-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -15px 55px #030613aa; }
.maps-sheet-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 15px; }
.maps-sheet h2 { margin: 1px 0 0; font-size: 1.18rem; letter-spacing: -.03em; }
.eyebrow { margin: 0; color: #9eaff0; font-size: .65rem; font-weight: 800; letter-spacing: .12em; }
.sheet-close { width: 34px; height: 34px; border: 1px solid #45598e; border-radius: 50%; color: var(--ink); background: #22305a; font-size: 1.4rem; line-height: 1; }
.new-map-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 14px; }
.new-map-form input, .map-rename-input { width: 100%; min-width: 0; color: var(--ink); background: #1c294c; border: 1px solid #465b91; border-radius: 11px; outline: none; }
.new-map-form input { min-height: 42px; padding: 0 12px; }
.new-map-form button { min-height: 42px; padding: 0 13px; border: 0; border-radius: 11px; color: #fff; background: #6881f4; font-weight: 700; }
.map-list { display: grid; gap: 7px; }
.map-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 6px; background: #182546; border: 1px solid #334977; border-radius: 14px; }
.map-row.active { border-color: #7c91ff; background: #202e59; }
.map-open { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 4px; color: inherit; text-align: left; background: transparent; border: 0; }
.map-open.editing { padding: 4px; }
.map-icon { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; color: #cbd4ff; background: #30437c; border-radius: 9px; }
.map-row-title { display: grid; min-width: 0; gap: 2px; }
.map-row-title strong { overflow: hidden; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.map-row-title small { color: #aebae0; font-size: .67rem; }
.map-rename-input { min-height: 31px; padding: 0 8px; font-size: .86rem; }
.map-row-actions { display: flex; gap: 4px; }
.map-action { min-height: 30px; padding: 0 7px; color: #d9e1ff; background: #293a68; border: 1px solid #46609b; border-radius: 8px; font-size: .67rem; }
.map-action.primary { color: white; background: #617cf0; }
.map-action.danger { color: #ffb0ac; }
.maps-note { margin: 12px 2px 0; color: #9faed6; font-size: .71rem; }

.edge { fill: none; stroke: var(--line); stroke-width: 3; stroke-linecap: round; opacity: .75; }
.node { cursor: pointer; }
.node rect { stroke: #ffffff24; stroke-width: 1.4; }
.node.selected rect { stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 8px #b9c6ff); }
.node text { fill: #fff; font-size: 16px; font-weight: 650; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.node.root text { font-size: 18px; }
.node-status { stroke: #101936; stroke-width: 3; }

@media (max-width: 370px) {
  .assistant-label { display: none; }
  .save-status { display: none; }
  .project-summary { display: none; }
  .map-row { grid-template-columns: minmax(0, 1fr); }
  .map-row-actions { padding-left: 4px; }
  .topbar { padding-right: 12px; padding-left: 12px; }
  .conversation { padding-right: 10px; padding-left: 10px; }
  .zoom-controls { bottom: 145px; }
}

@media (min-width: 760px) {
  .topbar, .conversation { max-width: 760px; margin: auto; }
  .conversation { right: 0; left: 0; }
}