/* ==============================
   1. TOKENS
   ============================== */
/* =====================================================
   COLOR PALETTE — Single source of truth
   =====================================================
   All colors in the app MUST use these variables.
   Never use raw rgba/hex values outside this block.
   ===================================================== */
:root {
  /* ── Accent ─────────────────────────────────────── */
  --accent:                rgba(247, 26, 152, 1);
  --accent-light:          rgba(248, 124, 248, 1);
  --accent-secondary:      rgba(32, 10, 61, 1);
  --accent-secondary-light: rgba(186, 7, 252, 1);
  --accent-50:             rgba(247, 26, 152, 0.5);
  --accent-secondary-50:   rgba(32, 10, 61, 0.5);

  /* ── White ──────────────────────────────────────── */
  --white:    rgba(255, 255, 255, 1);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-50: rgba(255, 255, 255, 0.5);

  /* ── Black ──────────────────────────────────────── */
  --black:    rgba(0, 0, 0, 1);
  --black-10: rgba(0, 0, 0, 0.1);
  --black-50: rgba(0, 0, 0, 0.5);

  /* ── Success (green) ───────────────────────────── */
  --success:    rgba(40, 167, 69, 1);
  --success-50: rgba(40, 167, 69, 0.5);

  /* ── Danger (red) ──────────────────────────────── */
  --danger:    rgba(239, 68, 68, 1);
  --danger-50: rgba(239, 68, 68, 0.5);

  /* ── Info ───────────────────────────────────────── */
  --info:    rgba(126, 244, 245, 1);
  --info-50: rgba(126, 244, 245, 0.5);

  /* ── Warning ────────────────────────────────────── */
  --warning:    rgba(255, 193, 7, 1);
  --warning-50: rgba(255, 193, 7, 0.5);

  /* ── Neutral / Gray ────────────────────────────── */
  --neutral:    rgba(173, 181, 189, 1);

  /* ── Gradients ──────────────────────────────────── */
  --secondary-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary-light) 100%);

  /* ── Aliases ───────────────────────────────────── */
  --glass-border: var(--accent-50);
  --focus-ring:   var(--accent-50);

  /* ── Typography ─────────────────────────────────── */
  --font-family-sans: 'Nunito Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-family-mono: 'Consolas', 'Monaco', monospace;

  /* ── Font sizes ─────────────────────────────────── */
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.85rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.25rem;
  --font-size-2xl:  1.75rem;
  --font-size-3xl:  2rem;
  --font-size-4xl:  2.5rem;

  /* ── Font weights ───────────────────────────────── */
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  /* ── Line heights ───────────────────────────────── */
  --line-height-tight:   1.2;
  --line-height-base:    1.5;

  /* ── Interactive state tokens ──────────────────── */
  --focus-ring-width: var(--border-width-thick);
  --disabled-opacity: 0.5;
  --active-scale:     0.97;
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;

  /* ── Blur ────────────────────────────────────────── */
  --blur-heavy: blur(20px);
  --blur-light: blur(6px);

  /* ── Spacing ────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;

  /* ── Borders ────────────────────────────────────── */
  --border-width-thin:   1px;
  --border-width-base:   1.5px;
  --border-width-thick:  2px;
  --border-width-xl:     3px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-pill:   22px;
  --radius-circle: 50%;

  /* ── Shadows ──────────────────────────────────────── */
  --shadow-chat-frame:
    0 25px 50px -12px var(--black-50),
    0 0 30px var(--accent-secondary-50);

  /* ── Z-index ─────────────────────────────────────── */
  --z-overlay:  10;
  --z-dropdown: 1000;
  --z-modal:    9000;
  --z-toast:    9500;
  --z-loading:  10000;
}


/* ==============================
   2. RESET / BASE
   ============================== */

/* ─── 2.1 RESET ─── */
* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--white-10);
}

/* ─── 2.2 INACTIVE STATES ─── */
/* Universal inactive states — single source of truth for all "inactive" visuals.
   Three tiers:
   1. Cannot interact — fully blocked (disabled buttons, locked steps)
   2. Visually muted, still interactive — clickable but de-emphasised (archived items)
   3. Read-only — focusable/selectable but not editable (form fields) */

/* 1. Cannot interact */
:disabled,
[disabled],
.disabled {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

/* 2. Visually muted but still interactive */
.archived {
  opacity: var(--disabled-opacity);
}

/* 3. Read-only form fields */
input:read-only,
textarea:read-only {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}

/* ─── 2.3 NORMALIZE ─── */
button,
select,
input,
textarea {
  font: inherit;
}

label {
  color: var(--white-50);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
}

/* ─── 2.4 SCROLLBAR ─── */
::-webkit-scrollbar {
  width: var(--space-2);
  height: var(--space-2);
}

::-webkit-scrollbar-track {
  background: var(--white-10);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-secondary) 100%);
  border: var(--border-width-thick) solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent-secondary-light) 100%);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* ─── 2.5 BODY ─── */
body {
  background: url('../assets/background.png') no-repeat center center fixed;
  background-size: cover;
  height: 100dvh;
  overflow: hidden;
  margin: 0;
  font-family: var(--font-family-sans);
  color: var(--white);
}

/* ─── 2.6 KEYFRAMES ─── */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(var(--fade-from, 10px));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* ==============================
   3. ATOMS
   ============================== */
/* ─── 3.1 DEFAULT BUTTON ─── */
/* Universal button reset — all buttons get transparent bg + no border.
   Classes with their own visual treatment (circle-btn, emoji-picker-button,
   image-fullview-close) override these as needed. */
button,
input[type='button'],
input[type='submit'] {
  background: transparent;
  border: none;
  color: var(--white);
}

/* Notched-corner border via ::before pseudo-element.
   Any button class with its own visual treatment must be added to the
   :not() list below to prevent the notched border from leaking through. */
button:where(:not(
  .circle-btn,
  .emoji-picker-button,
  .nav-link
)),
input[type='button'],
input[type='submit'] {
  --ch: 14px;
  padding: var(--space-2) var(--space-4);
  width: fit-content;
  white-space: nowrap;
  position: relative;
}

button:where(:not(
  .circle-btn,
  .emoji-picker-button,
  .nav-link
))::before,
input[type='button']::before,
input[type='submit']::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  --bw: var(--border-width-base);
  --c: var(--accent-50);
  transition: all var(--transition-fast);
  background:
    linear-gradient(var(--c), var(--c)) top / 100% var(--bw) no-repeat,
    linear-gradient(var(--c), var(--c)) right / var(--bw) 100% no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / calc(100% - var(--ch)) var(--bw) no-repeat,
    linear-gradient(var(--c), var(--c)) left top / var(--bw) calc(100% - var(--ch)) no-repeat,
    linear-gradient(45deg, transparent calc(50% - var(--bw) * 0.707), var(--c) calc(50% - var(--bw) * 0.707), var(--c) calc(50% + var(--bw) * 0.707), transparent calc(50% + var(--bw) * 0.707)) left bottom / var(--ch) var(--ch) no-repeat;
}

/* Default button hover: border brightens */
button:where(:not(
  .circle-btn,
  .emoji-picker-button,
  .nav-link
)):hover::before {
  --c: var(--accent);
}


/* ─── 3.2 DEFAULT BUTTON: FILLED VARIANT ─── */
/* Light: semi-transparent accent, dark text → solid accent on hover */
.btn-light {
  --btn-bg: var(--accent-50);
  --btn-bg-hover: var(--accent);
  --btn-color: var(--black);
  --btn-color-hover: var(--white);
  background: var(--btn-bg);
  color: var(--btn-color);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--ch) 100%, 0 calc(100% - var(--ch)));
}

.btn-light:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-color-hover);
}

.btn-light::before {
  background: none;
}


/* ─── 3.3 CIRCLE BUTTON ─── */
.circle-btn {
  background: var(--accent-50);
  border: var(--border-width-base) solid var(--accent);
  border-radius: var(--radius-circle);
  color: var(--accent-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  min-width: var(--space-6);
  min-height: var(--space-6);
  flex-shrink: 0;
  padding: 0;
  font-size: var(--font-size-sm);
  transition: background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.circle-btn::before {
  display: none;
}

.circle-btn:hover {
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent-50);
  color: var(--white);
}

.circle-btn i {
  transition: transform var(--transition-fast);
}

.circle-btn:hover i {
  transform: scale(1.25);
}


/* ─── 3.4 CIRCLE BUTTON: EXPANDED ─── */
.circle-btn.circle-expanded {
  width: auto;
  min-width: 0;
  flex: 1;
  border-radius: var(--radius-pill);
  padding: 0 var(--space-4);
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  display: flex;
}

/* ─── 3.5 TAB (auth only) ─── */
.nav { display: flex; flex-wrap: wrap; padding-left: 0; margin: 0; list-style: none; }
.nav-item { list-style: none; }

.auth-tabs {
  border-bottom: var(--border-width-thin) solid var(--accent-secondary-50);
}

.auth-tabs .nav-link {
  flex: 1;
  padding: var(--space-3);
  text-align: center;
  color: var(--white-50);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.auth-tabs .nav-link:hover {
  color: var(--white);
  background: var(--accent-secondary-50);
}

.auth-tabs .nav-link.active {
  color: var(--white);
  background: var(--accent-secondary-50);
  border-bottom: var(--border-width-thick) solid var(--accent);
}


/* ─── 3.6 FORMS ─── */
.form-label { display: inline-block; margin-bottom: var(--space-2); }

.form-select,
.form-control {
  display: block;
  width: 100%;
  background: var(--accent-secondary-50);
  border: var(--border-width-thin) solid var(--accent-50);
  color: var(--white);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-select:hover,
.form-control:hover {
  border-color: var(--accent);
}

.form-select:focus,
.form-control:focus {
  background: var(--white);
  border-color: var(--accent);
  color: var(--black);
  box-shadow: 0 0 10px var(--accent-50);
  outline: none;
}

.form-select {
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
}

.form-select option {
  background: var(--accent-secondary);
  color: var(--white);
}

.form-control {
  padding: var(--space-3) var(--space-4);
}

.form-control:focus {
  caret-color: var(--black);
}

.form-control::placeholder {
  color: var(--white-50);
}

/* ─── 3.7 FOCUS & PRESS ─── */
button:focus:not(:focus-visible) {
  box-shadow: none;
  outline: none;
}


button:active:not(:disabled) {
  transform: scale(var(--active-scale));
  filter: brightness(1.1);
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

/* Keyboard focus ring — visible only for keyboard users */
button:focus-visible,
a:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* ─── 3.8 VOICE BUTTON ─── */
.btn-voice {
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

@keyframes pulse-recording {
  0%, 100% { box-shadow: 0 0 0 0 var(--danger-50); }
  50%      { box-shadow: 0 0 0 10px transparent; }
}

.btn-voice.recording {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--white);
  animation: pulse-recording 1.5s ease-in-out infinite;
}

.btn-voice.recording:hover {
  background: var(--danger);
}

.btn-mic-settings {
  font-size: var(--font-size-xs);
}

/* ==============================
   4. MOLECULES
   ============================== */

/* ─── 4.1 SHARED MOLECULES ─── */

.glass-panel {
  backdrop-filter: var(--blur-heavy);
  position: relative;
  overflow: hidden;
  padding: var(--space-3);
}


/* Section header: flex row with label on the left, actions on the right */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* ─── 4.2 MESSAGES ─── */

.message {
  display: flex;
  margin-bottom: var(--space-2);
  animation: fadeIn var(--transition-slow);
  align-items: flex-start;
}

.message.user {
  justify-content: flex-end;
}


/* Content wrapper holds timestamp + bubble */
.message-content-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 70%;
  position: relative;
}

.message.user .message-content-wrapper {
  align-items: flex-end;
}


/* Timestamp */
.message-timestamp {
  font-size: var(--font-size-xs);
  color: var(--black);
  margin-bottom: var(--space-1);
  padding: 0 var(--space-1);
  user-select: none;
}


.message-bubble {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  word-wrap: break-word;
  line-height: var(--line-height-base);
  background: var(--white);
  color: var(--black);
}

.message.user .message-bubble {
  border-bottom-right-radius: 0;
}

.message.ai .message-bubble {
  border-top-left-radius: 0;
}

/* Avatar: only shown on first AI message of a response.
   Spacer keeps alignment when avatar is not shown — must match size. */
.message-avatar,
.message-avatar-spacer {
  --avatar-size: var(--space-6);
  width: var(--avatar-size);
  min-width: var(--avatar-size);
  margin-right: var(--space-2);
}

.message-avatar {
  height: var(--avatar-size);
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  background: var(--secondary-gradient);
  color: var(--white);
  overflow: hidden;
}

.message-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.typing-indicator span {
  width: var(--space-2);
  height: var(--space-2);
  background: var(--accent);
  border-radius: var(--radius-circle);
  animation: bounce 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: -0.16s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0;
}

/* System message styles */
.message.system-message {
  justify-content: center;
  margin: var(--space-4) 0;
}

.system-message-content {
  background: var(--accent-secondary-50);
  border: var(--border-width-thin) solid var(--accent-secondary-50);
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--black);
  font-size: var(--font-size-base);
  text-align: center;
}

.system-message-content i {
  color: var(--accent);
  font-size: var(--font-size-lg);
}

/* Chat media (topic images/video/audio in messages)
   TODO: testing if these two are needed — uncomment or remove after visual check */
/* .uploaded-media-message .message-bubble { padding: var(--space-2); } */
/* .uploaded-media-message { margin-top: var(--space-2); } */

.uploaded-media-chat-img,
.uploaded-media-chat-video {
  max-width: 100%;
  max-height: 250px;
  object-fit: contain;
}

.uploaded-media-chat-audio {
  width: 100%;
  min-width: 250px;
  max-width: 300px;
  height: 40px;
  margin-top: var(--space-2);
}

/* Voice Message in Chat */
.message.voice-message .message-bubble {
  position: relative;
}

.message-bubble.voice-streaming,
.message-bubble.voice-final {
  background: var(--accent-secondary-50);
}

.message-bubble.voice-streaming {
  border: var(--border-width-thin) solid var(--accent-50);
}

/* ─── 4.3 NOTIFICATIONS ─── */
.toast-container { position: fixed; bottom: 0; right: 0; padding: var(--space-4); z-index: var(--z-toast); }
.toast {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  max-width: 350px;
  color: var(--white);
}
.toast-body { flex: 1; }
.toast-close { margin-left: var(--space-3); }

.toast[data-type="success"] { background-color: var(--success); }
.toast[data-type="error"]   { background-color: var(--danger); }
.toast[data-type="warning"] { background-color: var(--warning); color: var(--black); }
.toast[data-type="info"]    { background-color: var(--info); }

/* ─── 4.4 MIC SELECTOR POPUP ─── */
.mic-selector-popup {
  position: absolute;
  bottom: calc(100% + var(--space-3));
  right: 0;
  width: 280px;
  background: var(--accent-secondary);
  border: var(--border-width-thick) solid var(--accent);
  box-shadow:
    0 10px 40px var(--black-50),
    0 0 15px var(--accent-secondary-50);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition-slow);
  z-index: var(--z-dropdown);
}

.mic-selector-popup.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mic-popup-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width-thin) solid var(--white-10);
}

.mic-popup-header h6 {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--white-50);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mic-popup-content {
  padding: var(--space-4);
}

.mic-popup-content label {
  display: block;
  font-size: var(--font-size-xs);
}

.mic-select {
  margin-bottom: var(--space-4);
}

.mic-audio-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-width-thin) solid var(--white-10);
}

.mic-setting-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  padding: var(--space-2);
  transition: background var(--transition-normal);
}

.mic-setting-toggle:hover {
  background: var(--white-10);
}

.mic-setting-toggle input[type='checkbox'] {
  width: var(--space-4);
  height: var(--space-4);
  accent-color: var(--accent);
  cursor: pointer;
}

.mic-setting-toggle span {
  font-size: var(--font-size-sm);
  color: var(--white-50);
}

/* ─── 4.5 VOICE INDICATOR ─── */
.voice-indicator {
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-2);
  color: var(--danger);
}

.voice-text {
  color: var(--white-50);
}

/* ─── 4.6 CHAT LIST ITEM ─── */
.chat-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-base) solid var(--accent);
  background: var(--accent-secondary-50);
  backdrop-filter: var(--blur-heavy);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.chat-list-item:hover {
  border-color: var(--accent-50);
  box-shadow: 0 0 12px var(--accent-secondary-50);
}

.chat-list-avatar {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  border: var(--border-width-base) solid var(--accent);
  object-fit: cover;
  object-position: top center;
  flex-shrink: 0;
}

.chat-list-info {
  flex: 1;
  min-width: 0;
}

.chat-list-name {
  font-weight: var(--font-weight-bold);
  color: var(--white);
  font-size: var(--font-size-base);
  margin-bottom: var(--space-1);
}

.chat-list-preview {
  color: var(--white-50);
  font-size: var(--font-size-sm);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chat-list-time {
  color: var(--white-50);
  font-size: var(--font-size-xs);
  flex-shrink: 0;
}

/* ==============================
   5. ORGANISMS
   ============================== */

/* ─── 5.1 HEADER ─── */
.header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--accent-secondary-50);
}

/* Row 2: 50/50 grid (left = character, right = future use) */
.header-bottom-row {
  display: grid;
  grid-template-columns: 25% 75%;
  gap: clamp(var(--space-2), 2%, var(--space-3));
  align-items: start;
}

.header-char-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.char-actions-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.char-actions-row .btn-light {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.char-info-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.char-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--white);
}

.character-display {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top center;
}

.chat-title-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  -webkit-text-fill-color: var(--black);
}


/* ==============================
   6. PAGES / TEMPLATES
   ============================== */

/* ─── 6.0 PAGE FRAME ─── */
.page-frame {
  width: 30%;
  margin: 0 auto;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page-frame.hidden {
  display: none;
}

.page-frame-glass {
  backdrop-filter: var(--blur-heavy);
}

.page-frame-solid {
  background: var(--accent-secondary);
  border: var(--border-width-thick) solid var(--accent-50);
}

/* ─── 6.1 CHAT ─── */
.chat-header {
  background: var(--black-10);
}

.chat-body-wrapper {
  background: var(--black-50);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  min-height: 0;
  padding: var(--space-4);
  overflow-y: auto;
}

.chat-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--black-50);
  animation: fadeIn var(--transition-slow);
}

.chat-placeholder-icon {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-4);
}

.chat-placeholder-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}

.chat-input-area {
  padding: var(--space-3) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.chat-input-area.chat-disabled {
  display: none;
}

/* Row 1: Main input row */
.input-row-main {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  position: relative;
}

.input-group-custom {
  flex: 1;
}

.message-input {
  font-size: var(--font-size-sm);
  resize: none;
  min-height: 40px;
  max-height: 150px;
}

.emoji-picker-container {
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: var(--z-dropdown);
  display: none;
}

.emoji-picker-container.show {
  display: block;
}

/* Row 2: Affinity + mic settings */
.input-row-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.mic-settings-wrapper {
  position: relative;
}

/* ─── 6.2 CHAT LIST ─── */
.chat-list-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ─── 6.3 AUTH ─── */
.auth-screen {
  justify-content: center;
}

/* Session preload: hide auth screen, show loading spinner (toggled by inline script before paint) */
html.has-session .auth-screen {
  display: none;
}

/* Fullscreen overlay (shared base for loading screen + landscape blocker) */
.fullscreen-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-loading);
  background: url('../assets/background.png') no-repeat center center fixed;
  background-size: cover;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  color: var(--white);
  font-size: var(--font-size-lg);
}

.app-loading-screen {
  transition: opacity var(--transition-slow);
  pointer-events: all;
}

html.has-session .app-loading-screen {
  display: flex;
}

.app-loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.fullscreen-overlay h1,
.fullscreen-overlay i {
  font-size: var(--font-size-4xl);
  color: var(--accent);
}

.fullscreen-overlay h1,
.app-loading-spinner {
  margin-bottom: var(--space-4);
}

.fullscreen-overlay p {
  color: var(--neutral);
}

.auth-card {
  width: 100%;
}

.auth-card-logo,
.auth-tabs {
  margin-bottom: var(--space-5);
}

.auth-card-logo {
  text-align: center;
}

.auth-card-logo h1 {
  background: var(--secondary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.auth-card-logo select {
  width: auto;
  display: inline-block;
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
}

.auth-form {
  display: none;
}

.auth-form.active {
  display: block;
}

.turnstile-container {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.auth-error,
.auth-success {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
  display: none;
  background: var(--feedback-50);
  border: var(--border-width-thin) solid var(--feedback-50);
  color: var(--feedback);
}

.auth-error.show,
.auth-success.show {
  display: block;
}

.auth-error   { --feedback: var(--danger);  --feedback-50: var(--danger-50); }
.auth-success { --feedback: var(--success); --feedback-50: var(--success-50); }

.password-requirements {
  font-size: var(--font-size-xs);
  color: var(--white-50);
  margin-top: var(--space-2);
}

/* ─── 6.4 TURN COUNTDOWN ─── */
.turn-countdown {
  font-size: var(--font-size-xs);
  color: var(--white-50);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1px;
  user-select: none;
}

/* ─── 6.5 STORY OBJECTIVE ─── */
.story-objective {
  background: var(--accent-secondary-50);
  color: var(--white);
  font-size: var(--font-size-base);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  margin-top: var(--space-2);
}

/* ==============================
   7. UTILITIES
   ============================== */

/* ─── 7.1 SPACING ─── */
.mt-4 { margin-top: var(--space-5) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-3 { margin-bottom: var(--space-4) !important; }
.mb-4 { margin-bottom: var(--space-5) !important; }

/* ─── 7.2 TEXT ─── */
.text-muted { color: var(--white-50) !important; }
.text-danger { color: var(--danger) !important; }
.text-center { text-align: center !important; }

/* ─── 7.3 VISIBILITY & STATE ─── */
.role-hidden { display: none !important; }
.pulse { animation: pulse 1s ease-in-out infinite; }


/* ==============================
   8. OVERRIDES / RESPONSIVE
   ============================== */

/* ─── 8.1 LANDSCAPE (MOBILE) ─── */
@media (orientation: landscape) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  #landscapeBlocker {
    display: flex;
  }
}

/* ─── 8.2 CHAT (MOBILE) ─── */
@media (max-width: 768px) {
  .page-frame {
    width: 100%;
  }

  .chat-container {
    font-size: var(--font-size-sm);
  }

  .chat-title-logo {
    height: 36px;
  }

  .message-content-wrapper {
    max-width: 85%;
  }

  .message-avatar {
    font-size: var(--font-size-xs);
  }

  .circle-btn {
    width: var(--space-5);
    height: var(--space-5);
    min-width: var(--space-5);
    min-height: var(--space-5);
    font-size: var(--font-size-xs);
  }

  .header-top-row {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .chat-list-avatar {
    width: var(--space-6);
    height: var(--space-6);
  }
}