/* ============================================================
   Dev shell layout. Two columns: collapsible Hermes chat (left)
   + active-project workspace (right). Overrides the dashboard's
   fixed-popup positioning of #chat-box so it becomes a sidebar.
   ============================================================ */
html, body.dev-shell { height: 100%; margin: 0; }
body.dev-shell {
  display: flex; overflow: hidden;
  background: #1b0833;
  font-family: "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
}

/* ---- Left: chat sidebar (reuses chat.js, which toggles `.open`) ---- */
body.dev-shell #chat-box {
  position: relative; inset: auto;            /* cancel the popup positioning */
  left: auto; right: auto; bottom: auto; top: auto;
  width: 44px;                                /* collapsed: just the tab */
  height: 100%; flex: 0 0 auto;
  display: flex; flex-direction: column;
  background: #2b0a4a; border-right: 2px solid #ff00cc;
  transition: width .2s ease; z-index: auto;
}
body.dev-shell #chat-box.open { width: 340px; }

body.dev-shell .chat-titlebar {
  writing-mode: vertical-rl; text-orientation: mixed;
  white-space: nowrap; cursor: pointer; border: none;
  background: #ff00cc; color: #fff; font: inherit; font-weight: bold;
  padding: .6rem .3rem; height: 100%;
}
body.dev-shell #chat-box.open .chat-titlebar {
  writing-mode: horizontal-tb; height: auto;
  display: flex; justify-content: space-between; align-items: center;
}
body.dev-shell .chat-body { display: none; flex: 1; min-height: 0; }
body.dev-shell #chat-box.open .chat-body {
  display: flex; flex-direction: column; padding: .5rem; gap: .4rem;
}
body.dev-shell #chat-log { flex: 1; min-height: 0; overflow: auto; }

/* ---- Chat header buttons (New chat / Log out) ---- */
body.dev-shell .chat-active-head { display: flex; align-items: center; gap: .35rem; }
body.dev-shell .chat-head-spacer { flex: 1; }
body.dev-shell #chat-new,
body.dev-shell #chat-logout {
  font: inherit; font-size: .72rem; cursor: pointer;
  border: none; border-radius: 6px; padding: .2rem .45rem;
  background: #3a1560; color: #ffd6f6;
}
body.dev-shell #chat-new:hover,
body.dev-shell #chat-logout:hover { background: #4a1d76; }

/* ---- Rendered mentor markdown — keep it tidy in the narrow chat column ---- */
body.dev-shell #chat-log .msg.mentor p { margin: .35rem 0; }
body.dev-shell #chat-log .msg.mentor p:first-child { margin-top: 0; }
body.dev-shell #chat-log .msg.mentor p:last-child { margin-bottom: 0; }
body.dev-shell #chat-log .msg.mentor ul,
body.dev-shell #chat-log .msg.mentor ol { margin: .35rem 0; padding-left: 1.25rem; }
body.dev-shell #chat-log .msg.mentor pre {
  background: #0d0420; border: 1px solid #3a1560; border-radius: 6px;
  padding: .4rem .55rem; overflow-x: auto; margin: .4rem 0;
}
body.dev-shell #chat-log .msg.mentor code {
  font-family: ui-monospace, "Consolas", monospace; font-size: .82em;
}
body.dev-shell #chat-log .msg.mentor :not(pre) > code {
  background: #0d0420; padding: .05rem .3rem; border-radius: 4px;
}
body.dev-shell #chat-log .msg.mentor a { color: #7fd1ff; }
body.dev-shell #chat-log .msg.mentor table {
  border-collapse: collapse; margin: .4rem 0; font-size: .82em;
}
body.dev-shell #chat-log .msg.mentor th,
body.dev-shell #chat-log .msg.mentor td {
  border: 1px solid #3a1560; padding: .15rem .4rem;
}

/* ---- Chat bubbles re-themed for the DARK shell ----
   geocities.css colors the bubbles from theme vars (--accent/--ink) that only
   exist under .theme-* on the light dashboard. The dev shell sets no theme class,
   so without these overrides the user bubble has no background and the mentor's
   inline code (paths) renders dark-on-dark. Higher specificity (body.dev-shell +
   #chat-log) so these win over the dashboard rules regardless of load order. */
body.dev-shell #chat-log .msg.user {
  background: #b5179e; color: #ffffff;          /* on-brand magenta, readable on dark */
}
body.dev-shell #chat-log .msg.mentor {
  background: #3a1560; border: 1px solid #5a2a86; color: #ffe9fb;
}
body.dev-shell #chat-log .msg.typing {
  background: none; border: none; color: #c9a9e6; font-style: italic;
}
/* Paths/code: the dark #0d0420 pill needs an explicit light foreground or it's
   invisible (the original bug — black text on a near-black box). */
body.dev-shell #chat-log .msg.mentor code,
body.dev-shell #chat-log .msg.mentor pre { color: #9fe0ff; }

/* ---- Right: workspace ---- */
#workspace { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#ws-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .8rem; background: #2b0a4a;
  border-bottom: 2px solid #ff00cc; color: #ffe9fb;
}
.ws-label { font-weight: bold; }
#ws-switcher { font: inherit; padding: .25rem .4rem; border-radius: 6px; }
.ws-spacer { flex: 1; }
.ws-state {
  font-size: .8rem; padding: .15rem .5rem; border-radius: 999px;
  background: #3a1560; color: #ffd6f6;
}
.ws-state.live { background: #1f6b2e; color: #d9ffe0; }
.ws-btn {
  font: inherit; font-weight: bold; border: none; border-radius: 8px;
  padding: .35rem .9rem; color: #fff; cursor: pointer;
}
.ws-btn:disabled { opacity: .45; cursor: default; }
.ws-btn[hidden] { display: none; }
.ws-run    { background: #2ecc40; }
.ws-stop   { background: #ff4136; }
.ws-rearm  { background: #6f42c1; }
.ws-revert { background: #6c757d; }
.ws-publish { background: #ff851b; }
.ws-status {
  font-size: .8rem; opacity: .85; color: #ffd6f6;
  max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-status[hidden] { display: none; }

#ws-frame-wrap { position: relative; flex: 1; min-height: 0; }
#ws-frame { width: 100%; height: 100%; border: 0; display: block; background: #1b0833; }

/* "Click to play" poster over a lazy live tool: nothing is loaded behind it until
   ▶ Play, so the tool can't capture the keyboard (it would steal even the chat). */
.ws-play {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: rgba(27, 8, 51, 0.55);
}
.ws-play[hidden] { display: none; }
#ws-play-btn {
  font: inherit; font-weight: bold; font-size: 1.15rem; cursor: pointer;
  padding: .7rem 1.5rem; border: none; border-radius: 12px;
  background: #ff851b; color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
#ws-play-btn:hover { background: #ff9a3c; }
.ws-empty {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: #ffd6f6; font-size: 1.1rem; text-align: center;
}
#ws-frame[src] + .ws-empty { display: none; }