/* Mr Computer — custom CSS on top of Tailwind Play CDN (Cyber-Medical theme) */

:root {
  --bg: #0E1014;
  --panel: #16181F;
  --panel-2: #1C1F27;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.20);
  --red: #E63946;
  --red-hover: #FF4D5A;
  --cyan: #00F0FF;
  --gold: #FFD166;
  --muted: #A1A1AA;
  --muted-2: #71717A;
}

html { background: var(--bg); }
html, body { color: #E6E6EA; }
body {
  font-family: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(230,57,70,0.10), transparent 60%),
    radial-gradient(1000px 680px at 100% 0%, rgba(0,240,255,0.09), transparent 55%),
    linear-gradient(180deg, #14161C 0%, #0F1115 45%, #0C0D11 100%);
  background-attachment: fixed;
}

.font-display { font-family: 'Bricolage Grotesque', 'IBM Plex Sans', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; }

.text-gradient-red-cyan {
  background: linear-gradient(90deg, #FF4D5A 0%, #E63946 45%, #00F0FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
}
.text-gradient-red {
  background: linear-gradient(90deg, #FF6B74 0%, #E63946 55%, #C81E2A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
}

.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.card:hover { border-color: var(--line-strong); }

.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.25rem; border-radius:8px; font-weight:700; transition:all .15s ease; cursor:pointer; border:1px solid transparent; font-size:.95rem; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-hover); box-shadow: 0 0 28px rgba(230,57,70,.5); }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.2); }
.btn-outline:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-ghost { background: transparent; color: #E0E0E0; }
.btn-ghost:hover { color: #fff; background: rgba(255,255,255,.05); }
.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

input, select, textarea {
  background: #121419;
  border: 1px solid var(--line);
  color: #fff;
  border-radius: 8px;
  padding: .65rem .85rem;
  width: 100%;
  font-family: inherit;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,240,255,.15); }
label { font-size:.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-family: 'JetBrains Mono', monospace; }

/* Nav */
.nav-link { color:#D4D4D8; padding:.5rem .85rem; border-radius:6px; font-size:.9rem; }
.nav-link:hover { color:#fff; background: rgba(255,255,255,.06); }
.nav-link.active { color: var(--cyan); }

/* Chat */
.chat-msg { padding:.75rem 1rem; border-radius:10px; max-width: 82%; line-height:1.55; font-size:.92rem; white-space: pre-wrap; word-wrap: break-word; }
.chat-msg.user { background: var(--red); color:#fff; margin-left:auto; }
.chat-msg.assistant { background: var(--panel-2); color:#E0E0E0; border:1px solid var(--line); }

.pulse-dot { width:8px; height:8px; border-radius:999px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: pulse 1.6s ease-in-out infinite; display:inline-block; }
@keyframes pulse { 0%, 100% { opacity: .4; transform: scale(.9);} 50% { opacity: 1; transform: scale(1.1);} }

/* Utility */
.container-x { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 768px) { .container-x { padding: 0 3rem; } }

.hide-on-mobile { display: none; }
@media (min-width: 768px) { .hide-on-mobile { display: flex; } }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border:1px solid var(--line-strong); color:#fff;
  padding: .75rem 1rem; border-radius: 8px; z-index: 1000; font-size: .9rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.toast.error { border-color: var(--red); }
.toast.success { border-color: var(--cyan); }

/* Floating chat widget */
.fab {
  position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px;
  background: var(--red); color:#fff; border-radius: 999px; border: none;
  cursor: pointer; box-shadow: 0 8px 30px rgba(230,57,70,.5);
  display:flex; align-items:center; justify-content:center; z-index:100;
  transition: transform .15s ease;
}
.fab:hover { transform: scale(1.08); }
.fab-panel {
  position: fixed; right: 20px; bottom: 90px; width: min(380px, calc(100vw - 40px)); height: 520px;
  background: var(--panel); border:1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.6); z-index:100;
  display: none; flex-direction: column; overflow: hidden;
}
.fab-panel.open { display: flex; }

/* Star rating */
.stars { color: var(--gold); letter-spacing: .1em; font-size: .95rem; }


/* Same-day availability nudge */
.same-day-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .85rem; border-radius:999px;
  border:1px solid rgba(34,197,94,.35); background:rgba(34,197,94,.08); color:#4ade80;
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  transition:border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
}
.same-day-badge:hover { border-color:rgba(34,197,94,.6); background:rgba(34,197,94,.14); color:#86efac; transform:translateY(-1px); }
.pulse-dot.green { background:#22c55e; box-shadow:0 0 12px #22c55e; }