) */
.tg-avatar {
width: 40px;
height: 40px;
flex: 0 0 40px;
min-width: 40px;
min-height: 40px;
border-radius: 50%;
overflow: hidden; /* clips image into circle */
background: #d1d5db;
display: grid;
place-items: center;
}
/* Placeholder variant (same box, just explicit) */
.tg-avatar-ph {
background: #d1d5db;
}
/* If you ever switch to
![]()
inside a wrapper */
.tg-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
opacity: 0;
transition: opacity 160ms ease-in;
}
.tg-avatar-img.is-loaded { opacity: 1; }
/* Right side content */
.tg-body {
flex: 1;
min-width: 0; /* enables ellipsis */
}
/* Header: avatar + title on left; history controls on right */
.tg-head {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 6px;
}
/* Album cards render only avatar + title/handle in the header.
Without this override, `justify-content: space-between` pushes the title block to the right. */
.tg-msg-album .tg-head {
justify-content: flex-start;
}
.tg-head-left {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1 1 auto;
}
/* If your JS uses a dedicated wrapper for title+handle */
.tg-head-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.tg-title {
font-weight: 700;
font-size: 14px;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tg-handle {
font-size: 12px;
color: #6b7280;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tg-text {
font-size: 14px;
line-height: 1.35;
margin-top: 2px;
word-wrap: break-word;
white-space: pre-wrap;
}
.tg-text strong { font-weight: 700; }
.tg-text em { font-style: italic; }
.tg-text u { text-decoration: underline; }
.tg-text s { text-decoration: line-through; }
.tg-text code {
font-family: ui-monospace, monospace;
font-size: 0.9em;
padding: 0.1em 0.35em;
border-radius: 4px;
background: var(--tg-bg-secondary, #f0f2f5);
}
.tg-text-custom-emoji-wrap {
display: inline-block;
position: relative;
margin: 0 0.03em;
min-width: 1em;
vertical-align: baseline;
line-height: inherit;
overflow: visible;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.tg-text-custom-emoji-loading {
background: none;
}
.tg-text-custom-emoji-mounted {
color: transparent;
text-shadow: none;
}
.tg-text-custom-emoji {
position: absolute;
left: 50%;
top: 50%;
width: 1.18em;
height: 1.18em;
transform: translate(-50%, -50%);
object-fit: contain;
display: block;
pointer-events: none;
line-height: 0;
}
.tg-text-custom-emoji-tgs-wrap tgs-player {
display: block;
width: 1.18em;
height: 1.18em;
line-height: 0;
}
.tg-text-custom-emoji-failed {
color: inherit;
vertical-align: baseline;
line-height: inherit;
}
/* Spoiler: hidden text, same blur + moving white dots as media (Telegram-style), click to reveal */
.tg-entity-spoiler {
position: relative;
display: inline-block;
max-width: 100%;
overflow-wrap: break-word;
word-break: break-word;
color: transparent;
border-radius: 4px;
cursor: pointer;
user-select: none;
filter: blur(0.4em);
transition: filter 0.2s ease, color 0.2s ease;
}
.tg-entity-spoiler::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
background: var(--tg-hint-color, #6b7280);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.tg-entity-spoiler::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
background-image:
radial-gradient(circle, rgba(255, 255, 255, 0.9) 1px, transparent 1px),
radial-gradient(circle, rgba(255, 255, 255, 0.75) 1px, transparent 1px);
background-size: 14px 14px, 18px 18px;
background-position: 0 0, 7px 9px;
animation: tg-spoiler-dots 6s ease-in-out infinite;
pointer-events: none;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.tg-entity-spoiler:hover { filter: blur(0.35em); }
.tg-entity-spoiler.tg-spoiler-revealed {
filter: none;
color: inherit;
cursor: text;
user-select: text;
}
.tg-entity-spoiler.tg-spoiler-revealed::before,
.tg-entity-spoiler.tg-spoiler-revealed::after {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Media spoiler: blur + chaotically moving white dots (Telegram-style), click to reveal */
.tg-media-spoiler {
position: relative;
display: block;
cursor: pointer;
overflow: hidden;
/* Keep the blur frame rounded even when the parent doesn't provide border-radius */
border-radius: 12px;
}
.tg-media-spoiler--fit {
/* For single photos we want the blur overlay to match the photo button bounds exactly */
display: inline-block;
vertical-align: top;
max-width: 100%;
}
.tg-media-spoiler::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transition: opacity 0.25s ease, visibility 0.25s ease;
}
/* Chaotically moving white dots overlay (Telegram-style) */
.tg-media-spoiler::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
/* Dots removed: keep blur only. */
background-image: none;
background-size: 0 0;
background-position: 0 0;
animation: none;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
@keyframes tg-spoiler-dots {
0%, 100% { background-position: 0 0, 7px 9px; transform: translate(0, 0); }
15% { background-position: 3px -4px, 10px 5px; transform: translate(-1px, 2px); }
30% { background-position: -4px 5px, 4px 12px; transform: translate(2px, -1px); }
45% { background-position: 5px 3px, 13px 3px; transform: translate(-2px, -2px); }
60% { background-position: -2px -3px, 2px 8px; transform: translate(1px, 1px); }
75% { background-position: 4px 6px, 9px 14px; transform: translate(-1px, -1px); }
90% { background-position: -3px 2px, 6px 4px; transform: translate(2px, 0); }
}
.tg-media-spoiler:not(.tg-spoiler-revealed) img {
filter: blur(18px);
/* No scaling: prevents blurred pixels from effectively expanding past
the real media bounds (which caused edge bleeding/white seams). */
transform: none;
transition: filter 0.25s ease;
}
.tg-media-spoiler.tg-spoiler-revealed::before,
.tg-media-spoiler.tg-spoiler-revealed::after {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.tg-media-spoiler.tg-spoiler-revealed img {
filter: none;
}
/* Poll display (Telegram-style) */
.tg-poll {
margin-top: 8px;
padding: 12px;
background: var(--tg-bg-secondary, #f0f2f5);
border-radius: 12px;
}
.tg-poll-label {
font-size: 12px;
font-weight: 600;
color: var(--tg-hint-color, #6b7280);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 6px;
}
.tg-poll-question {
font-size: 15px;
font-weight: 500;
color: var(--tg-text, #000);
margin-bottom: 12px;
line-height: 1.4;
}
.tg-poll-view-results {
display: inline-block;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
color: var(--tg-link-color, #2a9ef6);
background: transparent;
border: 1px solid var(--tg-link-color, #2a9ef6);
border-radius: 8px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.tg-poll-view-results:hover {
background: var(--tg-link-color, #2a9ef6);
color: #fff;
}
.tg-poll-results {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--tg-hint-color, #9ca3af);
}
.tg-poll-result-row {
margin-bottom: 12px;
padding: 8px 0;
}
.tg-poll-result-row:last-child {
margin-bottom: 0;
}
.tg-poll-result-row.tg-poll-result-correct {
background: rgba(76, 175, 80, 0.1);
border-radius: 6px;
padding: 8px 10px;
margin-left: -10px;
margin-right: -10px;
}
.tg-poll-result-label {
font-size: 14px;
color: var(--tg-text, #000);
margin-bottom: 6px;
font-weight: 500;
}
.tg-poll-result-bar-wrap {
position: relative;
height: 24px;
background: rgba(0, 0, 0, 0.08);
border-radius: 12px;
overflow: hidden;
}
.tg-poll-result-bar {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: var(--tg-link-color, #2a9ef6);
border-radius: 12px;
transition: width 0.4s ease;
}
.tg-poll-result-row.tg-poll-result-correct .tg-poll-result-bar {
background: #4caf50;
}
.tg-poll-result-percent {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
font-weight: 600;
color: var(--tg-text, #000);
z-index: 1;
}
.tg-poll-quiz-solution {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--tg-hint-color, #9ca3af);
font-size: 14px;
color: var(--tg-text, #000);
line-height: 1.5;
}
/* Link (text_url): blue */
.tg-entity-link {
color: var(--tg-link-color, #2a9ef6);
text-decoration: none;
}
.tg-entity-link:hover { text-decoration: underline; }
/* Blockquote: box with "" at top right (Telegram-style) */
.tg-entity-blockquote {
display: block;
margin: 6px 0;
padding: 8px 28px 8px 12px;
background: var(--tg-bg-secondary, #f0f2f5);
border-left: 3px solid var(--tg-hint-color, #9ca3af);
border-radius: 0 8px 8px 0;
position: relative;
}
.tg-entity-blockquote::after {
content: "\201C\201D"; /* "" left and right double quotation marks */
position: absolute;
top: 4px;
right: 8px;
font-size: 16px;
line-height: 1;
color: var(--tg-hint-color, #9ca3af);
font-family: serif;
}
/* Media */
.tg-media-block { margin-top: 8px; }
/* GIF / animation (autoplay, loop, pause when off-screen, Telegram-style badge) */
.tg-gif-wrap {
position: relative;
width: 100%;
max-width: 320px;
border-radius: 12px;
overflow: hidden;
background: #0d0d0d;
}
.tg-gif-badge {
position: absolute;
top: 8px;
left: 8px;
z-index: 1;
font-size: 11px;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
text-transform: uppercase;
letter-spacing: 0.04em;
pointer-events: none;
}
.tg-gif-video {
width: 100%;
display: block;
border-radius: 12px;
}
/* Photo album (grouped_id) – Telegram-style even fill of rectangle */
.tg-album-grid {
display: grid;
gap: 3px;
border-radius: 12px;
overflow: hidden;
margin-top: 8px;
max-width: 720px;
aspect-ratio: 1;
}
/* 1 photo: single cell, square */
.tg-album-grid-n1 {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
/* 2 photos: side by side, equal */
.tg-album-grid-n2 {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
}
/* 3 photos: one left (full height), two stacked right */
.tg-album-grid-n3 {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.tg-album-grid-n3 .tg-album-thumb-span-row {
grid-row: 1 / -1;
}
/* 4 photos: 2×2 */
.tg-album-grid-n4 {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
/* 5 photos: 2×2 + one full width bottom */
.tg-album-grid-n5 {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.tg-album-thumb-span-col {
grid-column: 1 / -1;
}
/* 6 photos: 2×3 grid */
.tg-album-grid-n6 {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
aspect-ratio: 2 / 3;
}
/* 7 photos: 2×4 with last spanning */
.tg-album-grid-n7 {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
aspect-ratio: 2 / 4;
}
/* 8 photos: 2×4 */
.tg-album-grid-n8 {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
aspect-ratio: 2 / 4;
}
/* 9+ photos: 3 columns, equal rows (3×3 for 9, more rows for 10+) */
.tg-album-grid-n9 {
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 1fr;
aspect-ratio: 1;
}
.tg-album-grid-n9.tg-album-grid-many {
aspect-ratio: auto;
max-height: 540px;
}
.tg-album-thumb {
display: block;
position: relative;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: #f3f4f6;
cursor: pointer;
overflow: hidden;
min-height: 0;
}
.tg-album-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tg-album-thumb-placeholder {
width: 100%;
height: 100%;
background: #e5e7eb;
}
.tg-album-video-badge {
position: absolute;
left: 50%;
top: 50%;
width: 44px;
height: 44px;
transform: translate(-50%, -50%);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.48);
color: #fff;
pointer-events: none;
z-index: 2;
}
.tg-album-video-icon {
width: 28px;
height: 28px;
}
.tg-album-thumb-error { background: #e5e7eb; }
.tg-album-thumb-error img { visibility: hidden; }
/* Lightbox */
.tg-lightbox {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.9);
align-items: center;
justify-content: center;
}
.tg-lightbox.tg-lightbox-open {
display: flex;
}
.tg-lightbox-close {
position: absolute;
top: 12px;
right: 12px;
width: 44px;
height: 44px;
border: 0;
background: rgba(255,255,255,0.15);
color: #fff;
font-size: 28px;
line-height: 1;
cursor: pointer;
border-radius: 50%;
z-index: 2;
}
.tg-lightbox-prev,
.tg-lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border: 0;
background: rgba(255,255,255,0.15);
color: #fff;
font-size: 32px;
line-height: 1;
cursor: pointer;
border-radius: 8px;
z-index: 2;
}
.tg-lightbox-prev { left: 12px; }
.tg-lightbox-next { right: 12px; }
.tg-lightbox-img {
max-width: 95vw;
max-height: 90vh;
object-fit: contain;
z-index: 1;
}
.tg-lightbox-media {
position: relative;
z-index: 1;
max-width: 95vw;
max-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}
.tg-lightbox-video-wrap {
width: min(95vw, 960px);
max-height: 90vh;
}
.tg-lightbox-video-wrap .tg-video {
max-height: 90vh;
}
.tg-lightbox-counter {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.9);
font-size: 14px;
z-index: 2;
}
.tg-media-wrap {
position: relative;
display: inline-block;
width: 100%;
}
/* Single photo (kind: photo, grouped_id: null): click to open in lightbox */
.tg-single-photo-wrap {
max-width: 100%;
cursor: pointer;
border: 0;
padding: 0;
background: none;
border-radius: 12px;
overflow: hidden;
}
.tg-single-photo-wrap .tg-media {
width: 100%;
display: block;
}
.tg-media {
width: 100%;
border-radius: 12px;
display: block;
background: #f3f4f6; /* visible while loading */
}
/* In-feed video player (Telegram-style: play/pause + seek) */
.tg-video-wrap {
position: relative;
width: 100%;
border-radius: 12px;
overflow: hidden;
background: #0d0d0d;
}
/* Video message "circle" (kind: audio, round video) */
.tg-video-wrap--circle {
width: 240px;
height: 240px;
border-radius: 50%;
flex-shrink: 0;
}
.tg-video-wrap--circle .tg-video {
width: 100%;
height: 100%;
max-height: none;
object-fit: cover;
}
/* Circular progress ring along the outline of the circle */
.tg-video-circle-progress {
position: absolute;
inset: 0;
border-radius: 50%;
cursor: pointer;
pointer-events: auto;
z-index: 2;
}
.tg-video-circle-progress:focus {
outline: none;
}
.tg-video-circle-progress:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.6);
outline-offset: 2px;
}
.tg-video-circle-progress-svg {
width: 100%;
height: 100%;
display: block;
transform: rotate(0deg);
pointer-events: none;
}
.tg-video-circle-progress-track {
stroke: rgba(255, 255, 255, 0.30);
/* stroke-width in SVG user units (viewBox 0 0 100 100, circle 240px → scale 2.4):
1.25 user units ≈ 3 px on screen. No vector-effect so dasharray is also in user units. */
stroke-width: 1.25;
}
.tg-video-circle-progress-fill {
stroke: #fff;
stroke-width: 1.25;
stroke-linecap: round;
/* Initial state: invisible (dash=0, gap=huge). JS updates it on each timeupdate. */
stroke-dasharray: 0 10000;
stroke-dashoffset: 0;
transition: stroke-dasharray 0.1s linear;
}
.tg-video-wrap--circle .tg-video-controls {
border-radius: 0 0 120px 120px;
}
.tg-video-wrap--circle .tg-video-controls--circle {
z-index: 3;
}
/* Outer wrapper for circle video: stacks the circle above the time label */
.tg-video-circle-outer {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.tg-video-circle-outer > .tg-video-time {
padding-left: 2px;
font-size: 11px;
color: rgba(0, 0, 0, 0.55);
white-space: nowrap;
}
.tg-video-wrap .tg-video {
width: 100%;
display: block;
max-height: 360px;
object-fit: contain;
}
.tg-video-controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
color: #fff;
}
.tg-video-progress-wrap {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
cursor: pointer;
padding: 4px 0;
}
.tg-video-progress-wrap:focus {
outline: none;
}
.tg-video-progress-wrap:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.6);
outline-offset: 2px;
border-radius: 2px;
}
.tg-video-progress {
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.3);
border-radius: 2px;
overflow: hidden;
}
.tg-video-progress-fill {
height: 100%;
width: 0%;
background: #fff;
border-radius: 2px;
transition: width 0.1s linear;
}
.tg-video-time {
flex-shrink: 0;
font-size: 11px;
color: rgba(255, 255, 255, 0.9);
white-space: nowrap;
}
.tg-video-btn {
width: 36px;
height: 36px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
color: #fff;
cursor: pointer;
transition: background 0.15s ease;
}
.tg-btn-icon {
width: 14px;
height: 14px;
display: block;
flex-shrink: 0;
}
.tg-voice-btn .tg-btn-icon {
width: 16px;
height: 16px;
}
.tg-video-btn:hover {
background: rgba(255, 255, 255, 0.35);
}
.tg-video-btn:focus {
outline: 2px solid rgba(255, 255, 255, 0.6);
outline-offset: 2px;
}
/* Voice message player (Telegram-style: compact bar, play + progress + time) */
.tg-voice-wrap {
display: flex;
align-items: center;
width: 100%;
max-width: 320px;
min-height: 48px;
padding: 8px 12px;
border-radius: 12px;
background: rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 0, 0, 0.08);
}
.tg-voice-wrap .tg-voice-audio {
position: absolute;
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
}
.tg-voice-controls {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-width: 0;
}
.tg-voice-btn {
width: 40px;
height: 40px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: rgba(0, 0, 0, 0.08);
color: #1f2937;
font-size: 16px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.tg-voice-btn:hover {
background: rgba(0, 0, 0, 0.12);
color: #111827;
}
.tg-voice-btn:focus {
outline: 2px solid rgba(0, 0, 0, 0.2);
outline-offset: 2px;
}
.tg-voice-progress-wrap {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
cursor: pointer;
padding: 6px 0;
}
.tg-voice-progress-wrap:focus {
outline: none;
}
.tg-voice-progress-wrap:focus-visible {
outline: 2px solid rgba(0, 0, 0, 0.2);
outline-offset: 2px;
border-radius: 2px;
}
.tg-voice-progress {
width: 100%;
height: 4px;
background: rgba(0, 0, 0, 0.12);
border-radius: 2px;
overflow: hidden;
}
.tg-voice-progress-fill {
height: 100%;
width: 0%;
background: #3b82f6;
border-radius: 2px;
transition: width 0.1s linear;
}
.tg-voice-time {
flex-shrink: 0;
font-size: 12px;
color: #6b7280;
white-space: nowrap;
}
/* Play overlay for animation previews (non-video) */
.tg-play {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: rgba(255, 255, 255, 0.95);
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
pointer-events: none;
}
.tg-play-icon {
width: 40px;
height: 40px;
}
/* Placeholder when preview is missing or failed */
.tg-media-placeholder {
border-radius: 12px;
background: #f3f4f6;
color: #6b7280;
padding: 16px 12px;
font-size: 13px;
text-align: center;
}
/* Stickers (static and animated) */
.tg-sticker-wrap {
position: relative;
display: inline-block;
margin-top: 8px;
}
.tg-media-sticker {
display: block;
max-width: 160px;
max-height: 160px;
width: auto;
height: auto;
border-radius: 12px;
background: transparent;
object-fit: contain;
}
/* Animated sticker video (same size as static sticker, no controls, Telegram-style) */
.tg-sticker-video-wrap .tg-sticker-video {
max-width: 160px;
max-height: 160px;
width: auto;
height: auto;
object-fit: contain;
}
/* TGS (Lottie) animated sticker */
.tg-sticker-tgs-wrap {
display: inline-block;
line-height: 0;
}
.tg-sticker-tgs-wrap .tg-sticker-tgs,
.tg-sticker-tgs-wrap tgs-player {
display: block;
max-width: 160px;
max-height: 160px;
width: 160px;
height: 160px;
}
/* Document attachment (Telegram-style: thumb + name + size + download) */
.tg-doc-wrap {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 12px;
background: var(--tg-doc-bg, #f0f2f5);
max-width: 100%;
}
.tg-doc-thumb-wrap {
flex: 0 0 auto;
width: 52px;
height: 52px;
border-radius: 10px;
overflow: hidden;
background: var(--tg-doc-thumb-bg, #e4e6eb);
display: flex;
align-items: center;
justify-content: center;
}
.tg-doc-thumb {
width: 100%;
height: 100%;
object-fit: cover;
}
.tg-doc-thumb.tg-doc-thumb-img {
display: block;
}
.tg-doc-thumb.tg-doc-thumb-icon {
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
color: var(--tg-doc-icon-color, #65676b);
}
.tg-doc-icon-svg {
width: 100%;
height: 100%;
max-width: 36px;
max-height: 48px;
}
.tg-doc-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.tg-doc-name {
font-size: 14px;
font-weight: 500;
color: var(--tg-doc-name-color, #050505);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tg-doc-size {
font-size: 12px;
color: var(--tg-doc-size-color, #65676b);
}
.tg-doc-download {
font-size: 13px;
font-weight: 500;
color: var(--tg-doc-link-color, #0088cc);
text-decoration: none;
margin-top: 4px;
align-self: flex-start;
background: none;
border: none;
padding: 0;
cursor: pointer;
font-family: inherit;
line-height: inherit;
}
.tg-doc-download:hover {
text-decoration: underline;
}
.tg-doc-download:focus-visible {
outline: 2px solid var(--tg-doc-link-color, #0088cc);
outline-offset: 2px;
}
.tg-doc-download--busy {
opacity: 0.55;
cursor: wait;
}
.tg-sticker-badge {
position: absolute;
top: 6px;
right: 6px;
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
text-transform: uppercase;
letter-spacing: 0.02em;
}
/* Geo map preview (Leaflet tiles, no attribution flag; tap opens maps) */
.geo-map-container {
width: 100%;
min-width: 200px;
height: 240px;
min-height: 240px;
border-radius: 12px;
overflow: hidden;
background: #e8ecef;
cursor: pointer;
}
.geo-map-container.leaflet-container {
font: inherit;
}
.geo-map-container .leaflet-control-attribution {
display: none !important;
}
.geo-map-container .leaflet-tile-pane { z-index: 1; }
.geo-map-container .leaflet-overlay-pane { z-index: 2; }
.geo-map-container .leaflet-marker-pane { z-index: 3; }
.geo-map-container .leaflet-shadow-pane,
.geo-map-container .leaflet-marker-shadow-pane { z-index: 2; }
/* Footer */
.tg-foot {
margin-top: 8px;
display: flex;
justify-content: flex-end;
gap: 10px;
font-size: 12px;
color: #6b7280;
}
.tg-views, .tg-time { white-space: nowrap; }
.tg-views {
display: inline-flex;
align-items: center;
gap: 4px;
}
.tg-views-icon {
width: 13px;
height: 13px;
flex-shrink: 0;
opacity: 0.72;
}
.tg-views-count {
line-height: 1;
}
.tg-deleted {
display: inline-flex;
align-items: center;
padding: 2px 6px;
border-radius: 6px;
background: rgba(220, 38, 38, 0.1);
font-size: 12px;
line-height: 1.2;
color: #b91c1c;
font-weight: 600;
}
.tg-edited {
font-size: 12px;
color: var(--tg-hint-color, #6b7280);
font-style: italic;
}
/* Show Deleted toggle (minimalist slider) */
.tg-toggle-wrap {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
cursor: pointer;
user-select: none;
}
.tg-toggle-input {
position: absolute;
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
}
.tg-toggle-slider {
position: relative;
width: 40px;
height: 22px;
background: #cbd5e1;
border-radius: 11px;
transition: background 0.2s ease;
}
.tg-toggle-slider::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
transition: transform 0.2s ease;
}
.tg-toggle-input:checked + .tg-toggle-slider {
background: var(--tg-button-color, #2a9ef6);
}
.tg-toggle-input:checked + .tg-toggle-slider::after {
transform: translateX(18px);
}
.tg-toggle-input:focus-visible + .tg-toggle-slider {
outline: 2px solid var(--tg-button-color, #2a9ef6);
outline-offset: 2px;
}
/* Versions and diff controls (edited posts) */
.tg-history-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
flex: 0 0 auto;
}
.tg-versions-wrap {
position: relative;
flex-shrink: 0;
}
.tg-diff-wrap {
position: relative;
flex-shrink: 0;
}
.tg-versions-btn,
.tg-diff-btn {
padding: 4px 8px;
font-size: 12px;
color: var(--tg-link-color, #2a9ef6);
background: transparent;
border: none;
border-radius: 6px;
cursor: pointer;
}
.tg-versions-btn:hover,
.tg-diff-btn:hover,
.tg-diff-btn.is-active {
background: rgba(42, 158, 246, 0.1);
}
.tg-versions-dropdown {
position: absolute;
top: 100%;
right: 0;
margin-top: 4px;
min-width: 180px;
padding: 4px 0;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 100;
display: flex;
flex-direction: column;
}
.tg-versions-dropdown[hidden] {
display: none !important;
}
.tg-versions-item {
display: block;
width: 100%;
padding: 8px 12px;
font-size: 13px;
text-align: left;
background: none;
border: none;
cursor: pointer;
color: var(--tg-text, #000);
}
.tg-versions-item:hover {
background: var(--tg-bg-secondary, #f0f2f5);
}
.tg-diff-panel {
position: absolute;
top: 100%;
right: 0;
margin-top: 4px;
width: min(280px, calc(100vw - 32px));
padding: 10px;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 100;
}
.tg-diff-panel[hidden] {
display: none !important;
}
.tg-diff-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.tg-diff-field {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.tg-diff-select-label {
font-size: 11px;
line-height: 1.2;
color: var(--tg-hint-color, #6b7280);
}
.tg-diff-select {
width: 100%;
min-width: 0;
border: 1px solid #d1d5db;
border-radius: 6px;
background: #fff;
color: var(--tg-text, #000);
font: inherit;
font-size: 12px;
line-height: 1.2;
padding: 6px 8px;
}
.tg-diff-select:focus-visible {
outline: 2px solid var(--tg-link-color, #2a9ef6);
outline-offset: 1px;
}
.tg-text--diff {
white-space: normal;
}
.tg-diff-view {
display: block;
}
.tg-diff-summary {
margin-bottom: 6px;
font-size: 12px;
font-weight: 600;
line-height: 1.25;
color: var(--tg-hint-color, #6b7280);
}
.tg-diff-content {
white-space: pre-wrap;
}
.tg-diff-ins,
.tg-diff-del {
border-radius: 3px;
padding: 0 2px;
}
.tg-diff-ins {
color: #166534;
background: #dcfce7;
text-decoration: none;
}
.tg-diff-del {
color: #991b1b;
background: #fee2e2;
text-decoration: line-through;
text-decoration-thickness: 1px;
}
.tg-diff-empty {
display: block;
color: var(--tg-hint-color, #6b7280);
font-style: italic;
}
.tg-diff-unchanged-text {
display: block;
margin-top: 4px;
}
.tg-diff-notes {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.tg-diff-note {
display: inline-flex;
align-items: center;
min-height: 20px;
padding: 2px 7px;
border-radius: 999px;
background: var(--tg-bg-secondary, #f0f2f5);
color: var(--tg-hint-color, #6b7280);
font-size: 12px;
line-height: 1.2;
}
.tg-diff-media-compare {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 8px;
margin-top: 10px;
}
.tg-diff-media-pane {
min-width: 0;
border: 1px solid #e5e7eb;
border-radius: 8px;
overflow: hidden;
background: #f8fafc;
}
.tg-diff-media-pane-label {
padding: 7px 8px 5px;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
color: var(--tg-hint-color, #6b7280);
}
.tg-diff-media-preview {
position: relative;
display: grid;
place-items: center;
width: 100%;
aspect-ratio: 1 / 1;
background: #e5e7eb;
}
.tg-diff-media-img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.tg-diff-media-fallback,
.tg-diff-media-empty {
min-height: 120px;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--tg-hint-color, #6b7280);
font-size: 12px;
line-height: 1.25;
}
.tg-diff-media-fallback[hidden] {
display: none !important;
}
.tg-diff-media-meta {
display: grid;
gap: 3px;
padding: 7px 8px 8px;
border-top: 1px solid #e5e7eb;
background: #fff;
}
.tg-diff-media-meta-row {
display: grid;
grid-template-columns: minmax(42px, auto) minmax(0, 1fr);
gap: 6px;
align-items: baseline;
font-size: 11px;
line-height: 1.25;
}
.tg-diff-media-meta-label {
color: var(--tg-hint-color, #6b7280);
}
.tg-diff-media-meta-value {
min-width: 0;
overflow-wrap: anywhere;
color: var(--tg-text, #000);
}
/* Reactions below post (Telegram-style): emoji + count, sorted by count desc */
.tg-reactions-wrap {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.tg-reactions {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.tg-reaction-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
font-size: 13px;
line-height: 1.2;
background: var(--tg-bg-secondary, #f0f2f5);
border-radius: 12px;
}
.tg-reaction-emoji {
display: inline-block;
font-size: 18px;
line-height: 1;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.tg-reaction-custom-emoji-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
line-height: 0;
}
.tg-reaction-custom-emoji {
width: 18px;
height: 18px;
object-fit: contain;
display: block;
}
.tg-reaction-custom-emoji-tgs-wrap tgs-player {
width: 18px;
height: 18px;
}
.tg-reaction-custom-emoji-failed {
font-size: 14px;
line-height: 1;
color: var(--tg-hint-color, #6b7280);
}
.tg-reaction-count {
font-weight: 600;
font-size: 12px;
color: var(--tg-hint-color, #6b7280);
}
/* -----------------------
Minor responsive polish
----------------------- */
@media (max-width: 520px) {
body { padding: 10px; }
.tg-msg { padding: 10px; }
.tg-head { align-items: flex-start; }
.tg-history-actions {
max-width: 48%;
flex-wrap: wrap;
}
.tg-diff-row {
grid-template-columns: 1fr;
}
.tg-avatar {
width: 36px;
height: 36px;
flex: 0 0 36px;
min-width: 36px;
min-height: 36px;
}
}