/* console.css - the ghost console (ghost-web's control panel) as a side panel over the bunker view.  The widget rules
   follow frontend/ghost/src/style.css, scoped to the panel so the bunker's own styles are untouched. */
#ghostConsole {
  --panel: rgba(13, 17, 20, .94); --panel2: #151c21; --line: #26313a; --text: #dde6ea; --dim: #8b9aa3;
  --accent: #7fb6c9; --accent2: #c9a27f; --warn: #e0a050; --err: #e06a5a; --ok: #6fc28c;
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px; z-index: 20; display: none; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--line); color: var(--text); user-select: none;
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
#ghostConsole.open { display: flex; }
#ghostConsole header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
#ghostConsole header b { flex: 1; font-weight: 600; letter-spacing: .08em; color: var(--accent2); }
#ghostConsole header .k { color: var(--dim); font-size: 12px; }
#ghostConsole header .close { background: none; border: 1px solid var(--line); border-radius: 6px; color: var(--dim); cursor: pointer; padding: 2px 8px; font: inherit; }
#ghostConsole #tabs { display: flex; border-bottom: 1px solid var(--line); }
#ghostConsole #tabs button { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--dim); padding: 10px 4px; cursor: pointer; font: inherit; }
#ghostConsole #tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
#ghostConsole #tabbody { flex: 1; overflow-y: auto; padding: 10px 12px 40px; }
#ghostConsole .sec { margin: 4px 0 14px; }
#ghostConsole .sec h3 { margin: 10px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 600; }
#ghostConsole .row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
#ghostConsole .row label { flex: 0 0 118px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ghostConsole .row input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }
#ghostConsole .row .val { flex: 0 0 44px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
#ghostConsole button.b, #ghostConsole select, #ghostConsole textarea, #ghostConsole input[type=text], #ghostConsole input[type=number] {
  background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; font: inherit; }
#ghostConsole textarea, #ghostConsole input[type=text] { user-select: text; }
#ghostConsole button.b { padding: 5px 10px; cursor: pointer; }
#ghostConsole button.b:hover { border-color: var(--accent); }
#ghostConsole button.b.on { background: #24414d; border-color: var(--accent); }
#ghostConsole button.b:disabled { opacity: .45; cursor: default; }
#ghostConsole button.primary { background: #2c5363; border-color: #3f7486; }
#ghostConsole select { padding: 4px 6px; flex: 1; min-width: 0; }
#ghostConsole textarea { width: 100%; min-height: 84px; padding: 8px; resize: vertical; }
#ghostConsole .btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
#ghostConsole .chip { display: inline-block; padding: 2px 8px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); color: var(--dim); font-size: 12px; }
#ghostConsole .chip.ok { color: var(--ok); border-color: #2f5a40; } #ghostConsole .chip.warn { color: var(--warn); border-color: #5a4a2f; }
#ghostConsole .chip.err { color: var(--err); border-color: #5a2f2f; }
#ghostConsole .note { color: var(--dim); font-size: 12px; margin: 4px 0; }
#ghostConsole .tree { border: 1px solid var(--line); border-radius: 6px; max-height: 300px; overflow-y: auto; }
#ghostConsole .tree .grp { padding: 4px 8px; color: var(--dim); background: var(--panel2); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; position: sticky; top: 0; }
#ghostConsole .tree .bone { padding: 3px 8px 3px 18px; cursor: pointer; }
#ghostConsole .tree .bone:hover { background: #18232a; }
#ghostConsole .tree .bone.sel { background: #24414d; }
#ghostConsole a { color: var(--accent); }

/* her speech as captions, and status messages (both outside the panel) */
#caption { position: fixed; left: 50%; bottom: 7%; transform: translateX(-50%); z-index: 10; max-width: 70%; text-align: center; font-size: 17px;
  color: #e8eef0; text-shadow: 0 1px 3px #000, 0 0 8px #000; pointer-events: none; }
#caption .w.cur { color: #e0b48a; }
body.console-open #caption { left: calc(50% - 190px); }
body.console-open #crosshair, body.console-open #prompt { display: none !important; }
#status { position: fixed; left: 12px; bottom: 10px; z-index: 21; max-width: 50%; font-size: 12px; }
#status .msg { background: rgba(10, 14, 16, .9); border: 1px solid #26313a; border-radius: 6px; padding: 6px 10px; margin-top: 6px; color: #dde6ea; }
#status .msg.err { border-color: #6a3a32; color: #f0b4a8; } #status .msg.warn { border-color: #6a5a32; color: #f0d9a8; }
@media (max-width: 860px) { #ghostConsole { width: 100%; top: 45%; border-left: 0; border-top: 1px solid #26313a; } body.console-open #caption { left: 50%; bottom: 57%; } }