/* ══════════════════════════════════════════════════════════════
   Notespark — voice capture, sidebar + compact

   Companion to nota-voice.css. Deliberately reuses that file's
   vocabulary — #d64545, the rgba(229,115,115,…) tints, #8a3b3b for
   live text, weight 650, the monospace timer, and the vn-pulse
   keyframes — so the sidebar reads as the same feature as the
   recording bar on a note page rather than a lookalike.

   Load AFTER nota-voice.css and nota-sidebar.css.
   ══════════════════════════════════════════════════════════════ */

/* ══ SIDEBAR CAPTURE ROWS ═════════════════════════════════════ */

.sb-capture {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
}

.sb-caprow {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    color: var(--n-text-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background .13s ease, color .13s ease;
}

    .sb-caprow:hover {
        background: var(--n-surface);
        color: var(--n-text-1);
    }

    .sb-caprow:focus-visible {
        outline: 2px solid #d64545;
        outline-offset: -2px;
    }

.sb-cap-lbl {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Live state — same tint and border as .vn-bar.live ──────── */

.sb-caprow.recording {
    background: rgba(229, 115, 115, .10);
    border-color: rgba(229, 115, 115, .40);
    color: #8a3b3b;
    font-weight: 650;
    cursor: default;
}

.sb-caprow.saving {
    background: var(--n-surface);
    border-color: var(--n-border-light);
    color: var(--n-text-2);
    font-weight: 650;
    cursor: default;
}

/* The dot borrows vn-pulse rather than defining a second animation —
   one blinking-dot idiom in the app, not two. */
.sb-cap-dot {
    width: 9px;
    height: 9px;
    margin-left: 2px;
    border-radius: 50%;
    background: #d64545;
    flex-shrink: 0;
}

.sb-caprow.recording .sb-cap-dot {
    animation: vn-pulse 1.4s ease-in-out infinite;
}

.sb-cap-dot.saving {
    background: var(--n-text-3);
    opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
    .sb-caprow.recording .sb-cap-dot {
        animation: none;
    }
}

/* Monospace, matching .vn-time, so the row doesn't jitter per tick. */
.sb-cap-time {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    flex-shrink: 0;
}

/* ── Inline stop / discard ──────────────────────────────────── */

.sb-cap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #d64545;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .13s ease, opacity .13s ease;
}

    .sb-cap-btn:hover {
        background: #c03a3a;
    }

    .sb-cap-btn.ghost {
        background: none;
        color: inherit;
        opacity: .7;
    }

        .sb-cap-btn.ghost:hover {
            background: none;
            opacity: 1;
        }

/* ── Error line — same palette as .vn-bar.vn-error ──────────── */

.sb-cap-error {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 6px;
    padding: 7px 10px;
    border-radius: 10px;
    background: var(--n-danger-bg);
    border: 1px solid rgba(220, 38, 38, .30);
    color: var(--n-danger);
    font-size: 12px;
    line-height: 1.35;
    cursor: pointer;
}

/* ══ COMPACT: mic FAB on Home ═════════════════════════════════
   The sidebar isn't rendered below 1024px, so the mic lives on the
   home screen there instead. Same red, same pulse idiom. */

.voice-fab {
    position: fixed;
    right: 18px;
    bottom: 148px; /* above .quicknote-fab and the tab bar */
    z-index: 60;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: var(--n-surface, #fff);
    color: #d64545;
    box-shadow: 0 4px 16px rgba(60, 45, 30, .18), 0 0 0 1px rgba(60, 45, 30, .06);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease;
}

    .voice-fab:active {
        transform: scale(.94);
    }

    .voice-fab.recording {
        background: #d64545;
        color: #fff;
        animation: voice-fab-halo 1.6s ease-out infinite;
    }

@keyframes voice-fab-halo {
    0% {
        box-shadow: 0 4px 16px rgba(60,45,30,.18), 0 0 0 0 rgba(229, 115, 115, .45);
    }

    70% {
        box-shadow: 0 4px 16px rgba(60,45,30,.18), 0 0 0 16px rgba(229, 115, 115, 0);
    }

    100% {
        box-shadow: 0 4px 16px rgba(60,45,30,.18), 0 0 0 0 rgba(229, 115, 115, 0);
    }
}

.voice-fab.saving {
    background: var(--n-surface);
    color: var(--n-text-3);
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .voice-fab.recording {
        animation: none;
    }
}

/* ── Compact recording bar — .vn-bar, floated ───────────────── */

.voice-rec-bar {
    position: fixed;
    left: 50%;
    bottom: 84px; /* clears the mobile tab bar */
    transform: translateX(-50%);
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--n-surface);
    border: 1px solid var(--n-border-light);
    box-shadow: 0 10px 30px rgba(60, 45, 30, .20);
    font-size: 13.5px;
    color: var(--n-text-2);
}

    .voice-rec-bar:not(.saving):not(.error) {
        background: rgba(229, 115, 115, .10);
        border-color: rgba(229, 115, 115, .40);
        color: #8a3b3b;
    }

.voice-rec-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d64545;
    flex-shrink: 0;
}

.voice-rec-bar:not(.saving) .voice-rec-dot {
    animation: vn-pulse 1.4s ease-in-out infinite;
}

.voice-rec-bar.saving .voice-rec-dot {
    background: var(--n-text-3);
    opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
    .voice-rec-bar .voice-rec-dot {
        animation: none;
    }
}

.voice-rec-label {
    font-weight: 650;
    white-space: nowrap;
}

/* Animated ellipsis — spans so the word itself never reflows. */
.voice-rec-ell span {
    opacity: 0;
    animation: voice-ell 1.4s infinite;
}

    .voice-rec-ell span:nth-child(2) {
        animation-delay: .2s;
    }

    .voice-rec-ell span:nth-child(3) {
        animation-delay: .4s;
    }

@keyframes voice-ell {
    0%, 60%, 100% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .voice-rec-ell span {
        animation: none;
        opacity: 1;
    }
}

.voice-rec-time {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    flex-shrink: 0;
}

/* Decorative level meter — reads as "listening" without needing an
   AnalyserNode on the stream. */
.voice-rec-wave {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 15px;
}

    .voice-rec-wave i {
        display: block;
        width: 3px;
        border-radius: 2px;
        background: rgba(214, 69, 69, .55);
        animation: voice-wave 1s ease-in-out infinite;
    }

        .voice-rec-wave i:nth-child(1) {
            height: 6px;
            animation-delay: 0s;
        }

        .voice-rec-wave i:nth-child(2) {
            height: 11px;
            animation-delay: .12s;
        }

        .voice-rec-wave i:nth-child(3) {
            height: 15px;
            animation-delay: .24s;
        }

        .voice-rec-wave i:nth-child(4) {
            height: 9px;
            animation-delay: .36s;
        }

        .voice-rec-wave i:nth-child(5) {
            height: 7px;
            animation-delay: .48s;
        }

@keyframes voice-wave {
    0%, 100% {
        transform: scaleY(.4);
    }

    50% {
        transform: scaleY(1);
    }
}

.voice-rec-bar.saving .voice-rec-wave {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .voice-rec-wave i {
        animation: none;
    }
}

/* Buttons match .vn-btn / .vn-stop / .vn-cancel */

.voice-rec-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;
}

    .voice-rec-btn.stop {
        background: #d64545;
        color: #fff;
    }

        .voice-rec-btn.stop:hover {
            background: #c03a3a;
        }

    .voice-rec-btn.discard {
        padding: 6px;
        color: inherit;
        opacity: .7;
    }

        .voice-rec-btn.discard:hover {
            opacity: 1;
        }

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

    .voice-rec-bar.error .voice-rec-label {
        font-weight: 500;
        white-space: normal;
        max-width: 240px;
    }

/* ══ COMPACT TOP-BAR MIC ══════════════════════════════════════
   Mobile has no sidebar, so the mic sits in the top bar instead.
   These extend .topbar-btn rather than replacing it. */

.topbar-btn.tb-recording {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(229, 115, 115, .12);
    color: #8a3b3b;
}

    .topbar-btn.tb-recording .sb-cap-dot {
        margin-left: 0;
        animation: vn-pulse 1.4s ease-in-out infinite;
    }

.tb-rec-time {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
}

@media (prefers-reduced-motion: reduce) {
    .topbar-btn.tb-recording .sb-cap-dot {
        animation: none;
    }
}

/* ── Home hero mic (mobile) ──
   MainLayout's compact top bar is suppressed on the home tab, so Home's
   own hero row carries the mic there. Desktop hides the hero in CSS. */

.home-hero-action.hero-recording {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    padding: 0 10px;
    background: rgba(229, 115, 115, .12);
    color: #8a3b3b;
}

    .home-hero-action.hero-recording .sb-cap-dot {
        margin-left: 0;
        animation: vn-pulse 1.4s ease-in-out infinite;
    }

.home-hero-action .sb-cap-dot.saving {
    margin-left: 0;
}

@media (prefers-reduced-motion: reduce) {
    .home-hero-action.hero-recording .sb-cap-dot {
        animation: none;
    }
}

/* ══ CAPTURE ROW ACCENTS ══════════════════════════════════════
   Amber for quick notes, red for voice — the same accents the two
   auto-created notebooks carry, so the sidebar rows and the notebook
   list agree with each other. Outline only: these are secondary
   actions and shouldn't compete with New Note. */

.sb-caprow.cap-quick {
    border-color: rgba(245, 158, 11, .35);
    color: #8a6410;
}

    .sb-caprow.cap-quick:hover {
        background: rgba(245, 158, 11, .09);
        border-color: rgba(245, 158, 11, .55);
        color: #7a5810;
    }

    .sb-caprow.cap-quick .nota-icon {
        color: #f59e0b;
    }

.sb-caprow.cap-voice {
    border-color: rgba(229, 115, 115, .35);
    color: #8a3b3b;
}

    .sb-caprow.cap-voice:hover {
        background: rgba(229, 115, 115, .09);
        border-color: rgba(229, 115, 115, .55);
        color: #7a3232;
    }

    .sb-caprow.cap-voice .nota-icon {
        color: #d64545;
    }

/* Hero equivalents (mobile) — tint the glyph only, since these sit in a
   row of neutral icon buttons and full outlines would shout. */
.home-hero-action.cap-quick .nota-icon {
    color: #f59e0b;
}

.home-hero-action.cap-voice .nota-icon {
    color: #d64545;
}

/* ── Keep the recording pill from crowding the logo ──
   The timer makes the actions row wider than the hero can spare on a
   narrow phone, so the wordmark steps aside for the duration. */

.home-hero.is-recording .home-hero-brand {
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

.home-hero-action.hero-recording {
    padding: 0 8px;
    gap: 5px;
}

    .home-hero-action.hero-recording .tb-rec-time {
        font-size: 11.5px;
    }

/* ══ HOME SECTION ICONS ═══════════════════════════════════════
   The section list was a column of identical grey glyphs, which
   made it scan as one undifferentiated block. Tinting the icon
   only — labels stay uniform — gives each row a landmark without
   turning the list into a colour chart.

   Quick and Voice match their sidebar rows and their notebook
   accents, so the same feature is the same colour everywhere. */

.home-sec-name .sec-ic-quick {
    color: #f59e0b;
}
/* amber — Quick Notes */
.home-sec-name .sec-ic-voice {
    color: #d64545;
}
/* red — Voice Notes */
.home-sec-name .sec-ic-pin {
    color: #e8845f;
}
/* warm coral */
.home-sec-name .sec-ic-tag {
    color: #14b8a6;
}
/* teal */
.home-sec-name .sec-ic-nb {
    color: #6C5CE7;
}
/* accent violet */
.home-sec-name .sec-ic-shared {
    color: #3b82f6;
}
/* blue */
.home-sec-name .sec-ic-dm {
    color: #8b5cf6;
}
/* violet */

/* Trash stays neutral. Colouring it would make destructive storage
   look like another category, and red is already spoken for. */
.home-sec-name .sec-ic-trash {
    color: #9ca3af;
}

/* ══ DUPLICATE BACK CONTROL ═══════════════════════════════════
   MainLayout's compact top bar already carries a back chevron on
   every sub-page. SectionView's own "← Home" pill then renders a
   second one directly beneath it, which reads as two different
   destinations when it's really one.

   The top-bar chevron wins: it's consistent across every routed
   page, and it sits where a thumb expects it. This hides the
   in-page pill on compact only — desktop has no top-bar back, so
   it keeps its own. */

@media (max-width: 768px) {
    .nota.compact .section-back-btn {
        display: none;
    }
}