/* First-class OS document. The canvas occupies the page, not a console pane. */
:root { color-scheme: dark; }
[hidden] { display: none !important; }
body { overflow: hidden; }
.root-bar { position: fixed; inset: 0 0 auto; height: 64px; padding: 0 22px; z-index: 4; gap: 14px; background: #080f18ed; }
.root-bar .brand { flex-shrink: 0; }
.root-bar a { color: #b7cedb; text-decoration: none; padding: 9px 11px; border-radius: 7px; }
.root-bar a:hover { background: #172d3b; }
.root-tools { display: flex; align-items: center; gap: 8px; }
.root-mode { margin-left: auto; font: 10px ui-monospace, monospace; color: #a6c7c6; letter-spacing: .06em; }
body > main { position: fixed; inset: 64px 0 0; height: auto; display: block; }
#viewport { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
#root-navigation, #root-inspector { position: fixed; z-index: 3; top: 78px; bottom: 92px; width: 285px; padding: 22px; border: 1px solid #2b4355; border-radius: 14px; background: #0a121cf5; box-shadow: 0 18px 45px #0006; overflow: auto; }
#root-navigation { left: 14px; }
#root-inspector { right: 14px; }
.scene-top { top: 32px; left: 32px; }
.toolbar { bottom: 32px; }
.root-foot { left: 20px; }
dialog { color: #dbe7ee; background: #0a1420; border: 1px solid #355466; border-radius: 16px; padding: 26px; width: min(440px, calc(100vw - 32px)); }
dialog::backdrop { background: #000a; backdrop-filter: blur(5px); }
dialog h2 { font-size: 20px; }
dialog a { color: #a3ece3; }
#root-auth-close { float: right; }
#root-auth-message { min-height: 48px; color: #a8bdce; }
#hermes { position: fixed; z-index: 6; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: 350px; max-height: calc(100dvh - 100px); overflow: auto; border: 1px solid #355063; border-radius: 15px; background: #0b1522f5; box-shadow: 0 18px 55px #0007; backdrop-filter: blur(16px); }
#hermes.collapsed { width: 210px; }
#hermes .hermes-header { position: static; height: auto; display: flex; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid #263747; background: transparent; }
#hermes.collapsed .hermes-header { border-bottom: 0; }
#hermes .identity { display: flex; align-items: center; gap: 11px; }
#hermes .signal { width: 8px; height: 8px; border-radius: 50%; background: #7f9aab; }
#hermes[data-state=ready] .signal { background: #9ce5ce; box-shadow: 0 0 12px #9ce5ce66; }
#hermes h1 { font-size: 14px; margin: 0; }
#hermes .identity p { font-size: 8px; letter-spacing: .12em; color: #9bb6c6; margin: 3px 0 0; }
#hermes-toggle { border: 0; padding: 0 6px; font-size: 21px; background: transparent; }
#hermes .scope, #hermes-status { margin: 12px 16px; font-size: 11px; color: #a8bfce; line-height: 1.5; }
#hermes-sign-in { margin: 12px 16px; display: block; color: #a3ece3; }
#hermes-messages { margin: 12px; height: 150px; overflow: auto; overscroll-behavior: contain; }
#hermes .empty { color: #8299ab; font-size: 12px; }
#hermes .bubble { padding: 10px 12px; margin-bottom: 10px; border-radius: 10px; background: #172637; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
#hermes .bubble.user { margin-left: 20px; background: #1a353c; }
#hermes .bubble strong { display: block; font-size: 9px; color: #9bbdcd; margin-bottom: 5px; }
#hermes-chat-form { border-top: 1px solid #263747; padding: 12px 16px; }
#hermes label { margin: 0 0 7px; }
#hermes textarea { font: inherit; color: #dbe7ee; background: #080f19; border: 1px solid #375063; border-radius: 8px; width: 100%; min-height: 62px; max-height: 110px; resize: vertical; padding: 9px; }
#hermes .actions { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
#hermes .hint { margin-right: auto; font-size: 9px; color: #8aa6b5; }
#hermes-send { background: #a3ece3; color: #10222d; }
#hermes .recovery { display: flex; gap: 8px; padding: 0 16px 12px; }
#hermes .recovery button { font-size: 11px; }
@media (max-width: 700px) {
  .root-bar { height: 102px; padding: 12px; flex-wrap: wrap; gap: 4px 9px; align-content: center; }
  .root-bar .brand { font-size: 14px; }
  .root-mode { font-size: 8px; }
  .root-tools { order: 4; width: 100%; gap: 6px; justify-content: space-between; }
  .root-tools button, .root-tools a { font-size: 11px; padding: 8px 10px; }
  body > main { inset: 102px 0 0; }
  .scene-top { top: 22px; left: 18px; }
  .scene-top .eyebrow { font-size: 8px; }
  .scene-top h1 { font-size: 21px; }
  .scene-top .note { font-size: 9px; }
  #root-navigation, #root-inspector { top: 112px; bottom: 90px; width: calc(100% - 28px); }
  .toolbar { bottom: 96px; gap: 4px; }
  .toolbar button { font-size: 11px; padding: 8px; }
  .foot { bottom: 76px; left: 12px; right: 12px; font-size: 8px; }
  #hermes { width: calc(100% - 20px); right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); max-height: calc(100dvh - 115px); }
  #hermes.collapsed { width: 190px; }
  #hermes textarea { font-size: 16px; }
  #hermes-messages { height: 125px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }