/* Twitch-ish chat block */
.vod-chat { margin-top: 14px; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; overflow: hidden; background: rgba(15,15,20,.55); }
.vod-chat-header{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.10); }
.vod-chat-title{ font-weight:700; letter-spacing:.2px; opacity:.95; }
.vod-metrics{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.vod-metric-btn{ display:inline-flex; gap:6px; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.25); color:inherit; cursor:pointer; }
.vod-metric-btn.is-active{ background: rgba(145,70,255,.25); border-color: rgba(145,70,255,.55); }
.vod-metric-btn:disabled{ opacity:.6; cursor:not-allowed; }
.vod-metric-count{ opacity:.85; font-variant-numeric: tabular-nums; }

.vod-chat-body{ max-height: 360px; overflow:auto; padding:10px 12px; display:flex; flex-direction:column; gap:10px; }
.vod-chat-empty{ opacity:.7; padding:6px 0; }
.vod-chat-msg{ padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.20); }
.vod-chat-meta{ display:flex; gap:10px; align-items:center; font-size:.85rem; opacity:.85; margin-bottom:4px; }
.vod-chat-name{ font-weight:700; opacity:.95; }
.vod-chat-time{ opacity:.7; }
.vod-chat-text{ line-height:1.5; word-wrap:break-word; }
.vod-chat-text .emote{ height: 22px; width:auto; vertical-align: text-bottom; }

.vod-chat-input{ border-top:1px solid rgba(255,255,255,.10); padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
.vod-chat-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.vod-chat-row input[type="text"]{ flex:1; min-width: 170px; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); color:inherit; }
.vod-chat-row textarea{ width:100%; min-height: 78px; resize: vertical; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); color:inherit; }
.vod-chat-actions{ display:flex; gap:8px; align-items:center; justify-content:space-between; }
.vod-chat-send{ padding:9px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background: rgba(145,70,255,.25); color:inherit; cursor:pointer; }
.vod-chat-send:hover{ background: rgba(145,70,255,.35); }

.vod-emote-wrap{ position:relative; }
.vod-emote-btn{ padding:9px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); color:inherit; cursor:pointer; }
.vod-emote-panel{ position:absolute; right:0; bottom: 46px; width: min(420px, 92vw); max-height: 320px; overflow:auto; border-radius: 12px; border:1px solid rgba(255,255,255,.14); background: rgba(18,18,24,.98); padding:10px; box-shadow: 0 10px 30px rgba(0,0,0,.45); z-index:50; }
.vod-emote-tabs{ display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.vod-emote-tab{ padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.20); cursor:pointer; }
.vod-emote-tab[aria-selected="true"]{ background: rgba(145,70,255,.25); }
.vod-emote-grid{ display:grid; grid-template-columns: repeat(8, 1fr); gap:8px; }
@media (max-width: 520px){ .vod-emote-grid{ grid-template-columns: repeat(6, 1fr);} }
.vod-emote-item{ border:0; background: transparent; cursor:pointer; padding:6px; border-radius:10px; }
.vod-emote-item:hover{ background: rgba(255,255,255,.08); }
.vod-emote-item img{ height: 28px; width:auto; display:block; margin:0 auto; }
.vod-error{ color:#ffb3b3; font-size:.9rem; opacity:.95; }

/* Twitch-like chat lines */
.vod-chat-body{padding:12px; overflow:auto; max-height:520px; background:rgba(0,0,0,.18); border-radius:12px}
.chat-line{padding:10px 8px; border-radius:10px}
.chat-line:hover{background:rgba(255,255,255,.04)}
.chat-meta{display:flex; align-items:baseline; gap:10px}
.chat-name{font-weight:700}
.chat-time{color:var(--muted); font-size:12px}
.chat-actions{margin-left:auto; display:flex; gap:8px}
.chat-action{background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:12px}
.chat-action:hover{color:var(--text)}
.chat-text{margin-top:4px; line-height:1.35; white-space:pre-wrap; word-break:break-word}
[data-emote-panel]{display:none}
[data-emote-panel].open{display:block}