/* ═══════════════════════════════════════════════════════════
   style.css — Train Timer Messenger — Modern Dark UI
   ═══════════════════════════════════════════════════════════ */

/* ── RESET & BASE ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Deep Messenger Dark Theme */
  --bg:            #0d1117;
  --surface:       #161b22;
  --surface-2:     #1c2333;
  --surface-3:     #21262d;
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);

  /* London Brand */
  --tube-blue:   #1a56db;
  --tube-blue-2: #1e40af;
  --tube-red:    #c8102e;
  --tube-gold:   #f59e0b;

  /* Text */
  --text:        #e6edf3;
  --text-2:      #8b949e;
  --text-3:      #484f58;

  /* State */
  --online:  #3fb950;
  --mention: #58a6ff;
  --danger:  #f85149;

  /* Adaptive Shadows */
  --shadow-float: 0 4px 16px rgba(0,0,0,0.3);
  --shadow-heavy: 0 12px 40px rgba(0,0,0,0.5);
  --shadow-frame: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  --overlay-bg: rgba(13,17,23,0.8);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.4);

  /* Pattern Opacity Dynamic Tokens */
  --pattern-opacity-strong: 0.04;
  --pattern-opacity-subtle: 0.02;

  /* Fonts */
  --font-body:    'Inter', system-ui, sans-serif;
  --font-display: 'Oswald', sans-serif;

  /* Radius */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-full: 999px;
}

[data-theme="light"] {
  --bg:            #f0f2f5;
  --surface:       #ffffff;
  --surface-2:     #f8f9fa;
  --surface-3:     #e9ecef;
  --border:        rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.14);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.1);
  --text:        #1c1e21;
  --text-2:      #65676b;
  --text-3:      #b0b3b8;
  --mention: #0a66c2;
  --shadow-float: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-heavy: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-frame: 0 12px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.06);
  --overlay-bg: rgba(0,0,0,0.4);
  --pattern-opacity-strong: 0.06;
  --pattern-opacity-subtle: 0.03;
}

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  font-size: 14px;
  line-height: 1.5;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: var(--radius-full); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }

/* ── BACKGROUND ORBS ── */
.bg-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: float 20s ease-in-out infinite alternate;
  will-change: transform;
  contain: strict;
}
.orb-1 { width: 400px; height: 400px; background: rgba(26,86,219,0.25); top: -150px; left: -150px; }
.orb-2 { width: 500px; height: 500px; background: rgba(30,64,175,0.15); bottom: -200px; right: -150px; animation-delay: -7s; }
.orb-3 { width: 250px; height: 250px; background: rgba(200,16,46,0.12); top: 50%; left: 50%; transform: translate(-50%,-50%); animation-delay: -14s; }
[data-theme="light"] .orb-1 { background: rgba(26,86,219,0.07); }
[data-theme="light"] .orb-2 { background: rgba(30,64,175,0.05); }
[data-theme="light"] .orb-3 { background: rgba(200,16,46,0.03); }
@keyframes float {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(30px,30px) scale(1.05); }
}

/* ═══════════════════════════════════════════════════════════
   AUTH SCREENS
   ═══════════════════════════════════════════════════════════ */
.screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 2000;
  padding: 20px;
}

.auth-card {
  position: relative; z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  width: 100%; max-width: 380px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
  animation: slideUp 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
}
[data-theme="light"] .auth-card { box-shadow: 0 20px 60px rgba(0,0,0,0.15); }

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

.auth-logo { display: flex; justify-content: center; margin-bottom: 28px; }

.roundel {
  position: relative; width: 160px; height: 48px;
  display: flex; align-items: center; justify-content: center;
}
.roundel::before {
  content: ''; position: absolute;
  width: 48px; height: 48px;
  border: 4px solid var(--tube-red); border-radius: 50%;
  left: 50%; transform: translateX(-50%);
  box-shadow: 0 0 20px rgba(200,16,46,0.4);
}
.roundel-bar {
  position: relative; z-index: 1;
  background: var(--tube-blue); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  letter-spacing: 2px; padding: 4px 16px; border-radius: 2px;
  text-transform: uppercase;
  box-shadow: 0 2px 12px rgba(26,86,219,0.5);
}

.auth-title {
  font-size: 22px; font-weight: 700; text-align: center;
  color: var(--text); margin-bottom: 6px;
}
.auth-subtitle {
  font-size: 13px; color: var(--text-2); text-align: center;
  margin-bottom: 28px;
}

.input-group { margin-bottom: 16px; }
.input-group label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-2); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.input-group input {
  width: 100%; padding: 11px 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); color: var(--text);
  font-family: var(--font-body); font-size: 14px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input-group input:focus {
  border-color: var(--tube-blue);
  box-shadow: 0 0 0 3px rgba(26,86,219,0.2);
}
.input-group input::placeholder { color: var(--text-3); }

.password-wrapper { position: relative; }
.password-wrapper input { padding-right: 44px; }
.password-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--text-3);
  padding: 4px; transition: color 0.2s;
  z-index: 2;
}
.password-toggle:hover { color: var(--text-2); }

.auth-error {
  font-size: 13px; color: var(--danger);
  background: rgba(248,81,73,0.1); border: 1px solid rgba(248,81,73,0.2);
  border-radius: var(--radius-sm); padding: 8px 12px;
  margin-bottom: 12px; text-align: center;
}

.btn-primary {
  width: 100%; padding: 12px;
  background: linear-gradient(135deg, var(--tube-blue), var(--tube-blue-2));
  color: #fff; border: none; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 14px rgba(26,86,219,0.4);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(26,86,219,0.5); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff; border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Profile Setup */
.setup-avatar-wrap {
  position: relative; width: 90px; height: 90px;
  margin: 0 auto 24px; border-radius: 50%;
  background: var(--surface-2); border: 2px solid var(--border);
  cursor: pointer; overflow: visible;
}
#setup-avatar-preview {
  width: 90px; height: 90px; border-radius: 50%; object-fit: cover;
}
#setup-avatar-placeholder {
  width: 90px; height: 90px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); background: var(--surface-2);
}
.avatar-edit-btn {
  position: absolute; bottom: 0; right: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--tube-blue); color: #fff;
  border: 2px solid var(--surface); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.avatar-edit-btn:hover { background: var(--tube-blue-2); }

.photo-options {
  display: flex; gap: 8px; margin-top: 8px; margin-bottom: 22px;
}
.photo-opt-btn {
  flex: 1; padding: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-2);
  font-size: 12px; font-family: var(--font-body);
  cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  outline: none;
}
.photo-opt-btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }
.photo-opt-btn:focus-visible {
  border-color: var(--tube-blue);
  box-shadow: 0 0 0 2px rgba(26,86,219,0.25);
}

.profile-action-row {
  display: flex; gap: 10px; margin-top: 10px; width: 100%;
}
.btn-secondary {
  flex: 1; padding: 12px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  color: var(--text-2); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
  outline: none;
}
.btn-secondary:hover { background: var(--surface-3); color: var(--text); border-color: var(--text-2); }
.btn-secondary:focus-visible {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
}

/* ═══════════════════════════════════════════════════════════
   MAIN APP LAYOUT
   ═══════════════════════════════════════════════════════════ */
#app {
  display: flex; flex-direction: column;
  height: 100vh;
  height: 100dvh; overflow: hidden;
  max-width: 480px; margin: 0 auto;
  position: relative;
}

/* ── TOP BAR ── */
#top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  height: 56px; flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 100;
}

.top-bar-left { display: flex; align-items: center; gap: 10px; }
.roundel-mini {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2.5px solid var(--tube-red);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(200,16,46,0.25);
  font-size: 28px;
  background: var(--surface-2);
  line-height: 1;
  overflow: hidden;
}
.top-bar-info { display: flex; flex-direction: column; }
.top-bar-title { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.2; }
.typing-header-text { font-size: 11px; color: var(--tube-blue); font-style: italic; }

.top-bar-right { display: flex; align-items: center; gap: 6px; }

.icon-btn-round {
  width: 32px; height: 32px; border-radius: 50%;
  background: none; border: none; cursor: pointer;
  color: var(--text-2); display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: background 0.2s, color 0.2s;
}
.icon-btn-round:hover { background: var(--surface-2); color: var(--text); }

.top-bar-avatar-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-2); border: 2px solid var(--border);
  cursor: pointer; overflow: hidden; transition: border-color 0.2s;
  padding: 0;
}
.top-bar-avatar-btn:hover { border-color: var(--tube-blue); }
#top-bar-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── TIMER BAR (Stacked layout by default to guarantee 100% responsiveness and no cuts) ── */
#timer-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative; z-index: 90;
}

#timer-bar-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

#timer-display {
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 36px);
  font-weight: 700; line-height: 1; letter-spacing: 1px;
  color: var(--text);
  transition: transform 0.15s cubic-bezier(0.175,0.885,0.32,1.275);
}
#timer-display.zoom { transform: scale(1.06); }
#timer-display.running { color: var(--online); text-shadow: 0 0 20px rgba(63,185,80,0.3); }
#timer-display.urgent  { color: var(--tube-gold); text-shadow: 0 0 20px rgba(245,158,11,0.4); animation: pulse-urgent 1s ease-in-out infinite; }
@keyframes pulse-urgent { 0%,100% { opacity:1; } 50% { opacity:0.7; } }

.timer-sub-row {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: right;
}
.timer-dot {
  display: none; /* Hidden as items are now stacked vertically */
}

#timer-bar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 2px;
}

.timer-input-row { display: flex; align-items: center; gap: 6px; }
.timer-input-row label {
  font-size: 11px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.5px;
}

/* Hide default browser number input arrows/spinners for a super clean messenger input */
.timer-input-row input::-webkit-outer-spin-button,
.timer-input-row input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.timer-input-row input {
  width: 32px; padding: 5px; text-align: center;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  outline: none; transition: border-color 0.2s;
  -moz-appearance: textfield; /* Hide in Firefox too */
}
.timer-input-row input:focus { border-color: var(--tube-blue); }
.timer-input-row input:disabled { opacity: 0.4; }

.dispatch-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 12px; border: none; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--tube-red), #991b1b);
  color: #fff; font-family: var(--font-body); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  cursor: pointer; transition: all 0.2s;
  box-shadow: 0 3px 10px rgba(200,16,46,0.35);
  white-space: nowrap;
}
.dispatch-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(200,16,46,0.45); }
.dispatch-btn:active { transform: translateY(0); }
.dispatch-btn.running {
  background: linear-gradient(135deg, var(--tube-blue), var(--tube-blue-2));
  box-shadow: 0 3px 10px rgba(26,86,219,0.35);
}

/* ── SEARCH BAR ── */
#search-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  flex-shrink: 0; animation: slideDown 0.2s ease;
}
.search-bar-icon { flex-shrink: 0; opacity: 0.5; }
@keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }

#search-input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-family: var(--font-body); font-size: 16px;
}
#search-input::placeholder { color: var(--text-3); }

.search-count-badge {
  font-size: 11px; color: var(--text-2); white-space: nowrap; flex-shrink: 0;
}

/* ── CHAT SECTION ── */
#chat-section {
  flex: 1; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 0;
  position: relative; /* Posiciona os pseudo-elementos de fundo */
}

#msg-list {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
  padding: 16px 14px 8px;
  gap: 2px;
  position: relative;
  z-index: 5; /* Garante que as mensagens fiquem acima das ondas de fundo */
}

/* ── GLASS CARD (timer bar) ── */
.glass-card {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════
   MESSAGES
   ═══════════════════════════════════════════════════════════ */

/* Date separator */
.msg-date-sep {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 10px; color: var(--text-3);
  font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; user-select: none;
}
.msg-date-sep::before, .msg-date-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* System message */
.msg-system {
  display: flex; justify-content: center;
  margin: 8px 0; animation: fadeIn 0.3s ease;
}
.msg-system-inner {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-full); padding: 4px 14px;
  font-size: 12px; color: var(--text-2); max-width: 85%;
  text-align: center;
}

/* Message row */
.msg-row {
  display: flex; align-items: flex-end; gap: 8px;
  max-width: 100%; animation: msgIn 0.25s ease;
  margin-bottom: 1px;
}
.msg-row.from-me { flex-direction: row-reverse; }
.msg-row.grouped-top    { margin-top: 0; }
.msg-row.grouped-middle { margin-top: 0; }
.msg-row.grouped-bottom { margin-bottom: 6px; }
.msg-row.standalone     { margin-bottom: 6px; }

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

/* Avatar */
.msg-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface-3); object-fit: cover;
  display: block;
}
.msg-avatar-spacer { width: 30px; flex-shrink: 0; }

/* Bubble wrapper */
.msg-bubble-wrap {
  display: flex; flex-direction: column;
  max-width: min(72%, 320px);
  min-width: 0;
  gap: 2px;
  position: relative;
}
.from-me .msg-bubble-wrap { align-items: flex-end; }

/* Sender name */
.msg-sender-name {
  font-size: 11px; font-weight: 600; color: var(--tube-blue);
  padding: 0 4px; margin-bottom: 2px;
}
.from-me .msg-sender-name { display: none; }

/* Bubble */
.msg-bubble {
  position: relative;
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  word-break: break-word; white-space: pre-wrap;
  font-size: 14px; line-height: 1.5;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  transition: background 0.15s;
  max-width: 100%;
  min-width: 0;
}

/* Bubble tails via border-radius adjustments */
.msg-row:not(.from-me) .msg-bubble { border-bottom-left-radius: 4px; }
.msg-row:not(.from-me).grouped-top .msg-bubble    { border-bottom-left-radius: 4px; border-top-left-radius: 4px; }
.msg-row:not(.from-me).grouped-middle .msg-bubble { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.msg-row:not(.from-me).grouped-bottom .msg-bubble { border-top-left-radius: 4px; }

.from-me .msg-bubble {
  background: linear-gradient(145deg, var(--tube-blue), var(--tube-blue-2));
  color: #fff; border: none;
  border-bottom-right-radius: 4px;
}
.msg-row.from-me.grouped-top .msg-bubble    { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.msg-row.from-me.grouped-middle .msg-bubble { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.msg-row.from-me.grouped-bottom .msg-bubble { border-top-right-radius: 4px; }

/* Reply inside bubble */
.msg-reply-quote {
  border-left: 3px solid rgba(255,255,255,0.4);
  padding: 4px 8px; margin: -2px 0 6px;
  border-radius: 4px; background: rgba(255,255,255,0.08);
  cursor: pointer; transition: background 0.2s;
  max-width: 100%;
  overflow: hidden;
  white-space: normal;
}
.msg-reply-quote:hover { background: rgba(255,255,255,0.15); }
.from-me .msg-reply-quote { border-left-color: rgba(255,255,255,0.5); }
:not(.from-me) .msg-reply-quote { border-left-color: var(--tube-blue); background: rgba(26,86,219,0.1); }
:not(.from-me) .msg-reply-quote:hover { background: rgba(26,86,219,0.18); }
.msg-reply-quote-name {
  font-size: 11px;
  font-weight: 700;
  color: inherit;
  opacity: 0.9;
  margin-bottom: 3px;
  line-height: 1.25;
}
.msg-reply-quote-text {
  font-size: 12px;
  opacity: 0.75;
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 4.5em;
  line-height: 1.35;
}

/* Message text */
.msg-text { display: inline; }
.msg-mention { color: var(--mention); font-weight: 600; cursor: pointer; }
.from-me .msg-mention { color: #93c5fd; }
.msg-link {
  color: var(--mention);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
  transition: opacity 0.2s;
}
.msg-link:hover {
  opacity: 0.8;
}
.from-me .msg-link {
  color: #a5f3fc;
}
.from-me .msg-link:hover {
  color: #e0f2fe;
}

/* Link Preview Card */
.msg-link-preview {
  display: flex;
  margin-top: 8px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s, transform 0.2s;
  cursor: pointer;
  width: 100%;
  max-width: 100%;
}
.msg-link-preview:hover {
  background: var(--border-strong);
  transform: translateY(-1px);
}
.from-me .msg-link-preview {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.from-me .msg-link-preview:hover {
  background: rgba(255, 255, 255, 0.12);
}
.lp-image-wrap {
  width: 80px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.from-me .lp-image-wrap {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.lp-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-content {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.lp-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.from-me .lp-title {
  color: #ffffff;
}
.lp-desc {
  font-size: 11px;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
.from-me .lp-desc {
  color: #bfdbfe;
}
.lp-url {
  font-size: 9px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.from-me .lp-url {
  color: #93c5fd;
}

/* Jumbomoji Sticker Animations */
@keyframes sticker-pop {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.1); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes sticker-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(1.5deg); }
}

/* Jumbomoji (Emoji-only messages) */
.msg-bubble.jumbomoji {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 12px !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)) drop-shadow(0 1px 2px rgba(0,0,0,0.15));
  animation: sticker-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-origin: left center;
}
.from-me .msg-bubble.jumbomoji {
  transform-origin: right center;
}
.msg-bubble.jumbomoji .msg-text {
  line-height: 1.1;
  display: inline-block;
  transition: transform 0.2s;
}
.msg-bubble.jumbomoji:hover .msg-text {
  animation: sticker-float 2s ease-in-out infinite;
}
.msg-bubble.jumbomoji-1 .msg-text {
  font-size: 42px;
}
.msg-bubble.jumbomoji-2 .msg-text {
  font-size: 34px;
}
.msg-bubble.jumbomoji-3 .msg-text {
  font-size: 26px;
}

/* Deleted message */
.msg-bubble.deleted {
  background: transparent !important;
  border: 1px dashed var(--border-strong) !important;
  color: var(--text-3) !important;
  font-style: italic; padding: 6px 10px;
}

/* Sticker */
.msg-sticker {
  font-size: 52px; line-height: 1.1;
  padding: 4px 8px;
  background: none !important; border: none !important; box-shadow: none !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

/* Image */
.msg-image {
  max-width: 240px; border-radius: var(--radius-md);
  cursor: zoom-in; display: block;
  transition: transform 0.2s;
}
.msg-image.expanded { cursor: zoom-out; transform: scale(1.02); }
.msg-image-caption { font-size: 13px; margin-top: 4px; }

/* Message meta (time + edited) */
.msg-meta {
  display: flex; align-items: center; gap: 4px;
  padding: 0 2px; font-size: 11px; color: var(--text-3);
  align-self: flex-end;
}
.msg-edited-label { font-size: 10px; font-style: italic; }

/* Reactions */
.msg-reactions {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: -6px;
  margin-bottom: 2px;
  position: relative;
  z-index: 5;
}
.reaction-pill {
  display: flex; align-items: center; gap: 3px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-full); padding: 2px 8px;
  font-size: 13px; cursor: pointer; transition: all 0.15s;
  user-select: none;
}
.reaction-pill:hover { background: var(--surface-3); border-color: var(--border-strong); }
.reaction-pill.mine { border-color: var(--tube-blue); background: rgba(26,86,219,0.1); }
.from-me .reaction-pill { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.2); }
.from-me .reaction-pill.mine { background: rgba(255,255,255,0.3); }
.reaction-count { font-size: 11px; font-weight: 600; color: var(--text-2); }

/* Message actions (hover) */
.msg-actions {
  display: none; align-items: center; gap: 2px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--surface-2) 85%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full); padding: 4px 6px;
  box-shadow: var(--shadow-float);
  z-index: 10; white-space: nowrap;
  animation: actionsFadeIn 0.18s ease forwards;
}
@keyframes actionsFadeIn {
  from { opacity: 0; transform: translateY(-50%) scale(0.95); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}
.from-me .msg-actions {
  right: calc(100% + 6px);
  left: auto;
}
.msg-row:not(.from-me) .msg-actions {
  left: calc(100% + 6px);
  right: auto;
}
.msg-bubble-wrap:hover .msg-actions { display: flex; }

/* Bridges on msg-bubble-wrap itself to keep hover active */
.msg-bubble-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 48px; /* extends upward to cover reactions bar gap */
  background: transparent;
  pointer-events: none;
  z-index: 9;
}
.msg-bubble-wrap:hover::before {
  pointer-events: auto;
}

.msg-bubble-wrap::after {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -10px;
  background: transparent;
  pointer-events: none;
  z-index: 9;
}
.msg-bubble-wrap:hover::after {
  pointer-events: auto;
}
.from-me .msg-bubble-wrap::after {
  right: 100%;
  width: 90px; /* covers actions bar gap and buttons area */
}
.msg-row:not(.from-me) .msg-bubble-wrap::after {
  left: 100%;
  width: 90px; /* covers actions bar gap and buttons area */
}

.msg-action-btn {
  background: none; border: none; cursor: pointer;
  font-size: 14px; padding: 2px 4px; border-radius: var(--radius-sm);
  color: var(--text-2); transition: all 0.15s; line-height: 1;
}
.msg-action-btn:hover { background: var(--surface-2); color: var(--text); }

/* Quick reaction bar */
.quick-reactions {
  display: none; gap: 4px;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full); padding: 6px 10px;
  box-shadow: var(--shadow-heavy);
  position: absolute; top: -44px; left: 0;
  z-index: 11;
  animation: reactionPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.from-me .quick-reactions { right: 0; left: auto; }
.msg-bubble-wrap:hover .quick-reactions { display: flex; }

@keyframes reactionPop {
  0%   { opacity: 0; transform: scale(0.88) translateY(4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.qr-btn {
  background: none; border: none; cursor: pointer;
  font-size: 20px; padding: 2px 4px; border-radius: var(--radius-sm);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  line-height: 1;
}
.qr-btn:hover { transform: scale(1.35) translateY(-3px); }

/* Edit mode */
.msg-edit-input {
  width: 100%; min-width: 160px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 16px;
  padding: 6px 10px; outline: none; resize: none;
  line-height: 1.5;
  box-sizing: border-box;
}

/* Own message edit styling (high contrast blue bubble) */
.from-me .msg-edit-input {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}
.from-me .msg-edit-input:focus {
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

/* Other's message edit styling */
.msg-row:not(.from-me) .msg-edit-input {
  background: var(--surface-3) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
}
.msg-row:not(.from-me) .msg-edit-input:focus {
  border-color: var(--tube-blue) !important;
  box-shadow: 0 0 0 2px rgba(26,86,219,0.15);
}

.msg-edit-actions {
  display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end;
}

.msg-edit-confirm, .msg-edit-cancel {
  font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: var(--radius-sm);
  border: none; cursor: pointer; font-family: var(--font-body);
  transition: all 0.15s ease;
}

/* Action button variations for own messages */
.from-me .msg-edit-confirm {
  background: #22c55e !important;
  color: #fff !important;
}
.from-me .msg-edit-confirm:hover {
  background: #16a34a !important;
}
.from-me .msg-edit-cancel {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}
.from-me .msg-edit-cancel:hover {
  background: rgba(255, 255, 255, 0.35) !important;
}

/* Action button variations for other's messages */
.msg-row:not(.from-me) .msg-edit-confirm {
  background: var(--online) !important;
  color: #fff !important;
}
.msg-row:not(.from-me) .msg-edit-confirm:hover {
  background: #15803d !important;
}
.msg-row:not(.from-me) .msg-edit-cancel {
  background: var(--surface-3) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border);
}
.msg-row:not(.from-me) .msg-edit-cancel:hover {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

/* ═══════════════════════════════════════════════════════════
   INPUT AREA
   ═══════════════════════════════════════════════════════════ */
#input-area {
  flex-shrink: 0;
  flex-direction: column;
  background: var(--surface);
  border-top: 1px solid var(--border);
  position: relative; z-index: 50;
  padding-bottom: env(safe-area-inset-bottom);
  width: 100%;
  box-sizing: border-box;
}

/* Reply preview */
#reply-preview {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  animation: slideDown 0.2s ease;
}
.reply-preview-bar {
  width: 3px; height: 32px; border-radius: 2px;
  background: var(--tube-blue); flex-shrink: 0;
}
#reply-preview-body { flex: 1; min-width: 0; }
.reply-preview-name { display: block; font-size: 11px; font-weight: 700; color: var(--tube-blue); }
.reply-preview-text { display: block; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Suggestions panel */
.suggestions-panel {
  position: absolute; bottom: calc(100% + 4px); left: 12px; right: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-float); z-index: 200;
  animation: slideDown 0.15s ease;
}
.suggestion-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer;
  transition: background 0.15s; color: var(--text);
  font-size: 13px;
}
.suggestion-item:hover { background: var(--surface-3); }
.suggestion-item img, .sug-avatar-wrap img {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-3); flex-shrink: 0;
}
.sug-avatar-wrap {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.sug-status-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--surface-2);
  z-index: 2;
}
.sug-status-dot.online {
  background-color: var(--online);
  box-shadow: 0 0 4px var(--online);
}
.sug-status-dot.offline {
  background-color: var(--text-3);
}
.suggestion-item .sug-name { font-weight: 600; }
.suggestion-item .sug-cmd  { font-weight: 700; color: var(--tube-blue); }
.suggestion-item .sug-desc { font-size: 11px; color: var(--text-2); }

/* Msg form */
#msg-form {
  display: flex; align-items: flex-end; gap: 6px;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
}

.input-container-capsule {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 38px;
  min-width: 0;
  width: 100%;
}

.input-container-capsule:focus-within {
  border-color: var(--tube-blue);
  box-shadow: 0 0 0 2px rgba(26,86,219,0.15);
}

.input-action-btn {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--text-2);
  transition: all 0.2s;
  margin-bottom: 0px;
}
.input-action-btn:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.input-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }

#msgInput {
  flex: 1; min-width: 0;
  width: 100%;
  padding: 6px 8px;
  background: transparent; border: none;
  color: var(--text);
  font-family: var(--font-body); font-size: 16px; outline: none;
  height: 32px;
  max-height: 120px;
  resize: none;
  overflow-y: auto;
  line-height: 1.25;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#msgInput::-webkit-scrollbar {
  display: none;
}
#msgInput:disabled { opacity: 0.5; cursor: not-allowed; }
#msgInput::placeholder { color: var(--text-3); }

.send-btn {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--tube-blue), var(--tube-blue-2));
  color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(26,86,219,0.4);
  margin-bottom: 1px;
}
.send-btn:hover:not(:disabled) { transform: scale(1.08); box-shadow: 0 4px 14px rgba(26,86,219,0.5); }
.send-btn:disabled { background: var(--surface-3); box-shadow: none; cursor: not-allowed; }
.send-btn:disabled svg { opacity: 0.4; }

/* Emoji/Sticker Panel */
#emoji-panel {
  background: var(--surface);
  border-top: 1px solid var(--border);
  animation: slideDown 0.2s ease;
  overflow: hidden;
}


#emoji-cat-tabs {
  display: flex; overflow-x: auto; gap: 2px; padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
#emoji-cat-tabs::-webkit-scrollbar { display: none; }
.emoji-cat-btn {
  background: none; border: none; cursor: pointer;
  font-size: 18px; padding: 4px 6px; border-radius: var(--radius-sm);
  flex-shrink: 0; transition: all 0.15s; opacity: 0.6;
}
.emoji-cat-btn.active, .emoji-cat-btn:hover { opacity: 1; background: var(--surface-2); }

.emoji-grid {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 2px; padding: 8px; max-height: 180px; overflow-y: auto;
}
.emoji-btn {
  background: none; border: none; cursor: pointer;
  font-size: 22px; padding: 4px; border-radius: var(--radius-sm);
  transition: all 0.1s; line-height: 1; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
.emoji-btn:hover { background: var(--surface-2); transform: scale(1.2); }



/* ═══════════════════════════════════════════════════════════
   SCROLL TO BOTTOM
   ═══════════════════════════════════════════════════════════ */
#scroll-bottom-btn {
  position: absolute; bottom: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-float); z-index: 200;
  transition: all 0.2s; animation: fadeIn 0.2s ease;
}
#scroll-bottom-btn:hover { background: var(--surface-2); color: var(--text); transform: translateY(-1px); }

.unread-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; border-radius: var(--radius-full);
  background: var(--tube-red); color: #fff;
  font-size: 10px; font-weight: 700; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
}

/* ═══════════════════════════════════════════════════════════
   DROPDOWN MENUS
   ═══════════════════════════════════════════════════════════ */
.dropdown-container { position: relative; }

.dropdown-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 220px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-heavy);
  z-index: 500; overflow: hidden;
  animation: menuIn 0.15s ease;
}
[data-theme="light"] .dropdown-menu { box-shadow: 0 12px 40px rgba(0,0,0,0.15); }
@keyframes menuIn { from { opacity:0; transform:translateY(-8px) scale(0.97); } to { opacity:1; transform:none; } }

.profile-menu-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--surface-2);
}
#profile-menu-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; background: var(--surface-3); flex-shrink: 0;
}
.profile-menu-info { min-width: 0; }
#profile-menu-name { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-menu-link { background: none; border: none; color: var(--tube-blue); font-size: 12px; cursor: pointer; padding: 0; font-family: var(--font-body); }
.profile-menu-link:hover { text-decoration: underline; }

.dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }
.dropdown-header { padding: 8px 14px; font-size: 11px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; }
.dropdown-item-group { padding: 4px 0; }

.dropdown-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 16px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; color: var(--text-2);
  transition: background 0.15s, color 0.15s; text-align: left;
}
.dropdown-item:hover { background: var(--surface-2); color: var(--text); }
.dropdown-item.danger { color: var(--danger); }
.dropdown-item.danger:hover { background: rgba(248,81,73,0.08); color: var(--danger); }
.dropdown-item.active-item { color: var(--online); }
.dropdown-item-icon { margin-right: 8px; flex-shrink: 0; }
.profile-save-flex { flex: 1; }

.passengers-dropdown { top: 0; right: calc(100% + 8px); min-width: 220px; }

#passengers-list { list-style: none; max-height: 240px; overflow-y: auto; }
.passenger-li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.passenger-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.passenger-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); flex-shrink: 0; }
.passenger-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.passenger-dist { font-size: 11px; color: var(--tube-gold); background: rgba(245,158,11,0.1); padding: 2px 6px; border-radius: var(--radius-sm); }

/* ═══════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════ */
#toast-container {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 9000; pointer-events: none;
  width: min(360px, 90vw);
}

.toast {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  font-size: 13px; color: var(--text);
  box-shadow: var(--shadow-float);
  display: flex; align-items: center; gap: 8px;
  pointer-events: auto; cursor: default;
  animation: toastIn 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  max-width: 100%;
}
.toast.toast-out { animation: toastOut 0.3s ease forwards; }
.toast-icon { font-size: 16px; flex-shrink: 0; }
.toast-text { flex: 1; }

@keyframes toastIn  { from { opacity:0; transform:translateY(12px) scale(0.95); } to { opacity:1; transform:none; } }
@keyframes toastOut { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(-8px) scale(0.95); } }

/* ═══════════════════════════════════════════════════════════
   EFFECTS
   ═══════════════════════════════════════════════════════════ */
#effects-container {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 8000; overflow: hidden;
}
body.shake-effect { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake {
  10%, 90% { transform: translate3d(-1px,0,0); }
  20%, 80% { transform: translate3d(2px,0,0); }
  30%, 50%, 70% { transform: translate3d(-4px,0,0); }
  40%, 60% { transform: translate3d(4px,0,0); }
}
.confetti-piece { position: absolute; width: 8px; height: 16px; opacity: 1; }
.rain-drop { position: absolute; width: 2px; height: 70px; background: linear-gradient(transparent, rgba(255,255,255,0.4)); }
[data-theme="light"] .rain-drop { background: linear-gradient(transparent, rgba(0,0,0,0.25)); }
#effects-container.flash-effect { animation: flash 0.8s ease-out forwards; }
@keyframes flash { 0% { background: rgba(255,255,255,0.9); } 100% { background: transparent; } }
.fog-layer { position: absolute; bottom:0; left:0; right:0; height:40vh; background: linear-gradient(transparent, rgba(200,200,200,0.4), rgba(255,255,255,0.5)); animation: fog 6s ease-in-out forwards; filter: blur(8px); }
[data-theme="light"] .fog-layer { background: linear-gradient(transparent, rgba(0,0,0,0.03), rgba(0,0,0,0.08)); }
@keyframes fog { 0%,100% { opacity:0; } 20%,80% { opacity:1; } }
.tea-emoji { position: absolute; font-size: 28px; bottom: -40px; animation: floatUp 4s ease-in forwards; }
@keyframes floatUp { 0% { opacity:1; } 100% { transform: translateY(-100vh) rotate(360deg); opacity:0; } }

/* Radar active */
#radarBtn.active-radar { color: var(--online) !important; }
.radar-ping-icon {
  animation: radar-pulse 2s infinite ease-in-out;
  transform-origin: center;
  display: inline-block;
  vertical-align: middle;
}
@keyframes radar-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP ENHANCEMENTS
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 500px) {
  body {
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at 20% 20%, rgba(26,86,219,0.15) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 80%, rgba(200,16,46,0.08) 0%, transparent 60%),
                var(--bg);
  }
  #app {
    height: 92vh; width: 440px;
    background: color-mix(in srgb, var(--surface) 65%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-strong);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--shadow-frame);
  }
  .emoji-grid { grid-template-columns: repeat(10, 1fr); }
}
@media (min-width: 500px) {
  [data-theme="light"] body {
    background: radial-gradient(ellipse at 20% 20%, rgba(26,86,219,0.06) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 80%, rgba(200,16,46,0.03) 0%, transparent 60%),
                var(--bg);
  }
}


/* ═══════════════════════════════════════════════════════════
   GALLERY & LIGHTBOX STYLES
   ═══════════════════════════════════════════════════════════ */
.modal-overlay {
  position: absolute; inset: 0;
  background: var(--overlay-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1500;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: fadeIn 0.25s ease-out;
}

.gallery-card {
  width: 100%; height: 85%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--glass-shadow);
}
[data-theme="light"] .gallery-card {
  background: rgba(255,255,255,0.95);
}

.gallery-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.gallery-title {
  display: flex; flex-direction: column;
  gap: 2px;
}
.gallery-title span:first-child {
  font-size: 15px; font-weight: 700; color: var(--text);
}
.gallery-count-badge {
  font-size: 11px; color: var(--text-2); font-weight: 600;
}

.gallery-grid {
  flex: 1; overflow-y: auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; padding: 14px;
}

.gallery-item {
  position: relative; aspect-ratio: 1;
  border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--border);
  cursor: pointer; background: var(--surface-3);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.gallery-item:hover {
  transform: translateY(-2px);
  border-color: var(--tube-blue);
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.3s ease;
}
.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-item-hover {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; opacity: 0; transition: opacity 0.2s ease;
  padding: 4px; text-align: center;
}
.gallery-item:hover .gallery-item-hover {
  opacity: 1;
}
.gallery-item-user {
  font-size: 10px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90%;
}
.gallery-item-go {
  background: var(--tube-blue); color: #fff;
  border: none; border-radius: var(--radius-sm);
  padding: 4px 8px; font-size: 9px; font-weight: 600;
  cursor: pointer; transition: background 0.15s;
  display: flex; align-items: center; gap: 3px;
  font-family: var(--font-body);
}
.gallery-item-go:hover {
  background: var(--tube-blue-2);
}

/* Lightbox Overlay */
.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.95);
  z-index: 5000; display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.2s ease-out;
}
.lightbox-close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: none; font-size: 24px; color: rgba(255,255,255,0.7);
  cursor: pointer; transition: color 0.2s; z-index: 5100;
  padding: 8px;
}
.lightbox-close:hover { color: #fff; }

.lightbox-nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: #fff; font-size: 28px; width: 44px; height: 44px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s; z-index: 5050;
  user-select: none;
}
.lightbox-nav-btn:hover { background: rgba(255,255,255,0.15); }
.lightbox-nav-btn.prev { left: 16px; }
.lightbox-nav-btn.next { right: 16px; }

.lightbox-content-wrap {
  position: relative; display: flex; flex-direction: column; align-items: center;
  max-width: 90%; max-height: 80vh;
}
#lightbox-img {
  max-width: 100%; max-height: 72vh; object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 40px rgba(0,0,0,0.8);
  animation: zoomIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.15);
}
@keyframes zoomIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.lightbox-meta {
  margin-top: 14px; text-align: center; color: rgba(255,255,255,0.85);
  font-size: 13px; font-weight: 500;
}

/* ── HIGHLIGHT for search ── */
mark.search-hl {
  background: rgba(245,158,11,0.35); color: inherit;
  border-radius: 2px; padding: 0 1px;
}
mark.search-hl.current {
  background: var(--tube-gold) !important;
  color: #000 !important;
  box-shadow: 0 0 6px rgba(245,158,11,0.7);
  font-weight: bold;
}

/* Search navigation buttons */
.search-nav-buttons {
  display: flex; gap: 4px; align-items: center; margin-right: 6px; flex-shrink: 0;
}
.search-nav-btn-mini {
  width: 24px; height: 24px; border-radius: 50%;
  background: none; border: none; cursor: pointer;
  color: var(--text-2); display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s; outline: none;
}
.search-nav-btn-mini:hover { background: var(--surface-3); color: var(--text); }

/* ── PREMIUM UX ADDITIONS (Contador Online, Plano de Fundo Dinâmico, Reações Animadas) ── */

/* Contador Online pulsante */
.top-bar-subtext-btn {
  background: none; border: none; padding: 0; margin: 0;
  display: flex; align-items: center; gap: 4px;
  font-family: var(--font-body); font-size: 11px;
  color: var(--text-3); cursor: pointer; outline: none;
  transition: color 0.2s; text-align: left;
}
.top-bar-subtext-btn:hover { color: var(--text-2); }
.online-dot {
  color: var(--online); font-size: 8px;
  animation: pulse-online 2s infinite; line-height: 1;
}
@keyframes pulse-online {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Alinhamento do dropdown de passageiros na esquerda */
.top-bar-left .passengers-dropdown {
  top: calc(100% + 8px); left: 0; right: auto;
  min-width: 220px;
}

/* 🎨 PLANOS DE FUNDO TEMÁTICOS (4 ATMOSFERAS PREMIUM DE ALTA ENTROPIA) */

@keyframes bg-fade-in {
  0% { opacity: 0; }
}

/* 🚇 0. PLANO DE FUNDO PADRÃO (Orbs Flutuantes do Sistema) */
.bg-padrao {
  position: relative;
  background: transparent !important;
  overflow: hidden;
}

/* 🌊 1. PRAIA E MAR (Mar Bioluminescente / Praia de Cristal) */
.bg-praia {
  position: relative;
  background-color: var(--bg) !important;
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 800%27 width=%27100%25%27 height=%27100%25%27%3E %3Ccircle cx=%2760%27 cy=%27680%27 r=%272.2%27 fill=%27rgba%286,182,212,0.95%29%27%3E %3Canimate attributeName=%27cy%27 values=%27680;100%27 dur=%2712s%27 repeatCount=%27indefinite%27/%3E %3Canimate attributeName=%27opacity%27 values=%270;0.95;0%27 dur=%2712s%27 repeatCount=%27indefinite%27/%3E %3Canimate attributeName=%27cx%27 values=%2760;110;60%27 dur=%278s%27 repeatCount=%27indefinite%27/%3E %3C/circle%3E %3Ccircle cx=%27340%27 cy=%27650%27 r=%273.2%27 fill=%27rgba%28139,92,246,0.9%29%27%3E %3Canimate attributeName=%27cy%27 values=%27650;80%27 dur=%2715s%27 repeatCount=%27indefinite%27/%3E %3Canimate attributeName=%27opacity%27 values=%270;0.85;0%27 dur=%2715s%27 repeatCount=%27indefinite%27/%3E %3Canimate attributeName=%27cx%27 values=%27340;270;340%27 dur=%2710s%27 repeatCount=%27indefinite%27/%3E %3C/circle%3E %3Ccircle cx=%27220%27 cy=%27670%27 r=%271.8%27 fill=%27rgba%286,182,212,0.95%29%27%3E %3Canimate attributeName=%27cy%27 values=%27670;150%27 dur=%279s%27 repeatCount=%27indefinite%27/%3E %3Canimate attributeName=%27opacity%27 values=%270;0.95;0%27 dur=%279s%27 repeatCount=%27indefinite%27/%3E %3Canimate attributeName=%27cx%27 values=%27220;250;220%27 dur=%276s%27 repeatCount=%27indefinite%27/%3E %3C/circle%3E %3Ccircle cx=%27130%27 cy=%27660%27 r=%272.5%27 fill=%27rgba%28236,72,153,0.85%29%27%3E %3Canimate attributeName=%27cy%27 values=%27660;120%27 dur=%2713s%27 repeatCount=%27indefinite%27/%3E %3Canimate attributeName=%27opacity%27 values=%270;0.95;0%27 dur=%2713s%27 repeatCount=%27indefinite%27/%3E %3Canimate attributeName=%27cx%27 values=%27130;80;130%27 dur=%279s%27 repeatCount=%27indefinite%27/%3E %3C/circle%3E %3Ccircle cx=%27180%27 cy=%27700%27 r=%273.5%27 fill=%27rgba%2834,211,238,0.9%29%27%3E %3Canimate attributeName=%27cy%27 values=%27700;180%27 dur=%2711s%27 repeatCount=%27indefinite%27/%3E %3Canimate attributeName=%27opacity%27 values=%270;0.9;0%27 dur=%2711s%27 repeatCount=%27indefinite%27/%3E %3Canimate attributeName=%27cx%27 values=%27180;140;180%27 dur=%277s%27 repeatCount=%27indefinite%27/%3E %3C/circle%3E %3Ccircle cx=%27280%27 cy=%27690%27 r=%272.0%27 fill=%27rgba%28168,85,247,0.9%29%27%3E %3Canimate attributeName=%27cy%27 values=%27690;130%27 dur=%2714s%27 repeatCount=%27indefinite%27/%3E %3Canimate attributeName=%27opacity%27 values=%270;0.85;0%27 dur=%2714s%27 repeatCount=%27indefinite%27/%3E %3Canimate attributeName=%27cx%27 values=%27280;320;280%27 dur=%2711s%27 repeatCount=%27indefinite%27/%3E %3C/circle%3E %3Ccircle cx=%2790%27 cy=%27720%27 r=%272.8%27 fill=%27rgba%28232,121,249,0.85%29%27%3E %3Canimate attributeName=%27cy%27 values=%27720;220%27 dur=%2710s%27 repeatCount=%27indefinite%27/%3E %3Canimate attributeName=%27opacity%27 values=%270;0.9;0%27 dur=%2710s%27 repeatCount=%27indefinite%27/%3E %3Canimate attributeName=%27cx%27 values=%2790;130;90%27 dur=%276s%27 repeatCount=%27indefinite%27/%3E %3C/circle%3E %3Ccircle cx=%27310%27 cy=%27710%27 r=%272.2%27 fill=%27rgba%2845,212,191,0.95%29%27%3E %3Canimate attributeName=%27cy%27 values=%27710;160%27 dur=%2712s%27 repeatCount=%27indefinite%27/%3E %3Canimate attributeName=%27opacity%27 values=%270;0.95;0%27 dur=%2712s%27 repeatCount=%27indefinite%27/%3E %3Canimate attributeName=%27cx%27 values=%27310;260;310%27 dur=%278s%27 repeatCount=%27indefinite%27/%3E %3C/circle%3E %3C/svg%3E"),
    radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.25) 0%, transparent 60%),
    radial-gradient(circle at 20% 80%, rgba(6, 182, 212, 0.22) 0%, transparent 65%),
    radial-gradient(circle at 50% 100%, rgba(15, 118, 110, 0.45) 0%, transparent 75%),
    radial-gradient(circle at center, transparent 20%, rgba(5, 7, 18, 0.85) 100%) !important;
  background-size: cover, 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
  animation: praia-ambience 20s ease-in-out infinite;
}

[data-theme="light"] .bg-praia {
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 800%27 width=%27100%25%27 height=%27100%25%27%3E %3Cpath d=%27M0 0 L150 800 L220 800 L0 0 Z%27 fill=%27rgba%28255,255,255,0.06%29%27/%3E %3Cpath d=%27M0 0 L300 800 L380 800 L0 0 Z%27 fill=%27rgba%28255,255,255,0.04%29%27/%3E %3Cpath d=%27M-50 120 Q 100 100, 250 140 T 450 120%27 fill=%27none%27 stroke=%27rgba%28255,255,255,0.25%29%27 stroke-width=%273%27%3E %3Canimate attributeName=%27d%27 dur=%2714s%27 repeatCount=%27indefinite%27 values=%27M-50 120 Q 100 100, 250 140 T 450 120; M-50 140 Q 100 150, 250 110 T 450 140; M-50 120 Q 100 100, 250 140 T 450 120%27/%3E %3C/path%3E %3Cpath d=%27M-50 270 Q 150 300, 200 250 T 450 270%27 fill=%27none%27 stroke=%27rgba%28255,255,255,0.2%29%27 stroke-width=%272.5%27%3E %3Canimate attributeName=%27d%27 dur=%2718s%27 repeatCount=%27indefinite%27 values=%27M-50 270 Q 150 300, 200 250 T 450 270; M-50 240 Q 150 220, 200 280 T 450 240; M-50 270 Q 150 300, 200 250 T 450 270%27/%3E %3C/path%3E %3Cpath d=%27M-50 420 Q 100 400, 300 440 T 450 420%27 fill=%27none%27 stroke=%27rgba%28255,255,255,0.22%29%27 stroke-width=%273%27%3E %3Canimate attributeName=%27d%27 dur=%2712s%27 repeatCount=%27indefinite%27 values=%27M-50 420 Q 100 400, 300 440 T 450 420; M-50 440 Q 100 450, 300 400 T 450 440; M-50 420 Q 100 400, 300 440 T 450 420%27/%3E %3C/path%3E %3C/svg%3E"),
    linear-gradient(180deg, #06b6d4 0%, #2dd4bf 55%, #fef08a 100%) !important;
  background-size: cover, 100% 100% !important;
  background-repeat: no-repeat !important;
  animation: none;
}

/* Camada Traseira 1: Ondas do Mar Profundo / Surf Animado SVG */
.bg-praia::before {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: 0.85;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 800%27 width=%27100%25%27 height=%27100%25%27%3E %3Ccircle cx=%27320%27 cy=%27100%27 r=%2730%27 fill=%27rgba%28254,243,199,0.06%29%27/%3E %3Ccircle cx=%27320%27 cy=%27100%27 r=%2745%27 fill=%27rgba%28254,243,199,0.03%29%27/%3E %3Cpath d=%27M320 78 A22 22 0 1 0 320 122 A18 18 0 0 1 320 78%27 fill=%27rgba%28254,243,199,0.92%29%27/%3E %3Cpolyline points=%2750 70, 90 60, 110 85%27 stroke=%27rgba%28255,255,255,0.06%29%27 stroke-width=%270.8%27 fill=%27none%27/%3E %3Ccircle cx=%2750%27 cy=%2770%27 r=%271.2%27 fill=%27rgba%28255,255,255,0.8%29%27%3E %3Canimate attributeName=%27opacity%27 values=%270.3;1;0.3%27 dur=%274s%27 repeatCount=%27indefinite%27/%3E %3C/circle%3E %3Ccircle cx=%2790%27 cy=%2760%27 r=%271%27 fill=%27rgba%28255,255,255,0.8%29%27%3E %3Canimate attributeName=%27opacity%27 values=%271;0.2;1%27 dur=%275.5s%27 repeatCount=%27indefinite%27/%3E %3C/circle%3E %3Ccircle cx=%27110%27 cy=%2785%27 r=%271.5%27 fill=%27rgba%28255,255,255,0.9%29%27%3E %3Canimate attributeName=%27opacity%27 values=%270.1;0.9;0.1%27 dur=%273s%27 repeatCount=%27indefinite%27/%3E %3C/circle%3E %3Cpath d=%27M-40 40 L0 0%27 stroke=%27rgba%28255,255,255,0.8%29%27 stroke-width=%272%27 stroke-linecap=%27round%27%3E %3CanimateTransform attributeName=%27transform%27 type=%27translate%27 values=%270 0; 450 450; 0 0%27 keyTimes=%270; 0.12; 0.13; 1%27 dur=%2715s%27 repeatCount=%27indefinite%27/%3E %3C/path%3E %3Cg%3E %3Cpath d=%27M 0,800 Q 40,730 30,660 L 40,660 Q 50,730 15,800 Z%27 fill=%27rgba%286, 12, 24, 0.95%29%27/%3E %3Cpath d=%27M35 660 Q 10 660 -15 685 Q 10 650 35 660%27 fill=%27rgba%2815, 23, 42, 0.95%29%27/%3E %3Cpath d=%27M35 660 Q 15 625 -5 620 Q 20 635 35 660%27 fill=%27rgba%2815, 23, 42, 0.95%29%27/%3E %3Cpath d=%27M35 660 Q 40 615 50 600 Q 45 630 35 660%27 fill=%27rgba%2815, 23, 42, 0.95%29%27/%3E %3Cpath d=%27M35 660 Q 65 620 85 625 Q 60 635 35 660%27 fill=%27rgba%2815, 23, 42, 0.95%29%27/%3E %3Cpath d=%27M35 660 Q 70 660 90 680 Q 60 655 35 660%27 fill=%27rgba%2815, 23, 42, 0.95%29%27/%3E %3CanimateTransform attributeName=%27transform%27 type=%27rotate%27 values=%27-1.5 20 800; 1.5 20 800; -1.5 20 800%27 dur=%277s%27 repeatCount=%27indefinite%27/%3E %3C/g%3E %3Cg%3E %3Cpath d=%27M 400,800 Q 360,730 370,660 L 360,660 Q 350,730 385,800 Z%27 fill=%27rgba%286, 12, 24, 0.95%29%27/%3E %3Cpath d=%27M365 660 Q 390 660 415 685 Q 390 650 365 660%27 fill=%27rgba%2815, 23, 42, 0.95%29%27/%3E %3Cpath d=%27M365 660 Q 385 625 405 620 Q 380 635 365 660%27 fill=%27rgba%2815, 23, 42, 0.95%29%27/%3E %3Cpath d=%27M365 660 Q 360 615 350 600 Q 355 630 365 660%27 fill=%27rgba%2815, 23, 42, 0.95%29%27/%3E %3Cpath d=%27M365 660 Q 335 620 315 625 Q 340 635 365 660%27 fill=%27rgba%2815, 23, 42, 0.95%29%27/%3E %3Cpath d=%27M365 660 Q 330 660 310 680 Q 340 655 365 660%27 fill=%27rgba%2815, 23, 42, 0.95%29%27/%3E %3CanimateTransform attributeName=%27transform%27 type=%27rotate%27 values=%271.5 380 800; -1.5 380 800; 1.5 380 800%27 dur=%278s%27 repeatCount=%27indefinite%27/%3E %3C/g%3E %3Cpath fill=%27rgba%2813,148,136,0.3%29%27%3E %3Canimate attributeName=%27d%27 dur=%279s%27 repeatCount=%27indefinite%27 values=%27M0 660 Q 100 630, 200 660 T 400 660 L400 800 L0 800 Z; M0 690 Q 100 710, 200 690 T 400 690 L400 800 L0 800 Z; M0 660 Q 100 630, 200 660 T 400 660 L400 800 L0 800 Z%27/%3E %3C/path%3E %3Cpath fill=%27rgba%2879,70,229,0.2%29%27%3E %3Canimate attributeName=%27d%27 dur=%2713s%27 repeatCount=%27indefinite%27 values=%27M0 680 Q 100 700, 200 680 T 400 680 L400 800 L0 800 Z; M0 650 Q 100 630, 200 650 T 400 650 L400 800 L0 800 Z; M0 680 Q 100 700, 200 680 T 400 680 L400 800 L0 800 Z%27/%3E %3C/path%3E %3C/svg%3E") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  filter: blur(0.5px);
  animation: bg-fade-in 0.8s ease-out;
}

/* Camada Traseira 2: Ondulação Secundária / Bioluminescência / Espuma de Praia + Barco à Vela */
.bg-praia::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: 0.9;
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 800%27 width=%27100%25%27 height=%27100%25%27%3E %3Cpath d=%27M300 640 L340 640 L370 800 L270 800 Z%27 fill=%27url%28%23moonlightPath%29%27 opacity=%270.25%27/%3E %3Cdefs%3E %3ClinearGradient id=%27moonlightPath%27 x1=%270.5%27 y1=%270%27 x2=%270.5%27 y2=%271%27%3E %3Cstop offset=%270%25%27 stop-color=%27rgba%28254,243,199,0.6%29%27/%3E %3Cstop offset=%27100%25%27 stop-color=%27rgba%28254,243,199,0%29%27/%3E %3C/linearGradient%3E %3C/defs%3E %3Cpath fill=%27rgba%286,182,212,0.4%29%27%3E %3Canimate attributeName=%27d%27 dur=%278s%27 repeatCount=%27indefinite%27 values=%27M0 670 Q 100 690, 200 670 T 400 670 L400 800 L0 800 Z; M0 640 Q 100 620, 200 640 T 400 640 L400 800 L0 800 Z; M0 670 Q 100 690, 200 670 T 400 670 L400 800 L0 800 Z%27/%3E %3C/path%3E %3Cpath fill=%27rgba%28165,243,252,0.6%29%27%3E %3Canimate attributeName=%27d%27 dur=%278s%27 repeatCount=%27indefinite%27 values=%27M0 673 Q 100 693, 200 673 T 400 673 L400 677 T 0 677 Z; M0 643 Q 100 623, 200 643 T 400 643 L400 647 T 0 647 Z; M0 673 Q 100 693, 200 673 T 400 673 L400 677 T 0 677 Z%27/%3E %3C/path%3E %3Cg%3E %3Cellipse cx=%27265%27 cy=%27652%27 rx=%2728%27 ry=%274%27 fill=%27rgba%286,182,212,0.35%29%27%3E %3Canimate attributeName=%27rx%27 values=%2728;32;28%27 dur=%275.5s%27 repeatCount=%27indefinite%27/%3E %3C/ellipse%3E %3Cpath d=%27M235 644 L295 644 L288 654 L242 654 Z%27 fill=%27rgba%2815,23,42,0.95%29%27 stroke=%27rgba%286,182,212,0.7%29%27 stroke-width=%271%27/%3E %3Cpath d=%27M250 644 L280 644 L276 636 L254 636 Z%27 fill=%27rgba%2830,41,59,0.9%29%27/%3E %3Ccircle cx=%27265%27 cy=%27640%27 r=%272%27 fill=%27rgba%28253,224,71,1%29%27/%3E %3Cline x1=%27268%27 y1=%27636%27 x2=%27268%27 y2=%27600%27 stroke=%27rgba%28255,255,255,0.9%29%27 stroke-width=%271.8%27/%3E %3Cline x1=%27238%27 y1=%27644%27 x2=%27268%27 y2=%27605%27 stroke=%27rgba%28255,255,255,0.25%29%27 stroke-width=%270.5%27/%3E %3Cline x1=%27292%27 y1=%27644%27 x2=%27268%27 y2=%27605%27 stroke=%27rgba%28255,255,255,0.25%29%27 stroke-width=%270.5%27/%3E %3Cpath d=%27M266 602 Q245 618 266 634 Z%27 fill=%27rgba%286,182,212,0.85%29%27 stroke=%27rgba%28255,255,255,0.4%29%27 stroke-width=%270.5%27/%3E %3Cpath d=%27M270 606 Q286 620 270 634 Z%27 fill=%27rgba%28165,243,252,0.75%29%27 stroke=%27rgba%28255,255,255,0.3%29%27 stroke-width=%270.5%27/%3E %3Cpath d=%27M268 600 L277 603 L268 606 Z%27 fill=%27rgba%28236,72,153,0.95%29%27/%3E %3CanimateTransform attributeName=%27transform%27 type=%27translate%27 values=%270 0; 0 -7; 0 0%27 dur=%275.5s%27 repeatCount=%27indefinite%27/%3E %3CanimateTransform attributeName=%27transform%27 type=%27rotate%27 values=%27-3 265 644; 3 265 644; -3 265 644%27 dur=%277.5s%27 repeatCount=%27indefinite%27 additive=%27sum%27/%3E %3C/g%3E %3C/svg%3E"),
    radial-gradient(ellipse at 70% 30%, rgba(139, 92, 246, 0.18) 0%, rgba(99, 102, 241, 0.05) 40%, transparent 70%) !important;
  background-size: cover, 100% 100% !important;
  background-repeat: no-repeat !important;
  filter: blur(0.5px);
  animation: bg-fade-in 0.8s ease-out;
}

[data-theme="light"] .bg-praia::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 800%27 width=%27100%25%27 height=%27100%25%27%3E %3Ccircle cx=%2780%27 cy=%27120%27 r=%2725%27 fill=%27rgba%28251,191,36,0.9%29%27/%3E %3Ccircle cx=%2780%27 cy=%27120%27 r=%2735%27 fill=%27rgba%28251,191,36,0.2%29%27/%3E %3Ccircle cx=%2780%27 cy=%27120%27 r=%2750%27 fill=%27rgba%28251,191,36,0.07%29%27/%3E %3Cg%3E %3Cpath d=%27M 0 0 A 15 15 0 0 1 20 -5 A 22 22 0 0 1 50 5 A 15 15 0 0 1 65 20 L -10 20 Z%27 fill=%27rgba%28255,255,255,0.85%29%27/%3E %3CanimateTransform attributeName=%27transform%27 type=%27translate%27 values=%27-80 180; 450 180%27 dur=%2765s%27 repeatCount=%27indefinite%27/%3E %3C/g%3E %3Cg%3E %3Cpath d=%27M 0 0 A 12 12 0 0 1 15 -4 A 18 18 0 0 1 40 4 A 12 12 0 0 1 52 16 L -8 16 Z%27 fill=%27rgba%28255,255,255,0.7%29%27/%3E %3CanimateTransform attributeName=%27transform%27 type=%27translate%27 values=%27-70 140; 450 140%27 dur=%2780s%27 repeatCount=%27indefinite%27/%3E %3C/g%3E %3Cg%3E %3Cpath d=%27M 0,800 Q 40,730 30,660 L 40,660 Q 50,730 15,800 Z%27 fill=%27rgba%28120,53,4,0.9%29%27/%3E %3Cpath d=%27M35 660 Q 10 660 -15 685 Q 10 650 35 660%27 fill=%27rgba%2821,128,61,0.95%29%27/%3E %3Cpath d=%27M35 660 Q 15 625 -5 620 Q 20 635 35 660%27 fill=%27rgba%2822,163,74,0.95%29%27/%3E %3Cpath d=%27M35 660 Q 40 615 50 600 Q 45 630 35 660%27 fill=%27rgba%2821,128,61,0.95%29%27/%3E %3Cpath d=%27M35 660 Q 65 620 85 625 Q 60 635 35 660%27 fill=%27rgba%2822,163,74,0.95%29%27/%3E %3Cpath d=%27M35 660 Q 70 660 90 680 Q 60 655 35 660%27 fill=%27rgba%2821,128,61,0.95%29%27/%3E %3CanimateTransform attributeName=%27transform%27 type=%27rotate%27 values=%27-1.5 20 800; 1.5 20 800; -1.5 20 800%27 dur=%277s%27 repeatCount=%27indefinite%27/%3E %3C/g%3E %3Cg%3E %3Cpath d=%27M 400,800 Q 360,730 370,660 L 360,660 Q 350,730 385,800 Z%27 fill=%27rgba%28120,53,4,0.9%29%27/%3E %3Cpath d=%27M365 660 Q 390 660 415 685 Q 390 650 365 660%27 fill=%27rgba%2821,128,61,0.95%29%27/%3E %3Cpath d=%27M365 660 Q 385 625 405 620 Q 380 635 365 660%27 fill=%27rgba%2822,163,74,0.95%29%27/%3E %3Cpath d=%27M365 660 Q 360 615 350 600 Q 355 630 365 660%27 fill=%27rgba%2821,128,61,0.95%29%27/%3E %3Cpath d=%27M365 660 Q 335 620 315 625 Q 340 635 365 660%27 fill=%27rgba%2822,163,74,0.95%29%27/%3E %3Cpath d=%27M365 660 Q 330 660 310 680 Q 340 655 365 660%27 fill=%27rgba%2821,128,61,0.95%29%27/%3E %3CanimateTransform attributeName=%27transform%27 type=%27rotate%27 values=%271.5 380 800; -1.5 380 800; 1.5 380 800%27 dur=%278s%27 repeatCount=%27indefinite%27/%3E %3C/g%3E %3Cpath fill=%27rgba%2820,184,166,0.3%29%27%3E %3Canimate attributeName=%27d%27 dur=%279s%27 repeatCount=%27indefinite%27 values=%27M0 690 Q 100 660, 200 690 T 400 690 L400 800 L0 800 Z; M0 720 Q 100 740, 200 720 T 400 720 L400 800 L0 800 Z; M0 690 Q 100 660, 200 690 T 400 690 L400 800 L0 800 Z%27/%3E %3C/path%3E %3C/svg%3E") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  filter: none;
  background: transparent !important;
  animation: bg-fade-in 0.8s ease-out;
}

[data-theme="light"] .bg-praia::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 800%27 width=%27100%25%27 height=%27100%25%27%3E %3Cg%3E %3Cpath d=%27M 0 0 Q 8 -6 15 0 Q 22 -6 30 0 Q 15 -10 0 0 Z%27 fill=%27rgba%28255,255,255,0.9%29%27 stroke=%27rgba%28100,116,139,0.5%29%27 stroke-width=%270.5%27/%3E %3CanimateTransform attributeName=%27transform%27 type=%27translate%27 values=%27-40 220; 440 180%27 dur=%2718s%27 repeatCount=%27indefinite%27/%3E %3C/g%3E %3Cg%3E %3Cpath d=%27M 0 0 Q 6 -5 12 0 Q 18 -5 24 0 Q 12 -8 0 0 Z%27 fill=%27rgba%28255,255,255,0.85%29%27 stroke=%27rgba%28100,116,139,0.4%29%27 stroke-width=%270.5%27/%3E %3CanimateTransform attributeName=%27transform%27 type=%27translate%27 values=%27-50 250; 440 220%27 dur=%2724s%27 repeatCount=%27indefinite%27/%3E %3C/g%3E %3Cpath d=%27M120 770 L123 775 L129 776 L124 780 L126 786 L120 782 L114 786 L116 780 L111 776 L117 775 Z%27 fill=%27rgba%28249,115,22,0.75%29%27/%3E %3Cpath d=%27M270 777 L272 781 L277 782 L273 785 L275 790 L270 787 L265 790 L267 785 L263 782 L268 781 Z%27 fill=%27rgba%28251,146,60,0.65%29%27/%3E %3Cpath fill=%27rgba%28255,255,255,0.5%29%27%3E %3Canimate attributeName=%27d%27 dur=%278s%27 repeatCount=%27indefinite%27 values=%27M0 710 Q 100 730, 200 710 T 400 710 L400 800 L0 800 Z; M0 670 Q 100 650, 200 670 T 400 670 L400 800 L0 800 Z; M0 710 Q 100 730, 200 710 T 400 710 L400 800 L0 800 Z%27/%3E %3C/path%3E %3Cpath fill=%27rgba%28255,255,255,0.3%29%27%3E %3Canimate attributeName=%27d%27 dur=%2712s%27 repeatCount=%27indefinite%27 values=%27M0 695 Q 100 675, 200 695 T 400 695 L400 800 L0 800 Z; M0 725 Q 100 745, 200 725 T 400 725 L400 800 L0 800 Z; M0 695 Q 100 675, 200 695 T 400 695 L400 800 L0 800 Z%27/%3E %3C/path%3E %3Cg%3E %3Cellipse cx=%27265%27 cy=%27702%27 rx=%2728%27 ry=%274%27 fill=%27rgba%2813,148,136,0.2%29%27%3E %3Canimate attributeName=%27rx%27 values=%2728;32;28%27 dur=%276s%27 repeatCount=%27indefinite%27/%3E %3C/ellipse%3E %3Cpath d=%27M235 694 L295 694 L288 704 L242 704 Z%27 fill=%27rgba%28249,115,22,0.9%29%27 stroke=%27rgba%28255,255,255,0.8%29%27 stroke-width=%271%27/%3E %3Cpath d=%27M250 694 L280 694 L276 686 L254 686 Z%27 fill=%27rgba%28255,255,255,0.95%29%27/%3E %3Ccircle cx=%27265%27 cy=%27690%27 r=%272%27 fill=%27rgba%28100,116,139,0.6%29%27/%3E %3Cline x1=%27268%27 y1=%27686%27 x2=%27268%27 y2=%27650%27 stroke=%27rgba%28120,53,4,0.9%29%27 stroke-width=%271.8%27/%3E %3Cline x1=%27238%27 y1=%27694%27 x2=%27268%27 y2=%27655%27 stroke=%27rgba%28120,53,4,0.3%29%27 stroke-width=%270.5%27/%3E %3Cline x1=%27292%27 y1=%27694%27 x2=%27268%27 y2=%27655%27 stroke=%27rgba%28120,53,4,0.3%29%27 stroke-width=%270.5%27/%3E %3Cpath d=%27M266 652 Q245 668 266 684 Z%27 fill=%27rgba%28255,255,255,0.95%29%27 stroke=%27rgba%28120,53,4,0.2%29%27 stroke-width=%270.5%27/%3E %3Cpath d=%27M270 656 Q286 670 270 684 Z%27 fill=%27rgba%28254,240,138,0.9%29%27 stroke=%27rgba%28120,53,4,0.2%29%27 stroke-width=%270.5%27/%3E %3Cpath d=%27M268 650 L277 653 L268 656 Z%27 fill=%27rgba%28239,68,68,0.95%29%27/%3E %3CanimateTransform attributeName=%27transform%27 type=%27translate%27 values=%270 0; 0 -5; 0 0%27 dur=%276s%27 repeatCount=%27indefinite%27/%3E %3CanimateTransform attributeName=%27transform%27 type=%27rotate%27 values=%27-3 265 694; 3 265 694; -3 265 694%27 dur=%278s%27 repeatCount=%27indefinite%27 additive=%27sum%27/%3E %3C/g%3E %3C/svg%3E") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  filter: none;
  animation: bg-fade-in 0.8s ease-out;
}

@keyframes praia-ambience {
  0%, 100% { filter: brightness(1) contrast(1); }
  50% { filter: brightness(1.02) contrast(1.01) saturate(1.03); }
}

/* ❄️ 5. SILÊNCIO GELADO (Quietude & Pureza) */
.bg-neve {
  position: relative;
  background-color: var(--bg) !important;
  background-image: 
    /* Brilho Glacial Central */
    radial-gradient(circle at center, rgba(14, 116, 144, 0.15) 0%, transparent 70%),
    /* Claridade superior fria */
    radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
    /* Trama de Geada Geométrica Hexagonal */
    linear-gradient(30deg, rgba(255, 255, 255, 0.007) 1px, transparent 1px),
    linear-gradient(150deg, rgba(255, 255, 255, 0.007) 1px, transparent 1px),
    /* Vignette polar profundo */
    radial-gradient(circle at center, transparent 35%, rgba(0, 0, 0, 0.45) 100%) !important;
  background-size: 100% 100%, 100% 100%, 60px 104px, 60px 104px, 100% 100% !important;
  overflow: hidden;
  animation: neve-ambience 22s ease-in-out infinite;
}

[data-theme="light"] .bg-neve {
  background-image: 
    radial-gradient(circle at center, rgba(14, 116, 144, 0.05) 0%, transparent 65%),
    linear-gradient(30deg, rgba(14, 116, 144, 0.012) 1px, transparent 1px),
    linear-gradient(150deg, rgba(14, 116, 144, 0.012) 1px, transparent 1px),
    radial-gradient(circle at center, transparent 40%, rgba(0, 0, 0, 0.08) 100%) !important;
  background-size: 100% 100%, 60px 104px, 60px 104px, 100% 100% !important;
  animation: none;
}

/* Camada 1: Nevasca de fundo (mais fina, diagonal e lenta) */
.bg-neve::before {
  content: ''; position: absolute; inset: -10%;
  pointer-events: none; z-index: 0;
  opacity: 0.9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='160' viewBox='0 0 80 160'%3E%3Ccircle cx='10' cy='30' r='1.2' fill='rgba%28255,255,255,0.22%29'/%3E%3Ccircle cx='50' cy='70' r='1.5' fill='rgba%28255,255,255,0.18%29'/%3E%3Ccircle cx='30' cy='130' r='1.0' fill='rgba%28255,255,255,0.25%29'/%3E%3Ccircle cx='70' cy='110' r='1.3' fill='rgba%28255,255,255,0.2%29'/%3E%3C/svg%3E");
  filter: blur(1.5px);
  animation: bg-fade-in 0.8s ease-out, neve-drift-back 19s linear infinite;
}
[data-theme="light"] .bg-neve::before {
  filter: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='160' viewBox='0 0 80 160'%3E%3Ccircle cx='10' cy='30' r='1.2' fill='rgba%2814,116,144,0.16%29'/%3E%3Ccircle cx='50' cy='70' r='1.5' fill='rgba%2814,116,144,0.12%29'/%3E%3Ccircle cx='30' cy='130' r='1.0' fill='rgba%2814,116,144,0.18%29'/%3E%3C/svg%3E");
}

/* Camada 2: Flocos geométricos estrelas em primeiro plano (mais rápidos e detalhados) */
.bg-neve::after {
  content: ''; position: absolute; inset: -10%;
  pointer-events: none; z-index: 1;
  opacity: 0.85;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='300' viewBox='0 0 150 300'%3E%3Cg transform='translate%2855,225%29 scale%280.8%29'%3E%3Cline x1='-8' y1='0' x2='8' y2='0' stroke='rgba%28255,255,255,0.35%29' stroke-width='0.8'/%3E%3Cline x1='0' y1='-8' x2='0' y2='8' stroke='rgba%28255,255,255,0.35%29' stroke-width='0.8'/%3E%3Cline x1='-5' y1='-5' x2='5' y2='5' stroke='rgba%28255,255,255,0.35%29' stroke-width='0.8'/%3E%3Cline x1='-5' y1='5' x2='5' y2='-5' stroke='rgba%28255,255,255,0.35%29' stroke-width='0.8'/%3E%3C/g%3E%3Cg transform='translate%28125,55%29 scale%280.6%29'%3E%3Cline x1='-8' y1='0' x2='8' y2='0' stroke='rgba%28255,255,255,0.3%29' stroke-width='0.7'/%3E%3Cline x1='0' y1='-8' x2='0' y2='8' stroke='rgba%28255,255,255,0.3%29' stroke-width='0.7'/%3E%3C/g%3E%3Ccircle cx='25' cy='45' r='2.5' fill='rgba%28255,255,255,0.38%29'/%3E%3Ccircle cx='105' cy='115' r='2.0' fill='rgba%28255,255,255,0.32%29'/%3E%3Ccircle cx='60' cy='170' r='1.8' fill='rgba%28255,255,255,0.3%29'/%3E%3Ccircle cx='120' cy='250' r='2.3' fill='rgba%28255,255,255,0.35%29'/%3E%3C/svg%3E");
  animation: bg-fade-in 0.8s ease-out, neve-drift-front 11s linear infinite;
}
[data-theme="light"] .bg-neve::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='300' viewBox='0 0 150 300'%3E%3Cg transform='translate%2855,225%29 scale%280.8%29'%3E%3Cline x1='-8' y1='0' x2='8' y2='0' stroke='rgba%2814,116,144,0.22%29' stroke-width='0.8'/%3E%3Cline x1='0' y1='-8' x2='0' y2='8' stroke='rgba%2814,116,144,0.22%29' stroke-width='0.8'/%3E%3Cline x1='-5' y1='-5' x2='5' y2='5' stroke='rgba%2814,116,144,0.22%29' stroke-width='0.8'/%3E%3Cline x1='-5' y1='5' x2='5' y2='-5' stroke='rgba%2814,116,144,0.22%29' stroke-width='0.8'/%3E%3C/g%3E%3Ccircle cx='25' cy='45' r='2.5' fill='rgba%2814,116,144,0.22%29'/%3E%3Ccircle cx='105' cy='115' r='2.0' fill='rgba%2814,116,144,0.18%29'/%3E%3C/svg%3E");
}

@keyframes neve-drift-back {
  0% { background-position: 0px 0px; }
  100% { background-position: 80px 320px; }
}

@keyframes neve-drift-front {
  0% { background-position: 0px 0px; }
  100% { background-position: 150px 600px; }
}

@keyframes neve-ambience {
  0%, 100% { filter: brightness(1) contrast(1); }
  50% { filter: brightness(1.03) contrast(1.01) saturate(1.02); }
}


/* 🌿 4. CÉU ESTRELADO (Quietude & Constelações) */
.bg-estrelado {
  position: relative;
  background-color: var(--bg) !important;
  background-image: 
    /* Brilho da nebulosa âmbar-dourada */
    radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.08) 0%, transparent 55%),
    /* Nebulosa safira profunda */
    radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 60%),
    /* Grade fina de alinhamentos estelares */
    linear-gradient(90deg, rgba(255, 255, 255, 0.008) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.008) 1px, transparent 1px),
    /* Vignette cósmica */
    radial-gradient(circle at center, transparent 30%, rgba(5, 7, 18, 0.6) 100%) !important;
  background-size: 100% 100%, 100% 100%, 100px 100px, 100px 100px, 100% 100% !important;
  background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat !important;
  background-position: center, center, center, center, center !important;
  overflow: hidden;
  animation: estrelado-ambience 20s ease-in-out infinite;
}

[data-theme="light"] .bg-estrelado {
  background-image: 
    radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.05) 0%, transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.04) 0%, transparent 60%),
    linear-gradient(90deg, rgba(11, 19, 43, 0.012) 1px, transparent 1px),
    linear-gradient(180deg, rgba(11, 19, 43, 0.012) 1px, transparent 1px),
    radial-gradient(circle at center, transparent 40%, rgba(0, 0, 0, 0.05) 100%) !important;
  background-size: 100% 100%, 100% 100%, 100px 100px, 100px 100px, 100% 100% !important;
  background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat !important;
  background-position: center, center, center, center, center !important;
  animation: none;
}

/* Camada 1: Constelações e estrelas finas estáticas com brilhos assíncronos INDIVIDUAIS via SMIL */
.bg-estrelado::before {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: 0.85;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ccircle cx='15' cy='25' r='0.4' fill='rgba%28255,255,255,0.9%29'%3E%3Canimate attributeName='opacity' values='0.1;0.9;0.1' dur='4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='85' cy='95' r='0.9' fill='rgba%28255,255,255,0.85%29'%3E%3Canimate attributeName='opacity' values='0.95;0.2;0.95' dur='6s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='45' cy='15' r='0.6' fill='rgba%28255,255,255,0.9%29'%3E%3Canimate attributeName='opacity' values='0.3;1;0.3' dur='5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='105' cy='55' r='1.2' fill='rgba%28255,255,255,0.95%29'%3E%3Canimate attributeName='opacity' values='0.15;0.95;0.15' dur='3.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='30' cy='80' r='0.5' fill='rgba%28255,255,255,0.8%29'%3E%3Canimate attributeName='opacity' values='0.8;0.1;0.8' dur='4.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='70' cy='35' r='1.5' fill='rgba%28255,255,255,0.95%29'%3E%3Canimate attributeName='opacity' values='0.2;1;0.2' dur='7.2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='115' cy='105' r='0.7' fill='rgba%28255,255,255,0.85%29'%3E%3Canimate attributeName='opacity' values='0.5;0.95;0.5' dur='5.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='55' cy='115' r='0.3' fill='rgba%28255,255,255,0.7%29'%3E%3Canimate attributeName='opacity' values='0.1;0.9;0.1' dur='3s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cline x1='15' y1='25' x2='45' y2='15' stroke='rgba%28255,255,255,0.05%29' stroke-width='0.5'/%3E%3Cline x1='45' y1='15' x2='105' y2='55' stroke='rgba%28255,255,255,0.04%29' stroke-width='0.4'/%3E%3Cline x1='85' y1='95' x2='105' y2='55' stroke='rgba%28255,255,255,0.05%29' stroke-width='0.5'/%3E%3C/svg%3E");
  filter: blur(0.5px);
  animation: bg-fade-in 0.8s ease-out;
}
[data-theme="light"] .bg-estrelado::before {
  filter: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ccircle cx='15' cy='25' r='0.4' fill='rgba%2811,19,43,0.85%29'%3E%3Canimate attributeName='opacity' values='0.15;0.85;0.15' dur='4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='85' cy='95' r='0.9' fill='rgba%2811,19,43,0.8%29'%3E%3Canimate attributeName='opacity' values='0.8;0.2;0.8' dur='6s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='45' cy='15' r='0.6' fill='rgba%2811,19,43,0.85%29'%3E%3Canimate attributeName='opacity' values='0.3;0.9;0.3' dur='5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='105' cy='55' r='1.2' fill='rgba%2811,19,43,0.85%29'%3E%3Canimate attributeName='opacity' values='0.2;0.9;0.2' dur='3.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='30' cy='80' r='0.5' fill='rgba%2811,19,43,0.75%29'%3E%3Canimate attributeName='opacity' values='0.75;0.15;0.75' dur='4.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='70' cy='35' r='1.5' fill='rgba%2811,19,43,0.9%29'%3E%3Canimate attributeName='opacity' values='0.2;0.95;0.2' dur='7.2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='115' cy='105' r='0.7' fill='rgba%2811,19,43,0.8%29'%3E%3Canimate attributeName='opacity' values='0.4;0.9;0.4' dur='5.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='55' cy='115' r='0.3' fill='rgba%2811,19,43,0.6%29'%3E%3Canimate attributeName='opacity' values='0.1;0.8;0.1' dur='3s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cline x1='15' y1='25' x2='45' y2='15' stroke='rgba%2811,19,43,0.05%29' stroke-width='0.5'/%3E%3Cline x1='45' y1='15' x2='105' y2='55' stroke='rgba%2811,19,43,0.04%29' stroke-width='0.4'/%3E%3Cline x1='85' y1='95' x2='105' y2='55' stroke='rgba%2811,19,43,0.05%29' stroke-width='0.5'/%3E%3C/svg%3E");
}

/* Camada 2: Brilhos estelares + Estrelas Cadentes com brilhos assíncronos INDIVIDUAIS via SMIL */
.bg-estrelado::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: 0.8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg transform='translate%2830,45%29 scale%280.6%29'%3E%3Cpath d='M0 -5 L1 -1 L5 0 L1 1 L0 5 L-1 1 L-5 0 L-1 -1 Z' fill='rgba%28255,255,255,0.95%29'%3E%3Canimate attributeName='opacity' values='0.2;0.95;0.2' dur='4.5s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3Cg transform='translate%2875,110%29 scale%281.2%29'%3E%3Cpath d='M0 -5 L1 -1 L5 0 L1 1 L0 5 L-1 1 L-5 0 L-1 -1 Z' fill='rgba%28245,158,11,0.9%29'%3E%3Canimate attributeName='opacity' values='0.9;0.15;0.95' dur='5.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3Cg transform='translate%28120,30%29 scale%280.9%29'%3E%3Cpath d='M0 -5 L1 -1 L5 0 L1 1 L0 5 L-1 1 L-5 0 L-1 -1 Z' fill='rgba%28255,255,255,0.95%29'%3E%3Canimate attributeName='opacity' values='0.1;0.9;0.1' dur='3.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3Cg transform='translate%2890,80%29 scale%280.5%29'%3E%3Cpath d='M0 -5 L1 -1 L5 0 L1 1 L0 5 L-1 1 L-5 0 L-1 -1 Z' fill='rgba%28245,158,11,0.85%29'%3E%3Canimate attributeName='opacity' values='0.8;0.2;0.8' dur='5.2s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3Ccircle cx='10' cy='90' r='0.4' fill='rgba%28255,255,255,0.8%29'%3E%3Canimate attributeName='opacity' values='0.1;0.9;0.1' dur='2.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='130' cy='120' r='0.6' fill='rgba%28255,255,255,0.85%29'%3E%3Canimate attributeName='opacity' values='0.95;0.2;0.95' dur='4.1s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='50' cy='10' r='0.5' fill='rgba%28255,255,255,0.8%29'%3E%3Canimate attributeName='opacity' values='0.3;0.95;0.3' dur='5.6s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cline x1='10' y1='10' x2='2' y2='18' stroke='rgba%28255,255,255,0.1%29' stroke-width='0.5' stroke-linecap='round'/%3E%3C/svg%3E");
  animation: bg-fade-in 0.8s ease-out;
}

@keyframes estrelado-ambience {
  0%, 100% { filter: brightness(1) contrast(1); }
  50% { filter: brightness(1.05) contrast(1.03) saturate(1.04); }
}

/* 🌹 5. PEQUENO PRÍNCIPE (Magical Neutral Watercolor & Improved Stardust) */
.bg-principe {
  position: relative;
  background-color: #0d1117 !important;
  overflow: hidden;
}
.bg-principe::after {
  content: ''; position: absolute; inset: 0;
  background-image: url('little-prince-bg.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 0.45 !important;
  pointer-events: none; z-index: 0;
  filter: saturate(0.9) brightness(0.85);
  animation: bg-fade-in 0.8s ease-out;
}
.bg-principe::before {
  content: ''; position: absolute; inset: 0;
  background-image: 
    /* Highly improved drifting golden & rose-pink stardust (Asynchronous SMIL & Glow filters) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E  %3Cdefs%3E    %3Cfilter id='glow' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E      %3CfeGaussianBlur stdDeviation='1.6' result='blur' /%3E      %3CfeMerge%3E        %3CfeMergeNode in='blur' /%3E        %3CfeMergeNode in='SourceGraphic' /%3E      %3C/feMerge%3E    %3C/filter%3E    %3Cfilter id='glow-intense' x='-80%25' y='-80%25' width='260%25' height='260%25'%3E      %3CfeGaussianBlur stdDeviation='2.5' result='blur' /%3E      %3CfeMerge%3E        %3CfeMergeNode in='blur' /%3E        %3CfeMergeNode in='SourceGraphic' /%3E      %3C/feMerge%3E    %3C/filter%3E  %3C/defs%3E  %3C%21-- Ambient golden floating orb --%3E  %3Ccircle cx='50' cy='60' r='3' fill='rgba%28245,158,11,0.85%29' filter='url%28%23glow%29'%3E    %3Canimate attributeName='opacity' values='0.15%3B0.9%3B0.15' dur='7.5s' repeatCount='indefinite'/%3E    %3Canimate attributeName='cy' values='60%3B45%3B60' dur='15s' repeatCount='indefinite'/%3E    %3Canimate attributeName='cx' values='50%3B58%3B50' dur='18s' repeatCount='indefinite'/%3E  %3C/circle%3E  %3C%21-- Ambient rose essence floating orb --%3E  %3Ccircle cx='140' cy='40' r='2.5' fill='rgba%28244,63,94,0.8%29' filter='url%28%23glow%29'%3E    %3Canimate attributeName='opacity' values='0.1%3B0.85%3B0.1' dur='6s' repeatCount='indefinite'/%3E    %3Canimate attributeName='cy' values='40%3B25%3B40' dur='12s' repeatCount='indefinite'/%3E    %3Canimate attributeName='cx' values='140%3B132%3B140' dur='14s' repeatCount='indefinite'/%3E  %3C/circle%3E  %3C%21-- Deep glowing gold orb --%3E  %3Ccircle cx='110' cy='130' r='4' fill='rgba%28251,191,36,0.45%29' filter='url%28%23glow-intense%29'%3E    %3Canimate attributeName='opacity' values='0.1%3B0.75%3B0.1' dur='9s' repeatCount='indefinite'/%3E    %3Canimate attributeName='cy' values='130%3B110%3B130' dur='18s' repeatCount='indefinite'/%3E    %3Canimate attributeName='cx' values='110%3B120%3B110' dur='22s' repeatCount='indefinite'/%3E  %3C/circle%3E  %3C%21-- Deep glowing rose orb --%3E  %3Ccircle cx='30' cy='150' r='3.5' fill='rgba%28244,63,94,0.4%29' filter='url%28%23glow-intense%29'%3E    %3Canimate attributeName='opacity' values='0.05%3B0.7%3B0.05' dur='8.2s' repeatCount='indefinite'/%3E    %3Canimate attributeName='cy' values='150%3B135%3B150' dur='16.4s' repeatCount='indefinite'/%3E    %3Canimate attributeName='cx' values='30%3B22%3B30' dur='20s' repeatCount='indefinite'/%3E  %3C/circle%3E  %3C%21-- Twinkling golden stars --%3E  %3Cg transform='translate%28160, 110%29 scale%280.9%29'%3E    %3Cpath d='M0 -5 L1.2 -1.2 L5 0 L1.2 1.2 L0 5 L-1.2 1.2 L-5 0 L-1.2 -1.2 Z' fill='rgba%28254,240,138,0.95%29'%3E      %3Canimate attributeName='opacity' values='0.1%3B0.95%3B0.1' dur='4.5s' repeatCount='indefinite'/%3E    %3C/path%3E  %3C/g%3E  %3Cg transform='translate%2880, 20%29 scale%280.7%29'%3E    %3Cpath d='M0 -5 L1.2 -1.2 L5 0 L1.2 1.2 L0 5 L-1.2 1.2 L-5 0 L-1.2 -1.2 Z' fill='rgba%28251,191,36,0.9%29'%3E      %3Canimate attributeName='opacity' values='0.2%3B0.9%3B0.2' dur='5.2s' repeatCount='indefinite'/%3E    %3C/path%3E  %3C/g%3E  %3C%21-- Micro twinkling stars --%3E  %3Ccircle cx='15' cy='100' r='0.7' fill='rgba%28255,255,255,0.8%29'%3E    %3Canimate attributeName='opacity' values='0.1%3B0.9%3B0.1' dur='3s' repeatCount='indefinite'/%3E  %3C/circle%3E  %3Ccircle cx='180' cy='70' r='0.5' fill='rgba%28251,191,36,0.85%29'%3E    %3Canimate attributeName='opacity' values='0.9%3B0.2%3B0.9' dur='4s' repeatCount='indefinite'/%3E  %3C/circle%3E  %3Ccircle cx='70' cy='170' r='0.6' fill='rgba%28255,255,255,0.75%29'%3E    %3Canimate attributeName='opacity' values='0.2%3B0.85%3B0.2' dur='4.8s' repeatCount='indefinite'/%3E  %3C/circle%3E  %3Ccircle cx='90' cy='90' r='0.4' fill='rgba%28244,63,94,0.75%29'%3E    %3Canimate attributeName='opacity' values='0.1%3B0.95%3B0.1' dur='5.2s' repeatCount='indefinite'/%3E  %3C/circle%3E%3C/svg%3E"),
    radial-gradient(circle at center, rgba(13, 17, 23, 0.1) 0%, rgba(13, 17, 23, 0.8) 100%) !important;
  background-size: 200px 200px, 100% 100% !important;
  background-repeat: repeat, no-repeat !important;
  pointer-events: none; z-index: 1;
  animation: estrelado-ambience 20s ease-in-out infinite;
}
[data-theme="light"] .bg-principe {
  background-color: #f4f5f6 !important;
}
[data-theme="light"] .bg-principe::after {
  opacity: 0.35 !important;
  filter: brightness(1.05) contrast(0.95) saturate(0.6);
}
[data-theme="light"] .bg-principe::before {
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E  %3Cdefs%3E    %3Cfilter id='glow-light' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E      %3CfeGaussianBlur stdDeviation='1.0' result='blur' /%3E      %3CfeMerge%3E        %3CfeMergeNode in='blur' /%3E        %3CfeMergeNode in='SourceGraphic' /%3E      %3C/feMerge%3E    %3C/filter%3E  %3C/defs%3E  %3Ccircle cx='50' cy='60' r='3' fill='rgba%2899,102,241,0.55%29' filter='url%28%23glow-light%29'%3E    %3Canimate attributeName='opacity' values='0.15%3B0.75%3B0.15' dur='7.5s' repeatCount='indefinite'/%3E    %3Canimate attributeName='cy' values='60%3B45%3B60' dur='15s' repeatCount='indefinite'/%3E    %3Canimate attributeName='cx' values='50%3B58%3B50' dur='18s' repeatCount='indefinite'/%3E  %3C/circle%3E  %3Ccircle cx='140' cy='40' r='2.5' fill='rgba%28244,63,94,0.5%29' filter='url%28%23glow-light%29'%3E    %3Canimate attributeName='opacity' values='0.1%3B0.7%3B0.1' dur='6s' repeatCount='indefinite'/%3E    %3Canimate attributeName='cy' values='40%3B25%3B40' dur='12s' repeatCount='indefinite'/%3E    %3Canimate attributeName='cx' values='140%3B132%3B140' dur='14s' repeatCount='indefinite'/%3E  %3C/circle%3E  %3Ccircle cx='110' cy='130' r='4' fill='rgba%2899,102,241,0.35%29' filter='url%28%23glow-light%29'%3E    %3Canimate attributeName='opacity' values='0.1%3B0.65%3B0.1' dur='9s' repeatCount='indefinite'/%3E    %3Canimate attributeName='cy' values='130%3B110%3B130' dur='18s' repeatCount='indefinite'/%3E  %3C/circle%3E  %3Ccircle cx='30' cy='150' r='3.5' fill='rgba%28244,63,94,0.35%29' filter='url%28%23glow-light%29'%3E    %3Canimate attributeName='opacity' values='0.05%3B0.6%3B0.05' dur='8.2s' repeatCount='indefinite'/%3E    %3Canimate attributeName='cy' values='150%3B135%3B150' dur='16.4s' repeatCount='indefinite'/%3E  %3C/circle%3E  %3Cg transform='translate%28160, 110%29 scale%280.9%29'%3E    %3Cpath d='M0 -5 L1.2 -1.2 L5 0 L1.2 1.2 L0 5 L-1.2 1.2 L-5 0 L-1.2 -1.2 Z' fill='rgba%28217,119,6,0.55%29'%3E      %3Canimate attributeName='opacity' values='0.1%3B0.75%3B0.1' dur='4.5s' repeatCount='indefinite'/%3E    %3C/path%3E  %3C/g%3E  %3Ccircle cx='15' cy='100' r='0.7' fill='rgba%2899,102,241,0.5%29'%3E    %3Canimate attributeName='opacity' values='0.1%3B0.7%3B0.1' dur='3s' repeatCount='indefinite'/%3E  %3C/circle%3E  %3Ccircle cx='180' cy='70' r='0.5' fill='rgba%28217,119,6,0.5%29'%3E    %3Canimate attributeName='opacity' values='0.7%3B0.2%3B0.7' dur='4s' repeatCount='indefinite'/%3E  %3C/circle%3E%3C/svg%3E"),
    radial-gradient(circle at center, rgba(244, 245, 246, 0.15) 0%, rgba(244, 245, 246, 0.7) 100%) !important;
  background-size: 200px 200px, 100% 100% !important;
  background-repeat: repeat, no-repeat !important;
  animation: none;
}

/* 🎇 PARTÍCULAS DE REAÇÃO (BURST EFFECT) */
@keyframes particle-up {
  0% { transform: translateY(10vh) scale(0.6); opacity: 0; }
  15% { opacity: 0.95; }
  90% { opacity: 0.8; }
  100% { transform: translateY(-105vh) scale(1.1); opacity: 0; }
}
.reaction-particle {
  position: absolute; bottom: 0;
  pointer-events: none; z-index: 9999;
  user-select: none;
  will-change: transform, opacity;
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════
   MESSAGE SCROLL HIGHLIGHT
   ═══════════════════════════════════════════════════════════ */
@keyframes highlight-pulse {
  0% { background-color: rgba(26, 86, 219, 0.35); box-shadow: 0 0 16px rgba(26, 86, 219, 0.35); }
  40% { background-color: rgba(26, 86, 219, 0.2); box-shadow: 0 0 8px rgba(26, 86, 219, 0.15); }
  100% { background-color: transparent; box-shadow: none; }
}

.msg-highlight {
  animation: highlight-pulse 2s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
  border-radius: var(--radius-md);
}

/* ═══════════════════════════════════════════════════════════
   ADDITIONAL BACKGROUND THEMES
   ═══════════════════════════════════════════════════════════ */

/* 🥷 6. STEALTH MODE (Corporate Camouflage — Teams Claro Aesthetic) */

/* ── Stealth Variables Override ── */
body.stealth-active {
  --stealth-bg: #f3f2f1; /* Teams light gray background */
  --stealth-surface: #ffffff; /* Teams white panels */
  --stealth-surface-2: #f3f2f1; /* Teams hover state / light gray */
  --stealth-surface-3: #edebe9; /* Teams border-muted / input bg */
  --stealth-border: #e0e0e0; /* Teams light border */
  --stealth-border-strong: #d2d0ce; /* Teams darker border */
  --stealth-text: #242424; /* Teams standard text (very dark gray) */
  --stealth-text-2: #616161; /* Teams medium gray */
  --stealth-text-3: #8a8886; /* Teams light gray */
  --stealth-accent: #6264a7; /* Teams classic purple */
  --stealth-accent-subtle: #edeef6; /* Teams light purple */
  --stealth-bubble-mine: #e2e2f6; /* Teams sent message */
  --stealth-bubble-other: #ffffff; /* Teams received message */
}

/* Force Light Teams colors even if system or app theme is dark */
[data-theme="light"] body.stealth-active,
[data-theme="dark"] body.stealth-active {
  --stealth-bg: #f3f2f1;
  --stealth-surface: #ffffff;
  --stealth-surface-2: #f3f2f1;
  --stealth-surface-3: #edebe9;
  --stealth-border: #e0e0e0;
  --stealth-border-strong: #d2d0ce;
  --stealth-text: #242424;
  --stealth-text-2: #616161;
  --stealth-text-3: #8a8886;
  --stealth-accent: #6264a7;
  --stealth-accent-subtle: #edeef6;
  --stealth-bubble-mine: #e2e2f6;
  --stealth-bubble-other: #ffffff;
}

/* ── Global Font Force (Teams classic typography) ── */
body.stealth-active,
body.stealth-active input,
body.stealth-active button,
body.stealth-active textarea,
body.stealth-active select {
  font-family: "Segoe UI", -apple-system, system-ui, BlinkMacSystemFont, Roboto, sans-serif !important;
}

/* ── Body-level overrides ── */
body.stealth-active {
  background: var(--stealth-bg) !important;
  color: var(--stealth-text) !important;
}

/* Kill background orbs */
body.stealth-active .bg-orb {
  display: none !important;
}

/* ── Top Bar Stealth (Microsoft Teams Header Look) ── */
body.stealth-active #top-bar {
  background: var(--stealth-accent) !important; /* Teams purple top bar */
  border-bottom: 1px solid var(--stealth-accent) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
}
body.stealth-active .roundel-mini {
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-size: 16px;
}
body.stealth-active .top-bar-title {
  color: #ffffff !important;
  font-weight: 600;
  letter-spacing: 0.2px;
}
body.stealth-active .top-bar-subtext-btn {
  color: rgba(255, 255, 255, 0.8) !important;
}
body.stealth-active .online-dot {
  color: rgba(255, 255, 255, 0.8) !important;
  animation: none !important;
}
body.stealth-active .typing-header-text {
  color: #ffffff !important;
  font-style: normal;
  opacity: 0.95;
}

/* ── Top Bar Avatar Stealth (Circular) ── */
body.stealth-active .top-bar-avatar-btn {
  border-color: rgba(255, 255, 255, 0.4) !important;
  border-radius: 50% !important;
}
body.stealth-active .top-bar-avatar-btn:hover {
  border-color: #ffffff !important;
}
body.stealth-active #top-bar-avatar {
  filter: none !important;
  border-radius: 50% !important;
}

/* ── Icon buttons in stealth top bar ── */
body.stealth-active #top-bar .icon-btn-round {
  color: rgba(255, 255, 255, 0.8) !important;
}
body.stealth-active #top-bar .icon-btn-round:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

/* ── Other sections icon buttons ── */
body.stealth-active .icon-btn-round {
  color: var(--stealth-text-2) !important;
}
body.stealth-active .icon-btn-round:hover {
  background: var(--stealth-surface-2) !important;
  color: var(--stealth-text) !important;
}

/* ── Chat Section Background ── */
.bg-stealth {
  position: relative;
  background: var(--stealth-bg) !important;
  overflow: hidden;
}
.bg-stealth::before,
.bg-stealth::after {
  display: none !important;
}

/* ── Message Initials & Avatars (Microsoft Teams Style) ── */
body.stealth-active .msg-avatar-initials {
  width: 32px;
  height: 32px;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  user-select: none;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
body.stealth-active .passenger-avatar-initials {
  width: 28px;
  height: 28px;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 11px;
  user-select: none;
  flex-shrink: 0;
  margin-right: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
body.stealth-active .msg-avatar {
  border-radius: 50% !important;
  filter: none !important;
  opacity: 1 !important;
}
body.stealth-active .passenger-avatar {
  border-radius: 50% !important;
  filter: none !important;
  opacity: 1 !important;
}

/* ── Sender Name: Teams typography ── */
body.stealth-active .msg-sender-name {
  color: var(--stealth-text-2) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: normal !important;
  margin-bottom: 2px;
}

/* ── Message Bubbles: Teams flat bubble style ── */
body.stealth-active .msg-bubble {
  background: var(--stealth-bubble-other) !important;
  border: 1px solid var(--stealth-border) !important;
  color: var(--stealth-text) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
body.stealth-active .from-me .msg-bubble {
  background: var(--stealth-bubble-mine) !important;
  color: var(--stealth-text) !important;
  border: 1px solid var(--stealth-border-strong) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
body.stealth-active .msg-bubble.deleted {
  color: var(--stealth-text-3) !important;
  font-style: italic;
}

/* Bubble tails: uniform 8px radius */
body.stealth-active .msg-row:not(.from-me) .msg-bubble,
body.stealth-active .msg-row:not(.from-me).grouped-top .msg-bubble,
body.stealth-active .msg-row:not(.from-me).grouped-middle .msg-bubble,
body.stealth-active .msg-row:not(.from-me).grouped-bottom .msg-bubble,
body.stealth-active .msg-row.from-me .msg-bubble,
body.stealth-active .msg-row.from-me.grouped-top .msg-bubble,
body.stealth-active .msg-row.from-me.grouped-middle .msg-bubble,
body.stealth-active .msg-row.from-me.grouped-bottom .msg-bubble {
  border-radius: 8px !important;
}

/* ── Reply Quote in Stealth ── */
body.stealth-active .msg-reply-quote {
  border-left: 3px solid var(--stealth-accent) !important;
  background: var(--stealth-accent-subtle) !important;
  border-radius: 2px;
}
body.stealth-active .msg-reply-quote-name {
  color: var(--stealth-accent) !important;
  font-weight: 600;
}
body.stealth-active .msg-reply-quote-text {
  color: var(--stealth-text-2) !important;
}

/* ── from-me reply quote ── */
body.stealth-active .from-me .msg-reply-quote {
  border-left-color: var(--stealth-accent) !important;
  background: rgba(98, 100, 167, 0.05) !important;
}

/* ── Meta (time) ── */
body.stealth-active .msg-meta {
  color: var(--stealth-text-3) !important;
  font-size: 10px;
}
body.stealth-active .from-me .msg-meta {
  color: var(--stealth-text-3) !important;
}

/* ── Mention highlights ── */
body.stealth-active .msg-mention {
  color: var(--stealth-accent) !important;
  background: var(--stealth-accent-subtle) !important;
  font-weight: 600;
  border-radius: 2px;
  padding: 0 2px;
}

/* ── Link previews ── */
body.stealth-active .msg-link-preview {
  border-color: var(--stealth-border) !important;
  background: var(--stealth-surface-2) !important;
  border-radius: 4px;
}
body.stealth-active .lp-title {
  color: var(--stealth-accent) !important;
}
body.stealth-active .lp-desc,
body.stealth-active .lp-url {
  color: var(--stealth-text-2) !important;
}

/* ── Links in stealth ── */
body.stealth-active .msg-link {
  color: var(--stealth-accent) !important;
  text-decoration: underline;
}
body.stealth-active .from-me .msg-link {
  color: var(--stealth-accent) !important;
}

/* ── Quick Reactions Bar: Teams look ── */
body.stealth-active .quick-reactions {
  background: var(--stealth-surface) !important;
  border-color: var(--stealth-border) !important;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
body.stealth-active .msg-actions {
  background: var(--stealth-surface) !important;
  border-color: var(--stealth-border) !important;
  border-radius: 4px;
}

/* ── Reactions Pills ── */
body.stealth-active .reaction-pill {
  background: var(--stealth-surface) !important;
  border: 1px solid var(--stealth-border) !important;
  color: var(--stealth-text-2) !important;
  border-radius: 12px !important;
}
body.stealth-active .reaction-pill.mine {
  border-color: var(--stealth-accent) !important;
  background: var(--stealth-accent-subtle) !important;
  color: var(--stealth-accent) !important;
}

/* ── System Messages ── */
body.stealth-active .msg-system-inner {
  background: var(--stealth-surface-3);
  border: 1px solid var(--stealth-border);
  color: var(--stealth-text-2);
  border-radius: 4px;
}

/* ── Date Separators ── */
body.stealth-active .msg-date-sep {
  color: var(--stealth-text-2);
  font-weight: 600;
  font-size: 11px;
}
body.stealth-active .msg-date-sep::before,
body.stealth-active .msg-date-sep::after {
  background: var(--stealth-border-strong);
}

/* ── Jumbomoji ── */
body.stealth-active .jumbomoji .msg-text {
  filter: grayscale(0.2);
  opacity: 0.9;
}

/* ── Input Area Stealth (Teams Style Compose Box) ── */
body.stealth-active #input-area {
  background: var(--stealth-surface) !important;
  border-top: 1px solid var(--stealth-border) !important;
  padding: 12px 16px !important;
}
body.stealth-active .input-container-capsule {
  background: var(--stealth-surface) !important;
  border: 1px solid var(--stealth-border-strong) !important;
  border-radius: 4px !important; /* Flat box */
  box-shadow: none !important;
}
body.stealth-active .input-container-capsule:focus-within {
  border-color: var(--stealth-accent) !important;
  box-shadow: 0 0 0 1px var(--stealth-accent) !important;
}
body.stealth-active #msgInput {
  color: var(--stealth-text) !important;
  font-size: 14px !important;
}
body.stealth-active #msgInput::placeholder {
  color: var(--stealth-text-3) !important;
}

/* Hide emoji and image upload buttons in input capsule */
body.stealth-active .input-action-btn {
  display: none !important;
}

/* ── Send button: Teams Send Icon style ── */
body.stealth-active .send-btn {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--stealth-accent) !important;
  border-radius: 4px !important;
}
body.stealth-active .send-btn:hover:not(:disabled) {
  background: var(--stealth-surface-2) !important;
  color: var(--stealth-accent) !important;
  transform: none;
}
body.stealth-active .send-btn:disabled {
  background: transparent !important;
  color: var(--stealth-text-3) !important;
  opacity: 0.5;
}

/* ── Reply Preview ── */
body.stealth-active #reply-preview {
  background: var(--stealth-surface-2);
  border-color: var(--stealth-border);
  border-radius: 4px;
}
body.stealth-active .reply-preview-bar {
  background: var(--stealth-accent) !important;
}
body.stealth-active .reply-preview-name {
  color: var(--stealth-accent) !important;
  font-weight: 600;
}
body.stealth-active .reply-preview-text {
  color: var(--stealth-text-2) !important;
}

/* ── Timer Bar Stealth ── */
body.stealth-active #timer-bar {
  background: var(--stealth-surface) !important;
  border-bottom: 1px solid var(--stealth-border) !important;
}
body.stealth-active #timer-display {
  color: var(--stealth-text) !important;
}
body.stealth-active #timer-display.running {
  color: var(--stealth-accent) !important;
  text-shadow: none !important;
}
body.stealth-active #timer-display.urgent {
  color: #d13438 !important; /* Teams urgent red */
  text-shadow: none !important;
  animation: none !important;
}
body.stealth-active #status-label {
  color: var(--stealth-text-2) !important;
}
body.stealth-active #daily-count {
  color: var(--stealth-text-2) !important;
}
body.stealth-active .dispatch-btn {
  background: var(--stealth-accent) !important;
  box-shadow: none !important;
  color: #ffffff !important;
  border-radius: 4px !important;
}
body.stealth-active .dispatch-btn:hover {
  background: #4f46e5 !important;
  transform: none;
}
body.stealth-active .dispatch-btn.running {
  background: #d13438 !important;
}
body.stealth-active .timer-input-row label {
  color: var(--stealth-text-2);
}
body.stealth-active .timer-input-row input {
  background: var(--stealth-surface);
  border-color: var(--stealth-border-strong);
  color: var(--stealth-text);
  border-radius: 4px;
}

/* ── Search Bar Stealth ── */
body.stealth-active #search-bar {
  background: var(--stealth-surface) !important;
  border-bottom: 1px solid var(--stealth-border) !important;
}
body.stealth-active #search-input {
  color: var(--stealth-text) !important;
  background: var(--stealth-surface-2) !important;
  border: 1px solid var(--stealth-border) !important;
  border-radius: 4px !important;
}
body.stealth-active #search-input::placeholder {
  color: var(--stealth-text-3) !important;
}

/* ── Dropdown Menus Stealth (Profile Menu) ── */
body.stealth-active .dropdown-menu {
  background: var(--stealth-surface) !important;
  border-color: var(--stealth-border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  border-radius: 4px !important;
  color: var(--stealth-text) !important;
}
body.stealth-active .profile-menu-header {
  background: var(--stealth-surface-2) !important;
  border-bottom: 1px solid var(--stealth-border) !important;
}
body.stealth-active #profile-menu-avatar {
  filter: none !important;
  border-radius: 50% !important;
}
body.stealth-active #profile-menu-name {
  color: var(--stealth-text) !important;
  font-weight: 600;
}
body.stealth-active .profile-menu-link {
  color: var(--stealth-accent) !important;
}
body.stealth-active .dropdown-divider {
  background: var(--stealth-border) !important;
}
body.stealth-active .dropdown-header {
  color: var(--stealth-text-3) !important;
}
body.stealth-active .dropdown-item {
  color: var(--stealth-text-2) !important;
}
body.stealth-active .dropdown-item:hover {
  background: var(--stealth-surface-2) !important;
  color: var(--stealth-text) !important;
}
body.stealth-active .dropdown-item.danger {
  color: #d13438 !important;
}
body.stealth-active .dropdown-item.danger:hover {
  background: #fde7e9 !important;
  color: #d13438 !important;
}

/* ── Passengers Stealth ── */
body.stealth-active .passenger-li {
  border-bottom-color: var(--stealth-border) !important;
}
body.stealth-active .passenger-name {
  color: var(--stealth-text) !important;
  font-family: "Segoe UI", system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

/* ── Scroll Bottom Button ── */
body.stealth-active #scroll-bottom-btn {
  background: var(--stealth-surface) !important;
  border-color: var(--stealth-border-strong) !important;
  color: var(--stealth-text-2) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  border-radius: 50% !important;
}

/* ── Toast Stealth ── */
body.stealth-active .toast {
  background: var(--stealth-surface) !important;
  border-color: var(--stealth-border) !important;
  color: var(--stealth-text) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  border-radius: 4px !important;
}

/* ── Gallery Modal Stealth ── */
body.stealth-active .gallery-card {
  background: var(--stealth-surface) !important;
  border-color: var(--stealth-border) !important;
  border-radius: 4px !important;
}
body.stealth-active .gallery-title span {
  color: var(--stealth-text) !important;
}
body.stealth-active .gallery-count-badge {
  color: var(--stealth-text-2) !important;
}

/* ── Emoji Panel Stealth ── */
body.stealth-active #emoji-panel {
  background: var(--stealth-surface) !important;
  border-top-color: var(--stealth-border) !important;
}
body.stealth-active .emoji-cat-btn.active,
body.stealth-active .emoji-cat-btn:hover {
  background: var(--stealth-surface-2) !important;
}

/* ── Suggestion Panels ── */
body.stealth-active .suggestions-panel {
  background: var(--stealth-surface) !important;
  border-color: var(--stealth-border) !important;
  border-radius: 4px !important;
}
body.stealth-active .suggestion-item:hover {
  background: var(--stealth-surface-2) !important;
}

/* ── Search Highlight ── */
body.stealth-active .search-hl {
  background: #fff2cc !important; /* Teams highlight yellow */
  color: var(--stealth-text) !important;
}

/* ── Message Images ── */
body.stealth-active .msg-image {
  filter: none !important;
  border-radius: 4px !important;
  opacity: 1 !important;
}

/* ── Stealth transition: smooth toggle ── */
body.stealth-active #top-bar,
body.stealth-active .msg-bubble,
body.stealth-active .input-container-capsule,
body.stealth-active .send-btn,
body.stealth-active .dropdown-menu,
body.stealth-active #timer-bar {
  transition: all 0.4s ease;
}
/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .bg-orb { filter: none; animation: none; }
}

/* ── MOBILE TOUCH OPTIMIZATION (M2) ── */
button, .btn-primary, .msg-action-btn, .qr-btn, .emoji-btn,
.reaction-pill, .emoji-cat-btn, .suggestion-item, .gallery-item {
  touch-action: manipulation;
}

/* ═══════════════════════════════════════════════════════════
   GUEST DASHBOARD — Station Display Style
   ═══════════════════════════════════════════════════════════ */

#login-screen {
  background: rgba(13, 17, 23, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 3000;
}

.auth-close-btn {
  position: absolute;
  top: 16px; right: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-2);
  opacity: 0.7;
  transition: opacity 0.2s;
}
.auth-close-btn:hover { opacity: 1; }

/* ── Full-screen container ── */
#guest-dashboard {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 28px;
  position: relative;
  overflow: hidden;
  min-height: 0;
  background: transparent;
  animation: fadeIn 0.5s ease-out;
}

/* ── Hero Logo (secret trigger) ── */
.gd-hero-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 0 16px;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Guest Controls ── */
.gd-controls {
  margin-top: 24px;
  z-index: 10;
  width: 100%;
  max-width: 280px;
  display: flex;
  justify-content: center;
}

.gd-control-group {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  justify-content: center;
}

.gd-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: var(--radius-md);
}

.gd-input-wrapper label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: 0.5px;
}

.gd-input-wrapper input {
  width: 32px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}
.gd-input-wrapper input::-webkit-outer-spin-button,
.gd-input-wrapper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.gd-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border: none;
  border-radius: var(--radius-md);
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.gd-btn-dispatch {
  background: linear-gradient(135deg, var(--tube-red), #991b1b);
  box-shadow: 0 4px 12px rgba(200,16,46,0.3);
  flex: 1;
}
.gd-btn-dispatch:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(200,16,46,0.4);
}
.gd-btn-dispatch:active {
  transform: translateY(0);
}

.gd-btn-cancel {
  background: linear-gradient(135deg, #4b5563, #374151);
  box-shadow: 0 4px 12px rgba(75,85,99,0.3);
  width: 100%;
}
.gd-btn-cancel:hover {
  background: linear-gradient(135deg, var(--tube-blue), var(--tube-blue-2));
  box-shadow: 0 6px 16px rgba(26,86,219,0.4);
  transform: translateY(-1px);
}
.gd-btn-cancel:active {
  transform: translateY(0);
}

/* ── Center: main timer display ── */
.gd-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 16px;
  position: relative;
  width: 100%;
}

.gd-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--text-3);
  text-transform: uppercase;
  transition: color 0.5s ease;
}
.gd-eyebrow.running { color: var(--tube-red); }
.gd-eyebrow.arrived { color: #3fb950; }

.gd-clock {
  font-family: var(--font-display);
  font-size: clamp(72px, 22vw, 96px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.06);
  transition: color 0.4s ease, text-shadow 0.4s ease;
  position: relative;
  z-index: 2;
}

.gd-clock.running {
  color: var(--danger);
  text-shadow: 0 0 48px rgba(248, 81, 73, 0.35);
}
.gd-clock.arrived {
  color: #3fb950;
  text-shadow: 0 0 48px rgba(63, 185, 80, 0.35);
}
.gd-clock.urgent {
  color: var(--danger);
  animation: urgentPulse 0.8s ease-in-out infinite;
}

/* Animated pulse ring (shows when running) */
.gd-pulse-ring {
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 1px solid transparent;
  pointer-events: none;
  z-index: 1;
}
.gd-pulse-ring.active {
  border-color: rgba(248, 81, 73, 0.15);
  animation: gdPulse 2.5s ease-out infinite;
}

@keyframes gdPulse {
  0%   { transform: scale(0.6); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes urgentPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* ── Footer strip ── */
.gd-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 1px;
  text-transform: uppercase;
  align-self: flex-end;
}

.gd-footer-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  display: inline-block;
  opacity: 0.5;
}
.gd-footer-dot.live {
  background: #3fb950;
  opacity: 1;
  box-shadow: 0 0 6px rgba(63,185,80,0.6);
  animation: dotBlink 2s ease-in-out infinite;
}
@keyframes dotBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}