/* ==========================================================================
   Mardon Biologiya — Clean Visual Hierarchy & Zero-Experience UX Design System
   Responsive: Mobile APK, Tablet, Desktop
   Dual Theme: Auto (OS), Light (Kun), Dark (Tun)
   Visual Hierarchy Levels:
   1. Hero / Primary CTA: Lush Emerald Gradient with high elevation & pulse
   2. Primary Card: Crisp White / Deep Slate with clear step badges
   3. Secondary Action: Outlined high-contrast button
   4. Muted / Supporting Info: Soft neutral background
   ========================================================================== */

/* -------------------------------------------------------------
   Page Backgrounds & Color Foundations
   ------------------------------------------------------------- */
body {
  background-color: #F4F7F5;
  background-image: 
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(16, 185, 129, 0.10), transparent 65%),
    radial-gradient(ellipse 800px 500px at 90% 100%, rgba(20, 184, 166, 0.06), transparent 65%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: #0F172A;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s ease, color 0.2s ease;
}

html.dark body {
  background-color: #090E1A;
  background-image: 
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(16, 185, 129, 0.14), transparent 65%),
    radial-gradient(ellipse 800px 500px at 90% 100%, rgba(20, 184, 166, 0.08), transparent 65%);
  color: #F8FAFC;
}

/* -------------------------------------------------------------
   Card Hierarchy Surfaces
   ------------------------------------------------------------- */
.glass-panel {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
html.dark .glass-panel {
  background: rgba(15, 23, 42, 0.90);
  border: 1px solid rgba(51, 65, 85, 0.8);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.glass-panel-elevated {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  box-shadow: 0 10px 28px -6px rgba(15, 23, 42, 0.06), 0 2px 8px -2px rgba(15, 23, 42, 0.03);
}
html.dark .glass-panel-elevated {
  background: rgba(15, 23, 42, 0.92);
  border: 1.5px solid rgba(51, 65, 85, 0.85);
  box-shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.65);
}

.glass-panel-highlight {
  background: #FFFFFF;
  border: 2px solid #10B981;
  box-shadow: 0 14px 34px -6px rgba(16, 185, 129, 0.16), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
}
html.dark .glass-panel-highlight {
  background: rgba(15, 23, 42, 0.95);
  border: 2px solid #10B981;
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.75), 0 0 24px -4px rgba(16, 185, 129, 0.22);
}

/* -------------------------------------------------------------
   Inner Cards
   ------------------------------------------------------------- */
.persona-tone-card {
  background: #F0FDF4;
  border: 1px solid #A7F3D0;
}
html.dark .persona-tone-card {
  background: rgba(6, 78, 59, 0.25) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

.code-invite-box {
  background: #F0FDF4;
  border: 1px solid #A7F3D0;
}
html.dark .code-invite-box {
  background: rgba(6, 78, 59, 0.20) !important;
  border: 1px solid rgba(16, 185, 129, 0.28) !important;
}

/* -------------------------------------------------------------
   Interactive Param Pills (Question Count Selector)
   ------------------------------------------------------------- */
.param-pill {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: 1.5px solid #CBD5E1;
  background: #FFFFFF;
  color: #334155;
}
.param-pill:hover {
  border-color: #10B981;
  background: #F0FDF4;
  color: #065F46;
}
.param-pill.active {
  border: 2px solid #059669 !important;
  background: #ECFDF5 !important;
  color: #065F46 !important;
  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.25);
}
.param-pill.active .pill-number {
  color: #047857 !important;
}
.param-pill.active .pill-label {
  color: #059669 !important;
}

html.dark .param-pill {
  border: 1.5px solid #334155;
  background: #0F172A;
  color: #E2E8F0;
}
html.dark .param-pill:hover {
  border-color: #10B981;
  background: rgba(6, 78, 59, 0.3);
  color: #FFFFFF;
}
html.dark .param-pill.active {
  border: 2px solid #10B981 !important;
  background: rgba(6, 78, 59, 0.55) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 18px -3px rgba(16, 185, 129, 0.45);
}
html.dark .param-pill.active .pill-number {
  color: #34D399 !important;
}
html.dark .param-pill.active .pill-label {
  color: #A7F3D0 !important;
}

/* -------------------------------------------------------------
   Dropzone Hover & Active
   ------------------------------------------------------------- */
.dropzone-active {
  border-color: #10B981 !important;
  background: rgba(16, 185, 129, 0.08) !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
}

/* -------------------------------------------------------------
   Glowing Pulsing Mic Button
   ------------------------------------------------------------- */
@keyframes mic-pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.75), 0 0 25px rgba(239, 68, 68, 0.5);
    transform: scale(0.98);
  }
  50% {
    box-shadow: 0 0 0 22px rgba(239, 68, 68, 0), 0 0 40px rgba(239, 68, 68, 0.85);
    transform: scale(1.04);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0), 0 0 25px rgba(239, 68, 68, 0.5);
    transform: scale(0.98);
  }
}

.mic-active-pulse {
  animation: mic-pulse-ring 1.5s infinite ease-in-out !important;
  border-color: #EF4444 !important;
}

/* Ustoz Audio Orb Glow */
@keyframes orb-speak-glow {
  0%, 100% {
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.45), inset 0 0 15px rgba(20, 184, 166, 0.35);
    transform: scale(1.0);
  }
  50% {
    box-shadow: 0 0 45px rgba(16, 185, 129, 0.8), inset 0 0 25px rgba(20, 184, 166, 0.6);
    transform: scale(1.05);
  }
}

.orb-speaking {
  animation: orb-speak-glow 1.6s infinite ease-in-out;
  border-color: #34D399 !important;
}

/* -------------------------------------------------------------
   Audio Visualizer Wave Bars
   ------------------------------------------------------------- */
.sound-wave-bar {
  width: 5px;
  background: linear-gradient(to top, #10B981, #059669);
  border-radius: 9999px;
  transition: height 0.08s ease;
  min-height: 6px;
}

/* -------------------------------------------------------------
   Safe Area Padding for Mobile Bottom Bar
   ------------------------------------------------------------- */
.pb-safe {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0.75rem));
}

/* -------------------------------------------------------------
   Custom Sleek Scrollbars
   ------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(16, 185, 129, 0.35);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(16, 185, 129, 0.65);
}

/* -------------------------------------------------------------
   Focus & Selection Rings
   ------------------------------------------------------------- */
input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
  border-color: #10B981 !important;
}

/* Score animation ring */
.score-badge-glow {
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25);
}

/* Touch active feedback */
@media (hover: none) and (pointer: coarse) {
  button:active, a:active {
    transform: scale(0.97);
  }
}

/* Dialogs remain usable with zoom and short/landscape viewports. */
[role="dialog"] { overflow-y: auto; overscroll-behavior: contain; }
[role="dialog"] > div { max-height: calc(100dvh - 2rem); overflow-y: auto; margin-block: auto; }
input, select, textarea { max-width: 100%; }
:focus-visible { outline: 3px solid #10b981; outline-offset: 3px; }
@media (max-width: 480px) { [role="dialog"] { padding: .5rem; } [role="dialog"] > div { max-height: calc(100dvh - 1rem); } }