/* ─────────────────────────────────────────────────────────────────────────────
   VH.CSS — Video Handoff styles
   Loaded via <link> in index.html. All classes prefixed .vh-
   ───────────────────────────────────────────────────────────────────────────── */

/* CAMERA MOVE GRID */
.vh-cam-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.vh-cam-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 4px; min-height: 44px; background: #1c1e26; border: 0.5px solid #2e3042; border-radius: 7px; cursor: pointer; transition: border-color 0.12s, background 0.12s; user-select: none; }
.vh-cam-tile:hover { border-color: var(--text3); background: #22242f; }
.vh-cam-tile.selected { border-color: #4aafc5; background: rgba(74,175,197,0.1); }
.vh-cam-tile svg { display: none; }
.vh-cam-label { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); text-align: center; line-height: 1.3; }
.vh-cam-tile.selected .vh-cam-label { color: #4aafc5; }

/* SCENE LIBRARY PICKER (legacy — kept for any residual references) */
.vh-scene-lib { margin-top: 20px; border-top: 0.5px solid var(--border); padding-top: 20px; }
.vh-scene-group { margin-bottom: 16px; }
.vh-scene-group-label { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.vh-scene-group-label::after { content: ''; flex: 1; height: 0.5px; background: var(--border-strong); display: inline-block; }
.vh-scene-img-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.vh-scene-img { position: relative; width: 72px; height: 72px; border-radius: 5px; overflow: hidden; cursor: pointer; border: 1.5px solid transparent; transition: border-color 0.12s; flex-shrink: 0; }
.vh-scene-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vh-scene-img:hover { border-color: var(--text3); }
.vh-scene-img.selected { border-color: #4aafc5; }
.vh-scene-img-num { position: absolute; top: 3px; left: 3px; background: #4aafc5; color: #0d0e11; font-size: 9px; font-weight: 700; border-radius: 3px; padding: 1px 4px; line-height: 1.4; display: none; }
.vh-scene-img.selected .vh-scene-img-num { display: block; }
.vh-scene-lib-empty { font-size: 12px; color: var(--text3); font-style: italic; }
.vh-ref-max-notice { font-size: 11px; color: #c2410c; margin-top: 6px; display: none; }

/* CONTROLS (model / duration / aspect / resolution) */
.vh-field-group { display: flex; flex-direction: column; gap: 5px; }
.vh-field-label { font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text3); }
.vh-select { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text); background: var(--surface); border: 0.5px solid var(--border-strong); border-radius: 7px; padding: 8px 28px 8px 10px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235a5752' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; }
.vh-audio-toggle { display: flex; align-items: center; gap: 0; background: var(--surface2); border: 0.5px solid var(--border-strong); border-radius: 7px; overflow: hidden; height: 36px; }
.vh-audio-btn { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; padding: 0 14px; height: 100%; border: none; background: transparent; color: var(--text3); cursor: pointer; transition: all 0.12s; }
.vh-audio-btn.active { background: var(--surface); color: var(--text); }

/* EXPORT BLOCK */
.vh-export-block { background: var(--surface); border: 0.5px solid var(--border-strong); border-radius: 9px; padding: 16px; }
.vh-export-title { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); margin-bottom: 12px; display: block; }
.vh-export-btn { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; border-radius: 7px; padding: 9px 16px; cursor: pointer; width: 100%; margin-bottom: 8px; text-align: left; display: flex; align-items: center; gap: 8px; transition: opacity 0.12s; }
.vh-export-btn:last-child { margin-bottom: 0; }
.vh-export-btn-zip { background: rgba(74,175,197,0.12); border: 0.5px solid rgba(74,175,197,0.35); color: #4aafc5; }
.vh-export-btn-pdf { background: rgba(200,169,122,0.12); border: 0.5px solid rgba(200,169,122,0.35); color: #c8a97a; }
.vh-export-btn:hover { opacity: 0.8; }

/* REF SLOTS */
.vh-ref-slots { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.vh-ref-slot { width: 100px; height: 100px; border-radius: 8px; border: 1.5px dashed #2e3042; background: #1c1e26; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; transition: border-color 0.12s; flex-shrink: 0; overflow: hidden; }
.vh-ref-slot:hover:not(.filled) { border-color: var(--text3); }
.vh-ref-slot.filled { border-style: solid; border-color: var(--border-strong); cursor: default; }
.vh-ref-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vh-ref-slot-num { position: absolute; top: 4px; left: 4px; background: #4aafc5; color: #0d0e11; font-size: 9px; font-weight: 700; border-radius: 3px; padding: 1px 4px; line-height: 1.4; }
.vh-ref-slot-remove { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; background: rgba(0,0,0,0.65); color: #fff; border: none; border-radius: 50%; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
.vh-ref-slot-add { font-size: 22px; color: var(--text3); line-height: 1; }

/* REF PICKER MODAL */
.vh-picker-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.vh-picker-modal { background: var(--bg); border: 0.5px solid var(--border-strong); border-radius: 12px; width: 700px; max-height: 78vh; overflow: hidden; display: flex; flex-direction: column; }
.vh-picker-header { padding: 16px 20px; border-bottom: 0.5px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.vh-picker-title { font-size: 13px; font-weight: 600; color: var(--text); }
.vh-picker-close { background: none; border: none; color: var(--text3); font-size: 22px; cursor: pointer; padding: 0; line-height: 1; }
.vh-picker-close:hover { color: var(--text); }
.vh-picker-tabs { display: flex; border-bottom: 0.5px solid var(--border); flex-shrink: 0; }
.vh-picker-tab { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text3); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 11px 20px; cursor: pointer; transition: color 0.12s; }
.vh-picker-tab.active { color: #4aafc5; border-bottom-color: #4aafc5; }
.vh-picker-body { flex: 1; overflow-y: auto; padding: 20px; min-height: 200px; }
.vh-picker-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.vh-picker-item { width: 110px; cursor: pointer; border-radius: 7px; border: 1.5px solid var(--border-strong); background: var(--surface); overflow: hidden; transition: border-color 0.12s; flex-shrink: 0; }
.vh-picker-item:hover { border-color: #4aafc5; }
.vh-picker-item img { width: 110px; height: 80px; object-fit: cover; display: block; }
.vh-picker-item-label { padding: 5px 7px 6px; font-size: 10px; font-weight: 500; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vh-picker-empty { font-size: 12px; color: var(--text3); font-style: italic; }
.vh-picker-upload-area { display: flex; flex-direction: column; gap: 14px; }