/* ============================================================
   CODSWORTH — Pip-Boy Terminal UI
   Fallout 4 · Mr. Handy Companion
   ============================================================ */

/* ── Variables ── */
:root {
  --green:       #00ff41;
  --green-dim:   #00cc33;
  --green-dark:  #003300;
  --green-bg:    #010d01;
  --green-panel: #021a02;
  --amber:       #ffb000;
  --amber-dim:   #cc8800;
  --border:      #00ff41;
  --glow:        0 0 6px #00ff41, 0 0 14px #00cc33;
  --glow-mild:   0 0 4px #00ff41;
  --font-mono:   'Courier New', 'Lucida Console', monospace;
  --scanline-h:  2px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: var(--font-mono);
  color: var(--green);
}

/* ── CRT scanline overlay ── */
.scanline {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.18) 3px,
    rgba(0,0,0,0.18) 4px
  );
  animation: scanRoll 12s linear infinite;
}
@keyframes scanRoll {
  0%   { background-position: 0 0; }
  100% { background-position: 0 300px; }
}

/* ── Outer pip frame ── */
.pip-frame {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--green-bg);
  border: 2px solid var(--border);
  box-shadow: inset 0 0 40px rgba(0,255,65,0.04), var(--glow);
  overflow: hidden;
  animation: screenFlicker 8s infinite;
}
@keyframes screenFlicker {
  0%, 97%, 100% { opacity: 1; }
  98%            { opacity: 0.93; }
  99%            { opacity: 1; }
}

/* ── Header ── */
.pip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  border-bottom: 2px solid var(--border);
  background: var(--green-panel);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-shadow: var(--glow-mild);
  text-transform: uppercase;
  flex-shrink: 0;
}
.header-center {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-shadow: var(--glow);
}
.pip-logo { font-size: 1.4rem; animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.label { font-size: 0.68rem; }

/* Status dot */
.status-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 5px currentColor;
}
.status-dot.idle     { background: var(--green-dim); color: var(--green-dim); }
.status-dot.thinking { background: var(--amber);     color: var(--amber);     animation: dotPulse 0.6s infinite; }
.status-dot.speaking { background: var(--green);     color: var(--green);     animation: dotPulse 0.4s infinite; }
@keyframes dotPulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }

/* Blink cursor */
.blink { animation: blink 1.1s step-start infinite; }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } }

/* ── Main layout ── */
.pip-main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── LEFT: Avatar panel ── */
.avatar-panel {
  width: 200px;
  min-width: 200px;
  border-right: 2px solid var(--border);
  background: var(--green-panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  gap: 10px;
  overflow-y: auto;
  flex-shrink: 0;
}
.avatar-title {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--green-dim);
  width: 100%;
  text-align: center;
  padding-bottom: 4px;
  color: var(--green-dim);
}

/* ── CSS Mr. Handy Avatar ── */
.mr-handy {
  width: 130px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4px 0;
}
.handy-body { display: flex; flex-direction: column; align-items: center; position: relative; }

/* Dome */
.handy-dome {
  width: 96px; height: 68px;
  border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 40% 35%, #014a01 0%, #012801 60%, #010f00 100%);
  border: 2px solid var(--green);
  box-shadow: var(--glow-mild), inset 0 0 10px rgba(0,255,65,0.15);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 10px;
}
.handy-eye {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #cfffcf, var(--green) 45%, var(--green-dark) 100%);
  border: 1.5px solid var(--green);
  box-shadow: 0 0 8px var(--green), 0 0 20px var(--green);
  transition: box-shadow 0.15s;
}
.eye-center { width: 22px; height: 22px; margin-top: -4px; }
.mr-handy.speaking .handy-eye { box-shadow: 0 0 16px var(--green), 0 0 32px #00ff41cc; animation: eyePulse 0.3s infinite; }
@keyframes eyePulse { 0%,100% { opacity:1; } 50% { opacity:0.6; } }
.handy-mouth {
  position: absolute;
  bottom: 10px;
  left: 50%; transform: translateX(-50%);
  width: 30px; height: 5px;
  border-radius: 2px;
  background: var(--green-dark);
  border: 1px solid var(--green-dim);
}
.mr-handy.speaking .handy-mouth { animation: mouthTalk 0.18s step-start infinite; }
@keyframes mouthTalk {
  0%,100% { height: 5px; }
  33%      { height: 9px; }
  66%      { height: 2px; }
}

/* Collar */
.handy-collar {
  width: 80px; height: 14px;
  background: linear-gradient(to bottom, #013d01, #010e00);
  border: 1.5px solid var(--green);
  border-radius: 3px;
  box-shadow: var(--glow-mild);
  margin-top: -2px;
}

/* Main orb body */
.handy-orb {
  width: 78px; height: 82px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 38% 32%, #015601 0%, #012001 65%, #010800 100%);
  border: 2px solid var(--green);
  box-shadow: var(--glow-mild), inset 0 0 18px rgba(0,255,65,0.1);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative;
  margin-top: 2px;
}
.handy-orb-highlight {
  position: absolute;
  top: 14px; left: 18px;
  width: 22px; height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  transform: rotate(-30deg);
}
.handy-plate {
  font-size: 0.44rem;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: var(--green-dim);
  text-shadow: none;
}

/* Thruster jet */
.handy-thruster {
  width: 28px; height: 22px;
  background: linear-gradient(to bottom, #012801, #010e00);
  border: 1.5px solid var(--green);
  border-radius: 4px 4px 8px 8px;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 2px;
  margin-top: 2px;
  box-shadow: var(--glow-mild);
}
.thrust-flame {
  width: 12px; height: 10px;
  border-radius: 50% 50% 70% 70%;
  background: radial-gradient(ellipse, var(--green), transparent 70%);
  opacity: 0.6;
  animation: flamePulse 0.4s ease-in-out infinite alternate;
}
@keyframes flamePulse {
  from { transform: scaleY(0.7) scaleX(0.9); opacity: 0.4; }
  to   { transform: scaleY(1.2) scaleX(1.1); opacity: 0.8; }
}

/* Arms */
.handy-arm {
  position: absolute;
  top: 88px;
  display: flex; flex-direction: column; align-items: center;
  font-size: 0.8rem;
}
.arm-left  { left: -22px; transform: rotate(-15deg); }
.arm-right { right: -22px; transform: rotate(15deg); }
.arm-seg {
  width: 6px; height: 30px;
  background: linear-gradient(to bottom, var(--green-dim), var(--green-dark));
  border: 1px solid var(--green-dim);
  border-radius: 3px;
}
.arm-claw { margin-top: 3px; filter: drop-shadow(0 0 3px var(--green)); }

/* ── Stats block ── */
.stat-block { width: 100%; font-size: 0.58rem; display: flex; flex-direction: column; gap: 5px; }
.stat-row { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.stat-label { color: var(--green-dim); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.stat-val { color: var(--green); font-size: 0.6rem; }
.bar-wrap { flex: 1; height: 5px; background: var(--green-dark); border: 1px solid var(--green-dim); border-radius: 2px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--green); box-shadow: 0 0 4px var(--green); border-radius: 2px; }

/* TTS toggle */
.tts-toggle-wrap { width: 100%; margin-top: auto; }
.tts-btn {
  width: 100%;
  font-size: 0.65rem;
  padding: 6px 0;
  letter-spacing: 0.12em;
}
.tts-btn.muted { color: var(--green-dim); border-color: var(--green-dim); box-shadow: none; }

/* ── RIGHT: Chat section ── */
.chat-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 14px;
  border-bottom: 2px solid var(--border);
  background: var(--green-panel);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ── Chat log ── */
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--green-dim) var(--green-dark);
}
.chat-log::-webkit-scrollbar { width: 6px; }
.chat-log::-webkit-scrollbar-track { background: var(--green-dark); }
.chat-log::-webkit-scrollbar-thumb { background: var(--green-dim); border-radius: 3px; }

/* Message bubbles */
.msg { display: flex; flex-direction: column; max-width: 78%; gap: 4px; }
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.codsworth { align-self: flex-start; align-items: flex-start; }

.msg-label {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}
.msg.user .msg-label     { color: var(--amber-dim); }
.msg.codsworth .msg-label { color: var(--green-dim); }

.msg-bubble {
  padding: 9px 13px;
  border-radius: 2px;
  font-size: 0.85rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg.user .msg-bubble {
  background: #1a0d00;
  border: 1.5px solid var(--amber);
  color: var(--amber);
  text-shadow: 0 0 4px var(--amber-dim);
  border-radius: 4px 0 4px 4px;
}
.msg.codsworth .msg-bubble {
  background: #001a00;
  border: 1.5px solid var(--green);
  color: var(--green);
  text-shadow: var(--glow-mild);
  border-radius: 0 4px 4px 4px;
}

/* Typing cursor on last codsworth bubble */
.typing-cursor::after {
  content: '▌';
  animation: blink 0.7s step-start infinite;
}

/* ── Chat input area ── */
.chat-input-area {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 2px solid var(--border);
  background: var(--green-panel);
  flex-shrink: 0;
}
.input-prefix {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--green-dim);
  white-space: nowrap;
  padding-bottom: 6px;
}
.pip-textarea {
  flex: 1;
  background: #000e00;
  border: 1.5px solid var(--green-dim);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 7px 10px;
  resize: none;
  outline: none;
  caret-color: var(--green);
  text-shadow: var(--glow-mild);
  border-radius: 2px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pip-textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 10px rgba(0,255,65,0.25);
}
.pip-textarea::placeholder { color: var(--green-dark); }

/* ── Generic pip buttons ── */
.pip-btn {
  background: var(--green-dark);
  border: 1.5px solid var(--green);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 14px;
  cursor: pointer;
  text-shadow: var(--glow-mild);
  border-radius: 2px;
  transition: background 0.1s, box-shadow 0.1s, color 0.1s;
}
.pip-btn:hover:not(:disabled) {
  background: #005500;
  box-shadow: 0 0 12px rgba(0,255,65,0.5);
}
.pip-btn:active:not(:disabled) { background: #007700; }
.pip-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.transmit-btn { min-width: 90px; align-self: flex-end; }
.reset-btn    { font-size: 0.65rem; padding: 4px 10px; }

/* ── Footer ── */
.pip-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 16px;
  border-top: 2px solid var(--border);
  background: var(--green-panel);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-dim);
  flex-shrink: 0;
}

/* ── Responsive: narrow screens ── */
@media (max-width: 680px) {
  .avatar-panel { width: 150px; min-width: 150px; }
  .handy-dome   { width: 76px; height: 54px; }
  .handy-orb    { width: 62px; height: 66px; }
}