/* KOVAT Clips — WS-3 Feature 1 — Short-form video styles */

.clips-tab { padding: 20px; }
.clips-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:12px; }
.clips-header h2 { font-size:22px; font-weight:600; color:var(--text-primary, #F0F0F8); margin:0; }

.clips-feed { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }

.clip-card { background:var(--surface, #0F0F14); border:1px solid var(--border, #2A2A38); border-radius:10px; overflow:hidden; cursor:pointer; transition: transform 150ms ease-out, border-color 150ms ease-out; }
.clip-card:hover { transform: translateY(-2px); border-color:var(--accent-blue, #4A7AFF); }

.clip-thumb { position:relative; width:100%; aspect-ratio:9/16; background:#050507; overflow:hidden; }
.clip-thumb img { width:100%; height:100%; object-fit:cover; }
.clip-duration { position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,0.75); color:#fff; padding:2px 8px; border-radius:4px; font-size:12px; font-weight:600; }

.clip-info { padding:12px; }
.clip-author { font-size:14px; font-weight:600; color:var(--accent-blue, #4A7AFF); display:block; margin-bottom:4px; }
.clip-caption { font-size:13px; color:var(--text-secondary, #9090A8); display:block; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.clip-meta { font-size:11px; color:var(--text-disabled, #505060); }

/* Clip creator modal */
.clip-creator-body { padding:16px; }
.clip-record-area { margin-bottom:16px; background:#000; border-radius:8px; overflow:hidden; min-height:200px; display:flex; align-items:center; justify-content:center; }
.clip-record-area video { display:block; }
.clip-controls { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.clip-share-options { margin-bottom:12px; }
.clip-share-options label { font-size:13px; color:var(--text-secondary, #9090A8); margin-bottom:4px; display:block; }
.clip-action-bar { display:flex; gap:8px; justify-content:flex-end; }

#clipPlayerContent { padding:0; }
#clipPlayerContent video { width:100%; max-height:80vh; border-radius:8px; background:#000; }
#clipPlayerContent .clip-player-info { padding:16px; }
#clipPlayerContent .clip-player-actions { display:flex; gap:8px; padding:0 16px 16px; align-items:center; flex-wrap:wrap; }
.clip-reaction-btn { background:var(--surface-raised, #1A1A22); border:1px solid var(--border, #2A2A38); border-radius:20px; padding:6px 14px; cursor:pointer; font-size:16px; transition: background 150ms; }
.clip-reaction-btn:hover { background:var(--surface-overlay, #22222C); }

.clip-no-thumb { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:48px; background:linear-gradient(135deg, var(--accent-purple, #8B5CF6), var(--accent-blue, #4A7AFF)); }

.empty-state { text-align:center; padding:60px 20px; }
.empty-state h3 { margin:12px 0 8px; color:var(--text-primary, #F0F0F8); }
.empty-state p { color:var(--text-secondary, #9090A8); font-size:14px; }

@media (max-width:600px) {
    .clips-feed { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:10px; }
    .clips-tab { padding:12px; }
}