:root {
  --console: #0a1018;
  --signal: var(--cyan);
  --instrument-font: "IBM Plex Mono", ui-monospace, monospace;
}
.radio-buttons { display:flex; gap:6px; pointer-events:auto }
.radio-buttons button, dialog button, #mark-bar button {
  color:var(--ink); background:var(--console); border:1px solid var(--line);
  padding:9px 13px; border-radius:4px; font:600 11px var(--instrument-font); cursor:pointer;
}
.radio-buttons button:hover,dialog button:hover,#mark-bar button:hover { border-color:var(--signal) }
#mark,#ask,#report-form button {
  background:var(--signal); border-color:var(--signal); color:#04141a;
}
dialog button:disabled { opacity:.45; cursor:default }
dialog {
  box-sizing:border-box; position:fixed; inset:0; margin:auto; width:min(480px,94vw);
  max-height:88dvh; overflow:auto; padding:24px; border:1px solid var(--line);
  border-top:2px solid var(--signal); border-radius:8px; background:var(--console);
  color:var(--ink); font:15px/1.5 Inter,system-ui,sans-serif; box-shadow:0 18px 70px #0009;
}
dialog::backdrop { background:#02060dbb; backdrop-filter:blur(3px) }
dialog form[method=dialog] { float:right; margin-left:12px }
dialog h2 { margin:0 0 12px; font-size:26px; letter-spacing:-.04em }
dialog h3,dialog label { display:block; font-size:14px; font-weight:650; margin:12px 0 4px }
dialog p { margin:9px 0 14px }
dialog textarea,dialog select { width:100%; padding:9px; color:var(--ink); background:#040910; border:1px solid var(--line); border-radius:4px; font:inherit }
dialog textarea { min-height:64px; resize:vertical }
dialog small,#evidence figcaption { display:block; margin:6px 0; color:#acb9c6; font:11px/1.5 var(--instrument-font) }
#station-context,#mission-step { border-left:2px solid var(--signal); padding:6px 10px; background:#52e8ff08 }
#answer,#mission-radio { white-space:pre-wrap }
#hint { margin-top:10px }
#evidence { display:flex; gap:10px }
#evidence figure { margin:0; flex:1; min-width:0 }
#evidence img { width:100%; display:block; border:1px solid var(--line) }
#mark-bar { position:fixed; top:12%; left:50%; transform:translateX(-50%); z-index:10; width:max-content; max-width:94vw; background:var(--console); color:var(--ink); border:1px solid var(--signal); padding:8px; font:12px var(--instrument-font) }
body.marking #viewport canvas { cursor:crosshair!important }
@media(max-width:640px) {
  .brand-copy small { display:none }
  .radio-buttons button { font-size:10px; padding:8px }
  dialog { padding:16px }
}
#drone-game { position:fixed; inset:0; z-index:20; color:#effaff; background:linear-gradient(180deg,#030910bc,transparent 24%,transparent 72%,#030910e8); font:14px/1.4 system-ui }
body.flying #app > :not(#viewport) { visibility:hidden }
#flight-scope { position:absolute; inset:0; width:100%; height:100%; touch-action:none;cursor:crosshair }
.flight-top,.flight-readout,.flight-bottom { position:absolute; left:clamp(12px,3vw,40px);right:clamp(12px,3vw,40px);pointer-events:none }
.flight-top,.flight-readout { display:flex; justify-content:space-between; align-items:center }
.flight-top { top:12px }.flight-top h2 { margin:0;font-size:24px }.flight-top small,.flight-bottom small,.flight-readout { font:12px/1.4 var(--instrument-font) }
.flight-readout { top:80px;color:#b7f7ff }.flight-bottom { bottom:16px;text-align:center }.flight-bottom p { margin:4px;font-weight:600;text-shadow:0 1px 5px black }
#drone-game button { pointer-events:auto;color:var(--ink);background:var(--console);border:1px solid var(--line);border-radius:4px;padding:8px 12px }
#retry-flight { margin:6px auto }#retry-flight:not([hidden]) { display:block }
#flight-beacon {position:absolute;transform:translate(-50%,-50%);pointer-events:none;color:#6ffff1;font:30px monospace;text-shadow:0 0 4px #031321}
.flight-commands {display:flex;justify-content:center;gap:8px;margin-top:8px}
#drone-game button:disabled {opacity:.48}
#flight-scope {cursor:grab}#flight-scope:active {cursor:grabbing}
#touch-thrust {display:none}
@media(pointer:coarse) {
  #touch-thrust {display:flex;gap:4px;justify-content:center;margin-top:6px}
  #touch-thrust button {touch-action:none;user-select:none}
  .flight-bottom small {display:none}
}
/* The composer stays attached to the bottom edge as the draft grows. */
#comms-dock {
  --dock-edge:max(14px,env(safe-area-inset-bottom));
  position:absolute; z-index:6; left:50%; bottom:calc(var(--dock-edge) + var(--chat-keyboard,0px));
  transform:translateX(-50%); width:min(600px,calc(100% - 32px)); display:grid; gap:8px;
  pointer-events:none;
}
#copilot {position:relative;pointer-events:auto;color:#edf2f5;font:14px/1.45 system-ui,sans-serif}
#copilot button {cursor:pointer}
#copilot button:focus-visible {outline:2px solid var(--cyan);outline-offset:2px}
#question-form,#chat-thread {
  background:#10171df5;border:1px solid #41505b;border-radius:17px;
  box-shadow:0 7px 30px #0005;
}
#question-form {display:flex;flex-direction:column;padding:9px 10px 6px;gap:3px}
#question-form:focus-within {border-color:#88a6b5}
#question {
  display:block;width:100%;box-sizing:border-box;margin:0;padding:3px 4px;min-height:29px;
  max-height:min(100px,18dvh);border:0;background:transparent;color:#f1f5f8;outline:0;
  resize:none;font:400 15px/22px system-ui,sans-serif;
}
#question::placeholder {color:#aab5bd}
.composer-tools {display:flex;justify-content:space-between;align-items:center}
#composer-link {margin:0 auto 0 6px;color:#99aab4;font:11px system-ui,sans-serif}
#open-copilot,#close-chat,#ask {display:inline-flex;align-items:center;justify-content:center;border:0}
#open-copilot {gap:6px;padding:3px 7px 3px 3px;border-radius:7px;background:transparent;color:#cdd9df;font:600 12px system-ui,sans-serif}
#open-copilot:hover,#close-chat:hover {background:#ffffff10;color:white}
#open-copilot img {display:block;border-radius:5px}
#copilot svg {fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chat-caret {width:13px;height:13px;color:#99aab3}
#open-copilot[aria-expanded=true] .chat-caret {transform:rotate(180deg)}
#ask {border-radius:50%;width:30px;height:30px;padding:0;background:#9af0f7;color:#07151a}
#ask:disabled {cursor:default;background:#323d45;color:#8e9aa2}
#ask svg {width:18px;height:18px}
#chat-thread:not([hidden]) {
  position:absolute;bottom:calc(100% + 7px);width:100%;display:flex;flex-direction:column;
  max-height:min(340px,42dvh,calc(var(--chat-visible-height,100dvh) - 135px));overflow:hidden;
}
body.marking #comms-dock {visibility:hidden;pointer-events:none}
.chat-head {flex:none;display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid #ffffff13}
.chat-head>div {display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.chat-head h2 {font-size:15px;line-height:1.3;margin:0}
.chat-head small {font-size:11px;color:#a5b7c2}
#close-chat {width:30px;height:30px;padding:6px;background:transparent;color:#b5c2cb;border-radius:7px}
.chat-scroll {min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px 16px}
#chat-intro h3 {margin:0 0 8px;font-size:15px;font-weight:550}
.chat-prompts {display:flex;gap:6px;flex-wrap:wrap}
.chat-prompts button {background:#1a242d;color:#dce7ed;border:1px solid #394650;border-radius:8px;padding:6px 9px;font:12px system-ui,sans-serif}
.chat-prompts button:hover {border-color:#77929e}
.chat-message {margin:0 0 12px;overflow-wrap:anywhere}
.chat-message strong {font-size:11px;font-weight:600;color:#8bdddf}
.chat-message p {margin:3px 0 0;white-space:pre-wrap}
.chat-message.user {border-radius:12px 12px 3px 12px;background:#23313b;padding:7px 11px;width:fit-content;max-width:87%;margin-left:auto}
.chat-message.user strong {color:#bfccd2}
.chat-message:last-child {margin-bottom:0}
#chat-status {color:#a8b7c2;font-size:12px;margin:8px 0 0}
#chat-status:empty {display:none}
@media(max-width:640px) {
  #comms-dock {--dock-edge:max(8px,env(safe-area-inset-bottom));width:calc(100% - 20px);gap:6px}
  #question {font-size:16px}
}
#earth-map{width:min(610px,95vw)}
#earth-chart{display:block;width:100%;height:auto;margin:12px 0;cursor:crosshair;border-radius:4px}
#place-form{display:flex;gap:6px;margin:8px 0}#place-query{flex:1;min-width:0;background:#071019;color:white;border:1px solid var(--line);padding:8px}
#place-detail iframe{display:block;width:100%;height:210px;border:0;margin:6px 0}#place-detail a{color:var(--cyan)}
#observatory{width:min(780px,94vw)}
#obs-images,.obs-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#obs-images figure{margin:0}#obs-images img{width:100%;display:block}#observatory a{color:var(--cyan)}
.obs-dates input{display:block;width:100%;padding:7px;color:var(--ink);background:var(--console);border:1px solid var(--line)}
#obs-form button,#obs-export{margin:8px 0}
.grain{opacity:.018}
#orbit-pass{margin-bottom:8px}
#watch-orbit{margin:2px 0 4px}
.orbital-window #app > :not(#viewport):not(.loading-overlay){display:none}
#window-controls:not([hidden]){position:fixed;bottom:max(16px,env(safe-area-inset-bottom));right:18px;display:flex;align-items:center;gap:7px;z-index:5}
#window-controls span{color:#e7f3ff;text-shadow:0 1px 4px #000;font:600 9px var(--instrument-font);letter-spacing:.12em;margin-right:5px}
#window-controls button{border:1px solid #8aafc45c;border-radius:4px;background:#09111be6;color:#e5f7ff;padding:8px 11px;font:600 11px var(--instrument-font)}

.flight-tools { display:flex; align-items:center; gap:7px; }
.flying #comms-dock { display:none; position:fixed; z-index:24; }
.flying.flight-chat-open #comms-dock { display:grid; }
.flying.flight-chat-open .flight-bottom { visibility:hidden; }
#flight-chat[aria-expanded="true"] { border-color:var(--cyan); }