/**
 * Inner Yu Voice — Frontend recorder styling
 *
 * v2.8.0 — Alles gescopet onder .iyv-frontend zodat er geen botsing
 * is met Elementor, Kadence, FluentCommunity of andere page-builders.
 *
 * Design tokens vivien hieronder lokaal — geen body-overrides.
 */

.iyv-frontend {
    /* Inner Yu tokens, lokaal — geen pagina-vervuiling */
    --iyv-fe-terracotta: #8F4738;
    --iyv-fe-terracotta-dark: #8F4738;
    --iyv-fe-sage: #5F6F63;
    --iyv-fe-cream: #FFFFFF;
    --iyv-fe-surface-2: #F5F0E8;
    --iyv-fe-border: #E8DFD0;
    --iyv-fe-text: #2C2418;
    --iyv-fe-text-soft: #4A3D30;
    --iyv-fe-text-muted: #6D6256;
    --iyv-fe-danger: #C04040;
    --iyv-fe-success: #5F6F63;

    --iyv-fe-radius: 6px;
    --iyv-fe-radius-card: 10px;

    --iyv-fe-font-heading: 'Cormorant Garamond', Georgia, serif;
    --iyv-fe-font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    font-family: var(--iyv-fe-font-body);
    color: var(--iyv-fe-text);
    line-height: 1.5;

    /* Reset specifics — sommige themes drukken h2/p anders */
    box-sizing: border-box;
}

.iyv-frontend *,
.iyv-frontend *::before,
.iyv-frontend *::after {
    box-sizing: border-box;
}

/* === Card === */
.iyv-fe-card {
    max-width: 520px;
    margin: 0 auto;
    padding: 36px 32px;
    border-radius: var(--iyv-fe-radius-card);
    text-align: center;
}

.iyv-fe-bg-cream {
    background-color: var(--iyv-fe-cream);
}
.iyv-fe-bg-transparent {
    background-color: transparent;
}

.iyv-fe-bordered {
    border: 1px solid var(--iyv-fe-border);
}

.iyv-fe-elevated {
    box-shadow: 0 4px 24px rgba(45, 42, 38, 0.06);
}

/* === Title + intro === */
.iyv-fe-title {
    font-family: var(--iyv-fe-font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.2;
    color: var(--iyv-fe-text);
    margin: 0 0 12px;
    padding: 0;
}

.iyv-fe-intro {
    font-family: var(--iyv-fe-font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--iyv-fe-text-soft);
    margin: 0 0 28px;
    padding: 0;
}

/* === Login required === */
.iyv-fe-login-required {
    padding: 12px 0 4px;
}
.iyv-fe-login-required p {
    margin: 0 0 16px;
    color: var(--iyv-fe-text-soft);
    font-size: 14px;
}

/* === Recorder state container === */
.iyv-fe-recorder {
    margin: 24px 0 16px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iyv-fe-state {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: iyv-fe-fade 200ms ease-out;
}

@keyframes iyv-fe-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === Buttons === */
.iyv-fe-btn {
    font-family: var(--iyv-fe-font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: var(--iyv-fe-radius);
    cursor: pointer;
    transition: all 150ms ease;
    border: 1px solid transparent;
    padding: 10px 20px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    line-height: 1;
}

.iyv-fe-btn:focus-visible {
    outline: 2px solid var(--iyv-fe-terracotta);
    outline-offset: 2px;
}

.iyv-frontend .iyv-fe-waveform-player__btn:focus-visible,
.iyv-frontend .iyv-fe-waveform-player__bars:focus-visible,
.iyv-frontend .iyv-fe-waveform-player__line:focus-visible {
    outline: 2px solid var(--iyv-fe-terracotta);
    outline-offset: 2px;
}

.iyv-fe-btn-primary,
.iyv-fe-btn-record {
    background-color: var(--iyv-fe-terracotta);
    color: #fff;
    border-color: var(--iyv-fe-terracotta);
    padding: 12px 28px;
    min-height: 44px;
}

.iyv-fe-btn-primary:hover,
.iyv-fe-btn-record:hover {
    background-color: var(--iyv-fe-terracotta-dark);
    border-color: var(--iyv-fe-terracotta-dark);
}

.iyv-fe-btn-record .iyv-fe-btn-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    display: inline-block;
}

.iyv-fe-btn-stop {
    background-color: var(--iyv-fe-danger);
    color: #fff;
    border-color: var(--iyv-fe-danger);
    padding: 12px 28px;
    min-height: 44px;
}
.iyv-fe-btn-stop:hover {
    /* v3.1.6: gebruik darken via filter ipv hardcoded hex zodat het token gevolgd wordt */
    background-color: var(--iyv-fe-danger);
    border-color: var(--iyv-fe-danger);
}

.iyv-fe-btn-ghost {
    background-color: transparent;
    color: var(--iyv-fe-text-soft);
    border-color: var(--iyv-fe-border);
}
.iyv-fe-btn-ghost:hover {
    background-color: var(--iyv-fe-surface-2);
    color: var(--iyv-fe-text);
}

/* === Recording state === */
.iyv-fe-rec-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    background-color: var(--iyv-fe-surface-2);
    border-radius: 100px;
}

.iyv-fe-pulse {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--iyv-fe-danger);
    animation: iyv-fe-pulse 1.4s ease-in-out infinite;
}

@keyframes iyv-fe-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.85); }
}

.iyv-fe-rec-timer {
    font-family: var(--iyv-fe-font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--iyv-fe-text);
    font-variant-numeric: tabular-nums;
}

.iyv-frontend .iyv-live-waveform {
    width: min(100%, 280px);
    color: var(--iyv-fe-text-soft);
}

.iyv-frontend .iyv-live-waveform__canvas {
    display: block;
    width: 100%;
    height: 38px;
    color: inherit;
}

/* === Preview state === */
.iyv-fe-preview-audio {
    width: 100%;
    max-width: 360px;
    height: 40px;
    border-radius: var(--iyv-fe-radius);
}

.iyv-fe-preview-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* === Sending state === */
.iyv-fe-progress {
    width: 100%;
    max-width: 280px;
    height: 6px;
    background-color: var(--iyv-fe-surface-2);
    border-radius: 100px;
    overflow: hidden;
}

.iyv-fe-progress-bar {
    height: 100%;
    width: 0%;
    background-color: var(--iyv-fe-terracotta);
    border-radius: 100px;
    transition: width 150ms ease-out;
}

.iyv-fe-progress-label {
    font-size: 13px;
    color: var(--iyv-fe-text-muted);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* === Sent state === */
.iyv-fe-sent-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--iyv-fe-surface-2);
    color: var(--iyv-fe-sage);
    display: flex;
    align-items: center;
    justify-content: center;
}

.iyv-fe-sent-text {
    font-family: var(--iyv-fe-font-heading);
    font-style: italic;
    font-size: 18px;
    line-height: 1.4;
    color: var(--iyv-fe-text);
    margin: 0;
    max-width: 360px;
}

/* === Error state === */
.iyv-fe-error-text {
    color: var(--iyv-fe-danger);
    font-size: 14px;
    margin: 0;
    max-width: 360px;
}

/* === Meta line below recorder === */
.iyv-fe-meta-line {
    margin: 16px 0 0;
    padding: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--iyv-fe-text-muted);
    font-weight: 500;
}

.iyv-fe-meta-recipient {
    color: var(--iyv-fe-text-soft);
}

.iyv-fe-meta-sep {
    margin: 0 8px;
    color: var(--iyv-fe-border);
}

/* === Responsive === */
@media (max-width: 540px) {
    .iyv-fe-card {
        padding: 28px 20px;
    }
    .iyv-fe-title {
        font-size: 28px;
    }
    .iyv-fe-intro {
        font-size: 14px;
    }
    .iyv-fe-preview-actions {
        flex-direction: column;
        width: 100%;
    }
    .iyv-fe-preview-actions .iyv-fe-btn {
        width: 100%;
    }
}

/* ============================================================
   v3.1.1 — Eén forest-dark shell (alles in één geheel)
   Vervangt v3.1.0 los inbox blok onder een cream recorder.
   Bubbles: 50% breedte, zig-zag (lid links / admin rechts),
   accent-streep links binnen elke bubble (sage / terracotta).
   ============================================================ */

.iyv-frontend--shell {
    /* Het oorspronkelijke .iyv-frontend wrapper (uit base CSS) heeft
       eigen padding/centering — we overschrijven de inhoud volledig. */
    max-width: 820px;
    margin: 0 auto;
}

.iyv-fe-shell {
    /* Forest-dark Inner Yu palette — scoped onder .iyv-fe-shell zodat
       deze waarden alleen binnen de shortcode-container actief zijn
       en het thema van de omliggende page niet beïnvloeden. */
    --iyfe-bg:         #101E1B;
    --iyfe-surface:    #1E342E;
    --iyfe-surface-2:  #32493F;
    --iyfe-surface-3:  #47614F;
    --iyfe-border:     rgba(255,255,255,.10);
    --iyfe-border-2:   rgba(255,255,255,.16);
    --iyfe-text:       #F5F0E8;
    --iyfe-text-mid:   #E8DFD0;
    --iyfe-text-light: #C7C0B6;
    --iyfe-text-faint: #A69D91;
    --iyfe-accent:     #8F4738;
    --iyfe-accent-dark:#8F4738;
    --iyfe-accent-soft:rgba(143, 71, 56, 0.18);
    --iyfe-accent-mute:rgba(143, 71, 56, 0.10);
    --iyfe-sage:       #5F6F63;
    --iyfe-sage-soft:  rgba(95, 111, 99, 0.18);

    display: flex;
    flex-direction: column;
    background: var(--iyfe-bg);
    background-image: radial-gradient(ellipse at top left, #32493F 0%, #101E1B 64%);
    border-radius: 14px;
    overflow: hidden;
    color: var(--iyfe-text);
    font-family: 'Jost', system-ui, sans-serif;
    box-shadow: 0 10px 40px rgba(16, 30, 27, 0.24);
}

/* === Header (avatar + titel) === */
.iyv-fe-shell__header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--iyfe-border);
    background: rgba(0, 0, 0, 0.12);
}

.iyv-fe-shell__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--iyfe-surface-3);
    flex-shrink: 0;
}

.iyv-fe-shell__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.iyv-fe-shell__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 22px;
    color: var(--iyfe-text);
    line-height: 1.1;
}

.iyv-fe-shell__subtitle {
    margin-top: 2px;
    font-size: 11px;
    color: var(--iyfe-text-light);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
}

/* === Loading state === */
.iyv-fe-shell__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px 20px;
}

.iyv-fe-inbox__loading-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--iyfe-accent-dark);
    opacity: 0.4;
    animation: iyv-fe-pulse 1.2s ease-in-out infinite;
}

.iyv-fe-inbox__loading-dot:nth-child(2) { animation-delay: 0.2s; }
.iyv-fe-inbox__loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes iyv-fe-pulse {
    0%, 100% { opacity: 0.3; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1);    }
}

/* === Thread area === */
.iyv-fe-shell__thread {
    min-height: 200px;
    max-height: 480px;
    overflow-y: auto;
}

.iyv-fe-shell__thread-content {
    min-height: 100%;
}

.iyv-fe-shell__messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
}

.iyv-fe-shell__empty {
    padding: 60px 24px;
    text-align: center;
    color: var(--iyfe-text-light);
    font-style: italic;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 18px;
}

.iyv-fe-shell__day {
    /* v3.1.12 — Sticky datum-pill, accent-getint (match §12.3 backend Threads) */
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: center;
    margin: 14px 0;
    pointer-events: none;
}

.iyv-fe-shell__day span {
    display: inline-block;
    padding: 4px 14px;
    background: var(--iyfe-surface);
    border: 0.5px solid rgba(143, 71, 56, 0.40); /* accent-soft border */
    border-radius: 999px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--iyfe-accent-dark);
    font-weight: 500;
    pointer-events: auto;
}

/* === Bubbles: Variant 1 frontend-stijl (v3.1.12) ===
   Transparante bg + single border-accent (sage lid / terracotta admin).
   Stack-pattern: bubble + meta-row stacked binnen .iyv-fe-bubble-stack.
   Meta-row toont tijd + (lid) "Beluisterd om HH:MM". */
.iyv-fe-bubble-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.iyv-fe-bubble-row.is-member { align-items: flex-start; }
.iyv-fe-bubble-row.is-admin  { align-items: flex-end; }

.iyv-fe-bubble-stack {
    max-width: 78%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.iyv-fe-bubble-row.is-member .iyv-fe-bubble-stack { align-items: flex-start; }
.iyv-fe-bubble-row.is-admin  .iyv-fe-bubble-stack { align-items: flex-end; }

.iyv-fe-bubble {
    padding: 12px 16px;
    min-width: 220px;
    width: 100%;
    background: rgba(255, 255, 255, 0.025);
    color: var(--iyfe-text);
    box-sizing: border-box;
}

.iyv-fe-bubble-row.is-member .iyv-fe-bubble {
    border-left: 3px solid var(--iyfe-sage);
    border-radius: 0 10px 10px 0;
}

.iyv-fe-bubble-row.is-admin .iyv-fe-bubble {
    border-right: 3px solid var(--iyfe-accent-dark);
    border-radius: 10px 0 0 10px;
}

.iyv-fe-bubble__sender {
    display: flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
}

.iyv-fe-bubble-row.is-member .iyv-fe-bubble__sender { color: var(--iyfe-sage); }
.iyv-fe-bubble-row.is-admin  .iyv-fe-bubble__sender { color: var(--iyfe-accent); }

/* Meta-row ONDER de bubble (binnen .iyv-fe-bubble-stack): tijd + read-status */
.iyv-fe-bubble__meta-row {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 10px;
    color: var(--iyfe-text-faint);
    padding: 0 4px;
}

.iyv-fe-bubble__meta-time {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.iyv-fe-bubble__meta-read {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--iyfe-accent-dark);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 9px;
}

.iyv-fe-bubble__meta-read svg { flex-shrink: 0; }

/* === Waveform player (v3.1.12) ===
   Vanilla JS implementatie binnen .iyv-fe-bubble. 40 staafjes,
   click-to-seek, sage (lid) of terracotta (admin) variant.
   Loading skeleton tot decode klaar is; line-progress fallback bij
   decode-error (CORS/exotische codecs). */
.iyv-fe-waveform-player {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.iyv-fe-waveform-player__btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 100ms ease;
    color: var(--iyfe-bg);
    padding: 0;
}

.iyv-fe-waveform-player__btn:hover:not(:disabled) { transform: scale(1.05); }
.iyv-fe-waveform-player__btn:active:not(:disabled) { transform: scale(0.96); }
.iyv-fe-waveform-player__btn:disabled { opacity: 0.4; cursor: not-allowed; }

.iyv-fe-waveform-player--member .iyv-fe-waveform-player__btn { background: var(--iyfe-sage); }
.iyv-fe-waveform-player--admin  .iyv-fe-waveform-player__btn { background: var(--iyfe-accent-dark); }

.iyv-fe-waveform-player__btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* Bars container */
.iyv-fe-waveform-player__bars {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 24px;
    min-width: 0;
    cursor: pointer;
    padding: 2px 0;
}

.iyv-fe-waveform-player__bar {
    flex-shrink: 0;
    width: 3px;
    min-height: 3px;
    border-radius: 2px;
    transition: opacity 80ms ease;
}

.iyv-fe-waveform-player--member .iyv-fe-waveform-player__bar {
    background: var(--iyfe-sage);
    opacity: 0.35;
}
.iyv-fe-waveform-player--member .iyv-fe-waveform-player__bar.is-active { opacity: 1; }

.iyv-fe-waveform-player--admin .iyv-fe-waveform-player__bar {
    background: var(--iyfe-accent-dark);
    opacity: 0.35;
}
.iyv-fe-waveform-player--admin .iyv-fe-waveform-player__bar.is-active { opacity: 1; }

/* Loading skeleton — vlakke 6px staafjes met pulse */
.iyv-fe-waveform-player__bars--loading .iyv-fe-waveform-player__bar {
    height: 6px !important;
    opacity: 0.25;
    animation: iyv-fe-wf-pulse 1.4s ease-in-out infinite;
}
.iyv-fe-waveform-player__bars--loading .iyv-fe-waveform-player__bar:nth-child(3n) { animation-delay: 0.15s; }
.iyv-fe-waveform-player__bars--loading .iyv-fe-waveform-player__bar:nth-child(5n) { animation-delay: 0.30s; }

@keyframes iyv-fe-wf-pulse {
    0%, 100% { opacity: 0.2; }
    50%      { opacity: 0.6; }
}

/* Fallback line-progress (decode mislukt) */
.iyv-fe-waveform-player__line {
    flex: 1;
    cursor: pointer;
    padding: 8px 0;
    min-width: 0;
}

.iyv-fe-waveform-player__line-bar {
    height: 3px;
    border-radius: 2px;
    position: relative;
}

.iyv-fe-waveform-player--member .iyv-fe-waveform-player__line-bar { background: rgba(143, 168, 154, 0.25); }
.iyv-fe-waveform-player--admin  .iyv-fe-waveform-player__line-bar { background: rgba(143, 71, 56, 0.25); }

.iyv-fe-waveform-player__line-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 2px;
    transition: width 100ms linear;
    width: 0%;
}

.iyv-fe-waveform-player--member .iyv-fe-waveform-player__line-fill { background: var(--iyfe-sage); }
.iyv-fe-waveform-player--admin  .iyv-fe-waveform-player__line-fill { background: var(--iyfe-accent-dark); }

/* Duration label rechts */
.iyv-fe-waveform-player__time {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    font-weight: 500;
}

.iyv-fe-waveform-player--member .iyv-fe-waveform-player__time { color: var(--iyfe-sage); }
.iyv-fe-waveform-player--admin  .iyv-fe-waveform-player__time { color: var(--iyfe-accent-dark); }

.iyv-fe-waveform-player__error {
    color: #E76F51;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* === Recorder onderaan in shell === */
.iyv-fe-shell__recorder {
    padding: 20px 22px 22px;
    border-top: 1px solid var(--iyfe-border);
    background: rgba(0, 0, 0, 0.18);
    text-align: center;
}

.iyv-fe-shell__intro {
    margin: 0 0 14px;
    color: var(--iyfe-text-light);
    font-size: 14px;
    line-height: 1.5;
}

/* v3.1.7 — Reply disabled state.
   Wordt gerenderd ipv de hele recorder als de user 'deny' override heeft
   (of als globale default uit staat). Bewust rustig, sage-getint, italic —
   past bij Inner Yu palette zonder als foutmelding te oogen.
   --modifier op de footer zelf laat eventuele subtiele padding overrides toe. */
.iyv-fe-shell__recorder--disabled {
    padding: 22px;
    text-align: center;
}

.iyv-fe-shell__disabled-message {
    margin: 0;
    padding: 18px 16px 4px;
    color: var(--iyfe-text-light);
    line-height: 1.55;
    font-style: italic;
    font-family: var(--iyv-fe-font-heading, 'Cormorant Garamond', Georgia, serif);
    /* Cormorant 16px voelt visueel als 14px Jost; we kiezen 16 zodat het
       serif-italic karakter goed leesbaar blijft, terwijl het rustig oogt. */
    font-size: 16px;
    border-top: 1px solid var(--iyfe-border);
}

/* Recorder die in shell-context staat: override de base CSS button colors
   zodat ze passen bij forest-dark. We hergebruiken alle .iyv-fe-state divs
   zoals voorheen, alleen kleuren passen we aan. */
.iyv-fe-recorder--shell {
    display: block;
}

.iyv-fe-recorder--shell .iyv-fe-btn {
    /* Reset base styling die voor cream-card was bedoeld */
    border-radius: 8px;
    font-family: 'Jost', system-ui, sans-serif;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 12px 22px;
    cursor: pointer;
    transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.iyv-fe-recorder--shell .iyv-fe-btn-record,
.iyv-fe-recorder--shell .iyv-fe-btn-primary {
    background: var(--iyfe-accent-dark);
    color: #fff;
    border: 1px solid var(--iyfe-accent-dark);
    box-shadow: 0 4px 16px rgba(143, 71, 56, 0.25);
}

.iyv-fe-recorder--shell .iyv-fe-btn-record:hover,
.iyv-fe-recorder--shell .iyv-fe-btn-primary:hover {
    /* De hover behoudt de vaste Inner Yu-terracotta en krijgt diepte via schaduw. */
    background: var(--iyfe-accent-dark);
    filter: brightness(0.88);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(143, 71, 56, 0.35);
}

.iyv-fe-recorder--shell .iyv-fe-btn-stop {
    background: var(--iyfe-surface-2);
    color: var(--iyfe-text);
    border: 1px solid var(--iyfe-border-2);
}

.iyv-fe-recorder--shell .iyv-fe-btn-stop:hover {
    background: var(--iyfe-surface-3);
}

.iyv-fe-recorder--shell .iyv-fe-btn-ghost {
    background: transparent;
    color: var(--iyfe-text-light);
    border: 1px solid var(--iyfe-border);
}

.iyv-fe-recorder--shell .iyv-fe-btn-ghost:hover {
    background: var(--iyfe-surface);
    color: var(--iyfe-text);
}

.iyv-fe-recorder--shell .iyv-fe-btn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    display: inline-block;
}

.iyv-fe-recorder--shell .iyv-fe-rec-indicator {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: var(--iyfe-surface);
    border: 1px solid var(--iyfe-border);
    border-radius: 8px;
    color: var(--iyfe-accent);
    font-weight: 500;
    margin-right: 12px;
}

.iyv-fe-recorder--shell .iyv-fe-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--iyfe-accent-dark);
    animation: iyv-fe-rec-pulse 1.2s ease-in-out infinite;
}

@keyframes iyv-fe-rec-pulse {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%      { opacity: 0.4; transform: scale(0.75); }
}

.iyv-fe-recorder--shell .iyv-fe-rec-timer {
    font-variant-numeric: tabular-nums;
    color: var(--iyfe-text);
}

.iyv-fe-recorder--shell .iyv-live-waveform {
    color: var(--iyfe-accent);
}

.iyv-fe-recorder--shell .iyv-fe-recording-preview-player {
    width: 100%;
    max-width: 520px;
    margin: 0 auto 14px;
    padding: 12px 14px;
    border: 1px solid var(--iyfe-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--iyfe-surface-2) 88%, transparent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--iyfe-bg) 28%, transparent);
    box-sizing: border-box;
}

.iyv-fe-recorder--shell .iyv-fe-recording-preview-player .iyv-fe-waveform-player__btn,
.iyv-fe-recorder--shell .iyv-fe-recording-preview-player .iyv-fe-waveform-player__bar,
.iyv-fe-recorder--shell .iyv-fe-recording-preview-player .iyv-fe-waveform-player__line-fill {
    background: var(--iyfe-accent);
}

.iyv-fe-recorder--shell .iyv-fe-recording-preview-player .iyv-fe-waveform-player__btn {
    color: var(--iyfe-button-text, #fff);
}

.iyv-fe-recorder--shell .iyv-fe-recording-preview-player .iyv-fe-waveform-player__time {
    color: var(--iyfe-text-light);
}

.iyv-fe-recorder--shell .iyv-fe-preview-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.iyv-fe-recorder--shell .iyv-fe-progress {
    height: 6px;
    background: var(--iyfe-surface-2);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.iyv-fe-recorder--shell .iyv-fe-progress-bar {
    height: 100%;
    background: var(--iyfe-accent-dark);
    width: 0;
    transition: width 100ms linear;
}

.iyv-fe-recorder--shell .iyv-fe-progress-label {
    color: var(--iyfe-text-light);
    font-size: 12px;
    margin: 0;
}

.iyv-fe-recorder--shell .iyv-fe-sent-icon {
    color: var(--iyfe-accent);
    margin-bottom: 12px;
}

.iyv-fe-recorder--shell .iyv-fe-sent-text {
    color: var(--iyfe-text);
    margin: 0 0 14px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 20px;
}

.iyv-fe-recorder--shell .iyv-fe-error-text {
    color: var(--iyfe-accent);
    margin: 0 0 12px;
    font-size: 13px;
}

/* Meta-regel onder de recorder ("Voor Nathaly · Max 5 min") */
.iyv-fe-shell__meta {
    margin: 14px 0 0;
    color: var(--iyfe-text-faint);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
}

.iyv-fe-shell__meta-name {
    color: var(--iyfe-text-light);
    font-weight: 700;
}

.iyv-fe-shell__meta-sep {
    margin: 0 6px;
    color: var(--iyfe-text-faint);
}

/* === Welcome state (niet ingelogd) === */
.iyv-fe-shell__welcome {
    padding: 48px 32px;
    text-align: center;
}

.iyv-fe-shell__welcome-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 36px;
    color: var(--iyfe-text);
    margin: 0 0 14px;
}

.iyv-fe-shell__welcome-intro {
    color: var(--iyfe-text-light);
    font-size: 15px;
    line-height: 1.6;
    max-width: 440px;
    margin: 0 auto 24px;
}

.iyv-fe-shell .iyv-fe-login-required {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--iyfe-text-light);
}

.iyv-fe-shell .iyv-fe-login-required p {
    color: var(--iyfe-text-light);
    margin-bottom: 14px;
}

.iyv-fe-shell .iyv-fe-login-required .iyv-fe-btn-primary {
    background: var(--iyfe-accent-dark);
    color: #fff;
    border: 1px solid var(--iyfe-accent-dark);
    border-radius: 8px;
    padding: 12px 22px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Jost', system-ui, sans-serif;
    font-weight: 500;
    transition: background 150ms ease;
}

.iyv-fe-shell .iyv-fe-login-required .iyv-fe-btn-primary:hover {
    background: #8F4738;
}

/* === Mobile === */
@media (max-width: 600px) {
    .iyv-fe-shell__header {
        padding: 14px 16px;
    }
    .iyv-fe-shell__title {
        font-size: 19px;
    }
    .iyv-fe-shell__messages {
        padding: 16px;
    }
    .iyv-fe-bubble-stack {
        max-width: 92%; /* v3.1.12 — was .iyv-fe-bubble width 92%, nu op stack-niveau */
    }
    .iyv-fe-shell__recorder {
        padding: 16px;
    }
    .iyv-fe-shell__welcome {
        padding: 36px 20px;
    }
    .iyv-fe-shell__welcome-title {
        font-size: 28px;
    }
    .iyv-fe-recorder--shell .iyv-fe-preview-actions {
        flex-direction: column;
    }
    .iyv-fe-recorder--shell .iyv-fe-preview-actions .iyv-fe-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   v3.1.15 — Customizable member experience
   All visual roles are driven by sanitized CSS custom properties emitted by
   VM_Frontend. Defaults map to the canonical Inner Yu forest palette.
   ============================================================================ */
.iyv-frontend--shell {
    width: 100%;
    max-width: 1100px;
    padding: 0;
}

.iyv-frontend--shell .iyv-fe-shell {
    --iyfe-border: var(--iyfe-border-color, #47614F);
    --iyfe-border-2: color-mix(in srgb, var(--iyfe-border) 72%, var(--iyfe-text) 28%);
    --iyfe-surface-3: color-mix(in srgb, var(--iyfe-surface-2) 76%, var(--iyfe-text) 24%);
    --iyfe-accent-soft: color-mix(in srgb, var(--iyfe-accent) 18%, transparent);
    --iyfe-accent-mute: color-mix(in srgb, var(--iyfe-accent) 10%, transparent);
    --iyfe-sage-soft: color-mix(in srgb, var(--iyfe-sage) 16%, transparent);

    position: relative;
    isolation: isolate;
    width: min(100%, var(--iyfe-card-max-width, 900px));
    max-width: none;
    margin: 0 auto;
    border-radius: var(--iyfe-card-radius, 20px);
    background-color: var(--iyfe-bg);
    background-image: none;
    box-shadow: none;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: var(--iyfe-font-scale, 100%);
}

.iyv-fe-shell--gradient {
    background-image:
        radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--iyfe-sage) 15%, transparent), transparent 36%),
        radial-gradient(circle at 94% 100%, color-mix(in srgb, var(--iyfe-accent) 12%, transparent), transparent 34%);
}

.iyv-fe-shell--transparent {
    background-color: transparent;
}

.iyv-fe-shell--bordered {
    border: 1px solid var(--iyfe-border);
}

.iyv-fe-shell--elevated {
    box-shadow: 0 22px 64px color-mix(in srgb, var(--iyfe-bg) 42%, transparent);
}

.iyv-fe-shell--pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    opacity: 0.36;
    background-image: radial-gradient(circle, var(--iyfe-border) 0.75px, transparent 0.75px);
    background-size: 30px 30px;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 80%);
    pointer-events: none;
}

.iyv-fe-shell > * {
    position: relative;
    z-index: 1;
}

.iyv-fe-shell__header {
    min-height: 78px;
    padding: 15px 20px;
    border-bottom-color: var(--iyfe-border);
    background: color-mix(in srgb, var(--iyfe-surface) 88%, transparent);
}

.iyv-fe-shell__identity {
    min-width: 0;
}

.iyv-fe-shell__avatar {
    width: 46px;
    height: 46px;
    border: 2px solid var(--iyfe-surface);
    background: linear-gradient(145deg, var(--iyfe-surface-2), var(--iyfe-sage-soft));
    box-shadow: 0 0 0 1px var(--iyfe-border);
}

.iyv-fe-shell__kicker,
.iyv-fe-shell__welcome-eyebrow,
.iyv-fe-shell__empty-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--iyfe-accent);
    font-size: 9px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.iyv-fe-shell__title {
    overflow: hidden;
    color: var(--iyfe-text);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iyv-fe-shell__subtitle {
    margin-top: 3px;
    overflow: hidden;
    color: var(--iyfe-text-light);
    font-size: 10px;
    font-weight: 550;
    letter-spacing: 0.08em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.iyv-fe-shell__privacy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 7px 10px;
    border: 1px solid var(--iyfe-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--iyfe-surface-2) 74%, transparent);
    color: var(--iyfe-text-light);
    font-size: 10px;
    font-weight: 650;
}

.iyv-fe-shell__thread {
    min-height: 360px;
    max-height: 620px;
    overscroll-behavior: contain;
    scrollbar-color: var(--iyfe-border) transparent;
}

.iyv-fe-shell__thread.is-empty {
    min-height: min(600px, 72vh);
    max-height: none;
    overflow: visible;
}

.iyv-fe-shell__thread.is-empty + .iyv-fe-shell__recorder:not(.iyv-fe-shell__recorder--disabled) {
    display: none;
}

.iyv-fe-shell__loading {
    min-height: 360px;
}

.iyv-fe-shell__empty,
.iyv-fe-shell__welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: min(600px, 72vh);
    padding: 52px 34px;
    background:
        radial-gradient(circle at 50% 32%, var(--iyfe-accent-soft), transparent 23%),
        radial-gradient(circle at 90% 94%, var(--iyfe-sage-soft), transparent 30%);
    color: var(--iyfe-text);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: inherit;
    font-style: normal;
    text-align: center;
}

.iyv-fe-hero-visual {
    position: relative;
    width: 150px;
    height: 150px;
    margin-bottom: 28px;
}

.iyv-fe-hero-visual__orbit {
    position: absolute;
    border: 1px solid var(--iyfe-border);
    border-radius: 50%;
}

.iyv-fe-hero-visual__orbit--outer {
    inset: 3px;
}

.iyv-fe-hero-visual__orbit--inner {
    inset: 23px;
    border-color: color-mix(in srgb, var(--iyfe-accent) 45%, transparent);
}

.iyv-fe-hero-visual__mic {
    position: absolute;
    top: 43px;
    left: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border: 1px solid color-mix(in srgb, var(--iyfe-accent) 52%, var(--iyfe-border));
    border-radius: 21px;
    background: linear-gradient(145deg, var(--iyfe-accent-strong, var(--iyfe-accent-dark)), var(--iyfe-accent));
    box-shadow: 0 18px 44px var(--iyfe-accent-soft);
    color: var(--iyfe-button-text, #fff);
    transform: rotate(-4deg);
    animation: iyv-fe-hero-float 5s ease-in-out infinite;
}

.iyv-fe-hero-visual__wave {
    position: absolute;
    width: 4px;
    border-radius: 999px;
    background: var(--iyfe-sage);
    opacity: 0.78;
}

.iyv-fe-hero-visual__wave--one {
    top: 67px;
    left: 16px;
    height: 14px;
}

.iyv-fe-hero-visual__wave--two {
    top: 61px;
    left: 25px;
    height: 26px;
}

.iyv-fe-hero-visual__wave--three {
    top: 64px;
    right: 17px;
    height: 22px;
}

@keyframes iyv-fe-hero-float {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-5px) rotate(-2deg); }
}

.iyv-fe-shell__empty-title,
.iyv-fe-shell__welcome-title {
    max-width: 680px;
    margin: 7px 0 12px;
    color: var(--iyfe-text);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(28px, 5vw, 42px);
    font-style: normal;
    font-weight: 760;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.iyv-fe-shell__empty-copy,
.iyv-fe-shell__welcome-intro {
    max-width: 620px;
    margin: 0;
    color: var(--iyfe-text-light);
    font-size: 15px;
    line-height: 1.65;
}

.iyv-fe-shell__empty-action {
    margin-top: 24px;
}

.iyv-fe-benefits {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px;
}

.iyv-fe-benefits > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid var(--iyfe-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--iyfe-surface) 76%, transparent);
    color: var(--iyfe-text-light);
    font-size: 11px;
    font-weight: 650;
}

.iyv-fe-benefits svg {
    color: var(--iyfe-sage);
}

.iyv-fe-shell .iyv-fe-btn {
    min-height: 42px;
    border-radius: var(--iyfe-button-radius, 10px);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-weight: 700;
}

.iyv-fe-shell .iyv-fe-btn-primary,
.iyv-fe-shell .iyv-fe-btn-record,
.iyv-fe-recorder--shell .iyv-fe-btn-primary,
.iyv-fe-recorder--shell .iyv-fe-btn-record {
    border-color: var(--iyfe-accent-dark);
    background: var(--iyfe-accent-dark);
    color: var(--iyfe-button-text, #fff);
    box-shadow: 0 10px 26px var(--iyfe-accent-soft);
}

.iyv-fe-shell .iyv-fe-btn-primary:hover,
.iyv-fe-shell .iyv-fe-btn-record:hover,
.iyv-fe-recorder--shell .iyv-fe-btn-primary:hover,
.iyv-fe-recorder--shell .iyv-fe-btn-record:hover {
    border-color: var(--iyfe-accent-dark);
    background: var(--iyfe-accent-dark);
    filter: brightness(0.9);
}

.iyv-fe-shell .iyv-fe-btn:focus-visible,
.iyv-fe-shell [role="slider"]:focus-visible {
    outline: 2px solid var(--iyfe-accent) !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--iyfe-accent-soft);
}

.iyv-fe-shell__messages {
    padding: 24px clamp(16px, 4vw, 34px);
    background:
        radial-gradient(circle at 10% 10%, var(--iyfe-sage-soft), transparent 24%),
        radial-gradient(circle at 90% 90%, var(--iyfe-accent-mute), transparent 26%);
}

.iyv-fe-shell__day {
    display: flex;
    align-items: center;
    gap: 12px;
}

.iyv-fe-shell__day::before,
.iyv-fe-shell__day::after {
    content: '';
    height: 1px;
    flex: 1;
    background: linear-gradient(to right, transparent, var(--iyfe-border));
}

.iyv-fe-shell__day::after {
    background: linear-gradient(to left, transparent, var(--iyfe-border));
}

.iyv-fe-shell__day span {
    border: 1px solid var(--iyfe-border);
    background: color-mix(in srgb, var(--iyfe-surface) 90%, transparent);
    color: var(--iyfe-text-light);
    box-shadow: 0 5px 16px color-mix(in srgb, var(--iyfe-bg) 34%, transparent);
    backdrop-filter: blur(8px);
}

.iyv-fe-bubble-stack {
    max-width: min(74%, 620px);
}

.iyv-fe-bubble {
    min-width: 230px;
    border: 1px solid var(--iyfe-border);
    background: color-mix(in srgb, var(--iyfe-surface) 90%, transparent);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--iyfe-bg) 32%, transparent);
    backdrop-filter: blur(10px);
}

.iyv-fe-bubble-row.is-member .iyv-fe-bubble {
    border-left: 3px solid var(--iyfe-sage);
    border-radius: 4px 15px 15px 15px;
}

.iyv-fe-bubble-row.is-admin .iyv-fe-bubble {
    border-right: 3px solid var(--iyfe-accent);
    border-radius: 15px 4px 15px 15px;
    background: color-mix(in srgb, var(--iyfe-accent-soft) 44%, var(--iyfe-surface));
}

.iyv-fe-bubble-row.is-admin .iyv-fe-bubble__sender,
.iyv-fe-bubble__meta-read,
.iyv-fe-waveform-player--admin .iyv-fe-waveform-player__time {
    color: var(--iyfe-accent);
}

.iyv-fe-waveform-player--admin .iyv-fe-waveform-player__btn,
.iyv-fe-waveform-player--admin .iyv-fe-waveform-player__bar,
.iyv-fe-waveform-player--admin .iyv-fe-waveform-player__line-fill {
    background: var(--iyfe-accent);
}

.iyv-fe-waveform-player__btn {
    color: var(--iyfe-bg);
}

.iyv-fe-shell__recorder {
    padding: 18px 22px 20px;
    border-top-color: var(--iyfe-border);
    background: color-mix(in srgb, var(--iyfe-surface) 90%, transparent);
}

.iyv-fe-shell__intro {
    max-width: 620px;
    margin-right: auto;
    margin-left: auto;
}

.iyv-fe-state-heading {
    margin: 0;
    color: var(--iyfe-text);
    font-size: 12px;
    font-weight: 700;
}

.iyv-fe-recorder--shell .iyv-fe-rec-indicator {
    margin: 0;
    border-color: var(--iyfe-border);
    border-radius: var(--iyfe-button-radius, 10px);
    background: var(--iyfe-surface-2);
}

.iyv-fe-rec-label {
    color: var(--iyfe-text-light);
    font-size: 11px;
    font-weight: 650;
}

.iyv-fe-recorder--shell .iyv-fe-pulse {
    background: var(--iyfe-danger);
}

.iyv-fe-recorder--shell .iyv-fe-sent-text,
.iyv-fe-shell__disabled-message {
    color: var(--iyfe-text);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-style: normal;
    font-weight: 650;
}

.iyv-fe-recorder--shell .iyv-fe-error-text,
.iyv-fe-waveform-player__error {
    color: var(--iyfe-danger);
}

.iyv-fe-shell--compact .iyv-fe-shell__header {
    min-height: 66px;
    padding: 11px 16px;
}

.iyv-fe-shell--compact .iyv-fe-shell__messages {
    padding-top: 16px;
    padding-bottom: 16px;
}

.iyv-fe-shell--compact .iyv-fe-shell__recorder {
    padding-top: 13px;
    padding-bottom: 14px;
}

/* ============================================================================
   v3.1.19 — zachte donkere frontend, warme light mode en speelsere Voice-laag
   ============================================================================ */
.iyv-fe-shell--theme-dark {
    color-scheme: dark;
}

.iyv-fe-shell--theme-light {
    color-scheme: light;
}

.iyv-frontend--shell .iyv-fe-shell::after {
    content: '';
    position: absolute;
    top: -92px;
    right: -74px;
    z-index: 0;
    width: 238px;
    height: 210px;
    border: 1px solid color-mix(in srgb, var(--iyfe-accent) 28%, transparent);
    border-radius: 58% 42% 52% 48% / 46% 58% 42% 54%;
    box-shadow:
        0 0 0 24px color-mix(in srgb, var(--iyfe-accent) 4%, transparent),
        0 0 0 52px color-mix(in srgb, var(--iyfe-sage) 4%, transparent);
    opacity: 0.72;
    transform: rotate(14deg);
    pointer-events: none;
}

.iyv-fe-shell--theme-dark.iyv-fe-shell--gradient {
    background-image:
        radial-gradient(circle at 7% 0%, color-mix(in srgb, var(--iyfe-sage) 22%, transparent), transparent 34%),
        radial-gradient(circle at 94% 100%, color-mix(in srgb, var(--iyfe-accent) 18%, transparent), transparent 32%),
        linear-gradient(155deg, color-mix(in srgb, var(--iyfe-bg) 88%, var(--iyfe-surface)), var(--iyfe-bg));
}

.iyv-fe-shell--theme-light.iyv-fe-shell--gradient {
    background-image:
        radial-gradient(circle at 7% 0%, color-mix(in srgb, var(--iyfe-sage) 12%, transparent), transparent 34%),
        radial-gradient(circle at 94% 100%, color-mix(in srgb, var(--iyfe-accent) 10%, transparent), transparent 32%),
        linear-gradient(155deg, color-mix(in srgb, var(--iyfe-bg) 88%, #FFFFFF), var(--iyfe-bg));
}

.iyv-fe-shell--theme-light.iyv-fe-shell--elevated {
    box-shadow: 0 22px 64px rgba(74, 61, 48, 0.14);
}

.iyv-fe-shell--theme-dark .iyv-fe-shell__header,
.iyv-fe-shell--theme-dark .iyv-fe-shell__recorder {
    background: color-mix(in srgb, var(--iyfe-surface) 90%, var(--iyfe-bg));
}

.iyv-fe-shell--theme-light .iyv-fe-shell__header,
.iyv-fe-shell--theme-light .iyv-fe-shell__recorder {
    background: color-mix(in srgb, var(--iyfe-surface) 94%, transparent);
}

.iyv-fe-shell__header {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.iyv-fe-shell__privacy {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--iyfe-sage) 12%, transparent);
}

.iyv-fe-shell__day span {
    padding: 5px 15px;
    border-color: color-mix(in srgb, var(--iyfe-accent) 44%, var(--iyfe-border));
    border-radius: 999px 999px 999px 12px;
}

.iyv-fe-bubble {
    border-radius: 18px;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--iyfe-bg) 24%, transparent);
}

.iyv-fe-bubble-row.is-member .iyv-fe-bubble {
    border-left-width: 4px;
    border-radius: 7px 20px 20px 20px;
}

.iyv-fe-bubble-row.is-admin .iyv-fe-bubble {
    border-right-width: 4px;
    border-radius: 20px 7px 20px 20px;
}

.iyv-fe-waveform-player__btn {
    color: #FFFFFF;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 8%, transparent);
}

.iyv-fe-shell .iyv-fe-btn-primary,
.iyv-fe-shell .iyv-fe-btn-record,
.iyv-fe-recorder--shell .iyv-fe-btn-primary,
.iyv-fe-recorder--shell .iyv-fe-btn-record {
    border-radius: var(--iyfe-button-radius, 14px) var(--iyfe-button-radius, 14px) var(--iyfe-button-radius, 14px) 6px;
}

.iyv-fe-shell--theme-dark .iyv-fe-shell__kicker,
.iyv-fe-shell--theme-dark .iyv-fe-shell__welcome-eyebrow,
.iyv-fe-shell--theme-dark .iyv-fe-shell__empty-eyebrow,
.iyv-fe-shell--theme-dark .iyv-fe-bubble-row.is-admin .iyv-fe-bubble__sender,
.iyv-fe-shell--theme-dark .iyv-fe-bubble__meta-read,
.iyv-fe-shell--theme-dark .iyv-fe-waveform-player--admin .iyv-fe-waveform-player__time,
.iyv-fe-shell--theme-dark .iyv-fe-shell__day span {
    color: #E0CD9C;
}

.iyv-fe-shell--theme-dark .iyv-fe-bubble-row.is-member .iyv-fe-bubble__sender,
.iyv-fe-shell--theme-dark .iyv-fe-waveform-player--member .iyv-fe-waveform-player__time,
.iyv-fe-shell--theme-dark .iyv-fe-bubble__meta-row {
    color: var(--iyfe-text-light);
}

.iyv-fe-shell--theme-dark .iyv-fe-waveform-player--admin .iyv-fe-waveform-player__bar {
    background: #E0CD9C;
    opacity: 0.86;
}

.iyv-fe-shell--theme-dark .iyv-fe-waveform-player--admin .iyv-fe-waveform-player__bar.is-active {
    background: color-mix(in srgb, var(--iyfe-accent) 40%, #F5F0E8);
    opacity: 1;
}

.iyv-fe-shell--theme-dark .iyv-fe-waveform-player--member .iyv-fe-waveform-player__bar {
    background: #D8D0C4;
    opacity: 0.78;
}

.iyv-fe-shell--theme-dark .iyv-fe-waveform-player--member .iyv-fe-waveform-player__bar.is-active {
    background: #F5F0E8;
    opacity: 1;
}

.iyv-fe-shell--theme-dark .iyv-fe-waveform-player--admin .iyv-fe-waveform-player__line-bar,
.iyv-fe-shell--theme-dark .iyv-fe-waveform-player--member .iyv-fe-waveform-player__line-bar {
    background: color-mix(in srgb, #E0CD9C 52%, transparent);
}

.iyv-fe-shell--theme-dark .iyv-fe-waveform-player__line-fill {
    background: color-mix(in srgb, var(--iyfe-accent) 40%, #F5F0E8);
}

.iyv-fe-shell--theme-light .iyv-fe-waveform-player--admin .iyv-fe-waveform-player__bar {
    background: var(--iyfe-accent);
    opacity: 0.78;
}

.iyv-fe-shell--theme-light .iyv-fe-waveform-player--member .iyv-fe-waveform-player__bar {
    background: var(--iyfe-sage);
    opacity: 0.72;
}

.iyv-fe-shell--theme-light .iyv-fe-waveform-player__bar.is-active {
    opacity: 1;
}

.iyv-fe-shell--theme-light .iyv-fe-bubble {
    box-shadow: 0 12px 28px rgba(74, 61, 48, 0.08);
}

.iyv-fe-shell--theme-light .iyv-fe-shell__day span {
    box-shadow: 0 6px 18px rgba(74, 61, 48, 0.08);
}

/* Rijke lichte frontend: koel groen canvas, fris wit en volle merkaccenten. */
.iyv-fe-shell--theme-light.iyv-fe-shell--gradient {
    background-image:
        radial-gradient(circle at 7% 0%, color-mix(in srgb, var(--iyfe-sage) 28%, transparent), transparent 36%),
        radial-gradient(circle at 94% 100%, color-mix(in srgb, var(--iyfe-accent) 20%, transparent), transparent 34%),
        linear-gradient(155deg, color-mix(in srgb, var(--iyfe-bg) 78%, #FFFFFF), var(--iyfe-bg));
}

.iyv-fe-shell--theme-light.iyv-fe-shell--elevated {
    box-shadow: 0 22px 64px color-mix(in srgb, var(--iyfe-sage) 22%, transparent);
}

.iyv-fe-shell--theme-light .iyv-fe-shell__header,
.iyv-fe-shell--theme-light .iyv-fe-shell__recorder {
    border-color: var(--iyfe-sage);
    background: color-mix(in srgb, var(--iyfe-surface) 96%, transparent);
}

.iyv-fe-shell--theme-light .iyv-fe-shell__privacy {
    border-color: var(--iyfe-sage);
    background: var(--iyfe-sage);
    color: #FFFFFF;
    box-shadow: 0 5px 14px color-mix(in srgb, var(--iyfe-sage) 24%, transparent);
}

.iyv-fe-shell--theme-light .iyv-fe-shell__day span {
    border-color: var(--iyfe-accent);
    background: var(--iyfe-accent);
    color: #FFFFFF;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--iyfe-accent) 24%, transparent);
}

.iyv-fe-shell--theme-light .iyv-fe-bubble-row.is-member .iyv-fe-bubble {
    border-color: color-mix(in srgb, var(--iyfe-sage) 68%, var(--iyfe-border));
    border-left-color: var(--iyfe-sage);
    background: color-mix(in srgb, var(--iyfe-surface-2) 58%, #FFFFFF);
}

.iyv-fe-shell--theme-light .iyv-fe-bubble-row.is-admin .iyv-fe-bubble {
    border-color: color-mix(in srgb, var(--iyfe-accent) 54%, var(--iyfe-border));
    border-right-color: var(--iyfe-accent);
    background: color-mix(in srgb, var(--iyfe-accent) 10%, #FFFFFF);
}

.iyv-fe-shell--theme-light .iyv-fe-bubble {
    box-shadow: 0 12px 28px color-mix(in srgb, var(--iyfe-sage) 16%, transparent);
}

.iyv-fe-shell--theme-light .iyv-fe-waveform-player--admin .iyv-fe-waveform-player__time,
.iyv-fe-shell--theme-light .iyv-fe-bubble-row.is-admin .iyv-fe-bubble__sender,
.iyv-fe-shell--theme-light .iyv-fe-bubble__meta-read {
    color: var(--iyfe-accent);
}

.iyv-fe-shell--theme-light .iyv-fe-waveform-player--member .iyv-fe-waveform-player__time,
.iyv-fe-shell--theme-light .iyv-fe-bubble-row.is-member .iyv-fe-bubble__sender {
    color: var(--iyfe-sage);
}

@media (max-width: 600px) {
    .iyv-frontend--shell .iyv-fe-shell {
        width: 100%;
        border-radius: min(var(--iyfe-card-radius, 20px), 16px);
    }

    .iyv-fe-shell__header {
        padding: 13px 14px;
    }

    .iyv-fe-shell__privacy {
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
    }

    .iyv-fe-shell__privacy span {
        display: none;
    }

    .iyv-fe-shell__thread.is-empty,
    .iyv-fe-shell__empty,
    .iyv-fe-shell__welcome {
        min-height: min(560px, 72vh);
    }

    .iyv-fe-shell__empty,
    .iyv-fe-shell__welcome {
        padding: 38px 18px;
    }

    .iyv-fe-hero-visual {
        width: 132px;
        height: 132px;
        margin-bottom: 22px;
    }

    .iyv-fe-hero-visual__orbit--inner {
        inset: 20px;
    }

    .iyv-fe-hero-visual__mic {
        top: 37px;
        left: 37px;
        width: 58px;
        height: 58px;
        border-radius: 19px;
    }

    .iyv-fe-hero-visual__wave--one { top: 59px; left: 13px; }
    .iyv-fe-hero-visual__wave--two { top: 53px; left: 21px; }
    .iyv-fe-hero-visual__wave--three { top: 56px; right: 14px; }

    .iyv-fe-shell__empty-title,
    .iyv-fe-shell__welcome-title {
        font-size: clamp(27px, 9vw, 34px);
    }

    .iyv-fe-shell__empty-copy,
    .iyv-fe-shell__welcome-intro {
        font-size: 14px;
    }

    .iyv-fe-benefits {
        gap: 6px;
    }

    .iyv-fe-benefits > span {
        padding: 6px 8px;
        font-size: 10px;
    }

    .iyv-fe-bubble-stack {
        max-width: 92%;
    }

    .iyv-fe-bubble {
        min-width: min(230px, 78vw);
    }
}

@media (prefers-reduced-motion: reduce) {
    .iyv-frontend *,
    .iyv-frontend *::before,
    .iyv-frontend *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}