/* Header/footer black; center white; keep things sturdy and simple */
:root {
  --hdr-h: 52px;
  /* reduced a few px */
  --ftr-h: 72px;
  --chat-w: 320px;
  --chat-w-collapsed: 0px;
  --bg-black: #000;
  --bg-white: #fff;
  --text: #fff;
  --text-dim: #bbb;
  --border: #444;
}

/* Layout skeleton */
html,
body {
  height: 100%;
}

body {
  display: grid;
  grid-template-rows: var(--hdr-h) 1fr var(--ftr-h);
  margin: 0;
  background: var(--bg-white);
  color: #111;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Header */
.bw-header {
  position: relative;
  display: grid;
  /* CHANGED: let center stretch and start-align title so it won't push/wrap right side */
  grid-template-columns: auto 1fr auto;
  /* left menus | stretchy center title | right controls */
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  background: var(--bg-black);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.bw-header .hdr-left {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.bw-header .hdr-center {
  display: flex;
  justify-content: flex-start;
  /* CHANGED: move "MultiApp" toward the left */
  min-width: 0;
  /* allow center to shrink before right wraps */
}

.bw-header .hdr-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Dropdowns */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: #222;
  color: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .5rem 0;
  display: none;
  z-index: 1000;
  font-size: 13px;
  line-height: 1.4;
}

.dropdown-item {
  padding: .4rem .75rem;
  cursor: pointer;
  white-space: nowrap;
}

.dropdown-item.dim {
  color: #888;
  font-style: italic;
}

.dropdown-sep {
  border-top: 1px solid var(--border);
  margin: .4rem 0 0 0;
}

.dropdown-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

/* Main (white) */
.bw-main {
  background: var(--bg-white);
  display: grid;
  grid-template-columns: var(--chat-w) 1fr;
  overflow: hidden;
  min-height: 0;
}

/* Collapsed chat */
body.chat-collapsed .bw-main {
  grid-template-columns: var(--chat-w-collapsed) 1fr;
}

/* Chat panel */
.chat-panel {
  border-right: 1px solid var(--border);
  background: #fafafa;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
}

.chat-panel .row {
  padding: 8px 10px;
}

.log-wrap {
  overflow: auto;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background: #fff;
}

.side-cards {
  padding: 8px 10px;
  display: grid;
  gap: 8px;
}

/* Stage */
.stage {
  position: relative;
  background: #fff;
  min-width: 0;
  overflow: hidden;
  display: grid;
}

.home-view {
  padding: 16px;
  color: #333;
}

.stage-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* Footer: black */
.bw-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-black);
  color: var(--text);
  border-top: 1px solid var(--border);
}

.bw-footer .ghost {
  background: transparent;
  color: #fff;
  border: 1px solid #555;
  border-radius: 8px;
  padding: 6px 10px;
}

.bw-footer .primary {
  background: #4caf50;
  color: #111;
  border: 0;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 600;
}

.bw-footer .small {
  font-size: 12px;
}

/* Scope controls */
.scope {
  display: flex;
  align-items: center;
  gap: 8px;
}

.scope-label {
  color: #ddd;
  font-size: 13px;
}

.scope-tabs {
  display: flex;
  gap: 6px;
}

.scope-tabs .tab {
  background: #222;
  color: #fff;
  border: 1px solid #555;
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
}

.scope-tabs .tab[aria-selected="true"] {
  background: #fff;
  color: #111;
  border-color: #fff;
}

.direct-select {
  background: #111;
  color: #fff;
  border: 1px solid #555;
  border-radius: 8px;
  padding: 6px 8px;
  /* width: 60%; */
  min-width: 160px;
  /* widened */
}

/* Voice controls */
.footer-center {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

/* Mic toggle button */
.mic-toggle {
  border: 0;
  border-radius: 999px;
  padding: 10px 8px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  background: #2e7d32;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .12) inset;
}

.mic-toggle.on {
  background: #2e7d32;
}

/* green */
.mic-toggle.off {
  background: #c62828;
}

/* red */

.toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}

.toggle input {
  transform: translateY(1px);
}

.meter {
  display: flex;
  align-items: center;
  gap: 6px;
}

.meter-bar {
  width: 60px;
  height: 10px;
  background: #333;
  border-radius: 6px;
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  width: 0;
  background: #4caf50;
}

.meter-pct {
  color: #ddd;
}

/* Chat input (footer right) */
.footer-right .chat-input {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

.footer-right input#msg {
  min-width: 240px;
  max-width: 38vw;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #666;
  background: #111;
  color: #fff;
}

/* Utility */
.dim {
  color: var(--text-dim);
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Make sure dropdowns appear above everything */
#fileMenu,
#programMenu {
  z-index: 9999;
}

.shell-source-modal {
  position: fixed;
  inset: 8%;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  z-index: 99999;
}

.shell-source-header {
  padding: 10px 14px;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
}

.shell-source-tabs-wrap {
  max-height: 96px;
  /* ~2–3 rows of buttons */
  overflow-y: auto;
  /* vertical scroll if many files */
  overflow-x: hidden;
}

.shell-source-tabs {
  display: flex;
  flex-wrap: wrap;
  /* ✅ allow multiple rows */
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid #eee;
}


.shell-source-tabs button {
  font-size: 0.75rem;
  padding: 4px 8px;
  white-space: nowrap;
}


.shell-source-viewer {
  flex: 1;
  margin: 0;
  padding: 12px;
  overflow: auto;
  font-family: monospace;
  font-size: 0.8rem;
  background: #f9fafb;
}

.shell-source-footer {
  padding: 8px;
  text-align: right;
  border-top: 1px solid #eee;
}

/* ===============================
   Shell Data Editor Modal
   (matches old cardGame-rules behavior)
   =============================== */

.sde-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 10000;
}

.sde-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;

  display: flex;
  align-items: center;
  justify-content: center;

  /* IMPORTANT: allow clicks only inside dialog */
  pointer-events: none;
}

.sde-modal-inner {
  background: #ffffff;
  color: #111;

  width: 620px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);

  display: flex;
  flex-direction: column;

  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);

  pointer-events: auto;
  /* buttons clickable */
}


.sde-modal-title {
  margin: 0;
  /* important for h1 */
  padding: 14px 18px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 22px;
  /* h1 size */
  line-height: 1.25;
  border-bottom: 1px solid #ddd;
}


.sde-modal-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  /* allows body to scroll instead of modal growing */
}

.sde-modal-footer {
  padding: 12px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid #ddd;
}

.sde-btn-primary {
  background: #4caf50;
  color: #111;
  border: 0;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 600;
  cursor: pointer;
}

.sde-btn-secondary {
  background: transparent;
  color: #111;
  border: 1px solid #999;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}

.hidden {
  display: none !important;
}