/* SalesCoach AI — Benutzerdefinierte Stile */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   Design-Token: Start.html Farbpalette
   ============================================================ */
:root {
  --navy:       #0b1524;
  --navy-2:     #111f35;
  --teal:       #0254bf;
  --teal-dark:  #01408f;
  --teal-light: #e3edfa;
  --ink:        #0f172a;
  --ink-soft:   #475569;
  --line:       #e2e8f0;
  --bg-soft:    #f7f9fb;
}

/* Seiten-Hintergrund App-Seiten */
.bg-slate-50 { background-color: var(--bg-soft) !important; }

/* ── Indigo → Teal/Navy Override (Tailwind-Klassen) ─────── */
.bg-indigo-600 { background-color: var(--teal) !important; }
.bg-indigo-700 { background-color: var(--teal-dark) !important; }
.bg-indigo-500 { background-color: var(--teal) !important; }
.bg-indigo-100 { background-color: var(--teal-light) !important; }
.bg-indigo-50  { background-color: rgba(227,237,250,.45) !important; }
.hover\:bg-indigo-700:hover  { background-color: var(--teal-dark) !important; }
.hover\:bg-indigo-600:hover  { background-color: var(--teal) !important; }

.text-indigo-600 { color: var(--teal-dark) !important; }
.text-indigo-700 { color: var(--teal-dark) !important; }
.text-indigo-500 { color: var(--teal) !important; }
.text-indigo-400 { color: var(--teal) !important; }
.text-indigo-300 { color: rgba(2,84,191,.85) !important; }
.text-indigo-200 { color: rgba(227,237,250,.9) !important; }
.hover\:text-indigo-700:hover { color: var(--teal-dark) !important; }
.hover\:text-indigo-600:hover { color: var(--teal-dark) !important; }

.border-indigo-600 { border-color: var(--teal) !important; }
.focus\:border-indigo-500:focus { border-color: var(--teal) !important; }

.shadow-indigo-200     { --tw-shadow-color: rgba(2,84,191,.25) !important; }
.shadow-indigo-900\/50 { --tw-shadow-color: rgba(11,21,36,.5)    !important; }

/* Gradient-Overrides */
.from-indigo-600 { --tw-gradient-from: var(--teal)      !important; }
.from-indigo-400 { --tw-gradient-from: var(--teal)      !important; }
.from-indigo-900 { --tw-gradient-from: var(--navy)      !important; }
.via-purple-600  { --tw-gradient-via:  var(--teal-dark) !important; }
.via-indigo-600  { --tw-gradient-via:  var(--teal)      !important; }
.to-indigo-700   { --tw-gradient-to:   var(--teal-dark) !important; }
.to-indigo-400   { --tw-gradient-to:   var(--teal)      !important; }
.to-purple-400   { --tw-gradient-to:   var(--teal)      !important; }
.to-purple-500   { --tw-gradient-to:   var(--teal)      !important; }
.from-purple-600 { --tw-gradient-from: var(--teal-dark) !important; }

/* Ungelesene Benachrichtigungen */
.bg-indigo-50\/40 { background-color: rgba(227,237,250,.4) !important; }

* {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--teal-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--teal); }

/* Smooth Transitions */
* { scroll-behavior: smooth; }

/* Chat-Bereich */
#chat-messages {
    scroll-behavior: smooth;
}

/* Eingabe-Felder Fokus */
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--teal);
    outline-offset: 0;
}

#audio-app select,
#audio-app select option,
#audio-app select optgroup {
    background-color: #0f172a;
    color: #f8fafc;
}

/* Trainer-Karte Hover */
.trainer-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.trainer-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -12px rgba(99, 102, 241, 0.25);
}

/* Skill-Balken Animation */
.skill-bar-fill {
    animation: fillBar 1s ease-out forwards;
}
@keyframes fillBar {
    from { width: 0%; }
}

/* Avatar-Gradient */
.avatar-gradient {
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
}

/* Puls-Animation für online-Indikator */
.pulse-dot {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Chat-Blasen */
.chat-bubble-user {
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
    color: white;
    border-radius: 1rem 1rem 0.25rem 1rem;
}
.chat-bubble-ai {
    background: #f1f5f9;
    color: #1e293b;
    border-radius: 1rem 1rem 1rem 0.25rem;
}
.chat-bubble-system {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    border-radius: 0.75rem;
}

/* KI Typing-Indikator */
.typing-dot {
    width: 7px;
    height: 7px;
    background: #94a3b8;
    border-radius: 50%;
    display: inline-block;
    animation: typingBounce 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
}

/* Radar-Chart Placeholder */
.radar-placeholder {
    background: conic-gradient(
        from 0deg,
        rgba(2,84,191,0.15) 0deg,
        rgba(1,64,143,0.2)   60deg,
        rgba(16,185,129,0.15) 120deg,
        rgba(249,115,22,0.15) 180deg,
        rgba(244,63,94,0.15)  240deg,
        rgba(2,84,191,0.15) 300deg,
        rgba(2,84,191,0.15) 360deg
    );
    border-radius: 50%;
}

/* Fortschritts-Ring */
.progress-ring-circle {
    transition: stroke-dashoffset 1s ease-in-out;
    transform-origin: center;
    transform: rotate(-90deg);
}

/* Glassmorphism Karte */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Hero-Gradient */
.hero-gradient {
    background: radial-gradient(1100px 500px at 15% -10%, #14304a 0%, var(--navy) 55%);
}

/* Notification Badge */
.notif-badge {
    animation: badgePop 0.3s ease-out;
}
@keyframes badgePop {
    0% { transform: scale(0); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Score-Anzeige in Training */
.score-ring {
    background: conic-gradient(var(--teal) calc(var(--score) * 3.6deg), var(--line) 0deg);
    border-radius: 50%;
}

/* Fade-in Animation */
.fade-in {
    animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Audio- & Video-Trainer Animationen
   ============================================================ */

/* Waveform-Balken (waveBar) — genutzt in media_trainer.php Karten */
@keyframes waveBar {
    0%, 100% { transform: scaleY(0.3); opacity: 0.5; }
    50%       { transform: scaleY(1);   opacity: 1; }
}

/* Sprechring für Video-Call Avatar */
@keyframes speakingRing {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}
.speaking-ring {
    animation: speakingRing 1.2s ease-out infinite;
}

/* Mikrofon-Pulsring (Audio-Session) */
@keyframes micRing {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* Waveform-Bar (Audio-Session, JS-animiert) */
.waveform-bar {
    transform-origin: bottom center;
    transition: height 0.12s ease, background 0.3s ease;
}

/* Waveform-Balken in media_trainer.php Karten */
.wave-card-bar {
    animation: waveBar 1s ease-in-out infinite alternate;
    transform-origin: bottom center;
}