/*_voicesend.css*/


/* VoiceSend — FINAL CSS (mic visible, lane full-width) */
/* ===== TOKENS ===== */
:root {
    --vs-primary: var(--cg-primary, var(--bs-primary));
    --vs-border: var(--bs-border-color);
    --vs-text: #374151;
    /* animation */
    --vs-wave-active: #111827;
    --vs-wave-rail: #d1d5db;
    /* sizes */
    --vs-btn-size: 32px;
    --vs-touch-size: var(--vs-btn-size);
    --vs-gap: 10px; /* base gap token */
    --vs-actions-gap: var(--vs-gap);
    --vs-pad: 12px; /* matches field’s horizontal padding */
    --vs-icon-size: 20px;
    --vs-hover-fill: #f3f4f6;
    /* form header rows (adjust to match your theme) */
    --vs-label-row: 24px; /* label line-height */
    --vs-caption-row: 20px; /* caption line-height */
    --vs-header-gap: 8px; /* gap between caption and field */
    /* lane tuneables */
    --vs-dot-gap: 8px;
    --vs-dot-base-r: 1.6px;
    --vs-dot-max-r: 4px;
    --vs-lane-h: 26px;
}

/* Anchor for mic next to the label/title */
.cg-form-group {
    position: relative;
}

/* Wrapper around the input/textarea (JS injects this) */
.vs-input-wrap {
    position: relative;
    display: block;
    width: 100%;
    border-radius: inherit;
    overflow: visible; /* IMPORTANT: allow mic to sit above field */
}

    /* keep field above canvas background (canvas is pointer-none) */
    .vs-input-wrap textarea,
    .vs-input-wrap input {
        position: relative;
        z-index: 2;
    }

/* ===== MIC / CANCEL / SEND — top-right aligned with label/title ===== */

 .vs-status,
 .vs-status-live { /* live region is already sr-only, but keep it hidden visually */
     display:none !important;
    
}

.vs-input-wrap.vs-recording::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(243, 244, 246, 0.65); /* light gray blur */
    backdrop-filter: blur(3px);
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
}
/* FLEX-CENTER the circular buttons (no absolute children) */
.vs-slot {
    width: var(--vs-touch-size);
    height: var(--vs-touch-size);
    flex: 0 0 var(--vs-touch-size);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .vs-slot > .vs-btn {
        width: 100%;
        height: 100%;
    }

/* Buttons (polished) */
.vs-btn {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    touch-action: manipulation;
}

    .vs-btn:focus {
        outline: none;
    }

.vs-btn-core {
    position: relative;
    width: var(--vs-btn-size);
    height: var(--vs-btn-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bs-border-radius-pill);
    background: #fff;
    border: 1px solid var(--vs-border);
    color: var(--vs-text);
    box-shadow: var(--bs-box-shadow-sm);
    transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    line-height: 1; /* avoid baseline affecting centering */
    overflow: hidden;
}

    .vs-btn-core::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: var(--vs-hover-fill);
        opacity: 0;
        transition: opacity .2s ease;
        pointer-events: none;
    }

    .vs-btn:hover .vs-btn-core::after,
    .vs-btn:focus-visible .vs-btn-core::after {
        opacity: 1;
    }

    .vs-btn:disabled .vs-btn-core::after {
        opacity: 0;
    }

    .vs-btn:hover .vs-btn-core {
        box-shadow: var(--bs-box-shadow);
    }

    .vs-btn:active .vs-btn-core {
        transform: scale(.97);
    }

    .vs-btn:focus-visible .vs-btn-core {
        outline: none;
        box-shadow: var(--bs-focus-ring);
        border-color: #94a3b8;
    }

.vs-btn.vs-btn-mic .vs-btn-core {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.vs-btn.vs-btn-mic:hover .vs-btn-core,
.vs-btn.vs-btn-mic:focus-visible .vs-btn-core {
    background: #fff;
    border-color: var(--vs-border);
    box-shadow: var(--bs-box-shadow);
}

.vs-btn.vs-btn-mic:focus-visible .vs-btn-core {
    box-shadow: var(--bs-focus-ring);
}

    .vs-btn:disabled {
        cursor: not-allowed;
    }

    .vs-btn:disabled .vs-btn-core {
        opacity: .6;
        box-shadow: none;
    }

    /* OPTICAL ICON TUNING — perfect-looking center & weight */
    .vs-btn-core svg {
        display: block; /* remove inline baseline gap */
        width: var(--vs-icon-size);
        height: var(--vs-icon-size);
        stroke-width: 2.4;
        transform: translateY(0); /* default center */
        position: relative;
        z-index: 1;
    }

/* Cross button visual balance & tiny nudge */
.vs-btn.vs-btn-cross .vs-btn-core {
    background: #fff;
    border: 1.5px solid #d1d5db; /* a touch stronger */
    box-shadow: var(--bs-box-shadow-sm); /* matches depth of ✓ */
}

    .vs-btn.vs-btn-cross .vs-btn-core svg {
        stroke-width: 2.4;
        transform: translateY(0.25px); /* optical center */
    }

/* orange send ✓ */
.vs-btn.vs-btn-tick .vs-btn-core {
    background: linear-gradient(180deg, var(--vs-primary) 0%, #e57f15 100%);
    border: none;
    color: #fff;
    box-shadow: var(--bs-box-shadow-sm);
}

    .vs-btn.vs-btn-tick:hover .vs-btn-core {
        filter: brightness(.98);
        border: 1px solid var(--vs-border);
        color: var(--vs-text);
    }

    .vs-btn.vs-btn-tick:focus-visible .vs-btn-core {
        border-width: 1px;
        border-style: solid;
        color: var(--vs-text);
    }

    /* Bolder ✓ and slight Y-nudge so it looks dead center */
    .vs-btn.vs-btn-tick .vs-btn-core svg {
        stroke-width: 3; /* stronger tick */
        transform: translateY(0.45px); /* optical center */
    }

.vs-hidden {
    display: none !important;
    pointer-events: none;
}

/* ===== RECORDING LANE (canvas) — FULL WIDTH, CENTERED VERTICALLY ===== */
.vs-canvas {
    position: absolute;
    left: 12px;
    right: 110px; /* reserve space for buttons */
    bottom: 15px;
    top: auto;
    transform: none;
    width: calc(100% - 122px); /* 🔥 FORCE FULL WIDTH */
    height: 18px;
    display: none;
    pointer-events: none;
    z-index: 3;
}
.vs-input-wrap.vs-small .vs-canvas {
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
}


/* Optional: recording glow */

    .vs-input-wrap.vs-recording textarea::placeholder,
    .vs-input-wrap.vs-recording input::placeholder {
        color: transparent !important;
    }

/* spinner inside ✓ */
.vs-btn-tick.loading .vs-ok-icon {
    opacity: 0;
}
.vs-disabled {
    opacity: 0.6;
    pointer-events: none;
}
.vs-btn-tick.loading .vs-ok-loader {
    display: inline-block;
}

.vs-input-wrap textarea,
.vs-input-wrap input {
    padding-right: 110px;
}
.vs-input-wrap .vs-actions {
    position: absolute;
    /* --vs-scrollbar-w is set by the library to the textarea's scrollbar width while
       it is scrolling (0 otherwise), so the buttons step left to clear the scrollbar. */
    right: calc(12px + var(--vs-scrollbar-w, 0px));
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 4;
}

.vs-ok-loader {
    display: none;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    pointer-events: none;
    z-index: 1;
}

    .vs-ok-loader svg {
        width: 100%;
        height: 100%;
        animation: vs-rotate 1.2s linear infinite;
    }

    .vs-ok-loader circle {
        fill: none;
        stroke: #fff;
        stroke-width: 2.6;
        stroke-linecap: round;
        stroke-dasharray: 60 90;
        stroke-dashoffset: 0;
        animation: vs-dash 1.4s ease-in-out infinite;
    }

.vs-input-wrap.vs-medium .vs-canvas {
    bottom: 18px;
}

.vs-input-wrap.vs-large .vs-canvas {
    bottom: 18px;
}
@keyframes vs-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes vs-dash {
    0% {
        stroke-dasharray: 10 120;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 80 50;
        stroke-dashoffset: -25;
    }

    100% {
        stroke-dasharray: 10 120;
        stroke-dashoffset: -110;
    }
}

/* ===== MOBILE ===== */
@media (max-width:576px) {
    :root {
        --vs-btn-size: 34px;
        --vs-touch-size: 46px;
        --vs-actions-gap: 8px;
        --vs-pad: 12px;
        --vs-icon-size: 18px;
        --vs-lane-h: 24px;
    }
}
.vs-input-wrap.vs-recording textarea,
.vs-input-wrap.vs-recording input {
    background: transparent !important;
    color: inherit;
    opacity: 0.6;
    /* While recording, blur the existing text and lock the field (no scrollbar, no
       interaction) so the user's focus stays on the waveform + buttons. The canvas
       and buttons are siblings (higher z-index), so they stay perfectly sharp. */
    filter: blur(2.5px);
    overflow: hidden;
    pointer-events: none;
}

.vs-actions {
    position: absolute;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 5;
}

.vs-input-wrap.vs-small .vs-actions {
    top: 50%;
    bottom: auto; /* 🔥 add this */
    transform: translateY(-50%);
}

.vs-input-wrap.vs-large .vs-actions {
    bottom: 10px;
    top: auto;
    transform: none;
}