:root
{
--font-family-base: "Segoe UI", Arial, sans-serif;
--font-size-base: 15px;
--line-height-base: 1.5;
--color-bg: rgba(246, 248, 252, 1);
--color-surface: rgba(255, 255, 255, 1);
--color-surface-soft: rgba(240, 244, 248, 1);
--color-surface-muted: rgba(248, 250, 255, 1);
--color-border: rgba(223, 229, 236, 1);
--color-border-strong: rgba(199, 210, 224, 1);
--color-text: rgba(30, 37, 45, 1);
--color-muted: rgba(104, 114, 125, 1);
--color-muted-soft: rgba(128, 138, 150, 1);
--color-accent: rgba(84, 127, 255, 1);
--color-accent-hover: rgba(73, 116, 245, 1);
--color-accent-soft: rgba(232, 239, 255, 1);
--color-accent-soft-strong: rgba(220, 231, 255, 1);
--color-success: rgba(45, 124, 78, 1);
--color-success-soft: rgba(232, 246, 236, 1);
--color-success-text: rgba(45, 124, 78, 1);
--color-error: rgba(184, 72, 72, 1);
--color-error-soft: rgba(255, 238, 238, 1);
--color-error-text: rgba(184, 72, 72, 1);
--color-like: rgba(255, 84, 120, 1);
--color-like-soft: rgba(255, 238, 244, 1);
--color-warning: rgba(181, 126, 33, 1);
--color-warning-soft: rgba(255, 246, 226, 1);
--color-info-soft: rgba(238, 245, 255, 1);
--color-info-text: rgba(54, 95, 185, 1);
--color-white: rgba(255, 255, 255, 1);
--color-black: rgba(0, 0, 0, 1);
--color-overlay: rgba(30, 37, 45, 0.48);
--color-overlay-strong: rgba(30, 37, 45, 0.62);
--color-shadow-soft: rgba(30, 37, 45, 0.06);
--color-shadow-card: rgba(84, 127, 255, 0.06);
--color-shadow-strong: rgba(30, 37, 45, 0.22);
--color-shadow-float: rgba(30, 37, 45, 0.12);
--color-verified: rgba(45, 128, 255, 1);
--shadow-soft: 0 20px 50px rgba(30, 37, 45, 0.06);
--shadow-card: 0 12px 32px rgba(84, 127, 255, 0.06);
--shadow-modal: 0 32px 100px rgba(30, 37, 45, 0.22);
}

span
{
font-size: 15px;
}

button,
a,
textarea,
input,
div,
alert,
toast,
close
{
text-decoration: none;
box-shadow: none;
outline: none;
-webkit-tap-highlight-color: transparent;
}

button:hover,
button:focus,
button:active,
a:hover,
a:focus,
a:active,
textarea:hover,
textarea:focus,
textarea:active,
input:hover,
input:focus,
input:active,
div:hover,
div:focus,
div:active,
alert:hover,
alert:focus,
alert:active,
toast:hover,
toast:focus,
toast:active,
close:hover,
close:focus,
close:active
{
text-decoration: none;
box-shadow: none;
outline: none;
}

*
{
box-sizing: border-box;
font-family: var(--font-family-base);
}

html
{
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
scroll-behavior: smooth;
}

body
{
width: 100%;
min-height: 100vh;
margin: 0;
padding: 0;
background:
radial-gradient(circle at top right, rgba(84, 127, 255, 0.12) 0%, rgba(84, 127, 255, 0) 32%),
linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(84, 127, 255, 0.15) 100%);
color: var(--color-text);
font-family: var(--font-family-base);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
}

body.modal-open
{
overflow: hidden;
touch-action: none;
}

a
{
color: inherit;
}

.post-text a,
.article-editor a
{
color: var(--color-accent);
transition: 0.3s all ease;
}

.post-text a:hover,
.article-editor a:hover
{
opacity: 0.8;
}

img
{
max-width: 100%;
display: block;
}

.page
{
min-height: 100vh;
display: flex;
flex-direction: column;
}

.topbar
{
position: sticky;
top: 0;
z-index: 200;
width: 100%;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(223, 229, 236, 0.9);
}

.topbar-inner
{
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 18px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}

.logo
{
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 22px;
font-weight: 400;
color: var(--color-text);
}

.logo i
{
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
color: var(--color-white);
background: var(--color-accent);
font-size: 14px;
}

.topbar-actions
{
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}

.topbar-messages-link
{
white-space: nowrap;
}

.topbar-notifications-button
{
position: relative;
white-space: nowrap;
overflow: visible;
}

.topbar-counter
{
width: 23px;
position: absolute;
top: -8px;
right: -8px;
min-width: 20px;
height: 24px;
padding: 0 8px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(96, 138, 255, 1) 0%, rgba(84, 127, 255, 1) 100%);
color: var(--color-white);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
border: 2px solid var(--color-white);
}

.menu-counter
{
margin-left: auto;
min-width: 24px;
height: 24px;
padding: 0 8px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(255, 104, 145, 1) 0%, rgba(255, 84, 120, 1) 100%);
color: var(--color-white);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
}

.user-menu
{
position: relative;
}

.topbar-user
{
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 48px;
padding: 0 16px;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-surface-soft);
color: var(--color-text);
font-size: 15px;
font-weight: 400;
cursor: pointer;
transition: 0.25s all ease;
}

.topbar-user:hover
{
background: rgba(232, 239, 255, 0.65);
}

.topbar-user-button
{
font-family: var(--font-family-base);
}

.user-menu-dropdown
{
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 220px;
padding: 8px;
border: 1px solid var(--color-border);
border-radius: 18px;
background: rgba(255, 255, 255, 0.98);
display: none;
z-index: 30;
transition: 0.5s all ease;
opacity: 0;
backdrop-filter: blur(12px);
}

.user-menu-dropdown.open
{
display: flex;
flex-direction: column;
gap: 8px;
width: auto;
padding: 20px 20px;
min-width: 260px;
opacity: 1;
}

#userMenuToggle i
{
transition: 0.1s all ease;
}

#userMenuToggle.open i,
#userMenuToggle i.open
{
transform: rotate(180deg);
}

.user-menu-item,
.user-menu-button
{
display: flex;
align-items: center;
gap: 12px;
min-height: 46px;
padding: 0 14px;
border: 1px solid var(--color-border);
border-radius: 14px;
background: var(--color-surface-soft);
font-weight: 400;
cursor: pointer;
width: 100%;
transition: 0.25s all ease;
}

.user-menu-item:hover,
.user-menu-button:hover
{
background: rgba(232, 239, 255, 0.7);
}

.content
{
width: 100%;
max-width: 1540px;
margin: 0 auto;
padding: 24px;
flex: 1;
}

.auth-wrap
{
min-height: calc(100vh - 160px);
display: flex;
align-items: center;
justify-content: center;
}

.auth-card
{
width: 100%;
max-width: 460px;
padding: 32px;
border: 1px solid var(--color-border);
border-radius: 26px;
background: rgba(255, 255, 255, 0.98);
}

.auth-title
{
font-size: 30px;
font-weight: 400;
margin-bottom: 8px;
}

.auth-subtitle
{
margin-bottom: 24px;
color: var(--color-muted);
}

.auth-footer
{
margin-top: 20px;
display: flex;
justify-content: center;
gap: 8px;
color: var(--color-muted);
}

.auth-footer a
{
color: var(--color-accent);
font-weight: 400;
}

.main-layout
{
display: grid;
grid-template-columns: 480px 1fr;
gap: 24px;
align-items: start;
margin-bottom: 16px;
min-height: calc(100vh - 150px);
}

.left-panel
{
display: flex;
flex-direction: column;
gap: 24px;
position: sticky;
top: 24px;
align-self: start;
max-height: calc(100vh - 120px);
overflow-y: auto;
overflow-x: hidden;
padding-right: 6px;
scrollbar-gutter: stable;
}

.right-panel
{
display: flex;
flex-direction: column;
gap: 24px;
max-height: calc(100vh - 120px);
overflow-y: auto;
overflow-x: hidden;
padding-right: 6px;
scrollbar-gutter: stable;
}

.profile-layout
{
display: flex;
flex-direction: column;
gap: 24px;
}

.settings-layout
{
display: flex;
flex-direction: column;
gap: 24px;
}

.settings-grid
{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}

.messages-page
{
display: flex;
flex-direction: column;
gap: 24px;
}

.messages-hero
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}

.messages-hero-main
{
display: flex;
flex-direction: column;
gap: 8px;
}

.messages-hero-title
{
font-size: 32px;
font-weight: 400;
line-height: 1.2;
}

.messages-hero-subtitle
{
color: var(--color-muted);
font-size: 15px;
}

.messages-hero-actions
{
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}

.card
{
width: 100%;
padding: 20px;
border: 1px solid var(--color-border);
border-radius: 26px;
background: rgba(255, 255, 255, 0.96);
}

.card .form-grid:not(:last-child)
{
margin-bottom: 16px;
}

.sticky-card
{
position: sticky;
top: 24px;
}

.section-title
{
display: flex;
align-items: center;
gap: 12px;
font-size: 18px;
font-weight: 400;
margin-bottom: 25px;
margin-left: 5px;
}

.chat-section-title
{
margin-bottom: 0;
margin-left: 0;
}

.section-subtitle
{
color: var(--color-muted);
margin-bottom: 18px;
}

.form-grid
{
display: flex;
flex-direction: column;
gap: 16px;
}

.composer-form
{
display: flex;
flex-direction: column;
gap: 16px;
}

.form-busy
{
pointer-events: none;
opacity: 0.72;
}

.form-busy .btn.is-loading
{
opacity: 1;
}

.field-row
{
justify-content: space-between;
align-items: center;
display: flex;
flex-direction: row;
gap: 8px;
}

.field-row-tight
{
justify-content: space-between;
align-items: center;
display: flex;
flex-direction: row;
gap: 12px;
margin-bottom: 10px;
}

.field
{
display: flex;
flex-direction: column;
gap: 8px;
}

.field label
{
font-size: 14px;
font-weight: 400;
}

input
{
width: 100%;
height: 48px;
padding: 0 14px;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-surface-soft);
color: var(--color-text);
font-family: var(--font-family-base);
font-size: 15px;
transition: 0.2s border-color ease, 0.2s background ease;
}

textarea
{
width: 100%;
min-height: 120px;
padding: 14px;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-surface-soft);
color: var(--color-text);
font-family: Arial, sans-serif;
font-size: 14px;
resize: none;
transition: 0.2s border-color ease, 0.2s background ease;
}

input::placeholder,
textarea::placeholder
{
color: var(--color-muted);
}

button
{
font-family: Arial, sans-serif;
}

#chatSendButton
{
background: transparent !important;
color: var(--color-accent);
border: none;
}

#chatSendButton i
{
color: var(--color-accent);
}

.btn
{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 0 18px;
border: 1px solid var(--color-accent);
border-radius: 16px;
background: linear-gradient(180deg, rgba(96, 138, 255, 1) 0%, rgba(84, 127, 255, 1) 100%);
color: var(--color-white);
font-size: 15px;
font-weight: 400;
cursor: pointer;
transition: transform 0.2s ease, opacity 0.5s ease, background 0.2s ease;
}

.btn:hover
{
opacity: 0.9;
}

.btn-secondary
{
background: var(--color-surface-soft);
border: 1px solid var(--color-border);
color: var(--color-text);
}

.btn-small
{
min-height: 42px;
padding: 0 16px;
font-size: 14px;
}

.btn:disabled
{
opacity: 0.7;
cursor: not-allowed;
transform: none;
}

.btn.is-loading
{
position: relative;
}

.btn-spinner
{
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: currentColor;
border-radius: 50%;
animation: spin 0.8s linear infinite;
flex-shrink: 0;
}

.btn-secondary .btn-spinner,
.post-action-button .btn-spinner
{
border-color: rgba(104, 114, 125, 0.28);
border-top-color: currentColor;
}

.file-picker
{
grid-template-columns: 1fr 200px;
display: grid;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}

.native-file-input
{
display: none;
}

.file-picker-button
{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 0 18px;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-surface-soft);
color: var(--color-text);
font-weight: 400;
cursor: pointer;
width: 100%;
transition: 0.2s all ease;
}

.file-picker-button:hover
{
background: rgba(232, 239, 255, 0.7);
}

.file-picker-name
{
min-height: 48px;
padding: 0 16px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-surface-soft);
color: var(--color-muted);
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.preview-box
{
padding: 0;
border: none;
border-radius: 16px;
background: none;
}

.preview-title
{
font-size: 14px;
font-weight: 400;
margin-bottom: 10px;
}

.preview-content
{
overflow: hidden;
border-radius: 16px;
background: transparent;
display: flex;
flex-direction: column;
gap: 12px;
}

.preview-content img
{
width: 100%;
max-height: 170px;
object-fit: cover;
}

.preview-content video
{
width: 100%;
max-height: 220px;
background: var(--color-surface);
}

.hidden
{
display: none !important;
}

.profile-card
{
display: flex;
flex-direction: column;
gap: 16px;
}

.profile-line
{
display: flex;
align-items: center;
gap: 16px;
}

.user-link
{
display: inline-flex;
align-items: center;
gap: 12px;
}

.user-link-row
{
width: 100%;
}

.avatar
{
width: 46px;
height: 46px;
border-radius: 50%;
background: linear-gradient(180deg, rgba(232, 239, 255, 1) 0%, rgba(214, 226, 255, 1) 100%);
color: var(--color-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 400;
overflow: hidden;
flex-shrink: 0;
}

.avatar img
{
width: 100%;
height: 100%;
object-fit: cover;
}

.avatar-large
{
width: 36px;
height: 36px;
font-size: 22px;
}

.avatar-topbar
{
width: 34px;
height: 34px;
font-size: 15px;
}

.avatar-hero
{
width: 96px;
height: 96px;
font-size: 36px;
}

.avatar-hero-small
{
width: 184px;
height: 184px;
font-size: 30px;
border: 1px solid var(--color-border);
}

.avatar-small
{
width: 42px;
height: 42px;
font-size: 16px;
}

.profile-meta
{
display: flex;
flex-direction: column;
gap: 4px;
}

.profile-name
{
font-size: 20px;
font-weight: 400;
}

.profile-note
{
color: var(--color-muted);
}

.mini-list
{
display: flex;
flex-direction: column;
gap: 10px;
}

.mini-item
{
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-surface-soft);
}

.search-row
{
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}

.search-box
{
flex: 1;
min-width: 220px;
}

.posts-list
{
display: flex;
flex-direction: column;
gap: 16px;
}

.post-card
{
padding: 18px;
border: 1px solid var(--color-border);
border-radius: 26px;
background: var(--color-surface);
transition: opacity 0.18s ease, transform 0.18s ease, max-height 0.22s ease, margin 0.22s ease, padding 0.22s ease, border-width 0.22s ease;
}

.post-card.is-removing
{
opacity: 0;
display: none;
transform: translateY(-6px);
max-height: 0 !important;
margin: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
border-width: 0 !important;
overflow: hidden;
}

.post-card.flash
{
animation: postFlash 1.2s ease;
}

@keyframes postFlash
{
0% { transform: scale(1); }
30% { transform: scale(1.01); }
100% { transform: scale(1); box-shadow: none; }
}

.post-head
{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}

.post-user-row
{
display: inline-flex;
align-items: center;
gap: 14px;
}

.post-user-meta
{
display: flex;
flex-direction: column;
}

.post-user-name
{
font-size: 15px;
font-weight: 400;
display: inline-flex;
align-items: center;
gap: 8px;
}

.post-user-date
{
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}

.post-user-date span
{
font-size: 12px;
color: var(--color-muted);
opacity: 0.7;
}

.post-edited
{
font-size: 12px;
color: var(--color-muted);
opacity: 0.4 !important;
text-transform: uppercase;
}

.post-text
{
margin-top: 14px;
font-size: 15px;
line-height: 1.7;
white-space: pre-wrap;
word-break: break-word;
}

.post-media
{
margin-top: 14px;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: 20px;
background: var(--color-surface-soft);
}

.post-media img
{
width: 100%;
max-height: 340px;
object-fit: cover;
transition: 0.3s all ease;
cursor: pointer;
}

.post-media img:hover
{
opacity: 0.9;
}

.post-media video
{
width: 100%;
max-height: 540px;
background: var(--color-surface-soft);
}

.post-media-grid
{
margin-top: 14px;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 10px;
}

.post-media-grid .media-tile
{
position: relative;
overflow: hidden;
border: none;
border-radius: 20px;
background: var(--color-surface-soft);
padding: 0;
cursor: pointer;
grid-column: span 4;
min-height: 160px;
display: flex;
align-items: stretch;
justify-content: stretch;
transition: 0.25s transform ease, 0.25s opacity ease;
}

.post-media-grid .media-tile:hover
{
transform: translateY(0px);
}

.post-media-grid .media-tile:nth-child(1):only-child
{

}

.post-media-grid .media-tile:nth-child(1):nth-last-child(2),
.post-media-grid .media-tile:nth-child(2):nth-last-child(1)
{
grid-column: span 6;
min-height: 280px;
}

.post-media-grid .media-tile:nth-child(1):nth-last-child(3)
{
grid-column: span 12;
max-height: 450px !important;
}

.post-media-grid .post-media-grid .media-tile:nth-child(1):nth-last-child(3)
{
max-height: 450px !important;
}

.post-media-grid .media-tile:nth-child(2):nth-last-child(2),
.post-media-grid .media-tile:nth-child(3):nth-last-child(1)
{
grid-column: span 6;
}

.post-media-grid .media-tile img,
.post-media-grid .media-tile video
{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.composer-existing-media-actions
{
display: flex;
justify-content: flex-end;
}

.post-tags
{
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}

.tag
{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-accent-soft);
color: var(--color-accent);
font-size: 13px;
font-weight: 400;
transition: 0.3s all ease;
cursor: pointer;
}

.tag:hover
{
opacity: 0.8;
}

.post-actions
{
margin-top: 14px;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}

.post-action-button
{
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 42px;
padding: 0 14px;
border: none;
border-radius: 14px;
background: var(--color-surface-soft);
color: var(--color-text);
font-weight: 400;
cursor: pointer;
transition: 0.2s all ease;
}

.post-action-button.active
{
border: none;
background: var(--color-like-soft);
color: var(--color-like);
}

.post-counter
{
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 42px;
padding: 0 14px;
border: none;
border-radius: 14px;
background: var(--color-surface-soft);
color: var(--color-muted);
font-weight: 400;
cursor: pointer;
transition: 0.2s all ease;
}

.comments-block
{
padding-top: 14px;
border-top: none;
display: flex;
flex-direction: column;
}

.comments-scroll
{
max-height: 320px;
overflow-y: auto;
display: flex;
flex-direction: column;
padding-right: 4px;
}

.comment-item
{
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
}

.comment-item.is-reply
{
margin-left: 44px;
}

.comment-item.is-removing
{
display: none;
opacity: 0;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
max-height: 0;
}

.comment-content
{
flex: 1;
padding: 12px 14px;
border: 1px solid var(--color-border);
border-radius: 18px;
background: var(--color-surface-soft);
}

.comment-head
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 2px;
}

.comment-name
{
font-size: 14px;
font-weight: 400;
color: var(--color-accent);
transition: 0.5s;
display: inline-flex;
align-items: center;
gap: 8px;
}

.comment-name:hover
{
opacity: 0.6;
}

.comment-date
{
font-size: 12px;
color: var(--color-muted);
display: inline-flex;
align-items: center;
gap: 8px;
}

.comment-date .comment-edited
{
opacity: 0.7;
font-size: 12px !important;
}

.comment-text
{
font-size: 13px;
color: var(--color-muted);
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
}

.comment-actions
{
margin-top: 8px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}

.comment-action
{
height: 34px;
padding: 0 12px;
border: none;
border-radius: 14px;
background: rgba(255, 255, 255, 0.65);
color: var(--color-text);
font-size: 13px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: 0.2s all ease;
}

.comment-action.danger
{
color: var(--color-error-text);
background: var(--color-error-soft);
border: none;
}

.comment-reply-to
{
font-size: 12px;
color: var(--color-muted);
margin-bottom: 6px;
}

.comment-reply-to b
{
opacity: 0.7;
font-weight: 400;
}

.comment-composer-state
{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: 18px;
background: var(--color-surface-soft);
margin-bottom: 12px;
}

.comment-composer-state.hidden
{
display: none !important;
}

.comment-composer-state-main
{
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}

.comment-composer-state-title
{
font-size: 13px;
font-weight: 400;
}

.comment-composer-state-text
{
font-size: 13px;
color: var(--color-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.comment-composer-state-cancel
{
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--color-border);
border-radius: 12px;
background: var(--color-surface);
color: var(--color-text);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: 0.2s all ease;
}

.comment-form
{
display: flex;
align-items: flex-end;
gap: 12px;
}

.comment-form .field
{
flex: 1;
}

.comment-input
{
justify-content: center;
align-items: center;
display: flex;
min-height: 48px;
height: 48px;
padding-bottom: 13px;
resize: none;
}

.comment-input-row
{
display: flex;
align-items: flex-end;
gap: 8px;
}

.comment-emoji-button
{
min-width: 48px;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-surface-soft);
color: var(--color-text);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.2s all ease;
}

.comments-loader
{
height: 100%;
min-width: 100%;
padding: 12px;
text-align: center;
border: none;
border-radius: 16px;
color: var(--color-muted);
}

.chat-emoji-list
{
background: var(--color-white);
border-top: 1px solid var(--color-border);
padding: 1rem !important;
width: 100%;
bottom: 50px;
position: absolute;
}

.chat-emoji-list #status-empty-emoji
{
margin-top: 14px !important;
padding: 10px !important;
}

#status-empty-emoji
{
margin-top: 13px;
padding: 10px !important;
}

#postsList .status-empty, #notificationsList .status-empty
{
margin-bottom: 18px;
}

#followListUsers .status-empty
{
margin-bottom: 18px;
}

.listEmojiComment .status-empty
{
margin-bottom: 6px !important;
margin-top: 5px !important;
}

.comments-scroll .status-empty
{
margin-bottom: 18px;
margin-top: 0px !important;
}

.status-empty
{
margin-top: 18px;
padding: 18px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
border: none;
height: 100%;
border-radius: 20px;
color: var(--color-muted);
text-align: center;
}

.profile-hero
{
display: flex;
flex-direction: column;
gap: 20px;
}

.profile-head
{
padding: 20px 0 0 0;
display: flex;
align-items: center;
gap: 18px;
}

.profile-head-meta
{
display: flex;
flex-direction: column;
gap: 6px;
}

.profile-title
{
font-size: 30px;
font-weight: 400;
text-align: left;
}

.profile-title-row
{
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}

.profile-private-badge
{
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 36px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid var(--color-border);
background: var(--color-surface-soft);
color: var(--color-text);
font-size: 13px;
}

.profile-private-note
{
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 18px;
border: 1px solid rgba(199, 215, 255, 1);
border-radius: 20px;
background: linear-gradient(180deg, rgba(248, 251, 255, 1) 0%, rgba(238, 244, 255, 1) 100%);
}

.profile-private-note-icon
{
width: 48px;
height: 48px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-accent-soft);
color: var(--color-accent);
font-size: 18px;
flex-shrink: 0;
}

.profile-private-note-main
{
display: flex;
flex-direction: column;
gap: 6px;
}

.profile-private-note-title
{
font-size: 16px;
font-weight: 400;
color: var(--color-text);
}

.profile-private-note-text
{
font-size: 14px;
color: var(--color-muted);
line-height: 1.6;
}

.profile-text
{
color: var(--color-muted);
}

.profile-actions
{
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}

.profile-locked-posts-card
{
padding: 18px;
}

.stats-grid
{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}

.stat-card
{
padding: 16px;
border: 1px solid var(--color-border);
border-radius: 20px;
background: linear-gradient(180deg, rgba(95, 137, 255, 0.14) 0%, rgba(240, 244, 248, 1) 100%);
}

.stat-value
{
font-size: 28px;
font-weight: 400;
margin-bottom: 6px;
}

.stat-label
{
color: var(--color-muted);
}

.info-list
{
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 10px;
}

.info-item
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border: 1px solid var(--color-border);
border-radius: 18px;
background: var(--color-surface-soft);
}

.info-label
{
color: var(--color-muted);
}

.info-value
{
font-weight: 400;
text-align: right;
word-break: break-word;
}

.avatar-preview-wrap
{
display: flex;
align-items: center;
justify-content: center;
}

.sessions-toolbar
{
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
}

.sessions-list
{
display: flex;
flex-direction: column;
gap: 12px;
}

.session-item
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px;
border: 1px solid var(--color-border);
border-radius: 20px;
background: var(--color-surface-soft);
transition: opacity 0.18s ease, transform 0.18s ease, max-height 0.22s ease, margin 0.22s ease, padding 0.22s ease;
}

.session-item.is-removing
{
display: none;
opacity: 0;
transform: translateY(-6px);
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
border-width: 0;
}

.session-main
{
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}

.session-title
{
display: flex;
align-items: center;
gap: 10px;
font-weight: 400;
}

.session-meta
{
font-size: 14px;
color: var(--color-muted);
}

.session-user-agent
{
font-size: 14px;
color: var(--color-text);
word-break: break-word;
}

.chat-page-layout
{
display: grid;
grid-template-columns: 360px 1fr;
gap: 24px;
min-height: calc(100vh - 135px);
max-height: calc(100vh - 135px);
align-items: stretch;
}

.chat-sidebar-panel
{
display: flex;
flex-direction: column;
min-width: 0;
padding: 0;
overflow: hidden;
}

.chat-sidebar-top
{
display: flex;
flex-direction: column;
gap: 16px;
padding: 20px;
border-bottom: 1px solid var(--color-border);
background: linear-gradient(180deg, rgba(232, 239, 255, 0.6) 0%, rgba(255, 255, 255, 1) 100%);
}

.chat-sidebar-search
{
display: flex;
align-items: center;
}

.chat-users-list
{
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px;
min-width: 0;
overflow-y: auto;
max-height: calc(100vh - 320px);
}

.chat-user-item
{
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid transparent;
border-radius: 18px;
background: transparent;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, opacity 0.18s ease, transform 0.18s ease, max-height 0.22s ease, margin 0.22s ease, padding 0.22s ease;
width: 100%;
text-align: left;
}

.chat-user-item:hover
{
background: var(--color-surface-soft);
opacity: 0.95;
}

.chat-user-item.active
{
border-color: rgba(84, 127, 255, 0.24);
background: var(--color-accent-soft);
}

.chat-user-item.is-removing
{
opacity: 0;
transform: translateY(0px);
}

.chat-user-content
{
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}

.chat-user-top
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}

.chat-user-name
{
font-size: 15px;
font-weight: 400;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 8px;
}

.chat-user-date
{
font-size: 12px;
color: var(--color-muted);
white-space: nowrap;
}

.chat-user-preview
{
font-size: 13px;
color: var(--color-muted);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.chat-contact-badges
{
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.chat-unread-badge
{
min-width: 24px;
height: 24px;
padding: 0 8px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(255, 104, 145, 1) 0%, rgba(255, 84, 120, 1) 100%);
color: var(--color-white);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
}

.chat-main-panel
{
display: flex;
flex-direction: column;
min-width: 0;
padding: 0;
overflow: hidden;
max-height: calc(100vh - 135px);
}

.chat-welcome
{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
background:
radial-gradient(circle at top right, rgba(232, 239, 255, 0.9) 0%, rgba(255, 255, 255, 0) 40%),
linear-gradient(180deg, rgba(240, 244, 248, 0.7) 0%, rgba(255, 255, 255, 1) 100%);
border-radius: 16px;
}

.chat-welcome-box
{
max-width: 420px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
}

.chat-welcome-icon
{
width: 88px;
height: 88px;
border-radius: 28px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-accent-soft);
color: var(--color-accent);
font-size: 34px;
}

.chat-welcome-title
{
font-size: 28px;
font-weight: 400;
}

.chat-welcome-text
{
color: var(--color-muted);
font-size: 15px;
line-height: 1.7;
}

.chat-conversation
{
position: relative;
display: flex;
flex-direction: column;
height: 100%;
min-height: calc(100vh - 320px);
background:
radial-gradient(circle at top right, rgba(232, 239, 255, 0.45) 0%, rgba(255, 255, 255, 0) 38%),
linear-gradient(180deg, rgba(240, 244, 248, 0.5) 0%, rgba(255, 255, 255, 1) 100%);
}

.chat-conversation-head
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 20px;
border-bottom: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
}

.chat-peer-info
{
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}

.chat-peer-meta
{
display: flex;
flex-direction: column;
min-width: 0;
}

.chat-peer-name
{
font-size: 15px;
font-weight: 400;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 8px;
}

.chat-peer-status
{
font-size: 13px;
color: var(--color-muted);
min-height: 18px;
}

.typing-indicator
{
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px !important;
}

.typing-indicator-text
{
opacity: 0.9;
font-size: 13px !important;
}

.typing-dots
{
display: inline-flex;
align-items: center;
gap: 4px;
height: 4px;
opacity: 0.6;
font-size: 13px !important;
}

.typing-dots span
{
margin-top: 6px;
width: 3px;
height: 3px;
border-radius: 50%;
background: rgba(104, 114, 125, 0.7);
display: inline-flex;
align-items: center;
animation: typingDot 1s infinite ease-in-out;
font-size: 13px !important;
}

.typing-dots span:nth-child(2)
{
animation-delay: 0.12s;
}

.typing-dots span:nth-child(3)
{
animation-delay: 0.24s;
}

@keyframes typingDot
{
0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
40% { transform: translateY(-3px); opacity: 0.9; }
}

.chat-head-actions
{
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}

.chat-head-main-actions
{
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}

.chat-messages-wrap
{
position: relative;
display: flex;
flex: 1;
min-height: 0;
}

.chat-messages-list
{
flex: 1;
min-height: 220px;
overflow-y: auto;
display: flex;
flex-direction: column;
padding: 18px 0;
gap: 2px;
scroll-behavior: auto;
}

.chat-message
{
position: relative;
display: flex;
align-items: flex-start;
align-self: flex-start;
flex-direction: column;
padding: 5px 16px;
gap: 8px;
max-width: 74%;
overflow: visible;
transition: opacity 0.18s ease, transform 0.18s ease, max-height 0.22s ease, margin 0.22s ease, padding 0.22s ease;
}

.chat-message.enter
{
animation: chatEnter 0.16s ease;
}

@keyframes chatEnter
{
0% { transform: translateY(6px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}

.chat-message.is-removing
{
opacity: 0;
transform: translateY(2px);
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
}

.chat-message.mine
{
align-self: flex-end !important;
justify-content: flex-end !important;
align-items: flex-end !important;
flex-direction: column;
}

.chat-message:not(.mine)
{
align-self: flex-start;
}

.chat-bubble
{
display: flex;
flex-direction: column;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: 22px;
background: var(--color-surface);
min-width: 0;
word-break: break-word;
box-shadow: none;
gap: 8px;
}

.chat-message.mine .chat-bubble
{
background: linear-gradient(180deg, rgba(94, 137, 255, 1) 0%, rgba(84, 127, 255, 1) 100%);
border-color: var(--color-accent);
color: var(--color-white);
border-bottom-right-radius: 10px;
}

.chat-message:not(.mine) .chat-bubble
{
border-bottom-left-radius: 10px;
}

.chat-message.pending .chat-bubble
{
opacity: 0.84;
}

.chat-message.pending:not(.mine) .chat-bubble
{
background: linear-gradient(180deg, rgba(248, 251, 255, 1) 0%, rgba(238, 244, 255, 1) 100%);
border-color: rgba(199, 215, 255, 1);
}

.chat-message-meta
{
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
min-height: 14px;
}

.chat-message-meta span
{
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
font-size: 11px;
color: var(--color-muted);
opacity: 0.75;
}

.chat-message.mine .chat-message-meta span
{
color: var(--color-muted);
}

.chat-read-dot
{
color: var(--color-success-text) !important;
opacity: 1 !important;
display: none !important;
}

.chat-unread-dot
{
color: var(--color-warning) !important;
opacity: 1 !important;
display: none !important;
}

.chat-message-text
{
font-size: 14px;
line-height: 1.7;
white-space: pre-wrap;
word-break: break-word;
}

.chat-link
{
color: var(--color-accent);
text-decoration: underline;
word-break: break-all;
}

.chat-message.mine .chat-link
{
color: var(--color-white);
}

.chat-attachments
{
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
align-items: self-end;
}

.chat-attachment
{
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}

.chat-attachment-image-wrap
{
padding: 0;
border: none;
background: transparent;
cursor: pointer;
width: fit-content;
max-width: 100%;
}

.chat-attachment-image
{
display: block;
max-height: 260px;
border-radius: 18px;
cursor: pointer;
object-fit: cover;
}

.chat-attachment-video
{
width: min(100%, 480px);
max-height: 420px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.2);
}

.chat-attachment-audio
{
width: min(100%, 360px);
}

.chat-attachment-file
{
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid rgba(223, 229, 236, 0.72);
border-radius: 18px;
background: rgba(255, 255, 255, 0.82);
color: var(--color-text);
min-width: 260px;
max-width: 100%;
}

.chat-message.mine .chat-attachment-file
{
border: 1px solid var(--color-accent);
background: var(--color-accent);
color: var(--color-white);
}

.chat-attachment-file-icon
{
width: 42px;
height: 42px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-accent-soft);
color: var(--color-accent);
flex-shrink: 0;
}

.chat-message.mine .chat-attachment-file-icon
{
background: rgba(255, 255, 255, 0.18);
color: var(--color-white);
}

.chat-attachment-file-main
{
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
flex: 1;
}

.chat-attachment-file-name
{
font-size: 14px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.chat-attachment-file-size
{
font-size: 12px;
color: var(--color-muted);
}

.chat-message.mine .chat-attachment-file-size
{
color: rgba(255, 255, 255, 0.82);
}

.chat-attachment-file-link
{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 0 14px;
border-radius: 14px;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
font-size: 13px;
flex-shrink: 0;
}

.chat-message.mine .chat-attachment-file-link
{
border-color: rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.18);
color: var(--color-white);
}

.chat-progress
{
height: 6px;
border-radius: 999px;
overflow: hidden;
background: rgba(223, 229, 236, 0.65);
}

.chat-message.mine .chat-progress
{
background: rgba(255, 255, 255, 0.22);
}

.chat-progress-bar
{
height: 100%;
width: 0;
background: var(--color-accent);
transition: width 0.2s ease;
}

.chat-message.mine .chat-progress-bar
{
background: rgba(255, 255, 255, 0.9);
}

.chat-reply-block
{
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 12px;
border-radius: 16px;
border: 1px solid rgba(84, 127, 255, 0.18);
background: rgba(84, 127, 255, 0.08);
text-align: left;
cursor: pointer;
color: inherit;
transition: 0.2s all ease;
}

.chat-reply-block:hover
{
transform: translateY(-1px);
}

.chat-message.mine .chat-reply-block
{
border-color: var(--color-accent-soft);
background: var(--color-accent-soft);
}

.chat-reply-block-name
{
font-size: 12px;
font-weight: 400;
opacity: 0.9;
}

.chat-reply-block-text
{
font-size: 12px;
opacity: 0.72;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.chat-message-actions
{
position: absolute;
top: 0;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 6px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-6px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.chat-message-actions::before
{
content: "";
position: absolute;
top: -8px;
bottom: -8px;
width: 16px;
}

.chat-message:not(.mine) .chat-message-actions
{
left: calc(100% + 6px);
}

.chat-message:not(.mine) .chat-message-actions::before
{
right: 100%;
}

.chat-message.mine .chat-message-actions
{
right: calc(100% + 6px);
}

.chat-message.mine .chat-message-actions::before
{
left: 100%;
}

.chat-message:hover .chat-message-actions,
.chat-message:focus-within .chat-message-actions,
.chat-message-actions:hover,
.chat-message-actions:focus-within
{
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}

.chat-message-action
{
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--color-border);
border-radius: 12px;
background: var(--color-surface);
color: var(--color-text);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.2s all ease;
}

.chat-message-action:hover
{
transform: translateY(-1px);
}

.chat-message-action.danger
{
color: var(--color-error-text);
background: var(--color-error-soft);
border: none;
}

.chat-jump-to-bottom
{
position: absolute;
right: 20px;
bottom: 18px;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0 14px;
min-height: 44px;
border-radius: 999px;
border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.96);
color: var(--color-text);
cursor: pointer;
transition: 0.2s all ease;
}

.chat-jump-to-bottom:hover
{
transform: translateY(-1px);
}

.chat-jump-to-bottom-count
{
min-width: 22px;
height: 22px;
padding: 0 8px;
border-radius: 999px;
background: var(--color-accent);
color: var(--color-white);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
}

.chat-attachment-preview
{
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px;
max-height: 220px;
border-top: 1px solid var(--color-border);
overflow: auto;
background: rgba(255, 255, 255, 0.65);
}

.chat-attachment-preview-list
{
display: flex;
flex-direction: column;
gap: 8px;
}

.chat-attachment-preview-item
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--color-border);
border-radius: 18px;
background: var(--color-surface);
}

.chat-attachment-preview-item-main
{
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
flex: 1;
}

.chat-attachment-preview-thumb
{
width: 44px;
height: 44px;
border-radius: 14px;
background: var(--color-surface-soft);
border: 1px solid var(--color-border);
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-muted);
}

.chat-attachment-preview-thumb img
{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.chat-attachment-preview-meta
{
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}

.chat-attachment-preview-name
{
font-size: 14px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.chat-attachment-preview-size
{
font-size: 12px;
color: var(--color-muted);
}

.chat-attachment-preview-remove
{
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
border-radius: 14px;
border: 1px solid var(--color-border);
background: var(--color-surface-soft);
color: var(--color-text);
cursor: pointer;
flex-shrink: 0;
transition: 0.2s all ease;
}

.chat-attachment-preview-remove:hover
{
transform: rotate(90deg);
}

.chat-composer-state
{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin: 0 20px 12px 20px;
padding: 12px 14px;
border: 1px solid var(--color-border);
border-radius: 18px;
background: var(--color-surface-soft);
}

.chat-composer-state-main
{
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}

.chat-composer-state-title
{
font-size: 13px;
font-weight: 400;
}

.chat-composer-state-text
{
font-size: 13px;
color: var(--color-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.chat-composer-state-cancel
{
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--color-border);
border-radius: 12px;
background: var(--color-surface);
color: var(--color-text);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: 0.2s all ease;
}

.chat-composer-state-cancel:hover
{
transform: rotate(90deg);
}

.chat-form
{
display: flex;
flex-direction: column;
padding: 0;
background: var(--color-surface-soft);
}

.chat-drop-zone
{
position: relative;
border: none;
transition: border-color 0.1s ease, transform 0.1s ease, background 0.1s ease;
background: var(--color-surface-soft);
border-radius: 16px;
}

.chat-drop-zone.is-dragover
{
transform: scale(1.01);
background: rgba(232, 239, 255, 0.75);
z-index: 9999;
}

.chat-compose-shell
{
display: flex;
align-items: center;
gap: 0;
background: var(--color-surface);
border-top: 1px solid var(--color-border);
}

label.chat-attach-button
{
margin-left: 25px !important;
}

.chat-attach-button
{
width: 20px;
height: 48px;
border: none;
border-radius: 16px;
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-text);
flex-shrink: 0;
transition: 0.2s opacity ease;
}

.chat-emoji-button
{
width: 20px;
height: 48px;
border: none;
border-radius: 16px;
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-text);
flex-shrink: 0;
transition: 0.2s opacity ease;
}

.chat-attach-button.disabled,
.chat-attach-button:disabled
{
opacity: 0.4;
cursor: not-allowed;
}

.chat-compose-field
{
position: relative;
flex: 1;
min-width: 0;
}

.chat-compose-field textarea
{
border-radius: 18px;
background: var(--color-surface);
font-size: 14px;
padding: 16px 0 0 0;
min-height: 48px;
max-height: 180px;
border: none !important;
resize: none;
line-height: 1.45;
}

.chat-drop-hint
{
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.92);
color: var(--color-accent);
font-size: 14px;
pointer-events: none;
z-index: 9999;
}

.chat-drop-zone.is-dragover .chat-drop-hint
{
display: flex;
}

.flash
{
animation: chatFlash 1.1s ease;
}

@keyframes chatFlash
{
0% { transform: scale(1); }
20% { transform: scale(1.01); }
100% { transform: scale(1); box-shadow: none; }
}

.loader
{
width: 40px;
height: 40px;
border: 2px solid #f3f3f3;
border-top: 2px solid var(--color-accent);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 50px auto;
}

@keyframes spin
{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

#notification-container
{
position: fixed;
right: 20px;
bottom: 20px;
z-index: 9999999999;
display: flex;
flex-direction: column;
gap: 7px;
max-width: min(420px, calc(100vw - 40px));
min-width: min(320px, calc(100vw - 40px));
pointer-events: none;
transition: 0.5s all ease;
cursor: pointer;
}

#notification-container:hover
{
opacity: 0.9;
}

.notification
{
display: flex;
align-items: center;
gap: 1rem;
padding: 12px 26px 12px 28px;
border-radius: 16px;
color: var(--color-white);
font-size: 15px;
line-height: 1.45;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.25s ease, transform 0.25s ease;
pointer-events: auto;
justify-content: flex-start;
backdrop-filter: blur(10px);
box-shadow: 0 18px 40px rgba(30, 37, 45, 0.05);
}

.notification:hover, .notification:focus
{
box-shadow: 0 18px 40px rgba(30, 37, 45, 0.05);
}

.notification.success
{
color: var(--color-text);
border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.98);
}

.notification.error
{
color: var(--color-text);
border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.98);
}

.notification.info
{
color: var(--color-text);
border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.98);
}

.notification.warning
{
color: var(--color-text);
border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.98);
}

.notification.show
{
opacity: 1;
transform: translateY(0);
}

.notification-icon
{
width: 42px;
height: 42px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 16px;
}

.notification.success .notification-icon
{
background: var(--color-success-soft);
color: var(--color-success-text);
}

.notification.error .notification-icon
{
background: var(--color-error-soft);
color: var(--color-error-text);
}

.notification.info .notification-icon
{
background: var(--color-info-soft);
color: var(--color-info-text);
}

.notification.warning .notification-icon
{
background: var(--color-warning-soft);
color: var(--color-warning);
}

.notification-body
{
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
flex: 1;
}

.notification-text
{
flex: 1;
word-break: break-word;
}

.btn-danger
{
background: var(--color-error-text);
border: 1px solid var(--color-error-text);
color: var(--color-white);
}

.btn-danger .btn-spinner
{
border-color: rgba(255, 255, 255, 0.35);
border-top-color: currentColor;
}

.post-head-actions
{
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}

.post-delete-button
{
border: none;
background: var(--color-error-soft);
color: var(--color-error-text);
}

.post-delete-button .btn-spinner
{
border-color: rgba(184, 72, 72, 0.22);
border-top-color: currentColor;
}

.post-copy-link-button
{
border: none;
background: var(--color-accent-soft);
color: var(--color-accent);
}

#notificationActionModal
{
z-index: 9999999 !important;
backdrop-filter: blur(0px) !important;
}

.modal
{
position: fixed;
inset: 0;
padding: 24px;
display: none;
align-items: center;
justify-content: center;
background: rgba(30, 37, 45, 0.48);
z-index: 10000;
backdrop-filter: blur(10px);
}

.modal.open
{
display: flex;
}

.modal-dialog
{
width: 100%;
max-width: 460px;
padding: 24px;
border: 1px solid var(--color-border);
border-radius: 26px;
background: rgba(255, 255, 255, 0.98);
}

.modal-title
{
font-size: 24px;
font-weight: 400;
margin-bottom: 8px;
}

.modal-text
{
color: var(--color-muted);
margin-bottom: 20px;
}

.modal-actions
{
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
flex-wrap: wrap;
}

.modal-head-row
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}

.modal-list-scroll
{
max-height: 70vh;
overflow-y: auto;
padding-right: 4px;
}

.notifications-dialog
{
max-width: min(760px, calc(100vw - 48px));
}

.notifications-head-row
{
align-items: flex-start;
}

.notifications-head-actions
{
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}

.notifications-list
{
display: flex;
flex-direction: column;
gap: 10px;
}

.notifications-bulk-bar
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 16px;
border: 1px solid var(--color-border);
border-radius: 18px;
background: var(--color-surface-soft);
margin-bottom: 12px;
}

.notifications-bulk-left
{
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--color-text);
}

.notifications-bulk-actions
{
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}

.notification-item-wrap
{
display: flex;
align-items: stretch;
gap: 10px;
padding: 10px;
border: none;
border-radius: 18px;
background: var(--color-surface-soft);
transition: 0.2s all ease;
}

.notification-item-wrap:hover
{
background: rgba(248, 250, 255, 1);
}

.notification-checkbox-label
{
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
min-width: 30px;
cursor: pointer;
}

.notification-checkbox-label input
{
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}

.notification-checkbox-label span
{
width: 18px;
height: 18px;
border-radius: 6px;
border: 1px solid var(--color-border-strong);
background: var(--color-white);
display: inline-block;
position: relative;
transition: 0.2s all ease;
}

.notification-checkbox-label input:checked + span
{
background: var(--color-accent);
border-color: var(--color-accent);
}

.notification-checkbox-label input:checked + span::after
{
content: "";
position: absolute;
top: 1px;
left: 5px;
width: 5px;
height: 10px;
border-right: 2px solid var(--color-white);
border-bottom: 2px solid var(--color-white);
transform: rotate(45deg);
}

.notification-item
{
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px;
border: none;
border-radius: 18px;
background: transparent;
transition: 0.2s all ease;
flex: 1;
min-width: 0;
}

.notification-item.unread
{
background: linear-gradient(180deg, rgba(248, 251, 255, 1) 0%, rgba(238, 244, 255, 1) 100%);
border-color: rgba(199, 215, 255, 1);
}

.notification-type-icon
{
width: 42px;
height: 42px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-accent-soft);
color: var(--color-accent);
flex-shrink: 0;
}

.notification-item-main
{
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}

.notification-item-title
{
font-size: 14px;
font-weight: 400;
}

.notification-item-text
{
font-size: 13px;
color: var(--color-muted);
line-height: 1.5;
word-break: break-word;
}

.notification-item-date
{
font-size: 12px;
color: var(--color-muted);
}

.notification-remove-button
{
width: 40px;
min-width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border);
border-radius: 14px;
background: var(--color-surface);
color: var(--color-text);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.2s all ease;
}

.follow-list-dialog
{
max-width: min(760px, calc(100vw - 48px));
}

.follow-users-list
{
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 14px;
}

.follow-user-item
{
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
border: 1px solid var(--color-border);
border-radius: 18px;
background: var(--color-surface-soft);
transition: 0.2s all ease;
}

.follow-user-item:hover
{
transform: translateY(0px);
}

.follow-user-main
{
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}

.follow-user-name
{
font-size: 15px;
font-weight: 400;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 8px;
}

.follow-user-actions
{
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}

.media-viewer-dialog
{
max-width: min(1100px, calc(100vw - 48px));
padding: 16px;
border: none !important;
background: transparent !important;
box-shadow: none;
}

.media-viewer-top
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}

.media-viewer-counter
{
min-height: 42px;
width: 100px;
max-width: 200px;
padding: 0 14px;
border: 1px solid rgba(223, 229, 236, 0.7);
border-radius: 14px;
background: rgba(255, 255, 255, 0.86);
color: var(--color-text);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
backdrop-filter: blur(10px);
}

.media-viewer-top-actions
{
display: flex;
align-items: center;
width: 100%;
justify-content: flex-end;
gap: 8px;
}

.media-viewer-nav,
.media-viewer-close
{
width: 42px;
height: 42px;
padding: 0;
border: 1px solid var(--color-border);
border-radius: 14px;
background: rgba(255, 255, 255, 0.86);
color: var(--color-text);
cursor: pointer;
backdrop-filter: blur(10px);
transition: 0.2s all ease;
}

.media-viewer-content
{
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 20px;
background: transparent;
min-height: calc(100vh - 180px);
padding: 0;
}

.media-viewer-content img
{
width: auto;
min-width: 60%;
max-width: 100%;
max-height: calc(100vh - 180px);
object-fit: cover;
border-radius: 20px;
}

.media-viewer-content video
{
width: auto;
max-width: 100%;
max-height: calc(100vh - 180px);
background: transparent;
border-radius: 20px;
}

.ios-toggle
{
position: relative;
display: inline-flex;
align-items: center;
width: 56px;
height: 34px;
}

.ios-toggle input
{
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}

.ios-toggle-ui
{
position: relative;
width: 56px;
height: 34px;
border-radius: 999px;
background: rgba(104, 114, 125, 0.22);
border: 1px solid rgba(223, 229, 236, 1);
transition: background 0.18s ease, border-color 0.18s ease;
cursor: pointer;
display: inline-block;
}

.ios-toggle-ui::after
{
content: "";
position: absolute;
top: 1px;
left: 1px;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--color-white);
border: 1px solid rgba(223, 229, 236, 1);
transition: transform 0.18s ease;
}

.ios-toggle input:checked + .ios-toggle-ui
{
background: rgba(84, 127, 255, 1);
border-color: rgba(84, 127, 255, 1);
}

.ios-toggle input:checked + .ios-toggle-ui::after
{
transform: translateX(22px);
}

.menu-messages-link
{
display: none;
}

.hint-row
{
display: flex;
justify-content: flex-end;
}

.hint
{
font-size: 12px;
color: var(--color-muted);
opacity: 0.85;
}

.article-dialog
{
max-width: min(980px, calc(100vw - 48px));
}

.article-toolbar
{
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 14px;
}

.article-editor-wrap
{
border: 1px solid var(--color-border);
border-radius: 18px;
background: var(--color-surface-soft);
padding: 12px;
margin-bottom: 16px;
}

.article-editor
{
min-height: 360px;
max-height: 55vh;
overflow: auto;
outline: none;
background: transparent;
border-radius: 14px;
padding: 14px;
font-size: 15px;
line-height: 1.75;
color: var(--color-text);
}

.composer-actions
{
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}

.composer-tools
{
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}

.custom-player
{
position: relative;
width: 100%;
height: 100%;
min-height: 160px;
overflow: hidden;
border-radius: 20px;
display: flex;
align-items: stretch;
justify-content: stretch;
}

.custom-player video,
.custom-player audio
{
width: 100%;
height: 100%;
min-height: 100%;
display: block;
object-fit: cover;
background: transparent;
}

.custom-player-audio
{
min-height: 84px;
height: 84px;
background: linear-gradient(180deg, rgba(240, 244, 248, 1) 0%, rgba(228, 235, 244, 1) 100%);
}

.custom-player-audio audio
{
height: 84px;
opacity: 0;
position: absolute;
inset: 0;
}

.custom-player-overlay
{
position: absolute;
left: 12px;
right: 12px;
bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 16px;
background: rgba(20, 24, 31, 0.42);
backdrop-filter: blur(10px);
color: var(--color-white);
}

.custom-player-audio .custom-player-overlay
{
background: rgba(255, 255, 255, 0.86);
color: var(--color-text);
border: 1px solid rgba(223, 229, 236, 0.8);
}

.custom-player-toggle,
.custom-player-mute
{
width: 38px;
height: 38px;
padding: 0;
border: none;
border-radius: 12px;
background: rgba(255, 255, 255, 0.14);
color: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: 0.2s all ease;
}

.custom-player-audio .custom-player-toggle,
.custom-player-audio .custom-player-mute
{
background: rgba(84, 127, 255, 0.1);
}

.custom-player-toggle:hover,
.custom-player-mute:hover
{
opacity: 0.8;
}

.custom-player-bar
{
position: relative;
flex: 1;
display: flex;
align-items: center;
}

.custom-player-range
{
width: 100%;
appearance: none;
height: 4px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.28);
cursor: pointer;
}

.custom-player-audio .custom-player-range
{
background: rgba(84, 127, 255, 0.18);
}

.custom-player-range::-webkit-slider-thumb
{
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--color-white);
border: none;
}

.custom-player-audio .custom-player-range::-webkit-slider-thumb
{
background: var(--color-accent);
}

.custom-player-time
{
min-width: 40px;
text-align: right;
font-size: 12px;
color: inherit;
}

#chatConversation
{
display: flex;
flex-direction: column;
min-height: 0;
}

.verified-badge
{
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-verified);
font-size: 15px;
line-height: 1;
flex-shrink: 0;
}

.verified-badge-large
{
font-size: 18px;
}

.emoji-picker-dialog
{
max-width: min(760px, calc(100vw - 48px));
}

.emoji-picker-tabs
{
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}

.emoji-list-scroll
{
max-height: 42px;
overflow-y: auto;
padding-right: 4px;
}

.emoji-tab
{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 16px;
border: 1px solid var(--color-border);
border-radius: 14px;
background: var(--color-surface-soft);
color: var(--color-text);
font-size: 14px;
cursor: pointer;
transition: 0.2s all ease;
}

.emoji-tab.active
{
background: var(--color-accent-soft);
border-color: rgba(199, 215, 255, 1);
color: var(--color-accent);
}

.emoji-picker-list
{
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
}

.emojiPickerListComment
{
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
max-height: 42px;
overflow-y: auto;
padding-right: 4px;
margin-bottom: 14px;
}

.emoji-item
{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
border: none;
border-radius: 16px;
background: var(--color-surface-soft);
font-size: 22px;
cursor: pointer;
transition: 0.2s all ease;
}

.emoji-item:hover
{
background: rgba(232, 239, 255, 0.7);
}

.chat-search-dialog
{
max-width: min(760px, calc(100vw - 48px));
}

.chat-search-results
{
display: flex;
flex-direction: column;
gap: 10px;
}

.chat-search-result-item
{
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 8px;
padding: 14px;
border: 1px solid var(--color-border);
border-radius: 18px;
background: var(--color-surface-soft);
cursor: pointer;
transition: 0.2s all ease;
margin-top: 14px;
}

.chat-search-result-top
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}

.chat-search-result-name
{
font-size: 14px;
font-weight: 400;
display: inline-flex;
align-items: center;
gap: 8px;
}

.chat-search-result-date
{
font-size: 12px;
color: var(--color-muted);
}

.chat-search-result-text
{
font-size: 13px;
color: var(--color-muted);
line-height: 1.6;
word-break: break-word;
}

.chat-attachments-dialog
{
max-width: min(860px, calc(100vw - 48px));
}

.chat-attachments-list
{
display: flex;
flex-direction: column;
gap: 10px;
}

.chat-attachment-record
{
display: flex;
align-items: start;
gap: 14px;
padding: 14px;
border: 1px solid var(--color-border);
border-radius: 20px;
background: var(--color-surface-soft);
margin-top: 14px;
}

.chat-attachment-record-preview
{
width: 180px;
min-width: 180px;
display: flex;
align-items: center;
justify-content: center;
}

.chat-attachment-record-preview .chat-attachment
{
width: 100%;
}

.chat-attachment-record-main
{
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
}

.chat-attachment-record-name
{
font-size: 14px;
color: var(--color-text);
line-height: 1.5;
word-break: break-word;
}

.chat-attachment-record-meta
{
font-size: 12px;
color: var(--color-muted);
}

.chat-attachment-record-actions
{
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}

#followListSearchInput,
#emojiSearchInput,
#chatMessageSearchInput,
#chatAttachmentsSearchInput
{
width: 100%;
}

#notificationsMarkReadButton.hidden
{
display: none !important;
}

.media-viewer-nav.hidden,
.media-viewer-counter.hidden
{
display: none !important;
}

::-webkit-scrollbar
{
width: 5px;
height: 5px;
}

::-webkit-scrollbar-thumb
{
background-color: rgba(31, 41, 55, 0.18);
border-radius: 999px;
}

@media (max-width: 1180px)
{
.main-layout
{
grid-template-columns: 1fr;
}

.menu-messages-link
{
display: flex;
}

.topbar-messages-link
{
display: none;
}

.left-panel
{
position: static;
top: auto;
max-height: none;
overflow: visible;
padding-right: 0;
}

.right-panel
{
max-height: none;
overflow: visible;
padding-right: 0;
}

.settings-grid
{
grid-template-columns: 1fr;
}

.sticky-card
{
position: static;
}

.chat-page-layout
{
grid-template-columns: 320px 1fr;
}
}

@media (max-width: 920px)
{
.chat-page-layout
{
grid-template-columns: 1fr;
max-height: none;
}

.menu-messages-link
{
display: flex;
}

.topbar-messages-link
{
display: none;
}

.chat-sidebar-panel
{
min-height: 240px;
}

.chat-users-list
{
max-height: 320px;
}

.chat-main-panel
{
max-height: none;
}

.chat-conversation
{
min-height: 760px;
}
}

@media (max-width: 760px)
{
.content
{
padding: 16px;
}

.menu-messages-link
{
display: flex;
}

.topbar-messages-link
{
display: none;
}

.profile-title
{
text-align: center;
}

.topbar-inner
{
padding: 16px;
flex-direction: row;
align-items: stretch;
}

.topbar-actions
{
justify-content: flex-end;
width: 100%;
}

.topbar-notifications-button
{
flex: 1;
max-width: 70px;
}

.search-row
{
flex-direction: column;
align-items: stretch;
}

.profile-head
{
flex-direction: column;
align-items: center;
}

.profile-actions
{
justify-content: center;
}

.stats-grid
{
grid-template-columns: 1fr;
}

.info-item
{
flex-direction: column;
align-items: flex-start;
}

.session-item
{
flex-direction: column;
align-items: flex-start;
}

#notification-container
{
left: 16px;
right: 16px;
bottom: 16px;
width: auto;
max-width: none;
min-width: 0;
}

.messages-hero
{
flex-direction: column;
align-items: flex-start;
}

.chat-conversation-head
{
flex-direction: column;
align-items: stretch;
}

.chat-peer-info
{
width: 100%;
}

.chat-head-actions
{
width: 100%;
}

.chat-head-actions .btn
{
flex: 1;
}

.chat-head-main-actions
{
width: 100%;
}

.chat-head-main-actions .btn
{
flex: 1;
}

.chat-message
{
max-width: 92%;
}

.chat-message-actions
{
position: static;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
margin-bottom: 4px;
}

.chat-message-actions::before
{
display: none;
}

.chat-message:not(.mine) .chat-message-actions,
.chat-message.mine .chat-message-actions
{
left: auto;
right: auto;
}

.chat-jump-to-bottom
{
right: 14px;
bottom: 14px;
}

.post-media-grid .media-tile
{
grid-column: span 6;
min-height: 180px;
}

.post-media-grid .media-tile:nth-child(1):only-child
{

}

.emoji-picker-list
{
grid-template-columns: repeat(6, minmax(0, 1fr));
}

.chat-attachment-record
{
flex-direction: column;
}

.chat-attachment-record-preview
{
width: 100%;
min-width: 0;
}
}

@media (max-width: 560px)
{
.modal
{
padding: 16px;
}

.menu-messages-link
{
display: flex;
}

.topbar-messages-link
{
display: none;
}

.profile-title
{
text-align: center;
}

.modal-dialog
{
padding: 16px;
border-radius: 22px;
}

.modal-actions
{
flex-direction: column-reverse;
align-items: stretch;
}

.modal-actions .btn
{
width: 100%;
}

.auth-card
{
padding: 24px;
border-radius: 22px;
}

.card
{
padding: 16px;
border-radius: 22px;
}

.comment-form
{
flex-direction: column;
align-items: stretch;
}

.file-picker
{
grid-template-columns: 1fr;
align-items: stretch;
}

.file-picker-name
{
justify-content: center;
}

.topbar-user
{
width: 100%;
justify-content: space-between;
}

.chat-sidebar-top
{
padding: 16px;
}

.chat-users-list
{
padding: 10px;
}

.chat-messages-list
{
padding: 14px;
}

.chat-form
{
padding: 0 14px 14px 14px;
}

.chat-composer-state
{
margin: 0 14px 12px 14px;
}

.chat-attachment-preview
{
padding: 14px;
}

.chat-compose-shell
{
align-items: center;
flex-wrap: wrap;
}

.chat-attach-button,
.chat-emoji-button
{
width: 100%;
height: 48px;
border-radius: 16px;
}

#chatSendButton
{
width: 100%;
background: transparent !important;
color: var(--color-accent);
}

.chat-message
{
max-width: 100%;
}

.chat-attachment-file
{
min-width: 0;
flex-direction: column;
align-items: flex-start;
}

.chat-attachment-file-link
{
width: 100%;
}

.chat-jump-to-bottom
{
right: 12px;
left: 12px;
justify-content: center;
}

.post-media-grid
{
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 8px;
}

.post-media-grid .media-tile
{
grid-column: span 4;
min-height: 200px;
}

.post-media-grid .media-tile:nth-child(1):only-child,
.post-media-grid .media-tile:nth-child(1):nth-last-child(2),
.post-media-grid .media-tile:nth-child(2):nth-last-child(1),
.post-media-grid .media-tile:nth-child(1):nth-last-child(3),
.post-media-grid .media-tile:nth-child(2):nth-last-child(2),
.post-media-grid .media-tile:nth-child(3):nth-last-child(1)
{
grid-column: span 4;
min-height: 200px;
max-height: 450px;
}

.post-media-grid .post-media-grid .media-tile:nth-child(1):nth-last-child(3)
{
max-height: 450px !important;
}

.follow-user-item
{
flex-direction: column;
align-items: flex-start;
}

.follow-user-actions
{
width: 100%;
}

.follow-user-actions .btn
{
flex: 1;
}

.notifications-bulk-bar
{
flex-direction: column;
align-items: stretch;
}

.notifications-bulk-actions
{
width: 100%;
}

.notifications-bulk-actions .btn
{
width: 100%;
}

.emoji-picker-list
{
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}

@media (max-width: 420px)
{
.topbar-inner
{
padding: 14px;
gap: 10px;
}

.menu-messages-link
{
display: flex;
}

.logo
{
gap: 10px;
font-size: 20px;
}

.topbar-actions
{
gap: 8px;
}

.post-card
{
padding: 14px;
}

.chat-conversation
{
min-height: 620px;
}

.media-viewer-top
{
flex-direction: column;
align-items: stretch;
}

.media-viewer-top-actions
{
justify-content: flex-end;
}

.emoji-picker-list
{
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}

.stories-user-item
{
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 8px;
min-width: 72px;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
}

.stories-user-item .stories-username
{
max-width: 72px;
font-size: 12px;
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.9;
}

.story-ring
{
position: relative;
width: 68px;
height: 68px;
padding: 3px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(223, 229, 236, 0.9);
transition: 0.2s transform ease, 0.2s opacity ease;
overflow: visible;
}

.story-ring.active
{
background: linear-gradient(135deg, rgba(255, 92, 141, 1) 0%, rgba(255, 160, 80, 1) 50%, rgba(84, 127, 255, 1) 100%);
}

.story-ring:not(.active)
{
background: linear-gradient(135deg, rgba(214, 221, 232, 1) 0%, rgba(232, 236, 243, 1) 100%);
}

.story-ring .story-ring-inner
{
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--color-white);
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.story-ring .story-ring-inner img
{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.story-ring .story-ring-inner span
{
width: 100%;
height: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: var(--color-accent);
background: linear-gradient(180deg, rgba(232, 239, 255, 1) 0%, rgba(214, 226, 255, 1) 100%);
}

#profileAvatarBox
{
cursor: pointer;
}

#profileAvatarBox.story-ring
{
padding: 4px;
}

#profileAvatarBox .story-ring-inner,
#profileAvatarBox > img,
#profileAvatarBox > span
{
border-radius: 50%;
}

.story-viewer
{
position: fixed;
inset: 0;
background: rgba(10, 12, 18, 0.96);
display: none;
align-items: center;
justify-content: center;
z-index: 12000;
padding: 18px;
}

.story-viewer.active
{
display: flex;
}

.story-viewer-shell
{
position: relative;
width: 100%;
max-width: 460px;
height: min(92vh, 820px);
border-radius: 28px;
overflow: hidden;
background: rgba(18, 22, 30, 1);
display: flex;
flex-direction: column;
}

.story-viewer-progress
{
position: absolute;
top: 12px;
left: 12px;
right: 12px;
z-index: 4;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 6px;
}

.story-viewer-progress-segment
{
height: 3px;
border-radius: 999px;
overflow: hidden;
background: rgba(255, 255, 255, 0.26);
}

.story-viewer-progress-segment span
{
display: block;
width: 0;
height: 100%;
background: rgba(255, 255, 255, 0.98);
}

.story-viewer-top
{
position: absolute;
top: 28px;
left: 14px;
right: 14px;
z-index: 4;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}

.story-viewer-user
{
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 0;
padding: 8px 12px;
border-radius: 18px;
background: rgba(0, 0, 0, 0.28);
backdrop-filter: blur(8px);
color: rgba(255, 255, 255, 0.96);
}

.story-viewer-user-avatar
{
width: 38px;
height: 38px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.18);
display: inline-flex;
align-items: center;
justify-content: center;
}

.story-viewer-user-avatar img
{
width: 100%;
height: 100%;
object-fit: cover;
}

.story-viewer-user-avatar span
{
font-size: 16px;
font-weight: 600;
}

.story-viewer-user-meta
{
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}

.story-viewer-username
{
font-size: 14px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.story-viewer-date
{
font-size: 12px;
opacity: 0.8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.story-close
{
width: 42px;
height: 42px;
border: none;
border-radius: 14px;
background: rgba(0, 0, 0, 0.28);
color: rgba(255, 255, 255, 0.98);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
backdrop-filter: blur(8px);
}

.story-viewer-body
{
position: relative;
flex: 1;
display: flex;
align-items: stretch;
justify-content: stretch;
overflow: hidden;
}

.story-viewer-hit
{
position: absolute;
top: 0;
bottom: 0;
width: 30%;
z-index: 2;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
}

.story-viewer-hit.prev
{
left: 0;
}

.story-viewer-hit.next
{
right: 0;
}

.story-media-wrap
{
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: linear-gradient(180deg, rgba(27, 33, 44, 1) 0%, rgba(12, 16, 22, 1) 100%);
}

.story-media,
.story-media-video
{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: transparent;
}

.story-media-audio-wrap,
.story-media-file-wrap
{
width: 100%;
height: 100%;
display: none;
align-items: center;
justify-content: center;
padding: 28px;
position: relative;
z-index: 3;
}

.story-media-audio-card,
.story-media-file-card
{
width: 100%;
max-width: 360px;
padding: 22px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
display: flex;
flex-direction: column;
gap: 14px;
color: rgba(255, 255, 255, 0.96);
}

.story-media-audio-title,
.story-media-file-title
{
font-size: 18px;
font-weight: 600;
line-height: 1.4;
word-break: break-word;
}

.story-media-audio-card audio
{
width: 100%;
}

.story-media-file-action
{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 46px;
padding: 0 16px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.98);
text-decoration: none;
}

.story-caption
{
position: absolute;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 4;
padding: 12px 14px;
border-radius: 18px;
background: rgba(0, 0, 0, 0.34);
backdrop-filter: blur(8px);
color: rgba(255, 255, 255, 0.98);
font-size: 14px;
line-height: 1.6;
word-break: break-word;
}

.story-upload-dialog
{
max-width: min(640px, calc(100vw - 48px));
}

.story-upload-preview
{
display: flex;
align-items: center;
justify-content: center;
min-height: 220px;
border: 1px solid var(--color-border);
border-radius: 18px;
background: var(--color-surface-soft);
overflow: hidden;
}

.story-upload-preview img,
.story-upload-preview video
{
width: 100%;
max-height: 360px;
object-fit: contain;
display: block;
background: transparent;
}

.story-upload-audio,
.story-upload-file
{
width: 100%;
padding: 24px;
display: flex;
flex-direction: column;
gap: 12px;
align-items: stretch;
justify-content: center;
}

.story-upload-file-card
{
padding: 18px;
border: 1px solid var(--color-border);
border-radius: 18px;
background: var(--color-white);
display: flex;
align-items: center;
gap: 12px;
}

.story-upload-file-card i
{
width: 42px;
height: 42px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-accent-soft);
color: var(--color-accent);
flex-shrink: 0;
}

.story-upload-file-card span
{
min-width: 0;
word-break: break-word;
}

.story-upload-actions
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}

@media (max-width: 760px)
{
.story-viewer
{
padding: 0;
}

.story-viewer-shell
{
max-width: 100%;
height: 100vh;
border-radius: 0;
}

.story-viewer-top
{
top: 20px;
left: 10px;
right: 10px;
}

.story-viewer-progress
{
top: 8px;
left: 10px;
right: 10px;
}
}

.story-duration-picker
{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

.story-duration-option
{
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px;
border: 1px solid var(--color-border);
border-radius: 20px;
background: var(--color-surface-soft);
cursor: pointer;
transition: 0.2s all ease;
overflow: hidden;
}

.story-duration-option:hover
{
background: rgba(248, 250, 255, 1);
}

.story-duration-option.active
{
border-color: rgba(84, 127, 255, 0.3);
background: linear-gradient(180deg, rgba(248, 251, 255, 1) 0%, rgba(238, 244, 255, 1) 100%);
box-shadow: 0 12px 30px rgba(84, 127, 255, 0.08);
}

.story-duration-option input
{
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}

.story-duration-option-badge
{
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
min-height: 30px;
padding: 0 12px;
border-radius: 999px;
background: rgba(84, 127, 255, 0.1);
color: var(--color-accent);
font-size: 13px;
font-weight: 400;
}

.story-duration-option-title
{
font-size: 16px;
font-weight: 400;
color: var(--color-text);
}

.story-duration-option-text
{
font-size: 13px;
color: var(--color-muted);
line-height: 1.5;
}

.story-upload-preview-content
{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.story-upload-preview-content .custom-player
{
width: 100%;
max-width: 100%;
min-height: 240px;
max-height: 260px;
border-radius: 18px;
}

.story-upload-preview-content .custom-player video
{
max-height: 260px;
object-fit: cover;
}

.story-upload-preview-image-button
{
width: 100%;
padding: 0;
border: none;
background: transparent;
border-radius: 18px;
overflow: hidden;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}

.story-upload-preview-image-button img
{
width: 100%;
max-height: 360px;
object-fit: contain;
border-radius: 18px;
}

@media (max-width: 560px)
{
.story-duration-picker
{
grid-template-columns: 1fr;
}
}

#storyUploadForm
{
display: flex;
flex-direction: column;
gap: 14px;
}

.story-viewer-top-actions
{
display: flex;
align-items: center;
gap: 10px;
}

.story-delete
{
width: 42px;
height: 42px;
border: none;
border-radius: 14px;
background: rgba(184, 72, 72, 0.24);
color: rgba(255, 255, 255, 0.98);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
backdrop-filter: blur(8px);
transition: 0.2s all ease;
}

.story-delete:disabled
{
opacity: 0.6;
cursor: not-allowed;
}

.meta-text-story
{
align-items: center;
padding: 0px 5px;
}

.meta-text-story.hide
{
display: none;
}

.meta-text-story.show
{
display: flex;
}