/* Media presentation follows the geometry of the saved Telegram message. */
.media-bubble.media-captioned{width:420px;max-width:min(420px,84%)!important;padding:3px!important;overflow:hidden}
.media-bubble.media-captioned>.media-image{display:block;width:100%!important;height:auto!important;max-width:none!important;max-height:520px!important;aspect-ratio:auto!important;object-fit:contain!important;border-radius:11px 11px 3px 3px}
.media-bubble.media-captioned>.media-frame{width:100%;max-width:none;border-radius:11px 11px 3px 3px}
.media-bubble.media-captioned:has(.media-frame){width:fit-content;max-width:min(420px,84%)!important}
.media-bubble.media-captioned:has(.media-frame)>.media-frame{width:min(calc(var(--media-ratio,1.7778)*420px),380px,72vw);max-width:100%}
.media-bubble.video-captioned:has(.media-frame){width:min(calc(var(--caption-video-ratio,1.7778)*420px + 6px),386px,calc(72vw + 6px))!important}
.media-bubble.video-captioned:has(.media-frame)>.media-frame{width:100%}
.media-bubble.media-captioned>.message-text{padding:8px 9px 2px}
.media-bubble.media-captioned:has(.photo-stage){width:fit-content;max-width:min(420px,84%)!important}
.photo-stage{position:relative;display:block;max-width:100%;overflow:hidden;border-radius:11px 11px 3px 3px;background:#20242d;isolation:isolate;cursor:zoom-in}
.photo-stage>.photo-backdrop{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);opacity:.82;filter:blur(9px);transform:scale(1.05)}
.photo-stage>.media-image,.media-bubble.media-captioned .photo-stage>.media-image{position:relative;z-index:1;display:block;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;border-radius:0!important}
.media-spoiler:has(.photo-stage){width:fit-content;max-width:100%}
.media-bubble.media-only:not(:has(.reply,.reactions,.deleted-label)){background:transparent;box-shadow:none;padding:0;min-width:0}
.media-bubble.media-only:not(:has(.reply,.reactions,.deleted-label))>.media-image{border-radius:12px}
.media-bubble.media-only:not(:has(.reply,.reactions,.deleted-label))>.meta{position:absolute;right:7px;bottom:6px;margin:0;padding:2px 6px;border-radius:8px;background:#0008;color:#fff;z-index:3}
.media-bubble.media-only>.forward{display:table;max-width:100%;margin:0 0 5px;padding:4px 8px;border-radius:9px;background:#202c34c9;color:#fff;font-size:12px}
.retry-message{margin-top:8px;padding:7px 11px;border-radius:8px;background:#3f9bed;color:#fff;font-size:12px;font-weight:600}
.skipped-media{align-items:flex-start}.skipped-media>span:last-child{display:flex;flex-direction:column;align-items:flex-start}
.album-bubble{position:relative;flex:0 1 420px;width:420px!important;max-width:calc(100% - 28px)!important;padding:3px!important}
.album-grid{position:relative;display:block;max-width:100%;height:auto;overflow:hidden;border-radius:9px}
.album-grid.react-album-layout{width:var(--album-desktop-width);aspect-ratio:var(--album-desktop-ratio)}
.react-album-layout>.album-cell{left:var(--album-left-desktop);top:var(--album-top-desktop);width:var(--album-width-desktop);height:var(--album-height-desktop)}
@media(max-width:700px){.album-grid.react-album-layout{width:var(--album-mobile-width);aspect-ratio:var(--album-mobile-ratio)}.react-album-layout>.album-cell{left:var(--album-left-mobile);top:var(--album-top-mobile);width:var(--album-width-mobile);height:var(--album-height-mobile)}}
.album-cell{position:absolute;min-width:0;min-height:0;overflow:hidden;background:#1a242a}
.album-attachment{display:contents}
.album-cell .media-image,.album-cell .media-frame,.album-cell .video-poster{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;object-fit:cover!important;border-radius:0!important}
.album-cell .media-frame{position:relative}
.album-cell.album-unavailable .media-frame-state{padding:7px;gap:4px}
.album-cell.album-unavailable .media-frame-state strong,.album-cell.album-unavailable .media-frame-state small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.album-cell.album-unavailable .retry-message{margin-top:4px;padding:5px 6px;font-size:10px}
.album-cell.album-unavailable>.file-card{width:100%;height:100%;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:8px;border-radius:0;overflow:hidden}
.album-cell.album-unavailable>.album-attachment>.file-card{width:100%;height:100%;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:8px;border-radius:0;overflow:hidden}
.album-cell.album-unavailable>.file-card strong,.album-cell.album-unavailable>.file-card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.album-cell .album-item-tools{opacity:0;pointer-events:none;transition:opacity .15s ease;right:5px;top:5px;bottom:auto;background:#1119}
.album-cell:hover .album-item-tools,.album-cell:focus-within .album-item-tools{opacity:1;pointer-events:auto}
.album-bubble.album-media-only>.meta{position:absolute;right:8px;bottom:7px;margin:0;padding:2px 5px;background:#1119;border-radius:8px;color:#fff;z-index:3;float:none}
.album-bubble.album-media-only>.meta button{color:inherit}
.album-bubble.album-media-only:not(:has(.reply,.reactions,.deleted-label)){background:transparent;box-shadow:none;padding:0!important}
.album-bubble.album-media-only>.album-grid{border-radius:12px}

.media-frame>.video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.media-frame>.video-open{position:absolute;inset:0;z-index:2;display:grid;place-items:center;width:100%;height:100%;color:#fff;text-align:center}
.media-frame>.video-open:hover{background:#0002}
.video-open-play{display:grid;place-items:center;width:48px;height:48px;padding-left:3px;border-radius:50%;background:#0008;color:#fff;font-size:22px;box-shadow:0 2px 12px #0004;backdrop-filter:blur(6px)}
.video-open-duration{position:absolute;top:7px;left:7px;padding:3px 6px;border-radius:8px;background:#0009;font-size:11px;font-variant-numeric:tabular-nums}
.album-cell .video-open-play{width:38px;height:38px;font-size:17px}
.media-frame-skeleton{z-index:0!important;pointer-events:none}
.round-player{width:264px;height:264px;max-width:72vw;max-height:72vw}
.round-duration{position:absolute;top:7px;left:7px;padding:3px 6px;border-radius:8px;background:#0009;color:#fff;font-size:11px;font-variant-numeric:tabular-nums;pointer-events:none}
.round-muted{top:7px;bottom:auto;left:51px;transform:none;display:grid;place-items:center;width:22px;height:20px;padding:2px;border-radius:7px;background:#0009;color:#fff}
.round-muted svg{width:14px;height:14px}
.round-bubble:has(>.forward){position:relative}
.round-bubble>.forward{position:absolute;left:calc(100% + 10px);top:2px;width:max-content;max-width:180px;padding:5px 7px;border-radius:9px;background:#202c34c9;color:#fff;line-height:1.25}
.message-row.out .round-bubble>.forward{left:auto;right:calc(100% + 10px)}
.round-player .round-play{font-size:28px}

#lightbox[open]{display:block;inset:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;padding:0;border:0;border-radius:0;box-shadow:none;background:#050608ed;color:#fff;overflow:hidden}
#lightbox::backdrop{background:#0009}
#lightbox header.media-viewer-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;min-height:72px;margin:0;padding:9px 22px;background:linear-gradient(#0007,#0000);z-index:4}
.media-viewer-person{display:flex;align-items:center;gap:10px;min-width:0}
#lightbox-source{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;background:#8b79c9;color:#fff;font-size:16px}
.media-viewer-person>span:nth-child(2){display:flex;flex-direction:column;min-width:0;gap:3px}
#lightbox-sender{font-size:14px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#lightbox-date{font-size:11px;color:#bbb;white-space:nowrap}
#lightbox-count{margin-left:12px;font-size:11px;color:#bbb;white-space:nowrap}
#lightbox-actions{display:flex;align-items:center;gap:4px;flex:none}
#lightbox-actions button,#lightbox-actions a{display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:transparent;color:#eee;text-decoration:none;font-size:27px;line-height:1}
#lightbox-actions button:hover,#lightbox-actions a:hover{background:#ffffff20}
#lightbox-actions #media-go-message{font-size:23px}
#lightbox-actions #lightbox-zoom{font-size:30px}
#lightbox-actions #lightbox-close{font-size:34px;font-weight:200}
#lightbox-content{position:absolute;inset:0;min-height:0;height:100%!important;display:flex;align-items:center;justify-content:center;overflow:hidden}
#lightbox:has(#lightbox-caption:not([hidden])) #lightbox-content{padding-bottom:80px}
#lightbox-content>img,#lightbox-content>video{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:0}
#lightbox-content>img{cursor:zoom-in}
#lightbox-content.is-zoomed{overflow:auto;justify-content:flex-start;align-items:flex-start}
#lightbox-content.is-zoomed>img{max-width:none;max-height:none;width:150%;height:auto;margin:auto;cursor:zoom-out}
#lightbox .media-viewer-nav{position:absolute;top:50%;z-index:3;transform:translateY(-50%);width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:#0008;color:#fff;font-size:36px;line-height:1}
#lightbox-prev{left:18px}#lightbox-next{right:18px}
#lightbox .media-viewer-nav:disabled{opacity:0;pointer-events:none}
#lightbox .media-viewer-nav:not(:disabled):hover{background:#fff3}
#lightbox footer#lightbox-caption{position:absolute;left:0;right:0;bottom:0;z-index:4;height:auto;min-height:0;max-height:90px;overflow:auto;display:block;padding:13px 24px 20px;text-align:center;font-size:13px;line-height:1.45;color:#eee;background:linear-gradient(#0000,#0008)}
#lightbox footer#lightbox-caption[hidden]{display:none!important}
#lightbox-content .plyr{width:min(calc((100dvh - 110px)*var(--viewer-ratio,1.7778)),calc(100vw - 110px));max-width:none;max-height:calc(100dvh - 110px);aspect-ratio:var(--viewer-ratio,1.7778);background:transparent}
#lightbox-content .plyr .plyr__video-wrapper{width:100%;height:100%;aspect-ratio:inherit}
#lightbox-content .plyr video{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.chat-media-grid{gap:1px!important}
.chat-media-grid .media-tile{border-radius:0}
.chat-media-grid .media-tile span:not(.media-tile-placeholder){left:5px;right:auto;bottom:5px;border-radius:5px;background:#0009}

@media(max-width:700px){
 .media-bubble.media-captioned{max-width:90%!important}
 .album-bubble{flex-basis:360px;width:360px!important;max-width:calc(100% - 16px)!important}
 .round-player{width:220px;height:220px}
 .round-bubble>.forward,.message-row.out .round-bubble>.forward{position:static;max-width:100%;margin-bottom:5px}
 #lightbox[open]{grid-template-rows:60px minmax(0,1fr) auto}
 #lightbox header.media-viewer-bar{height:60px;min-height:60px;padding:7px 8px;gap:5px}
 #lightbox-source{width:32px;height:32px;font-size:14px}
 #lightbox-sender{font-size:12px}
 #lightbox-date{font-size:10px}
 #lightbox-count{display:none}
 #lightbox-actions{gap:0}
 #lightbox-actions button,#lightbox-actions a{width:36px;height:36px;font-size:23px}
 #lightbox .media-viewer-nav{width:36px;height:36px;font-size:28px;top:53%}
 #lightbox-prev{left:6px}#lightbox-next{right:6px}
 #lightbox-content .plyr{width:min(calc((100dvh - 80px)*var(--viewer-ratio,1.7778)),100vw);max-height:calc(100dvh - 80px)}
}
@media(prefers-reduced-motion:reduce){.album-cell .album-item-tools{transition:none}}

/* Keep the same message silhouette for text, files and captioned media. */
#messages .bubble.has-tail{--bubble-fill:var(--incoming);border-radius:15px 15px 15px 0;overflow:visible}
#messages .message-row.out .bubble.has-tail{--bubble-fill:var(--outgoing);border-radius:15px 15px 0 15px}
#messages .bubble.has-tail>.bubble-tail{position:absolute;left:-8px;bottom:0;width:11px;height:20px;display:block;fill:var(--bubble-fill);pointer-events:none;z-index:0}
#messages .message-row.out .bubble.has-tail>.bubble-tail{left:auto;right:-8px;transform:scaleX(-1)}
#messages .bubble.has-tail.has-photo{border-radius:15px 15px 15px 0}
#messages .message-row.out .bubble.has-tail.has-photo{border-radius:15px 15px 0 15px}

/* The origin belongs inside the message, including forwarded media with no caption. */
#messages .bubble:not(.round-bubble):not(.sticker-bubble)>.forward{display:flex;align-items:center;gap:8px;width:100%;min-height:39px;margin:0;padding:4px 7px 7px;border-radius:0;background:transparent;color:var(--blue);font-size:12px;line-height:1.15}
#messages .forward-mark{display:grid;flex:none;place-items:center;width:23px;height:23px;border-radius:50%;background:color-mix(in srgb,var(--blue) 18%,var(--bubble-fill,var(--incoming)));color:var(--blue);font-size:17px;line-height:1}
#messages .forward-copy{display:block;min-width:0}
#messages .forward-copy small,#messages .forward-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#messages .forward-copy small{font-size:11px;font-weight:500;opacity:.88}
#messages .forward-copy strong{margin-top:2px;font-size:13px;font-weight:600}
#messages .forward-unknown .forward-copy strong{color:var(--muted);font-size:11px;font-weight:500}
#messages .media-bubble.media-only:has(>.forward){background:var(--incoming);box-shadow:var(--shadow);padding:3px;min-width:0}
#messages .message-row.out .media-bubble.media-only:has(>.forward){background:var(--outgoing)}
#messages .media-bubble.media-only:has(>.forward)>.meta{position:static;float:right;margin-left:24px;padding:0 5px;background:none;color:var(--muted)}
#messages .media-bubble:has(>.forward)>.media-frame,#messages .media-bubble:has(>.forward)>.photo-stage{border-top-left-radius:3px;border-top-right-radius:3px}

/* Telegram presents tall video inside a wider, colour-filled 320:400 stage. */
#messages .bubble.media-bubble.portrait-media:has(>.media-frame){width:326px!important;max-width:min(326px,84%)!important;padding:3px!important}
#messages .bubble.media-bubble.portrait-media:has(>.media-frame)>.media-frame{width:100%!important;max-width:none;aspect-ratio:4/5;max-height:none;border-radius:11px 11px 3px 3px}
#messages .bubble.media-bubble.portrait-media:has(>.forward)>.media-frame{border-top-left-radius:3px;border-top-right-radius:3px}
#messages .bubble.media-bubble.portrait-media .video-poster{object-fit:contain}
.media-frame>.video-backdrop{position:absolute;inset:-16px;width:calc(100% + 32px);height:calc(100% + 32px);display:block;filter:blur(17px) saturate(1.12);transform:scale(1.06);opacity:.82;z-index:0;pointer-events:none}
#messages .bubble.media-bubble.portrait-media>.message-text{padding:8px 9px 2px}
#messages .bubble.media-bubble.portrait-media>.meta{padding-right:7px}

/* Time occupies the last text line, leaving its own space when the line is full. */
#messages .bubble:has(>.message-text){--meta-reserve:64px}
#messages .message-row.out .bubble:has(>.message-text){--meta-reserve:79px}
#messages .bubble:has(>.message-text)>.message-text::after{content:'';display:inline-block;width:var(--meta-reserve);height:.7em;vertical-align:baseline}
#messages .bubble:has(>.message-text)>.meta{position:absolute;right:7px;bottom:5px;float:none;margin:0;padding:0;z-index:2}
#messages .media-bubble.media-only:has(>.forward)>.meta{position:absolute;right:8px;bottom:8px;float:none;margin:0;padding:2px 5px;border-radius:7px;background:#0009;color:#fff;z-index:2}

/* Incoming media first appears in the shape it will have after download. */
.media-placeholder{--placeholder-base:var(--incoming);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;max-width:100%;overflow:hidden;border-radius:11px;background:color-mix(in srgb,var(--placeholder-base) 78%,var(--hover));color:var(--ink);text-align:center;isolation:isolate}
.message-row.out .media-placeholder{--placeholder-base:var(--outgoing)}
.media-placeholder.is-pending::before,.media-frame-state.is-pending::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(105deg,transparent 18%,color-mix(in srgb,var(--blue) 10%,transparent) 48%,transparent 78%);background-size:220% 100%;animation:message-loading-sweep 2s ease-in-out infinite}
.media-placeholder>*{position:relative;z-index:1}
.photo-placeholder{min-width:0;max-height:400px}
.media-placeholder-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:12px;background:color-mix(in srgb,var(--blue) 11%,var(--placeholder-base));color:var(--blue);font-size:24px;font-weight:400;line-height:1}
.media-placeholder-copy{display:flex;flex-direction:column;gap:3px;max-width:calc(100% - 18px);font-size:12px;line-height:1.25}
.media-placeholder-copy strong{font-size:12px;font-weight:600}
.media-placeholder-copy small{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--muted);font-size:11px;overflow-wrap:anywhere}
.media-placeholder>.retry-message{margin-top:3px;padding:5px 8px;font-size:11px}
.photo-placeholder.is-compact .media-placeholder-copy,.photo-placeholder.is-compact .media-placeholder-icon{display:none}
.photo-placeholder.is-compact::after{content:'Фото · ожидает файл';position:relative;z-index:1;color:var(--muted);font-size:11px}
.album-cell .photo-placeholder{width:100%!important;height:100%!important;max-height:none;aspect-ratio:auto!important;border-radius:0}
.album-cell .photo-placeholder .media-placeholder-copy,.album-cell .photo-placeholder>.retry-message{display:none}
.album-cell .photo-placeholder .media-placeholder-icon{width:30px;height:30px;font-size:19px}
.album-cell .photo-placeholder.is-compact::after{display:none}
.media-frame-state.is-pending{background:linear-gradient(145deg,color-mix(in srgb,var(--blue) 8%,#293542),#18222c)}
.media-frame-state>*{position:relative;z-index:1}
.media-frame-state.is-pending .media-frame-icon{background:#ffffff15;color:#9ac8ed}
.media-placeholder-filename{display:block;max-width:88%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#aab9c7;font-size:10px}
.media-frame-state .retry-message{max-width:100%;font-size:11px}

.voice-player.voice-placeholder{min-width:265px;max-width:100%;align-items:center;gap:10px;padding:6px 8px;border-radius:11px;background:color-mix(in srgb,var(--blue) 7%,transparent)}
.voice-placeholder-control{display:grid;flex:none;place-items:center;width:42px;height:42px;border-radius:50%;background:color-mix(in srgb,var(--blue) 78%,var(--incoming));color:#fff;font-size:20px}
.voice-placeholder-title{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;line-height:1.2}
.voice-placeholder .placeholder-waveform{height:19px;margin:2px 0 0;gap:2px;overflow:hidden;pointer-events:none}
.voice-placeholder .placeholder-waveform i{flex:1 1 2px;min-width:1px;max-height:17px;background:color-mix(in srgb,var(--blue) 43%,var(--muted))}
.voice-placeholder.is-pending .placeholder-waveform{animation:message-loading-pulse 1.65s ease-in-out infinite}
.voice-placeholder .voice-time{margin:1px 0 0;font-size:10px;line-height:1.3}
.voice-placeholder .retry-message{margin:5px 0 0;padding:5px 8px;font-size:10px}
.round-pending-wrap{display:flex;flex-direction:column;align-items:flex-start;max-width:72vw}
.round-player.round-placeholder{display:grid;place-items:center;overflow:hidden;border:1px solid color-mix(in srgb,var(--blue) 20%,var(--line));border-radius:50%;background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--blue) 24%,var(--hover)),color-mix(in srgb,var(--incoming) 65%,#17212b) 70%);box-shadow:0 2px 12px #0002}
.round-placeholder-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(15px);opacity:.4;transform:scale(1.1)}
.round-placeholder-core{position:relative;z-index:1;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#1119;color:#fff;font-size:24px;backdrop-filter:blur(5px)}
.round-pending-wrap.is-pending .round-placeholder-core::after{content:'';position:absolute;inset:-7px;border:2px solid #fff5;border-top-color:#fff;border-radius:50%;animation:archive-spin 1.15s linear infinite}
.round-placeholder-status{display:block;max-width:100%;margin-top:6px;padding:5px 9px;border-radius:9px;background:color-mix(in srgb,var(--incoming) 88%,transparent);color:var(--muted);font-size:11px;line-height:1.3}
.message-row.out .round-placeholder-status{background:color-mix(in srgb,var(--outgoing) 88%,transparent)}
.round-pending-wrap>.retry-message{margin-top:6px;font-size:10px}

.sticker-placeholder{width:170px;height:170px;padding:10px}
.sticker-placeholder .media-placeholder-icon{border-radius:50%}
.file-card.file-placeholder{min-width:min(270px,100%);max-width:100%;gap:10px;padding:8px;border:1px solid color-mix(in srgb,var(--blue) 12%,var(--line));border-radius:11px;background:color-mix(in srgb,var(--blue) 5%,transparent)}
.file-placeholder .file-icon{flex:none;width:43px;height:46px;background:color-mix(in srgb,var(--blue) 15%,var(--surface));color:var(--blue);font-size:11px;font-weight:700}
.file-placeholder-copy{display:block;min-width:0;flex:1}
.file-placeholder-copy strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-placeholder-copy small{line-height:1.35;overflow-wrap:anywhere}
.file-placeholder .retry-message{margin-top:5px;padding:5px 8px;font-size:10px}
.file-placeholder.is-pending .file-icon{animation:message-loading-pulse 1.65s ease-in-out infinite}
@keyframes message-loading-pulse{50%{opacity:.5}}
@keyframes message-loading-sweep{to{background-position-x:-220%}}
@media(max-width:700px){.voice-player.voice-placeholder{min-width:min(225px,100%)}.round-pending-wrap{max-width:75vw}.sticker-placeholder{width:150px;height:150px}}
@media(prefers-reduced-motion:reduce){.media-placeholder.is-pending::before,.media-frame-state.is-pending::before,.voice-placeholder.is-pending .placeholder-waveform,.round-pending-wrap.is-pending .round-placeholder-core::after,.file-placeholder.is-pending .file-icon{animation:none}}

/* Keep the initial conversation load in the same visual rhythm as real messages. */
.chat-skeleton{display:block;opacity:1;padding:20px max(18px,calc((100% - 760px)/2))}
.chat-skeleton .chat-skeleton-label{display:block;margin:0 0 18px;font-size:11px;text-align:center;color:var(--muted)}
.chat-skeleton-row{display:flex;margin:12px 0}
.chat-skeleton-row.out{justify-content:flex-end}
.chat-skeleton-bubble{display:flex;flex-direction:column;gap:9px;width:min(310px,70%);padding:13px 14px;border-radius:15px 15px 15px 3px;background:var(--incoming)}
.chat-skeleton-row.out .chat-skeleton-bubble{width:min(250px,58%);border-radius:15px 15px 3px 15px;background:var(--outgoing)}
.chat-skeleton .chat-skeleton-bubble i,.chat-skeleton .chat-skeleton-bubble i:nth-child(2),.chat-skeleton .chat-skeleton-bubble i:nth-child(3){display:block;justify-self:auto;width:80%;max-width:none;height:10px;border-radius:6px;background:color-mix(in srgb,var(--muted) 23%,transparent);animation:message-loading-pulse 1.7s ease-in-out infinite}
.chat-skeleton .chat-skeleton-bubble i:nth-child(2){width:58%}
.chat-skeleton .chat-skeleton-bubble i:nth-child(3){width:36%}
@media(prefers-reduced-motion:reduce){.chat-skeleton .chat-skeleton-bubble i{animation:none}}