/* Comments layout in CSS px: avatar 32; avatar/text gap 10; rows padding 10. */
#mcViewer{--mcc-p:0}
#mcViewer.mcc-open{height:var(--mcc-vh,100dvh)!important;max-height:var(--mcc-vh,100dvh)!important;overflow:hidden}
#mcViewer .mcc-sheet[hidden]{display:none!important}
#mcViewer .mcc-sheet{position:absolute;z-index:30;left:0;right:0;bottom:0;height:66%;box-sizing:border-box;display:flex;flex-direction:column;border-radius:18px 18px 0 0;background:#1b1b1f;color:#f8fafc;transform:translate3d(0,calc((1 - var(--mcc-p))*100%),0);will-change:transform;box-shadow:0 -8px 32px #0002;font-family:inherit;overflow:hidden;padding-bottom:env(safe-area-inset-bottom,0px)}
#mcViewer.mcc-open .mc-clip[data-active] .mc-video{transform-origin:50% 0;transform:scale(calc(1 - .66*var(--mcc-p)));will-change:transform}
#mcViewer.mcc-open .mc-copy,#mcViewer.mcc-open .mc-controls{opacity:calc(1 - var(--mcc-p));pointer-events:none}
#mcViewer.mcc-animate .mcc-sheet,#mcViewer.mcc-animate .mc-clip[data-active] .mc-video{transition:transform 360ms cubic-bezier(.22,1,.36,1)}
#mcViewer.mcc-animate .mc-copy,#mcViewer.mcc-animate .mc-controls{transition:opacity 200ms ease}
#mcViewer .mcc-head{position:relative;display:flex;align-items:center;justify-content:center;flex:none;height:54px;padding:10px 42px 0;box-sizing:border-box;touch-action:none;cursor:grab}
#mcViewer .mcc-handle{position:absolute;top:7px;left:calc(50% - 17px);width:34px;height:3px;background:#ffffff3b;border-radius:3px}
#mcViewer .mcc-title{font-size:13px;line-height:18px;font-weight:700}
#mcViewer .mcc-head>.mcc-icon{position:absolute;right:6px;top:11px;width:36px;height:36px}
#mcViewer .mcc-icon{display:inline-flex;align-items:center;justify-content:center;gap:3px;flex:none;background:transparent;border:0;border-radius:50%;padding:0;min-width:30px;min-height:32px;color:#a1a1aa;cursor:pointer;font:inherit;box-shadow:none}
#mcViewer .mcc-icon svg{width:18px;height:18px;flex:none}
#mcViewer .mcc-icon[aria-pressed=true]{color:#4ccdf1}
#mcViewer .mcc-icon:focus-visible,#mcViewer .mcc-delete:focus-visible{outline:2px solid #4ccdf1;outline-offset:2px}
#mcViewer .mcc-list{overflow:auto;overscroll-behavior:contain;touch-action:pan-y;flex:1;min-height:0;padding:0 12px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
#mcViewer .mcc-comment{display:flex;align-items:flex-start;gap:10px;padding:10px 0;margin:0}
#mcViewer .mcc-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;overflow:hidden;background:#255b6b;color:#d8f7ff;font-size:13px;font-weight:700}
#mcViewer .mcc-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#mcViewer .mcc-body{flex:1;min-width:0}
#mcViewer .mcc-name{font-size:11px;line-height:15px;color:#a1a1aa;margin:0 0 3px;overflow-wrap:anywhere}
#mcViewer .mcc-text{font-size:13px;line-height:18px;font-weight:500;color:#f4f4f5;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
#mcViewer .mcc-meta{display:flex;gap:12px;align-items:center;margin-top:5px;color:#85858f;font-size:10px;line-height:16px}
#mcViewer .mcc-delete{border:0;padding:0;background:transparent;color:#a1a1aa;font-size:10px;cursor:pointer}
#mcViewer .mcc-reactions{display:flex;align-items:center;gap:1px;padding-top:13px}
#mcViewer .mcc-reactions .mcc-icon{border-radius:8px;font-size:10px;min-width:28px;min-height:34px;flex-wrap:wrap;max-width:40px}
#mcViewer .mcc-reactions svg{width:16px;height:16px}
#mcViewer .mcc-empty{min-height:160px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;box-sizing:border-box}
#mcViewer .mcc-empty strong{font-size:15px;font-weight:700}
#mcViewer .mcc-empty p{font-size:12px;line-height:18px;color:#a1a1aa;margin:8px 0}
#mcViewer .mcc-status{font-size:11px;line-height:16px;color:#b7e9f6;padding:0 14px;margin:0;flex:none}
#mcViewer .mcc-status:not(:empty){padding:6px 14px}
#mcViewer .mcc-composer{display:flex;align-items:center;gap:9px;padding:10px 12px;border-top:1px solid #ffffff0d;background:#222226;margin:0;flex:none}
#mcViewer .mcc-composer textarea{flex:1;min-width:0;resize:none;max-height:76px;height:38px;box-sizing:border-box;padding:10px 12px;border:1px solid transparent;border-radius:20px;background:#ffffff0c;color:#fff;font:inherit;font-size:16px;line-height:18px;outline:none}
#mcViewer .mcc-composer textarea:focus{border-color:#4ccdf150}
#mcViewer .mcc-composer>.mcc-icon{width:36px;height:36px;background:#007fa8;color:#fff}
#mcViewer .mcc-more{display:block;border:0;background:transparent;color:#54d0f3;font:inherit;font-size:12px;padding:16px;margin:0 auto;cursor:pointer}
#mcViewer .mcc-icon:disabled{opacity:.45;cursor:default}
@media(prefers-reduced-motion:reduce){#mcViewer.mcc-animate *{transition:none!important}}
/* La miniatura de respaldo no debe quedar a tamaño completo detrás del video reducido. */
#mcViewer.mcc-open .mc-clip[data-active]{background-image:none!important;background-color:#05070b}
