/* ── TTS Player ── tts-player.css ───────────────────────────── */

.tts-container {
    --tts-bg:        #f8faff;
    --tts-border:    #e2e8f4;
    --tts-text:      #143259;
    --tts-accent:    #CAF2C9;      /* brand accent green */
    --tts-accent-fg: #143259;      /* text on green bg  */
    --tts-accent-hv: #b5e8b4;     /* hover green       */
    --tts-blue:      #3071F2;      /* brand primary     */
    --tts-muted:     #8a9bb0;
    --tts-bar-color: #3071F2;
    --tts-radius:    12px;
    margin: .25rem 0 1.25rem;
}

/* ── Listen button (brand accent green) ────────────────────── */
.tts-listen-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.1rem;
    border-radius: 100px;
    background: var(--tts-accent);
    border: 1.5px solid var(--tts-accent);
    color: var(--tts-accent-fg);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 130ms ease, border-color 130ms ease, transform 130ms ease,
                box-shadow 130ms ease;
    min-height: 44px;
    line-height: 1;
}
.tts-listen-btn:hover {
    background: var(--tts-accent-hv);
    border-color: var(--tts-accent-hv);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(202, 242, 201, .5);
}
.tts-listen-btn:disabled {
    opacity: .6;
    cursor: default;
    transform: none;
    box-shadow: none;
}
.tts-play-icon { display: flex; align-items: center; flex-shrink: 0; }

/* ── Player card ───────────────────────────────────────────── */
.tts-player { margin-top: .75rem; }
.tts-player-inner {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem 1rem;
    background: var(--tts-bg);
    border: 1px solid var(--tts-border);
    border-radius: var(--tts-radius);
    flex-wrap: wrap;
}

/* ── Left section: avatar + name + badge + wave ─────────────── */
.tts-left {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-shrink: 0;
}

/* Avatar circle with glow */
.tts-avatar-wrap {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: visible;
}
.tts-avatar-wrap svg {
    display: block;
    border-radius: 50%;
    filter: drop-shadow(0 1px 3px rgba(20,50,89,.12));
}
.tts-avatar-wrap--playing svg {
    animation: tts-glow 1.8s ease-in-out infinite;
}
@keyframes tts-glow {
    0%, 100% { filter: drop-shadow(0 0 0px rgba(202,242,201,.7))
                       drop-shadow(0 1px 3px rgba(20,50,89,.12)); }
    50%       { filter: drop-shadow(0 0 7px rgba(202,242,201,.9))
                       drop-shadow(0 0 14px rgba(48,113,242,.25))
                       drop-shadow(0 1px 3px rgba(20,50,89,.12)); }
}

/* Avatar name + AI badge */
.tts-avatar-info {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    line-height: 1;
}
.tts-avatar-name {
    font-size: .78rem;
    font-weight: 700;
    color: var(--tts-text);
    letter-spacing: .01em;
}
.tts-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tts-blue);
    background: rgba(48,113,242,.07);
    border: 1px solid rgba(48,113,242,.18);
    border-radius: 100px;
    padding: .1rem .45rem;
    white-space: nowrap;
}

/* ── Soundwave bars ────────────────────────────────────────── */
.tts-wave {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 20px;
    flex-shrink: 0;
}
.tts-bar {
    display: block;
    width: 3px;
    background: var(--tts-bar-color);
    border-radius: 2px;
    transform-origin: bottom;
}
.tts-bar:nth-child(1) { height: 8px; }
.tts-bar:nth-child(2) { height: 14px; }
.tts-bar:nth-child(3) { height: 20px; }
.tts-bar:nth-child(4) { height: 14px; }
.tts-bar:nth-child(5) { height: 8px; }

.tts-wave--playing .tts-bar { animation: tts-bounce 0.8s ease-in-out infinite alternate; }
.tts-wave--playing .tts-bar:nth-child(1) { animation-delay: 0s;    animation-duration: 0.7s; }
.tts-wave--playing .tts-bar:nth-child(2) { animation-delay: 0.1s;  animation-duration: 0.9s; }
.tts-wave--playing .tts-bar:nth-child(3) { animation-delay: 0.2s;  animation-duration: 0.6s; }
.tts-wave--playing .tts-bar:nth-child(4) { animation-delay: 0.15s; animation-duration: 0.8s; }
.tts-wave--playing .tts-bar:nth-child(5) { animation-delay: 0.05s; animation-duration: 0.75s; }
@keyframes tts-bounce {
    from { transform: scaleY(0.35); }
    to   { transform: scaleY(1); }
}

/* ── Controls ──────────────────────────────────────────────── */
.tts-controls {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1;
    min-width: 180px;
    flex-wrap: wrap;
}
.tts-btn {
    background: none;
    border: 1px solid var(--tts-border);
    border-radius: 6px;
    color: var(--tts-text);
    cursor: pointer;
    padding: .25rem .45rem;
    font-size: .85rem;
    line-height: 1;
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    flex-shrink: 0;
}
.tts-btn:hover {
    background: var(--tts-accent);
    border-color: var(--tts-accent-hv);
    color: var(--tts-accent-fg);
}
.tts-progress-bar {
    flex: 1;
    min-width: 60px;
    accent-color: var(--tts-blue);
    cursor: pointer;
    height: 4px;
}
.tts-time {
    font-size: .7rem;
    color: var(--tts-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.tts-speed {
    font-size: .72rem;
    padding: .2rem .35rem;
    border: 1px solid var(--tts-border);
    border-radius: 6px;
    color: var(--tts-text);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}
.tts-speed:focus { outline: 2px solid var(--tts-blue); outline-offset: 1px; }

/* ── Error state ───────────────────────────────────────────── */
.tts-error { width: 100%; font-size: .78rem; color: #c0392b; padding: .25rem 0 0; }

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .tts-player-inner { gap: .6rem; padding: .65rem .75rem; }
    .tts-time         { display: none; }
    .tts-controls     { min-width: 100%; }
}

/* ── Dark mode ─────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .tts-container {
        --tts-bg:     #1a2236;
        --tts-border: #2d3f5c;
        --tts-text:   #e2eaf4;
        --tts-muted:  #7a8da8;
    }
    .tts-speed       { background: #1a2236; }
    .tts-avatar-name { color: #e2eaf4; }
}