.sue-message--video { width:min(94%,580px); max-width:580px; }
.sue-message--video>div { overflow:hidden; padding:0; border-color:#cfd3d7; border-radius:18px 18px 18px 6px; background:#0a0b0d; box-shadow:0 16px 34px rgba(10,13,17,.18); }
.sue-video-card { position:relative; overflow:hidden; aspect-ratio:16/9; background:#07080a; isolation:isolate; }
.sue-video-card video { width:100%; height:100%; display:block; object-fit:cover; background:#07080a; }
.sue-video-overlay { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:5px; padding:22px; background:linear-gradient(180deg,rgba(3,5,8,.05) 18%,rgba(3,5,8,.28) 48%,rgba(3,5,8,.94) 100%); color:#fff; transition:opacity .25s ease; }
.sue-video-overlay::before { content:""; position:absolute; inset:auto 22px 18px 22px; height:1px; background:linear-gradient(90deg,var(--engol-red),rgba(255,255,255,.18)); opacity:.65; }
.sue-video-kicker { padding:5px 8px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(0,0,0,.28); color:#fff; font-size:.58rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; backdrop-filter:blur(8px); }
.sue-video-overlay>strong { margin-top:2px; font-size:clamp(1.12rem,3vw,1.55rem); line-height:1.05; letter-spacing:-.035em; text-shadow:0 2px 16px rgba(0,0,0,.65); }
.sue-video-overlay>small { color:#d7dadd; font-size:.7rem; }
.sue-video-overlay button { min-height:42px; display:inline-flex; align-items:center; gap:8px; margin-top:8px; padding:7px 11px 7px 7px; border:1px solid rgba(255,255,255,.25); border-radius:999px; background:rgba(229,36,32,.94); color:#fff; box-shadow:0 10px 26px rgba(229,36,32,.3); font-size:.72rem; font-weight:900; backdrop-filter:blur(10px); cursor:pointer; transition:transform .2s ease,box-shadow .2s ease; }
.sue-video-overlay button:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(229,36,32,.4); }
.sue-video-overlay button svg { width:28px; height:28px; padding:6px; border-radius:50%; background:#fff; fill:#e52420; stroke:none; }
.sue-video-overlay button em { padding-left:8px; border-left:1px solid rgba(255,255,255,.3); color:#ffd9d7; font-size:.64rem; font-style:normal; }
.sue-video-duration { position:absolute; z-index:3; top:12px; right:12px; padding:5px 7px; border-radius:7px; background:rgba(0,0,0,.68); color:#fff; font-size:.61rem; font-weight:850; backdrop-filter:blur(7px); transition:opacity .2s ease; }
.sue-video-card.is-playing .sue-video-overlay,.sue-video-card.is-playing .sue-video-duration { opacity:0; pointer-events:none; }
.sue-video-caption { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 14px; background:linear-gradient(135deg,#111317,#08090b); color:#fff; }
.sue-video-caption span,.sue-video-caption b,.sue-video-caption small { display:block; }
.sue-video-caption b { font-size:.74rem; }
.sue-video-caption small { margin-top:2px; color:#9da3aa; font-size:.64rem; }
.sue-video-caption svg { width:20px; height:20px; flex:0 0 auto; fill:none; stroke:#e52420; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media(max-width:640px){.sue-message--video{width:100%;max-width:100%}.sue-video-overlay{padding:16px}.sue-video-overlay::before{inset:auto 16px 12px}.sue-video-overlay>small{display:none}.sue-video-overlay button{min-height:38px;margin-top:5px}.sue-video-caption{min-height:52px;padding:9px 12px}}
@media(prefers-reduced-motion:reduce){.sue-video-overlay,.sue-video-duration,.sue-video-overlay button{transition:none}}
