/* ============================================================
   max.css — Max AI popup terminal
   EXACT match to rw456/realrom term-pill / .terminal pattern.
   Per-zone colour vars override via body[data-zone="*"].
   ============================================================ */

/* ── Chakra palette (same as brand.css, duplicated here
      so max.css can be used standalone) ───────────────────── */
:root {
  --crown:  #a66cff;
  --brow:   #5b6cff;
  --throat: #3fb6ff;
  --heart:  #3fe07a;
  --plexus: #ffd93f;
  --sacral: #ff8a3f;
  --root:   #ff3f4f;
}

/* ── Orb (collapsed state — bottom-right corner) ─────────────── */
#term-pill {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0;
  /* collapsed = just the 56px circle */
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid rgba(57,255,20,0.55);
  background: rgba(57,255,20,0.12);
  backdrop-filter: blur(10px);
  cursor: pointer; user-select: none;
  transition: background var(--t-fast, 120ms ease),
              border-color var(--t-fast, 120ms ease),
              box-shadow var(--t-fast, 120ms ease);
  justify-content: center;
  box-shadow: 0 0 14px rgba(57,255,20,0.20);
}
/* Orb glow animation — pulse when idle */
@keyframes orbPulse {
  0%   { box-shadow: 0 0 10px rgba(57,255,20,0.25); }
  50%  { box-shadow: 0 0 22px rgba(57,255,20,0.50), 0 0 40px rgba(57,255,20,0.15); }
  100% { box-shadow: 0 0 10px rgba(57,255,20,0.25); }
}
#term-pill:not(.expanded) { animation: orbPulse 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  #term-pill:not(.expanded) { animation: none; }
}

/* Zone colour overrides for orb */
body[data-zone="real"]   #term-pill {
  border-color: rgba(220,38,38,0.55); background: rgba(220,38,38,0.14);
  box-shadow: 0 0 14px rgba(220,38,38,0.20);
}
body[data-zone="real"] #term-pill:not(.expanded) {
  animation-name: orbPulseRed;
}
@keyframes orbPulseRed {
  0%   { box-shadow: 0 0 10px rgba(220,38,38,0.25); }
  50%  { box-shadow: 0 0 22px rgba(220,38,38,0.50), 0 0 40px rgba(220,38,38,0.15); }
  100% { box-shadow: 0 0 10px rgba(220,38,38,0.25); }
}
body[data-zone="public"] #term-pill {
  border-color: rgba(0,229,255,0.55); background: rgba(0,229,255,0.12);
  box-shadow: 0 0 14px rgba(0,229,255,0.20);
}
body[data-zone="public"] #term-pill:not(.expanded) {
  animation-name: orbPulseCyan;
}
@keyframes orbPulseCyan {
  0%   { box-shadow: 0 0 10px rgba(0,229,255,0.25); }
  50%  { box-shadow: 0 0 22px rgba(0,229,255,0.50), 0 0 40px rgba(0,229,255,0.15); }
  100% { box-shadow: 0 0 10px rgba(0,229,255,0.25); }
}

/* The small orb interior — golden sphere icon */
.pill-orb {
  width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0%, #ffd27a 45%, #ff8a3f 90%);
  box-shadow: 0 0 10px rgba(255,210,140,0.65);
  flex-shrink: 0;
  pointer-events: none;
}

/* Chakra strip inside orb (7 tiny dots) */
.pill-strip {
  display: none; /* hidden in collapsed state */
  gap: 2.5px; align-items: center; margin-left: 4px;
}
.pill-strip .pck {
  width: 5px; height: 5px; border-radius: 50%; opacity: 0.80;
  box-shadow: 0 0 4px currentColor;
}

/* ── Expanded terminal panel ────────────────────────────────── */
/* When .expanded is added, pill morphs into the full panel     */
#term-pill.expanded {
  width: min(360px, calc(100vw - 24px));
  height: auto; border-radius: 12px;
  align-items: stretch; flex-direction: column;
  padding: 0; justify-content: flex-start;
  bottom: 18px; right: 18px;
  animation: none;
}
body[data-zone="real"] #term-pill.expanded {
  border-color: rgba(220,38,38,0.45);
  background: rgba(0,0,0,0.80);
  box-shadow: 0 0 24px rgba(220,38,38,0.20), inset 0 0 0 1px rgba(255,255,255,0.04);
}
body[data-zone="white"] #term-pill.expanded,
#term-pill.expanded {
  border-color: rgba(57,255,20,0.45);
  background: rgba(0,0,0,0.78);
  box-shadow: 0 0 24px rgba(57,255,20,0.18), inset 0 0 0 1px rgba(255,255,255,0.04);
}
body[data-zone="public"] #term-pill.expanded {
  border-color: rgba(0,229,255,0.45);
  background: rgba(0,0,0,0.80);
  box-shadow: 0 0 24px rgba(0,229,255,0.16), inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* When collapsed, hide everything except the orb */
#term-pill:not(.expanded) .term-head,
#term-pill:not(.expanded) .term-scroll,
#term-pill:not(.expanded) .term-form {
  display: none;
}
/* When expanded, hide the bare orb icon */
#term-pill.expanded .pill-orb-wrap { display: none; }

/* Centering wrapper for orb icon in collapsed state */
.pill-orb-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}

/* ── Terminal head (title bar) ───────────────────────────────── */
.term-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px; gap: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 9.5px; letter-spacing: 0.25em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #39ff14; /* default white zone */
  border-radius: 12px 12px 0 0;
  background: rgba(0,0,0,0.30);
}
body[data-zone="real"]   .term-head { color: #FF6B6B; border-bottom-color: rgba(255,107,107,0.20); }
body[data-zone="public"] .term-head { color: var(--cyan, #00e5ff); border-bottom-color: rgba(0,229,255,0.20); }

.term-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Chakra strip in the head */
.chakra-strip {
  display: inline-flex; gap: 4px; align-items: center;
}
.chakra-strip .ck {
  width: 7px; height: 7px; border-radius: 50%;
  box-shadow: 0 0 4px currentColor; opacity: 0.30;
  transition: opacity 200ms, box-shadow 200ms;
}
.chakra-strip .ck.active { opacity: 1; box-shadow: 0 0 10px currentColor; }
.ck.crown  { color: var(--crown);  background: var(--crown); }
.ck.brow   { color: var(--brow);   background: var(--brow); }
.ck.throat { color: var(--throat); background: var(--throat); }
.ck.heart  { color: var(--heart);  background: var(--heart); }
.ck.plexus { color: var(--plexus); background: var(--plexus); }
.ck.sacral { color: var(--sacral); background: var(--sacral); }
.ck.root   { color: var(--root);   background: var(--root); }

/* Minimise button */
.term-min {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; opacity: 0.65;
}
.term-min:hover { opacity: 1; background: rgba(255,255,255,0.08); }

/* ── Scroll area ─────────────────────────────────────────────── */
.term-scroll {
  padding: 6px 10px;
  font-family: var(--font-mono, monospace);
  font-size: 11px; line-height: 1.45;
  height: min(220px, 32vh); overflow-y: auto;
  white-space: pre-wrap; word-wrap: break-word;
  color: #E8F8FF;
}

/* Line types */
.ln-in  { white-space: pre-wrap; }
.ln-in::before  { content: "$ "; color: #39ff14; }
body[data-zone="real"]   .ln-in::before { color: #FF6B6B; }
body[data-zone="public"] .ln-in::before { color: var(--cyan, #00e5ff); }
.ln-out::before { content: "max: "; color: #ffd27a; }
.ln-out { color: #FFE7B4; }
.ln-sys { opacity: 0.60; color: rgba(255,255,255,0.55); }
.ln-err { color: #FF8A8A; }

/* ── Input form ──────────────────────────────────────────────── */
.term-form {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-radius: 0 0 12px 12px;
}
.term-form .prompt { font-size: 14px; color: #39ff14; }
body[data-zone="real"]   .term-form .prompt { color: #FF6B6B; }
body[data-zone="public"] .term-form .prompt { color: var(--cyan, #00e5ff); }

.term-form input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  font-family: var(--font-mono, monospace); font-size: 12px;
  color: #FFFFFF;
}
.term-form input::placeholder { color: rgba(255,255,255,0.30); }

/* Talk button (mic / PTT in the form row) */
.talk-btn {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: rgba(57,255,20,0.14); border: 1px solid rgba(57,255,20,0.45);
  backdrop-filter: blur(4px);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
  transition: background 80ms, transform 80ms;
  min-width: 32px; /* keep hit area clean */
}
.talk-btn:active { transform: scale(0.92); }
.talk-btn[data-active="true"] {
  background: rgba(57,255,20,0.38); border-color: #39ff14;
  box-shadow: 0 0 14px rgba(57,255,20,0.40);
}
body[data-zone="real"] .talk-btn { background: rgba(220,38,38,0.16); border-color: rgba(220,38,38,0.5); }
body[data-zone="real"] .talk-btn[data-active="true"] { background: rgba(220,38,38,0.40); border-color: #DC2626; }
body[data-zone="public"] .talk-btn { background: rgba(0,229,255,0.12); border-color: rgba(0,229,255,0.45); }
body[data-zone="public"] .talk-btn[data-active="true"] { background: rgba(0,229,255,0.35); border-color: var(--cyan); }

/* Send button */
.term-btn-send {
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-mono, monospace);
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  background: rgba(57,255,20,0.14); border: 1px solid rgba(57,255,20,0.45);
  color: #39ff14;
  transition: background var(--t-fast, 120ms ease);
  white-space: nowrap; min-height: 28px;
}
.term-btn-send:hover { background: rgba(57,255,20,0.26); }
body[data-zone="real"] .term-btn-send {
  background: rgba(220,38,38,0.14); border-color: rgba(220,38,38,0.45); color: #FFD27A;
}
body[data-zone="public"] .term-btn-send {
  background: rgba(0,229,255,0.12); border-color: rgba(0,229,255,0.45); color: var(--cyan, #00e5ff);
}