/* ============================================================================
   11TH HOUR — Custom styles & animations
   Tailwind handles 95% of layout; this file adds the radar / pulse motifs.
   ========================================================================= */

:root {
  --void:        #000000;
  --ash:         #0a0a0a;
  --bone:        #ededed;
  --whisper:     #6b6b6b;
  --signal:      #ff3b30;   /* the only chromatic accent  */
  --signal-dim:  #5a0a08;
}

html, body {
  background: var(--void);
  color: var(--bone);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The headline serif — only used for the few "emotional" lines  */
.serif {
  font-family: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  letter-spacing: -0.01em;
}

/* Subtle film grain over the entire page  */
.grain::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.55;
  mix-blend-mode: overlay;
  z-index: 50;
}

/* Caret blink for the countdown  */
.blink { animation: blink 1.1s steps(2,end) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Slow fade-in used when transitioning between states  */
.fade-in { animation: fade-in 700ms ease-out both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform:none; } }

/* ----- RADAR ----------------------------------------------------------- */
.radar {
  position: relative;
  width: min(70vmin, 520px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
     radial-gradient(circle at center, rgba(255,59,48,0.06) 0%, transparent 60%),
     repeating-radial-gradient(circle, rgba(255,255,255,0.04) 0 1px, transparent 1px 12%);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.radar::before, .radar::after {
  content:""; position:absolute; inset:0; border-radius:50%;
}
.radar::before {
  background: conic-gradient(from 0deg, rgba(255,59,48,0.0) 0deg, rgba(255,59,48,0.35) 30deg, rgba(255,59,48,0.0) 60deg);
  animation: sweep 3.6s linear infinite;
}
.radar::after {
  box-shadow: inset 0 0 80px rgba(255,59,48,0.08);
  pointer-events:none;
}
@keyframes sweep { to { transform: rotate(360deg); } }

.radar-ping {
  position:absolute; left:50%; top:50%;
  width: 14px; height: 14px; margin:-7px 0 0 -7px;
  border-radius:50%;
  background: var(--signal);
  box-shadow: 0 0 24px var(--signal);
}
.radar-ping::after {
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--signal);
  animation: ping 1.8s ease-out infinite;
}
@keyframes ping {
  0%   { transform: scale(1);   opacity: 0.9; }
  100% { transform: scale(14);  opacity: 0;   }
}

/* ----- TINY UTILITIES ------------------------------------------------- */
.divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent); }
.btn-ghost { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn-ghost:hover { background:#111; border-color:#222; }
.input-line {
  background: transparent;
  border: none;
  border-bottom: 1px solid #2a2a2a;
  transition: border-color .25s ease;
}
.input-line:focus { outline: none; border-bottom-color: var(--signal); }
.checkbox {
  appearance: none; -webkit-appearance:none;
  width: 16px; height: 16px;
  border: 1px solid #2a2a2a; background: transparent;
  display:inline-grid; place-content:center;
  cursor:pointer; transition: border-color .2s, background-color .2s;
}
.checkbox:checked { background: var(--signal); border-color: var(--signal); }
.checkbox:checked::after { content:""; width:6px; height:10px; border:solid #000; border-width:0 2px 2px 0; transform: rotate(45deg) translate(-1px,-1px); }

/* ----- CHAT BUBBLES --------------------------------------------------- */
.bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 14px;
  line-height: 1.45;
  word-wrap: break-word;
  font-size: 14px;
  animation: fade-in 200ms ease-out both;
}
.bubble.mine    { background:#1a1a1a; color:#fff;     align-self:flex-end;   border-bottom-right-radius:4px; }
.bubble.theirs  { background:#0d0d0d; color:#ededed; align-self:flex-start; border:1px solid #1a1a1a; border-bottom-left-radius:4px; }

/* Scrollbar  */
.scroll-stealth::-webkit-scrollbar { width: 6px; }
.scroll-stealth::-webkit-scrollbar-thumb { background:#1a1a1a; border-radius:3px; }
.scroll-stealth { scrollbar-width: thin; scrollbar-color:#1a1a1a transparent; }

/* Disabled state  */
.locked { filter: grayscale(1) brightness(.45); pointer-events:none; user-select:none; }