/* ══════════════════════════════════════════════════════════════
   Notespark — voice notes
   Isolated file. Load after the other nota-*.css files.
   ══════════════════════════════════════════════════════════════ */

/* ── Recording bar ──
   Lives at the top of the editor body rather than beside the toolbar
   button, so it stays visible on a phone with the keyboard up and the
   timer isn't competing with eight icons for one row. */
.vn-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--n-surface);
    border: 1px solid var(--n-border-light);
    font-size: 13.5px;
    color: var(--n-text-2);
}

.vn-bar.live {
    background: rgba(229,115,115,0.10);
    border-color: rgba(229,115,115,0.40);
    color: #8a3b3b;
}

.vn-bar.vn-error {
    background: var(--n-danger-bg);
    border-color: rgba(220,38,38,0.30);
    color: var(--n-danger);
}

.vn-label {
    font-weight: 650;
}

/* Monospace so the timer doesn't jitter as digits change width. */
.vn-time {
    margin-left: auto;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.vn-bar.vn-error .vn-time {
    display: none;
}

/* The pulse is the only animation in the app. It earns its place: it's
   the difference between "recording" and "was recording and froze". */
.vn-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d64545;
    flex-shrink: 0;
}

.vn-bar.live .vn-pulse {
    animation: vn-pulse 1.4s ease-in-out infinite;
}

@keyframes vn-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.82); }
}

/* Respect the OS setting — a blinking dot is exactly the kind of thing
   reduced-motion exists for. Falls back to a solid dot. */
@media (prefers-reduced-motion: reduce) {
    .vn-bar.live .vn-pulse { animation: none; }
}

.vn-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    background: none;
    color: inherit;
}

.vn-stop {
    background: #d64545;
    color: #fff;
}

    .vn-stop:hover {
        background: #c03a3a;
    }

.vn-cancel {
    padding: 6px;
    color: inherit;
    opacity: 0.7;
}

    .vn-cancel:hover {
        opacity: 1;
    }

/* Recording state on the toolbar mic button */
.nota.theme-light .editor-toolbar .icon-btn.recording {
    color: #d64545 !important;
    background: rgba(229,115,115,0.14) !important;
}

/* ── Player ──
   A voice note is for listening to in place, so it gets a player rather
   than the download link every other attachment gets. */
.att-item.is-audio {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 340px;
    padding: 10px 12px;
    gap: 8px;
}

.vn-player {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.vn-player-head {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--n-text-3);
    min-width: 0;
}

.vn-player audio {
    width: 100%;
    height: 34px;
}

.nota.compact .att-item.is-audio {
    max-width: 100%;
}

/* ── Recordings under the title ──
   Indented to line up with the title text, past its accent bar (4px bar
   + 12px gap in .editor-title-row). */
.vn-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0 6px 16px;
}

    .vn-top .att-item.is-audio {
        max-width: 420px;
        padding-right: 36px;
    }

/* No hover on a phone, so the delete button is always shown. */
.nota.compact .vn-top .att-del {
    opacity: 1;
    width: 32px;
    height: 32px;
    top: 4px;
    right: 4px;
}