/* ══════════════════════════════════════════════════════════════
   SHOUT — Micro-interaction polish layer
   Adds life, depth, and feedback to every interaction.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. SPEAKING PULSE GLOW ────────────────────────────────── */
/* Applied to voice user avatars when speaking */
@keyframes speakPulse {
  0%   { box-shadow: 0 0 10px rgba(100,255,180,0.25), inset 0 0 6px rgba(100,255,180,0.08); border-color: rgba(100,255,180,0.35); }
  50%  { box-shadow: 0 0 18px rgba(100,255,180,0.5), inset 0 0 10px rgba(100,255,180,0.15); border-color: rgba(100,255,180,0.55); }
  100% { box-shadow: 0 0 10px rgba(100,255,180,0.25), inset 0 0 6px rgba(100,255,180,0.08); border-color: rgba(100,255,180,0.35); }
}
@keyframes heroPulse {
  0%,100% { opacity:0.6; transform:scale(1); }
  50% { opacity:1; transform:scale(1.2); }
}

/* ── 2. PRESS FEEDBACK ─────────────────────────────────────── */
/* Fallback press for buttons without JS handlers. NOT !important — JS handlers win. */
button:active,
a:active,
[role="button"]:active {
  transform: scale(0.96);
  transition: transform 60ms ease;
}

/* ── 3. HOVER LIFT ─────────────────────────────────────────── */
/* Component-level hover handlers are primary. This is the fallback. */
[data-voice-lobby] button:hover {
  transform: scale(1.05);
}
[data-voice-lobby] button:active {
  transform: scale(0.94);
}

/* ── LIVE badge layered glow ──────────────────────────────── */
@keyframes livePulse {
  0%,100% { box-shadow: 0 0 6px rgba(224,122,99,0.8), 0 0 16px rgba(224,122,99,0.3), 0 0 32px rgba(224,122,99,0.1); }
  50%     { box-shadow: 0 0 8px rgba(224,122,99,1), 0 0 20px rgba(224,122,99,0.5), 0 0 40px rgba(224,122,99,0.2); }
}

/* ── Volume/range slider active glow ─────────────────────── */
input[type="range"]:active {
  filter: brightness(1.2);
}
input[type="range"] {
  transition: filter 0.15s ease;
}

/* ── Idle float for stage breathing ──────────────────────── */
@keyframes idleFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-2px); }
}

/* ── 4. GLOBAL TRANSITION BASE ─────────────────────────────── */
/* Unified timing for all interactive elements */
button, a, [role="button"], input, select, textarea {
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease, filter 140ms ease, opacity 140ms ease;
}

/* ── 5. MESSAGE FADE-IN ────────────────────────────────────── */
@keyframes msgSlideIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 6. PANEL DEPTH ────────────────────────────────────────── */
/* Sidebar panels get subtle depth */
[style*="border-right: 1px solid"],
[style*="border-left: 1px solid"] {
  box-shadow: 4px 0 20px rgba(0,0,0,0.15);
}

/* ── 7. CURSOR RULES ───────────────────────────────────────── */
button, a, [role="button"], [onclick], summary { cursor: pointer; }
[draggable="true"] { cursor: grab; }
[draggable="true"]:active { cursor: grabbing; }
input, textarea, [contenteditable="true"] { cursor: text; }

/* ── 8. SCROLLBAR + SCROLL BEHAVIOR ───────────────────────── */
/* Smooth scrolling on html — panels opt-in via inline style */
html {
  scroll-behavior: smooth;
}
/* Note: no scrollbar-gutter on html — app manages overflow per-panel */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(200,173,96,0.12);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(200,173,96,0.25);
}

/* ── 9. FOCUS RING ─────────────────────────────────────────── */
/* Keyboard-only focus rings — never shown on mouse click */
:focus-visible {
  outline: 2px solid rgba(106,157,207,0.55);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 4px rgba(106,157,207,0.12);
}
/* Stronger ring for buttons and interactive rows */
button:focus-visible, [role="button"]:focus-visible, a:focus-visible {
  outline: 2px solid rgba(200,168,78,0.5);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(200,168,78,0.1);
}
/* Input focus ring (gold accent) */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid rgba(200,168,78,0.4);
  outline-offset: 1px;
  box-shadow: 0 0 8px rgba(200,168,78,0.12);
}
/* Hide focus ring on mouse click (only show for keyboard nav) */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ── 10. REDUCED MOTION ───────────────────────────────────── */
/* Respect user accessibility preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 11. SELECTION COLOR ───────────────────────────────────── */
::selection {
  background: rgba(200,173,96,0.25);
  color: #f5eddc;
}

/* ══════════════════════════════════════════════════════════════
   SETTINGS PANEL POLISH
   ══════════════════════════════════════════════════════════════ */

/* ── 12. STAGGERED ENTRANCE ────────────────────────────────── */
/* Use these on child elements with animation-delay for cascading feel */
@keyframes staggerIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Stagger classes available for components that need cascading entrance */

/* Settings content fade-in on tab switch */
@keyframes settingsFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Avatar decoration animations */
@keyframes decoSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes decoPulse {
  0%, 100% { opacity: 0.7; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.3); }
}

/* All settings inputs — interactive feel */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], textarea, select {
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease !important;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="url"]:focus, textarea:focus, select:focus {
  border-color: rgba(200,173,96,0.35) !important;
  box-shadow: 0 0 8px rgba(200,173,96,0.1) !important;
}
input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover,
textarea:hover, select:hover {
  border-color: rgba(255,255,255,0.08) !important;
}

/* Settings range sliders — accent color fill */
input[type="range"] {
  accent-color: #c8a84e;
  cursor: pointer;
}
input[type="range"]:active {
  accent-color: #efd48b;
}

/* Settings checkboxes/toggles — accent */
input[type="checkbox"] {
  accent-color: #4e8a63;
  cursor: pointer;
}

/* Scroll fade edges for settings content */
.settings-scroll-fade {
  mask-image: linear-gradient(to bottom, transparent 0%, black 3%, black 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 3%, black 97%, transparent 100%);
}

/* ══════════════════════════════════════════════════════════════
   HIGH CONTRAST MODE
   ══════════════════════════════════════════════════════════════ */

[data-high-contrast="true"] {
  --bg-base: #000000;
  --text-primary: #ffffff;
  --border-soft: rgba(255,255,255,0.2);
}

/* Override background colors for better visibility */
[data-high-contrast="true"] body {
  background: #000000 !important;
}

/* Sidebar and panel backgrounds */
[data-high-contrast="true"] [style*="background: linear-gradient"],
[data-high-contrast="true"] [style*="background: radial-gradient"] {
  background: #000000 !important;
}

/* Text visibility */
[data-high-contrast="true"] [style*="color: #6a5a4a"],
[data-high-contrast="true"] [style*="color: #5a4a3a"],
[data-high-contrast="true"] [style*="color: #4a3a2a"],
[data-high-contrast="true"] [style*="color: #7d6f5b"],
[data-high-contrast="true"] [style*="color: #8a7a6a"],
[data-high-contrast="true"] [style*="color: #7a6a5a"] {
  color: #cccccc !important;
}

/* Primary text — make white */
[data-high-contrast="true"] [style*="color: #c8b89a"],
[data-high-contrast="true"] [style*="color: #d9ccb3"],
[data-high-contrast="true"] [style*="color: #c8a84e"],
[data-high-contrast="true"] [style*="color: #e6d6b8"],
[data-high-contrast="true"] [style*="color: #9a8a7a"] {
  color: #ffffff !important;
}

/* Borders — increase contrast */
[data-high-contrast="true"] [style*="border: 1px solid rgba(255,255,255,0.0"] {
  border-color: rgba(255,255,255,0.2) !important;
}
[data-high-contrast="true"] [style*="border: 1px solid rgba(30,28,24"] {
  border-color: rgba(255,255,255,0.2) !important;
}

/* Input fields */
[data-high-contrast="true"] input,
[data-high-contrast="true"] textarea,
[data-high-contrast="true"] select {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.3) !important;
}

/* Buttons */
[data-high-contrast="true"] button {
  border-color: rgba(255,255,255,0.2) !important;
}

/* Scrollbar */
[data-high-contrast="true"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
}
[data-high-contrast="true"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.4);
}

/* Selection */
[data-high-contrast="true"] ::selection {
  background: rgba(255,255,255,0.3);
  color: #ffffff;
}

/* Message content */
[data-high-contrast="true"] .msg-content {
  color: #ffffff !important;
}

/* Focus ring — brighter */
[data-high-contrast="true"] :focus-visible {
  outline-color: rgba(255,255,255,0.7) !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.2) !important;
}

/* ── Custom scrollbars ────────────────────────────────────── */
/* Thin gold-tinted scrollbars matching the dark theme. */
*::-webkit-scrollbar { width: 6px; }
*::-webkit-scrollbar:horizontal { height: 0; display: none; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(200, 168, 78, 0.15);
  border-radius: 3px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(200, 168, 78, 0.3);
}
*::-webkit-scrollbar-corner { background: transparent; }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: rgba(200, 168, 78, 0.15) transparent; }

/* Selection highlight color to match theme */
::selection {
  background: rgba(200, 168, 78, 0.3);
  color: inherit;
}