.tv-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--border-color)}
.tv-source-tabs{display:flex;gap:4px;padding:3px;background:var(--bg-secondary);border-radius:10px}
.tv-source-btn{border:0;background:transparent;color:var(--text-secondary);padding:7px 12px;border-radius:8px;cursor:pointer;font:inherit;font-size:13px}
.tv-source-btn.active{background:var(--accent-primary);color:#fff}
.tv-search{width:min(260px,100%)}
.tv-group-select{width:auto;min-width:170px}
.tv-count{margin-left:auto;color:var(--text-secondary);font-size:13px;white-space:nowrap}
.tv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;padding:16px}
.tv-card{display:flex;align-items:center;gap:12px;min-width:0;padding:12px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-secondary);color:var(--text-primary);text-align:left;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.tv-card:hover{transform:translateY(-1px);border-color:var(--accent-primary);background:var(--bg-hover)}
.tv-card-logo{width:52px;height:52px;flex:0 0 52px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:10px;background:#fff;color:#222}
.tv-card-logo img{width:100%;height:100%;object-fit:contain}
.tv-card-fallback{width:100%;height:100%;align-items:center;justify-content:center;font-size:20px;background:var(--bg-tertiary);color:var(--text-secondary)}
.tv-card-body{min-width:0;display:block}
.tv-card-title{display:block;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-card-meta{display:block;margin-top:4px;color:var(--text-secondary);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-player-panel:not(:empty){margin:16px 16px 0;padding:14px;border:1px solid var(--border-color);border-radius:14px;background:var(--bg-secondary);scroll-margin-top:12px}
.tv-player-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.tv-player-title{font-size:18px;font-weight:700}
.tv-player-subtitle{color:var(--text-secondary);font-size:13px;margin-top:3px}
.tv-media-player{display:block;width:100%;max-height:min(64vh,560px);border-radius:10px;background:#000}
audio.tv-media-player{min-height:54px;background:transparent}
.tv-player-error{margin-top:10px;padding:10px 12px;border:1px solid rgba(239,68,68,.35);border-radius:8px;background:rgba(239,68,68,.12);color:#ef4444;font-size:13px}
.tv-attribution{padding:0 16px 18px;color:var(--text-secondary);font-size:12px}
.tv-attribution a{color:var(--accent-primary)}
@media(max-width:640px){
.tv-toolbar{align-items:stretch}
.tv-search,.tv-group-select{width:100%}
.tv-count{margin-left:0}
.tv-grid{grid-template-columns:1fr;padding:10px}
.tv-player-panel:not(:empty){margin:10px 10px 0}
}
.tv-toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 12px 16px;
border-bottom: 1px solid var(--border-color);
}
.tv-source-tabs { display: flex; gap: 4px; padding: 3px; background: var(--bg-secondary); border-radius: 10px; }
.tv-source-btn { border: 0; background: transparent; color: var(--text-secondary); padding: 7px 12px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; }
.tv-source-btn.active { background: var(--accent-primary); color: #fff; }
.tv-search { width: min(260px, 100%); }
.tv-group-select { width: auto; min-width: 170px; }
.tv-count { margin-left: auto; color: var(--text-secondary); font-size: 13px; white-space: nowrap; }
.tv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; padding: 16px; }
.tv-card {
display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px;
border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-secondary);
color: var(--text-primary); text-align: left; cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.tv-card:hover { transform: translateY(-1px); border-color: var(--accent-primary); background: var(--bg-hover); }
.tv-card-logo { width: 52px; height: 52px; flex: 0 0 52px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 10px; background: #fff; color: #222; }
.tv-card-logo img { width: 100%; height: 100%; object-fit: contain; }
.tv-card-fallback { width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 20px; background: var(--bg-tertiary); color: var(--text-secondary); }
.tv-card-body { min-width: 0; display: block; }
.tv-card-title { display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-card-meta { display: block; margin-top: 4px; color: var(--text-secondary); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-player-panel:not(:empty) { margin: 16px 16px 0; padding: 14px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-secondary); scroll-margin-top: 12px; }
.tv-player-heading { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.tv-player-title { font-size: 18px; font-weight: 700; }
.tv-player-subtitle { color: var(--text-secondary); font-size: 13px; margin-top: 3px; }
.tv-media-player { display: block; width: 100%; max-height: min(64vh, 560px); border-radius: 10px; background: #000; }
audio.tv-media-player { min-height: 54px; background: transparent; }
.tv-player-error { margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(239,68,68,.35); border-radius: 8px; background: rgba(239,68,68,.12); color: #ef4444; font-size: 13px; }
.tv-attribution { padding: 0 16px 18px; color: var(--text-secondary); font-size: 12px; }
.tv-attribution a { color: var(--accent-primary); }
@media (max-width: 640px) {
.tv-toolbar { align-items: stretch; }
.tv-search, .tv-group-select { width: 100%; }
.tv-count { margin-left: 0; }
.tv-grid { grid-template-columns: 1fr; padding: 10px; }
.tv-player-panel:not(:empty) { margin: 10px 10px 0; }
}
#e2e-indicator {
font-size: 11px;
color: #22c55e;
display: flex;
align-items: center;
gap: 4px;
}
/* Ping indicator для звонков */
.ping-bar {
width: 4px;
height: 12px;
border-radius: 2px;
background: #22c55e;
transition: all 0.3s ease;
}
.ping-bar.active {
background: #22c55e;
}
#call-ping {
display: flex;
gap: 4px;
align-items: center;
padding: 4px 12px;
background: rgba(0,0,0,.6);
border-radius: 20px;
z-index: 10;
}
@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
@keyframes shakeX {
0% { transform:translateX(0) }
20% { transform:translateX(-6px) }
40% { transform:translateX(5px) }
60% { transform:translateX(-3px) }
80% { transform:translateX(2px) }
100% { transform:translateX(0) }
}
@keyframes slideInBottom {
from { opacity:0; transform:translateY(12px) scale(.97); filter:blur(2px) }
to { opacity:1; transform:translateY(0) scale(1); filter:blur(0) }
}
@keyframes slideOutBottom {
from { opacity:1; transform:translateY(0) scale(1); filter:blur(0) }
to { opacity:0; transform:translateY(8px) scale(.98); filter:blur(1px) }
}
@keyframes msgBubbleIn {
from { opacity:0; transform:translateY(6px) scale(.97); filter:blur(1px) }
to { opacity:1; transform:translateY(0) scale(1); filter:blur(0) }
}
@keyframes badgePop {
0% { transform:scale(0); opacity:0; filter:blur(4px) }
60% { transform:scale(1.36); opacity:1; filter:blur(0) }
100% { transform:scale(1); opacity:1; filter:blur(0) }
}
@keyframes checkDraw {
0% { stroke-dashoffset:24; opacity:0; transform:rotate(80deg) translateY(30px); filter:blur(8px) }
100% { stroke-dashoffset:0; opacity:1; transform:rotate(0) translateY(0); filter:blur(0) }
}
@keyframes slideInRight {
from { opacity:0; transform:translateX(16px); filter:blur(2px) }
to { opacity:1; transform:translateX(0); filter:blur(0) }
}
@keyframes fadeIn {
from { opacity:0 }
to { opacity:1 }
}
:root {
/* ── transitions.dev motion tokens ── */
--ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: ease-in-out;
--ease-out: ease-out;
--ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
--ease-bounce-strong: cubic-bezier(0.34, 3.85, 0.64, 1);
--dur-micro: 80ms;
--dur-quick: 150ms;
--dur-fast: 250ms;
--dur-medium: 350ms;
--dur-slow: 400ms;
--dur-very-slow: 500ms;
--dist-micro: 4px;
--dist-small: 6px;
--dist-base: 8px;
--dist-medium: 12px;
--scale-large: 0.96;
--scale-medium: 0.97;
--scale-small: 0.98;
--blur-small: 2px;
--blur-medium: 3px;
/* ── Тёплая бумажная палитра ── */
--bg-primary: #faf5ea;
--bg-secondary: #f1e6d2;
--text-primary: #2c241c;
--text-secondary: #8a7a63;
--text-inverse: #fbf6ec;
--accent-primary: #b0602f;
--accent-secondary: #8f4a2a;
--accent-hover: #c47238;
--accent-like: #c1443a;
--accent-repost: #6f8f52;
/* Ссылки — тёплый терракотовый, заметно отличается от основного текста
в обеих темах, не ломая тёплый бумажный тон. */
--link-color: #a15c30;
--link-color-hover: #8f4a2a;
/* Пузыри сообщений и фон чата — вынесены в переменные, чтобы темы чата
могли их переопределять, не ломая контраст текста. */
--bubble-in-bg: #fffaf0;
/* Жёстко закреплён вместо var(--text-primary): кастомная тема могла сделать
--text-primary светлым, и входящие сообщения становились белыми по светлому
пузырю (не читались), а исходящие оставались тёмными (текст там задан явно). */
--bubble-in-text: #2c241c;
--bubble-out-bg: #f2e2c4;
--bubble-out-text: #2c241c;
--bubble-out-link: #8f4a2a;
--bubble-out-soft: rgba(143, 74, 42, .18);
--chat-bg: var(--chatWindow);
--chat-pattern: none;
--chat-pattern-opacity: 1;
--border-color: #e2d3b8;
--border-subtle: #ecdfc7;
--volume-track-bg: rgba(44, 36, 28, .15);
--block-bg: #fffaf0;
--modal-bg: var(--block-bg);
--block-bg-secondary: #f3e7d1;
--block-hover-bg: rgba(143, 74, 42, .07);
--chatWindow: #f1e5cd;
--bg-hover: rgba(143, 74, 42, .07);
--bg-active: rgba(143, 74, 42, .12);
--tab-active-bg: #ede0c4;
--settings-tab-active-bg: var(--block-bg);
--toggle-active-bg: #2c241c;
--glass-bg: rgba(250, 245, 234, .84);
--nav-gradient: linear-gradient(to bottom, transparent 0%, rgba(241, 230, 210, .3) 30%, rgba(241, 230, 210, .85) 100%);
--btn-primary-bg: #2c241c;
--btn-primary-text: #fbf6ec;
--shadow-elevated: 0 1px 3px rgba(90, 60, 30, .08);
--poll-progress-color: rgba(44, 36, 28, .08);
--poll-selected-progress-color: #2c241c;
--poll-inverted-text: #fbf6ec;
--transition-normal: .3s ease;
--radius-sm: 6px;
--radius-md: 10px;
--radius-full: 9999px;
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-2xl: 48px;
--sidebar-width: 220px;
--sidebar-gap: 36px;
--content-max-width: 650px;
--kit-nav-glass-bg: rgba(251, 250, 247, .5);
--kit-nav-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
[data-theme=dark] {
/* ── Тёплая бумажная палитра — тёмный, «ночная бумага» ── */
--bg-primary: #22190f;
--bg-secondary: #2b2015;
--text-primary: #f0e4d0;
--text-secondary: #ab9578;
--text-inverse: #22190f;
--accent-primary: #d68a4c;
--accent-secondary: #b0602f;
--accent-hover: #e3a066;
--accent-like: #e0685a;
--accent-repost: #8fbb6b;
--link-color: #d68a4c;
--link-color-hover: #e3a066;
/* В тёмной теме исходящий пузырь — тёплый янтарный тон. */
--bubble-in-bg: #2b2015;
--bubble-in-text: #f0e4d0;
--bubble-out-bg: #4a3420;
--bubble-out-text: #f0e4d0;
--bubble-out-link: #e6b487;
--bubble-out-soft: rgba(240, 228, 208, .14);
--chat-bg: var(--chatWindow);
--chat-pattern: none;
--border-color: rgba(240, 228, 208, .10);
--border-subtle: rgba(240, 228, 208, .05);
--volume-track-bg: rgba(240, 228, 208, .2);
--block-bg: #22190f;
--modal-bg: #22190f;
--block-bg-secondary: #2b2015;
--block-hover-bg: #33261a;
--chatWindow: #180f08;
--bg-hover: rgba(240, 228, 208, .05);
--bg-active: rgba(240, 228, 208, .09);
--tab-active-bg: rgba(240, 228, 208, .07);
--settings-tab-active-bg: var(--block-bg);
--toggle-active-bg: #d68a4c;
--glass-bg: rgba(34, 25, 15, .82);
--nav-gradient: linear-gradient(to bottom, transparent 0%, rgba(24, 15, 8, .3) 30%, rgba(24, 15, 8, .85) 100%);
--btn-primary-bg: #f0e4d0;
--btn-primary-text: #22190f;
--shadow-elevated: 0 4px 16px rgba(0, 0, 0, .35);
--poll-progress-color: rgba(240, 228, 208, .1);
--poll-selected-progress-color: #f0e4d0;
--poll-inverted-text: #22190f;
--kit-nav-glass-bg: rgba(43, 32, 21, .5);
--kit-nav-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg-primary);
color: var(--text-primary);
font-family: 'Onest', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.5;
transition: background-color .2s ease, color .2s ease;
}
html { overflow-x: hidden; }
button, input, textarea, select { font: inherit; }
a { color: inherit; }
.app-shell {
display: flex;
min-height: 100vh;
width: 100%;
background: var(--bg-primary);
}
.sidebar {
width: clamp(220px, 14vw, 320px);
flex-shrink: 0;
position: sticky;
top: 0;
align-self: flex-start;
height: 100vh;
display: flex;
flex-direction: column;
padding: 20px 12px;
border-right: 1px solid var(--border-color);
z-index: 10;
overflow-y: auto;
scrollbar-width: none;
background: var(--bg-secondary);
}
.sidebar::-webkit-scrollbar { display: none; }
.sidebar-logo {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
margin-bottom: 8px;
font-family: 'Unbounded', 'Onest', sans-serif;
font-size: 22px;
font-weight: 900;
color: var(--text-primary);
}
.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sidebar-separator { height: 1px; background: var(--border-color); margin: 4px 8px; }
/* ═══════════════════════════════════════════════════════════════
"Dropdown menu morph" — ported 1:1 from Prototype 20 (Plus button
morphs into a menu) in your transitions.dev export. Same custom
properties, same durations/eases/keyframe as the original:
the panel is a literal box that grows from the trigger's closed
circle (width/height/border-radius) into the open panel size —
not a scale or clip-path fake — while its content fades+slides in
and the trigger icon fades+slides+blurs out. Open width/height are
measured from the real content by openDropdownMorph() in app.js
(the prototype hardcoded 183×172px for its skeleton demo; ours
holds real menu items so it measures instead of hardcoding).
═══════════════════════════════════════════════════════════════ */
:root {
--p20-open-dur: 350ms;
--p20-close-dur: 250ms;
--p20-ease: cubic-bezier(0.34, 1.25, 0.64, 1);
--p20-close-ease: cubic-bezier(0.22, 1, 0.36, 1);
--p20-w-closed: 44px;
--p20-h-closed: 44px;
--p20-r-closed: 44px;
--p20-r-open: 18px;
--p20-r-open-dur: 350ms;
--p20-r-open-ease: cubic-bezier(0.34, 1.25, 0.64, 1);
--p20-r-close-dur: 250ms;
--p20-r-close-ease: cubic-bezier(0.22, 1, 0.36, 1);
--p20-fade-dur: 200ms;
--p20-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
--p20-slide-shift: 16px;
--p20-slide-in-dur: 350ms;
--p20-slide-in-ease: cubic-bezier(0.22, 1, 0.36, 1);
--p20-slide-out-dur: 350ms;
--p20-slide-out-ease: cubic-bezier(0.22, 1, 0.36, 1);
--p20-scale: 0.92;
--p20-blur: 5px;
--p20-rotate: 45deg;
--p20-close-anticip: 3px;
--p20-close-anticip-dur: 700ms;
--p20-close-anticip-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.dd-morph {
position: relative;
width: var(--p20-w-closed);
height: var(--p20-h-closed);
border-radius: var(--p20-r-closed);
background: rgba(35, 35, 35, 0.72);
-webkit-backdrop-filter: blur(20px) saturate(1.6);
backdrop-filter: blur(20px) saturate(1.6);
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 8px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
overflow: hidden;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition:
width var(--p20-close-dur) var(--p20-close-ease),
height var(--p20-close-dur) var(--p20-close-ease),
border-radius var(--p20-r-close-dur) var(--p20-r-close-ease),
opacity var(--p20-close-dur) var(--p20-close-ease),
visibility 0s linear var(--p20-close-dur);
}
.dd-morph.open {
width: var(--dd-w-open, 220px);
height: var(--dd-h-open, 260px);
border-radius: var(--p20-r-open);
pointer-events: auto;
opacity: 1;
visibility: visible;
transition:
width var(--p20-open-dur) var(--p20-ease),
height var(--p20-open-dur) var(--p20-ease),
border-radius var(--p20-r-open-dur) var(--p20-r-open-ease),
opacity var(--p20-open-dur) var(--p20-ease),
visibility 0s linear 0s;
}
.dd-morph.is-closing {
opacity: 1;
visibility: visible;
animation: dd-morph-close-anticip var(--p20-close-anticip-dur) var(--p20-close-anticip-ease);
}
@keyframes dd-morph-close-anticip {
0% { transform: translate(0, 0); }
35% { transform: translate(var(--p20-close-anticip), var(--p20-close-anticip)); }
100% { transform: translate(0, 0); }
}
/* Content fades/slides/blurs in once the surface has grown; each row
staggers via --i, same as the prototype's --p20-slide-in. */
.dd-morph > * {
opacity: 0;
transform: translateX(var(--p20-slide-shift)) scale(var(--p20-scale));
filter: blur(var(--p20-blur));
transition:
opacity var(--p20-fade-dur) var(--p20-fade-ease),
transform var(--p20-slide-out-dur) var(--p20-slide-out-ease),
filter var(--p20-fade-dur) var(--p20-fade-ease);
}
.dd-morph.open > * {
opacity: 1;
transform: translateX(0) scale(1);
filter: blur(0);
transition:
opacity var(--p20-fade-dur) var(--p20-fade-ease) calc(var(--i, 0) * 28ms + 90ms),
transform var(--p20-slide-in-dur) var(--p20-slide-in-ease) calc(var(--i, 0) * 28ms + 90ms),
filter var(--p20-fade-dur) var(--p20-fade-ease) calc(var(--i, 0) * 28ms + 90ms);
}
.dd-morph.open > *:nth-child(1) { --i: 0; } .dd-morph.open > *:nth-child(2) { --i: 1; }
.dd-morph.open > *:nth-child(3) { --i: 2; } .dd-morph.open > *:nth-child(4) { --i: 3; }
.dd-morph.open > *:nth-child(5) { --i: 4; } .dd-morph.open > *:nth-child(6) { --i: 5; }
.dd-morph.open > *:nth-child(7) { --i: 6; } .dd-morph.open > *:nth-child(8) { --i: 7; }
.dd-morph.open > *:nth-child(9) { --i: 8; } .dd-morph.open > *:nth-child(10) { --i: 9; }
/* The trigger icon itself fades/slides/blurs away — the other half
of the p20-plus ↔ p20-menu cross-fade — driven by [data-dd-open]
on the trigger button that openDropdownMorph() toggles alongside
the panel's .open class. */
/* Excludes .post-more-btn: its menu detaches to and floats
next to the button rather than morphing in place, so fading the
dot icon out just makes the trigger look like it vanished instead
of staying anchored to the dropdown. */
[data-dd-open]:not(.post-more-btn) svg {
transition:
opacity var(--p20-fade-dur) var(--p20-fade-ease),
transform var(--p20-slide-out-dur) var(--p20-slide-out-ease),
filter var(--p20-fade-dur) var(--p20-fade-ease);
}
[data-dd-open="true"]:not(.post-more-btn) svg {
opacity: 0;
transform: scale(var(--p20-scale)) rotate(var(--p20-rotate));
filter: blur(var(--p20-blur));
}
@media (prefers-reduced-motion: reduce) {
.dd-morph, .dd-morph.open, .dd-morph > *, .dd-morph.open > *, [data-dd-open] svg { transition: none !important; filter: none !important; animation: none !important; }
}
/* Used for a single synchronous frame by openDropdownMorph() in app.js
to measure a menu's real content size before animating width/height
to it (the prototype hardcoded 183×172px; ours can't, so it measures). */
.dd-morph.dd-measuring {
width: max-content !important;
height: auto !important;
visibility: hidden !important;
transition: none !important;
pointer-events: none !important;
}
.sidebar-more-menu {
display: none;
flex-direction: column;
gap: 2px;
animation: slideInBottom var(--dur-medium) var(--ease-smooth-out) both;
}
.sidebar-more-menu.open { display: flex; }
.sidebar-more-btn svg { transition: transform var(--dur-fast) var(--ease-smooth-out); }
.sidebar-more-btn.open svg { transform: rotate(90deg); }
.nav-item {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
border-radius: 16px;
font-size: 15px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: background var(--dur-quick) var(--ease-smooth-out), color var(--dur-quick) var(--ease-smooth-out), transform var(--dur-quick) var(--ease-smooth-out);
user-select: none;
position: relative;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); transform: translateX(2px); }
.nav-item.active { background: var(--bg-hover); color: var(--text-primary); font-weight: 600; box-shadow: inset 0 0 0 1px var(--border-subtle); }
.nav-item svg { flex-shrink: 0; width: 22px; height: 22px; }
.nav-badge {
margin-left: auto;
min-width: 18px;
height: 18px;
padding: 0 5px;
font-size: 11px;
font-weight: 700;
line-height: 18px;
text-align: center;
color: var(--bg-primary);
background: var(--text-primary);
border-radius: 9px;
animation: badgePop var(--dur-very-slow) var(--ease-bounce) both;
}
.sidebar-user {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 16px;
cursor: pointer;
transition: background .15s, transform .15s;
margin-top: 8px;
background: var(--block-bg);
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-elevated);
}
.sidebar-user:hover { background: var(--block-hover-bg); transform: translateY(-1px); }
.sidebar-user-info { flex:1; min-width:0; }
.sidebar-user-name { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user-handle{ font-size:12px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.main-content {
flex: 1;
min-width: 0;
border-right: 1px solid var(--border-color);
}
.page-header {
position: sticky;
top: 0;
z-index: 9;
padding: 14px 20px;
background: var(--glass-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
gap: 12px;
border-radius: 0 0 20px 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
}
.page-header h1 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.right-panel {
width: clamp(290px, 18vw, 400px);
flex-shrink: 0;
padding: 20px 16px;
display: flex;
flex-direction: column;
gap: 20px;
}
body:not([data-page="feed"]) .right-panel { display: none; }
html.capacitor-app .hide-in-app { display: none !important; }
.page { display: none; }
.page.active { display: block; animation: fadeUp .25s ease; }
#page-messages.active { display: flex; flex-direction: column; }
.post-card {
padding: 10px 14px;
border: 1px solid var(--border-color);
border-radius: 14px;
background: var(--block-bg);
cursor: pointer;
display: flex;
gap: 10px;
transition: background var(--dur-quick) var(--ease-smooth-out), border-color var(--dur-quick) var(--ease-smooth-out), box-shadow var(--dur-quick) var(--ease-smooth-out), transform var(--dur-quick) var(--ease-smooth-out);
margin: 6px 12px 0;
box-shadow: var(--shadow-elevated);
}
.post-card:hover { background: var(--block-hover-bg); border-color: var(--border-color); }
.post-body { flex:1; min-width:0; }
.post-header { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.post-header .post-author { margin-right:auto; min-width:0; }
.post-author { display:flex; align-items:center; gap:6px; min-width:0; overflow:hidden; }
.post-author-name { font-size:14px; font-weight:600; white-space:nowrap; }
.post-author-handle { font-size:13px; color:var(--text-secondary); white-space:nowrap; }
.post-time { font-size:12px; color:var(--text-secondary); flex-shrink:0; }
.post-text { font-size:14px; line-height:1.4; word-break:break-word; overflow-wrap:anywhere; margin-bottom:8px; }
.post-text a { color:var(--link-color); text-decoration:none; }
.post-text a:hover { color:var(--link-color-hover); text-decoration:underline; }
.post-text strong { font-weight:700; }
.post-text em { font-style:italic; }
/* Подсветка комментария, к которому привело уведомление об ответе */
.comment-highlight {
animation: commentHighlightFade 2.2s ease-out;
}
@keyframes commentHighlightFade {
0% { background: color-mix(in srgb, var(--accent-primary) 18%, var(--block-bg)); }
100% { background: var(--block-bg); }
}
.post-translate-btn {
display:inline-flex; align-items:center; gap:5px;
background:none; border:none; cursor:pointer; padding:0;
margin:-4px 0 10px; font-size:13px; font-weight:600;
color:var(--text-secondary);
}
.post-translate-btn svg { width:14px; height:14px; }
.post-translate-btn:hover { color:var(--accent-primary); }
.post-translate-btn:disabled { opacity:.6; cursor:default; }
.post-media { margin-bottom:8px; border-radius:12px; overflow:hidden; background:var(--bg-secondary); }
/* Фото показывается сразу целиком, без обрезки — как в itdo: ширина
ограничена карточкой, высота подстраивается под реальные пропорции
картинки (object-fit:contain), а не растягивается/обрезается. */
.post-media img { width:100%; max-height:520px; object-fit:contain; display:block; }
.post-music {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; margin-bottom: 10px;
border-radius: 14px; background: var(--bg-secondary);
border: 1px solid var(--border-color, rgba(128,128,128,.15));
}
.post-music-audio { display: none; }
.post-music-play {
flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
background: var(--accent-primary); color: #fff;
}
.post-music-play svg { margin-left: 1px; }
.post-music.playing .post-music-play svg { margin-left: 0; }
.post-music-info { flex: 1; min-width: 0; }
.post-music-title {
font-size: 13px; font-weight: 600; margin-bottom: 6px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.post-music-wave { position: relative; height: 28px; cursor: pointer; }
.post-music-wave-bars {
position: absolute; inset: 0; display: flex; align-items: center;
gap: 2px;
}
.post-music-wave-bars i {
flex: 1 1 auto; min-width: 2px; max-width: 3px; border-radius: 2px;
background: var(--border-color, rgba(128,128,128,.35));
}
.post-music-wave-progress {
position: absolute; inset: 0; width: 0%; overflow: hidden;
}
.post-music-wave-progress .post-music-wave-bars i { background: var(--accent-primary); }
.post-music-time { flex-shrink: 0; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.post-actions { display:flex; align-items:center; gap:2px; margin:0 -6px; }
.post-actions:not(.comment-actions) .post-action-btn:nth-child(3) { margin-right:auto; }
.comment-actions { gap:16px; margin-top:2px; }
.comment-reply-link {
background:none; border:none; cursor:pointer; padding:0;
font-size:13px; color:var(--text-secondary); font-weight:500;
}
.comment-reply-link:hover { color:var(--accent-primary); text-decoration:underline; }
.comment-like-btn { margin-left:auto; padding:0; gap:5px; }
.comment-like-btn span { font-size:13px; }
.inline-replies {
margin-left: 40px;
padding-left: 12px;
border-left: 2px solid var(--border-color);
}
.post-reply-link { font-size:13px; padding:6px 10px; }
.inline-replies .post-card { padding-top: 10px; padding-bottom: 10px; }
.post-card-inline { cursor: default; }
/* ── Articles ─────────────────────────────────────────────────── */
.article-card {
display: flex;
flex-direction: column;
}
.article-cover {
height: 180px;
background-position: center;
background-size: cover;
border-radius: 12px;
margin-bottom: 12px;
}
.article-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 6px;
line-height: 1.3;
word-break: break-word;
}
.article-excerpt {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
margin-bottom: 8px;
word-break: break-word;
overflow-wrap: anywhere;
}
.article-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 12px;
color: var(--text-secondary);
}
.article-tag {
background: var(--bg-secondary);
padding: 2px 8px;
border-radius: 6px;
white-space: nowrap;
}
.article-full-cover { height: 220px; margin-bottom: 16px; }
.article-full-title { font-size: 24px; font-weight: 800; margin-bottom: 8px; line-height: 1.25; word-break: break-word; }
.article-full-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; color: var(--text-secondary); }
.article-full-body { font-size: 15px; line-height: 1.7; word-break: break-word; overflow-wrap: anywhere; }
.article-full-body img { max-width: 100%; height: auto; border-radius: 10px; }
/* ── Pixel Battle ─────────────────────────────────────────────── */
.pb-page { display:flex; flex-direction:column; padding:0 !important; height:100%; overflow:hidden; }
#page-pixelbattle.page.active { display:flex; }
.pb-topbar { display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid var(--border-color); flex-shrink:0; }
.pb-title { font-family:'Unbounded',sans-serif; font-size:17px; font-weight:900; }
.pb-status { margin-left:auto; font-size:13px; color:var(--text-secondary); display:flex; align-items:center; gap:10px; }
.pb-cooldown-pill {
font-size:13px; font-weight:700; padding:6px 14px; border-radius:20px;
background:var(--accent-primary); color:#fff; min-width:76px; text-align:center;
transition:background .15s;
}
.pb-cooldown-pill.ready { background:#02BE01; }
.pb-cooldown-pill.waiting { background:var(--bg-tertiary,#2a2a2a); color:var(--text-secondary); }
.pb-canvas-area {
flex:1; position:relative; overflow:hidden; min-height:0;
background:
linear-gradient(45deg, #00000010 25%, transparent 25%, transparent 75%, #00000010 75%),
linear-gradient(45deg, #00000010 25%, transparent 25%, transparent 75%, #00000010 75%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
touch-action: none;
cursor: grab;
}
.pb-canvas-area.dragging { cursor: grabbing; }
.pb-canvas-viewport {
position:absolute; top:0; left:0;
transform-origin: 0 0;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
#pb-canvas { display:block; image-rendering: pixelated; image-rendering: crisp-edges; }
.pb-zoom-controls { position:absolute; right:16px; bottom:16px; display:flex; flex-direction:column; gap:6px; z-index:4; }
.pb-zoom-btn {
width:38px; height:38px; border-radius:12px; border:1px solid var(--border-color);
background:var(--bg-secondary,#1a1a1a); color:var(--text-primary); font-size:18px;
display:flex; align-items:center; justify-content:center; cursor:pointer; font-weight:700;
}
.pb-bottombar {
flex-shrink:0; padding:14px 16px calc(14px + env(safe-area-inset-bottom));
border-top:1px solid var(--border-color);
display:flex; flex-direction:column; gap:10px; align-items:center;
}
.pb-palette { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:600px; }
.pb-swatch {
width:32px; height:32px; border-radius:9px; cursor:pointer; border:2px solid transparent;
transition:transform .1s, border-color .1s; box-shadow: inset 0 0 0 1px #00000022;
}
.pb-swatch:hover { transform:scale(1.1); }
.pb-swatch.selected { border-color:var(--text-primary); transform:scale(1.12); }
.pb-hint { font-size:12px; color:var(--text-secondary); text-align:center; }
/* Контейнеры страниц статей сами по себе без паддингов —
карточки в списке получают отступы за счёт margin у .post-card, но
"детальный" вид (открытая статья) рендерится голыми h1/div
без .post-card-обёртки и без паддинга прилипает к краям. Даём
контейнеру свой паддинг и убираем дублирующий margin у карточек
списка внутри него, чтобы не было двойных отступов. */
#articles-container {
padding: 16px 20px 24px;
}
#articles-container .post-card {
margin-left: 0;
margin-right: 0;
}
@media (max-width: 520px) {
#articles-container { padding: 12px 14px 20px; }
.article-cover { height: 130px; }
.article-full-cover { height: 160px; }
.article-full-title { font-size: 20px; }
}
.post-action-btn {
display:flex; align-items:center; gap:6px;
padding:7px 8px; border-radius:9999px;
font-size:13px; color:var(--text-secondary);
background:transparent; border:none; cursor:pointer;
transition:background var(--dur-quick) var(--ease-smooth-out), color var(--dur-quick) var(--ease-smooth-out), transform var(--dur-quick) var(--ease-smooth-out);
}
.post-action-btn:hover { background:var(--bg-hover); transform:scale(1.05); }
.post-action-btn svg { width:18px; height:18px; flex-shrink:0; transition:transform var(--dur-fast) var(--ease-smooth-out); }
.post-action-btn:active svg{ transform:scale(.8); }
.post-action-btn.liked { color:var(--text-primary); }
.post-action-btn.liked svg { animation: lyIL .4s ease; }
.comment-pinned-label {
display:inline-flex; align-items:center; gap:4px; margin:2px 0 6px;
color:var(--accent-primary); font-size:12px; font-weight:600;
}
.compose-publish-options {
display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:10px;
}
.compose-schedule-label {
display:flex; align-items:center; gap:7px; color:var(--text-secondary); font-size:12px;
}
.compose-schedule-input { width:auto; min-height:34px; padding:5px 8px; font-size:12px; }
.compose-draft-status { color:var(--text-secondary); font-size:12px; }
.compose-collaborators { width:100%; margin-top:9px; font-size:13px; }
.post-collaborators { color:var(--text-secondary); font-size:12px; margin-top:2px; }
.post-collaborators a { color:inherit; font-weight:600; text-decoration:none; }
.image-editor-modal { width:min(760px,96vw); max-width:760px; }
.image-editor-stage {
min-height:320px; max-height:62vh; display:flex; align-items:center; justify-content:center;
padding:12px; overflow:auto; background:#111;
}
#image-editor-canvas { max-width:100%; max-height:58vh; touch-action:none; cursor:crosshair; }
.image-editor-tools { display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px; border-top:1px solid var(--border-color); }
.image-editor-tools .input { width:auto; min-width:130px; padding:6px 9px; }
#image-editor-color { width:38px; height:34px; padding:2px; border:1px solid var(--border-color); border-radius:8px; background:transparent; }
.image-editor-tools .active { background:var(--accent-primary); color:var(--text-inverse); }
.search-filter-row {
display:flex; gap:8px; padding:0 16px 12px; flex-wrap:wrap;
}
.search-hashtag-card {
padding:12px 16px; border-bottom:1px solid var(--border-color); cursor:pointer;
}
.search-hashtag-card:hover { background:var(--bg-hover); }
.post-action-btn.reposted { color:var(--text-primary); }
.post-action-btn.bookmarked{ color:var(--text-primary); }
.compose-box {
padding: 14px 20px;
border: 1px solid var(--border-color);
border-radius: 20px;
background: var(--block-bg);
display: flex;
gap: 12px;
margin: 16px 16px 8px;
box-shadow: var(--shadow-elevated);
}
.compose-right { flex:1; min-width:0; }
.compose-textarea {
width:100%; border:none; background:transparent;
font-size:17px; color:var(--text-primary);
resize:none; outline:none; min-height:56px; line-height:1.5;
}
.compose-textarea::placeholder { color:var(--text-secondary); }
.compose-footer {
display:flex; align-items:center; justify-content:space-between; gap:8px;
margin-top:10px; padding-top:10px; border-top:1px solid var(--border-subtle);
}
.compose-tools { display:flex; gap:2px; min-width:0; overflow-x:auto; scrollbar-width:none; }
.compose-tools::-webkit-scrollbar { display:none; }
.compose-tool-btn {
width:36px; height:36px; display:flex; align-items:center; justify-content:center;
border-radius:50%; color:var(--text-secondary); flex-shrink:0;
background:transparent; border:none; cursor:pointer; transition:background .12s, color .12s;
}
.compose-tool-btn:hover { background:var(--bg-hover); color:var(--text-primary); }
.char-counter { font-size:13px; color:var(--text-secondary); flex-shrink:0; }
.char-counter.warn { color:#f59e0b; }
.char-counter.over { color:var(--error-color); }
.compose-footer > .btn { flex-shrink:0; white-space:nowrap; }
.tabs { display:flex; border-bottom:1px solid var(--border-color); overflow-x:auto; padding:0 8px; }
.feed-filters { display:flex; gap:8px; padding:10px 16px; border-bottom:1px solid var(--border-color); flex-wrap:wrap; align-items:center; }
.feed-filter-select { background:var(--block-bg); color:var(--text-primary); border:1px solid var(--border-color); border-radius:8px; padding:6px 10px; font-size:13px; cursor:pointer; outline:none; }
.feed-filter-select:focus { border-color:var(--accent-primary); }
.feed-filter-select option { background:var(--block-bg); color:var(--text-primary); }
.tab-btn {
flex:1; padding:14px 16px; font-size:14px; font-weight:500;
color:var(--text-secondary); background:transparent; border:none;
border-bottom:2px solid transparent; cursor:pointer;
transition:color .2s, border-color .2s, background-color .2s; white-space:nowrap;
border-radius: 12px 12px 0 0;
}
.tab-btn:hover { color:var(--text-primary); background:var(--bg-hover); }
.tab-btn.active { color:var(--text-primary); border-bottom-color:var(--accent-primary); font-weight:600; background: color-mix(in srgb, var(--accent-primary) 8%, transparent); }
.avatar {
border-radius:50%; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
font-weight:700; color:var(--text-primary); overflow:hidden; position:relative;
background:var(--bg-secondary);
}
.avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.avatar-xs { width:28px; height:28px; font-size:11px; }
.avatar-sm { width:36px; height:36px; font-size:13px; }
.avatar-md { width:44px; height:44px; font-size:15px; }
.avatar-lg { width:56px; height:56px; font-size:18px; }
.avatar-xl { width:80px; height:80px; font-size:24px; }
.avatar-online::after {
content:''; position:absolute; bottom:-1px; right:-1px;
width:14px; height:14px; background:#22c55e;
border-radius:50%; border:2px solid var(--bg-primary);
z-index: 5;
}
.notif-item {
display:flex; align-items:flex-start; gap:12px;
padding:14px 20px; border-bottom:1px solid var(--border-color);
cursor:pointer; transition:background .12s;
}
.notif-item:hover { background:var(--bg-hover); }
.notif-item.unread { background:color-mix(in srgb, var(--accent-primary) 5%, transparent); }
.notif-icon { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.notif-icon.like { background:var(--bg-secondary); color:var(--text-primary); }
.notif-icon.repost { background:var(--bg-secondary); color:var(--text-primary); }
.notif-icon.follow { background:var(--bg-secondary); color:var(--text-primary); }
.notif-icon.comment { background:var(--bg-secondary); color:var(--text-primary); }
.notif-icon.message { background:var(--bg-secondary); color:var(--text-primary); }
.notif-body { flex:1; min-width:0; }
.notif-text { font-size:14px; line-height:1.45; }
.notif-text strong { font-weight:600; }
.notif-time { font-size:12px; color:var(--text-secondary); margin-top:3px; }
/* Раньше высота считалась как calc(100vh - 57px) — вычитание осталось от старого
верхнего хедера, которого на странице сообщений уже нет. Из-за него внизу окна
(в т.ч. под панелью ввода чата) висела пустая полоса ~57px. На мобильных
собственный расчёт высоты переопределяется ниже (media ≤1100px). */
.messages-layout { display:flex; height:100vh; height:100dvh; }
.conversations-list {
width:320px; flex-shrink:0;
border-right:1px solid var(--border-color);
overflow-y:auto;
}
.conv-item {
display:flex; gap:12px; align-items:center;
padding:13px 16px; cursor:pointer;
transition:background var(--dur-quick) var(--ease-smooth-out), transform var(--dur-quick) var(--ease-smooth-out);
border-bottom:1px solid var(--border-subtle);
}
.conv-item:hover { background:var(--bg-hover); transform:translateX(2px); }
.conv-item.active { background:var(--tab-active-bg); }
.conv-info { flex:1; min-width:0; }
.conv-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:3px; }
.conv-name { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-time { font-size:12px; color:var(--text-secondary); flex-shrink:0; }
.conv-preview { font-size:13px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-unread-dot { width:8px; height:8px; background:var(--accent-primary); border-radius:50%; flex-shrink:0; }
.conv-select-checkbox { display:flex; align-items:center; flex-shrink:0; }
.conv-select-checkbox input { width:20px; height:20px; }
.conv-item-selectmode.conv-item-selected { background: var(--tab-active-bg); }
.select-toolbar {
position: sticky; top: 0; z-index: 5;
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
}
.select-toolbar-count { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.select-toolbar button[disabled] { opacity: .35; cursor: default; }
.msg-requests-banner {
display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer;
border-bottom:1px solid var(--border-subtle); transition:background .12s;
}
.msg-requests-banner:hover { background:var(--bg-hover); }
.msg-requests-avatars { display:flex; }
.msg-requests-avatars .avatar { margin-left:-8px; border:2px solid var(--bg-primary); }
.msg-requests-avatars .avatar:first-child { margin-left:0; }
.msg-requests-text { flex:1; font-size:14px; font-weight:600; color:var(--accent-primary); }
.msg-request-row {
display:flex; align-items:center; gap:12px; padding:12px 16px;
border-bottom:1px solid var(--border-subtle);
}
.chat-window {
flex:1; min-width:0; display:flex;
flex-direction:column; background:var(--chatWindow);
overflow:hidden; /* контейнер не должен резиновым образом расти от контента —
иначе внутренний скролл переставал работать и всю колонку (включая
поле ввода) утаскивало вниз вместе со страницей вместо того, чтобы
скроллились только сами сообщения */
}
.chat-header {
padding:13px 20px; border-bottom:1px solid var(--border-color);
display:flex; align-items:center; gap:12px;
background:var(--glass-bg); backdrop-filter:blur(16px);
/* ИСПРАВЛЕНО: без position:relative меню #chat-more-menu
(position:absolute; top:100%; right:0) позиционировалось от
ближайшего спозиционированного предка ВЫШЕ по дереву, а не от
самой шапки чата — из-за этого "три точки" открывали меню в
произвольном месте экрана, перекрывая контекстное меню сообщения
и ломая вёрстку чата. */
position: relative;
}
.chat-header-name { font-size:16px; font-weight:600; }
.chat-header-status { font-size:13px; color:var(--accent-repost); }
.chat-messages { flex:1; min-height:0; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:8px; }
/* ===== Chat info panel (правая панель профиля собеседника) ===== */
.chat-info-panel {
width:300px; flex-shrink:0; display:flex; flex-direction:column;
border-left:1px solid var(--border-color); background:var(--bg-primary);
overflow-y:auto;
}
.chat-info-panel-topbar { display:flex; justify-content:flex-end; padding:8px 8px 0; flex-shrink:0; }
#chat-info-toggle-btn.active { background:var(--bg-hover); color:var(--text-primary); }
.chat-info-panel-body { padding:0 16px 20px; display:flex; flex-direction:column; flex:1; }
.chat-info-banner { height:60px; margin:0 -16px 0; background:linear-gradient(135deg,var(--accent-primary),var(--bg-secondary)); flex-shrink:0; }
.chat-info-avatar-wrap { margin-top:-38px; position:relative; z-index:1; }
.chat-info-avatar { width:76px; height:76px; border:4px solid var(--bg-primary); border-radius:50%; cursor:pointer; position:relative; }
.chat-info-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.chat-info-online-dot { position:absolute; right:2px; bottom:2px; width:16px; height:16px; border-radius:50%; background:var(--accent-repost); border:3px solid var(--bg-primary); }
.chat-info-namebox { margin-top:10px; }
.chat-info-name { font-size:18px; font-weight:700; line-height:1.3; }
.chat-info-username { font-size:13px; color:var(--text-secondary); margin-top:2px; }
.chat-info-actions { display:flex; gap:8px; margin-top:14px; }
.chat-info-actions .btn { flex:1; }
.chat-info-divider { height:1px; background:var(--border-color); margin:16px -16px; }
.chat-info-section { margin-bottom:16px; }
.chat-info-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-secondary); margin-bottom:6px; }
.chat-info-bio { font-size:13px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.chat-info-joindate { font-size:13px; }
.chat-info-stats { display:flex; gap:0; }
.chat-info-stat { flex:1; text-align:center; cursor:pointer; padding:6px 4px; border-radius:8px; transition:background .12s; }
.chat-info-stat:hover { background:var(--bg-hover); }
.chat-info-stat strong { display:block; font-size:15px; font-weight:700; }
.chat-info-stat span { font-size:11px; color:var(--text-secondary); }
.chat-info-fullprofile-btn { margin-top:auto; width:100%; }
@media(max-width:1100px){
.chat-info-panel {
position:fixed; inset:0; bottom:60px; z-index:210;
width:100%; border-left:none;
padding-bottom:max(0px, env(safe-area-inset-bottom));
animation: chatSlideIn .22s ease;
}
body.chat-fullscreen .chat-info-panel { bottom:0; }
}
.msg-row { display:flex; align-items:flex-end; gap:8px; }
.msg-row.mine { flex-direction:row-reverse; }
.msg-row-call { justify-content:center; align-items:center; margin:4px 0; }
.call-msg-pill {
display:inline-flex; align-items:center; gap:6px;
padding:5px 12px; border-radius:14px;
background:var(--bg-secondary, rgba(255,255,255,0.06));
color:var(--text-secondary);
font-size:12.5px; line-height:1.2; white-space:nowrap;
}
.call-msg-pill svg { flex-shrink:0; opacity:.85; }
.call-msg-pill-missed { color:#ef4444; }
.call-msg-pill-missed svg { opacity:1; }
.role-badge {
display:inline-block; font-size:11.5px; padding:2px 7px; border-radius:8px;
background:var(--role-badge-bg, rgba(143, 74, 42, .12)); color:var(--text-secondary);
}
/* Раньше роли красились «на глаз»: золотой #f5b942 на светлом фоне почти не читался,
а #a15c30 в тёмной теме был тёмно-коричневым по тёмному фону. Теперь у каждой
роли свой контрастный цвет + фон-подложка в обеих темах. */
.role-owner { color:#8a6410; background:rgba(245,185,66,.22); }
.role-admin { color:#8a4a26; background:rgba(161,92,48,.16); }
[data-theme=dark] .role-owner { color:#f2c25f; background:rgba(245,185,66,.16); }
[data-theme=dark] .role-admin { color:#e0a36e; background:rgba(224,163,110,.14); }
/* Имена участников в групповом чате. Раньше цвет брался из var(--accent-primary),
который мог быть светлым (кастомная тема/акцент чата) — имена сливались с фоном. */
.chat-window { --chat-sender-name: #9a5a2e; --chat-sender-name-alt: #5f7d3e; }
[data-theme=dark] .chat-window { --chat-sender-name: #e3a976; --chat-sender-name-alt: #9dc47b; }
.chat-window.chat-theme-midnight,
.chat-window.chat-theme-graphite,
.chat-window.chat-theme-sunset { --chat-sender-name: #c9d2ff; --chat-sender-name-alt: #a8e6a3; }
.msg-sender-name {
font-size: 11px; font-weight: 700; margin-bottom: 2px;
color: var(--chat-sender-name);
text-shadow: 0 0 2px var(--bubble-in-bg, transparent), 0 0 4px var(--bubble-in-bg, transparent);
}
.msg-sender-name.msg-sender-name-identity { color: var(--chat-sender-name-alt); }
.group-invite-box { background:var(--bg-hover); border-radius:10px; padding:10px 12px; }
.group-members-list { display:flex; flex-direction:column; gap:2px; max-height:320px; overflow-y:auto; }
.group-member-row {
display:flex; align-items:center; gap:10px; padding:8px 4px; border-radius:8px;
}
.group-member-row:hover { background:var(--bg-hover); }
.group-member-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.group-member-name { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.group-member-actions { display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.msg-col { display:flex; flex-direction:column; max-width:68%; min-width:0; }
.msg-col-mine { align-items:flex-end; }
.bubble {
padding:10px 14px;
font-size:14px; line-height:1.45;
overflow-wrap:anywhere;
word-break:break-word;
max-width:100%;
}
.bubble strong { font-weight:700; }
.bubble em { font-style:italic; }
.bubble s { text-decoration:line-through; }
.bubble u { text-decoration:underline; }
.bubble a { color:var(--link-color); text-decoration:none; }
.bubble a:hover { text-decoration:underline; }
.bubble.out a { color:var(--bubble-out-link); }
.bubble.in { background:var(--bubble-in-bg); color:var(--bubble-in-text); border-radius:12px 12px 12px 0; box-shadow:0 1px 2px 0 rgba(74,45,20,.15); }
.bubble.out { background:var(--bubble-out-bg); color:var(--bubble-out-text); border-radius:12px 12px 0 12px; box-shadow:0 1px 2px 0 rgba(74,45,20,.15); }
.bubble { /* animation removed — was jarring on every realtime message */ }
/* ИСПРАВЛЕНО: анимация с transform на .msg-row делала строку сообщения
containing block для всех потомков с position:fixed — включая
контекстное меню сообщения (.msg-actions), которое лежит внутри
.msg-row в разметке. Из-за этого меню, которому JS выставляет
position:fixed с координатами клика, позиционировалось не от окна,
а от самой строки — и улетало в случайное место экрана. Анимация
теперь только по opacity, transform убран. */
.msg-row { animation: msgRowIn 0.2s var(--ease-smooth-out) backwards; }
/* ИСПРАВЛЕНО (меню перекрывалось следующими сообщениями): fill-mode «both»
держал opacity-анимацию активной ПОСТОЯННО, а элемент с активной анимацией
opacity — это отдельный stacking context. Поэтому z-index:9999 у меню
.msg-actions действовал только внутри своей строки, и все строки ниже
(идущие позже в DOM) рисовались поверх меню. Теперь fill-mode «backwards»:
после 0.2с анимация снимается и контекст исчезает. Страховка ниже поднимает
строку с открытым меню над соседями, даже если контекст вернётся. */
.msg-row:has(> .msg-actions[style*="display: block"]) { position: relative; z-index: 60; }
.msg-actions { z-index: 10000; }
@keyframes msgRowIn {
from { opacity:0; }
to { opacity:1; }
}
.msg-time { font-size:11px; color:var(--text-secondary); padding:2px 4px 0; flex-shrink:0; display:inline-flex; align-items:center; gap:3px; }
.msg-ticks { display:inline-flex; align-items:center; line-height:0; }
.msg-ticks svg { display:block; }
.msg-ticks.read svg { color:var(--accent-primary); }
.msg-ticks:not(.read) svg { color:var(--text-secondary); }
.conv-preview.typing, .chat-header-status.typing { color:var(--accent-primary); font-style:normal; }
.conv-preview-ticks { display:inline-flex; align-items:center; margin-right:3px; vertical-align:-1px; }
.conv-preview-draft-label { color:#e5473a; font-weight:500; }
.chat-input-area {
padding:12px 16px; border-top:none;
display:flex; align-items:flex-end; gap:8px;
flex-shrink:0; /* компонент выше (лента сообщений/панель ответа) не должен
сжимать или утаскивать поле ввода — оно держит свой размер */
position:sticky; bottom:0; z-index:5;
background:var(--glass-bg); backdrop-filter:blur(16px);
}
.chat-request-bar {
padding:12px 16px; border-top:1px solid var(--border-color);
display:flex; align-items:center; gap:10px; background:var(--block-bg);
}
.chat-request-bar-label { flex:1; font-size:13px; color:var(--text-secondary); font-weight:500; }
.chat-input {
flex:1; padding:11px 16px; border:1px solid var(--border-color);
border-radius:22px; background:var(--block-bg);
color:var(--text-primary); font-size:14px;
outline:none; resize:none; max-height:120px;
box-shadow:0 4px 16px rgba(74,45,20,.10), 0 1px 3px rgba(74,45,20,.08);
transition:border-color var(--dur-quick) var(--ease-smooth-out), box-shadow var(--dur-quick) var(--ease-smooth-out), transform var(--dur-quick) var(--ease-smooth-out);
}
.chat-input:focus { border-color:var(--accent-primary); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent-primary) 15%, transparent), 0 6px 20px rgba(74,45,20,.14); transform:translateY(-1px); }
.chat-send-btn {
width:38px; height:38px; border-radius:50%;
background:var(--accent-primary); color:#fff;
display:flex; align-items:center; justify-content:center;
border:none; cursor:pointer; flex-shrink:0;
transition:transform var(--dur-quick) var(--ease-smooth-out), opacity var(--dur-quick) var(--ease-smooth-out), box-shadow var(--dur-quick) var(--ease-smooth-out);
}
.chat-send-btn:hover { transform:scale(1.08); box-shadow:0 2px 12px color-mix(in srgb, var(--accent-primary) 35%, transparent); }
.chat-send-btn:active { transform:scale(.92); }
.chat-attach-btn, .chat-mic-btn {
width:38px; height:38px; border-radius:50%; flex-shrink:0;
background:none; border:none; color:var(--text-secondary); cursor:pointer;
display:flex; align-items:center; justify-content:center; transition:.15s;
}
.chat-attach-btn:hover, .chat-mic-btn:hover { background:var(--bg-hover); color:var(--accent-primary); }
.chat-emoji-btn {
width:38px; height:38px; border-radius:50%; flex-shrink:0;
background:none; border:none; color:var(--text-secondary); cursor:pointer;
display:flex; align-items:center; justify-content:center; transition:.15s;
}
.chat-emoji-btn:hover { background:var(--bg-hover); color:var(--accent-primary); }
.chat-emoji-btn.active { color:var(--accent-primary); }
#chat-lottie-preview {
display:none; align-items:center; gap:8px;
padding:6px 12px; border-top:1px solid var(--border-color);
background:var(--bg-secondary);
}
.emoji-picker-panel {
border-top:1px solid var(--border-color);
background:var(--bg-primary);
height:260px;
overflow-y:auto;
padding:8px;
}
.emoji-picker-grid {
display:grid;
grid-template-columns:repeat(auto-fill, minmax(64px, 1fr));
gap:4px;
}
.emoji-picker-item {
width:64px; height:64px; border-radius:8px; cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:background .15s;
padding:4px;
}
.emoji-picker-item:hover { background:var(--bg-hover); }
.emoji-picker-item .emoji-lottie {
width:56px; height:56px; pointer-events:none;
}
@media (max-width:600px) {
.emoji-picker-panel { height:200px; }
.emoji-picker-grid { grid-template-columns:repeat(auto-fill, minmax(52px, 1fr)); }
.emoji-picker-item { width:52px; height:52px; }
.emoji-picker-item .emoji-lottie { width:44px; height:44px; }
}
.bubble-lottie {
padding:4px !important;
display:flex; align-items:center; justify-content:center;
min-width:120px; min-height:120px;
}
.bubble-lottie .lottie-container {
width:120px; height:120px;
}
.chat-mic-btn.recording { color:#f4212e; }
.chat-recording-bar {
padding:10px 16px; border-top:1px solid var(--border-color);
display:flex; align-items:center; gap:10px; background:var(--block-bg);
font-size:14px; font-weight:600;
}
.chat-recording-dot {
width:10px; height:10px; border-radius:50%; background:#f4212e;
animation:recPulse 1.1s ease-in-out infinite;
}
@keyframes recPulse { 0%,100%{opacity:1} 50%{opacity:.25} }
.bubble.media {
padding:4px; background:transparent !important;
/* ВАЖНО: общее правило .bubble в chat-skin-fresh.css вешает box-shadow
на все .bubble (в т.ч. .bubble.media), но у медиа-пузыря фон
прозрачный, а border-radius контейнера (12px, со срезанным уголком
под "хвостик") не совпадает с border-radius самой картинки/видео
(16px, см. .bubble-media-img ниже) — визуально это давало странную
вытянутую тень-рамку позади фото, не повторяющую его форму.
Тень медиа-сообщению не нужна вообще — её и так видно по самой
картинке. */
box-shadow: none !important;
}
.bubble-media-img, .bubble-media-video {
max-width:min(280px,100%); max-height:320px; border-radius:16px; display:block; object-fit:cover;
}
.voice-msg { display:flex; align-items:center; gap:10px; min-width:0; width:min(200px,56vw); padding:4px 2px; }
.voice-msg-btn {
width:34px; height:34px; border-radius:50%; flex-shrink:0; border:none; cursor:pointer;
display:flex; align-items:center; justify-content:center;
}
.bubble.out .voice-msg-btn { background:var(--bubble-out-soft); color:var(--bubble-out-text); }
.bubble.in .voice-msg-btn { background:var(--accent-primary); color:var(--text-inverse); }
.voice-msg-btn svg { width:14px; height:14px; }
.voice-msg-progress {
flex:1; height:4px; border-radius:2px; cursor:pointer; position:relative;
}
.bubble.out .voice-msg-progress { background:var(--bubble-out-soft); }
.bubble.in .voice-msg-progress { background:var(--border-color); }
.voice-msg-progress-fill { height:100%; border-radius:2px; width:0%; }
.bubble.out .voice-msg-progress-fill { background:var(--bubble-out-text); }
.bubble.in .voice-msg-progress-fill { background:var(--accent-primary); }
.voice-msg-time { font-size:12px; flex-shrink:0; opacity:.85; min-width:32px; }
.audio-msg-title { font-size:12px; opacity:.85; margin-top:4px; padding:0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.post-voice-msg {
display:flex; align-items:center; gap:10px; padding:10px 12px; margin-top:8px;
background:var(--bg-secondary); border-radius:16px; max-width:280px;
}
.post-voice-msg .voice-msg-btn { background:var(--accent-primary); color:#fff; }
.post-voice-msg .voice-msg-progress { background:var(--border-color); }
.post-voice-msg .voice-msg-progress-fill { background:var(--accent-primary); }
.post-voice-msg .voice-msg-time { color:var(--text-secondary); }
.chat-empty {
flex:1; display:flex; flex-direction:column;
align-items:center; justify-content:center;
gap:10px; color:var(--text-secondary);
}
.chat-empty svg { opacity:.25; }
.chat-empty p { font-size:15px; }
/* ── Search input: clear with per-word dissolve ─────────────────
Four stacked layers inside .p13-search:
1. real (catches typing, z=2)
2. .p13-search__text-mirror (visible glyphs, fly down on clear)
3. .p13-search__fake-placeholder (falls in from above on clear)
4. .p13-search__clear-glow (per-word streak overlay, z=3)
Ported from the provided prototype; timings/vars kept local so it
doesn't depend on the design-token file the prototype shipped with. */
.p13-search {
--p13-clear-dur: 1000ms;
--p13-text-dur: 400ms;
--p13-fly: 12px;
--p13-blur: 2px;
--p13-ease: cubic-bezier(0.22, 1, 0.36, 1);
--p13-glow-delay: 50ms;
--p13-glow-peak-at: 0.15;
--p13-glow-opacity: 0.42;
--p13-glow-spread: 1.5;
position: relative;
width: 100%;
height: 40px;
border-radius: 22px;
background: var(--bg-secondary);
box-shadow: inset 0 0 0 1px transparent;
overflow: hidden;
transition: background-color .2s ease, box-shadow .2s ease;
}
.p13-search:focus-within { background: var(--block-bg-secondary); box-shadow: inset 0 0 0 1px var(--accent-primary); }
[data-theme=dark] .p13-search { --p13-glow-opacity: 0.85; }
/* Compact variant — used wherever the search bar sits in a narrow
sidebar (conversations list, admin tables). */
.p13-search--sm { height:36px; border-radius:18px; }
.p13-search--sm .p13-search__icon { left:12px; width:15px; height:15px; }
.p13-search--sm .p13-search__input,
.p13-search--sm .p13-search__text-mirror,
.p13-search--sm .p13-search__fake-placeholder { padding-left:34px; font-size:14px; }
.p13-search--sm .p13-search__clear { right:8px; width:16px; height:16px; }
.p13-search__icon {
position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
width: 17px; height: 17px; color: var(--text-secondary); pointer-events: none; z-index: 1;
}
.p13-search__icon svg { display: block; width: 100%; height: 100%; }
.p13-search__input {
position: relative; width: 100%; height: 100%;
padding: 0 40px 0 40px; border: 0; background: transparent;
font-family: inherit; font-size: 15px; color: var(--text-primary);
outline: none; caret-color: var(--text-primary); z-index: 2;
}
.p13-search__input::placeholder { color: transparent; }
.p13-search.has-value .p13-search__input { -webkit-text-fill-color: transparent; }
.p13-search__text-mirror,
.p13-search__fake-placeholder {
position: absolute; top: 0; left: 0; right: 0; height: 100%;
padding: 0 40px 0 40px; display: flex; align-items: center;
font-family: inherit; font-size: 15px; pointer-events: none;
white-space: nowrap; overflow: hidden; z-index: 2;
}
.p13-search__text-mirror { opacity: 0; color: var(--text-primary); }
.p13-search.has-value .p13-search__text-mirror,
.p13-search.is-clearing .p13-search__text-mirror { opacity: 1; }
.p13-search.is-clearing .p13-search__input { -webkit-text-fill-color: transparent !important; }
.p13-search__fake-placeholder { color: var(--text-secondary); }
.p13-search.has-value .p13-search__fake-placeholder { opacity: 0; }
.p13-search__clear-glow {
position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 3;
mix-blend-mode: multiply;
}
[data-theme=dark] .p13-search__clear-glow { mix-blend-mode: screen; }
.p13-search__clear {
position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
width: 20px; height: 20px; padding: 0; border: 0; background: transparent;
cursor: pointer; z-index: 4; opacity: 0; pointer-events: none;
transition: opacity 150ms ease, color 120ms ease;
display: grid; place-items: center; color: var(--text-secondary);
}
.p13-search__clear:hover { color: var(--text-primary); }
.p13-search.has-value .p13-search__clear { opacity: 1; pointer-events: auto; }
.p13-search__clear svg { display: block; width: 100%; height: 100%; }
.p13-search__clear:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: 50%; }
.profile-banner { width:100%; height:180px; object-fit:cover; background:var(--bg-secondary); }
.profile-info-area { padding:0 20px 20px; }
.profile-avatar-wrap { margin-top:-44px; margin-bottom:10px; }
.profile-avatar-wrap .avatar { border:4px solid var(--bg-primary); }
.profile-header-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.profile-actions { display:flex; align-items:center; gap:8px; }
.profile-actions .btn-white { background:#fff; color:#111; }
.profile-actions .btn-white:not(:disabled):hover { background:#f0f0f0; }
@media(max-width:520px){
.profile-banner { height:120px; }
.profile-avatar-wrap { margin-top:-32px; }
.profile-avatar-wrap .avatar.avatar-xl { width:64px; height:64px; font-size:20px; border-width:3px; }
.profile-header-row { flex-wrap:wrap; }
}
.verify-request-btn {
width:32px; height:32px; border-radius:50%; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
background:var(--bg-secondary); border:none; cursor:pointer;
transition:background .15s;
}
.verify-request-btn:hover { background:var(--bg-hover); }
.verify-request-btn svg { width:19px; height:19px; }
.profile-actions .post-more-btn { width:32px; height:32px; }
.profile-name { font-size:20px; font-weight:700; }
.profile-handle { font-size:15px; color:var(--text-secondary); margin-bottom:8px; }
.profile-bio { font-size:15px; margin-bottom:10px; line-height:1.5; }
.profile-stats { display:flex; gap:20px; }
.profile-stat { display:flex; gap:5px; font-size:14px; cursor:pointer; }
.profile-stat strong { font-weight:700; }
.profile-stat span { color:var(--text-secondary); }
/* ═══════════════════════════════════════════════════════════════
transitions.dev P7 — Modal open/close
Open → scale(--scale-large) → scale(1) over --dur-fast (250ms)
Close → scale(1) → scale(--scale-large) over --dur-quick (150ms)
Closing is a distinct .is-closing state (rather than reusing .open's
reverse transition) so it can run the faster close timing.
═══════════════════════════════════════════════════════════════ */
.modal-overlay {
position:fixed; inset:0; background:rgba(0,0,0,.5);
display:flex; align-items:center; justify-content:center;
z-index:1000; backdrop-filter:blur(4px);
opacity:0; visibility:hidden;
transition:opacity var(--dur-fast) var(--ease-smooth-out), visibility var(--dur-fast) var(--ease-smooth-out);
}
.modal-overlay.open { opacity:1; visibility:visible; }
.modal-overlay.is-closing {
opacity:0; visibility:visible;
transition:opacity var(--dur-quick) var(--ease-smooth-out), visibility var(--dur-quick) var(--ease-smooth-out);
}
.modal {
background:var(--modal-bg); border-radius:22px;
width:500px; max-width:calc(100vw - 32px);
max-height:calc(100vh - 48px); overflow-y:auto;
box-shadow:0 8px 32px rgba(0,0,0,.12);
transform:scale(var(--scale-large));
transition:transform var(--dur-fast) var(--ease-smooth-out), opacity var(--dur-fast) var(--ease-smooth-out);
border:1px solid var(--border-color);
opacity:0;
will-change:transform, opacity;
}
.modal-overlay.open .modal { transform:scale(1); opacity:1; }
.modal-overlay.is-closing .modal {
transform:scale(var(--scale-large)); opacity:0;
transition:transform var(--dur-quick) var(--ease-smooth-out), opacity var(--dur-quick) var(--ease-smooth-out);
}
@media (prefers-reduced-motion: reduce) {
.modal-overlay, .modal { transition:none !important; }
}
.modal-header {
display:flex; align-items:center; justify-content:space-between;
padding:16px 20px; border-bottom:1px solid var(--border-color);
}
.modal-title { font-size:17px; font-weight:700; }
.modal-close {
width:32px; height:32px; border-radius:50%;
background:var(--bg-secondary); display:flex;
align-items:center; justify-content:center;
border:none; cursor:pointer; color:var(--text-secondary);
transition:background .12s, color .12s;
}
.modal-close:hover { background:var(--bg-hover); color:var(--text-primary); }
.modal-back-btn {
width:32px; height:32px; border-radius:50%; flex-shrink:0;
background:none; border:none; cursor:pointer; color:var(--text-primary);
display:flex; align-items:center; justify-content:center; margin-right:4px;
transition:background .12s;
}
.modal-back-btn:hover { background:var(--bg-hover); }
.modal-back-btn svg { width:20px; height:20px; }
.modal-body { padding:20px; }
.announcement-overlay {
position:fixed; inset:0; background:rgba(0,0,0,.7);
display:flex; align-items:center; justify-content:center;
z-index:10000; padding:16px; backdrop-filter:blur(4px);
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .2s, visibility .2s;
}
.announcement-overlay.visible { opacity:1; visibility:visible; pointer-events:auto; }
.announcement-modal {
position:relative; display:flex; flex-direction:column;
background:var(--modal-bg); border:1px solid var(--border-color);
border-radius:20px; width:460px; max-width:100%;
max-height:calc(100vh - 32px); overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,.5);
transform:scale(.95) translateY(8px); transition:transform .2s;
}
.announcement-overlay.visible .announcement-modal { transform:scale(1) translateY(0); }
.announcement-close {
position:absolute; top:12px; right:12px; z-index:1;
width:30px; height:30px; border-radius:50%;
background:var(--bg-secondary); color:var(--text-secondary);
border:none; cursor:pointer; font-size:13px; line-height:1;
display:flex; align-items:center; justify-content:center;
transition:background .12s, color .12s;
}
.announcement-close:hover { background:var(--bg-hover); color:var(--text-primary); }
.announcement-body {
padding:28px 24px 8px; overflow-y:auto; text-align:center;
}
.announcement-emoji { font-size:26px; margin-bottom:8px; }
.announcement-title {
font-size:18px; font-weight:700; color:var(--text-primary);
margin-bottom:12px; word-break:break-word;
}
.announcement-media {
border-radius:14px; overflow:hidden; margin-bottom:14px;
background:var(--bg-secondary);
}
.announcement-media img { display:block; width:100%; max-height:260px; object-fit:cover; }
.announcement-text {
font-size:15px; line-height:1.65; color:var(--text-secondary);
text-align:left; word-break:break-word; margin-bottom:8px;
}
.announcement-text a { color:var(--accent-primary); text-decoration:none; }
.announcement-text a:hover { text-decoration:underline; }
.announcement-footer { padding:16px 24px 24px; flex-shrink:0; }
@media (max-width: 480px) {
.announcement-modal { border-radius:18px; }
.announcement-body { padding:24px 18px 6px; }
.announcement-footer { padding:14px 18px 20px; }
}
.comments-sort-row { padding:10px 16px; border-bottom:1px solid var(--border-color); }
.comments-sort-btn {
display:flex; align-items:center; gap:5px; background:none; border:none;
cursor:pointer; color:var(--text-primary); font-weight:700; font-size:14px; padding:4px 0;
}
.toast-container {
position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
z-index:2000; display:flex; flex-direction:column;
gap:8px; pointer-events:none;
}
.toast {
display:flex; align-items:center; gap:10px;
padding:11px 18px; background:var(--block-bg);
border-radius:14px; box-shadow:0 8px 32px rgba(0,0,0,.25);
font-size:14px; pointer-events:auto;
animation: slideInBottom var(--dur-medium) var(--ease-smooth-out) both;
white-space:nowrap;
}
.toast.success { background:#22c55e; color:#fff; }
.toast.error { background:#ef4444; color:#fff; }
.widget { background:var(--block-bg); border-radius:20px; padding:16px; }
.widget-title { font-size:17px; font-weight:700; margin-bottom:14px; }
.user-suggest { display:flex; align-items:center; gap:10px; padding:8px 0; }
.user-suggest-info { flex:1; min-width:0; }
.user-suggest-name { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-suggest-handle { font-size:13px; color:var(--text-secondary); }
.trend-item { padding:10px 0; border-bottom:1px solid var(--border-subtle); cursor:pointer; }
.trend-item:last-child { border-bottom:none; }
.trend-item:hover { opacity:.8; }
.trend-category { font-size:12px; color:var(--text-secondary); }
.trend-tag { font-size:15px; font-weight:700; margin:2px 0; }
.trend-count { font-size:13px; color:var(--text-secondary); }
.settings-layout { display:flex; min-height:calc(100vh - 57px); }
.settings-nav { width:200px; flex-shrink:0; padding:16px 12px; border-right:1px solid var(--border-color); }
.settings-nav-item {
display:flex; align-items:center; gap:10px;
padding:10px 12px; border-radius:12px;
font-size:14px; font-weight:500; color:var(--text-secondary);
cursor:pointer; transition:background .12s, color .12s; margin-bottom:2px;
}
.settings-nav-item:hover { background:var(--bg-hover); color:var(--text-primary); }
.settings-nav-item.active { background:var(--tab-active-bg); color:var(--text-primary); }
.settings-nav-subitem {
padding:8px 12px 8px 37px; border-radius:12px;
font-size:13px; font-weight:500; color:var(--text-secondary);
cursor:pointer; transition:background .12s, color .12s; margin-bottom:2px;
}
.settings-nav-subitem:hover { background:var(--bg-hover); color:var(--text-primary); }
.account-info-row {
display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:16px;
padding:14px 0; border-bottom:1px solid var(--border-subtle);
}
.account-info-row:last-child { border-bottom:none; }
.account-info-label { font-size:13px; color:var(--text-secondary); }
.account-info-value { font-size:15px; font-weight:500; display:flex; align-items:center; gap:10px; }
.link-btn {
background:none; border:none; padding:0; margin:0;
color:var(--link-color, #5b7a9e); font-size:13px; font-weight:500; cursor:pointer;
}
.link-btn:hover { text-decoration:underline; }
.chevron-icon { color:var(--text-secondary); display:flex; align-items:center; justify-content:flex-end; }
.account-info-row:hover .chevron-icon { color:var(--text-primary); }
.settings-content { flex:1; min-width:0; padding:24px; max-width:600px; }
.settings-section { margin-bottom:28px; }
.settings-section-title { font-size:16px; font-weight:700; margin-bottom:16px; }
.settings-row {
display:flex; align-items:center; justify-content:space-between;
padding:13px 0; border-bottom:1px solid var(--border-subtle); gap:16px;
}
.settings-row:last-child { border-bottom:none; }
.settings-label { font-size:15px; font-weight:500; }
.settings-desc { font-size:13px; color:var(--text-secondary); margin-top:2px; }
/* ═══════════════════════════════════════════════════════════════
transitions.dev P27 — Toggle on/off with double-bounce thumb
(geometry/animation ported 1:1 from the UI kit's .p27-switch)
═══════════════════════════════════════════════════════════════ */
.toggle {
--toggle-dur: 350ms;
--toggle-travel: 14.66px;
--toggle-ov1: 1px;
--toggle-ov2: 0px;
--toggle-ease: cubic-bezier(0.34, 1.35, 0.64, 1);
position:relative;
width:44px; height:22px;
border:none; padding:0; cursor:pointer;
border-radius:122px;
background:var(--bg-secondary);
-webkit-tap-highlight-color:transparent;
transition:background .25s var(--ease-smooth-out);
flex-shrink:0;
}
.toggle::after {
content:'';
position:absolute;
left:3.67px; top:3.67px;
width:22px; height:14.67px;
border-radius:122px;
background:#fff;
box-shadow:0 2px 6px rgba(0,0,0,.05), 0 4px 42px rgba(0,0,0,.06);
translate:0 0;
will-change:translate;
}
.toggle.on { background:var(--toggle-active-bg); }
.toggle.on::after { translate:var(--toggle-travel) 0; }
/* .is-init is added by JS on first interaction so the "off" keyframes
don't play on page load. */
.toggle.is-init.on::after {
animation:toggle-bounce-on var(--toggle-dur) var(--toggle-ease) both;
}
.toggle.is-init:not(.on)::after {
animation:toggle-bounce-off var(--toggle-dur) var(--toggle-ease) both;
}
@keyframes toggle-bounce-on {
0% { translate:0 0; }
55% { translate:calc(var(--toggle-travel) + var(--toggle-ov1)) 0; }
80% { translate:calc(var(--toggle-travel) - var(--toggle-ov2)) 0; }
100% { translate:var(--toggle-travel) 0; }
}
@keyframes toggle-bounce-off {
0% { translate:var(--toggle-travel) 0; }
55% { translate:calc(0px - var(--toggle-ov1)) 0; }
80% { translate:var(--toggle-ov2) 0; }
100% { translate:0 0; }
}
@media (prefers-reduced-motion: reduce) {
.toggle::after { animation:none !important; }
}
/* ═══════════════════════════════════════════════════════════════
transitions.dev "Image open tilt" (Pro) — lightbox open/close
═══════════════════════════════════════════════════════════════ */
.lightbox-overlay {
position:fixed; inset:0; z-index:9999;
background:rgba(0,0,0,0.92);
display:flex; align-items:center; justify-content:center;
cursor:zoom-out;
perspective:1000px;
opacity:0;
transition:opacity 260ms var(--ease-smooth-out);
}
.lightbox-overlay.open,
.lightbox-overlay.is-closing { opacity:1; }
.lightbox-overlay.is-closing { opacity:0; }
.lightbox-img {
max-width:94vw; max-height:90vh;
object-fit:contain;
box-shadow:0 8px 48px rgba(0,0,0,0.6);
border-radius:20px;
transform-origin:center;
transform:
rotateX(var(--lb-rx-from, 8deg))
rotateY(var(--lb-ry-from, -10deg))
translateZ(-70px)
scale(0.86);
opacity:0;
will-change:transform, opacity, border-radius;
}
.lightbox-overlay.open .lightbox-img {
border-radius:8px;
animation:lb-tilt-open 450ms cubic-bezier(0.22,1,0.36,1) both;
}
.lightbox-overlay.is-closing .lightbox-img {
animation:lb-tilt-close 260ms cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes lb-tilt-open {
0% {
opacity:0;
transform:
rotateX(var(--lb-rx-from, 8deg))
rotateY(var(--lb-ry-from, -10deg))
translateZ(-70px)
scale(0.86);
}
45% {
opacity:1;
transform:
rotateX(calc(var(--lb-rx-from, 8deg) * 0.4))
rotateY(calc(var(--lb-ry-from, -10deg) * 0.4))
translateZ(-28px)
scale(0.97);
}
100% {
opacity:1;
transform:rotateX(0deg) rotateY(0deg) translateZ(0) scale(1);
}
}
@keyframes lb-tilt-close {
0% { opacity:1; transform:rotateX(0deg) rotateY(0deg) translateZ(0) scale(1); }
100% {
opacity:0;
transform:
rotateX(calc(var(--lb-rx-from, 8deg) * -0.45))
rotateY(calc(var(--lb-ry-from, -10deg) * -0.45))
translateZ(-28px)
scale(0.9);
}
}
/* Close button — fades/de-blurs in only once the image has mostly
landed, same delayed-reveal pattern as the kit's .pv50 svg. */
.lightbox-close {
position:absolute; top:16px; right:20px;
width:40px; height:40px;
border:none; border-radius:50%;
background:rgba(255,255,255,0.15);
color:#fff;
display:grid; place-items:center;
cursor:pointer;
backdrop-filter:blur(8px);
-webkit-tap-highlight-color:transparent;
opacity:0;
filter:blur(2px);
transform:scale(0.7);
transition:opacity 180ms ease, filter 180ms ease, transform 180ms ease, background-color 120ms ease;
}
.lightbox-close:hover { background:rgba(255,255,255,0.25); }
.lightbox-overlay.open .lightbox-close {
opacity:1;
filter:blur(0);
transform:scale(1);
transition-delay:220ms;
}
@media (prefers-reduced-motion: reduce) {
.lightbox-img, .lightbox-close { animation:none !important; transition:none !important; }
.lightbox-overlay.open .lightbox-img { opacity:1; transform:none; }
.lightbox-overlay.open .lightbox-close { opacity:1; filter:none; transform:none; }
}
.input {
width:100%; padding:10px 14px; border:1px solid var(--border-color);
border-radius:12px; background:transparent; color:var(--text-primary);
font-size:15px; outline:none; transition:border-color .2s;
}
.input:focus { border-color:var(--accent-primary); }
.input::placeholder { color:var(--text-secondary); }
.input-label { font-size:14px; font-weight:500; margin-bottom:6px; display:block; color:var(--text-secondary); }
.btn {
display:inline-flex; align-items:center; justify-content:center;
gap:8px; border:none; cursor:pointer; font-weight:500;
transition:opacity .15s, background .15s;
flex-shrink:0; white-space:nowrap;
}
.btn:disabled { opacity:.45; cursor:not-allowed; pointer-events:none; }
.btn:not(:disabled):active { opacity:.75; }
.btn-primary { background:var(--btn-primary-bg); color:var(--btn-primary-text); }
.btn-secondary{ background:var(--bg-secondary); color:var(--text-primary); }
.btn-accent { background:var(--accent-gradient, var(--btn-primary-bg)); color:var(--btn-primary-text); }
.btn-danger { background:var(--error-color,#ef4444); color:#fff; }
.btn-ghost { background:transparent; color:var(--text-primary); }
.btn-ghost:not(:disabled):hover { background:var(--bg-hover); }
.btn-sm { height:32px; padding:0 14px; font-size:13px; border-radius:16px; }
.btn-md { height:40px; padding:0 20px; font-size:14px; border-radius:20px; }
.btn-lg { height:48px; padding:0 28px; font-size:15px; border-radius:24px; }
.btn-full{ width:100%; }
.skeleton {
background:linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-hover) 50%, var(--bg-secondary) 75%);
background-size:200% 100%;
animation:pulse 1.5s infinite;
border-radius:6px;
}
.mobile-nav {
display:none; position:fixed; bottom:0; left:0; right:0; z-index:90;
padding:16px 16px max(16px, env(safe-area-inset-bottom));
background:var(--nav-gradient);
pointer-events:none;
flex-direction:column; align-items:flex-end; gap:12px;
transform:translateY(0); transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.mobile-nav.hidden { transform:translateY(100%); }
.fab {
position:relative; order:-1; width:64px; height:64px; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
background:var(--kit-nav-glass-bg);
backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
border:none; border-radius:32px; cursor:pointer; pointer-events:auto;
color:var(--text-primary); box-shadow:var(--kit-nav-shadow);
font-size:24px; transition:transform .15s;
}
.fab::before {
content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
background:linear-gradient(to bottom, rgba(255,255,255,.25), rgba(255,255,255,.05));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.fab:active { transform:scale(0.95); }
.mobile-nav-fabs {
order:-1; align-self:stretch; width:100%;
display:flex; align-items:flex-end; justify-content:flex-end;
pointer-events:none;
}
/* "+" and "Ещё" stacked in their own column, right-aligned, sitting
directly above the nav bar — "Ещё" is the smaller pill right under
"+", at roughly the nav bar's own height. */
.mobile-nav-fab-stack {
display:flex; flex-direction:column; align-items:center; gap:10px;
pointer-events:none;
}
.mobile-nav-fab-stack .fab { pointer-events:auto; }
.fab-more {
width:44px; height:44px; font-size:16px;
color:var(--text-secondary);
}
.fab-more svg { width:19px; height:19px; }
.fab-more.active,
.fab-more[data-dd-open="true"] { color:var(--text-primary); }
.mobile-nav-glass {
position:relative; width:100%; height:64px; display:flex; align-items:center;
background:var(--kit-nav-glass-bg);
backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
border-radius:32px; padding:6px; box-shadow:var(--kit-nav-shadow);
}
.mobile-nav-glass::before {
content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
background:linear-gradient(to bottom, rgba(255,255,255,.25), rgba(255,255,255,.05));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.mobile-nav-inner {
display:flex; align-items:center; width:100%; justify-content:space-around; pointer-events:auto;
}
.mobile-nav-btn {
display:flex; flex-direction:column; align-items:center; gap:4px;
padding:8px 0; background:transparent; border:none; cursor:pointer;
color:var(--text-secondary); transition:color .2s ease;
position:relative; flex:1; min-width:0;
}
.mobile-nav-btn.active { color:var(--text-primary); }
.mobile-nav-btn svg { width:21px; height:21px; }
.mobile-nav-btn span { font-size:10px; font-weight:500; }
.mobile-more-menu {
display:none; position:fixed; right:10px; z-index:110;
bottom:calc(96px + max(14px, env(safe-area-inset-bottom)));
background:var(--block-bg); border:1px solid var(--border-color); border-radius:16px;
box-shadow:0 8px 24px rgba(31,30,28,.14), inset 0 1px 0 rgba(255,255,255,.4);
min-width:200px; padding:6px;
animation: slideInBottom var(--dur-medium) var(--ease-smooth-out) both;
}
.mobile-more-menu.open { display:block; }
.mobile-more-item {
display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:11px;
cursor:pointer; font-size:14px; font-weight:500; color:var(--text-primary);
}
.mobile-more-item:hover { background:var(--bg-hover); }
.mobile-more-item svg { width:19px; height:19px; flex-shrink:0; }
.call-glass-bar {
position:relative; display:flex; align-items:center; justify-content:center;
gap:20px; padding:14px 22px;
background:rgba(40,40,44,.55);
backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
border-radius:40px; box-shadow:0 8px 28px rgba(0,0,0,.35);
}
.call-glass-bar::before {
content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
background:linear-gradient(to bottom, rgba(255,255,255,.28), rgba(255,255,255,.06));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.call-btn {
position:relative; flex-shrink:0; border:none; cursor:pointer;
display:flex; align-items:center; justify-content:center;
width:64px; height:64px; border-radius:50%; color:#fff;
background:rgba(255,255,255,.14);
transition:transform .15s ease, background .15s ease;
}
.call-btn:active { transform:scale(.92); }
.call-btn svg { width:26px; height:26px; }
.call-btn.on { background:rgba(255,255,255,.32); }
.call-btn-accept { background:#22c55e; width:72px; height:72px; }
.call-btn-decline,
.call-btn-end { background:#ef4444; width:72px; height:72px; }
.call-btn-accept svg,
.call-btn-decline svg,
.call-btn-end svg { width:28px; height:28px; }
.call-btn-accept:active,
.call-btn-decline:active,
.call-btn-end:active { transform:scale(.92); }
/* ── Анимация пульсации аватара во время исходящего/входящего звонка ── */
/* Показывает, что вызов ещё не соединён — даёт визуальный отклик, что
* статус "Вызов..." — это не зависший экран, а активное ожидание. */
.call-peer-avatar-wrap { position:relative; }
.call-peer-avatar-wrap .call-peer-avatar { position:relative; z-index:1; }
.call-avatar-pulse {
position:absolute; inset:0; border-radius:50%;
pointer-events:none; z-index:0;
background:rgba(255,255,255,.18);
opacity:0;
}
#active-call-screen:not(.video-active):not(.call-min-accepted) .call-peer-avatar-wrap .call-avatar-pulse {
animation:call-avatar-pulse 1.8s ease-out infinite;
}
@keyframes call-avatar-pulse {
0% { transform:scale(1); opacity:.6; }
70% { transform:scale(1.6); opacity:0; }
100% { transform:scale(1.6); opacity:0; }
}
/* ── Плавное появление/скрытие экрана звонка ── */
#active-call-screen.call-screen-enter {
animation: call-screen-fade-in .22s ease-out;
}
#active-call-screen.call-screen-exit {
animation: call-screen-fade-out .18s ease-in forwards;
}
@keyframes call-screen-fade-in {
from { opacity:0; transform:scale(1.04); }
to { opacity:1; transform:scale(1); }
}
@keyframes call-screen-fade-out {
from { opacity:1; transform:scale(1); }
to { opacity:0; transform:scale(.98); }
}
/* ── Индикатор качества соединения ── */
.call-quality-indicator {
position:absolute; top:max(14px, env(safe-area-inset-top));
right:max(14px, env(safe-area-inset-right));
z-index:3; width:8px; height:8px; border-radius:50%;
background:transparent; box-shadow:none;
transition:background .25s ease, box-shadow .25s ease;
}
.call-quality-indicator.quality-good {
background:#22c55e; box-shadow:0 0 6px rgba(34,197,94,.8);
}
.call-quality-indicator.quality-medium {
background:#f59e0b; box-shadow:0 0 6px rgba(245,158,11,.8);
animation:call-quality-blink 1.4s ease infinite;
}
.call-quality-indicator.quality-poor {
background:#ef4444; box-shadow:0 0 6px rgba(239,68,68,.9);
animation:call-quality-blink .8s ease infinite;
}
@keyframes call-quality-blink {
0%,100% { opacity:1; }
50% { opacity:.35; }
}
.call-local-video {
width:150px; height:200px; border-radius:16px; object-fit:cover;
position:absolute; bottom:150px; right:18px;
box-shadow:0 4px 20px rgba(0,0,0,.6); border:2px solid rgba(255,255,255,.12);
transition:transform .15s ease, width .2s ease, height .2s ease;
z-index:2; touch-action:none; cursor:grab;
}
.call-local-video:active { cursor:grabbing; }
@media(max-width:520px){
.call-local-video { width:110px; height:148px; bottom:132px; right:12px; }
}
.call-peer-avatar { width:112px; height:112px; }
.call-peer-name { font-weight:700; font-size:22px; }
.call-status-text { color:#c9c9cf; font-size:15px; }
@media(max-width:520px){
.call-glass-bar { gap:14px; padding:12px 14px; border-radius:36px; }
.call-btn { width:54px; height:54px; }
.call-btn svg { width:22px; height:22px; }
.call-btn-accept, .call-btn-decline, .call-btn-end { width:62px; height:62px; }
.call-btn-accept svg, .call-btn-decline svg, .call-btn-end svg { width:26px; height:26px; }
.call-peer-avatar { width:96px; height:96px; }
.call-peer-name { font-size:19px; }
}
.call-minimize-btn {
position:static; margin-bottom:4px; align-self:center;
width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
display:flex; align-items:center; justify-content:center; color:#fff;
background:rgba(255,255,255,.14); backdrop-filter:blur(12px);
transition:transform .15s ease, background .15s ease;
}
.call-minimize-btn:active { transform:scale(.9); }
.call-minimize-btn svg { width:20px; height:20px; }
/* Во время видеозвонка сам блок с аватаром/именем скрывается — стрелку
в этом случае закрепляем как оверлей в углу экрана, а не даём ей
"летать" где придётся вместе с остальным скрытым содержимым. */
#active-call-screen.video-active .call-peer-avatar,
#active-call-screen.video-active .call-peer-name,
#active-call-screen.video-active .call-status-text { display:none; }
#active-call-screen.video-active .call-minimize-btn {
position:absolute; top:max(16px, env(safe-area-inset-top)); left:16px; z-index:3; margin:0;
}
#call-minimized-bar {
position:fixed; top:0; left:0; right:0; z-index:9998;
padding:max(8px, env(safe-area-inset-top)) 16px 8px;
display:flex; align-items:center; gap:8px;
background:var(--accent-primary);
color:var(--text-inverse); font-size:13px; font-weight:600;
cursor:pointer; user-select:none;
box-shadow:0 2px 12px rgba(0,0,0,.25);
transition:background .2s ease;
}
#call-minimized-bar.call-min-accepted { background:#22c55e; }
.call-min-dot {
width:7px; height:7px; border-radius:50%; background:#fff; flex-shrink:0;
animation:pulse 1.5s ease infinite;
}
.call-min-name { font-weight:700; flex-shrink:0; }
.call-min-status { opacity:.85; font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.call-min-expand { width:16px; height:16px; flex-shrink:0; transform:rotate(180deg); opacity:.9; }
@media(max-width:1100px){
.right-panel{ display:none; }
.sidebar{ display:none; }
.mobile-nav{ display:flex; }
.main-content{ border-right:none; padding-bottom:116px; }
body[data-page="messages"] .main-content { padding-bottom: 0 !important; }
.conversations-list{ width:100%; }
.messages-layout{ flex-direction:column; }
.input, select, textarea, .chat-input { font-size:16px; }
}
@media(max-width:750px){
.post-card{ margin:6px 10px 0; padding:9px 12px; border-radius:14px; }
.compose-box{ margin:10px 10px 6px; padding:12px 14px; border-radius:20px; }
.compose-textarea{ font-size:15px; min-height:44px; }
.compose-tool-btn{ width:40px; height:40px; }
.page-header{ padding:12px 14px; border-radius:0 0 20px 20px; }
.page-header h1{ font-size:17px; }
.tabs{ padding:0 4px; }
.tab-btn{ padding:12px 10px; font-size:13px; }
.notif-item{ padding:12px 14px; }
.modal{ border-radius:22px; max-width:calc(100vw - 16px); max-height:calc(100vh - 24px); }
.modal-header{ padding:14px 16px; }
.modal-body{ padding:16px; }
.modal-title{ font-size:16px; }
.mobile-nav-btn{ padding:8px 2px; }
.mobile-nav-btn span{ font-size:10px; }
.mobile-nav-glass{ height:58px; border-radius:28px; }
.fab{ width:56px; height:56px; }
.fab-more{ width:40px; height:40px; }
}
@media(max-width:520px){
.post-card{ margin:5px 8px 0; padding:8px 10px; border-radius:12px; gap:8px; }
.post-text{ font-size:13.5px; margin-bottom:6px; }
.post-author-name{ font-size:14px; }
.post-author-handle{ font-size:13px; }
.post-time{ font-size:12px; }
.post-actions{ gap:0; }
.post-action-btn{ padding:6px; font-size:12px; gap:4px; }
.post-action-btn svg{ width:17px; height:17px; }
.compose-box{ margin:6px 8px 4px; padding:10px 12px; }
.compose-textarea{ font-size:15px; min-height:40px; }
.compose-footer{ gap:6px; margin-top:8px; padding-top:8px; }
.char-counter{ font-size:12px; }
.page-header{ padding:10px 12px; }
.page-header h1{ font-size:16px; }
.tab-btn{ padding:10px 8px; font-size:12px; }
.notif-item{ padding:10px 12px; gap:10px; }
.notif-text{ font-size:13px; }
.modal{ border-radius:18px; max-width:calc(100vw - 8px); max-height:calc(100vh - 12px); }
.modal-header{ padding:12px 14px; }
.modal-body{ padding:14px; }
.mobile-nav-btn{ padding:6px 0; }
.mobile-nav-btn span{ font-size:9px; }
.mobile-nav-btn svg{ width:19px; height:19px; }
.mobile-nav-glass{ height:54px; border-radius:26px; padding:4px; }
.fab{ width:52px; height:52px; }
.fab-more{ width:38px; height:38px; }
.avatar-sm{ width:32px; height:32px; font-size:12px; }
.avatar-md{ width:38px; height:38px; font-size:14px; }
.btn-sm{ padding:7px 14px; font-size:13px; }
.btn-lg{ padding:10px 18px; font-size:14px; }
}
@media(max-width:380px){
.post-card{ margin:4px 6px 0; padding:8px 10px; }
.compose-box{ margin:4px 6px 4px; padding:8px 10px; }
.page-header{ padding:8px 10px; }
.page-header h1{ font-size:15px; }
.post-action-btn{ padding:5px; font-size:11px; }
.post-action-btn svg{ width:16px; height:16px; }
.mobile-nav-glass{ height:50px; border-radius:24px; }
.fab{ width:48px; height:48px; }
}
body.perf-no-anim, body.perf-no-anim * {
animation: none !important;
transition: none !important;
}
body.perf-no-blur, body.perf-no-blur * {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* ── Настройка «Закруглённые углы» ── */
/* Радиус фреймов/кнопок. !important нужен, чтобы перебить и инлайн-радиусы,
которыми многие элементы (карточки, пузыри) задаются прямо из JS-шаблонов. */
body.rounded-corners { --rc: 16px; }
body.rounded-corners .post-card,
body.rounded-corners .card,
body.rounded-corners .panel,
body.rounded-corners .modal,
body.rounded-corners .modal-overlay .modal,
body.rounded-corners .settings-row,
body.rounded-corners .settings-section,
body.rounded-corners .sidebar,
body.rounded-corners .sidebar-more-menu,
body.rounded-corners .chat-window,
body.rounded-corners .chat-input-area,
body.rounded-corners .compose-box,
body.rounded-corners .nav-item,
body.rounded-corners .skeleton,
body.rounded-corners .toast,
body.rounded-corners .profile-card,
body.rounded-corners .comment-card,
body.rounded-corners .clip-card {
border-radius: var(--rc) !important;
}
/* Кнопки и поля ввода (круглые переключатели .toggle и аватары не трогаем) */
body.rounded-corners .btn,
body.rounded-corners button:not(.toggle):not(.avatar),
body.rounded-corners input,
body.rounded-corners textarea,
body.rounded-corners select {
border-radius: var(--rc) !important;
}
/* Пузыри сообщений — оставляем «хвостик», просто увеличиваем скругление */
body.rounded-corners .bubble.in { border-radius: 22px 22px 22px 7px !important; }
body.rounded-corners .bubble.out { border-radius: 22px 22px 7px 22px !important; }
.post-media video { width:100%; height:auto; max-height:min(70vh, 420px); object-fit:contain; display:block; background:#000; }
.quote-card {
border:1px solid var(--border-color); border-radius:14px; padding:12px;
margin-bottom:10px; cursor:pointer;
}
.quote-card:hover { background: var(--bg-hover); }
.quote-card-header { display:flex; align-items:center; gap:6px; margin-bottom:4px; font-size:14px; }
.quote-card-name { font-weight:600; }
.quote-card-handle { color:var(--text-secondary); }
.quote-card-text { font-size:14px; line-height:1.5; word-break:break-word; }
.quote-card-media { margin-top:8px; border-radius:10px; overflow:hidden; }
.quote-card-media img, .quote-card-media video { width:100%; max-height:260px; object-fit:cover; display:block; }
.post-more-wrap { position:relative; flex-shrink:0; }
.post-more-btn {
background:none; border:none; color:var(--text-secondary); cursor:pointer;
padding:6px; border-radius:50%; display:flex; align-items:center; justify-content:center;
transition: background var(--dur-quick) var(--ease-smooth-out), color var(--dur-quick) var(--ease-smooth-out);
}
.post-more-btn svg { width:18px; height:18px; }
.post-more-btn:hover { background: color-mix(in srgb, var(--accent-primary) 10%, transparent); color:var(--accent-primary); }
.post-more-btn:active { transform: scale(0.9); }
.post-more-menu {
position:absolute; top:32px; right:0; z-index:9999;
background: var(--block-bg); border: 1px solid var(--border-color); border-radius:14px;
box-shadow: 0 8px 24px rgba(31,30,28,.14), inset 0 1px 0 rgba(255,255,255,.4);
min-width:210px; padding:6px;
display:block; opacity:0; visibility:hidden; transform:scale(var(--scale-medium)) translateY(-4px);
transition:opacity var(--dur-quick) var(--ease-smooth-out), transform var(--dur-quick) var(--ease-smooth-out), visibility var(--dur-quick);
transform-origin:top right;
}
.post-more-menu.open { opacity:1; visibility:visible; transform:scale(1) translateY(0); }
.post-more-item {
display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
cursor:pointer; font-size:14px; font-weight:500; color:var(--text-primary);
background: transparent;
transition: background var(--dur-quick) var(--ease-smooth-out);
}
.post-more-item:hover { background: var(--bg-hover); }
.post-more-item svg { width:18px; height:18px; flex-shrink:0; }
.post-more-item.danger { color:#c0392b; }
.post-pinned-label {
display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
color:var(--text-secondary); margin-bottom:6px;
}
.post-pinned-label svg { width:14px; height:14px; }
.my-avatar { flex-shrink:0; }
.name-nuksta {
background: linear-gradient(270deg,#0288d1,#26c6da);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
[data-theme=dark] .name-nuksta {
background: linear-gradient(270deg,#4fc3f7,#e0f7fa);
-webkit-background-clip: text;
background-clip: text;
}
.nuksta-pin {
display:inline-flex; align-items:center; justify-content:center;
width:15px; height:15px; flex-shrink:0; vertical-align:-2px;
}
.nuksta-pin svg { width:100%; height:100%; }
.verified-badge {
display:inline-flex; align-items:center; justify-content:center;
width:19px; height:19px; flex-shrink:0; vertical-align:-4px; margin-left:6px;
}
.verified-badge svg { width:100%; height:100%; }
.pin-badge {
position: relative;
display: inline-flex; align-items:center; justify-content:center;
width: 22px; height: 22px; flex-shrink: 0; vertical-align: -5px; margin-left: 5px;
cursor: default;
}
.pin-badge svg { width: 100%; height: 100%; }
.pin-badge img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.pin-badge::after {
content: "Пин: " attr(data-pin-name) "\A" "Ивент: " attr(data-pin-event);
white-space: pre-line;
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: #16181c;
color: #fff;
padding: 8px 12px;
border-radius: 10px;
font-size: 12px;
font-weight: 500;
line-height: 1.6;
text-align: left;
width: max-content;
max-width: 220px;
box-shadow: 0 8px 24px rgba(0,0,0,.35);
opacity: 0;
pointer-events: none;
transition: opacity .15s ease, transform .15s ease;
z-index: 1000;
}
.pin-badge::before {
content: '';
position: absolute;
bottom: calc(100% + 3px);
left: 50%;
transform: translateX(-50%) translateY(4px);
border: 5px solid transparent;
border-top-color: #16181c;
opacity: 0;
pointer-events: none;
transition: opacity .15s ease, transform .15s ease;
z-index: 1000;
}
.pin-badge:hover::after, .pin-badge:hover::before {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.identity-check-notice {
margin: 14px 0 0;
padding: 12px 14px;
background: color-mix(in srgb, #ef4444 12%, transparent);
border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.identity-check-text {
font-size: 13px;
color: #fca5a0;
font-weight: 500;
}
.identity-check-hint {
font-size: 11px;
color: var(--text-secondary);
font-weight: 400;
margin-left: 4px;
}
.nav-item.nav-nuksta {
margin-top: 6px;
padding-top: 10px;
border-top: 1px solid var(--border-color);
border-radius: 0;
}
.nav-item.nav-nuksta .nav-nuksta-label {
background: linear-gradient(270deg,#0288d1,#26c6da);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
[data-theme=dark] .nav-item.nav-nuksta .nav-nuksta-label {
background: linear-gradient(270deg,#4fc3f7,#e0f7fa);
-webkit-background-clip: text;
background-clip: text;
}
.nav-item.nav-nuksta svg { color: #4fc3f7; }
.nuksta-page { max-width: 460px; margin: 0 auto; padding: 24px 20px 60px; }
.nuksta-hero {
text-align: center; padding: 28px 20px;
border-radius: 24px; background: var(--block-bg);
margin-bottom: 20px;
}
.nuksta-hero-title {
font-family: 'Unbounded', 'Onest', sans-serif;
font-size: 47px;
font-weight: 900;
margin-bottom: 4px;
background-image:
radial-gradient(ellipse at 20% 30%, rgba(0,110,245,0.88), transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(204,0,167,0.7), transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(255,173,85,0.6), transparent 50%),
radial-gradient(ellipse at 30% 80%, rgba(0,204,68,0.5), transparent 50%),
radial-gradient(ellipse at 70% 20%, rgba(0,170,204,0.5), transparent 50%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation:
pro-hue-rotate 4000ms linear infinite,
pro-gradient-move 5000ms ease-in-out infinite;
}
@keyframes pro-hue-rotate {
from { filter: hue-rotate(0deg) saturate(1.3); }
to { filter: hue-rotate(-360deg) saturate(1.3); }
}
@keyframes pro-gradient-move {
0%, 100% {
background-position:
0% 50%, 100% 50%, 50% 50%,
0% 100%, 100% 0%;
}
25% {
background-position:
100% 0%, 0% 100%, 50% 0%,
100% 100%, 0% 50%;
}
50% {
background-position:
100% 100%, 0% 0%, 50% 100%,
0% 50%, 100% 100%;
}
75% {
background-position:
0% 100%, 100% 0%, 50% 0%,
100% 50%, 0% 0%;
}
}
[data-theme=dark] .nuksta-hero-title {
background-image:
radial-gradient(ellipse at 20% 30%, rgba(85,207,255,0.88), transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(204,0,167,0.8), transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(255,173,85,0.7), transparent 50%),
radial-gradient(ellipse at 30% 80%, rgba(0,255,100,0.6), transparent 50%),
radial-gradient(ellipse at 70% 20%, rgba(0,200,255,0.6), transparent 50%);
}
@media (prefers-reduced-motion: reduce) {
.nuksta-hero-title {
animation: none !important;
background-image: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
}
.nuksta-hero-sub { font-size: 12px; letter-spacing:.5px; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 18px; }
.nuksta-preview-card {
display:flex; align-items:center; gap:12px;
background: var(--bg-secondary); border-radius: 18px;
padding: 14px 16px; text-align:left; margin-bottom: 4px;
}
.nuksta-preview-info { min-width:0; }
/* ─── Organic shimmer — ported from index (6).html's Pro prototype
"Organic shimmer" (wavy shimmer with edge glow), card #20 (.pv63/
.pv62/.pv65 in the source). Reference wraps a single subject box
(there: a 142px demo square; here: the avatar) in THREE stacked
layers, all clipped to that box's own rounded shape with a
generous negative inset so the glow has room to breathe before
being cropped at the edge — never bleeding onto the rest of the
row:
1. os-glow — soft rainbow color blobs underneath (screen blend)
2. os-edge — blurred inner-edge highlight ring (the "edge glow")
3. os-sweep — a turbulence-displaced diagonal light sweep on top
Always autoplaying here (decorative, no play/pause control —
unlike the original demo card). */
.organic-shimmer {
position: relative;
border-radius: 50%;
overflow: hidden;
isolation: isolate;
flex-shrink: 0;
}
.organic-shimmer .avatar { position: relative; z-index: 2; }
.organic-shimmer .os-glow {
position: absolute; inset: -35%;
pointer-events: none;
z-index: 0;
opacity: .95;
mix-blend-mode: screen;
background:
radial-gradient(circle at 22% 20%, rgba(0,110,245,.42), transparent 60%),
radial-gradient(circle at 78% 28%, rgba(204,0,167,.38), transparent 60%),
radial-gradient(circle at 30% 82%, rgba(0,204,68,.32), transparent 60%),
radial-gradient(circle at 82% 78%, rgba(255,173,85,.34), transparent 60%);
animation: os-glow-pulse 4000ms ease-in-out infinite;
}
.organic-shimmer .os-edge {
position: absolute; inset: -10%;
pointer-events: none;
z-index: 1;
border-radius: 50%;
box-shadow: inset 0 0 30% 6% rgba(255,255,255,.3);
filter: blur(3px);
mix-blend-mode: overlay;
animation: os-glow-pulse 4000ms ease-in-out infinite reverse;
}
.organic-shimmer .os-sweep {
position: absolute; top:0; left:0;
width: 220%; height: 220%;
background-size: 100% 100%;
background-repeat: no-repeat;
transform: translate3d(-46%,-46%,0);
animation: os-sweep-move 3000ms ease-out infinite;
pointer-events: none;
z-index: 1;
mix-blend-mode: overlay;
}
.organic-shimmer[data-playing="false"] .os-sweep,
.organic-shimmer[data-playing="false"] .os-glow,
.organic-shimmer[data-playing="false"] .os-edge { animation-play-state: paused; }
@keyframes os-sweep-move { 0% { transform:translate3d(-46%,-46%,0); } 100% { transform:translate3d(0,0,0); } }
@keyframes os-glow-pulse { 0%,100% { opacity:.7; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
.organic-shimmer .os-sweep, .organic-shimmer .os-glow, .organic-shimmer .os-edge { animation: none; }
}
.nuksta-preview-name { display:flex; align-items:center; gap:6px; font-size:15px; font-weight:600; }
.nuksta-preview-time { font-size:12px; color:var(--text-secondary); margin-top:2px; }
.nuksta-section-label { font-size:12px; font-weight:700; letter-spacing:.5px; color:var(--text-secondary); text-transform:uppercase; margin:22px 0 10px; }
.nuksta-perks { background:var(--block-bg); border-radius:18px; overflow:hidden; }
.nuksta-perk {
display:flex; align-items:center; gap:12px;
padding:13px 16px; border-bottom:1px solid var(--border-subtle);
font-size:14px; font-weight:500;
}
.nuksta-perk:last-child { border-bottom:none; }
.nuksta-perk-icon {
width:30px; height:30px; border-radius:9px; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
background: var(--bg-secondary); color: var(--accent-primary);
}
.nuksta-perk-label { flex:1; }
.nuksta-perk-tag {
font-size:10px; font-weight:700; letter-spacing:.5px;
padding:3px 8px; border-radius:8px;
background: var(--bg-secondary); color: var(--text-secondary);
}
.nuksta-perk-tag.active { background: color-mix(in srgb, var(--accent-primary) 15%, transparent); color: var(--accent-primary); }
.nuksta-cta { margin-top:22px; }
.nuksta-price-note { text-align:center; font-size:12px; color:var(--text-secondary); margin-bottom:12px; line-height:1.5; }
/* ── Выбор тарифа Giruki Pro ──────────────────────────────────────────
Портировано из pro.html: сегментированный переключатель со «скользящей
таблеткой» (.nuksta-billing) + карточка тарифа с анимированной ценой
(числа выезжают/уезжают посимвольно — «p9», подпись «Шлёпов» сменяется
кросс-блюром — «p6»). Переменные и keyframes ниже — общий примитив,
не специфичный для nuksta, можно переиспользовать где угодно ещё. */
:root {
--p6-dur: 150ms;
--p6-translate-y: 4px;
--p6-blur: 2px;
--p6-ease: ease-in-out;
--p9-dur: 500ms;
--p9-distance: 8px;
--p9-stagger: 70ms;
--p9-blur: 2px;
--p9-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
--p9-dir-x: 0;
--p9-dir-y: 1;
--ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
}
.p6-text {
display: inline-block;
white-space: nowrap;
transform: translateY(0);
filter: blur(0);
opacity: 1;
transition: transform var(--p6-dur) var(--p6-ease), filter var(--p6-dur) var(--p6-ease), opacity var(--p6-dur) var(--p6-ease);
will-change: transform, filter, opacity;
}
.p6-text.is-exit { transform: translateY(calc(var(--p6-translate-y) * -1)); filter: blur(var(--p6-blur)); opacity: 0; }
.p6-text.is-enter-start { transform: translateY(var(--p6-translate-y)); filter: blur(var(--p6-blur)); opacity: 0; transition: none; }
.p9-number {
font-variant-numeric: tabular-nums;
display: inline-flex; align-items: baseline;
user-select: none;
position: relative;
}
.p9-char { display: inline-block; transform: translateY(0); opacity: 1; will-change: transform, opacity; }
/* Цифры — свой inline-flex контейнер с nowrap: без этого на узких экранах
.p9-char (inline-block) переносятся по одному на строку, как обычные
"слова" (баг: цена "2000" ломается в столбик "2 0 0 0"). */
.p9-digits { position: relative; display: inline-flex; align-items: baseline; white-space: nowrap; }
.p9-number.is-animating .p9-char { animation: p9-pop-in var(--p9-dur) var(--p9-ease) both; }
.p9-number.is-animating .p9-char[data-stagger="1"] { animation-delay: var(--p9-stagger); }
.p9-number.is-animating .p9-char[data-stagger="2"] { animation-delay: calc(var(--p9-stagger) * 2); }
.p9-number .p9-ghost { position: absolute; inset: 0; display: inline-flex; align-items: baseline; pointer-events: none; }
.p9-number .p9-ghost .p9-char { animation: p9-pop-out var(--p9-dur) var(--p9-ease) both; }
.p9-number .p9-ghost .p9-char[data-stagger="1"] { animation-delay: var(--p9-stagger); }
.p9-number .p9-ghost .p9-char[data-stagger="2"] { animation-delay: calc(var(--p9-stagger) * 2); }
@keyframes p9-pop-in {
0% { transform: translate(calc(var(--p9-distance) * var(--p9-dir-x)), calc(var(--p9-distance) * var(--p9-dir-y))); opacity: 0; filter: blur(var(--p9-blur)); }
100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}
@keyframes p9-pop-out {
0% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
100% { transform: translate(calc(var(--p9-distance) * var(--p9-dir-x) * -1), calc(var(--p9-distance) * var(--p9-dir-y) * -1)); opacity: 0; filter: blur(var(--p9-blur)); }
}
@media (prefers-reduced-motion: reduce) {
.p6-text, .p9-char { transition: none !important; animation: none !important; }
}
/* Сегментированный переключатель тарифов — скользящая «таблетка».
4 таба (14 дней/Месяц/Полгода/Год) шире, чем было (2 таба), поэтому
переключатель теперь может занимать всю ширину карточки (max-width:100%,
табы гибкие) вместо жёсткого width:fit-content, а подпись со скидкой
вынесена из absolute-позиционирования (упиралась в край экрана на
мобильных) в обычную строку под переключателем. */
.nuksta-billing {
position: relative;
display: flex; align-items: center; gap: 3px;
padding: 3px;
border-radius: 48px;
background: var(--bg-secondary);
width: fit-content;
max-width: 100%;
margin: 0 auto 6px;
}
.nuksta-billing-opt {
position: relative; z-index: 1;
border: 0; background: transparent;
height: 34px; padding: 4px 12px;
border-radius: 48px;
font-family: inherit; font-size: 13px; font-weight: 600;
color: var(--text-secondary);
white-space: nowrap; cursor: pointer;
flex: 1 1 auto;
-webkit-tap-highlight-color: transparent;
transition: color 250ms var(--ease-smooth-out);
}
.nuksta-billing-opt[data-active="true"] { color: var(--text-primary); }
.nuksta-billing-indicator {
position: absolute; top: 3px; left: 0;
height: 34px; width: 0;
background: var(--bg-card, #fff);
border-radius: 48px;
box-shadow: 0 1px 2px rgba(0,0,0,.12);
transform: translateX(0);
transition: transform 250ms var(--ease-smooth-out), width 250ms var(--ease-smooth-out);
will-change: transform, width;
z-index: 0; pointer-events: none;
}
[data-theme=dark] .nuksta-billing-indicator { background: #3a3a3a; box-shadow: none; }
.nuksta-billing-note {
display: block;
text-align: center;
white-space: nowrap;
font-size: 11px; font-weight: 700; color: var(--accent-primary);
opacity: 0; height: 0; overflow: hidden;
transition: opacity 200ms var(--ease-smooth-out);
margin-bottom: 8px;
}
.nuksta-billing[data-billing="year"] + .nuksta-billing-note,
.nuksta-billing[data-billing="year"] ~ .nuksta-billing-note { opacity: 1; height: auto; overflow: visible; }
/* Карточка тарифа */
.nuksta-price-card {
display: flex; flex-direction: column; gap: 18px;
background: var(--block-bg);
border-radius: 22px;
box-shadow: inset 0 0 0 1px var(--border-color);
padding: 20px;
margin-bottom: 14px;
}
.nuksta-price-head { display:flex; flex-direction:column; gap:4px; align-items:center; text-align:center; }
.nuksta-price-amount { display:flex; align-items:baseline; gap:7px; flex-wrap: nowrap; min-width: 0; }
.nuksta-price-value {
font-size: 34px; font-weight: 800; line-height: 1;
color: var(--text-primary);
white-space: nowrap; flex-shrink: 0;
}
.nuksta-price-per { display:inline-block; font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.nuksta-price-full { font-size:13px; font-weight:500; color:var(--text-secondary); text-decoration:line-through; margin-left:2px; }
.nuksta-price-seat { font-size: 12px; color: var(--text-secondary); }
.nuksta-price-divider {
height: 1px;
background: linear-gradient(to right, transparent 0%, var(--border-color) 50%, transparent 100%);
}
.nuksta-feature-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.nuksta-feature { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-primary); }
.nuksta-feature-check {
display:flex; align-items:center; justify-content:center;
width:18px; height:18px; flex:none; border-radius:50%;
background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
color: var(--accent-primary);
}
.nuksta-feature-check svg { width:10px; height:10px; display:block; }
.nuksta-status-card {
background: var(--block-bg); border-radius:18px; padding:16px;
text-align:center; margin-top:22px;
}
.nuksta-status-card .nuksta-status-until { font-size:13px; color:var(--text-secondary); margin-bottom:12px; }
.nuksta-or-divider { text-align:center; font-size:12px; color:var(--text-secondary); margin:10px 0; }
#nuksta-subscribe-coins-btn { display:flex; align-items:center; justify-content:center; gap:8px; }
#nuksta-subscribe-coins-btn svg { width:18px; height:18px; flex-shrink:0; }
.page#page-wallet { max-width: 460px; margin: 0 auto; }
.wallet-balance-card {
display:flex; align-items:center; gap:16px;
background: var(--block-bg); border-radius:24px;
padding:22px 20px; margin-bottom:16px;
}
.wallet-balance-icon { width:52px; height:52px; flex-shrink:0; }
.wallet-balance-value { font-family:'Unbounded', 'Onest', sans-serif; font-size:28px; font-weight:900; line-height:1.1; }
.wallet-balance-label { font-size:12px; color: var(--text-secondary); text-transform:uppercase; letter-spacing:.5px; margin-top:4px; }
.wallet-hint { font-size:13px; color: var(--text-secondary); line-height:1.5; margin-bottom:6px; }
.wallet-history { background:var(--block-bg); border-radius:18px; overflow:hidden; }
.wallet-tx {
display:flex; align-items:center; gap:12px;
padding:12px 16px; border-bottom:1px solid var(--border-subtle);
}
.wallet-tx:last-child { border-bottom:none; }
.wallet-tx-icon { width:26px; height:26px; flex-shrink:0; }
.wallet-tx-info { flex:1; min-width:0; }
.wallet-tx-reason { font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wallet-tx-date { font-size:12px; color: var(--text-secondary); margin-top:2px; }
.wallet-tx-amount { font-size:15px; font-weight:700; flex-shrink:0; }
.wallet-tx-amount.positive { color:#22c55e; }
.wallet-tx-amount.negative { color:#ef4444; }
.conversations-list.compact {
width: 64px !important;
min-width: 64px !important;
overflow: hidden;
}
.conversations-list.compact .search-wrap,
.conversations-list.compact .conv-info,
.conversations-list.compact .conv-unread-dot { display: none !important; }
.conversations-list.compact .conv-item { padding: 8px; justify-content: center; }
.conversations-list.compact .avatar { margin: 0 auto; }
.lightbox-overlay.open { display: flex !important; }
.lightbox-overlay { touch-action: none; }
/* old #lightbox-img "lightbox-in" animation removed — it out-specificity'd
the "Image open tilt" animation in the block above and left the photo
stuck at opacity:0 (looked like the image "disappeared" on open). */
.nuksta-perk-icon { display:flex; align-items:center; justify-content:center; }
.nuksta-perk-icon svg { width:22px; height:22px; }
.nav-badge {
position: absolute !important;
top: 6px !important;
right: 6px !important;
min-width: 18px !important;
height: 18px !important;
padding: 0 4px !important;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 18px !important;
border-radius: 9px !important;
background: var(--accent-like) !important;
color: #fff !important;
text-align: center !important;
}
.nav-item { position: relative; }
.mobile-nav-btn { position: relative; }
.mobile-nav-btn .nav-badge {
top: -6px !important;
right: -10px !important;
}
@media(max-width:1100px){
.messages-layout {
flex-direction: column;
height: calc(100dvh - 56px - 60px);
height: calc(100svh - 56px - 60px);
overflow: hidden;
position: relative;
}
.conversations-list {
width: 100%;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
border-right: none;
}
.chat-window {
position: fixed;
inset: 0;
bottom: 60px;
z-index: 200;
display: none;
flex-direction: column;
background: var(--bg-primary);
padding-bottom: max(0px, env(safe-area-inset-bottom));
}
body.chat-fullscreen .mobile-nav { display: none !important; }
body.chat-fullscreen .chat-window { bottom: 0; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.messages-layout.chat-open #chat-window {
display: flex !important;
animation: chatSlideIn .22s ease;
}
.chat-window.chat-closing {
animation: chatSlideOut .18s ease forwards;
}
@keyframes chatSlideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes chatSlideOut {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(100%); opacity: 0; }
}
.chat-header { padding-left: 4px; padding-right: 4px; }
.chat-header-name { font-size: 15px; max-width: calc(100vw - 160px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-header-status { font-size: 12px; max-width: calc(100vw - 160px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chat-call-btns { flex-shrink: 0; }
.chat-messages { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px; }
.msg-col { max-width: 84%; }
.chat-input { font-size: 16px; }
.chat-input-area { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.msg-actions { min-width: 168px; }
.msg-actions-btn { padding: 11px 14px; font-size: 14px; }
body[data-page="messages"] .fab { display: none !important; }
.chat-empty { display: none !important; }
#channel-window { position: fixed; inset: 0; bottom: 60px; z-index: 200; padding-bottom: max(0px, env(safe-area-inset-bottom)); }
body.channel-fullscreen .mobile-nav { display: none !important; }
body.channel-fullscreen #channel-window { bottom: 0; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.messages-layout.channel-open #channel-window { display: flex !important; animation: chatSlideIn .22s ease; }
.channel-back-btn { display: flex !important; }
}
@media(max-width:400px){
.msg-col { max-width: 90%; }
.bubble { padding: 8px 11px; font-size: 13px; }
.chat-header-name { font-size: 14px; }
.chat-attach-btn, .chat-mic-btn, .chat-emoji-btn { width: 34px; height: 34px; }
.chat-send-btn { width: 38px; height: 38px; }
}
@media (pointer: coarse) {
.msg-row, .bubble { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.chat-input, .chat-input * { -webkit-user-select: text; user-select: text; }
}
.bubble-media-img { cursor: zoom-in !important; }
.sidebar-user { cursor: pointer; }
/* iOS: раньше здесь был тёмно-серый rgba(28,28,30) независимо от темы сайта —
теперь те же токены Frosted Glass, что и везде. */
@supports (-webkit-touch-callout: present) {
.sidebar {
background: var(--fg-bg) !important;
-webkit-backdrop-filter: var(--fg-blur);
backdrop-filter: var(--fg-blur);
border-color: color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
}
.topbar {
background: var(--fg-bg) !important;
-webkit-backdrop-filter: var(--fg-blur);
backdrop-filter: var(--fg-blur);
border-bottom-color: color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
padding-top: max(8px, env(safe-area-inset-top));
}
.mobile-nav-glass {
background: var(--fg-bg) !important;
-webkit-backdrop-filter: var(--fg-blur);
backdrop-filter: var(--fg-blur);
}
.fab {
background: var(--fg-bg) !important;
-webkit-backdrop-filter: var(--fg-blur);
backdrop-filter: var(--fg-blur);
}
.modal-overlay .modal,
.dropdown-menu,
.toast-notification {
background: var(--fg-bg-modal) !important;
-webkit-backdrop-filter: var(--fg-blur);
backdrop-filter: var(--fg-blur);
border-color: color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
}
}
.msg-reply-preview {
border-left: 3px solid var(--accent-primary);
padding: 4px 8px;
margin-bottom: 5px;
border-radius: 4px;
background: rgba(0,0,0,.12);
font-size: 12px;
line-height: 1.4;
cursor: pointer;
max-width: 100%;
}
.bubble.out .msg-reply-preview { background: var(--bubble-out-soft); border-color: currentColor; }
.msg-reply-sender { font-weight: 700; opacity: .9; margin-bottom: 1px; }
.msg-reply-text {
opacity: .75;
white-space: pre-wrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 220px;
overflow-wrap:anywhere;
word-break:break-word;
}
#chat-reply-bar {
display: none;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-top: 1px solid var(--border-color);
background: var(--block-bg);
font-size: 13px;
}
#chat-reply-bar .reply-bar-content {
flex: 1;
border-left: 3px solid var(--accent-primary);
padding-left: 8px;
min-width: 0;
}
#chat-reply-bar .reply-bar-sender { font-weight: 700; color: var(--accent-primary); font-size: 12px; }
#chat-reply-bar .reply-bar-text { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
#chat-reply-cancel {
background: none; border: none; cursor: pointer;
color: var(--text-secondary); padding: 4px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
#chat-reply-cancel:hover { background: var(--bg-hover); }
.msg-forward-label { font-size:11px; font-weight:600; color:var(--text-secondary); margin-bottom:3px; opacity:.85; }
.msg-forward-author { color:var(--link-color); text-decoration:none; }
.msg-forward-author:hover { text-decoration:underline; }
.bubble.out .msg-forward-label { color:var(--bubble-out-text); opacity:.85; }
.bubble.out .msg-forward-author { color:var(--bubble-out-link); text-decoration:underline; }
.msg-row-selectmode { cursor:pointer; }
.msg-row-selected .bubble { outline:2px solid var(--accent-primary); outline-offset:2px; }
.msg-select-checkbox { display:flex; align-items:center; align-self:center; flex-shrink:0; }
/* ═══════════════════════════════════════════════════════════════
transitions.dev P25 — Checkbox with check path draw
(ported 1:1 from the UI kit's .p25-box; used for every select
checkbox across conversations, messages and the forward sheet)
═══════════════════════════════════════════════════════════════ */
.p25-box {
position: relative;
width: 18px; height: 18px;
border: 0; padding: 0; cursor: pointer;
border-radius: 6px;
background: var(--bg-primary, transparent);
box-shadow: inset 0 0 0 1px var(--border-color, rgba(128,128,128,.45));
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
transition: background 150ms var(--ease-smooth-out), box-shadow 150ms var(--ease-smooth-out);
}
.p25-box::before { content:''; position:absolute; inset:-13px; } /* comfy tap target */
.p25-box[aria-checked="true"] {
background: var(--accent-primary);
box-shadow: inset 0 0 0 1px var(--accent-primary);
}
.p25-box svg { display:block; overflow:visible; pointer-events:none; }
.p25-box svg path {
stroke:#fff;
stroke-dasharray: 15;
stroke-dashoffset: 15;
transition: stroke-dashoffset 150ms var(--ease-smooth-out);
}
.p25-box[aria-checked="true"] svg path {
stroke-dashoffset: 0;
transition: stroke-dashoffset 350ms var(--ease-smooth-out);
}
@media (prefers-reduced-motion: reduce) {
.p25-box svg path { transition:none !important; }
}
.msg-actions {
display: none;
background: var(--block-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 4px;
z-index: 9999;
box-shadow: 0 4px 24px rgba(0,0,0,.4);
min-width: 148px;
}
.msg-actions-btn {
display: flex; align-items: center; gap: 8px;
width: 100%; padding: 8px 12px;
background: none; border: none; cursor: pointer;
color: var(--text-primary); font-size: 13px; border-radius: 8px;
text-align: left;
}
.msg-actions-btn:hover { background: var(--bg-hover); }
.msg-actions-btn.danger { color: #f4212e; }
.msg-actions-btn svg { flex-shrink: 0; }
.msg-row-highlight {
position: relative;
}
.msg-row-highlight::after {
content: "";
position: absolute;
inset: -6px -8px;
background: var(--accent-primary);
opacity: .18;
border-radius: 14px;
pointer-events: none;
}
.msg-edited {
font-size: 10px;
opacity: .55;
margin-left: 4px;
}
.bubble-edit-area {
width: 100%;
background: var(--bg-primary);
border: 1px solid var(--accent-primary);
border-radius: 10px;
padding: 8px 10px;
color: var(--text-primary);
font-size: 14px;
resize: none;
outline: none;
min-height: 60px;
max-height: 200px;
}
.bubble-edit-actions {
display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end;
}
.clips-page-header {
display: flex;
align-items: center;
gap: 10px;
}
.clips-page-header-icon {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--bg-secondary);
color: var(--accent-primary);
flex-shrink: 0;
}
.clips-upload-bar { padding: 12px 16px; }
.clips-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 0 16px 20px;
}
.clip-thumb {
position: relative;
aspect-ratio: 9 / 16;
background: #111;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
transition: transform .15s ease;
}
.clip-thumb:active { transform: scale(.96); }
.clip-thumb video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.clip-thumb-caption {
position: absolute;
left: 8px;
right: 8px;
bottom: 8px;
color: #fff;
font-size: 12px;
font-weight: 600;
line-height: 1.3;
text-shadow: 0 1px 3px rgba(0,0,0,.8);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.clip-thumb-channel {
position: absolute;
top: 6px;
left: 6px;
right: 6px;
font-size: 10px;
font-weight: 600;
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,.8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.clip-thumb-play {
position: absolute;
top: 8px;
right: 8px;
width: 20px;
height: 20px;
opacity: .85;
filter: drop-shadow(0 1px 3px rgba(0,0,0,.7));
}
.clip-thumb-download {
position: absolute;
top: 8px;
right: 36px;
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background: rgba(0,0,0,.55);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: opacity .2s, background .2s;
z-index: 2;
}
.clip-thumb:hover .clip-thumb-download { opacity: 1; }
.clip-thumb-download:hover { background: rgba(0,0,0,.8); }
@media (max-width: 560px) {
.clips-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 10px 16px; }
.clips-upload-bar { padding: 10px; }
.clip-thumb-caption { font-size: 11px; }
}
@media (min-width: 561px) and (max-width: 900px) {
.clips-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1300px) {
.clips-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; padding: 0 20px 24px; }
}
.clip-viewer {
position: fixed;
inset: 0;
left: var(--clip-viewer-left, 0px);
z-index: 9999;
background: #000;
color-scheme: dark;
}
@media (max-width: 1100px) {
.clip-viewer { left: 0 !important; }
}
.clip-back-btn {
position: absolute;
top: 14px;
left: 14px;
z-index: 30;
display: flex;
align-items: center;
gap: 6px;
background: rgba(0,0,0,.45);
color: #fff;
border: none;
padding: 8px 14px 8px 10px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
backdrop-filter: blur(8px);
}
.clip-feed {
position: absolute;
inset: 0;
overflow-y: auto;
scroll-snap-type: y mandatory;
overscroll-behavior: contain;
scrollbar-width: none;
}
.clip-feed::-webkit-scrollbar { display: none; }
.clip-slide {
position: relative;
height: 100%;
height: 100dvh;
scroll-snap-align: start;
scroll-snap-stop: always;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.clip-video-wrap {
position: relative;
width: 100%;
max-width: 480px;
height: 100%;
background: #000;
cursor: pointer;
overflow: hidden;
}
.clip-video {
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
pointer-events: none;
}
.clip-video-meta {
position: absolute;
left: 14px;
right: 84px;
bottom: 64px;
color: #fff;
text-shadow: 0 1px 4px rgba(0,0,0,.8);
pointer-events: none;
z-index: 4;
}
.clip-video-author {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 15px;
word-break: break-word;
pointer-events: auto;
cursor: pointer;
}
.clip-video-avatar img {
width: 34px;
height: 34px;
border-radius: 50%;
object-fit: cover;
border: 1.5px solid rgba(255,255,255,.85);
display: block;
}
.clip-video-name { text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.clip-verified { display: inline-flex; color: #20d5ec; }
.clip-verified svg { width: 16px; height: 16px; }
.clip-video-title { font-size: 13px; opacity: .92; margin-top: 6px; word-break: break-word; }
.clip-video-stats {
display: flex;
align-items: center;
gap: 5px;
margin-top: 6px;
font-size: 12px;
opacity: .8;
}
.clip-center-btn {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 64px; height: 64px;
border-radius: 50%;
background: rgba(0,0,0,.4);
display: flex; align-items: center; justify-content: center;
opacity: 0;
transition: opacity .15s ease;
pointer-events: none;
z-index: 5;
}
.clip-center-btn svg { margin-left: 3px; }
.clip-like-burst {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
pointer-events: none;
z-index: 7;
filter: drop-shadow(0 4px 16px rgba(254,44,85,.55));
}
.clip-like-burst.animate { animation: clipHeartPop .8s ease forwards; }
@keyframes clipHeartPop {
0% { transform: translate(-50%,-50%) scale(0) rotate(-12deg); opacity: 0; }
25% { transform: translate(-50%,-50%) scale(1.2) rotate(6deg); opacity: 1; }
45% { transform: translate(-50%,-50%) scale(.95) rotate(0deg); }
60% { transform: translate(-50%,-50%) scale(1.05); opacity: 1; }
100% { transform: translate(-50%,-50%) scale(1.35) translateY(-40px); opacity: 0; }
}
.clip-player-controls {
position: absolute;
left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
z-index: 6;
}
.clip-player-btn {
background: none;
border: none;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
padding: 4px;
opacity: 1;
transition: opacity .25s ease, transform .25s ease;
}
.clip-mute-btn-hidden {
opacity: 0 !important;
transform: scale(.7);
pointer-events: none;
}
.clip-progress-track {
flex: 1;
height: 4px;
border-radius: 2px;
background: rgba(255,255,255,.25);
cursor: pointer;
position: relative;
}
.clip-progress-fill {
height: 100%;
width: 0%;
background: #fff;
border-radius: 2px;
}
.clip-time {
color: #fff;
font-size: 11px;
flex-shrink: 0;
text-shadow: 0 1px 3px rgba(0,0,0,.6);
min-width: 72px;
text-align: right;
}
.clip-actions {
position: absolute;
right: 10px;
bottom: 96px;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
z-index: 10;
}
.clip-action-btn {
background: none;
border: none;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
font-size: 11px;
cursor: pointer;
text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.clip-action-btn.active { color: var(--accent-primary, #6c5ce7); }
.clip-action-btn.pop { animation: clipBtnPop .35s ease; }
@keyframes clipBtnPop {
0% { transform: scale(1); }
40% { transform: scale(1.4); }
100% { transform: scale(1); }
}
.clip-action-btn svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.clip-delete-btn { color: #ef4444 !important; }
@media (min-width: 901px) {
.clip-actions {
right: auto;
left: calc(50% + 240px + 16px);
bottom: auto;
top: 50%;
transform: translateY(-50%);
}
}
/* Public TV/radio directory */
.tv-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--border-color)}
.tv-source-tabs{display:flex;gap:4px;padding:3px;background:var(--bg-secondary);border-radius:10px}
.tv-source-btn{border:0;background:transparent;color:var(--text-secondary);padding:7px 12px;border-radius:8px;cursor:pointer;font:inherit;font-size:13px}
.tv-source-btn.active{background:var(--accent-primary);color:#fff}
.tv-search{width:min(260px,100%)}
.tv-group-select{width:auto;min-width:170px}
.tv-count{margin-left:auto;color:var(--text-secondary);font-size:13px;white-space:nowrap}
.tv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;padding:16px}
.tv-card{display:flex;align-items:center;gap:12px;min-width:0;padding:12px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-secondary);color:var(--text-primary);text-align:left;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.tv-card:hover{transform:translateY(-1px);border-color:var(--accent-primary);background:var(--bg-hover)}
.tv-card-logo{width:52px;height:52px;flex:0 0 52px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:10px;background:#fff;color:#222}
.tv-card-logo img{width:100%;height:100%;object-fit:contain}
.tv-card-fallback{width:100%;height:100%;align-items:center;justify-content:center;font-size:20px;background:var(--bg-tertiary);color:var(--text-secondary)}
.tv-card-body{min-width:0;display:block}
.tv-card-title{display:block;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-card-meta{display:block;margin-top:4px;color:var(--text-secondary);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-player-panel:not(:empty){margin:16px 16px 0;padding:14px;border:1px solid var(--border-color);border-radius:14px;background:var(--bg-secondary);scroll-margin-top:12px}
.tv-player-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.tv-player-title{font-size:18px;font-weight:700}
.tv-player-subtitle{color:var(--text-secondary);font-size:13px;margin-top:3px}
.tv-media-player{display:block;width:100%;max-height:min(64vh,560px);border-radius:10px;background:#000}
audio.tv-media-player{min-height:54px;background:transparent}
.tv-player-error{margin-top:10px;padding:10px 12px;border:1px solid rgba(239,68,68,.35);border-radius:8px;background:rgba(239,68,68,.12);color:#ef4444;font-size:13px}
.tv-attribution{padding:0 16px 18px;color:var(--text-secondary);font-size:12px}
.tv-attribution a{color:var(--accent-primary)}
@media(max-width:640px){
.tv-toolbar{align-items:stretch}
.tv-search,.tv-group-select{width:100%}
.tv-count{margin-left:0}
.tv-grid{grid-template-columns:1fr;padding:10px}
.tv-player-panel:not(:empty){margin:10px 10px 0}
}
@media (max-width: 480px) {
.clip-video-meta { right: 72px; bottom: 58px; }
.clip-time { display: none; }
.clip-actions { gap: 14px; bottom: 88px; }
}
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
.clip-video-wrap { max-width: 60vw; }
.clip-actions { gap: 10px; }
.clip-action-btn span { display: none; }
}
.clip-comments-modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,.5);
z-index: 10000;
display: flex;
align-items: flex-end;
justify-content: center;
}
.clip-comments-sheet {
background: var(--bg-primary);
width: 100%;
max-width: 480px;
max-height: 70vh;
border-radius: 16px 16px 0 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* На ПК (не на телефонах) — боковая панель комментариев рядом с видео,
как у клипов/Shorts в YouTube на десктопе, а не нижний лист. */
@media (min-width: 1101px) {
.clip-comments-modal {
left: var(--clip-viewer-left, 0px);
background: transparent;
align-items: stretch;
justify-content: flex-end;
pointer-events: none;
}
.clip-comments-sheet {
pointer-events: auto;
width: 380px;
max-width: 380px;
height: 100%;
max-height: 100%;
border-radius: 0;
border-left: 1px solid var(--border-color, rgba(128,128,128,.2));
box-shadow: -12px 0 32px rgba(0,0,0,.35);
animation: clipCommentsSlideIn .22s ease;
}
}
@keyframes clipCommentsSlideIn {
from { transform: translateX(24px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.clip-comments-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px;
font-weight: 700;
border-bottom: 1px solid var(--border-color, rgba(128,128,128,.2));
}
.clip-comments-header button {
background: none;
border: none;
color: var(--text-secondary);
font-size: 22px;
cursor: pointer;
line-height: 1;
}
.clip-comments-list {
flex: 1;
overflow-y: auto;
padding: 8px 16px;
}
.clip-comment-row {
display: flex;
gap: 10px;
padding: 8px 0;
}
.clip-comments-input {
display: flex;
gap: 8px;
padding: 10px 16px;
border-top: 1px solid var(--border-color, rgba(128,128,128,.2));
}
.clip-comments-input input {
flex: 1;
background: var(--bg-secondary);
border: none;
border-radius: 20px;
padding: 10px 14px;
color: var(--text-primary);
font-size: 14px;
outline: none;
}
.clip-comments-input button {
background: var(--accent-primary, #6c5ce7);
color: #fff;
border: none;
border-radius: 20px;
padding: 0 16px;
font-weight: 600;
cursor: pointer;
}
.itdo-player {
position: relative;
background: #000;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 16/9;
user-select: none;
}
.itdo-player video {
width: 100%;
height: 100%;
display: block;
background: #000;
}
.itdo-player-live {
position: absolute;
top: 10px;
right: 10px;
background: #ef4444;
color: #fff;
padding: 4px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
align-items: center;
gap: 4px;
letter-spacing: .3px;
pointer-events: none;
z-index: 3;
}
.itdo-player-center-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.85);
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(0,0,0,.5);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
z-index: 2;
}
.itdo-player.show-center-btn .itdo-player-center-btn {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}
.itdo-player-controls {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 22px 10px 8px;
background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
opacity: 0;
transform: translateY(6px);
transition: opacity .18s ease, transform .18s ease;
z-index: 3;
}
.itdo-player.controls-visible .itdo-player-controls,
.itdo-player:not(.is-playing) .itdo-player-controls {
opacity: 1;
transform: translateY(0);
}
.itdo-player-seek {
position: relative;
height: 4px;
border-radius: 2px;
background: rgba(255,255,255,.25);
margin-bottom: 10px;
cursor: pointer;
}
.itdo-player-seek:hover { height: 6px; margin-top: -1px; }
.itdo-player-seek-buffered,
.itdo-player-seek-fill {
position: absolute;
top: 0; left: 0; bottom: 0;
border-radius: 2px;
}
.itdo-player-seek-buffered { background: rgba(255,255,255,.35); width: 0%; }
.itdo-player-seek-fill { background: #ef4444; width: 0%; }
.itdo-player-bar {
display: flex;
align-items: center;
gap: 10px;
}
.itdo-player-btn {
background: none;
border: none;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
opacity: .9;
transition: opacity .15s ease;
}
.itdo-player-btn:hover { opacity: 1; }
.itdo-player-vol {
display: flex;
align-items: center;
gap: 4px;
}
.itdo-player-vol-slider {
width: 0;
opacity: 0;
transition: width .18s ease, opacity .18s ease, margin .18s ease;
accent-color: #ef4444;
height: 4px;
}
.itdo-player-vol:hover .itdo-player-vol-slider,
.itdo-player-vol:focus-within .itdo-player-vol-slider {
width: 70px;
opacity: 1;
margin-left: 2px;
}
.itdo-player-time {
color: #fff;
font-size: 12px;
font-variant-numeric: tabular-nums;
opacity: .9;
white-space: nowrap;
}
.itdo-player.stream-player-lg {
border-radius: 12px;
overflow: hidden;
aspect-ratio: 16 / 9;
}
.itdo-player.stream-player-lg video {
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
}
@media (max-width: 640px) {
.itdo-player-vol-slider { display: none; }
.itdo-player.stream-player-lg { border-radius: 0; aspect-ratio: auto; }
}
.stream-view-layout {
max-width: 1600px;
margin: 0 auto;
padding: 0 20px 32px;
display: grid;
grid-template-columns: minmax(0, 2.2fr) 360px;
gap: 20px;
}
.stream-chat-panel {
background: var(--bg-secondary);
border-radius: 12px;
display: flex;
flex-direction: column;
height: calc(100vh - 120px);
min-height: 480px;
}
.stream-info-box {
margin-top: 16px;
background: var(--bg-secondary);
padding: 18px;
border-radius: 12px;
}
.stream-meta-row {
display: flex;
align-items: flex-start;
gap: 14px;
}
.stream-meta-left { flex: 1; min-width: 0; }
.stream-meta-actions { display: flex; gap: 10px; flex-shrink: 0; align-items: center; }
.stream-viewers-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-secondary);
padding: 5px 12px;
background: var(--bg-primary);
border-radius: 20px;
}
.stream-viewers-badge svg { opacity: .7; }
@media (max-width: 900px) {
.stream-view-layout {
grid-template-columns: 1fr;
padding: 0 0 24px;
gap: 0;
}
.stream-chat-panel {
border-radius: 0;
height: 420px;
min-height: 320px;
margin-top: 0;
}
.stream-info-box {
border-radius: 0;
margin-top: 0;
border-top: 1px solid var(--border-color, rgba(255,255,255,.08));
}
.itdo-player { border-radius: 0; }
}
.donate-chip.selected { background:var(--accent-primary); color:#fff; border-color:var(--accent-primary); }
.stream-chat-donate {
display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:12px;
background:linear-gradient(90deg, rgba(255,215,106,.18), rgba(232,161,0,.10));
border:1px solid rgba(232,161,0,.35); font-weight:500;
}
/* ═══════════════════════════════════════════════════════════════
Telegram-style Channel Improvements
═══════════════════════════════════════════════════════════════ */
.channel-post-pinned {
display:flex; align-items:center; gap:6px;
padding:4px 10px; margin-bottom:6px;
font-size:12px; color:var(--accent-primary);
background:color-mix(in srgb, var(--accent-primary) 8%, transparent);
border-radius:8px; font-weight:600;
}
.channel-post-pinned svg { width:14px; height:14px; }
.channel-post-reactions {
display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;
}
.channel-reaction-btn {
display:inline-flex; align-items:center; gap:4px;
padding:4px 10px; border-radius:20px;
background:var(--bg-secondary); border:1px solid var(--border-color);
font-size:13px; cursor:pointer;
transition:background var(--dur-quick) var(--ease-smooth-out), border-color var(--dur-quick) var(--ease-smooth-out), transform var(--dur-quick) var(--ease-smooth-out);
}
.channel-reaction-btn:hover { background:var(--bg-hover); transform:scale(1.05); }
.channel-reaction-btn.active { background:color-mix(in srgb, var(--accent-primary) 15%, transparent); border-color:var(--accent-primary); }
.channel-reaction-count { font-weight:600; color:var(--text-primary); }
.channel-post-views {
display:flex; align-items:center; gap:4px;
font-size:12px; color:var(--text-secondary); margin-top:6px;
}
.channel-post-views svg { width:14px; height:14px; opacity:.6; }
/* ═══════════════════════════════════════════════════════════════
Discord-style Thread / Reply Improvements
═══════════════════════════════════════════════════════════════ */
.thread-indicator {
display:flex; align-items:center; gap:6px;
padding:6px 12px; margin-top:4px;
font-size:12px; color:var(--accent-primary);
background:color-mix(in srgb, var(--accent-primary) 6%, transparent);
border-radius:10px; cursor:pointer;
transition:background var(--dur-quick) var(--ease-smooth-out);
}
.thread-indicator:hover { background:color-mix(in srgb, var(--accent-primary) 12%, transparent); }
.thread-indicator svg { width:14px; height:14px; }
.thread-count { font-weight:600; }
/* Pinned message bar in chat */
.chat-pinned-bar {
display:flex; align-items:center; gap:8px;
padding:8px 14px; background:var(--bg-secondary);
border-bottom:1px solid var(--border-color);
font-size:13px;
transition:background var(--dur-quick) var(--ease-smooth-out);
}
.chat-pinned-bar:hover { background:var(--bg-hover); }
.chat-pinned-bar-icon { color:var(--accent-primary); display:flex; flex-shrink:0; }
.chat-pinned-bar-text { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-secondary); cursor:pointer; }
.chat-pinned-bar-author { font-weight:600; color:var(--text-primary); margin-right:4px; }
.chat-pinned-bar-count { font-weight:600; color:var(--accent-primary); margin-right:6px; font-variant-numeric:tabular-nums; }
/* Telegram-style stack of vertical bars — одна на каждый закреп, активная подсвечена */
.chat-pinned-bar-dots { display:flex; flex-direction:column; gap:3px; flex-shrink:0; width:3px; align-self:stretch; }
.chat-pinned-bar-dot { flex:1; width:3px; min-height:5px; border-radius:2px; background:var(--border-color); }
.chat-pinned-bar-dot.active { background:var(--accent-primary); }
.chat-pinned-bar-unpin {
flex-shrink:0; width:26px; height:26px; border-radius:50%; border:none; background:transparent;
color:var(--text-secondary); display:flex; align-items:center; justify-content:center; cursor:pointer;
transition:background var(--dur-quick) var(--ease-smooth-out), color var(--dur-quick) var(--ease-smooth-out);
}
.chat-pinned-bar-unpin:hover { background:var(--bg-hover); color:var(--text-primary); }
/* Voice channel status (Discord-style) */
.voice-channel-status {
display:flex; align-items:center; gap:8px;
padding:8px 12px; margin-top:4px;
background:color-mix(in srgb, var(--accent-repost) 8%, transparent);
border-radius:10px; font-size:12px;
}
.voice-channel-status .voice-status-dot {
width:8px; height:8px; border-radius:50%;
background:var(--accent-repost);
animation: pulse 1.5s ease infinite;
}
.voice-channel-status .voice-status-text { color:var(--accent-repost); font-weight:600; }
/* Typing indicator animation */
.typing-dots {
display:inline-flex; gap:3px; align-items:center;
}
.typing-dots span {
width:5px; height:5px; border-radius:50%;
background:var(--accent-primary);
animation: typingBounce 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay:.15s; }
.typing-dots span:nth-child(3) { animation-delay:.3s; }
@keyframes typingBounce {
0%,60%,100% { transform:translateY(0); opacity:.4; }
30% { transform:translateY(-4px); opacity:1; }
}
/* Channel subscriber count animation */
.channel-subs-count {
font-weight:700; color:var(--text-primary);
transition:transform var(--dur-quick) var(--ease-bounce);
}
.channel-subs-count.bumped { transform:scale(1.15); }
/* ═══════════════════════════════════════════════════════════════
Smooth page transitions
═══════════════════════════════════════════════════════════════ */
.page {
animation: slideInRight var(--dur-fast) var(--ease-smooth-out) both;
}
/* ═══════════════════════════════════════════════════════════════
Button improvements
═══════════════════════════════════════════════════════════════ */
.btn {
transition:background var(--dur-quick) var(--ease-smooth-out), color var(--dur-quick) var(--ease-smooth-out), transform var(--dur-quick) var(--ease-smooth-out), box-shadow var(--dur-quick) var(--ease-smooth-out);
}
.btn:active { transform:scale(.95); }
.btn-accent {
transition:background var(--dur-quick) var(--ease-smooth-out), transform var(--dur-quick) var(--ease-smooth-out), box-shadow var(--dur-quick) var(--ease-smooth-out);
}
.btn-accent:hover { box-shadow:0 2px 12px color-mix(in srgb, var(--accent-primary) 30%, transparent); transform:translateY(-1px); }
.btn-accent:active { transform:scale(.95) translateY(0); }
/* ═══════════════════════════════════════════════════════════════
transitions.dev P23 — Like button (heart fill + particles)
═══════════════════════════════════════════════════════════════ */
.post-action-btn.liked svg {
color: var(--accent-like);
fill: var(--accent-like);
animation: likeHeartPop 350ms cubic-bezier(0.34, 1.96, 0.64, 1) both;
}
@keyframes likeHeartPop {
0% { transform:scale(1); }
30% { transform:scale(1.35); }
60% { transform:scale(0.9); }
100% { transform:scale(1); }
}
/* P23 particle burst — pseudo-elements on liked button */
.post-action-btn.liked {
position: relative;
}
.post-action-btn.liked::before,
.post-action-btn.liked::after {
content: '';
position: absolute;
width: 4px; height: 4px;
border-radius: 50%;
background: var(--accent-like);
top: 50%; left: 50%;
pointer-events: none;
animation: likeParticle 600ms var(--ease-smooth-out) both;
}
.post-action-btn.liked::before {
animation-delay: 50ms;
--px: -12px; --py: -14px;
}
.post-action-btn.liked::after {
animation-delay: 100ms;
--px: 10px; --py: -16px;
}
@keyframes likeParticle {
0% { transform:translate(0,0) scale(1); opacity:1; }
100% { transform:translate(var(--px), var(--py)) scale(0); opacity:0; }
}
/* ═══════════════════════════════════════════════════════════════
transitions.dev P12 — Input shake on error
═══════════════════════════════════════════════════════════════ */
.input-error {
animation: inputShake 280ms var(--ease-smooth-out);
border-color: #e23014 !important;
box-shadow: 0 0 0 2px rgba(226,48,20,.15) !important;
}
@keyframes inputShake {
0% { transform:translateX(0); }
25% { transform:translateX(-6px); }
50% { transform:translateX(5px); }
75% { transform:translateX(-3px); }
100% { transform:translateX(0); }
}
/* ═══════════════════════════════════════════════════════════════
transitions.dev P16 — Tabs with sliding active indicator
═══════════════════════════════════════════════════════════════ */
.tabs {
position: relative;
--tab-indicator-left: 0px;
--tab-indicator-width: 0px;
}
.tabs::after {
content: '';
position: absolute;
bottom: 0;
left: var(--tab-indicator-left);
width: var(--tab-indicator-width);
height: 2px;
background: var(--accent-primary);
border-radius: 1px;
transition: left var(--dur-fast) var(--ease-smooth-out), width var(--dur-fast) var(--ease-smooth-out);
pointer-events: none;
}
.tab-btn {
border-bottom: none !important;
position: relative;
z-index: 1;
}
.tab-btn.active {
border-bottom-color: transparent !important;
}
/* ═══════════════════════════════════════════════════════════════
transitions.dev P22 — Toast open/close
═══════════════════════════════════════════════════════════════ */
.toast {
animation: toastIn 350ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes toastIn {
0% { opacity:0; transform:translateY(16px) scale(0.97); filter:blur(2px); }
100% { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
.toast.toast-exit {
animation: toastOut 250ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes toastOut {
0% { opacity:1; transform:translateY(0) scale(1); }
100% { opacity:0; transform:translateY(-8px) scale(0.97); filter:blur(1px); }
}
/* ═══════════════════════════════════════════════════════════════
transitions.dev P14 — Skeleton loader reveal
═══════════════════════════════════════════════════════════════ */
.skeleton {
background: var(--bg-secondary);
border-radius: 8px;
animation: skeletonPulse 1000ms ease-in-out infinite;
}
@keyframes skeletonPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
/* ═══════════════════════════════════════════════════════════════
transitions.dev P8 — Page slide (staggered children)
═══════════════════════════════════════════════════════════════ */
.page.active {
animation: pageSlideIn var(--dur-fast) var(--ease-smooth-out) both;
}
@keyframes pageSlideIn {
0% { opacity:0; transform:translateY(8px); filter:blur(3px); }
100% { opacity:1; transform:translateY(0); filter:blur(0); }
}
/* ═══════════════════════════════════════════════════════════════
transitions.dev P17 — Tooltip (title attribute)
═══════════════════════════════════════════════════════════════ */
[title] {
position: relative;
}
/* ═══════════════════════════════════════════════════════════════
transitions.dev P19 — Post card hover (subtle lift)
═══════════════════════════════════════════════════════════════ */
.post-card:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-elevated), 0 4px 12px rgba(0,0,0,.06);
}
/* ═══════════════════════════════════════════════════════════════
transitions.dev P24 — "Learn more" hover (chevron shift)
Applied to .btn-accent with arrow icons
═══════════════════════════════════════════════════════════════ */
.btn-accent svg {
transition: transform var(--dur-fast) var(--ease-smooth-out);
}
.btn-accent:hover svg {
transform: translateX(2px);
}
/* ═══════════════════════════════════════════════════════════════
transitions.dev P11 — Avatar hover spring
═══════════════════════════════════════════════════════════════ */
.avatar {
transition: transform var(--dur-fast) var(--ease-smooth-out);
}
/* аватар при наведении не увеличивается */
.avatar:active {
transform: scale(0.95);
transition-timing-function: cubic-bezier(0.34, 1.35, 0.64, 1);
}
/* ═══════════════════════════════════════════════════════════════
Reactions (Telegram/Instagram-style)
═══════════════════════════════════════════════════════════════ */
/* Панель выбора новой реакции (quickBar) по-прежнему скрыта до тапа на
пост и раскрывается через grid-морф. А сами уже поставленные реакции
(.reaction-chips) — прямой ребёнок .reaction-drawer, вне этого морфа,
поэтому видны сразу, без необходимости тапать по посту. */
.reaction-drawer-inner {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 320ms cubic-bezier(0.34, 1.25, 0.64, 1);
}
.reaction-drawer.open .reaction-drawer-inner {
grid-template-rows: 1fr;
}
.reaction-drawer-inner > .reaction-quick-bar {
overflow: hidden;
opacity: 0;
filter: blur(3px);
transition: opacity 200ms ease, filter 200ms ease;
min-height: 0;
}
.reaction-drawer.open .reaction-drawer-inner > .reaction-quick-bar {
opacity: 1;
filter: blur(0);
transition-delay: 70ms;
}
@media (prefers-reduced-motion: reduce) {
.reaction-drawer-inner, .reaction-drawer-inner > .reaction-quick-bar { transition: none !important; filter: none !important; }
}
.reaction-quick-bar {
display: flex;
gap: 2px;
margin-top: 6px;
}
.reaction-quick-btn {
width: 32px; height: 32px;
border-radius: 50%;
background: transparent;
border: none;
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
transition: transform var(--dur-quick) var(--ease-bounce), background var(--dur-quick);
}
.reaction-quick-btn:hover {
transform: scale(1.35);
background: var(--bg-hover);
}
.reaction-chips {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 6px;
}
.reaction-chip {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px 8px;
border-radius: 20px;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
font-size: 13px;
cursor: pointer;
transition: all var(--dur-quick) var(--ease-smooth-out);
}
.reaction-chip:hover {
background: var(--bg-hover);
transform: scale(1.05);
}
.reaction-chip.active {
background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
border-color: var(--accent-primary);
}
.reaction-chip-count {
font-weight: 600;
font-size: 12px;
color: var(--text-primary);
}
.msg-reactions {
display: flex;
flex-wrap: wrap;
gap: 3px;
margin-top: 4px;
justify-content: flex-end;
}
.msg-row.mine .msg-reactions {
justify-content: flex-start;
}
.reaction-picker {
position: fixed;
display: none;
gap: 4px;
padding: 8px 12px;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 28px;
box-shadow: 0 8px 32px rgba(0,0,0,.25);
z-index: 9999;
animation: slideInBottom var(--dur-fast) var(--ease-smooth-out) both;
}
.reaction-picker-btn {
width: 36px; height: 36px;
border-radius: 50%;
background: transparent;
border: none;
cursor: pointer;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: transform var(--dur-quick) var(--ease-bounce);
}
.reaction-picker-btn:hover {
transform: scale(1.3);
background: var(--bg-hover);
}
.link-preview-card {
display: flex;
flex-direction: column;
margin-top: 8px;
overflow: hidden;
background: var(--bg-hover);
border-radius: 12px;
border: 1px solid var(--border-color);
border-left: 3px solid var(--accent, var(--link-color));
cursor: pointer;
width: 100%;
max-width: 320px;
text-decoration: none;
color: inherit;
}
.link-preview-img {
display: block;
width: 100%;
max-height: 180px;
aspect-ratio: 1.91 / 1;
object-fit: cover;
background: rgba(128,128,128,.15);
}
.link-preview-body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
padding: 8px 10px 10px;
}
.link-preview-site {
font-size: 11px;
color: var(--text-secondary);
opacity: .85;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.link-preview-title {
font-weight: 600;
font-size: 13px;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.link-preview-desc {
font-size: 12px;
color: var(--text-secondary);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mention-link,
.hashtag-link,
.text-link {
color: var(--link-color);
text-decoration: none;
}
.mention-link,
.hashtag-link {
font-weight: 600;
}
.mention-link:hover,
.hashtag-link:hover,
.text-link:hover {
color: var(--link-color-hover);
text-decoration: underline;
}
.bubble.out .mention-link,
.bubble.out .hashtag-link,
.bubble.out .text-link,
.bubble.out .mention-link:hover,
.bubble.out .hashtag-link:hover,
.bubble.out .text-link:hover {
color: var(--bubble-out-link);
}
.poll-card {
background: var(--bg-hover);
border-radius: 12px;
padding: 12px;
margin: 4px 0;
max-width: 420px;
}
.poll-question {
font-weight: 700;
font-size: 14px;
margin-bottom: 10px;
}
.poll-options {
display: flex;
flex-direction: column;
gap: 6px;
}
.poll-option {
position: relative;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 8px;
cursor: pointer;
overflow: hidden;
transition: border-color .15s;
}
.poll-option:hover {
border-color: var(--accent-primary);
}
.poll-option.active {
border-color: var(--accent-primary);
background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-primary));
}
.poll-option-bar {
position: absolute;
left: 0; top: 0; bottom: 0;
background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
transition: width .3s;
pointer-events: none;
}
.poll-option-text {
position: relative;
z-index: 1;
font-size: 13px;
flex: 1;
}
.poll-option-count {
position: relative;
z-index: 1;
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
}
.poll-footer {
margin-top: 8px;
font-size: 11px;
color: var(--text-secondary);
}
.msg-row.bookmarked .msg-col::after {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--accent-primary);
border-radius: 0 2px 2px 0;
}
/* ═══════════════════════════════════════════════════════════════
Темы чата
Раньше «тема» была одной строкой `background: #2a1f1a` на .chat-window:
тёмный фон подставлялся и в светлом оформлении сайта, пузыри сообщений
не менялись вовсе, а сам выбор нигде не сохранялся и сбрасывался при
перезагрузке. Теперь тема — это набор переменных (фон + оба пузыря +
цвет ссылок в них), поэтому контраст остаётся корректным.
═══════════════════════════════════════════════════════════════ */
.chat-theme-btn {
background: transparent;
border: 2px solid transparent;
border-radius: 12px;
padding: 5px;
cursor: pointer;
transition: border-color .15s, transform .15s;
}
.chat-theme-btn:hover { border-color: var(--border-color); transform: translateY(-2px); }
.chat-theme-btn.active { border-color: var(--link-color); }
.chat-theme-preview {
position: relative;
width: 100%;
height: 64px;
border-radius: 9px;
overflow: hidden;
border: 1px solid var(--border-color);
}
/* Мини-превью с двумя пузырями, чтобы было видно не только фон */
.chat-theme-preview::before,
.chat-theme-preview::after {
content: '';
position: absolute;
height: 12px;
border-radius: 6px;
}
.chat-theme-preview::before { left: 8px; top: 16px; width: 46%; background: var(--tp-in); }
.chat-theme-preview::after { right: 8px; top: 34px; width: 54%; background: var(--tp-out); }
.chat-theme-name { font-size: 12px; margin-top: 6px; color: var(--text-primary); }
.chat-window { background: var(--chat-bg); }
.chat-messages {
background-image: var(--chat-pattern);
background-attachment: fixed;
}
.chat-window.chat-theme-warm {
--chat-bg: linear-gradient(170deg, #f7e5d3 0%, #efd2b6 100%);
--chat-pattern: radial-gradient(circle at 20% 30%, rgba(255,255,255,.35) 0 2px, transparent 3px),
radial-gradient(circle at 70% 75%, rgba(180,110,60,.14) 0 2px, transparent 3px);
--bubble-in-bg: #fffaf4;
--bubble-in-text: #4a3527;
--bubble-out-bg: #d98b4a;
--bubble-out-text: #fffaf4;
--bubble-out-link: #fbe4cd;
--bubble-out-soft: rgba(255, 255, 255, .28);
--link-color: #b45f14;
--link-color-hover: #8d4a0f;
}
.chat-window.chat-theme-ocean {
--chat-bg: linear-gradient(170deg, #d6ecf5 0%, #b3d9ea 100%);
--chat-pattern: radial-gradient(circle at 25% 25%, rgba(255,255,255,.4) 0 2px, transparent 3px),
radial-gradient(circle at 75% 70%, rgba(20,90,130,.12) 0 2px, transparent 3px);
--bubble-in-bg: #f6fcff;
--bubble-in-text: #17384a;
--bubble-out-bg: #2b8ab8;
--bubble-out-text: #f6fcff;
--bubble-out-link: #cfeaf8;
--bubble-out-soft: rgba(255, 255, 255, .28);
--link-color: #12688f;
--link-color-hover: #0d4e6d;
}
.chat-window.chat-theme-forest {
--chat-bg: linear-gradient(170deg, #dcecd6 0%, #bcd9b3 100%);
--chat-pattern: radial-gradient(circle at 30% 20%, rgba(255,255,255,.38) 0 2px, transparent 3px),
radial-gradient(circle at 70% 80%, rgba(40,90,40,.12) 0 2px, transparent 3px);
--bubble-in-bg: #f8fdf6;
--bubble-in-text: #223b1f;
--bubble-out-bg: #4f8f45;
--bubble-out-text: #f8fdf6;
--bubble-out-link: #d8f0d2;
--bubble-out-soft: rgba(255, 255, 255, .26);
--link-color: #2f6f27;
--link-color-hover: #21521b;
}
.chat-window.chat-theme-midnight {
--chat-bg: linear-gradient(170deg, #171a2e 0%, #0d0f1d 100%);
--chat-pattern: radial-gradient(circle at 22% 28%, rgba(255,255,255,.10) 0 2px, transparent 3px),
radial-gradient(circle at 78% 72%, rgba(120,140,255,.12) 0 2px, transparent 3px);
--bubble-in-bg: #23273f;
--bubble-in-text: #e4e6f5;
--bubble-out-bg: #4a56b8;
--bubble-out-text: #f2f3ff;
--bubble-out-link: #cdd3ff;
--bubble-out-soft: rgba(255, 255, 255, .2);
--link-color: #8fa2ff;
--link-color-hover: #adbaff;
}
.chat-window.chat-theme-rose {
--chat-bg: linear-gradient(170deg, #f8e0e8 0%, #eec2d2 100%);
--chat-pattern: radial-gradient(circle at 28% 22%, rgba(255,255,255,.42) 0 2px, transparent 3px),
radial-gradient(circle at 72% 78%, rgba(160,50,90,.12) 0 2px, transparent 3px);
--bubble-in-bg: #fff8fb;
--bubble-in-text: #4a2233;
--bubble-out-bg: #c9527f;
--bubble-out-text: #fff8fb;
--bubble-out-link: #fbdbe7;
--bubble-out-soft: rgba(255, 255, 255, .28);
--link-color: #a82f5c;
--link-color-hover: #822346;
}
.chat-window.chat-theme-graphite {
--chat-bg: linear-gradient(170deg, #2c2f33 0%, #1d1f22 100%);
--chat-pattern: radial-gradient(circle at 24% 26%, rgba(255,255,255,.07) 0 2px, transparent 3px),
radial-gradient(circle at 76% 74%, rgba(255,255,255,.05) 0 2px, transparent 3px);
--bubble-in-bg: #35383d;
--bubble-in-text: #e6e8ea;
--bubble-out-bg: #5b6570;
--bubble-out-text: #f4f6f8;
--bubble-out-link: #d6e3f0;
--bubble-out-soft: rgba(255, 255, 255, .18);
--link-color: #9dc3e6;
--link-color-hover: #bcd7f2;
}
.chat-window.chat-theme-sunset {
--chat-bg: linear-gradient(170deg, #3a2350 0%, #7a3358 55%, #b8574a 100%);
--chat-pattern: radial-gradient(circle at 20% 30%, rgba(255,255,255,.12) 0 2px, transparent 3px),
radial-gradient(circle at 80% 70%, rgba(255,200,120,.14) 0 2px, transparent 3px);
--bubble-in-bg: rgba(30, 18, 40, .78);
--bubble-in-text: #f6ecf4;
--bubble-out-bg: #e08a4c;
--bubble-out-text: #2c1a12;
--bubble-out-link: #5c2c0a;
--bubble-out-soft: rgba(0, 0, 0, .18);
--link-color: #ffc98a;
--link-color-hover: #ffdcb0;
}
/* В тёмном оформлении сайта светлые обои слепят — приглушаем их,
сохраняя оттенок темы. */
[data-theme=dark] .chat-window.chat-theme-warm {
--chat-bg: linear-gradient(170deg, #2e211a 0%, #1d1512 100%);
--bubble-in-bg: #3a2a20;
--bubble-in-text: #f0e2d6;
}
[data-theme=dark] .chat-window.chat-theme-ocean {
--chat-bg: linear-gradient(170deg, #162a35 0%, #0e1b22 100%);
--bubble-in-bg: #1f3a48;
--bubble-in-text: #dceaf2;
}
[data-theme=dark] .chat-window.chat-theme-forest {
--chat-bg: linear-gradient(170deg, #1b2d1a 0%, #111c11 100%);
--bubble-in-bg: #263c24;
--bubble-in-text: #dfeeda;
}
[data-theme=dark] .chat-window.chat-theme-rose {
--chat-bg: linear-gradient(170deg, #331a25 0%, #1f1017 100%);
--bubble-in-bg: #422231;
--bubble-in-text: #f4dee7;
}
/* ═══════════════════════════════════════════════════════════════
Поиск по чату
═══════════════════════════════════════════════════════════════ */
.chat-search-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-bottom: 1px solid var(--border-color);
background: var(--glass-bg);
backdrop-filter: blur(16px);
}
.chat-search-bar .p13-search { flex: 1; min-width: 0; }
.chat-search-count {
font-size: 12px;
color: var(--text-secondary);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.chat-search-nav,
.chat-search-close {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex-shrink: 0;
border: none;
border-radius: 8px;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
transition: background .15s, color .15s;
}
.chat-search-nav:hover:not(:disabled),
.chat-search-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.chat-search-nav:disabled { opacity: .35; cursor: default; }
.chat-search-close { color: var(--text-primary); }
.msg-row.search-hidden { display: none !important; }
.msg-search-hit {
background: var(--link-color);
color: #fff;
border-radius: 3px;
padding: 0 1px;
}
.msg-row.search-current .bubble {
outline: 2px solid var(--link-color);
outline-offset: 2px;
}
.msg-text { display: inline; }
/* ═══════════════════════════════════════════════════════════════
Опросы в постах
═══════════════════════════════════════════════════════════════ */
.poll-box { margin-bottom: 10px; }
.post-poll-option {
display: block;
width: 100%;
text-align: left;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 8px 10px;
margin-bottom: 6px;
background: transparent;
color: var(--text-primary);
cursor: pointer;
font-size: 14px;
transition: border-color .15s, background .15s;
}
.post-poll-option:hover { border-color: var(--link-color); background: var(--bg-hover); }
.post-poll-row {
position: relative;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 8px 10px;
margin-bottom: 6px;
overflow: hidden;
}
.post-poll-row.mine { border-color: var(--link-color); }
.post-poll-bar {
position: absolute;
left: 0; top: 0; bottom: 0;
background: var(--link-color);
opacity: .16;
transition: width .35s var(--ease-smooth-out, ease);
}
.post-poll-row-inner {
position: relative;
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 14px;
}
.post-poll-pct { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.post-poll-footer { font-size: 12px; color: var(--text-secondary); }
.msg-row-poll { justify-content: center; }
.poll-option.disabled { cursor: default; opacity: .85; }
.poll-option.disabled:hover { border-color: var(--border-color); }
.poll-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.poll-close-btn {
border: none;
background: transparent;
color: var(--link-color);
font-size: 11px;
font-weight: 600;
cursor: pointer;
padding: 2px 4px;
border-radius: 6px;
}
.poll-close-btn:hover { background: var(--bg-hover); }
/* ═══════════════════════════════════════════════════════════════
Slow mode
═══════════════════════════════════════════════════════════════ */
.group-slowmode-box {
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 10px 12px;
}
.group-slowmode-head {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
margin-bottom: 4px;
}
.group-slowmode-hint {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 8px;
}
.group-slowmode-options {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.slowmode-chip {
border: 1px solid var(--border-color);
background: transparent;
color: var(--text-primary);
border-radius: 999px;
padding: 5px 12px;
font-size: 12.5px;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
}
.slowmode-chip:hover { border-color: var(--link-color); }
.slowmode-chip.active {
background: var(--accent-primary);
border-color: var(--accent-primary);
color: var(--text-inverse);
}
.chat-slowmode-hint {
font-size: 12px;
color: var(--text-secondary);
padding: 4px 12px 0;
display: flex;
align-items: center;
gap: 6px;
}
/* ═══════════════════════════════════════════════════════════════
Экспорт чата
═══════════════════════════════════════════════════════════════ */
.export-format-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.export-format-btn {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
text-align: left;
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 12px 14px;
background: transparent;
color: var(--text-primary);
cursor: pointer;
transition: border-color .15s, background .15s;
}
.export-format-btn:hover { border-color: var(--link-color); background: var(--bg-hover); }
.export-format-btn svg { flex-shrink: 0; color: var(--text-secondary); }
.export-format-title { font-size: 14px; font-weight: 600; }
.export-format-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.export-options {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--border-color);
display: flex;
flex-direction: column;
gap: 8px;
}
.export-option-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-primary);
}
/* ═══════════════════════════════════════════════════════════════
Доп. фичи чата: таймер/планирование, волна, папки, обои, шрифт
═══════════════════════════════════════════════════════════════ */
.chat-extra-btn {
width: 38px; height: 38px; border: none; background: transparent;
color: var(--text-secondary); border-radius: 50%; cursor: pointer;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chat-extra-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.chat-extra-btn.active { color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 14%, transparent); }
.chat-send-indicator {
font-size: 11px; color: var(--accent-primary); display: inline-flex; align-items: center;
padding: 2px 8px; border-radius: 10px; margin: 0 4px;
background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
}
.chat-extra-popover {
position: fixed; z-index: 9999; display: none; min-width: 180px;
background: var(--bg-secondary); border: 1px solid var(--border-color);
border-radius: 12px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.popover-title { font-size: 12px; color: var(--text-secondary); padding: 4px 8px 6px; }
.popover-item {
display: block; width: 100%; text-align: left; border: none; background: transparent;
color: var(--text-primary); padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.popover-item:hover { background: var(--bg-hover); }
.msg-selfdestruct, .msg-scheduled-badge {
display: inline-block; font-size: 11px; color: var(--text-secondary);
margin-top: 3px; padding: 1px 7px; border-radius: 8px; background: var(--bg-hover);
}
.msg-scheduled-badge { color: var(--link-color); }
.voice-wave { display: flex; align-items: center; gap: 2px; height: 28px; min-width: 80px; flex: 1; }
.voice-bar { width: 3px; background: currentColor; border-radius: 2px; opacity: .55; }
.bubble.out .voice-wave { color: var(--bubble-out-soft); }
.bubble.in .voice-wave { color: var(--bubble-in-soft); }
/* Папки чатов — табы в стиле Telegram, с плавающей полоской-индикатором */
.chat-folder-bar {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-bottom: 1px solid var(--border-color);
}
.chat-folder-tabs {
position: relative;
display: flex;
align-items: center;
gap: 2px;
padding: 0 8px;
height: 44px;
white-space: nowrap;
}
.folder-chip {
position: relative;
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 5px;
height: 44px;
padding: 0 14px;
border: none;
background: transparent;
color: var(--text-secondary);
font-size: 14px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
}
.folder-chip.active { color: var(--accent-primary); }
.folder-chip-badge {
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: var(--accent-primary);
color: var(--text-inverse);
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.folder-chip.active .folder-chip-badge { background: var(--accent-primary); }
.folder-chip-selection {
position: absolute;
bottom: 0;
height: 3px;
border-radius: 2px 2px 0 0;
background: var(--accent-primary);
left: 0;
width: 0;
}
.folder-add { color: var(--accent-primary); font-weight: 700; font-size: 18px; padding: 0 12px; }
/* Обои чата */
.chat-window.chat-wallpaper-dots { background-color: var(--chat-bg); background-image: radial-gradient(var(--border-color) 1.5px, transparent 1.5px); background-size: 18px 18px; }
.chat-window.chat-wallpaper-lines { background-color: var(--chat-bg); background-image: repeating-linear-gradient(0deg, transparent, transparent 22px, var(--border-color) 22px, var(--border-color) 23px); }
.chat-window.chat-wallpaper-gradient-warm { background: linear-gradient(160deg,#f7e5d3,#efd2b6); }
.chat-window.chat-wallpaper-gradient-cool { background: linear-gradient(160deg,#d6ecf5,#b3d9ea); }
.chat-window.chat-wallpaper-gradient-sunset { background: linear-gradient(160deg,#3a2350,#7a3358 55%,#b8574a); }
.chat-window.chat-wallpaper-paper { background: #f3ede1; }
.chat-window.chat-wallpaper-carbon { background: repeating-linear-gradient(45deg,#1c1f22,#1c1f22 6px,#23272b 6px,#23272b 12px); }
.chat-wallpaper-preview { height: 40px; border-radius: 8px; border: 1px solid var(--border-color); }
.wp-none { background: var(--chatWindow, var(--bg-secondary)); }
.wp-dots { background: radial-gradient(var(--border-color) 1.5px, transparent 1.5px); background-size: 10px 10px; }
.wp-lines { background: repeating-linear-gradient(0deg, transparent, transparent 8px, var(--border-color) 8px, var(--border-color) 9px); }
.wp-gradient-warm { background: linear-gradient(160deg,#f7e5d3,#efd2b6); }
.wp-gradient-cool { background: linear-gradient(160deg,#d6ecf5,#b3d9ea); }
.wp-gradient-sunset { background: linear-gradient(160deg,#3a2350,#7a3358 55%,#b8574a); }
.wp-paper { background: #f3ede1; }
.wp-carbon { background: repeating-linear-gradient(45deg,#1c1f22,#1c1f22 6px,#23272b 6px,#23272b 12px); }
.ct-section-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: 16px 0 8px; }
/* Размер шрифта чата (управляется --chat-font-size из JS) */
.chat-window { --chat-font-size: 15px; }
.chat-window .bubble, .chat-window .msg-text, .chat-window .msg-time { font-size: var(--chat-font-size); }
.chat-window .chat-input { font-size: var(--chat-font-size); }
/* ── Visual system refresh ──────────────────────────────────────── */
:root {
--focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 28%, transparent);
--shadow-soft: 0 8px 24px color-mix(in srgb, var(--text-primary) 9%, transparent);
--shadow-hover: 0 14px 34px color-mix(in srgb, var(--text-primary) 14%, transparent);
--surface-highlight: rgba(255, 255, 255, .64);
}
[data-theme=dark] {
--surface-highlight: rgba(255, 255, 255, .06);
}
body {
/* Тёплая бумажная текстура: лёгкое зерно + мягкое виньетирование по краям,
поверх базового цвета страницы — создаёт ощущение бумаги, а не
плоской заливки. */
background:
radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent-secondary) 8%, transparent), transparent 28rem),
radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--accent-secondary) 5%, transparent), transparent 32rem),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.35 0 0 0 0 0.27 0 0 0 0 0.16 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
var(--bg-primary);
letter-spacing: 0;
}
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.sidebar {
background: color-mix(in srgb, var(--bg-secondary) 88%, var(--accent-secondary));
border-right-color: color-mix(in srgb, var(--accent-secondary) 18%, var(--border-color));
padding: 24px 14px;
}
.sidebar-logo { margin-bottom: 18px; letter-spacing: .02em; }
.sidebar-nav { gap: 4px; }
.nav-item {
min-height: 44px;
border: 1px solid transparent;
border-radius: 12px;
transition: background-color var(--dur-quick) var(--ease-smooth-out), color var(--dur-quick) var(--ease-smooth-out), transform var(--dur-quick) var(--ease-smooth-out), border-color var(--dur-quick) ease;
}
.nav-item:hover { border-color: color-mix(in srgb, var(--accent-secondary) 22%, transparent); }
.nav-item.active {
color: var(--accent-primary);
background: color-mix(in srgb, var(--accent-secondary) 13%, transparent);
border-color: color-mix(in srgb, var(--accent-secondary) 26%, transparent);
}
.main-content { background: color-mix(in srgb, var(--bg-primary) 92%, var(--block-bg)); }
.page-header {
padding: 16px 22px;
background: color-mix(in srgb, var(--glass-bg) 90%, var(--bg-primary));
border-bottom-color: color-mix(in srgb, var(--accent-secondary) 16%, var(--border-color));
box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-secondary) 7%, transparent);
}
.page-header h1 { letter-spacing: 0; }
.post-card {
padding: 16px;
margin: 10px 16px 0;
border-color: color-mix(in srgb, var(--accent-secondary) 13%, var(--border-color));
box-shadow: var(--shadow-soft);
}
.post-card:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--accent-secondary) 32%, var(--border-color));
box-shadow: var(--shadow-hover);
}
.post-text { line-height: 1.55; }
.post-action-btn { min-width: 36px; min-height: 36px; border-radius: 10px; }
.post-action-btn:hover { background: color-mix(in srgb, var(--accent-secondary) 12%, transparent); }
.btn {
min-height: 40px;
border-radius: 10px;
font-weight: 650;
letter-spacing: 0;
transition: transform var(--dur-quick) var(--ease-smooth-out), box-shadow var(--dur-quick) ease, background-color var(--dur-quick) ease, border-color var(--dur-quick) ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-primary) 16%, transparent); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
.btn-accent, .btn-primary { background: var(--accent-primary); color: var(--text-inverse); }
.input, select, textarea, .chat-input {
border-radius: 10px;
border-color: color-mix(in srgb, var(--accent-secondary) 18%, var(--border-color));
background: color-mix(in srgb, var(--block-bg) 86%, var(--bg-primary));
transition: border-color var(--dur-quick) ease, box-shadow var(--dur-quick) ease, background-color var(--dur-quick) ease;
}
.input:focus, select:focus, textarea:focus, .chat-input:focus {
border-color: var(--accent-secondary);
box-shadow: var(--focus-ring);
background: var(--block-bg);
}
/* Плавающее поле ввода в чате: оно уже стало пилюлей с тенью выше в
файле, но общий рескин инпутов (выше) переопределяет border-radius/фон/
тень на фокусе для .chat-input тоже — возвращаем ему форму пилюли и
собственную «парящую» тень поверх этого общего правила. */
.chat-input {
border-radius: 22px;
background: var(--block-bg);
box-shadow: 0 4px 16px rgba(74,45,20,.10), 0 1px 3px rgba(74,45,20,.08);
}
.chat-input:focus {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 15%, transparent), 0 6px 20px rgba(74,45,20,.14);
}
.modal-overlay { background: rgba(28, 20, 12, .56); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal { box-shadow: 0 24px 80px rgba(28, 20, 12, .24); border: 1px solid color-mix(in srgb, var(--accent-secondary) 18%, var(--border-color)); }
.right-panel { padding: 24px 20px; }
@media (max-width: 1173px) {
.sidebar { padding: 10px 8px; }
.main-content { background: var(--bg-primary); }
.page-header { padding: 14px 16px; border-radius: 0; }
.post-card { margin: 8px 10px 0; padding: 14px; }
}
@media (max-width: 600px) {
.post-card { border-radius: 12px; }
.post-card:hover { transform: none; box-shadow: var(--shadow-soft); }
.btn { min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
.nav-item, .post-card, .btn, .input, select, textarea, .chat-input { transition: none; }
}
/* ── Companion размеры для .ui-icon (Material Symbols/Icons, Phosphor) ──
Свитчер набора иконок (setIconSet) подменяет