/* SavvyGreat Snapic M3 camera basics
   20260814-snapic-camera-basics-5 */

.sgsnapic-camera-launch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 20px 18px;
    padding: 16px 18px;
    border: 1px solid var(--sgcv-outline-variant, #cac4d0);
    border-radius: 20px;
    background: var(--sgcv-surface-container-low, #f7f2fa);
    color: var(--sgcv-on-surface, #1d1b20);
}

.sgsnapic-camera-launch[hidden] {
    display: none !important;
}

.sgsnapic-camera-launch-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.sgsnapic-camera-launch-eyebrow {
    color: var(--sgcv-primary, #6750a4);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sgsnapic-camera-launch-copy strong {
    color: var(--sgcv-on-surface, #1d1b20);
    font-size: 17px;
    line-height: 1.25;
}

.sgsnapic-camera-launch-copy small {
    color: var(--sgcv-on-surface-variant, #49454f);
    font-size: 12px;
    line-height: 1.4;
}

.sgsnapic-camera-launch-action {
    flex: 0 0 auto;
}

.sgsnapic-camera-launch [data-sgsnapic-start] {
    display: inline-flex !important;
    width: auto !important;
    min-width: 148px !important;
    min-height: 48px !important;
    padding: 0 20px !important;
    border-radius: 24px !important;
    background: var(--sgcv-primary, #6750a4) !important;
    color: var(--sgcv-on-primary, #fff) !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.16);
}

.sgsnapic-camera-launch [data-sgsnapic-start] span {
    display: inline !important;
}

.sgsnapic-camera-launch [data-sgsnapic-start]:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,.18);
}

.sgsnapic-camera-launch [data-sgsnapic-start]:focus-visible,
.sgsnapic-camera-cancel:focus-visible {
    outline: 3px solid
        color-mix(in srgb, var(--sgcv-primary, #6750a4) 38%, transparent);
    outline-offset: 3px;
}

.sgsnapic-camera-cancel {
    position: absolute;
    z-index: 2147483290;
    top: calc(12px + env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 50%;
    background: rgba(0,0,0,.56);
    color: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,.30);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
}

.sgsnapic-camera-cancel[hidden] {
    display: none !important;
}

.sgsnapic-camera-cancel svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

/* Full-screen primary actions remain readable instead of becoming
   unlabeled 42px circles on mobile. */

.sgsnapic-page.is-sgsnapic-pro-live
.sgsnapic-camera-icon-action[data-sgsnapic-capture],

.sgsnapic-page.is-sgsnapic-pro-live
.sgsnapic-camera-icon-action[data-sgsnapic-pro-action="record"],

.sgsnapic-page.is-sgsnapic-pro-live
.sgsnapic-camera-icon-action[data-sgsnapic-pro-action="record-stop"],

.sgsnapic-page.is-sgsnapic-pro-live
.sgsnapic-camera-icon-action[data-sgsnapic-stop] {
    width: auto !important;
    min-width: 126px !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    border-radius: 24px !important;
    gap: 8px !important;
}

.sgsnapic-page.is-sgsnapic-pro-live
.sgsnapic-camera-icon-action[data-sgsnapic-capture] span,

.sgsnapic-page.is-sgsnapic-pro-live
.sgsnapic-camera-icon-action[data-sgsnapic-pro-action="record"] span,

.sgsnapic-page.is-sgsnapic-pro-live
.sgsnapic-camera-icon-action[data-sgsnapic-pro-action="record-stop"] span,

.sgsnapic-page.is-sgsnapic-pro-live
.sgsnapic-camera-icon-action[data-sgsnapic-stop] span {
    display: inline !important;
}

.sgsnapic-page.is-sgsnapic-pro-live
[data-sgsnapic-capture],

.sgsnapic-page.is-sgsnapic-pro-live
[data-sgsnapic-pro-action="record"] {
    background: var(--sgcv-primary-container, #eaddff) !important;
    color: var(--sgcv-on-primary-container, #21005d) !important;
    font-weight: 800 !important;
}

.sgsnapic-page.is-sgsnapic-pro-live
[data-sgsnapic-pro-action="record-stop"] {
    background: var(--sgcv-error-container, #ffdad6) !important;
    color: var(--sgcv-on-error-container, #410002) !important;
    font-weight: 800 !important;
}

.sgsnapic-page.is-sgsnapic-pro-live
[data-sgsnapic-stop],

.sgsnapic-page.is-sgsnapic-pro-live
[data-sgsnapic-switch] {
    border: 1px solid rgba(255,255,255,.30) !important;
    background: rgba(0,0,0,.56) !important;
    color: #fff !important;
}

/* Authoritative visible-frame recorder uses the existing professional
   Reel HUD, now kept above the video with readable timer and actual size. */

.sgsnapic-page.is-sgsnapic-pro-recording
[data-sgsnapic-pro-reel-hud] {
    z-index: 2147483270 !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 38px;
    padding: 8px 13px;
    border-color: rgba(255,255,255,.40);
    background: rgba(0,0,0,.72);
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
}

/* Critical controls are always above guides/quality overlays. */
.sgsnapic-page.is-sgsnapic-pro-live
.sgsnapic-camera-controls {
    z-index: 2147483280 !important;
}

/* Preserve the visible camera control labels at phone widths. */
@media (max-width: 640px) {
    .sgsnapic-camera-launch {
        align-items: stretch;
        flex-direction: column;
        margin: 0 14px 14px;
        padding: 14px;
    }

    .sgsnapic-camera-launch-action {
        width: 100%;
    }

    .sgsnapic-camera-launch [data-sgsnapic-start] {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
    }

    .sgsnapic-page.is-sgsnapic-pro-live
    .sgsnapic-camera-icon-action[data-sgsnapic-capture],

    .sgsnapic-page.is-sgsnapic-pro-live
    .sgsnapic-camera-icon-action[data-sgsnapic-pro-action="record"],

    .sgsnapic-page.is-sgsnapic-pro-live
    .sgsnapic-camera-icon-action[data-sgsnapic-pro-action="record-stop"],

    .sgsnapic-page.is-sgsnapic-pro-live
    .sgsnapic-camera-icon-action[data-sgsnapic-stop] {
        min-width: 112px !important;
        min-height: 46px !important;
        padding: 0 12px !important;
    }

    .sgsnapic-camera-cancel {
        top: calc(9px + env(safe-area-inset-top));
        right: max(9px, env(safe-area-inset-right));
        width: 46px;
        height: 46px;
    }

    .sgsnapic-page.is-sgsnapic-pro-recording
    [data-sgsnapic-pro-reel-hud] {
        top: calc(82px + env(safe-area-inset-top)) !important;
        max-width: calc(100vw - 120px);
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgsnapic-camera-launch [data-sgsnapic-start] {
        transition: none !important;
    }
}