/* @ML-MARK v0.9.1-stage1 media-css PATCHED
 * Runa Chat — Media CSS Module (Lazy)
 * 
 * Stage 1 Fixes:
 * - Preview modal: constrained height for mosaic
 * - Video circle: no square wrapper in chat
 * - Quality tabs: visual size indicators
 */

/* ═══ VIDEO & MIXED MEDIA PREVIEW (v0.9.1) ═══ */
.media-preview{position:relative;overflow:hidden;border-radius:8px;background:rgba(0,0,0,.2)}
.media-preview img{width:100%;height:100%;object-fit:cover;display:block}
.media-preview--single{max-width:320px;max-height:280px;margin:0 auto}
.media-preview--single img{max-height:280px;object-fit:contain;background:#000}
.media-preview--video .media-preview__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;background:rgba(0,0,0,.6);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;backdrop-filter:blur(4px)}
.media-preview--video .media-preview__duration{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.7);color:#fff;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.media-preview[data-overflow]::after{content:attr(data-overflow);position:absolute;inset:0;background:rgba(0,0,0,.6);color:#fff;font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* Media Grid (mixed photo+video) */
.media-grid{display:grid;gap:3px;border-radius:12px;overflow:hidden;max-width:320px;max-height:280px}
.media-grid--2{grid-template-columns:1fr 1fr;aspect-ratio:2/1.2}
.media-grid--3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.media-grid--3 .media-preview:first-child{grid-row:span 2}
.media-grid--4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1}
.media-grid--many{grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr}

/* PPM Video Info */
.ppm__info{display:flex;flex-direction:column;gap:6px;padding:8px 0}
.ppm__video-info{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary)}
.ppm__video-icon{font-size:16px}
.ppm__video-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ppm__video-meta{font-size:11px;color:var(--text-muted);flex-shrink:0}

/* Media Upload Wrap */
.media-upload-wrap{position:relative;display:block;max-width:340px;min-width:160px;min-height:120px;margin:2px 0}
.media-upload-wrap .media-grid,.media-upload-wrap .media-preview{filter:brightness(.55) saturate(.85)}
.upload-error{padding:10px;color:#f43f5e;font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.upload-retry-btn{padding:4px 10px;background:var(--accent-cyan);color:#000;border:none;border-radius:4px;font-size:11px;font-weight:600;cursor:pointer}
.upload-retry-btn:hover{filter:brightness(1.1)}

/* ═══ VIDEO MESSAGE IN CHAT ═══ */
.msg-video{position:relative;max-width:320px;border-radius:12px;overflow:hidden;cursor:pointer}
.msg-video img{width:100%;display:block}
.msg-video__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;background:rgba(0,0,0,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;backdrop-filter:blur(8px);transition:transform .15s,background .15s}
.msg-video:hover .msg-video__play{background:rgba(0,212,255,.8);transform:translate(-50%,-50%) scale(1.08)}
.msg-video__duration{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.75);color:#fff;padding:3px 8px;border-radius:4px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.msg-video__size{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.6);color:rgba(255,255,255,.8);padding:2px 6px;border-radius:4px;font-size:10px}

/* Video in photo group */
.photo-cell--video{position:relative}
.photo-cell--video::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;background-color:rgba(0,0,0,.58);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m8 5 11 7-11 7Z' fill='white'/%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:18px;border-radius:50%;z-index:2;pointer-events:none}
.photo-cell--video .video-duration{position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,.7);color:#fff;padding:1px 4px;border-radius:3px;font-size:10px;font-weight:600;z-index:2;pointer-events:none}

/* ═══ PHOTO GROUPS — mosaic layouts ═══ */
.photo-group{display:grid;gap:3px;border-radius:12px;overflow:hidden;max-width:340px;width:100%;margin:2px 0;background:rgba(255,255,255,.04)}
.photo-cell{position:relative;overflow:hidden;cursor:pointer;background:rgba(255,255,255,.04);transition:opacity .15s}
.photo-cell:hover{opacity:.92}
.photo-cell>img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;pointer-events:none}
.photo-cell--overflow::after{content:attr(data-overflow);position:absolute;inset:0;background:rgba(0,0,0,.55);color:#fff;font-size:28px;font-weight:700;display:flex;align-items:center;justify-content:center;pointer-events:none;letter-spacing:.5px}

/* 1 photo — full bleed */
.photo-group.layout_1_full{grid-template-columns:1fr;max-height:420px}
.photo-group.layout_1_full .photo-cell{max-height:420px}
.photo-group.layout_1_full .photo-cell>img{max-height:420px;object-fit:contain;background:#000}

/* 2 photos */
.photo-group.layout_2_cols{grid-template-columns:1fr 1fr;aspect-ratio:1 / 1.2}
.photo-group.layout_2_rows{grid-template-rows:1fr 1fr;aspect-ratio:1.5 / 1}

/* 3 photos */
.photo-group.layout_3_rows{grid-template-rows:1fr 1fr 1fr;aspect-ratio:1 / 1.15}
.photo-group.layout_3_cols{grid-template-columns:1fr 1fr 1fr;aspect-ratio:2 / 1.1}
.photo-group.layout_3_big_right{grid-template-columns:1fr 1.8fr;grid-template-rows:1fr 1fr;grid-template-areas:"a c" "b c";aspect-ratio:1.25 / 1}
.photo-group.layout_3_big_right>:nth-child(1){grid-area:a}
.photo-group.layout_3_big_right>:nth-child(2){grid-area:b}
.photo-group.layout_3_big_right>:nth-child(3){grid-area:c}

/* 4 photos */
.photo-group.layout_4_grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1}
.photo-group.layout_4_big_right{grid-template-columns:1fr 2fr;grid-template-rows:1fr 1fr 1fr;grid-template-areas:"a d" "b d" "c d";aspect-ratio:1 / 1.1}
.photo-group.layout_4_big_right>:nth-child(1){grid-area:a}
.photo-group.layout_4_big_right>:nth-child(2){grid-area:b}
.photo-group.layout_4_big_right>:nth-child(3){grid-area:c}
.photo-group.layout_4_big_right>:nth-child(4){grid-area:d}

/* 5 photos */
.photo-group.layout_5_top2_bot3{grid-template-columns:repeat(6,1fr);grid-template-rows:1.35fr 1fr;grid-template-areas:"a a a b b b" "c c d d e e";aspect-ratio:1.3 / 1}
.photo-group.layout_5_top2_bot3>:nth-child(1){grid-area:a}
.photo-group.layout_5_top2_bot3>:nth-child(2){grid-area:b}
.photo-group.layout_5_top2_bot3>:nth-child(3){grid-area:c}
.photo-group.layout_5_top2_bot3>:nth-child(4){grid-area:d}
.photo-group.layout_5_top2_bot3>:nth-child(5){grid-area:e}

/* 6 photos — 3×2 grid */
.photo-group.layout_6_grid{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1.5 / 1}

/* 7 photos */
.photo-group.layout_7_mix{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1.3fr 1fr 1fr;grid-template-areas:"a a a" "b c d" "e f g";aspect-ratio:1 / 1.1}
.photo-group.layout_7_mix>:nth-child(1){grid-area:a}
.photo-group.layout_7_mix>:nth-child(2){grid-area:b}
.photo-group.layout_7_mix>:nth-child(3){grid-area:c}
.photo-group.layout_7_mix>:nth-child(4){grid-area:d}
.photo-group.layout_7_mix>:nth-child(5){grid-area:e}
.photo-group.layout_7_mix>:nth-child(6){grid-area:f}
.photo-group.layout_7_mix>:nth-child(7){grid-area:g}

/* 8 photos — 4×2 grid */
.photo-group.layout_8_mix{grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;aspect-ratio:2 / 1}

/* 9 photos — 3×3 grid */
.photo-group.layout_9_grid{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;aspect-ratio:1}

/* 10 photos — 5×2 grid */
.photo-group.layout_10_mix{grid-template-columns:repeat(5,1fr);grid-template-rows:1fr 1fr;aspect-ratio:2.5 / 1}

/* ═══ UPLOAD PROGRESS ═══ */
.photo-upload-wrap{position:relative;display:block;max-width:340px;min-width:160px;min-height:160px;margin:2px 0}
.photo-upload-wrap .photo-group{filter:brightness(.55) saturate(.85);margin:0}
.upload-progress-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;gap:4px;z-index:5}
.upload-cancel-btn{position:absolute;top:8px;right:8px;width:30px;height:30px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.42);border-radius:50%;background:rgba(15,23,42,.72);color:#fff;cursor:pointer;pointer-events:auto;backdrop-filter:blur(6px)}
.upload-cancel-btn:hover{background:rgba(244,63,94,.88)}
.upload-cancel-btn:disabled{opacity:.5;cursor:wait}
.upload-cancel-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.upload-ring{display:block;filter:drop-shadow(0 2px 12px rgba(0,0,0,.5))}
.upload-ring__bg{fill:rgba(15,12,35,.85);stroke:rgba(255,255,255,.08);stroke-width:4}
.upload-ring__fg{fill:none;stroke:#00d4ff;stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .2s ease-out;filter:drop-shadow(0 0 6px rgba(0,212,255,.6))}
.upload-ring__pct{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:13px;font-weight:700;letter-spacing:.3px;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.upload-progress-overlay.is-processing .upload-ring__fg{animation:uploadSpin 1.1s linear infinite;stroke-dasharray:60 175.93}
@keyframes uploadSpin{from{transform:rotate(-90deg);transform-origin:32px 32px}to{transform:rotate(270deg);transform-origin:32px 32px}}

/* ═══ PHOTO PREVIEW MODAL (v0.9.1 — THUMBNAIL style) ═══ */
/* @ML-MARK v0.9.1-stage8 preview-thumbnail */
.ppm{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:250;display:flex;align-items:flex-end;justify-content:center;padding:0;animation:fadeIn .2s}
.ppm__panel{background:rgba(25,25,30,0.98);border:1px solid rgba(255,255,255,0.08);border-radius:20px 20px 0 0;width:100%;max-width:100%;max-height:75vh;overflow-y:auto;padding:16px 16px calc(16px + env(safe-area-inset-bottom)) 16px;display:flex;flex-direction:column;gap:12px}
.ppm__title{font-size:17px;font-weight:600;color:#fff;display:flex;justify-content:space-between;align-items:center}
.ppm__close{width:32px;height:32px;border-radius:50%;border:none;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}
.ppm__close:hover{background:rgba(255,255,255,.15)}

/* THUMBNAIL preview — compact, not fullscreen */
.ppm__mosaic{margin:0 auto;max-height:160px;max-width:280px;overflow:hidden;border-radius:14px;background:rgba(0,0,0,0.3)}
.ppm__mosaic .photo-group{max-width:280px;max-height:160px}
.ppm__mosaic .photo-group .photo-cell>img{max-height:160px;object-fit:cover}
.ppm__mosaic .media-grid{max-height:160px;max-width:280px}
.ppm__mosaic .media-preview{max-height:160px}
.ppm__mosaic .media-preview--single{max-height:160px;max-width:280px}
.ppm__mosaic .media-preview--single img{max-height:160px;object-fit:cover}

.ppm__caption{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 14px;color:#fff;font-family:inherit;font-size:16px;resize:none;min-height:44px;max-height:100px;width:100%;outline:none}
.ppm__caption:focus{border-color:#A855F7}
.ppm__caption::placeholder{color:rgba(255,255,255,0.4)}

/* Quality tabs */
.ppm__tabs{display:flex;gap:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:4px}
.ppm__tab{flex:1;background:transparent;border:none;border-radius:8px;padding:10px 12px;cursor:pointer;color:rgba(255,255,255,0.6);font-size:13px;font-weight:600;font-family:inherit;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:2px}
.ppm__tab:hover{color:#fff}
.ppm__tab.active{background:#A855F7;color:#fff}
.ppm__tab-size{font-size:11px;font-weight:400;opacity:.8}

.ppm__actions{display:flex;gap:10px;margin-top:4px}
.ppm__btn{flex:1;border:none;border-radius:12px;padding:14px 24px;font-weight:600;cursor:pointer;font-size:16px;font-family:inherit}
.ppm__btn--send{background:#3B82F6;color:#fff}
.ppm__btn--send:hover{background:#2563EB}
.ppm__btn--send:disabled{opacity:.5;cursor:not-allowed}

/* Video info */
.ppm__info{padding:8px 0}
.ppm__video-info{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,0.7)}
.ppm__video-icon{font-size:16px}
.ppm__video-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ppm__video-meta{color:rgba(255,255,255,0.5);font-size:12px}

/* Desktop */
@media(min-width:769px){
  .ppm{align-items:center;padding:20px}
  .ppm__panel{
    max-width:400px;
    border-radius:20px;
    padding:20px;
  }
  .ppm__mosaic{max-height:200px;max-width:340px}
}

/* ═══ VIDEO PLAYER (v0.7.3) ═══ */
.vp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:300;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s}
.vp-container{position:relative;width:100%;max-width:95vw;max-height:95vh;display:flex;align-items:center;justify-content:center}
.vp-video{max-width:100%;max-height:90vh;border-radius:8px;background:#000;cursor:pointer}
.vp-close{position:absolute;top:16px;right:16px;width:40px;height:40px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.15);border-radius:50%;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);z-index:10;transition:transform .15s,background .15s}
.vp-close:hover{background:rgba(255,255,255,.2);transform:scale(1.1)}
.vp-title{position:absolute;top:16px;left:16px;color:#fff;font-size:14px;font-weight:600;max-width:calc(100% - 80px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.8)}

/* Controls */
.vp-controls{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.85));padding:60px 16px 16px;opacity:0;transition:opacity .3s;display:flex;flex-direction:column;gap:10px}
.vp-controls.visible{opacity:1}
.vp-progress-wrap{padding:4px 0}
.vp-progress{position:relative;height:5px;background:rgba(255,255,255,.2);border-radius:3px;cursor:pointer;overflow:hidden}
.vp-progress:hover{height:8px}
.vp-progress-buffer{position:absolute;height:100%;background:rgba(255,255,255,.3);border-radius:3px;transition:width .1s}
.vp-progress-fill{position:absolute;height:100%;background:var(--accent-cyan,#00d4ff);border-radius:3px;transition:width .1s;box-shadow:0 0 8px rgba(0,212,255,.5)}
.vp-controls-row{display:flex;align-items:center;justify-content:space-between}
.vp-controls-left,.vp-controls-right{display:flex;align-items:center;gap:12px}
.vp-btn{background:transparent;border:none;color:#fff;font-size:18px;cursor:pointer;padding:6px;opacity:.9;transition:opacity .15s,transform .15s}
.vp-btn:hover{opacity:1;transform:scale(1.1)}
.vp-volume-slider{width:70px;accent-color:var(--accent-cyan,#00d4ff);cursor:pointer}
.vp-time{font-size:12px;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums}
.vp-time-sep{margin:0 2px;opacity:.5}
.vp-speed{font-size:13px;font-weight:600;min-width:36px;text-align:center}
.vp-pip{font-size:16px}
.vp-fullscreen{font-size:20px}

/* Error */
.vp-error{text-align:center;padding:40px;color:#fff}
.vp-error-icon{font-size:48px;margin-bottom:16px}
.vp-error-text{font-size:16px;margin-bottom:12px}
.vp-error-link{color:var(--accent-cyan,#00d4ff);text-decoration:none}
.vp-error-link:hover{text-decoration:underline}

/* Gesture hints */
.vp-gesture-hint{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.7);color:#fff;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:600;opacity:0;transition:opacity .2s;pointer-events:none}
.vp-gesture-left{left:20%}
.vp-gesture-right{right:20%}
.vp-gesture-hint.show{opacity:1}

/* Mobile */
@media(max-width:768px){
  .vp-controls{padding:40px 12px 12px}
  .vp-controls-left,.vp-controls-right{gap:8px}
  .vp-volume-slider{width:50px}
  .vp-btn{font-size:20px;padding:8px}
  .vp-close{top:12px;right:12px;width:36px;height:36px}
}