@extends('layouts.app')

@push('styles')
<style>
    /* Reset et base - Style Snapchat */
    .snap-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #000;
        z-index: 9999;
        overflow: hidden;
    }

    /* Vidéo plein écran */
    .snap-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Header overlay */
    .snap-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 10;
        background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, transparent 100%);
    }

    .snap-close {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(0,0,0,0.3);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: none;
        color: white;
        font-size: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
    }

    .snap-close:hover {
        background: rgba(0,0,0,0.5);
    }

    .snap-flash {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(0,0,0,0.3);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: none;
        color: white;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
    }

    .snap-flash.active {
        background: rgba(255,230,0,0.9);
        color: #000;
    }

    .snap-header-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* Contrôles du bas */
    .snap-controls {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 24px 28px calc(32px + env(safe-area-inset-bottom, 0px));
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 44px;
        background: linear-gradient(to top, rgba(0,0,0,0.25) 0%, transparent 100%);
        z-index: 10;
    }

    /* Bouton galerie */
    .snap-gallery {
        width: 46px;
        height: 46px;
        border-radius: 10px;
        background: rgba(255,255,255,0.12);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1.5px solid rgba(255,255,255,0.25);
        overflow: hidden;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .snap-gallery:hover {
        transform: scale(1.05);
        background: rgba(255,255,255,0.2);
    }

    .snap-gallery-icon {
        color: white;
        opacity: 0.9;
    }

    /* Bouton d'enregistrement principal - Style Snapchat */
    .snap-record-btn {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: transparent;
        border: 5px solid rgba(255,255,255,0.85);
        cursor: pointer;
        position: relative;
        transition: all 0.15s;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }

    .snap-record-btn:active {
        transform: scale(0.93);
    }

    .snap-record-inner {
        width: 68px;
        height: 68px;
        border-radius: 50%;
        background: white;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .snap-record-btn.recording .snap-record-inner {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        background: #ff4757;
    }

    .snap-record-btn.recording {
        border-color: #ff4757;
        animation: pulse-recording 1s infinite;
    }

    @keyframes pulse-recording {
        0%, 100% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.5); }
        50% { box-shadow: 0 0 0 20px rgba(255, 71, 87, 0); }
    }

    /* Indicateur de verrouillage - glisser vers le haut */
    .snap-lock-indicator {
        position: absolute;
        left: 50%;
        top: -100px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        opacity: 0;
        transition: all 0.3s ease;
        pointer-events: none;
    }

    .snap-lock-indicator.visible {
        opacity: 1;
    }

    .snap-lock-indicator.active {
        opacity: 1;
        top: -80px;
    }

    .snap-lock-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(0,0,0,0.4);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        transition: all 0.3s ease;
    }

    .snap-lock-indicator.active .snap-lock-icon {
        background: #ff4757;
        transform: scale(1.2);
    }

    .snap-lock-arrow {
        color: rgba(255,255,255,0.6);
        animation: slideUp 1s infinite;
        transform: rotate(-90deg);
    }

    @keyframes slideUp {
        0%, 100% { transform: rotate(-90deg) translateX(0); opacity: 0.6; }
        50% { transform: rotate(-90deg) translateX(-5px); opacity: 1; }
    }

    /* Bouton stop quand verrouillé */
    .snap-stop-btn {
        position: absolute;
        bottom: 150px;
        left: 50%;
        transform: translateX(-50%);
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: #ff4757;
        border: 4px solid white;
        display: none;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 20;
        box-shadow: 0 4px 20px rgba(255, 71, 87, 0.5);
        animation: pulse-stop 1.5s infinite;
    }

    .snap-stop-btn.visible {
        display: flex;
    }

    .snap-stop-btn .stop-square {
        width: 24px;
        height: 24px;
        background: white;
        border-radius: 4px;
    }

    @keyframes pulse-stop {
        0%, 100% { transform: translateX(-50%) scale(1); }
        50% { transform: translateX(-50%) scale(1.05); }
    }

    /* Bouton flip caméra */
    .snap-flip {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: rgba(0,0,0,0.3);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: none;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
    }

    .snap-flip:hover {
        background: rgba(0,0,0,0.5);
    }

    /* Timer circulaire autour du bouton record */
    .snap-timer-ring {
        position: absolute;
        width: 95px;
        height: 95px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

    .snap-timer-ring svg {
        transform: rotate(-90deg);
    }

    .snap-timer-ring circle {
        fill: none;
        stroke-width: 4;
    }

    .snap-timer-ring .bg {
        stroke: rgba(255,255,255,0.2);
    }

    .snap-timer-ring .progress {
        stroke: #ff4757;
        stroke-linecap: round;
        stroke-dasharray: 270;
        stroke-dashoffset: 270;
        transition: stroke-dashoffset 0.1s linear;
    }

    /* Timer texte */
    .snap-timer {
        position: absolute;
        top: calc(70px + env(safe-area-inset-top, 0px));
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 6px 18px;
        border-radius: 20px;
        font-size: 15px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        display: none;
        z-index: 10;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        letter-spacing: 0.5px;
    }

    .snap-timer.visible {
        display: flex;
        align-items: center;
        gap: 6px;
        animation: fadeIn 0.3s;
    }

    .snap-timer::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ff4757;
        animation: blink-dot 1s infinite;
    }

    @keyframes blink-dot {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.3; }
    }

    /* Hint */
    .snap-hint {
        position: absolute;
        bottom: 160px;
        left: 50%;
        transform: translateX(-50%);
        color: rgba(255,255,255,0.6);
        font-size: 13px;
        font-weight: 400;
        z-index: 10;
        text-align: center;
        text-shadow: 0 1px 4px rgba(0,0,0,0.4);
        white-space: nowrap;
    }

    /* Preview screen */
    .snap-preview {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #000;
        z-index: 20;
        display: none;
    }

    .snap-preview.visible {
        display: flex;
        flex-direction: column;
    }

    .snap-preview-video {
        flex: 1;
        width: 100%;
        object-fit: cover;
    }

    .snap-preview-controls {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    }

    .snap-form {
        margin-bottom: 16px;
    }

    .snap-input {
        width: 100%;
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 16px;
        padding: 16px 20px;
        color: white;
        font-size: 16px;
        margin-bottom: 12px;
        backdrop-filter: blur(10px);
    }

    .snap-input::placeholder {
        color: rgba(255,255,255,0.5);
    }

    .snap-input:focus {
        outline: none;
        border-color: rgba(255,255,255,0.4);
        background: rgba(255,255,255,0.15);
    }

    .snap-textarea {
        resize: none;
        min-height: 70px;
    }

    .snap-preview-actions {
        display: flex;
        gap: 12px;
    }

    .snap-btn-cancel {
        flex: 1;
        padding: 16px;
        border-radius: 50px;
        border: 1.5px solid rgba(255,255,255,0.3);
        background: transparent;
        color: white;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }

    .snap-btn-cancel:hover {
        background: rgba(255,255,255,0.08);
    }

    .snap-btn-send {
        flex: 2;
        padding: 16px;
        border-radius: 50px;
        border: none;
        background: white;
        color: #000;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .snap-btn-send:hover {
        opacity: 0.9;
    }

    .snap-btn-send:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    /* Loading */
    .snap-loading {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.9);
        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 30;
    }

    .snap-loading.visible {
        display: flex;
    }

    .snap-spinner {
        width: 44px;
        height: 44px;
        border: 3px solid rgba(255,255,255,0.15);
        border-top-color: white;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    .snap-loading-text {
        color: white;
        margin-top: 20px;
        font-size: 16px;
        font-weight: 500;
    }

    /* Permission screen - cachée par défaut */
    .snap-permission {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #000;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 25;
        padding: 40px;
        text-align: center;
    }

    .snap-permission-icon {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: rgba(255,255,255,0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 28px;
    }

    .snap-permission-icon svg {
        width: 50px;
        height: 50px;
        color: white;
    }

    .snap-permission h2 {
        color: white;
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 12px;
    }

    .snap-permission p {
        color: rgba(255,255,255,0.5);
        font-size: 15px;
        margin-bottom: 36px;
        max-width: 260px;
        line-height: 1.5;
    }

    .snap-permission-btn {
        padding: 16px 44px;
        border-radius: 50px;
        border: none;
        background: white;
        color: #000;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .snap-permission-btn:hover {
        transform: scale(1.03);
        opacity: 0.9;
    }

    /* Animation */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
        to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    /* Hide header/footer en mode snap */
    body.snap-mode header,
    body.snap-mode footer,
    body.snap-mode nav,
    body.snap-mode .navbar,
    body.snap-mode .bottom-nav {
        display: none !important;
    }

    body.snap-mode {
        overflow: hidden;
    }

    /* Direction visuelle 2026 */
    .snap-container {
        font-family: "Plus Jakarta Sans", "Figtree", system-ui, sans-serif;
        background:
            radial-gradient(circle at 12% 18%, rgba(249, 115, 22, 0.28), transparent 30%),
            radial-gradient(circle at 86% 12%, rgba(59, 130, 246, 0.18), transparent 28%),
            linear-gradient(180deg, #020617 0%, #0b1220 56%, #111827 100%);
    }

    .snap-container::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(180deg, rgba(2, 6, 23, 0.18) 0%, rgba(2, 6, 23, 0.44) 100%),
            url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='60' cy='60' r='2'/%3E%3Ccircle cx='108' cy='30' r='2'/%3E%3Ccircle cx='96' cy='96' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        pointer-events: none;
        z-index: 1;
    }

    .snap-video,
    .snap-focus-frame,
    .snap-orb,
    .snap-film-grain,
    .snap-live-meta,
    .snap-header,
    .snap-timer,
    .snap-hint,
    .snap-controls,
    .snap-preview,
    .snap-permission,
    .snap-loading {
        position: absolute;
    }

    .snap-video {
        inset: 0;
        filter: saturate(1.08) contrast(1.03) brightness(0.98);
        z-index: 0;
    }

    .snap-orb {
        width: 280px;
        height: 280px;
        border-radius: 999px;
        filter: blur(20px);
        opacity: 0.55;
        pointer-events: none;
        z-index: 1;
    }

    .snap-orb-a {
        top: -100px;
        right: -70px;
        background: radial-gradient(circle, rgba(250, 204, 21, 0.34) 0%, rgba(249, 115, 22, 0.12) 42%, rgba(249, 115, 22, 0) 72%);
    }

    .snap-orb-b {
        bottom: 120px;
        left: -110px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, rgba(99, 102, 241, 0.08) 44%, rgba(99, 102, 241, 0) 72%);
    }

    .snap-film-grain {
        inset: 0;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), transparent 35%, rgba(255, 255, 255, 0.025) 70%, transparent 100%);
        mix-blend-mode: soft-light;
        opacity: 0.4;
        pointer-events: none;
        z-index: 1;
    }

    .snap-focus-frame {
        inset: 12vh 10vw 22vh;
        border-radius: 34px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.04) inset,
            0 0 0 999px rgba(2, 6, 23, 0.04);
        pointer-events: none;
        z-index: 2;
    }

    .snap-focus-frame::before,
    .snap-focus-frame::after {
        content: "";
        position: absolute;
        width: 56px;
        height: 56px;
        border-top: 3px solid rgba(255, 255, 255, 0.78);
        border-left: 3px solid rgba(255, 255, 255, 0.78);
        border-radius: 26px 0 0 0;
        top: 18px;
        left: 18px;
    }

    .snap-focus-frame::after {
        border-top: 3px solid rgba(255, 255, 255, 0.78);
        border-left: 0;
        border-right: 3px solid rgba(255, 255, 255, 0.78);
        border-radius: 0 26px 0 0;
        left: auto;
        right: 18px;
    }

    .snap-header {
        z-index: 12;
        padding: calc(16px + env(safe-area-inset-top, 0px)) 18px 16px;
        align-items: flex-start;
        gap: 14px;
        background: linear-gradient(180deg, rgba(2, 6, 23, 0.58) 0%, rgba(2, 6, 23, 0.12) 100%);
    }

    .snap-header-left {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .snap-brand {
        display: flex;
        flex-direction: column;
        gap: 2px;
        color: #f8fafc;
        min-width: 0;
    }

    .snap-brand-kicker {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: rgba(244, 114, 182, 0.92);
    }

    .snap-brand strong {
        font-size: 18px;
        font-weight: 800;
        line-height: 1.1;
    }

    .snap-brand-note {
        font-size: 12px;
        color: rgba(226, 232, 240, 0.82);
    }

    .snap-close,
    .snap-flash,
    .snap-flip {
        background: rgba(15, 23, 42, 0.34);
        border: 1px solid rgba(255, 255, 255, 0.16);
        box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.75);
    }

    .snap-header-right {
        gap: 12px;
    }

    .snap-live-meta {
        top: calc(88px + env(safe-area-inset-top, 0px));
        left: 18px;
        right: 18px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        z-index: 11;
        pointer-events: none;
    }

    .snap-live-chip {
        display: inline-flex;
        align-items: center;
        padding: 8px 12px;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.34);
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: rgba(248, 250, 252, 0.92);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .snap-timer {
        top: calc(148px + env(safe-area-inset-top, 0px));
        padding: 8px 18px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(15, 23, 42, 0.44);
        box-shadow: 0 16px 30px -24px rgba(2, 6, 23, 0.95);
        z-index: 11;
    }

    .snap-hint {
        bottom: 176px;
        padding: 10px 16px;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.42);
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: rgba(241, 245, 249, 0.9);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.01em;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 12px 28px -24px rgba(2, 6, 23, 0.95);
    }

    .snap-controls {
        z-index: 12;
        padding: 20px 18px calc(26px + env(safe-area-inset-bottom, 0px));
        gap: 22px;
        justify-content: space-between;
        align-items: flex-end;
        background: linear-gradient(180deg, transparent 0%, rgba(2, 6, 23, 0.12) 15%, rgba(2, 6, 23, 0.82) 100%);
    }

    .snap-controls::before {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        height: 98px;
        border-radius: 28px;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0.52));
        border: 1px solid rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 24px 40px -30px rgba(2, 6, 23, 0.96);
    }

    .snap-controls > * {
        position: relative;
        z-index: 1;
    }

    .snap-control-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-width: 72px;
        color: rgba(248, 250, 252, 0.92);
    }

    .snap-control-label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: rgba(226, 232, 240, 0.88);
    }

    .snap-gallery,
    .snap-flip {
        width: 68px;
        height: 68px;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: none;
    }

    .snap-record-wrap {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-bottom: 2px;
    }

    .snap-record-btn {
        width: 96px;
        height: 96px;
        border: 4px solid rgba(255, 255, 255, 0.82);
        background: rgba(255, 255, 255, 0.04);
        box-shadow: 0 30px 46px -28px rgba(249, 115, 22, 0.78);
    }

    .snap-record-inner {
        width: 76px;
        height: 76px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        box-shadow: inset 0 -8px 14px rgba(148, 163, 184, 0.25);
    }

    .snap-record-btn.recording {
        border-color: rgba(255, 90, 122, 0.98);
        box-shadow: 0 30px 52px -24px rgba(255, 71, 87, 0.82);
    }

    .snap-record-btn.recording .snap-record-inner {
        background: linear-gradient(180deg, #ff6b81 0%, #ff4757 100%);
        box-shadow: none;
    }

    .snap-record-caption {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(248, 250, 252, 0.84);
    }

    .snap-timer-ring {
        width: 112px;
        height: 112px;
    }

    .snap-timer-ring .bg {
        stroke: rgba(255, 255, 255, 0.12);
    }

    .snap-timer-ring .progress {
        stroke: #ff5c73;
        filter: drop-shadow(0 0 12px rgba(255, 92, 115, 0.5));
    }

    .snap-lock-indicator {
        top: -112px;
        gap: 10px;
    }

    .snap-lock-icon {
        background: rgba(15, 23, 42, 0.54);
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: 0 20px 30px -24px rgba(2, 6, 23, 0.95);
    }

    .snap-stop-btn {
        bottom: 154px;
        background: linear-gradient(180deg, #ff6b81 0%, #ff4757 100%);
        box-shadow: 0 18px 34px -18px rgba(255, 71, 87, 0.9);
    }

    .snap-permission {
        z-index: 25;
        background: linear-gradient(180deg, rgba(2, 6, 23, 0.9) 0%, rgba(2, 6, 23, 0.68) 100%);
        padding: 24px;
    }

    .snap-permission-card {
        width: min(460px, 100%);
        padding: 28px 24px;
        border-radius: 30px;
        background:
            radial-gradient(circle at top right, rgba(249, 115, 22, 0.18), transparent 32%),
            linear-gradient(180deg, rgba(15, 23, 42, 0.86) 0%, rgba(15, 23, 42, 0.72) 100%);
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
    }

    .snap-permission-kicker {
        display: inline-flex;
        align-items: center;
        padding: 7px 12px;
        margin-bottom: 14px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: rgba(251, 191, 36, 0.95);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .snap-permission-icon {
        width: 92px;
        height: 92px;
        margin-bottom: 22px;
        background: linear-gradient(135deg, rgba(249, 115, 22, 0.18), rgba(59, 130, 246, 0.12));
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .snap-permission p {
        color: rgba(226, 232, 240, 0.72);
        font-size: 15px;
        margin-bottom: 24px;
        max-width: 340px;
    }

    .snap-permission-points {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 24px;
    }

    .snap-permission-point {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 13px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: rgba(248, 250, 252, 0.9);
        font-size: 13px;
        font-weight: 600;
    }

    .snap-permission-point i {
        width: 28px;
        height: 28px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #f8fafc;
        background: rgba(255, 255, 255, 0.12);
    }

    .snap-permission-btn {
        width: 100%;
        border-radius: 18px;
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
        box-shadow: 0 24px 30px -24px rgba(255, 255, 255, 0.75);
    }

    .snap-permission-note {
        margin-top: 16px;
        color: rgba(203, 213, 225, 0.7);
        font-size: 12px;
        line-height: 1.5;
    }

    .snap-preview {
        z-index: 20;
        background: #020617;
    }

    .snap-preview-video {
        filter: contrast(1.02) saturate(1.04);
    }

    .snap-preview-controls {
        z-index: 21;
        padding: 0 18px calc(18px + env(safe-area-inset-bottom, 0px));
        background: none;
    }

    .snap-preview-sheet {
        width: 100%;
        padding: 20px;
        border-radius: 30px;
        background:
            radial-gradient(circle at top right, rgba(249, 115, 22, 0.12), transparent 32%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.9) 100%);
        border: 1px solid rgba(255, 255, 255, 0.52);
        box-shadow: 0 28px 50px -28px rgba(2, 6, 23, 0.92);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .snap-preview-sheet-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
    }

    .snap-sheet-kicker {
        display: inline-flex;
        margin-bottom: 4px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #ea580c;
    }

    .snap-preview-sheet-head h3 {
        margin: 0;
        font-size: 21px;
        line-height: 1.1;
        color: #0f172a;
        font-weight: 800;
    }

    .snap-sheet-badge {
        display: inline-flex;
        align-items: center;
        padding: 8px 11px;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.06);
        border: 1px solid rgba(148, 163, 184, 0.22);
        color: #334155;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .snap-form {
        margin-bottom: 14px;
    }

    .snap-field {
        margin-bottom: 12px;
    }

    .snap-field-label {
        display: block;
        margin-bottom: 8px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #475569;
    }

    .snap-input {
        color: #0f172a;
        background: rgba(255, 255, 255, 0.74);
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 18px;
        padding: 15px 16px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .snap-input::placeholder {
        color: rgba(71, 85, 105, 0.64);
    }

    .snap-input:focus {
        border-color: rgba(59, 130, 246, 0.34);
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
    }

    .snap-textarea {
        min-height: 88px;
    }

    .snap-form-note {
        margin: 6px 0 0;
        font-size: 12px;
        color: #64748b;
        line-height: 1.5;
    }

    .snap-preview-actions {
        gap: 10px;
    }

    .snap-btn-cancel,
    .snap-btn-send {
        min-height: 52px;
        border-radius: 18px;
        font-weight: 700;
        font-size: 14px;
    }

    .snap-btn-cancel {
        border-color: rgba(148, 163, 184, 0.24);
        color: #334155;
        background: rgba(255, 255, 255, 0.74);
    }

    .snap-btn-cancel:hover {
        background: rgba(255, 255, 255, 0.94);
    }

    .snap-btn-send {
        background: linear-gradient(135deg, #111827 0%, #ea580c 100%);
        color: #fff;
        box-shadow: 0 22px 30px -26px rgba(234, 88, 12, 0.78);
    }

    .snap-btn-send svg {
        color: inherit;
    }

    .snap-loading {
        z-index: 30;
        background: rgba(2, 6, 23, 0.78);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .snap-loading-card {
        width: min(320px, calc(100vw - 32px));
        padding: 24px;
        border-radius: 28px;
        background: rgba(15, 23, 42, 0.82);
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 28px 52px -28px rgba(2, 6, 23, 0.96);
        text-align: center;
    }

    .snap-loading-subtext {
        margin: 8px 0 0;
        color: rgba(203, 213, 225, 0.72);
        font-size: 13px;
        line-height: 1.5;
    }

    @media (min-width: 960px) {
        .snap-focus-frame {
            inset: 11vh 24vw 20vh;
        }

        .snap-live-meta {
            left: 50%;
            right: auto;
            transform: translateX(-50%);
            justify-content: center;
        }

        .snap-controls {
            justify-content: center;
            gap: 42px;
        }

        .snap-controls::before {
            left: 50%;
            right: auto;
            width: min(540px, calc(100vw - 40px));
            transform: translateX(-50%);
        }

        .snap-preview-controls {
            left: 50%;
            right: auto;
            width: min(560px, calc(100vw - 32px));
            transform: translateX(-50%);
        }
    }

    @media (max-width: 639px) {
        .snap-focus-frame {
            inset: 15vh 7vw 28vh;
            border-radius: 26px;
        }

        .snap-header {
            padding-left: 14px;
            padding-right: 14px;
        }

        .snap-brand strong {
            font-size: 16px;
        }

        .snap-brand-note {
            font-size: 11px;
        }

        .snap-live-meta {
            top: calc(84px + env(safe-area-inset-top, 0px));
            left: 14px;
            right: 14px;
            gap: 8px;
        }

        .snap-live-chip {
            padding: 7px 10px;
            font-size: 10px;
        }

        .snap-timer {
            top: calc(132px + env(safe-area-inset-top, 0px));
        }

        .snap-controls {
            padding-left: 14px;
            padding-right: 14px;
            gap: 12px;
        }

        .snap-controls::before {
            left: 14px;
            right: 14px;
            height: 92px;
        }

        .snap-gallery,
        .snap-flip {
            width: 60px;
            height: 60px;
            border-radius: 18px;
        }

        .snap-record-btn {
            width: 84px;
            height: 84px;
        }

        .snap-record-inner {
            width: 66px;
            height: 66px;
        }

        .snap-record-btn.recording .snap-record-inner {
            width: 26px;
            height: 26px;
        }

        .snap-timer-ring {
            width: 102px;
            height: 102px;
        }

        .snap-hint {
            bottom: 162px;
            width: calc(100vw - 48px);
            max-width: 340px;
            white-space: normal;
        }

        .snap-preview-controls {
            padding-left: 14px;
            padding-right: 14px;
        }

        .snap-preview-sheet {
            padding: 18px 16px;
            border-radius: 24px;
        }

        .snap-preview-sheet-head {
            flex-direction: column;
        }

        .snap-permission {
            padding: 16px;
        }

        .snap-permission-card {
            padding: 24px 18px;
            border-radius: 24px;
        }

        .snap-permission-points {
            grid-template-columns: 1fr;
        }

        .snap-loading-card {
            width: calc(100vw - 28px);
        }
    }

    /* Simplification demandee: interface tres proche de Snapchat */
    .snap-container {
        background: #000;
    }

    .snap-container::before,
    .snap-orb,
    .snap-film-grain,
    .snap-focus-frame,
    .snap-live-meta,
    .snap-record-caption,
    .snap-brand-kicker,
    .snap-brand-note,
    .snap-control-label,
    .snap-permission-points {
        display: none !important;
    }

    .snap-header {
        align-items: center;
        padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 16px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 100%);
    }

    .snap-header-left {
        gap: 0;
    }

    .snap-brand {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        width: 120px;
        pointer-events: none;
    }

    .snap-brand strong {
        font-size: 15px;
        font-weight: 700;
        color: #fff;
    }

    .snap-close,
    .snap-flash,
    .snap-flip {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.3);
        border: none;
        box-shadow: none;
    }

    .snap-header-right {
        gap: 10px;
    }

    .snap-timer {
        top: calc(70px + env(safe-area-inset-top, 0px));
        padding: 6px 18px;
        background: rgba(0, 0, 0, 0.5);
        border: none;
        box-shadow: none;
    }

    .snap-hint {
        bottom: 160px;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        color: rgba(255, 255, 255, 0.65);
        font-size: 13px;
        font-weight: 400;
    }

    .snap-controls {
        justify-content: center;
        align-items: center;
        gap: 44px;
        padding: 24px 28px calc(32px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.25) 100%);
    }

    .snap-controls::before {
        display: none;
    }

    .snap-control-stack,
    .snap-record-wrap {
        min-width: auto;
        gap: 0;
        margin: 0;
    }

    .snap-gallery,
    .snap-flip {
        width: 46px;
        height: 46px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.12);
        border: 1.5px solid rgba(255, 255, 255, 0.25);
    }

    .snap-record-btn {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: transparent;
        border: 5px solid rgba(255, 255, 255, 0.85);
        box-shadow: none;
    }

    .snap-record-inner {
        width: 68px;
        height: 68px;
        border-radius: 50%;
        background: #fff;
        box-shadow: none;
    }

    .snap-record-btn.recording .snap-record-inner {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        background: #ff4757;
    }

    .snap-record-btn.recording {
        border-color: #ff4757;
        box-shadow: none;
    }

    .snap-timer-ring {
        width: 95px;
        height: 95px;
    }

    .snap-timer-ring .bg {
        stroke: rgba(255, 255, 255, 0.2);
    }

    .snap-timer-ring .progress {
        stroke: #ff4757;
        filter: none;
    }

    .snap-lock-indicator {
        top: -100px;
        gap: 8px;
    }

    .snap-lock-icon {
        background: rgba(0, 0, 0, 0.4);
        border: none;
        box-shadow: none;
    }

    .snap-stop-btn {
        bottom: 150px;
        background: #ff4757;
        box-shadow: 0 4px 20px rgba(255, 71, 87, 0.5);
    }

    .snap-permission {
        background: #000;
        padding: 40px 24px;
    }

    .snap-permission-card {
        width: min(320px, 100%);
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .snap-permission-icon {
        width: 100px;
        height: 100px;
        margin-bottom: 28px;
        background: rgba(255, 255, 255, 0.1);
        border: none;
    }

    .snap-permission h2 {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 12px;
    }

    .snap-permission p {
        color: rgba(255, 255, 255, 0.55);
        font-size: 15px;
        margin-bottom: 28px;
        max-width: 280px;
        line-height: 1.5;
    }

    .snap-permission-btn {
        width: auto;
        min-width: 220px;
        padding: 16px 32px;
        border-radius: 50px;
        background: #fff;
        box-shadow: none;
    }

    .snap-permission-note {
        margin-top: 18px;
        color: rgba(255, 255, 255, 0.46);
        font-size: 12px;
    }

    .snap-preview {
        background: #000;
    }

    .snap-preview-controls {
        left: 0;
        right: 0;
        width: auto;
        transform: none;
        padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 32%, rgba(0, 0, 0, 0.85) 100%);
    }

    .snap-preview-sheet {
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .snap-form {
        margin-bottom: 16px;
    }

    .snap-input {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        padding: 16px 20px;
        margin-bottom: 12px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: none;
    }

    .snap-input::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }

    .snap-input:focus {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.4);
        box-shadow: none;
    }

    .snap-textarea {
        min-height: 70px;
    }

    .snap-preview-actions {
        gap: 12px;
    }

    .snap-btn-cancel,
    .snap-btn-send {
        min-height: 0;
        padding: 16px;
        border-radius: 50px;
        font-size: 15px;
        font-weight: 600;
    }

    .snap-btn-cancel {
        background: transparent;
        border: 1.5px solid rgba(255, 255, 255, 0.3);
        color: #fff;
    }

    .snap-btn-cancel:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .snap-btn-send {
        background: #fff;
        color: #000;
        box-shadow: none;
    }

    .snap-loading {
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .snap-loading-card {
        width: auto;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    @media (min-width: 960px) {
        .snap-controls {
            gap: 44px;
        }

        .snap-preview-controls {
            left: 0;
            right: 0;
            width: auto;
            transform: none;
        }
    }

    @media (max-width: 639px) {
        .snap-header {
            padding-left: 14px;
            padding-right: 14px;
        }

        .snap-brand strong {
            font-size: 14px;
        }

        .snap-timer {
            top: calc(66px + env(safe-area-inset-top, 0px));
        }

        .snap-controls {
            gap: 20px;
            padding-left: 18px;
            padding-right: 18px;
        }

        .snap-gallery,
        .snap-flip {
            width: 44px;
            height: 44px;
            border-radius: 12px;
        }

        .snap-hint {
            bottom: 152px;
            width: calc(100vw - 44px);
            max-width: 320px;
            white-space: normal;
        }

        .snap-preview-controls {
            padding-left: 14px;
            padding-right: 14px;
        }

        .snap-permission {
            padding: 32px 20px;
        }
    }

    /* Garder la camera simple, mais restaurer un panneau preview plus premium */
    .snap-preview-controls {
        left: 50%;
        right: auto;
        width: min(560px, calc(100vw - 32px));
        transform: translateX(-50%);
        padding: 0 0 calc(18px + env(safe-area-inset-bottom, 0px));
        background: none;
    }

    .snap-preview-sheet {
        width: 100%;
        padding: 20px;
        border-radius: 30px;
        background:
            radial-gradient(circle at top right, rgba(249, 115, 22, 0.12), transparent 32%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.9) 100%);
        border: 1px solid rgba(255, 255, 255, 0.52);
        box-shadow: 0 28px 50px -28px rgba(2, 6, 23, 0.92);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .snap-preview-sheet-head {
        display: flex !important;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
    }

    .snap-sheet-kicker {
        display: inline-flex;
        margin-bottom: 4px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #ea580c;
    }

    .snap-preview-sheet-head h3 {
        margin: 0;
        font-size: 21px;
        line-height: 1.1;
        color: #0f172a;
        font-weight: 800;
    }

    .snap-sheet-badge {
        display: inline-flex;
        align-items: center;
        padding: 8px 11px;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.06);
        border: 1px solid rgba(148, 163, 184, 0.22);
        color: #334155;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .snap-form {
        margin-bottom: 14px;
    }

    .snap-field {
        margin-bottom: 12px;
    }

    .snap-field-label {
        display: block !important;
        margin-bottom: 8px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #475569;
    }

    .snap-input {
        color: #0f172a;
        background: rgba(255, 255, 255, 0.74);
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 18px;
        padding: 15px 16px;
        margin-bottom: 0;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: none;
    }

    .snap-input::placeholder {
        color: rgba(71, 85, 105, 0.64);
    }

    .snap-input:focus {
        border-color: rgba(59, 130, 246, 0.34);
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
    }

    .snap-textarea {
        min-height: 88px;
    }

    .snap-form-note {
        display: block !important;
        margin: 6px 0 0;
        font-size: 12px;
        color: #64748b;
        line-height: 1.5;
    }

    .snap-preview-actions {
        gap: 10px;
    }

    .snap-btn-cancel,
    .snap-btn-send {
        min-height: 52px;
        padding: 0 16px;
        border-radius: 18px;
        font-weight: 700;
        font-size: 14px;
    }

    .snap-btn-cancel {
        border: 1px solid rgba(148, 163, 184, 0.24);
        background: rgba(255, 255, 255, 0.74);
        color: #334155;
    }

    .snap-btn-cancel:hover {
        background: rgba(255, 255, 255, 0.94);
    }

    .snap-btn-send {
        background: linear-gradient(135deg, #111827 0%, #ea580c 100%);
        color: #fff;
        box-shadow: 0 22px 30px -26px rgba(234, 88, 12, 0.78);
    }

    .snap-btn-send svg {
        color: inherit;
    }

    .snap-loading-subtext {
        display: block !important;
    }

    @media (max-width: 639px) {
        .snap-preview-controls {
            left: 0;
            right: 0;
            width: auto;
            transform: none;
            padding-left: 14px;
            padding-right: 14px;
        }

        .snap-preview-sheet {
            padding: 18px 16px;
            border-radius: 24px;
        }

        .snap-preview-sheet-head {
            flex-direction: column;
        }
    }

</style>
@endpush

@section('content')
<div class="snap-container" id="snapContainer">
    <!-- Permission screen -->
    <div class="snap-permission" id="permissionScreen">
        <div class="snap-permission-card">
            <div class="snap-permission-icon">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                </svg>
            </div>
            <h2>Créer une vidéo</h2>
            <p>Autorisez l'accès à la caméra pour filmer, ou importez simplement une vidéo depuis votre galerie.</p>

            <button class="snap-permission-btn" id="requestPermission">
                Activer la caméra
            </button>
            <div class="snap-permission-note">
                Vous pourrez changer de caméra et publier rapidement.
            </div>
        </div>
    </div>

    <!-- Live video -->
    <video class="snap-video" id="liveVideo" autoplay playsinline muted></video>

    <!-- Header -->
    <div class="snap-header">
        <div class="snap-header-left">
            <a href="{{ route('prestataire.videos.manage') }}" class="snap-close">
                <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </a>
            <div class="snap-brand">
                <strong>Créer</strong>
            </div>
        </div>
        <div class="snap-header-right">
            <button class="snap-flash" id="flashBtn" title="Flash">
                <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
                </svg>
            </button>
            <button class="snap-flash" id="flipBtn" title="Retourner">
                <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                </svg>
            </button>
        </div>
    </div>

    <!-- Timer -->
    <div class="snap-timer" id="timer">00:00</div>

    <!-- Hint -->
    <div class="snap-hint" id="hint">Maintenez pour filmer, puis glissez vers le haut pour verrouiller</div>

    <!-- Bouton Stop (visible quand verrouillé) -->
    <button class="snap-stop-btn" id="stopBtn">
        <div class="stop-square"></div>
    </button>

    <!-- Controls -->
    <div class="snap-controls">
        <label class="snap-gallery" id="galleryBtn">
            <input type="file" accept="video/mp4,video/webm,video/quicktime,video/mov" id="fileInput" style="display:none;">
            <div class="snap-gallery-icon">
                <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
            </div>
        </label>

        <div class="snap-record-wrap">
            <div style="position: relative;">
            <button class="snap-record-btn" id="recordBtn">
                <div class="snap-record-inner"></div>
            </button>
            <div class="snap-timer-ring" id="timerRing">
                <svg width="95" height="95">
                    <circle class="bg" cx="47.5" cy="47.5" r="43"></circle>
                    <circle class="progress" id="progressCircle" cx="47.5" cy="47.5" r="43"></circle>
                </svg>
            </div>
            <div class="snap-lock-indicator" id="lockIndicator">
                <div class="snap-lock-arrow">
                    <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/>
                    </svg>
                </div>
                <div class="snap-lock-icon">
                    <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
                    </svg>
                </div>
            </div>
            </div>
        </div>

        <button class="snap-flip" id="flipBtnBottom" title="Changer de camera">
            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
            </svg>
        </button>
    </div>

    <!-- Preview screen -->
    <div class="snap-preview" id="previewScreen">
        <video class="snap-preview-video" id="previewVideo" playsinline loop muted></video>
        
        <div class="snap-header">
            <button class="snap-close" id="cancelPreview">
                <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>

        <div class="snap-preview-controls">
            <div class="snap-preview-sheet">
                <div class="snap-preview-sheet-head">
                    <div>
                        <span class="snap-sheet-kicker">Prévisualisation</span>
                        <h3>Finalisez votre publication</h3>
                    </div>
                    <span class="snap-sheet-badge">Public</span>
                </div>

                <form class="snap-form" id="uploadForm" action="{{ route('prestataire.videos.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="file" name="video" id="videoFileInput" style="display:none;" accept="video/*">

                    <div class="snap-field">
                        <label class="snap-field-label" for="videoTitle">Titre</label>
                        <input id="videoTitle" type="text" name="title" class="snap-input" placeholder="Ex. Présentation d’un service ou coulisses d’une prestation" required maxlength="100">
                    </div>

                    <div class="snap-field">
                        <label class="snap-field-label" for="videoDescription">Description</label>
                        <textarea id="videoDescription" name="description" class="snap-input snap-textarea" placeholder="Ajoutez quelques détails utiles pour donner envie de regarder..." maxlength="300"></textarea>
                    </div>

                    <p class="snap-form-note">Un titre clair améliore la compréhension de votre vidéo dans le feed.</p>
                </form>

                <div class="snap-preview-actions">
                    <button type="button" class="snap-btn-cancel" id="retakeBtn">
                        Reprendre
                    </button>
                    <button type="submit" form="uploadForm" class="snap-btn-send" id="sendBtn">
                        <svg width="22" height="22" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>
                        </svg>
                        Publier
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Loading -->
    <div class="snap-loading" id="loadingScreen">
        <div class="snap-loading-card">
            <div class="snap-spinner"></div>
            <p class="snap-loading-text">Publication en cours...</p>
            <p class="snap-loading-subtext">Nous préparons votre vidéo pour qu’elle soit disponible dans votre espace prestataire.</p>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const permissionScreen = document.getElementById('permissionScreen');
    const requestPermissionBtn = document.getElementById('requestPermission');
    const liveVideo = document.getElementById('liveVideo');
    const recordBtn = document.getElementById('recordBtn');
    const flipBtn = document.getElementById('flipBtn');
    const flipBtnBottom = document.getElementById('flipBtnBottom');
    const flashBtn = document.getElementById('flashBtn');
    const timer = document.getElementById('timer');
    const progressCircle = document.getElementById('progressCircle');
    const hint = document.getElementById('hint');
    const previewScreen = document.getElementById('previewScreen');
    const previewVideo = document.getElementById('previewVideo');
    const cancelPreviewBtn = document.getElementById('cancelPreview');
    const retakeBtn = document.getElementById('retakeBtn');
    const uploadForm = document.getElementById('uploadForm');
    const sendBtn = document.getElementById('sendBtn');
    const loadingScreen = document.getElementById('loadingScreen');
    const lockIndicator = document.getElementById('lockIndicator');
    const stopBtn = document.getElementById('stopBtn');
    const fileInput = document.getElementById('fileInput');
    const videoFileInput = document.getElementById('videoFileInput');

    let stream = null;
    let mediaRecorder = null;
    let recordedChunks = [];
    let isRecording = false;
    let recordingStartTime = 0;
    let timerInterval = null;
    let facingMode = 'environment'; // Caméra arrière par défaut
    let flashEnabled = false;
    let recordedMimeType = null;
    const MAX_DURATION = 60;
    const CIRCLE_LENGTH = 270; // 2 * PI * 43
    
    // Variables pour le zoom tactile
    let currentZoom = 1;
    let initialDistance = 0;
    let zoomTrack = null;
    let minZoom = 1;
    let maxZoom = 5;
    let cameraRetried = false; // Éviter les boucles infinies

    // Variables pour le verrouillage d'enregistrement (style Snapchat)
    let isLocked = false;
    let touchStartX = 0;
    let touchStartY = 0;
    const LOCK_THRESHOLD = 60; // Distance en pixels pour activer le verrouillage

    document.body.classList.add('snap-mode');

    // Démarrer la caméra automatiquement au chargement
    startCamera();

    async function startCamera() {
        try {
            if (stream) {
                stream.getTracks().forEach(track => track.stop());
            }

            // Demander une qualité HD (720p) pour assurer la compatibilité
            const constraints = {
                video: {
                    facingMode: facingMode,
                    width: { ideal: 1280 },
                    height: { ideal: 720 },
                    frameRate: { ideal: 30 }
                },
                audio: {
                    echoCancellation: true,
                    noiseSuppression: true,
                    autoGainControl: true
                }
            };

            let selectedStream = null;
            
            try {
                selectedStream = await navigator.mediaDevices.getUserMedia(constraints);
                const track = selectedStream.getVideoTracks()[0];
                const settings = track.getSettings();
                console.log('Camera quality:', settings.width + 'x' + settings.height + ' @ ' + settings.frameRate + 'fps');
            } catch (e) {
                console.log('High quality failed, trying fallback...', e);
                // Fallback avec contraintes minimales
                selectedStream = await navigator.mediaDevices.getUserMedia({
                    video: { facingMode: facingMode },
                    audio: true
                });
            }

            stream = selectedStream;

            liveVideo.srcObject = stream;
            permissionScreen.style.display = 'none';
            cameraRetried = false; // Réinitialiser si succès

            const track = stream.getVideoTracks()[0];
            const settings = track.getSettings();
            console.log('Camera:', settings.width + 'x' + settings.height);

            zoomTrack = track;
            const caps = track.getCapabilities ? track.getCapabilities() : {};
            if (!caps.torch) flashBtn.style.display = 'none';
            
            // Configuration du zoom - réinitialiser à 1x
            if (caps.zoom) {
                minZoom = caps.zoom.min || 1;
                maxZoom = caps.zoom.max || 5;
                currentZoom = minZoom;
                // Forcer le zoom à 1x au démarrage
                try {
                    await track.applyConstraints({ advanced: [{ zoom: minZoom }] });
                } catch (e) {
                    console.log('Zoom reset not supported');
                }
            }
        } catch (error) {
            console.error('Camera error:', error);
            
            // Si permission refusée, ne pas réessayer en boucle
            if (error.name === 'NotAllowedError' || error.name === 'PermissionDeniedError') {
                permissionScreen.style.display = 'flex';
                return;
            }
            
            // Essayer avec la caméra frontale si la caméra arrière échoue (une seule fois)
            if (facingMode === 'environment' && !cameraRetried) {
                facingMode = 'user';
                cameraRetried = true;
                startCamera();
                return;
            }
            // Afficher l'écran de permission si tout échoue
            permissionScreen.style.display = 'flex';
        }
    }

    requestPermissionBtn.addEventListener('click', function() {
        permissionScreen.style.display = 'none';
        cameraRetried = false; // Permettre une nouvelle tentative
        startCamera();
    });

    function flipCamera() {
        facingMode = facingMode === 'user' ? 'environment' : 'user';
        startCamera();
    }
    flipBtn.addEventListener('click', flipCamera);
    flipBtnBottom.addEventListener('click', flipCamera);

    flashBtn.addEventListener('click', function() {
        if (!stream) return;
        const track = stream.getVideoTracks()[0];
        flashEnabled = !flashEnabled;
        track.applyConstraints({ advanced: [{ torch: flashEnabled }] });
        flashBtn.classList.toggle('active', flashEnabled);
    });

    function startRecording() {
        if (isRecording || !stream) return;

        isRecording = true;
        recordedChunks = [];
        recordBtn.classList.add('recording');
        hint.style.display = 'none';
        timer.classList.add('visible');

        // IMPORTANT: iOS Safari UNIQUEMENT supporte H.264 (avc1)
        // Chrome/Firefox supportent aussi WebM mais iOS ne le lit pas
        // On vérifie si on est sur iOS pour choisir le bon codec
        var isIOSDevice = /iPad|iPhone|iPod/.test(navigator.userAgent);
        
        // Sur iOS, utiliser uniquement MP4 H.264
        // Sur autres plateformes, essayer MP4 d'abord, puis WebM
        const candidates = isIOSDevice ? [
            'video/mp4;codecs=avc1.42E01E,mp4a.40.2', // H.264 Baseline (meilleure compatibilité iOS)
            'video/mp4;codecs=avc1.640028,mp4a.40.2', // H.264 High Profile
            'video/mp4'
        ] : [
            'video/mp4;codecs=avc1.42E01E,mp4a.40.2', // H.264 Baseline - PRIORITÉ pour compatibilité iOS
            'video/mp4;codecs=avc1.640028,mp4a.40.2', // H.264 High Profile
            'video/mp4',
            'video/webm;codecs=vp9,opus',
            'video/webm;codecs=vp8,opus',
            'video/webm'
        ];

        // Calculer bitrate selon résolution - OPTIMISÉ POUR LE WEB
        const track = stream.getVideoTracks()[0];
        const settings = track.getSettings();
        let videoBitrate = 2500000; // 2.5 Mbps par défaut (720p)
        
        if (settings.width >= 3840) {
            videoBitrate = 8000000; // 8 Mbps pour 4K (suffisant pour le web)
        } else if (settings.width >= 1920) {
            videoBitrate = 4500000; // 4.5 Mbps pour Full HD
        } else if (settings.width >= 1280) {
            videoBitrate = 2500000; // 2.5 Mbps pour HD
        } else {
            videoBitrate = 1500000; // 1.5 Mbps pour SD
        }
        
        console.log('Recording at', settings.width + 'x' + settings.height, 'with bitrate:', (videoBitrate / 1000000) + ' Mbps');

        let options = null;
        let selectedMimeType = null;
        
        for (const mimeType of candidates) {
            if (MediaRecorder.isTypeSupported(mimeType)) {
                selectedMimeType = mimeType;
                options = { 
                    mimeType,
                    videoBitsPerSecond: videoBitrate,
                    audioBitsPerSecond: 128000  // 128 kbps audio (suffisant)
                };
                recordedMimeType = mimeType;
                console.log('Recording format:', mimeType);
                break;
            }
        }
        
        // ALERTE: Si on utilise WebM, la vidéo ne sera PAS lisible sur iOS
        if (selectedMimeType && selectedMimeType.includes('webm')) {
            console.warn('ATTENTION: Enregistrement en WebM - non compatible iOS Safari!');
            // On continue quand même car c'est le seul format disponible
        }

        if (!options) {
            options = {
                videoBitsPerSecond: videoBitrate,
                audioBitsPerSecond: 128000
            };
            recordedMimeType = null;
            console.warn('Aucun codec spécifique trouvé, utilisation du défaut');
        }

        mediaRecorder = new MediaRecorder(stream, options);
        // Certains navigateurs renseignent le mimetype réel ici
        if (mediaRecorder && mediaRecorder.mimeType) {
            recordedMimeType = mediaRecorder.mimeType;
        }
        mediaRecorder.ondataavailable = e => { if (e.data.size > 0) recordedChunks.push(e.data); };
        mediaRecorder.onstop = finishRecording;
        mediaRecorder.start(100);
        recordingStartTime = Date.now();

        timerInterval = setInterval(() => {
            const elapsed = (Date.now() - recordingStartTime) / 1000;
            const mins = Math.floor(elapsed / 60).toString().padStart(2, '0');
            const secs = Math.floor(elapsed % 60).toString().padStart(2, '0');
            timer.textContent = `${mins}:${secs}`;

            const progress = (elapsed / MAX_DURATION);
            progressCircle.style.strokeDashoffset = CIRCLE_LENGTH - (progress * CIRCLE_LENGTH);

            if (elapsed >= MAX_DURATION) stopRecording();
        }, 100);
    }

    function stopRecording() {
        if (!isRecording) return;
        isRecording = false;
        recordBtn.classList.remove('recording');
        clearInterval(timerInterval);
        if (mediaRecorder && mediaRecorder.state !== 'inactive') {
            mediaRecorder.stop();
        }
    }

    function finishRecording() {
        const blobType = recordedMimeType || 'video/webm';
        const blob = new Blob(recordedChunks, { type: blobType });
        const duration = (Date.now() - recordingStartTime) / 1000;
        
        if (duration < 0.5) {
            resetUI();
            return;
        }
        showPreview(blob);
    }

    function resetUI() {
        timer.classList.remove('visible');
        timer.textContent = '00:00';
        progressCircle.style.strokeDashoffset = CIRCLE_LENGTH;
        hint.style.display = 'none';
        isLocked = false;
        lockIndicator.classList.remove('visible', 'active');
        lockIndicator.style.opacity = '';
        stopBtn.classList.remove('visible');
    }

    function releaseRecordingHold() {
        if (!isLocked && isRecording) {
            stopRecording();
        }

        if (!isLocked) {
            lockIndicator.classList.remove('visible');
            lockIndicator.style.opacity = '';
        }
    }

    function stopLockedRecording(event) {
        if (event && event.cancelable) {
            event.preventDefault();
        }

        if (!isLocked || !isRecording) {
            return false;
        }

        stopRecording();
        return true;
    }

    // ========== Gestion du verrouillage style Snapchat ==========
    
    // Souris - Desktop
    recordBtn.addEventListener('mousedown', function(e) {
        if (stopLockedRecording(e)) return;
        touchStartX = e.clientX;
        startRecording();
        lockIndicator.classList.add('visible');
    });

    recordBtn.addEventListener('mouseleave', function() {
        if (isRecording && !isLocked) {
            stopRecording();
        }
        if (!isLocked) {
            lockIndicator.classList.remove('visible');
            lockIndicator.style.opacity = '';
        }
    });

    document.addEventListener('mouseup', function() {
        releaseRecordingHold();
    });

    // Touch - Mobile
    recordBtn.addEventListener('touchstart', function(e) {
        if (stopLockedRecording(e)) return;
        e.preventDefault();
        if (e.touches.length > 0) {
            touchStartX = e.touches[0].clientX;
            touchStartY = e.touches[0].clientY;
        }
        startRecording();
        lockIndicator.classList.add('visible');
    });

    recordBtn.addEventListener('touchmove', function(e) {
        if (!isRecording || isLocked) return;
        
        const touch = e.touches[0];
        const deltaY = touchStartY - touch.clientY; // Positif si on va vers le haut
        
        // Si on glisse vers le HAUT de plus de LOCK_THRESHOLD pixels
        if (deltaY > LOCK_THRESHOLD) {
            isLocked = true;
            lockIndicator.classList.add('active');
            stopBtn.classList.add('visible');
            
            // Vibration feedback si disponible
            if (navigator.vibrate) {
                navigator.vibrate(50);
            }
        } else if (deltaY > 20) {
            // Feedback visuel pendant le glissement
            lockIndicator.style.opacity = Math.min(1, deltaY / LOCK_THRESHOLD);
        }
    });

    recordBtn.addEventListener('touchend', function(e) {
        e.preventDefault();
        releaseRecordingHold();
    });

    document.addEventListener('touchend', function() {
        releaseRecordingHold();
    }, { passive: true });

    document.addEventListener('touchcancel', function() {
        releaseRecordingHold();
    }, { passive: true });

    // Bouton stop pour arrêter quand verrouillé
    stopBtn.addEventListener('click', function() {
        if (isLocked && isRecording) {
            stopRecording();
        }
    });

    stopBtn.addEventListener('touchstart', function(e) {
        if (e.cancelable) e.preventDefault();
        if (isLocked && isRecording) {
            stopRecording();
        }
    }, { passive: false });

    stopBtn.addEventListener('touchend', function(e) {
        e.preventDefault();
        if (isLocked && isRecording) {
            stopRecording();
        }
    });

    lockIndicator.addEventListener('click', function(e) {
        stopLockedRecording(e);
    });

    lockIndicator.addEventListener('touchstart', function(e) {
        stopLockedRecording(e);
    }, { passive: false });

    // Zoom par pincement tactile (pinch-to-zoom)
    liveVideo.addEventListener('touchstart', function(e) {
        if (e.touches.length === 2) {
            initialDistance = getDistance(e.touches[0], e.touches[1]);
        }
    }, { passive: true });

    liveVideo.addEventListener('touchmove', function(e) {
        if (e.touches.length === 2 && zoomTrack) {
            e.preventDefault();
            const currentDistance = getDistance(e.touches[0], e.touches[1]);
            const scale = currentDistance / initialDistance;
            let newZoom = currentZoom * scale;
            
            // Limiter le zoom
            newZoom = Math.max(minZoom, Math.min(maxZoom, newZoom));
            
            try {
                const caps = zoomTrack.getCapabilities();
                if (caps.zoom) {
                    zoomTrack.applyConstraints({ advanced: [{ zoom: newZoom }] });
                }
            } catch (err) {
                console.log('Zoom non supporté:', err);
            }
        }
    }, { passive: false });

    liveVideo.addEventListener('touchend', function(e) {
        if (e.touches.length < 2 && zoomTrack) {
            try {
                const caps = zoomTrack.getCapabilities();
                if (caps.zoom) {
                    const settings = zoomTrack.getSettings();
                    currentZoom = settings.zoom || 1;
                }
            } catch (err) {}
        }
    }, { passive: true });

    function getDistance(touch1, touch2) {
        const dx = touch1.clientX - touch2.clientX;
        const dy = touch1.clientY - touch2.clientY;
        return Math.sqrt(dx * dx + dy * dy);
    }

    // File input
    fileInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (!file) return;
        // Limite augmentée à 512 Mo pour supporter les vidéos 4K/1080p importées
        if (file.size > 512 * 1024 * 1024) {
            alert('La vidéo ne doit pas dépasser 512 Mo');
            return;
        }
        showPreview(file, true);
    });

    function showPreview(blob, isFile = false) {
        const url = URL.createObjectURL(blob);
        previewVideo.src = url;
        previewVideo.play();
        previewScreen.classList.add('visible');
        resetUI();

        let file = blob;
        if (!isFile) {
            const type = (blob && blob.type) ? blob.type : (recordedMimeType || 'video/webm');
            const isMp4 = type.includes('mp4');
            const name = isMp4 ? 'video.mp4' : 'video.webm';
            file = new File([blob], name, { type });
        }
        const dt = new DataTransfer();
        dt.items.add(file);
        videoFileInput.files = dt.files;
    }

    function hidePreview() {
        previewScreen.classList.remove('visible');
        previewVideo.pause();
        previewVideo.src = '';
        uploadForm.reset();
    }

    cancelPreviewBtn.addEventListener('click', hidePreview);
    retakeBtn.addEventListener('click', hidePreview);

    uploadForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const title = uploadForm.querySelector('input[name="title"]').value.trim();
        if (!title) { alert('Ajoutez un titre'); return; }
        if (!videoFileInput.files.length) { alert('Aucune vidéo'); return; }

        loadingScreen.classList.add('visible');
        sendBtn.disabled = true;

        const formData = new FormData(uploadForm);
        
        // S'assurer que le fichier vidéo est bien inclus
        if (videoFileInput.files[0]) {
            formData.set('video', videoFileInput.files[0]);
        }
        
        // Récupérer le token CSRF
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || 
                         document.querySelector('input[name="_token"]')?.value || '';
        
        fetch(uploadForm.action, {
            method: 'POST',
            body: formData,
            headers: { 
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json, text/html, */*'
            },
            credentials: 'same-origin'
        })
        .then(res => {
            // Gérer la redirection
            if (res.redirected) {
                window.location.href = res.url;
                return;
            }
            // Vérifier si c'est une réponse OK
            if (res.ok) {
                return res.text().then(text => {
                    // Essayer de parser en JSON
                    try {
                        const json = JSON.parse(text);
                        if (json.redirect) {
                            window.location.href = json.redirect;
                        } else if (json.success) {
                            window.location.href = '{{ route("prestataire.videos.manage") }}';
                        } else {
                            window.location.href = '{{ route("prestataire.videos.manage") }}';
                        }
                    } catch (e) {
                        // Ce n'est pas du JSON, probablement une page HTML de succès
                        window.location.href = '{{ route("prestataire.videos.manage") }}';
                    }
                });
            } else {
                return res.text().then(text => {
                    console.error('Erreur serveur:', text);
                    throw new Error('Erreur serveur: ' + res.status);
                });
            }
        })
        .catch(err => {
            console.error('Erreur publication:', err);
            loadingScreen.classList.remove('visible');
            sendBtn.disabled = false;
            alert('Erreur lors de la publication. Vérifiez votre connexion et réessayez.');
        });
    });

    window.addEventListener('beforeunload', () => {
        if (stream) stream.getTracks().forEach(t => t.stop());
        document.body.classList.remove('snap-mode');
    });
});
</script>
@endpush