/* ── Miss Jade visual identity (v1 restoration + portal polish) ── */

.hidden {
  display: none !important;
}

:root {
  --jade-bubble: #1a1508;
  --jade-gold: #c9a84c;
  --jade-accent: #7c3aed;
  --user-bubble: #1e1830;
  --user-accent: #c9a0e8;
  --text-faint: #444450;
  --text-dim: #888890;
  --mood-playful: #f0a500;
  --mood-strict: #e05555;
  --mood-teasing: #b06ece;
  --mood-disappointed: #607090;
  --mood-pleased: #4caf82;
  --mood-cruel: #cc2244;
  --mood-warm: #e07a50;
  --mood-neutral: #888890;
  --radius-bubble: 18px;
}

/* Typography */
html {
  font-size: 16px;
}

html,
body,
.app,
.composer,
.composer input,
.composer button,
.header-btn,
.task-item,
.punishment-item {
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
}

@media (min-width: 900px) {
  html {
    font-size: 18px;
  }

  .bubble-text,
  .message,
  .bubble {
    font-size: 1.02rem;
    line-height: 1.5;
  }

  .composer input {
    font-size: 1rem;
  }

  .task-item,
  .punishment-item,
  .settings-dash-hint,
  .settings-hub-card-desc {
    font-size: 0.95rem;
  }

  .action-card-title {
    font-size: 1.05rem;
  }

  .action-card-desc,
  .action-text-input {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .action-type-badge,
  .action-proof-note {
    font-size: 0.82rem;
  }
}

.header-name,
.header-titles h1,
.login-card h2,
.onboarding-inner h2 {
  font-family: "Playfair Display", Georgia, serif;
}

/* Portal backgrounds */
html,
body {
  background: linear-gradient(180deg, #0f0f1a 0%, #050508 100%);
}

#login-overlay {
  background: #eef0f3;
}

#login-overlay::before {
  display: none;
}

.app {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(42, 16, 64, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(13, 42, 26, 0.25) 0%, transparent 50%),
    linear-gradient(180deg, #0f0f1a 0%, #050508 100%);
}

#dialogue-window {
  background:
    radial-gradient(
      ellipse 120% 80% at 50% -20%,
      color-mix(in srgb, var(--view-primary, var(--thread-primary, #c9a84c)) 8%, transparent) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 90% 60% at 80% 100%,
      color-mix(in srgb, var(--view-accent, var(--thread-accent, #7c3aed)) 5%, transparent) 0%,
      transparent 50%
    ),
    transparent;
}

/* ── Header ── */
#chat-container > header.chat-header {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: calc(12px + var(--safe-top)) 16px 14px;
  border-bottom: none;
  background: linear-gradient(
    180deg,
    rgba(22, 22, 38, 0.92) 0%,
    rgba(18, 18, 30, 0.78) 100%
  );
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
  gap: 12px;
}

.header-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.header-titles {
  min-width: 0;
}

.header-name {
  margin: 0;
  line-height: 1.15;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--thread-primary, var(--jade-gold));
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-name .ti-crown {
  font-size: 0.95rem;
  opacity: 0.9;
}

.header-status {
  margin: 3px 0 0;
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mood-neutral);
  transition: color 0.5s ease;
}

.outfit-label {
  margin: 2px 0 0;
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-dim);
}

/* Mood-driven header status colors */
.mood-playful .header-status { color: var(--mood-playful); }
.mood-strict .header-status { color: var(--mood-strict); }
.mood-teasing .header-status { color: var(--mood-teasing); }
.mood-disappointed .header-status { color: var(--mood-disappointed); }
.mood-pleased .header-status { color: var(--mood-pleased); }
.mood-cruel .header-status { color: var(--mood-cruel); }
.mood-warm .header-status { color: var(--mood-warm); }
.mood-neutral .header-status { color: var(--mood-neutral); }

.mood-offline .header-status {
  color: #7a7a8a;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.system-offline-indicator {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9aa0b4;
  background: rgba(120, 125, 145, 0.18);
  border: 1px solid rgba(140, 145, 165, 0.35);
}

.system-offline-indicator.hidden {
  display: none;
}

.mood-offline .avatar-glow,
.mood-offline .hero-avatar-ring.pulse {
  opacity: 0.35;
  animation: none;
}

.mood-playful .mood-dot { background: var(--mood-playful); }
.mood-strict .mood-dot { background: var(--mood-strict); }
.mood-teasing .mood-dot { background: var(--mood-teasing); }
.mood-disappointed .mood-dot { background: var(--mood-disappointed); }
.mood-pleased .mood-dot { background: var(--mood-pleased); }
.mood-cruel .mood-dot { background: var(--mood-cruel); }
.mood-warm .mood-dot { background: var(--mood-warm); }
.mood-neutral .mood-dot { background: var(--mood-neutral); }

.hero-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mood-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  z-index: 4;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  background: var(--mood-neutral);
  transition: background 0.5s ease;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.avatar-glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(201, 168, 108, 0.5) 0%,
    rgba(201, 168, 108, 0.14) 42%,
    transparent 70%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  filter: blur(2px);
}

.avatar-glow.active {
  opacity: 1;
  animation: avatarGlowPulse 5s ease-in-out infinite;
}

@keyframes avatarGlowPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.06); opacity: 0.95; }
}

.hero-avatar {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  border: none;
  box-shadow:
    0 0 0 2px rgba(201, 168, 108, 0.45),
    0 0 24px rgba(201, 168, 108, 0.22),
    0 8px 28px rgba(0, 0, 0, 0.55);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.hero-avatar:not(.hidden):hover {
  transform: scale(1.02);
}

.hero-avatar.hidden {
  display: none;
}

.hero-avatar-ring {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #3d3258 0%, #221c32 55%, #161222 100%);
  box-shadow:
    0 0 0 2px rgba(201, 168, 108, 0.28),
    0 8px 24px rgba(0, 0, 0, 0.45),
    inset 0 -8px 16px rgba(0, 0, 0, 0.35);
}

.hero-avatar-ring::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.hero-avatar-ring.hidden {
  display: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.header-lock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 52px;
}

.header-privacy-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.header-privacy-btn i {
  font-size: 1rem;
  line-height: 1;
}

.header-privacy-btn[aria-pressed="true"] {
  color: #e07070;
  border-color: rgba(224, 112, 112, 0.45);
  background: rgba(224, 112, 112, 0.12);
}

.lock-icon {
  font-size: 1.1rem;
  color: var(--thread-primary, var(--jade-gold));
  line-height: 1;
}

.lock-time {
  font-size: 0.62rem;
  color: var(--text-dim);
  text-align: right;
  line-height: 1.25;
  white-space: nowrap;
}

.lock-time.ready {
  color: var(--mood-pleased);
}

.lock-time.frozen {
  color: #88aaff;
}

.header-btn {
  border: none;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: background 0.2s ease, color 0.2s ease;
}

.header-btn:hover {
  background: rgba(255, 255, 255, 0.07);
}

.header-btn.active {
  background: rgba(201, 168, 108, 0.12);
  color: var(--accent);
}

.status-dot {
  border: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04);
}

.status-dot.live {
  background: #5cb87a;
  box-shadow:
    0 0 10px rgba(92, 184, 122, 0.55),
    0 0 0 2px rgba(92, 184, 122, 0.2);
  animation: breathe 2.8s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.18); }
}

#tasks-panel,
#punishments-panel {
  border-bottom: none;
  background: rgba(255, 255, 255, 0.03);
}

.task-item,
.punishment-item {
  border-top: none;
  background: rgba(255, 255, 255, 0.02);
}

/* ── Action Cards ── */
.action-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px 12px;
}

.action-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.action-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 6px;
}

.action-protocol-badge {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f0a8c0;
  background: rgba(240, 168, 192, 0.12);
  border: 1px solid rgba(240, 168, 192, 0.25);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 6px;
}

.action-due-badge {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #5cb87a;
  background: rgba(92, 184, 122, 0.12);
  border: 1px solid rgba(92, 184, 122, 0.28);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 6px;
}

.action-foundation-pill {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c9a86c;
  background: rgba(201, 168, 108, 0.14);
  border: 1px solid rgba(201, 168, 108, 0.38);
  border-radius: 4px;
  padding: 2px 7px;
  margin-left: 6px;
}

.action-type-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--thread-primary, var(--jade-gold));
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(201, 168, 76, 0.12);
}

.action-card.action-proof .action-type-badge { color: #e8c468; }
.action-card.action-journal .action-type-badge { color: #a78bfa; }
.action-card.action-reflection .action-type-badge { color: #7dd3fc; }
.action-card.action-yes-no .action-type-badge { color: var(--mood-pleased); }
.action-card.action-lines .action-type-badge { color: #f0abfc; }

.action-lines-phrase {
  margin: 0 0 8px;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--accent);
  line-height: 1.4;
}

.action-lines-progress {
  margin: 0 0 10px;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.action-lines-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.action-line-btn {
  min-width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.78rem;
  cursor: pointer;
}

.action-line-btn.confirmed {
  background: rgba(201, 168, 76, 0.2);
  border-color: var(--accent);
  color: var(--accent);
}

.action-lines-all-btn {
  margin-top: 8px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
}

.action-card-title {
  margin: 0 0 4px;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
}

.action-card-desc {
  margin: 0 0 10px;
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.action-fail {
  border: none;
  background: rgba(224, 112, 112, 0.12);
  color: #e07070;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
}

.action-proof-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.action-proof-btn .ti {
  font-size: 1rem;
  color: var(--thread-primary, var(--jade-gold));
}

.action-proof-note {
  margin: 8px 0 0;
  font-size: 0.72rem;
  color: var(--mood-pleased);
}

.action-vision-note {
  margin: 6px 0 0;
  padding: 8px 10px;
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.25);
  border-left: 2px solid rgba(232, 196, 104, 0.45);
  border-radius: 0 8px 8px 0;
}

.action-text-input {
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  font-family: "DM Sans", sans-serif;
  font-size: 0.88rem;
  line-height: 1.45;
  resize: vertical;
  min-height: 72px;
}

.action-text-input:focus {
  outline: none;
  border-color: rgba(201, 168, 108, 0.35);
}

.action-submit-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: #1a1a2e;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
}

.action-yesno {
  display: flex;
  gap: 8px;
}

.action-yes,
.action-no {
  flex: 1;
  padding: 9px 12px;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.84rem;
  cursor: pointer;
}

.action-yes {
  background: rgba(76, 175, 130, 0.2);
  color: var(--mood-pleased);
  border: 1px solid rgba(76, 175, 130, 0.35);
}

.action-no {
  background: rgba(224, 112, 112, 0.15);
  color: #e07070;
  border: 1px solid rgba(224, 112, 112, 0.3);
}

/* Proof upload modal */
.proof-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.proof-modal.hidden {
  display: none;
}

.proof-modal-card {
  width: 100%;
  max-width: 360px;
  padding: 22px 20px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.proof-modal-card h3 {
  margin: 0 0 6px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.15rem;
  color: var(--thread-primary, var(--jade-gold));
}

.proof-modal-sub {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.35;
}

.proof-modal-hint {
  margin: 0 0 16px;
  font-size: 0.75rem;
  color: var(--text-dim);
  opacity: 0.85;
  line-height: 1.35;
}

.proof-file-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text);
}

.proof-file-label input {
  display: none;
}

.proof-file-label .ti {
  font-size: 1.6rem;
  color: var(--thread-primary, var(--jade-gold));
}

.proof-file-name {
  margin: 10px 0 0;
  min-height: 1.2em;
  font-size: 0.75rem;
  color: var(--text-dim);
  text-align: center;
}

.proof-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.proof-btn-cancel,
.proof-btn-upload {
  flex: 1;
  padding: 11px 14px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}

.proof-btn-cancel {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: var(--text-dim);
}

.proof-btn-upload {
  border: none;
  background: var(--accent);
  color: #1a1a2e;
}

.proof-btn-upload:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Stats bar ── */
.stats-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: color-mix(in srgb, var(--view-primary, #c9a84c) 4%, rgba(12, 12, 20, 0.9));
  border-top: 1px solid color-mix(in srgb, var(--view-primary, #c9a84c) 8%, transparent);
  font-size: 0.68rem;
  color: var(--text-dim);
  flex-wrap: wrap;
}

.stats-bar .stat-icon {
  display: none;
  font-size: 1rem;
  line-height: 1;
  cursor: default;
}

.stats-bar .stat-icon.visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stats-bar .stat-chaster {
  font-size: 1.05rem;
  color: var(--text-dim);
}

.stats-bar .stat-chaster.chaster-warn {
  color: var(--mood-playful);
}

.stats-bar .stat-chaster.chaster-urgent {
  color: var(--mood-strict);
  animation: chaster-stat-pulse 2.4s ease-in-out infinite;
}

@keyframes chaster-stat-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.stats-bar .stat-icon.actionable {
  cursor: pointer;
  filter: drop-shadow(0 0 4px rgba(120, 200, 255, 0.85));
}

/* ── Chat shell — footer/composer pinned, messages scroll independently ── */
#appShell,
#chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

#appShell > header.chat-header,
#appShell > .footer-nav,
#chat-container > header.chat-header,
#chat-container > .stats-bar,
#chat-container > .composer,
#chat-container > .footer-nav {
  flex-shrink: 0;
}

#dialogue-window {
  flex: 1;
  min-height: 0;
}

/* ── Messages ── */
.messages {
  gap: 8px;
  padding: 18px 14px 22px;
}

.date-divider {
  text-align: center;
  font-size: 0.68rem;
  color: var(--text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 10px 0 6px;
  width: 100%;
}

.msg-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  animation: messageFloatIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.06s;
}

@keyframes messageFloatIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.msg-row.user-row {
  flex-direction: row;
  justify-content: flex-end;
}

.msg-row.persona-row {
  flex-direction: row;
  justify-content: flex-start;
}

.msg-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: min(78%, 520px);
}

.msg-row.user-row .msg-group {
  align-items: flex-end;
}

.msg-avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.35);
  align-self: flex-end;
  margin-bottom: 4px;
}

/* Jade / persona avatars — left of message bubbles */
.msg-row.persona-row .msg-avatar {
  margin-right: 0;
  margin-left: 0;
}

.msg-avatar.fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent);
  background: linear-gradient(145deg, #3a3050, #2a2238);
}

.msg-avatar.user-avatar {
  object-fit: contain;
  background: rgba(10, 10, 18, 0.9);
  box-shadow:
    0 0 0 1px rgba(130, 165, 220, 0.25),
    0 4px 12px rgba(36, 53, 86, 0.4);
}

/* Bubble hierarchy */
.bubble {
  padding: 10px 14px;
  border-radius: var(--radius-bubble);
  line-height: 1.6;
  font-size: 0.95rem;
  word-break: break-word;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.bubble.jade,
.jade-message {
  background: var(--jade-bubble);
  border-left: 3px solid var(--jade-gold);
  border-radius: 18px 18px 18px 4px;
  text-align: left;
}

.bubble.user,
.user-message {
  background: var(--user-bubble);
  border-right: 3px solid var(--user-accent);
  border-radius: 18px 18px 4px 18px;
  text-align: right;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.bubble.friend {
  border-bottom-left-radius: 4px;
  border-radius: 18px 18px 18px 4px;
}

.bubble.friend-mia {
  background: #2a0a0a;
  border-left: 3px solid #e57373;
}

.bubble.friend-sophie {
  background: #1a0a2e;
  border-left: 3px solid #a78bfa;
}

.bubble.friend-danielle {
  background: #071a16;
  border-left: 3px solid #2dd4bf;
}

.bubble.friend-vera {
  background: #1f0a14;
  border-left: 3px solid #e8a0b4;
}

.bubble.friend-kate {
  background: #101820;
  border-left: 3px solid #7eb0d4;
}

.bubble.thinking {
  font-style: italic;
  opacity: 0.88;
  min-height: 2.2rem;
  display: flex;
  align-items: center;
}

.bubble.thinking:not(.friend) {
  background: rgba(255, 255, 255, 0.03);
}

.thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 1rem;
}

.thinking-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jade-gold, #c9b86c);
  animation: thinkingDot 1.2s infinite ease-in-out;
}

.bubble.friend-mia.thinking .thinking-dots span { background: #e57373; }
.bubble.friend-sophie.thinking .thinking-dots span { background: #a78bfa; }
.bubble.friend-danielle.thinking .thinking-dots span { background: #2dd4bf; }
.bubble.friend-vera.thinking .thinking-dots span { background: #e8a0b4; }
.bubble.friend-kate.thinking .thinking-dots span { background: #7eb0d4; }

.bubble.user.thinking .thinking-dots span { background: var(--user-accent); }

.thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes thinkingDot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.bubble.pending {
  opacity: 0.85;
}

.friend-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.friend-label.jade { color: #c9a84c; }
.friend-label.kate { color: #7eb0d4; }
.friend-label.mia { color: #e57373; }
.friend-label.sophie { color: #a78bfa; }
.friend-label.danielle { color: #2dd4bf; }
.friend-label.vera { color: #e8a0b4; }

.friend-label .ti {
  font-size: 0.72rem;
}

.msg-time {
  font-size: 0.62rem;
  color: var(--text-faint);
  padding: 0 4px;
  margin-top: 2px;
}

.msg-row.user-row .msg-time {
  text-align: right;
}

/* Listen — media chip */
.bubble .audio-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 5px 12px 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: background 0.2s ease, transform 0.2s ease;
}

.bubble .audio-control.play-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

.bubble .audio-control .play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a2e;
  flex-shrink: 0;
  border: none;
  box-shadow: none;
  transition: transform 0.15s ease;
}

.bubble .audio-control.play-btn:hover .play-icon {
  transform: scale(1.06);
}

.bubble .audio-control .play-icon svg {
  width: 9px;
  height: 9px;
  margin-left: 1px;
}

.bubble .audio-control:not(.play-btn) {
  cursor: default;
  opacity: 0.9;
}

.bubble .audio-control.playing .play-icon {
  animation: playIconPulse 1.4s ease-in-out infinite;
}

@keyframes playIconPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 108, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(201, 168, 108, 0); }
}

/* Composer */
.composer {
  position: relative;
  z-index: 20;
  border-top: none;
  background: color-mix(in srgb, var(--view-primary, #c9a84c) 5%, rgba(10, 10, 18, 0.9));
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow:
    0 -1px 0 color-mix(in srgb, var(--view-primary, #c9a84c) 9%, transparent),
    0 -12px 40px rgba(0, 0, 0, 0.35);
}

.composer input {
  border: none;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  border-radius: 14px;
}

.composer input:focus {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px color-mix(in srgb, var(--view-primary, var(--thread-primary, #c9a84c)) 22%, transparent);
}

.composer button {
  border-radius: 14px;
  background: var(--thread-primary, var(--accent));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--thread-primary, var(--accent)) 35%, transparent);
}

/* Login card */
.login-card {
  position: relative;
  z-index: 1;
}

.login-card h2 {
  font-weight: 600;
}

/* Responsive */
@media (max-width: 420px) {
  .hero-avatar-wrap,
  .hero-avatar,
  .hero-avatar-ring {
    width: 56px;
    height: 56px;
  }

  .hero-avatar {
    object-position: center 20%;
  }

  .msg-avatar {
    width: 30px;
    height: 30px;
  }

  .msg-group {
    max-width: 86%;
  }

  .bubble {
    font-size: 0.92rem;
    padding: 9px 12px;
  }

  .header-name {
    font-size: 0.98rem;
  }

  .header-lock {
    min-width: 44px;
  }
}

/* ── Dark scrollbars (global) ── */
* {
  scrollbar-width: thin;
  scrollbar-color: #5a5a72 #141420;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: #141420;
}

*::-webkit-scrollbar-thumb {
  background: #4a4a62;
  border-radius: 4px;
  border: 2px solid #141420;
}

*::-webkit-scrollbar-thumb:hover {
  background: #6e6e8a;
}

*::-webkit-scrollbar-corner {
  background: #141420;
}

.header-crown.hidden {
  display: none;
}

/* ── Footer navigation ── */
.footer-nav {
  position: sticky;
  bottom: 0;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 8px 10px calc(8px + var(--safe-bottom));
  background: rgba(12, 12, 22, 0.96);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 40;
  margin-top: auto;
}

.footer-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 2px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.footer-tab i {
  font-size: 1.15rem;
}

.footer-tab:hover,
.footer-tab.active {
  color: var(--accent);
  background: rgba(167, 139, 250, 0.1);
}

.footer-nav.footer-nav--locked .footer-tab:disabled {
  opacity: 0.32;
  pointer-events: none;
  cursor: not-allowed;
}

.footer-nav.footer-nav--locked .footer-tab:disabled:hover {
  background: transparent;
  color: var(--text-muted);
}

.footer-tab .tab-pulse {
  display: none !important;
}

.footer-tab.tab-has-notify {
  animation: footer-tab-shell-pulse 1.35s ease-in-out infinite;
}

.footer-tab.tab-has-notify i {
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--pulse-color, #c9a84c) 65%, transparent));
}

@keyframes footer-tab-shell-pulse {
  0%, 100% {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pulse-color, #c9a84c) 35%, transparent);
    background: color-mix(in srgb, var(--pulse-color, #c9a84c) 5%, transparent);
    color: color-mix(in srgb, var(--pulse-color, #c9a84c) 75%, var(--text-muted));
  }
  50% {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--pulse-color, #c9a84c) 70%, transparent),
      0 0 12px 2px color-mix(in srgb, var(--pulse-color, #c9a84c) 35%, transparent);
    background: color-mix(in srgb, var(--pulse-color, #c9a84c) 14%, transparent);
    color: var(--pulse-color, #c9a84c);
  }
}

/* ── Drawer overlay ── */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.drawer-backdrop.hidden {
  display: none;
}

.drawer-panel {
  width: 100%;
  max-width: 720px;
  max-height: 78dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
  animation: drawer-slide-up 0.22s ease-out;
}

@keyframes drawer-slide-up {
  from { transform: translateY(100%); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}

.drawer-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.drawer-header h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent);
}

.drawer-close {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.drawer-body,
.view-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px calc(16px + var(--safe-bottom));
}

.drawer-empty {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 24px 12px;
}

.drawer-body .punishment-item,
.view-scroll .punishment-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(58, 58, 92, 0.45);
}

.drawer-body .punishment-reason,
.view-scroll .punishment-reason {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text);
}

.drawer-body .punishment-meta,
.view-scroll .punishment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.drawer-body .punishment-meta .type,
.view-scroll .punishment-meta .type {
  color: #e07070;
  text-transform: capitalize;
}

/* Settings sections */
.settings-section {
  margin-bottom: 20px;
}

.settings-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.settings-section-header h3 {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.settings-section-header button {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.7rem;
  cursor: pointer;
}

.settings-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(58, 58, 92, 0.45);
}

.settings-list-item span {
  font-size: 0.85rem;
}

.settings-list-item .item-actions {
  display: flex;
  gap: 6px;
}

.settings-list-item .item-actions button {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.68rem;
  cursor: pointer;
}

.inventory-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.inventory-tab {
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.7rem;
  cursor: pointer;
}

.inventory-tab.active {
  border-color: var(--accent);
  color: var(--accent);
}

.inventory-weather {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.inventory-item.inactive {
  opacity: 0.55;
}

.games-placeholder {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
}

.games-placeholder i {
  font-size: 2rem;
  color: var(--accent-dim);
  display: block;
  margin-bottom: 12px;
}

.daily-game-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.daily-game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.daily-game-type {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.daily-game-status {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.daily-game-rules {
  margin: 0 0 12px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text);
}

.daily-game-progress {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 6px;
}

.daily-game-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.2s ease;
}

.daily-game-progress-label {
  margin: 0 0 10px;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.daily-game-penalty {
  margin: 0 0 12px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted);
}

/* Item form modal (Settings add/edit) */
.item-form-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.7);
}

.item-form-modal.hidden {
  display: none;
}

.item-form-card {
  width: min(100%, 400px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: grid;
  gap: 10px;
}

.item-form-card h3 {
  font-size: 0.95rem;
  color: var(--accent);
  margin: 0;
}

.item-form-card input,
.item-form-card select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.82rem;
}

.item-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.item-form-actions button {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}

.item-form-actions button.primary {
  border: none;
  background: var(--accent);
  color: #1a1a2e;
  font-weight: 600;
}