/* ================================
   Theme Tokens (Trevor-core)
   ================================ */
:root {
  /* Palette */
  --bg-0: hsl(222 47% 6%);
  --bg-1: hsl(222 45% 9%);
  --surface: hsl(222 36% 12% / 0.85);
  --border: hsl(220 20% 98% / 0.08);
  --text: hsl(210 20% 96%);
  --text-dim: hsl(215 14% 68%);
  --text-muted: hsl(215 12% 55%);
  --shadow: 0 10px 30px rgba(0,0,0,.45);

  /* Accent (indigo/teal) */
  --accent-1: hsl(246 82% 65%);
  --accent-2: hsl(186 72% 52%);
  --accent:   hsl(246 82% 65%);
  --accent-ring: hsl(246 82% 65% / .35);

  /* Safe areas (iOS) */
  --inset-top:    env(safe-area-inset-top, 0px);
  --inset-bottom: env(safe-area-inset-bottom, 0px);
  --inset-left:   env(safe-area-inset-left, 0px);
  --inset-right:  env(safe-area-inset-right, 0px);
}

/* ================================
   Reset / Base
   ================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: auto;
  min-height: 100vh;    /* fallback */
  min-height: 100dvh;   /* modern dynamic viewport */
  background-color: hsl(222 47% 6%); /* prevent white rubber-band */
}

@supports (height: 100svh) {
  html, body { min-height: 100svh; } /* newer iOS */
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 10% -10%, var(--bg-1) 0%, transparent 60%),
    radial-gradient(1000px 700px at 120% 20%, hsl(220 55% 10% / .45) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-0), hsl(220 50% 7%));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Layout */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0; /* card handles its margin/safe-area */
}

/* ================================
   Layout: Container & Header
   ================================ */
.container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  width: min(720px, 92vw);
  text-align: center;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px) saturate(105%);
  -webkit-backdrop-filter: blur(10px) saturate(105%);

  /* Respect notches/home indicator */
  margin:
    max(8px, calc(var(--inset-top) + 2px))
    max(12px, var(--inset-right))
    max(8px, calc(var(--inset-bottom) + 2px))
    max(12px, var(--inset-left));
}

.header { margin-bottom: 1.5rem; }

.title {
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.1;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: .4rem;
}

.subtitle {
  color: var(--text-muted);
  font-size: 1rem;
  font-style: italic;
}

.date {
  color: var(--text-dim);
  font-size: .9rem;
  margin: .75rem 0 1.25rem;
}

/* ================================
   Image
   ================================ */
.image-container {
  margin: 1.5rem 0 1.75rem;
  position: relative;
}

.capybara-image {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 28px rgba(0,0,0,.38);
  transition: transform .25s ease, box-shadow .25s ease;

  /* polished glass & edge highlight */
  position: relative;
  box-shadow: 0 10px 32px rgba(0,0,0,.45);
  outline: 1px solid hsl(220 20% 98% / .10);
  outline-offset: -1px;
}

.capybara-image:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 38px rgba(0,0,0,.48);
}

.image-placeholder {
  width: 100%;
  height: 420px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, hsl(220 15% 18% / .85), hsl(220 15% 14% / .85)),
    repeating-linear-gradient(90deg, hsl(220 15% 22% / .15) 0 2px, transparent 2px 6px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1.05rem;
}

/* ================================
   Quote
   ================================ */
.quote-container {
  margin: 1.5rem 0;
  padding: 1.1rem 1.2rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, hsl(246 82% 65% / .10), hsl(246 82% 65% / .06));

  /* glassier variant */
  background: linear-gradient(180deg, hsl(246 82% 65% / .12), hsl(220 30% 20% / .14));
  border: 1px solid hsl(220 20% 98% / .10);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / .06),
    0 8px 24px rgba(0,0,0,.35);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
}

.quote {
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  line-height: 1.6;
  font-style: italic;
  color: var(--text);
  margin-bottom: .35rem;
}

.quote-author {
  color: var(--text-dim);
  font-size: .92rem;
}

/* ================================
   Controls & Buttons
   ================================ */
.controls {
  margin-top: 1.4rem;
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
}

  .btn {
    background: hsl(222 30% 16%) !important;
    background-image: none !important; /* kill any leftover gradients */
    color: var(--text);
    border: 1px solid hsl(220 20% 98% / .12);
    padding: .72rem 1.2rem;
    border-radius: 12px;
    font-size: .98rem;
    font-weight: 600;
    letter-spacing: .2px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, opacity .15s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,.18);
    backdrop-filter: blur(0.5px);
    -webkit-backdrop-filter: blur(0.5px);
    -webkit-appearance: none;
    appearance: none;
    text-shadow: none;
  }
  .btn:hover {
    transform: translateY(-1px);
    background: hsl(222 28% 18%) !important;
    background-image: none !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.22);
  }
  .btn:active {
    transform: translateY(0);
    background: hsl(222 28% 15%) !important;
    background-image: none !important;
    box-shadow: 0 3px 8px rgba(0,0,0,.18);
  }
  .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-ring);
  }
  .btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  .btn.btn--alt {
    background: hsl(222 30% 16%) !important;
    color: var(--text-dim);
    border: 1px solid hsl(220 20% 98% / .18);
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: none !important;
    text-shadow: none;
  }
  .btn.btn--alt:hover {
    background: hsl(220 20% 98% / .06);
    color: var(--text);
    transform: translateY(-1px);
  }
  .btn.btn--alt:active {
    background: hsl(220 20% 98% / .10);
    transform: translateY(0);
  }
  .btn.btn--alt:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-ring);
    outline: none;
  }

/* ================================
   Inline Loading Message (optional)
   ================================ */
.loading {
  display: none;
  color: var(--accent);
  font-style: italic;
  margin-top: .9rem;
}

/* ================================
   Status Pill
   ================================ */
.status {
  position: fixed;
  right: max(12px, var(--inset-right));
  bottom: max(12px, var(--inset-bottom));
  background: hsl(220 35% 10% / .8);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .5rem .75rem;
  border-radius: 999px;
  font-size: .82rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: .5rem;
  transform: translateY(1px);
  box-shadow: 0 0 0 2px hsl(0 0% 0% / .25);
}

.status-online  { background-color: #22c55e; }
.status-offline { background-color: #ef4444; }

/* ================================
   History strip (earlier generations)
   ================================ */
.history {
  margin-top: 1.25rem;
  text-align: left;
}

.history-title {
  color: var(--text-dim);
  font-size: .85rem;
  letter-spacing: .3px;
  margin-bottom: .55rem;
}

.history-strip {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  padding-bottom: .35rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.history-thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: hsl(222 30% 16%);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.history-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.history-thumb:hover {
  transform: translateY(-1px);
  border-color: var(--accent-ring);
  box-shadow: 0 6px 14px rgba(0,0,0,.28);
}

.history-thumb:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

@media (max-width: 600px) {
  .history-thumb { width: 72px; height: 72px; }
}

/* ================================
   Effects / Animations
   ================================ */
.fade-in { animation: fadeIn .5s ease-in; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Full-screen loading overlay (JS toggles display to flex) */
.loading-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.35);
  z-index: 9999;
}

.loading-card {
  padding: 1.5rem 2rem;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  text-align: center;
}

.spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 5px solid #ddd;
  border-top-color: #000;
  animation: spin 1s linear infinite;
  margin: 0 auto .75rem;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ================================
   Responsive
   ================================ */
@media (max-width: 600px) {
  .container {
    border-radius: 14px;
    width: min(720px, 94vw);
    padding: 1.1rem; /* slightly tighter on small screens */
  }
  .image-container { margin: 1.1rem 0 1.2rem; }
  .image-placeholder { height: 320px; }
  .title { font-size: 1.6rem; }
  .quote { font-size: 1.05rem; }
  .controls { flex-direction: column; }
  .btn { width: 200px; }
}

/* Optional: slightly bigger card on tall phones */
@media (max-width: 600px) and (min-height: 750px) {
  .container { width: min(760px, 96vw); }
}

/* Optional: more full-bleed feel on very small screens */
@media (max-width: 480px) {
  .capybara-image { border-radius: 12px; }
}