.attachment-dialog{width:min(580px,calc(100vw - 24px))}.attachment-selection{max-height:230px;overflow:auto;margin-bottom:18px}.attachment-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}.attachment-item>img{width:58px;height:58px;object-fit:cover;border-radius:12px}.attachment-item>svg{width:32px;height:32px;color:var(--accent);flex-shrink:0}.attachment-item strong{font-size:13px;display:block;overflow-wrap:anywhere}.attachment-item small{display:block;margin-top:5px;color:var(--muted)}.attachment-item button{padding:10px}.attachment-modes{border:1px solid var(--border);border-radius:14px;padding:12px 15px;margin-bottom:16px}.attachment-modes legend{font-size:12px;color:var(--muted);padding:0 5px}.attachment-modes label{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:14px}.attachment-modes input{width:18px;height:18px;accent-color:var(--accent)}.attachment-dialog select,.attachment-dialog textarea{width:100%;border:1px solid var(--border);border-radius:12px;background:var(--surface2);color:var(--text);padding:12px;font:inherit}.attachment-dialog .hint{font-size:12px;line-height:1.6;margin:12px 0}
.outbox-row{display:flex;justify-content:flex-end;max-width:790px;width:100%;margin:10px auto;flex-shrink:0}.outbox-bubble{--text:var(--own-text);--muted:var(--own-muted);--accent:var(--own-link);background:var(--own,var(--surface2));color:var(--text);border:1px solid var(--border);border-radius:18px 18px 5px 18px;padding:12px;max-width:min(85%,380px);min-width:170px;overflow:hidden}.outbox-preview{display:block;width:auto;max-width:100%;max-height:240px;border-radius:10px;opacity:.75}.outbox-file{display:flex;align-items:center;gap:10px}.outbox-file svg{width:30px;flex-shrink:0;color:var(--accent)}.outbox-file strong{font-size:13px;overflow-wrap:anywhere}.outbox-status{font-size:11px;line-height:1.5;color:var(--muted);margin-top:10px;overflow-wrap:anywhere}.outbox-bubble progress{width:100%;height:4px;accent-color:var(--accent);margin:8px 0}.outbox-actions{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;margin-top:8px}.outbox-actions button{color:var(--accent);padding:4px 0}.outbox-actions [hidden],.outbox-bubble [hidden]{display:none!important}.video-attachment{position:relative;display:block;width:min(330px,65vw);background:#10151c;border-radius:12px;overflow:hidden}.video-attachment video{display:block;width:100%;height:190px;object-fit:cover}.video-attachment>span{position:absolute;inset:0;display:flex;gap:8px;align-items:center;justify-content:center;background:#0003;color:white;font-size:13px}.video-attachment>span svg{background:#0008;border-radius:50%;padding:8px;width:42px;height:42px}.attachment-open{color:var(--accent);font-size:12px;padding:8px 0}
.chat-gallery,.attachment-viewer{box-sizing:border-box;padding:0;color:var(--text);background:var(--surface);border:1px solid var(--border);box-shadow:0 24px 100px #0006}.chat-gallery::backdrop,.attachment-viewer::backdrop{background:#07101dcc;backdrop-filter:blur(8px)}.chat-gallery{width:min(860px,calc(100vw - 24px));height:min(820px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);border-radius:22px;overflow:hidden}.chat-gallery[open]{display:flex;flex-direction:column}.chat-gallery header,.attachment-viewer header{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0}.chat-gallery header>div{flex:1}.chat-gallery h2{font-size:19px;margin:0}.chat-gallery header p{font-size:12px;color:var(--muted);margin-top:5px}.chat-gallery header button,.attachment-viewer header button,.attachment-viewer header a{padding:10px;color:inherit;border-radius:12px;display:flex;align-items:center}.gallery-tabs{display:flex;gap:8px;padding:12px 20px;flex-shrink:0}.gallery-tabs button{padding:9px 20px;border-radius:20px;color:var(--muted)}.gallery-tabs [aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}.gallery-scroll{overflow:auto;min-height:0;padding:0 16px 20px;flex:1}.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.gallery-cell{aspect-ratio:1;position:relative;border-radius:7px;overflow:hidden;background:var(--surface2);padding:0}.gallery-cell img,.gallery-cell video{width:100%;height:100%;object-fit:cover;display:block}.gallery-cell span{position:absolute;right:8px;bottom:8px;background:#0008;color:white;border-radius:50%;padding:6px;display:flex}.gallery-cell span svg{width:17px;height:17px}.gallery-status{font-size:12px;color:var(--muted);text-align:center;margin:18px}.gallery-more{display:block;margin:auto}.chat-gallery [hidden]{display:none!important}
.attachment-viewer{position:fixed;inset:0;margin:auto;width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;border:0;border-radius:0;background:#0d1118;color:#f5f7fc;overflow:hidden}.attachment-viewer[open]{display:flex;flex-direction:column}.attachment-viewer header{border-color:#ffffff15;background:#161c26;padding-top:max(12px,env(safe-area-inset-top));z-index:2}.viewer-name{font-size:14px;display:block}.viewer-info{font-size:11px;color:#aab5c7;display:block;margin-top:4px}.viewer-download:hover,.attachment-viewer button:hover{background:#ffffff15}.media-stage{flex:1;min-height:0;min-width:0;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none;position:relative;padding:10px 60px}.media-stage img{width:100%;height:100%;object-fit:contain;user-select:none;will-change:transform}.media-stage video{width:100%;height:100%;object-fit:contain;touch-action:auto;max-width:1400px}.viewer-prev,.viewer-next{position:absolute;top:48%;padding:13px;border-radius:50%;color:white;background:#182332cc;z-index:2;overflow:visible}.viewer-prev::before,.viewer-next::before{content:"";position:absolute;inset:-18px;border-radius:50%;}.viewer-prev{left:12px}.viewer-next{right:12px}.attachment-viewer footer{padding:10px 20px max(14px,env(safe-area-inset-bottom));background:#161c26;flex-shrink:0;z-index:2;max-height:26dvh;overflow:auto}.viewer-tools{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.viewer-tools button{padding:10px;color:white;border-radius:10px}.viewer-tools select{padding:6px;border-radius:8px;background:#293343;border:1px solid #ffffff20;color:#fff;font:inherit}.viewer-tools label{font-size:12px;color:#d1d9e5}.viewer-caption{font-size:13px;text-align:center;margin:8px auto 0;max-width:850px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:65px;overflow:auto}.viewer-error{text-align:center;font-size:12px;color:#ffbe90;margin-top:6px}.viewer-error:empty{display:none}.compression-source{position:fixed;width:2px;height:2px;left:0;bottom:0;opacity:.001;pointer-events:none;z-index:-1}
@media(max-width:600px){.chat-gallery{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;border:0;border-radius:0}.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.gallery-scroll{padding:0 6px 20px}.gallery-tabs{padding:10px}.media-stage{padding:0}.viewer-prev,.viewer-next{padding:8px;background:#18233288}.viewer-prev::before,.viewer-next::before{inset:-22px}.viewer-prev{left:3px}.viewer-next{right:3px}.attachment-viewer header{padding-left:8px;padding-right:8px;gap:5px}.viewer-info{font-size:10px}.attachment-viewer footer{padding-left:8px;padding-right:8px}.viewer-tools{gap:2px}.viewer-tools button{padding:8px}.outbox-bubble{max-width:88%}}

.attachment-modes input{min-height:18px;padding:0}.viewer-tools select{width:auto;min-height:34px}.attachment-viewer :focus-visible{outline:2px solid #88baff;outline-offset:2px}

/* Native radio navigation, with a consistent appearance in every theme. */
.attachment-quality-options{border:0;padding:0;margin:20px 0 16px;min-width:0}
.attachment-quality-options legend{font-size:13px;font-weight:600;margin-bottom:10px;padding:0}
.attachment-quality-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.attachment-quality-card{position:relative;display:flex;padding:16px 13px;min-width:0;border:1px solid var(--border);border-radius:16px;background:var(--surface2);cursor:pointer;transition:border-color .18s,background .18s}
.attachment-quality-card:hover{border-color:var(--accent)}
.attachment-quality-card:has(input:checked){background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.attachment-quality-card:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.attachment-quality-card input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;inset:0;padding:0;margin:0}
.attachment-quality-content{display:flex;flex-direction:column;gap:8px;min-width:0}
.attachment-quality-heading{display:flex;align-items:center;gap:7px;padding-right:18px;font-size:14px}
.attachment-quality-heading svg{width:18px;height:18px;flex-shrink:0;color:var(--accent)}
.attachment-quality-content small{font-size:12px;color:var(--muted)}
.attachment-quality-spec{font-size:11px;line-height:1.5;color:var(--muted)}
.attachment-quality-check{position:absolute;right:12px;top:15px;width:17px;height:17px;border:1px solid var(--border);border-radius:50%;display:grid;place-items:center}
.attachment-quality-check svg{width:12px;height:12px;opacity:0}
.attachment-quality-card:has(input:checked) .attachment-quality-check{border-color:var(--accent);background:var(--accent);color:var(--on-accent,#fff)}
.attachment-quality-card:has(input:checked) .attachment-quality-check svg{opacity:1}
.attachment-dialog [hidden]{display:none!important}

/* Paused local previews are retained through compression, upload and retries. */
.attachment-preview{position:relative;display:block;overflow:hidden;background:var(--surface2);isolation:isolate}
.attachment-preview img,.attachment-preview video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:var(--surface2)}
.attachment-preview-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted)}
.attachment-preview-fallback svg{width:30px;height:30px}
.attachment-preview-fallback small{font-size:11px}
.attachment-preview[data-failed="true"] img,.attachment-preview[data-failed="true"] video{display:none}
.attachment-item>.attachment-preview{width:58px;height:58px;flex:0 0 58px;border-radius:12px}
.attachment-item .attachment-preview img,.attachment-item .attachment-preview video{object-fit:cover}
.attachment-item .attachment-preview-fallback small{display:none}
.outbox-media-bubble{width:360px;min-width:0;padding:0}
.outbox-media{position:relative;overflow:hidden}
.outbox-media>.attachment-preview{width:100%;aspect-ratio:var(--preview-ratio,4/3);max-height:380px;min-height:160px}
.outbox-media::after{content:"";position:absolute;inset:0;background:linear-gradient(#0003,transparent 30%,transparent 65%,#0005);pointer-events:none}
.outbox-media-kind,.outbox-media-status{position:absolute;z-index:1;left:10px;display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:20px;background:#14202d9e;color:#fff;font-size:11px;line-height:1.4;backdrop-filter:blur(10px)}
.outbox-media-kind{top:10px}.outbox-media-kind svg{width:13px;height:13px}
.outbox-media-status{bottom:10px;font-variant-numeric:tabular-nums}
.outbox-transfer{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:#15202d80;backdrop-filter:blur(12px);box-shadow:0 2px 14px #0002;color:#fff}
.outbox-ring{position:absolute;inset:0;width:64px;height:64px;transform:rotate(-90deg);pointer-events:none;fill:none;stroke-width:2.5}
.outbox-ring-track{stroke:#ffffff35}
.outbox-ring-value{stroke:#fff;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .15s linear}
.outbox-ring.is-indeterminate{animation:outbox-spin 1.3s linear infinite}
.outbox-ring.is-indeterminate .outbox-ring-value{stroke-dasharray:24 76;stroke-dashoffset:0!important}
.outbox-transfer-button{position:absolute;inset:6px;display:grid;place-items:center;border-radius:50%;padding:0;color:#fff}
.outbox-transfer-button:hover:not(:disabled){background:#ffffff20}
.outbox-transfer-button:focus-visible{outline:2px solid #fff;outline-offset:6px}
.outbox-transfer-button span{display:flex}.outbox-transfer-button svg{width:24px;height:24px}
.outbox-transfer-retry{display:none!important}
.outbox-row[data-status="error"] .outbox-transfer-retry{display:flex!important}
.outbox-row[data-status="error"] .outbox-transfer-cancel,.outbox-row[data-status="sending"] .outbox-transfer-cancel{display:none}
.outbox-media-bubble>.message-text{padding:10px 12px}
.outbox-media-bubble>.outbox-actions{margin:0;padding:8px 12px;display:none}
.outbox-row[data-status="error"] .outbox-media-bubble>.outbox-actions{display:flex}
.outbox-media-bubble>.outbox-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.outbox-row[data-status="error"] .outbox-media-bubble>.outbox-status{position:static;width:auto;height:auto;margin:0;padding:10px 12px 0;overflow:visible;clip-path:none;white-space:normal}
@keyframes outbox-spin{to{transform:rotate(270deg)}}
@media(prefers-reduced-motion:reduce){.outbox-ring.is-indeterminate{animation:none}.outbox-ring-value,.attachment-quality-card{transition:none}}
@media(max-width:440px){.attachment-quality-grid{grid-template-columns:1fr}.attachment-quality-card{padding:12px 14px}.attachment-quality-content{gap:5px}.attachment-quality-heading{padding-right:24px}.attachment-quality-check{right:15px}}
/* Video messages: one preview with its sending time, no file metadata card. */
.video-file-bubble{padding:0!important;overflow:hidden;border-radius:18px!important;position:relative;background:var(--bubble)!important;min-width:0;}
.own .video-file-bubble{background:var(--own)!important;}
.video-file-bubble .sender-name,.video-file-bubble .forwarded-from,.video-file-bubble .reply-quote{margin:9px 12px;}
.video-file-bubble .video-attachment{width:min(360px,68vw);padding:0;border-radius:0;aspect-ratio:16/10;}
.video-file-bubble .video-attachment video{width:100%;height:100%;object-fit:cover;}
.video-file-bubble .video-attachment::after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#0005);pointer-events:none;}
.video-file-bubble .video-preview-play{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;border:1px solid #ffffff70;background:#15202d70;backdrop-filter:blur(12px);box-shadow:0 4px 22px #0003;transition:background .2s,transform .2s;z-index:1;}
.video-file-bubble .video-preview-play svg{width:27px;height:27px;padding:0;border-radius:0;background:none;fill:currentColor;stroke-width:1.6;margin-left:3px;}
.video-file-bubble .video-attachment:hover .video-preview-play{background:#233549aa;transform:translate(-50%,-50%) scale(1.07);}
.video-file-bubble:not(.has-caption)>.message-meta{position:absolute;right:9px;bottom:8px;margin:0;padding:4px 7px;border-radius:8px;background:#07101a80;color:#fff!important;backdrop-filter:blur(6px);pointer-events:none;}
.video-file-bubble:not(.has-caption)>.message-meta .read{color:#addefe;}
.video-file-bubble.has-caption{background:var(--bubble)!important;}
.own .video-file-bubble.has-caption{background:var(--own)!important;}
.video-file-bubble.has-caption .message-text{padding:10px 12px 0;}
.video-file-bubble.has-caption>.message-meta{padding:0 10px 8px;}

/* An uncluttered cinema viewer with a floating, custom control deck. */
.attachment-viewer.video-viewer{background:radial-gradient(ellipse at 50% 30%,#1d2737 0,#0b1018 65%);}
.video-viewer header{background:transparent;border:0;padding:18px 28px;gap:14px;}
.video-viewer header button{border-radius:50%;background:#ffffff08;border:1px solid #ffffff0b;}
.video-viewer .viewer-name{font-size:15px;font-weight:600;}
.video-viewer .viewer-info{font-size:12px;color:#a3aec0;}
.attachment-viewer [hidden]{display:none!important;}
.video-viewer .media-stage{padding:0 76px 12px;touch-action:auto;}
.video-viewer footer{background:transparent;padding:0 24px max(10px,env(safe-area-inset-bottom));max-height:16dvh;}
.video-viewer .viewer-caption:empty{display:none;}
.video-viewer .viewer-caption{color:#d4dbea;font-size:14px;line-height:1.5;margin-top:0;}
.video-viewer .viewer-prev,.video-viewer .viewer-next{border:1px solid #ffffff12;background:#ffffff08;backdrop-filter:blur(8px);}
.cinema-player{position:relative;width:100%;height:100%;min-height:0;overflow:hidden;border-radius:18px;background:#080b11;isolation:isolate;outline:none;}
.media-stage .cinema-video{display:block;width:100%;height:100%;max-width:none;object-fit:contain;cursor:pointer;background:#080b11;}
.cinema-vignette{position:absolute;inset:65% 0 0;background:linear-gradient(transparent,#03060bb3);pointer-events:none;transition:opacity .3s;}
.cinema-center-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:82px;height:82px;display:grid;place-items:center;border-radius:50%;border:1px solid #ffffff65;background:#17233480;color:white;backdrop-filter:blur(12px);box-shadow:0 10px 40px #0004;transition:opacity .22s ease;}
.cinema-center-play svg{width:34px;height:34px;fill:currentColor;margin-left:4px;}
.cinema-controls{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:min(880px,calc(100% - 40px));padding:12px 16px 10px;border-radius:18px;border:1px solid #ffffff1c;background:#1b2430bd;backdrop-filter:blur(22px);box-shadow:0 12px 40px #0004;transition:opacity .3s,transform .3s;}
.cinema-control-row{display:flex;align-items:center;gap:6px;margin-top:5px;color:#f6f8fd;}
.cinema-control-row button{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 38px;padding:7px;border-radius:10px;color:inherit;}
.cinema-control-row svg{width:21px;height:21px;display:block;}
.cinema-control-row .cinema-play{background:#edf4ff;color:#162334;border-radius:12px;margin-right:3px;}
.cinema-control-row .cinema-play:hover{background:white;}
.cinema-player .when-playing,.cinema-player .when-muted{display:none;}
.cinema-player[data-playing="true"] .when-paused,.cinema-player[data-muted="true"] .when-audible{display:none;}
.cinema-player[data-playing="true"] .when-playing,.cinema-player[data-muted="true"] .when-muted{display:block;}
.cinema-skip{position:relative;}
.cinema-skip small{position:absolute;font-size:8px;font-weight:700;top:15px;left:50%;transform:translateX(-50%);}
.cinema-time{display:flex;gap:7px;align-items:center;margin:0 6px;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.cinema-time-divider,.cinema-total{color:#aab7cb;}
.cinema-volume{display:flex;align-items:center;margin-left:auto;gap:3px;}
.cinema-player input[type="range"]{appearance:none;-webkit-appearance:none;border:0;box-shadow:none;border-radius:8px;padding:0;min-height:0;cursor:pointer;touch-action:pan-y;}
.cinema-player .cinema-seek{display:block;width:100%;height:24px;margin:0 0 2px;background:transparent;}
.cinema-player .cinema-volume input{width:64px;height:4px;accent-color:#bad9ff;background:#ffffff40;}
.cinema-player input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#e4f0ff;border:0;box-shadow:0 1px 6px #0003;}
.cinema-player input[type="range"]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#e4f0ff;border:0;box-shadow:0 1px 6px #0003;}
.cinema-player input:disabled{opacity:.35;cursor:default;}
.cinema-speed{width:auto;min-height:34px;max-width:72px;padding:6px;border:0;border-radius:9px;background:#ffffff0c;color:#eaf1ff;font-size:12px;cursor:pointer;}
.cinema-speed option{background:#1a2535;color:#fff;}
.cinema-player[data-controls="false"] .cinema-controls{opacity:0;transform:translate(-50%,8px);pointer-events:none;}
.cinema-player[data-controls="false"] .cinema-vignette{opacity:0;}
.cinema-player[data-controls="false"] .cinema-center-play{opacity:0;pointer-events:none;}
.cinema-player:focus-visible{outline:2px solid #b5d8ff;outline-offset:-3px;}
.cinema-player .cinema-controls:focus-within{opacity:1!important;transform:translateX(-50%)!important;pointer-events:auto!important;}
.cinema-enable-sound{position:absolute;left:20px;top:20px;display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid #ffffff35;border-radius:24px;background:#1b263bcc;color:white;backdrop-filter:blur(12px);font-size:13px;}
.cinema-enable-sound svg{width:18px;height:18px;}
.cinema-status{position:absolute;left:20px;right:20px;bottom:124px;text-align:center;color:#e3eafb;font-size:13px;text-shadow:0 2px 8px #000;pointer-events:none;}
.cinema-status:empty{display:none;}
.cinema-loader{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px;border:3px solid #ffffff20;border-top-color:#d7e9ff;border-radius:50%;animation:cinema-spin .9s linear infinite;pointer-events:none;}
@keyframes cinema-spin{to{transform:rotate(360deg)}}
.cinema-player:fullscreen{width:100vw;height:100dvh;border-radius:0;background:#000;}
@media(max-width:700px){.video-viewer header{padding:12px 14px;padding-top:max(12px,env(safe-area-inset-top));}.video-viewer .media-stage{padding:0 0 6px;}.cinema-player{border-radius:0;}.cinema-controls{width:calc(100% - 20px);bottom:max(12px,env(safe-area-inset-bottom));padding:10px 10px 8px;border-radius:15px;}.cinema-control-row{gap:2px;}.cinema-control-row button{width:34px;flex-basis:34px;height:36px;padding:6px;}.cinema-volume input{display:none;}.cinema-time{font-size:11px;gap:4px;margin:0 4px;}.cinema-speed{max-width:60px;padding:5px 2px;}.cinema-center-play{width:70px;height:70px;}.video-viewer .viewer-prev,.video-viewer .viewer-next{top:42%;padding:8px;background:#0c152580;}}
@media(max-width:420px){.cinema-skip{display:none!important;}.cinema-enable-sound{left:12px;top:12px;}}
@media(prefers-reduced-motion:reduce){.cinema-controls,.cinema-vignette,.video-preview-play{transition:none!important;}}

.cinema-seek::-webkit-slider-runnable-track{height:5px;border-radius:6px;background:linear-gradient(to right,#bad9ff var(--played,0%),#52627a var(--played,0%),#52627a var(--buffered,0%),#ffffff24 var(--buffered,0%));}
.cinema-seek::-moz-range-track{height:5px;border-radius:6px;background:linear-gradient(to right,#bad9ff var(--played,0%),#52627a var(--played,0%),#52627a var(--buffered,0%),#ffffff24 var(--buffered,0%));}
.cinema-player .cinema-seek::-webkit-slider-thumb{margin-top:-4px;}
@media(min-width:701px) and (max-width:1000px){.video-viewer .media-stage{padding:0 44px 12px;}}
@media(max-width:1000px){.cinema-volume input{display:none;}}

/* 1.0.40 — tap-driven media viewer chrome. */
/* 1.0.41 — larger invisible hit areas for media navigation arrows. */
.video-viewer header,.video-viewer footer,.video-viewer .viewer-prev,.video-viewer .viewer-next{transition:opacity .22s ease,transform .22s ease;}
.video-viewer.chrome-hidden header,.video-viewer.chrome-hidden footer,.video-viewer.chrome-hidden .viewer-prev,.video-viewer.chrome-hidden .viewer-next{opacity:0;pointer-events:none;}
.video-viewer.chrome-hidden header{transform:translateY(-8px);}
.video-viewer.chrome-hidden footer{transform:translateY(8px);}

/* 1.0.30 — modern photo viewer: cinema-style chrome and focal-point zoom. */
.attachment-viewer.photo-viewer{background:radial-gradient(ellipse at 50% 28%,#202c3d 0,#0b1018 66%);}
.photo-viewer header{background:linear-gradient(180deg,#101722d9 0,#1017228f 68%,transparent 100%);border:0;padding:18px 28px;gap:14px;}
.photo-viewer header button,.photo-viewer header a{width:42px;height:42px;padding:0;justify-content:center;border-radius:50%;border:1px solid #ffffff10;background:#ffffff08;backdrop-filter:blur(14px);transition:background .18s ease,border-color .18s ease,transform .18s ease;}
.photo-viewer header button:hover,.photo-viewer header a:hover{background:#ffffff15;border-color:#ffffff20;transform:translateY(-1px);}
.photo-viewer .viewer-name{font-size:15px;font-weight:600;letter-spacing:.01em;}
.photo-viewer .viewer-info{font-size:12px;color:#a9b5c7;}
.photo-viewer .media-stage{padding:0 76px 16px;touch-action:none;cursor:pointer;}
.photo-viewer .media-stage img{cursor:pointer;transform-origin:center center;transition:filter .18s ease;}
.photo-viewer .media-stage.is-zoomed,.photo-viewer .media-stage.is-zoomed img{cursor:grab;}
.photo-viewer .media-stage.is-dragging,.photo-viewer .media-stage.is-dragging img{cursor:grabbing;}
.photo-viewer .viewer-prev,.photo-viewer .viewer-next{width:48px;height:48px;padding:0;display:grid;place-items:center;border:1px solid #ffffff12;background:#101a298c;backdrop-filter:blur(12px);box-shadow:0 8px 24px #0003;transition:background .18s ease,border-color .18s ease,transform .18s ease;}
.photo-viewer .viewer-prev:hover,.photo-viewer .viewer-next:hover{background:#1d2b3dbd;border-color:#ffffff22;transform:scale(1.05);}
.photo-viewer footer{background:linear-gradient(0deg,#0a0f17d9 0,#0a0f1780 68%,transparent 100%);padding:8px 24px max(14px,env(safe-area-inset-bottom));max-height:22dvh;overflow:visible;}
.photo-viewer .viewer-tools{width:max-content;max-width:100%;margin:0 auto;padding:7px;gap:3px;flex-wrap:nowrap;border:1px solid #ffffff1c;border-radius:16px;background:#1b2430bd;backdrop-filter:blur(22px);box-shadow:0 12px 40px #0004;}
.photo-viewer .viewer-tools button{width:40px;height:40px;padding:0;display:grid;place-items:center;border-radius:11px;color:#f5f8ff;transition:background .18s ease,transform .18s ease;}
.photo-viewer .viewer-tools button:hover{background:#ffffff12;transform:translateY(-1px);}
.photo-viewer .viewer-tools button svg{width:20px;height:20px;}
.photo-viewer .viewer-caption{width:fit-content;max-width:min(850px,calc(100vw - 40px));margin:8px auto 0;padding:5px 9px;border-radius:9px;background:#08101a99;color:#d4dbea;font-size:12px;line-height:1.45;backdrop-filter:blur(10px);}
.photo-viewer .viewer-caption:empty{display:none;}
.photo-viewer .viewer-error{margin:7px auto 0;width:fit-content;padding:4px 8px;border-radius:8px;background:#2b1815aa;}
@media(max-width:700px){
  .photo-viewer header{padding:12px 14px;padding-top:max(12px,env(safe-area-inset-top));gap:8px;}
  .photo-viewer header button,.photo-viewer header a{width:40px;height:40px;}
  .photo-viewer .media-stage{padding:0 0 8px;}
  .photo-viewer .viewer-prev,.photo-viewer .viewer-next{top:44%;width:42px;height:42px;background:#0c15259c;}
  .photo-viewer .viewer-prev{left:7px}.photo-viewer .viewer-next{right:7px}
  .photo-viewer footer{padding:7px 10px max(10px,env(safe-area-inset-bottom));}
  .photo-viewer .viewer-tools{padding:6px;gap:1px;border-radius:15px;}
  .photo-viewer .viewer-tools button{width:38px;height:38px;}
  .photo-viewer .viewer-caption{max-width:calc(100vw - 20px);font-size:11px;margin-top:6px;}
}
@media(prefers-reduced-motion:reduce){.photo-viewer header button,.photo-viewer header a,.photo-viewer .viewer-prev,.photo-viewer .viewer-next,.photo-viewer .viewer-tools button{transition:none!important;}}

/* Music attachments and shared content */
.shared-tabs{display:flex;gap:6px;padding:12px 20px 4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border)}.shared-tabs::-webkit-scrollbar{display:none}.shared-tabs button{padding:9px 15px;border-radius:18px;color:var(--muted);white-space:nowrap;font-size:13px}.shared-tabs [aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}.shared-list{display:flex;flex-direction:column;gap:7px;padding:2px 0}.shared-music-row,.shared-file-row,.shared-link-row{display:flex;align-items:center;gap:11px;width:100%;padding:10px 11px;border-radius:14px;text-align:left;color:var(--text);border:1px solid transparent}.shared-music-row:hover,.shared-file-row:hover,.shared-link-row:hover{background:var(--surface2)}.shared-music-row.is-active{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}.shared-music-row .shared-music-play{width:42px;height:42px;flex-basis:42px}.shared-music-row strong,.shared-file-row strong,.shared-link-row strong{display:block;font-size:13px}.shared-music-row small,.shared-file-row small,.shared-link-row small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.shared-music-size{font-size:11px;color:var(--muted);white-space:nowrap}.shared-file-icon,.shared-link-icon{width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}.shared-file-icon svg,.shared-link-icon svg{width:20px;height:20px}.shared-file-row>svg,.shared-link-row>svg{width:18px;height:18px;color:var(--muted);flex:0 0 auto}.shared-link-url{display:block;color:var(--accent);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;max-width:100%}.music-select-item>svg{width:42px;height:42px;padding:10px;border-radius:12px;background:var(--accent-soft);color:var(--accent);flex:0 0 42px}

/* 1.0.45: a compact, responsive music player and consistent track controls. */
.music-card{display:grid;grid-template-columns:48px minmax(0,1fr) 36px;align-items:center;gap:12px;width:330px;max-width:100%;min-width:0;padding:6px 0 2px}
.music-card-body{min-width:0}
.music-card-title{display:block;font-size:14px;font-weight:650;line-height:1.45;color:var(--text)}
.music-card-artist{display:block;font-size:12px;line-height:1.4;color:var(--muted);margin-top:2px}
.music-card-progress{display:grid;grid-template-columns:auto minmax(30px,1fr) auto;align-items:center;gap:8px;margin-top:5px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.music-card .music-card-play,.shared-music-play,.global-music-player .music-global-play{display:grid;place-items:center;width:46px;height:46px;padding:0;border-radius:50%;background:var(--control-accent,var(--accent));color:var(--on-accent,#fff);flex:0 0 46px}
.music-card-play>span,.music-global-play>span,.music-global-volume button>span{display:grid;place-items:center}
.music-card-play svg,.shared-music-play svg,.music-global-play svg{width:20px;height:20px;fill:currentColor;stroke-width:1.5}
.music-card .music-pause-icon,.global-music-player .music-pause-icon{display:none}
.music-card.is-playing .music-play-icon,.global-music-player.is-playing .music-play-icon{display:none}
.music-card.is-playing .music-pause-icon,.global-music-player.is-playing .music-pause-icon{display:grid}
.music-card.is-active .music-card-title{color:var(--accent)}
.music-card-download,.shared-music-download{width:36px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--muted);flex-shrink:0}
.music-card-download svg,.shared-music-download svg{width:18px;height:18px}
.music-card-download:hover,.shared-music-download:hover{background:var(--accent-soft);color:var(--accent)}
.global-music-player{position:fixed;z-index:30;top:10px;left:414px;right:12px;max-width:880px;margin-inline:auto;display:grid;grid-template-columns:40px minmax(80px,1fr) auto auto 36px;grid-template-areas:"art copy controls volume close" "timeline timeline timeline timeline timeline";align-items:center;column-gap:12px;row-gap:2px;padding:10px 14px 6px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 4px 20px #0b1f3514;color:var(--text)}
.global-music-player button{display:grid;place-items:center;width:36px;height:40px;padding:0;border-radius:12px;color:var(--text);transition:background .15s}
.global-music-player button:hover{background:var(--surface2)}
.global-music-player button:disabled{opacity:.35}
.global-music-player svg{width:18px;height:18px}
.global-music-player .music-global-play{width:40px;height:40px;flex-basis:40px}
.global-music-player .music-global-play:hover{background:var(--control-accent,var(--accent));filter:brightness(1.08)}
.music-global-art{grid-area:art;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:var(--accent);background:var(--accent-soft)}
.music-global-art svg{width:22px;height:22px}
.music-global-copy{grid-area:copy;min-width:0}
.music-global-title{display:block;font-size:14px;line-height:1.4;font-weight:650}
.music-global-artist{display:block;font-size:11px;line-height:1.5;color:var(--muted);margin-top:2px}
.music-global-controls{grid-area:controls;display:flex;align-items:center;gap:4px}
.music-global-volume{grid-area:volume;display:flex;align-items:center;gap:4px}
.music-global-volume .music-volume-slider{width:64px}
.music-global-close{grid-area:close}
.music-global-timeline{grid-area:timeline;display:grid;grid-template-columns:minmax(32px,auto) minmax(40px,1fr) minmax(32px,auto);align-items:center;gap:10px;min-width:0;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.music-global-duration{text-align:right}
.global-music-player .music-volume-off{display:none}
.global-music-player.is-muted .music-volume-on{display:none}
.global-music-player.is-muted .music-volume-off{display:grid}
.global-music-player.has-error .music-global-artist{color:var(--danger,#bd4958)}
.music-player-visible .conversation{padding-top:98px}
/* The rail is only four pixels high; the input keeps a generous hit area. */
.music-range{appearance:none;-webkit-appearance:none;display:block;min-width:0;width:100%;height:24px;min-height:24px;padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none!important;cursor:pointer;touch-action:pan-y;--played:0%}
.music-range::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--accent) var(--played),color-mix(in srgb,var(--muted) 24%,transparent) var(--played))}
.music-range::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--accent) var(--played),color-mix(in srgb,var(--muted) 24%,transparent) var(--played))}
.music-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border:2px solid var(--surface);border-radius:50%;background:var(--accent);box-shadow:0 1px 4px #0002}
.music-range::-moz-range-thumb{width:8px;height:8px;border:2px solid var(--surface);border-radius:50%;background:var(--accent);box-shadow:0 1px 4px #0002}
.music-range:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:5px}
.music-range:disabled{cursor:default;opacity:.5}
.shared-tabs{gap:4px;padding:12px 20px;flex-shrink:0;border-bottom:1px solid var(--border)}
.shared-tabs button{min-height:40px;flex:1;border-radius:12px}
.shared-list{gap:4px;padding:10px 0 0}
.shared-music-row{gap:4px;padding:0 6px 0 0;border-radius:14px}
.shared-music-main{display:flex;align-items:center;gap:12px;min-width:0;flex:1;padding:12px 8px;text-align:left;color:var(--text);border-radius:12px}
.shared-music-row .shared-music-play{background:var(--accent-soft);color:var(--accent);width:44px;height:44px;flex-basis:44px}
.shared-music-row.is-active .shared-music-play{background:var(--control-accent,var(--accent));color:var(--on-accent,#fff)}
.shared-music-row strong{font-size:14px;line-height:1.4}
.shared-music-row small{font-size:12px;margin-top:2px}
.shared-music-origin{display:block;font-size:10px;color:var(--muted);margin-top:5px}
.shared-music-duration{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;flex-shrink:0}
.chat-gallery::backdrop{background:#07101d88;backdrop-filter:blur(5px)}
@media(min-width:1600px){.global-music-player{left:452px}}
@media(max-width:1050px) and (min-width:761px){.global-music-player{left:361px;column-gap:7px}.music-global-volume .music-volume-slider{width:44px}.music-global-art{display:none}.global-music-player{grid-template-columns:minmax(60px,1fr) auto auto 32px;grid-template-areas:"copy controls volume close" "timeline timeline timeline timeline"}}
@media(max-width:760px){
 .global-music-player{top:max(6px,env(safe-area-inset-top));left:8px;right:8px;z-index:40;max-width:560px;padding:9px 10px 5px;column-gap:6px;row-gap:3px;grid-template-columns:minmax(0,1fr) auto 36px;grid-template-areas:"copy controls close" "timeline timeline volume";border-radius:16px}
 .music-global-art{display:none}.music-global-title{font-size:13px}.music-global-artist{font-size:10px}.music-global-controls{gap:0}
 .global-music-player button{height:40px;width:36px}.global-music-player .music-global-play{width:40px;height:40px}
 .music-global-volume .music-volume-slider{display:none}.music-global-volume button{height:28px}
 .music-global-timeline{gap:8px;font-size:10px}
 .music-player-visible .conversation,.music-player-visible .sidebar{padding-top:calc(94px + env(safe-area-inset-top))}
 .music-card{width:min(310px,calc(100vw - 80px));grid-template-columns:44px minmax(0,1fr) 32px;gap:9px}
 .music-card .music-card-play{width:44px;height:44px}.music-card-download{width:32px}.music-card-progress{gap:5px;font-size:10px}
 .shared-tabs{padding:10px;gap:3px}.shared-tabs button{padding:8px 10px}
 .shared-music-main{gap:9px}.shared-music-origin{font-size:10px}
}
@media(max-width:600px){
 .chat-gallery{width:calc(100vw - 24px);height:min(780px,calc(100dvh - 80px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));max-height:calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border:1px solid var(--border);border-radius:20px}
 .chat-gallery header{padding:16px}.gallery-scroll{padding:0 8px 16px}.shared-tabs button{font-size:12px;padding-inline:7px}
}

/* 1.0.46: reserve space in the chat flow immediately below its header. */
.music-player-slot{flex:0 0 auto;min-width:0}
.music-player-visible .conversation:has(>.music-player-slot){padding-top:0}
.global-music-player.is-docked{position:relative;inset:auto;width:calc(100% - 24px);margin:10px auto 8px}
@media(max-width:760px){
 .global-music-player.is-docked{inset:auto;width:calc(100% - 16px);margin:6px auto 8px}
}

/* 1.0.47: voice recordings share the music card layout and timeline. */
.voice-card.music-card{min-width:0;padding:6px 0 2px}
.voice-card .voice-audio{display:none}
.voice-card .music-card-title{color:var(--message-ink,var(--text))}
.voice-card .music-card-progress{color:var(--message-muted,var(--muted))}
.voice-card.is-active .music-card-title{color:var(--message-link,var(--accent))}
.voice-card-speed{width:36px;height:44px;padding:0;display:grid;place-items:center;align-self:center;border-radius:12px;font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--message-link,var(--accent))}
.voice-card-speed:hover{background:var(--accent-soft)}
@media(max-width:760px){.voice-card-speed{width:32px}}

/* 1.0.53 — profile photo history viewer. */
.profile-photo-viewer .profile-photo-delete{color:#ff9aa6}
.profile-photo-viewer .profile-photo-delete:hover{background:#d84e611f;border-color:#d84e6145}
.profile-photo-loading,.profile-photo-empty{margin:auto;color:#aab5c7;text-align:center;line-height:1.5}
.profile-photo-empty{display:grid;gap:7px;padding:24px}.profile-photo-empty strong{color:#f5f7fc;font-size:16px}.profile-photo-empty span{font-size:12px}
.profile-photo-strip{display:flex;justify-content:center;gap:7px;max-width:min(720px,calc(100vw - 32px));overflow-x:auto;margin:8px auto 0;padding:4px 3px 2px;scrollbar-width:thin}
.profile-photo-strip button{position:relative;width:54px;height:54px;min-width:54px;padding:0;border-radius:12px;overflow:hidden;border:2px solid transparent;background:#ffffff0b;opacity:.7;transition:opacity .15s,border-color .15s,transform .15s}
.profile-photo-strip button:hover{opacity:1;transform:translateY(-1px)}.profile-photo-strip button.active{opacity:1;border-color:#88baff}
.profile-photo-strip img{display:block;width:100%;height:100%;object-fit:cover}.profile-photo-strip span{position:absolute;left:3px;right:3px;bottom:3px;padding:2px 3px;border-radius:5px;background:#08101acc;color:#fff;font-size:7px;line-height:1.2;text-align:center}
.profile-photo-delete-confirm{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;width:fit-content;max-width:100%;margin:0 auto;padding:9px 12px;border:1px solid #d84e6140;border-radius:15px;background:#2a151ac9;backdrop-filter:blur(18px);font-size:12px}
.profile-photo-delete-confirm>div{display:flex;gap:7px}.profile-photo-delete-confirm button{min-height:34px;padding:7px 12px;border-radius:10px}.profile-photo-delete-confirm .danger{background:#d84e61;color:#fff}
.profile-photo-viewer .viewer-prev:disabled,.profile-photo-viewer .viewer-next:disabled{opacity:.18;cursor:default;transform:none}
@media(max-width:700px){.profile-photo-strip{justify-content:flex-start}.profile-photo-strip button{width:48px;height:48px;min-width:48px}.profile-photo-delete-confirm{font-size:11px;gap:8px;padding:8px 9px}}