/*
 * Voicemail Widget — Frontend Styles v1.3
 * Author: Maudud Ahmad
 *
 * KEY: All modal styles are scoped under .vmw-scope to prevent
 * WordPress theme CSS from leaking in and breaking the layout.
 * The scope wrapper resets inherited styles aggressively.
 */

/* ── Trigger button (outside modal, minimal reset needed) ─────────────────── */
.vmw-trigger {
    all: unset;
    box-sizing:  border-box;
    display:     inline-flex !important;
    align-items: center;
    gap:         8px;
    padding:     10px 20px 10px 14px;
    border-radius: 999px;
    background:  #ef4444;
    color:       #fff !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:   14px !important;
    font-weight: 600;
    line-height: 1 !important;
    cursor:      pointer;
    box-shadow:  0 4px 16px rgba(239,68,68,.4);
    transition:  transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
    user-select: none;
    white-space: nowrap;
}
.vmw-trigger:hover  { background: #dc2626 !important; transform: translateY(-2px); box-shadow: 0 6px 22px rgba(239,68,68,.5); }
.vmw-trigger:active { transform: translateY(0); }
.vmw-trigger:focus-visible { outline: 3px solid #ef4444; outline-offset: 3px; }

.vmw-trigger__icon { display: flex; align-items: center; flex-shrink: 0; }
.vmw-trigger__icon svg { width: 16px !important; height: 16px !important; display: block; }
.vmw-trigger__label { white-space: nowrap; }

.vmw-trigger--floating { position: fixed !important; right: 22px; bottom: 28px; z-index: 99998; }
.vmw-trigger--inline   { position: relative; }

@media (max-width: 480px) {
    .vmw-trigger--floating .vmw-trigger__label { display: none; }
    .vmw-trigger--floating { padding: 13px !important; border-radius: 50% !important; }
}

/* ── Overlay ─────────────────────────────────────────────────────────────── */
.vmw-overlay {
    all: unset;
    display:    flex !important;
    position:   fixed !important;
    inset:      0 !important;
    z-index:    99999 !important;
    background: rgba(10, 15, 30, 0.65) !important;
    backdrop-filter: blur(8px);
    align-items:     center;
    justify-content: center;
    padding:    20px;
    box-sizing: border-box;
    opacity:    0;
    pointer-events: none;
    transition: opacity 200ms ease;
}
.vmw-overlay--open { opacity: 1 !important; pointer-events: auto !important; }

body.vmw-no-scroll { overflow: hidden !important; }

/* ════════════════════════════════════════════════════════════════════════════
   .vmw-scope — everything inside here is fully isolated from theme CSS
   ════════════════════════════════════════════════════════════════════════════ */
.vmw-scope {
    /* Hard reset inherited styles */
    all:         initial;
    display:     flex;
    flex-direction: column;
    box-sizing:  border-box;
    position:    relative;
    width:       min(390px, 100%);
    max-width:   390px;
    max-height:  90vh;
    overflow-y:  auto;
    overflow-x:  hidden;
    background:  #ffffff;
    border-radius: 16px;
    box-shadow:  0 32px 80px rgba(0,0,0,.22), 0 8px 24px rgba(0,0,0,.1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    font-size:   14px;
    color:       #111827;
    scrollbar-width: none;
    -ms-overflow-style: none;
    transform:   translateY(24px) scale(.96);
    transition:  transform 220ms cubic-bezier(.34,1.2,.64,1);
}
.vmw-scope::-webkit-scrollbar { display: none; }
.vmw-overlay--open .vmw-scope { transform: none; }

/* Every element inside scope inherits the reset cleanly */
.vmw-scope * {
    box-sizing: border-box;
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
}

/* ── Close button ─────────────────────────────────────────────────────────── */
.vmw-scope .vmw-close {
    all: unset;
    position:   absolute;
    top:        12px;
    right:      12px;
    z-index:    10;
    width:      28px;
    height:     28px;
    display:    flex;
    align-items:     center;
    justify-content: center;
    border-radius:   50%;
    background: #f3f4f6;
    color:      #6b7280;
    cursor:     pointer;
    transition: background 150ms, color 150ms;
}
.vmw-scope .vmw-close:hover { background: #e5e7eb; color: #111827; }
.vmw-scope .vmw-close svg   { width: 14px; height: 14px; display: block; stroke: currentColor; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.vmw-scope .vmw-head {
    padding:    24px 24px 18px;
    text-align: center;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}

.vmw-scope .vmw-head__icon {
    width:           44px;
    height:          44px;
    border-radius:   50%;
    background:      #fef2f2;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto 12px;
    flex-shrink:     0;
}
.vmw-scope .vmw-head__icon svg {
    width:   22px;
    height:  22px;
    display: block;
    color:   #ef4444;
    stroke:  #ef4444;
    fill:    none;
}

.vmw-scope .vmw-head__title {
    margin:      0 0 4px;
    font-size:   17px;
    font-weight: 700;
    color:       #111827;
    line-height: 1.3;
}
.vmw-scope .vmw-head__sub {
    margin:     0;
    font-size:  13px;
    color:      #6b7280;
    line-height: 1.5;
}

/* ── Body ─────────────────────────────────────────────────────────────────── */
.vmw-scope .vmw-body { padding: 20px 24px 16px; flex: 1; }

/* Section label */
.vmw-scope .vmw-label {
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color:          #9ca3af;
    margin:         0 0 10px;
}

/* ── Fields ──────────────────────────────────────────────────────────────── */
.vmw-scope .vmw-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 0; }

.vmw-scope .vmw-field { display: flex; flex-direction: column; gap: 5px; }

.vmw-scope .vmw-field-label {
    font-size:   13px;
    font-weight: 600;
    color:       #374151;
    display:     flex;
    align-items: center;
    gap:         2px;
    margin:      0;
    line-height: 1;
}
.vmw-scope .vmw-req { color: #ef4444; font-size: 13px; }

.vmw-scope .vmw-input {
    all:         unset;
    display:     block;
    width:       100%;
    padding:     10px 13px;
    background:  #f9fafb;
    border:      1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size:   14px;
    font-weight: 400;
    color:       #111827;
    line-height: 1.4;
    transition:  border-color 160ms, box-shadow 160ms, background 160ms;
}
.vmw-scope .vmw-input::placeholder { color: #c0c4cc; }
.vmw-scope .vmw-input:focus {
    border-color: #ef4444;
    background:   #fff;
    box-shadow:   0 0 0 3px rgba(239,68,68,.1);
    outline:      none;
}
.vmw-scope .vmw-input.is-error {
    border-color: #ef4444 !important;
    background:   #fff5f5 !important;
}
.vmw-scope .vmw-err {
    font-size:   11.5px;
    color:       #ef4444;
    font-weight: 500;
    margin:      0;
    display:     flex;
    align-items: center;
    gap:         3px;
}
.vmw-scope .vmw-err::before { content: '!'; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; background: #ef4444; color: #fff; border-radius: 50%; font-size: 9px; font-weight: 800; flex-shrink: 0; }

/* ── Divider ──────────────────────────────────────────────────────────────── */
.vmw-scope .vmw-div {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin:      18px 0 14px;
    font-size:   11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color:       #9ca3af;
}
.vmw-scope .vmw-div::before,
.vmw-scope .vmw-div::after { content: ''; flex: 1; height: 1px; background: #f3f4f6; }

/* ── Recorder ─────────────────────────────────────────────────────────────── */
.vmw-scope .vmw-canvas {
    display:      block;
    width:        100%;
    height:       44px;
    border-radius: 8px;
    background:   #f9fafb;
    border:       1px solid #f0f0f0;
    margin-bottom: 10px;
}

.vmw-scope .vmw-meta {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   12px;
}

.vmw-scope .vmw-timer {
    font-size:    13px;
    font-weight:  700;
    color:        #6b7280;
    font-variant-numeric: tabular-nums;
    transition:   color 200ms;
}
.vmw-scope .vmw-timer.is-warn { color: #ef4444; }
.vmw-scope .vmw-timer-max     { font-weight: 400; opacity: .55; font-size: 12px; }

.vmw-scope .vmw-status {
    font-size:  12px;
    font-weight: 500;
    color:      #9ca3af;
    margin:     0;
    text-align: right;
    transition: color 200ms;
    max-width:  58%;
    line-height: 1.3;
}
.vmw-scope .vmw-status.is-rec  { color: #ef4444; font-weight: 600; }
.vmw-scope .vmw-status.is-done { color: #16a34a; font-weight: 600; }
.vmw-scope .vmw-status.is-up   { color: #d97706; }
.vmw-scope .vmw-status.is-err  { color: #ef4444; }

/* Mic button */
.vmw-scope .vmw-mic-row { display: flex; justify-content: center; margin-bottom: 12px; }

.vmw-scope .vmw-mic {
    all:         unset;
    width:       58px;
    height:      58px;
    border-radius: 50%;
    background:  #ef4444;
    color:       #fff;
    display:     flex;
    align-items: center;
    justify-content: center;
    cursor:      pointer;
    box-shadow:  0 4px 18px rgba(239,68,68,.38);
    transition:  transform 160ms, box-shadow 160ms, background 160ms;
    flex-shrink: 0;
}
.vmw-scope .vmw-mic:hover  { background: #dc2626; transform: scale(1.08); box-shadow: 0 6px 22px rgba(239,68,68,.48); }
.vmw-scope .vmw-mic:active { transform: scale(.95); }
.vmw-scope .vmw-mic:focus-visible { outline: 3px solid #ef4444; outline-offset: 4px; }
.vmw-scope .vmw-mic.is-rec { animation: vmw-pulse 1.4s ease-in-out infinite; background: #dc2626; }
.vmw-scope .vmw-mic svg    { width: 24px; height: 24px; display: block; stroke: #fff; fill: none; }
.vmw-scope .vmw-mic svg.stop-icon { fill: #fff; stroke: none; }

@keyframes vmw-pulse {
    0%,100% { box-shadow: 0 0 0  0   rgba(220,38,38,.55); }
    50%      { box-shadow: 0 0 0 14px rgba(220,38,38,.0);  }
}

/* Playback */
.vmw-scope .vmw-playback { margin-bottom: 6px; }
.vmw-scope .vmw-audio    { display: block; width: 100%; height: 34px; border-radius: 8px; outline: none; }

.vmw-scope .vmw-rerec {
    all:         unset;
    display:     flex;
    align-items: center;
    gap:         5px;
    margin:      8px auto 0;
    padding:     5px 14px;
    border:      1.5px solid #e5e7eb;
    border-radius: 999px;
    color:       #6b7280;
    font-size:   12px;
    font-weight: 500;
    cursor:      pointer;
    transition:  border-color 150ms, color 150ms, background 150ms;
}
.vmw-scope .vmw-rerec:hover { border-color: #ef4444; color: #ef4444; background: #fff5f5; }
.vmw-scope .vmw-rerec svg   { width: 12px; height: 12px; display: block; stroke: currentColor; fill: none; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.vmw-scope .vmw-foot { padding: 8px 24px 24px; flex-shrink: 0; }

.vmw-scope .vmw-send {
    all:         unset;
    display:     flex;
    align-items: center;
    justify-content: center;
    gap:         8px;
    width:       100%;
    padding:     13px 20px;
    background:  #ef4444;
    color:       #fff;
    border-radius: 999px;
    font-size:   14px;
    font-weight: 700;
    cursor:      pointer;
    box-shadow:  0 2px 12px rgba(239,68,68,.32);
    transition:  background 160ms, transform 160ms, box-shadow 160ms, opacity 160ms;
    letter-spacing: .01em;
}
.vmw-scope .vmw-send svg { width: 15px; height: 15px; display: block; stroke: #fff; fill: none; flex-shrink: 0; }
.vmw-scope .vmw-send:not([disabled]):hover  { background: #dc2626; transform: translateY(-1px); box-shadow: 0 4px 18px rgba(239,68,68,.44); }
.vmw-scope .vmw-send:focus-visible          { outline: 3px solid #ef4444; outline-offset: 3px; }
.vmw-scope .vmw-send[disabled]              { opacity: .38; cursor: not-allowed; transform: none; box-shadow: none; }

/* Global feedback */
.vmw-scope .vmw-fb {
    margin-top:   10px;
    padding:      10px 14px;
    border-radius: 8px;
    font-size:    13px;
    font-weight:  500;
    line-height:  1.45;
}
.vmw-scope .vmw-fb.is-ok  { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.vmw-scope .vmw-fb.is-err { background: #fff5f5; color: #dc2626; border: 1px solid #fecaca; }

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .vmw-overlay, .vmw-scope, .vmw-trigger, .vmw-scope .vmw-mic { transition: none !important; animation: none !important; }
}