:root {
  --bg: #02040a;
  --navy: #071326;
  --gold: #c99d42;
  --gold-lt: #f0d078;
  --blue: #4faeff;
  --violet: #d54cff;
  --cyan: #51e8f4;
  --white: #f5f2e9;
  --muted: rgba(238, 237, 231, .63);
  --line: rgba(224, 184, 82, .28);
}

* { box-sizing: border-box; }

html, body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--white);
  font-family: "Avenir Next", "Hiragino Sans", "Yu Gothic", sans-serif;
}

body {
  background-image:
    linear-gradient(180deg, rgba(1, 3, 9, .08), rgba(1, 4, 12, .02) 68%, rgba(0, 4, 13, .15)),
    url("../assets/space-command-background.png");
  background-size: cover;
  background-position: center;
}

body.cursor-hidden { cursor: none; }

#bg-canvas, #depth-canvas, #gravity-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
#bg-canvas { z-index: 0; opacity: .28; mix-blend-mode: screen; }
#depth-canvas { z-index: 1; opacity: .28; }
#gravity-canvas { z-index: 2; opacity: .58; }

.vignette {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 47%, transparent 0 26%, rgba(0, 3, 12, .08) 48%, rgba(0, 1, 7, .56) 100%),
    linear-gradient(90deg, rgba(0,0,0,.28), transparent 18% 82%, rgba(0,0,0,.34));
}

.stage {
  position: relative;
  z-index: 5;
  height: 100vh;
  min-height: 700px;
  animation: fade-in 1.2s ease-out;
}
@keyframes fade-in { from { opacity: 0; transform: scale(1.01); } }

.brand {
  position: absolute;
  top: 28px;
  left: 34px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 13px;
}
.brand-mark {
  width: 48px;
  height: 52px;
  display: grid;
  place-items: center;
  clip-path: polygon(50% 0, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%);
  background: linear-gradient(145deg, #f6d67f, #8f671b);
  color: #090704;
  font-size: 22px;
  font-weight: 900;
  filter: drop-shadow(0 0 11px rgba(238, 193, 82, .52));
}
.brand-text { font-size: 17px; font-weight: 700; letter-spacing: .045em; }
.brand-text span { color: var(--gold-lt); }
.brand-sub { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 400; letter-spacing: .12em; }

.welcome-console {
  position: absolute;
  z-index: 20;
  top: 23px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 300px;
  text-align: center;
  text-shadow: 0 0 18px rgba(237, 190, 80, .22);
}
.welcome-date { color: rgba(255,255,255,.72); font-size: 11px; letter-spacing: .18em; }
.clock { margin-top: 2px; color: var(--gold-lt); font-size: 30px; font-weight: 500; letter-spacing: .22em; font-variant-numeric: tabular-nums; }
.greeting { margin-top: 1px; color: #efca6c; font-size: 12px; letter-spacing: .17em; }

.hud-panel {
  position: absolute;
  z-index: 15;
  padding: 15px 17px;
  border: 1px solid rgba(224, 184, 82, .25);
  border-radius: 4px;
  background: linear-gradient(145deg, rgba(5, 11, 24, .76), rgba(1, 5, 14, .5));
  box-shadow: inset 0 0 22px rgba(50, 118, 186, .06), 0 12px 40px rgba(0,0,0,.25);
  backdrop-filter: blur(7px);
}
.hud-panel::before, .hud-panel::after { content: ""; position: absolute; width: 18px; height: 1px; background: var(--gold-lt); opacity: .62; }
.hud-panel::before { top: -1px; left: -1px; }
.hud-panel::after { right: -1px; bottom: -1px; }
.hud-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; color: var(--gold-lt); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.online-dot { width: 6px; height: 6px; border-radius: 50%; background: #61f8b2; box-shadow: 0 0 10px #61f8b2; }
.system-panel { top: 28px; right: 32px; width: 226px; }
.status-row { display: grid; grid-template-columns: 60px 1fr 34px; align-items: center; gap: 8px; margin: 8px 0; font-size: 8px; color: rgba(255,255,255,.64); }
.status-row b { height: 2px; background: rgba(255,255,255,.12); }
.status-row b i { display: block; width: var(--level); height: 100%; background: linear-gradient(90deg, #a77524, #f4d47a); box-shadow: 0 0 7px rgba(244,212,122,.55); }
.status-row em { font-style: normal; text-align: right; color: rgba(255,255,255,.82); font-variant-numeric: tabular-nums; }

.mission-panel { left: 28px; bottom: 30px; width: 246px; }
.mission-row { display: flex; justify-content: space-between; margin: 11px 0; color: rgba(255,255,255,.64); font-size: 10px; }
.mission-row strong { color: #f2d17a; font-weight: 500; }
.mission-meter { height: 3px; margin-top: 14px; background: rgba(255,255,255,.1); }
.mission-meter i { display: block; width: 87%; height: 100%; background: linear-gradient(90deg, #f2c65f, #ab7625); box-shadow: 0 0 8px rgba(237,188,74,.55); }

.schedule-panel { right: 28px; bottom: 30px; width: 252px; }
.schedule-row { display: grid; grid-template-columns: 62px 1fr; gap: 8px; margin: 9px 0; font-size: 9px; color: rgba(255,255,255,.66); }
.schedule-row time { color: #dbae52; font-variant-numeric: tabular-nums; }

.orbit-stage {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 51%;
  width: min(1120px, 72vw);
  height: min(730px, 72vh);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.orbit-stage::before, .orbit-stage::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  border: 1px solid rgba(232, 194, 94, .14);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  pointer-events: none;
}
.orbit-stage::before { width: 74%; height: 76%; box-shadow: 0 0 30px rgba(194,151,54,.04); }
.orbit-stage::after { width: 61%; height: 62%; border-style: dashed; animation: orbit-rotate 48s linear infinite; }

.button-glow-canvas, .orbit-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.button-glow-canvas { z-index: 0; opacity: .8; }
.orbit-lines { z-index: 1; overflow: visible; }
.orbit-line { stroke: rgba(234, 192, 87, .37); stroke-width: 1; stroke-dasharray: 2 7; filter: drop-shadow(0 0 3px rgba(227,192,95,.32)); }
.orbit-signal { fill: #ffe294; filter: drop-shadow(0 0 6px #efbc51); offset-rotate: 0deg; animation: signal-travel 3s linear infinite, signal-fade 3s linear infinite; }
@keyframes signal-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes signal-fade { 0%,100% { opacity: 0; } 15%,70% { opacity: 1; } }

.hex-ring {
  all: unset;
  cursor: pointer;
  position: relative;
  width: 230px;
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.hex-glow-el { position: absolute; width: 70%; height: 70%; border-radius: 50%; background: #e3a929; filter: blur(34px); animation: glow-breathe 4.2s ease-in-out infinite; }
@keyframes glow-breathe { 0%,100% { opacity: .2; transform: scale(.92); } 50% { opacity: .48; transform: scale(1.08); } }
.hex-ring-orbit { position: absolute; border-radius: 50%; border: 1px dashed rgba(236,197,95,.48); animation: orbit-rotate 26s linear infinite; }
.hex-ring-orbit.r1 { width: 125%; height: 125%; }
.hex-ring-orbit.r2 { width: 153%; height: 153%; opacity: .45; animation-duration: 40s; animation-direction: reverse; }
@keyframes orbit-rotate { to { transform: rotate(360deg); } }
.hex-shape { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 0 18px rgba(232,180,55,.78)); animation: hex-breathe 4.2s ease-in-out infinite; }
@keyframes hex-breathe { 50% { transform: scale(1.035); } }
.hex-outer { fill: rgba(211,160,40,.15); stroke: #e2b44f; stroke-width: 2; transition: .3s; }
.hex-inner { fill: rgba(8,8,8,.82); stroke: rgba(240,201,101,.68); stroke-width: 1; }
.hex-ring:hover .hex-outer { fill: rgba(224,174,48,.28); stroke: #ffe092; }
.hex-text { fill: var(--gold-lt); font-size: 74px; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.hex-label { position: absolute; bottom: -25px; color: rgba(255,255,255,.7); font-size: 11px; letter-spacing: .35em; }

.app-buttons { position: absolute; inset: 0; z-index: 4; }
.app-btn {
  --planet: var(--gold);
  all: unset;
  cursor: pointer;
  position: absolute;
  width: 190px;
  min-height: 82px;
  transform: translate(-50%, -50%);
  padding-left: 82px;
  color: var(--white);
  text-align: left;
  z-index: 4;
  transition: transform .25s ease, filter .25s ease;
  animation: app-btn-breathe 7s ease-in-out infinite;
}
.app-btn::before {
  content: attr(data-icon);
  position: absolute;
  left: 0;
  top: 50%;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid color-mix(in srgb, var(--planet) 80%, white 20%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,.74), transparent 7%),
    radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--planet) 72%, white 28%), color-mix(in srgb, var(--planet) 28%, #061224 72%) 45%, #020714 74%);
  box-shadow: inset -10px -12px 20px rgba(0,0,0,.48), inset 8px 8px 14px rgba(255,255,255,.08), 0 0 14px var(--planet), 0 0 28px color-mix(in srgb, var(--planet) 42%, transparent);
  color: white;
  font-size: 20px;
  font-weight: 800;
  text-shadow: 0 0 9px rgba(255,255,255,.7);
}
.app-btn::after {
  content: "";
  position: absolute;
  left: -8px;
  top: calc(50% - 41px);
  width: 82px;
  height: 82px;
  border: 1px solid color-mix(in srgb, var(--planet) 55%, transparent);
  border-radius: 50%;
  animation: planet-pulse 3.8s ease-in-out infinite;
}
.app-btn:hover { transform: translate(-50%, -50%) scale(1.08); filter: brightness(1.2); animation-play-state: paused; }
.app-btn.accent-blue { --planet: var(--blue); }
.app-btn[data-key="content"] { --planet: var(--violet); }
.app-btn[data-key="cursor"] { --planet: var(--cyan); }
.app-btn[data-key="president"] { --planet: #80a5ce; }
.app-btn-label { display: block; color: #f5d77e; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-shadow: 0 0 12px rgba(230,185,77,.35); }
.app-btn-sub { display: block; margin-top: 5px; color: rgba(255,255,255,.62); font-size: 9px; letter-spacing: .05em; }
.app-btn:nth-of-type(2n) { animation-delay: -2.2s; }
.app-btn:nth-of-type(3n) { animation-delay: -4.3s; }
@keyframes app-btn-breathe { 50% { transform: translate(-50%, -50%) scale(1.018); } }
@keyframes planet-pulse { 0%,100% { opacity:.28; transform:scale(.92); } 50% { opacity:.75; transform:scale(1.08); } }

.future-message {
  position: absolute;
  z-index: 15;
  left: 50%;
  bottom: 22px;
  width: 480px;
  transform: translateX(-50%);
  padding: 12px 22px 10px;
  border: 1px solid rgba(224, 184, 82, .22);
  background: linear-gradient(90deg, transparent, rgba(5,18,38,.76) 16% 84%, transparent);
  text-align: center;
}
.future-message strong { display:block; color: rgba(255,255,255,.78); font-size: 11px; font-weight: 400; letter-spacing: .15em; }
.future-message span { display:block; margin-top:6px; color:rgba(255,255,255,.55); font-size:10px; letter-spacing:.13em; }
.hint-bar { position:absolute; right:22px; bottom:8px; z-index:20; color:rgba(255,255,255,.28); font-size:9px; }
body.cursor-hidden .hint-bar { opacity:0; transition:opacity 1s; }

/* ===== Progress AI conversation console ===== */
.ai-dock-button {
  all: unset;
  cursor: pointer;
  position: absolute;
  z-index: 24;
  right: 30px;
  top: 50%;
  width: 58px;
  height: 176px;
  transform: translateY(-50%);
  border: 1px solid rgba(236, 197, 95, .34);
  border-radius: 30px 0 0 30px;
  background: linear-gradient(180deg, rgba(10, 27, 52, .8), rgba(3, 8, 19, .88));
  box-shadow: inset 0 0 24px rgba(65, 134, 202, .1), 0 0 28px rgba(230, 181, 62, .12);
  backdrop-filter: blur(12px);
  transition: width .28s ease, border-color .28s ease, box-shadow .28s ease, opacity .25s ease;
  overflow: hidden;
}
.ai-dock-button:hover { width: 192px; border-color: rgba(244, 211, 119, .68); box-shadow: inset 0 0 30px rgba(65,134,202,.15), 0 0 28px rgba(230,181,62,.24); }
.ai-dock-core { position:absolute; top:15px; left:8px; width:40px; height:40px; display:grid; place-items:center; border:1px solid #e2b44f; border-radius:50%; background:radial-gradient(circle at 35% 30%, #f4d679, #6f4a0e 58%, #080b10 72%); color:#fff1b5; font-weight:900; box-shadow:0 0 16px rgba(237,187,64,.58); }
.ai-dock-copy { position:absolute; left:60px; top:23px; width:120px; white-space:nowrap; }
.ai-dock-copy b { display:block; color:var(--gold-lt); font-size:11px; letter-spacing:.11em; }
.ai-dock-copy small { display:block; margin-top:5px; color:rgba(255,255,255,.42); font-size:7px; letter-spacing:.08em; }
.ai-dock-button::after { content:"AI"; position:absolute; left:21px; bottom:20px; color:rgba(238,203,112,.65); font-size:9px; letter-spacing:.2em; writing-mode:vertical-rl; }
body.ai-panel-open .ai-dock-button { opacity:0; pointer-events:none; }

.ai-panel-scrim { position:fixed; inset:0; z-index:39; background:linear-gradient(90deg, transparent 46%, rgba(0,2,8,.38)); opacity:0; pointer-events:none; transition:opacity .4s ease; }
body.ai-panel-open .ai-panel-scrim { opacity:1; pointer-events:auto; }

.ai-panel {
  position: fixed;
  z-index: 40;
  top: 18px;
  right: 18px;
  bottom: 18px;
  width: 440px;
  display: grid;
  grid-template-rows: auto auto minmax(190px, 1fr) auto auto auto;
  border: 1px solid rgba(235, 196, 94, .38);
  border-radius: 12px;
  background:
    linear-gradient(155deg, rgba(13, 29, 53, .91), rgba(2, 7, 17, .94) 52%, rgba(10, 16, 29, .94)),
    radial-gradient(circle at 100% 0, rgba(209, 159, 42, .15), transparent 35%);
  box-shadow: -28px 0 70px rgba(0,0,0,.45), inset 0 0 70px rgba(33,89,150,.07), 0 0 22px rgba(225,177,59,.1);
  backdrop-filter: blur(20px) saturate(1.2);
  transform: translateX(calc(100% + 30px));
  opacity: 0;
  pointer-events: none;
  transition: transform .48s cubic-bezier(.16,.82,.25,1), opacity .3s ease;
  overflow: hidden;
}
.ai-panel::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.22; background:repeating-linear-gradient(180deg, transparent 0 3px, rgba(99,180,255,.05) 4px); }
.ai-panel::after { content:""; position:absolute; left:0; top:22px; bottom:22px; width:2px; background:linear-gradient(transparent, #e8ba54 18% 82%, transparent); box-shadow:0 0 10px #d6a63c; }
body.ai-panel-open .ai-panel { transform:translateX(0); opacity:1; pointer-events:auto; }

.ai-panel-header { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:22px 22px 17px; border-bottom:1px solid rgba(255,255,255,.07); }
.ai-identity { display:flex; align-items:center; gap:13px; }
.ai-avatar { width:44px; height:44px; display:grid; place-items:center; clip-path:polygon(50% 0,94% 25%,94% 75%,50% 100%,6% 75%,6% 25%); background:linear-gradient(145deg,#f0ce70,#7c5714); color:#090704; font-size:19px; font-weight:900; filter:drop-shadow(0 0 10px rgba(236,188,68,.48)); }
.ai-identity strong { display:block; color:#f2d27b; font-size:15px; letter-spacing:.13em; }
.ai-identity small { display:flex; align-items:center; gap:6px; margin-top:5px; color:rgba(255,255,255,.43); font-size:8px; letter-spacing:.14em; }
.ai-identity small i { width:5px; height:5px; border-radius:50%; background:#66efb2; box-shadow:0 0 8px #66efb2; }
.ai-close { all:unset; cursor:pointer; width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.1); border-radius:50%; color:rgba(255,255,255,.58); font-size:23px; line-height:1; transition:.2s; }
.ai-close:hover { color:#f5d984; border-color:rgba(236,197,95,.48); transform:rotate(90deg); }

.ai-scan-status { position:relative; z-index:1; display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:10px; min-height:39px; padding:7px 22px; color:rgba(255,255,255,.3); font-size:7px; letter-spacing:.18em; border-bottom:1px solid rgba(255,255,255,.045); }
.ai-scan-status b { min-width:72px; color:#d8ae50; font-weight:500; text-align:right; transition:color .2s,text-shadow .2s; }
.ai-voice-toggle { cursor:pointer; padding:5px 7px; border:1px solid rgba(221,180,76,.28); border-radius:3px; background:rgba(7,18,32,.72); color:#e2bd62; font:inherit; font-size:7px; letter-spacing:.08em; white-space:nowrap; }
.ai-voice-toggle[aria-pressed="false"] { border-color:rgba(255,255,255,.1); color:rgba(255,255,255,.3); }
.ai-voice-toggle:disabled { cursor:not-allowed; opacity:.4; }
.ai-voice-wave { display:flex; align-items:center; justify-content:flex-end; gap:2px; height:16px; opacity:.2; transition:opacity .2s; }
.ai-voice-wave i { width:2px; height:4px; border-radius:2px; background:#e6bd57; box-shadow:0 0 5px rgba(232,190,82,.5); }
.ai-panel[data-ai-status="listening"] .ai-scan-status b { color:#72e8ff; text-shadow:0 0 8px rgba(71,213,255,.58); }
.ai-panel[data-ai-status="speaking"] .ai-scan-status b { color:#f3d477; text-shadow:0 0 8px rgba(237,188,68,.58); }
.ai-panel[data-ai-status="processing"] .ai-scan-status b { color:#9fc8ff; }
.ai-panel[data-ai-status="listening"] .ai-voice-wave,
.ai-panel[data-ai-status="speaking"] .ai-voice-wave { opacity:1; }
.ai-panel[data-ai-status="listening"] .ai-voice-wave i,
.ai-panel[data-ai-status="speaking"] .ai-voice-wave i { animation:ai-wave .7s ease-in-out infinite alternate; }
.ai-voice-wave i:nth-child(2) { animation-delay:.12s !important; }
.ai-voice-wave i:nth-child(3) { animation-delay:.24s !important; }
.ai-voice-wave i:nth-child(4) { animation-delay:.36s !important; }
.ai-voice-wave i:nth-child(5) { animation-delay:.48s !important; }
@keyframes ai-wave { from { height:4px; opacity:.45; } to { height:15px; opacity:1; } }

.ai-history { position:relative; z-index:1; padding:18px 20px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(218,174,70,.4) transparent; }
.ai-message { position:relative; max-width:86%; margin:0 0 15px; padding:13px 14px 11px; border:1px solid rgba(255,255,255,.08); border-radius:3px 13px 13px 13px; background:linear-gradient(145deg,rgba(21,44,73,.66),rgba(6,15,28,.7)); box-shadow:inset 0 0 18px rgba(63,139,205,.05); }
.ai-message-user { margin-left:auto; border-color:rgba(224,181,76,.22); border-radius:13px 3px 13px 13px; background:linear-gradient(145deg,rgba(72,53,17,.46),rgba(23,18,9,.62)); }
.ai-message-error { border-color:rgba(255,111,104,.34); background:linear-gradient(145deg,rgba(78,28,31,.56),rgba(24,10,17,.7)); }
.ai-message-error .message-source { color:#ff8b82; }
.message-source { color:#dab04f; font-size:7px; font-weight:700; letter-spacing:.15em; }
.ai-message p { margin:7px 0 5px; color:rgba(255,255,255,.83); font-size:12px; line-height:1.75; }
.ai-message time { display:block; color:rgba(255,255,255,.25); font-size:7px; letter-spacing:.1em; text-align:right; }
.ai-typing span { display:inline-block; width:4px; height:4px; margin:5px 2px; border-radius:50%; background:#e2b855; animation:ai-dot 1s ease-in-out infinite; }
.ai-typing span:nth-child(2){animation-delay:.15s}.ai-typing span:nth-child(3){animation-delay:.3s}
@keyframes ai-dot { 50% { opacity:.28; transform:translateY(-3px); } }

.ai-quick-actions { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:12px 20px 14px; border-top:1px solid rgba(255,255,255,.05); }
.ai-quick-actions button { cursor:pointer; min-height:31px; padding:6px 9px; border:1px solid rgba(211,172,77,.18); border-radius:4px; background:rgba(8,19,34,.58); color:rgba(255,255,255,.68); font:inherit; font-size:9px; text-align:left; transition:.2s; }
.ai-quick-actions button::before { content:"›"; margin-right:7px; color:#dcb354; }
.ai-quick-actions button:hover { color:#f3d378; border-color:rgba(228,187,86,.48); background:rgba(43,35,17,.45); transform:translateX(2px); }
.ai-quick-actions button:disabled, .ai-send:disabled, .ai-input-wrap input:disabled { cursor:wait; opacity:.45; }

.ai-composer { position:relative; z-index:1; display:grid; grid-template-columns:38px 1fr 62px; gap:8px; padding:14px 18px 12px; border-top:1px solid rgba(255,255,255,.075); background:rgba(1,6,14,.48); }
.ai-mic { cursor:pointer; border:1px solid rgba(224,183,79,.26); border-radius:50%; background:rgba(9,22,38,.8); color:#ddb34d; font-size:8px; box-shadow:inset 0 0 10px rgba(67,147,205,.08); }
.ai-mic.listening { color:#ff6f68; border-color:rgba(255,105,94,.58); box-shadow:0 0 13px rgba(255,91,80,.3); animation:mic-pulse 1s ease-in-out infinite; }
.ai-mic:disabled { cursor:not-allowed; opacity:.35; }
@keyframes mic-pulse { 50% { transform:scale(1.08); } }
.ai-input-wrap { min-width:0; padding:7px 10px 6px; border:1px solid rgba(255,255,255,.09); border-radius:5px; background:rgba(2,8,17,.72); }
.ai-input-wrap:focus-within { border-color:rgba(225,181,72,.48); box-shadow:inset 0 0 14px rgba(221,177,66,.05); }
.ai-input-wrap span { display:block; color:rgba(224,181,73,.5); font-size:6px; letter-spacing:.15em; }
.ai-input-wrap input { width:100%; margin-top:3px; padding:0; border:0; outline:0; background:transparent; color:#f2efe6; font:inherit; font-size:11px; }
.ai-input-wrap input::placeholder { color:rgba(255,255,255,.25); }
.ai-send { cursor:pointer; display:flex; align-items:center; justify-content:center; gap:5px; border:1px solid rgba(231,190,85,.48); border-radius:5px; background:linear-gradient(145deg,rgba(143,101,25,.55),rgba(58,40,11,.62)); color:#f4d77f; font:inherit; font-size:9px; }
.ai-send b { font-size:14px; font-weight:400; }
.ai-send:hover { background:linear-gradient(145deg,rgba(188,138,34,.7),rgba(72,48,11,.76)); box-shadow:0 0 14px rgba(224,178,66,.2); }
.ai-retry { cursor:pointer; margin-top:8px; padding:6px 12px; border:1px solid rgba(255,139,130,.38); border-radius:4px; background:rgba(53,17,20,.58); color:#ffc0ba; font:inherit; font-size:9px; letter-spacing:.08em; }
.ai-retry:hover { border-color:rgba(255,159,151,.7); background:rgba(85,27,31,.7); }
.ai-disclaimer { position:relative; z-index:1; padding:0 18px 11px; background:rgba(1,6,14,.48); color:rgba(255,255,255,.22); font-size:6px; letter-spacing:.14em; text-align:center; }

.toast { position:fixed; left:50%; bottom:108px; z-index:100; max-width:560px; transform:translateX(-50%) translateY(18px); padding:12px 20px; border:1px solid rgba(224,184,82,.28); border-radius:6px; background:rgba(3,8,18,.94); color:var(--white); font-size:12px; text-align:center; opacity:0; pointer-events:none; transition:.3s; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width: 1500px), (max-height: 820px) {
  .orbit-stage { width: min(980px, 70vw); height: min(620px, 68vh); }
  .hex-ring { width: 190px; height: 190px; }
  .app-btn { width: 170px; min-height: 72px; padding-left: 70px; }
  .app-btn::before { width: 56px; height: 56px; font-size: 17px; }
  .app-btn::after { left:-7px; top:calc(50% - 35px); width:70px; height:70px; }
  .mission-panel, .schedule-panel { bottom: 20px; }
  .future-message { bottom: 15px; }
  .ai-panel { top:10px; right:10px; bottom:10px; width:410px; }
  .ai-history { padding-top:12px; }
  .ai-quick-actions { padding-top:9px; padding-bottom:10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}