/* ================================================================
   ИРГУПС Мессенджер — Telegram-Style Visual Redesign
   All structural layout preserved; only visual layer changed.
   ================================================================ */

/* ── 1. GLOBAL RESETS & TYPOGRAPHY ─────────────────────────────── */

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html,
body {
    background: var(--bg-body);
    height: 100%;
    width: 100%;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 14px;
}

/* Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Links */
a {
    color: var(--green);
    text-decoration: none;
    transition: var(--transition-fast);
}
a:hover,
a:focus {
    color: var(--green-hover);
    text-decoration: none;
}
a.danger {
    color: var(--danger);
}
a.danger:hover {
    color: var(--danger-hover);
}

/* ── 2. APP SHELL ───────────────────────────────────────────────── */

#app-container {
    background: var(--bg-body);
    gap: 0;
    border-radius: 0;
    height: 100%;
    max-width: 100vw;
    overflow: hidden;
}

/* ── 3. SIDEPANEL (left column) ────────────────────────────────── */

#sidepanel {
    background: var(--bg-sidebar);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-right: 1px solid var(--border);
    min-width: 320px;
    max-width: 360px;
    transition: none;
}

/* Login mode — sidepanel goes full screen */
#sidepanel.login-panel {
    min-width: unset;
    max-width: 100%;
    width: 100%;
    background: none;
    backdrop-filter: none;
    border-right: none;
    justify-content: center;
    align-items: center;
}

#sidepanel-content {
    background: transparent;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ── 4. ICON RAIL (vertical nav) ────────────────────────────────── */

#icon-rail {
    background: #111d27;
    border-right: 1px solid var(--border);
    width: 64px;
    min-width: 64px;
    padding: 8px 0 12px;
}

.icon-rail-logo {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    margin: 0 auto 4px;
    color: var(--green);
}

.icon-rail-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius-md);
    margin: 2px auto;
    color: var(--text-muted);
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
}

.icon-rail-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
}

.icon-rail-btn.active {
    background: rgba(76, 175, 80, 0.18);
    color: var(--green);
}

.icon-rail-btn .material-icons {
    font-size: 22px;
}

.icon-rail-btn-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
}

.icon-rail-top,
.icon-rail-bottom {
    gap: 2px;
}

/* ── 5. SIDE CAPTION PANEL (header of left panel) ─────────────── */

#side-caption-panel {
    background: var(--bg-sidebar);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--border);
    height: 56px;
    min-height: 56px;
    padding: 0 12px 0 16px;
    box-shadow: none;
}

#side-caption-panel a {
    color: var(--text-secondary);
    padding: 0;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

#side-caption-panel a:hover {
    color: var(--text-primary);
}

/* ── 6. SIDEBAR SEARCH ──────────────────────────────────────────── */

.sidebar {
    background: transparent;
    border-right: none;
    padding: 10px 12px 12px;
}

.sidebar-head {
    margin-bottom: 10px;
}

.sidebar-head h1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.global-search,
.local-search {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-pill);
    transition: var(--transition-fast);
    box-shadow: none;
}

.global-search {
    height: 40px;
    padding: 0 14px;
    margin-bottom: 12px;
    border-radius: var(--radius-pill);
}

.local-search {
    height: 38px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
}

.global-search:focus-within,
.local-search:focus-within {
    border-color: rgba(76, 175, 80, 0.45);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.12);
}

.global-search span,
.local-search span {
    color: var(--text-muted);
    font-size: 20px;
}

.global-search input,
.local-search input {
    color: var(--text-primary);
    font-size: 14px;
    background: transparent;
}

.global-search input::placeholder,
.local-search input::placeholder {
    color: var(--text-muted);
}

/* ── 7. CONTACT LIST (chat list) ────────────────────────────────── */

.chat-list {
    gap: 1px;
    padding: 4px 0;
    overflow-y: auto;
}

.contact-box {
    overflow-x: hidden;
}

.contact-box > li {
    padding: 8px 12px 8px 10px;
    min-height: 68px;
    border-bottom: none;
    border-radius: var(--radius-sm);
    margin: 1px 4px;
    transition: background-color 0.12s ease;
    align-items: center;
}

.contact-box > li:last-child {
    border-bottom: none;
    background: transparent;
}

.contact-box > li:hover {
    background: rgba(255, 255, 255, 0.05);
}

.contact-box > li.selected {
    background: rgba(76, 175, 80, 0.18);
    border-left: none;
}

.contact-box > li.selected::after {
    content: none;
}

.contact-box > li.tpinned {
    border-right: none;
    background: rgba(255, 255, 255, 0.03);
}

/* Avatar */
.contact-box .avatar-box {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    margin-right: 10px;
    font-size: 20px;
    border-radius: 50%;
    overflow: visible; /* visible so online dot isn't clipped */
}

/* Clip the inner avatar/letter-tile, not the whole box */
.contact-box .avatar-box > img,
.contact-box .avatar-box .lettertile,
.contact-box .avatar-box > i.material-icons {
    overflow: hidden;
    border-radius: 14px;
}

.contact-box .avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
}

/* Contact title */
.contact-box .contact-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
}

/* Preview text */
.contact-box .contact-comment {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 400;
    line-height: 1.35;
    margin-top: 2px;
}

.contact-box .contact-comment > span {
    color: var(--text-secondary);
}

.contact-box .contact-comment b {
    color: var(--text-primary);
    font-weight: 500;
}

.contact-box .contact-comment .material-icons {
    font-size: 15px;
    color: var(--text-muted);
    vertical-align: middle;
}

.contact-box .text-box {
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

/* Unread badge */
.unread-badge {
    background: var(--green);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: var(--radius-pill);
    padding: 0 5px;
    line-height: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Pinned icon */
.contact-box .tpinned-icon {
    color: var(--text-muted);
    font-size: 16px;
}

/* ── 8. CAPTION PANELS (headers of right panel) ─────────────────── */

.caption-panel {
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    height: 56px;
    min-height: 56px;
    padding: 0 12px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 10;
}

#topic-caption-panel {
    background: var(--bg-header);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--border);
}

.caption-toolbar {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 2px;
}

.caption-toolbar a {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.caption-toolbar a,
.caption-toolbar a .material-icons {
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

.caption-toolbar a:hover,
.caption-toolbar a:hover .material-icons {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.07);
    transform: none;
}

.panel-title {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
}

/* ── 9. CHAT AREA & MESSAGE LIST ─────────────────────────────────── */

#topic-view {
    background: var(--bg-chat);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    /* Positioning context for the thread (comments) panel — see .thread-panel. */
    position: relative;
}

/* Chat header in topic view */
#topic-view > .caption-panel {
    background: var(--bg-header);
    flex-shrink: 0;
}

.chat-box {
    background: transparent;
    padding: 8px 0 4px;
}

.chat-box > ul,
.chat-box > ol {
    padding: 0 12px;
    list-style: none;
}

/* Message list item spacing */
.chat-box li.single {
    margin-top: 4px;
    margin-bottom: 6px;
}

.chat-box li.first {
    margin-top: 4px;
    margin-bottom: 6px;
}

.chat-box li.middle {
    margin-top: 6px;
    margin-bottom: 6px;
}

.chat-box li.last {
    margin-top: 6px;
    margin-bottom: 6px;
}

/* Склеянные сообщения (все из серии одного отправителя, кроме последнего):
   верхний-левый угол менее сглажен, чтобы подчеркнуть, что это продолжение. */
.chat-box li.first .bubble,
.chat-box li.middle .bubble {
    border-top-left-radius: 6px;
}

/* ── 10. MESSAGE BUBBLES ─────────────────────────────────────────── */

.bubble {
    border-radius: var(--radius-bubble);
    padding: 8px 12px;
    flex-direction: column;
    max-width: 75%;
    min-width: 0;
    box-shadow: var(--shadow-bubble);
    transition: background-color 0.3s ease;
    font-size: 14px;
    line-height: 1.45;
    overflow: visible;
}

/* Incoming bubble */
.left .bubble {
    background: var(--bubble-in);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
    margin-right: 0;
}

.left.flash .bubble {
    background: var(--bubble-in-hover);
}

/* Outgoing bubble */
.right .bubble {
    background: var(--bubble-out);
    color: var(--text-primary);
    border-bottom-right-radius: 4px;
    margin-left: 0;
}

.right.flash .bubble {
    background: var(--bubble-out-hover);
}

/* Bubble with tail — incoming */
.left .bubble.tip {
    border-bottom-left-radius: 4px;
}

.left .bubble.tip::before {
    content: "";
    position: absolute;
    left: -7px;
    bottom: 0;
    width: 10px;
    height: 16px;
    background: var(--bubble-in);
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
    border-radius: 0 0 0 3px;
    transition: background-color 0.3s ease;
}

.left.flash .bubble.tip::before {
    background: var(--bubble-in-hover);
}

/* Bubble with tail — outgoing */
.right .bubble.tip {
    border-bottom-right-radius: 4px;
}

.right .bubble.tip::before {
    content: "";
    position: absolute;
    right: -7px;
    bottom: 0;
    width: 10px;
    height: 16px;
    background: var(--bubble-out);
    clip-path: polygon(0 0, 0 100%, 100% 100%);
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%);
    border-radius: 0 0 3px 0;
    transition: background-color 0.3s ease;
}

.right.flash .bubble.tip::before {
    background: var(--bubble-out-hover);
}

/* Timestamps */
.chat-box .timestamp {
    color: rgba(232, 237, 242, 0.55);
    font-size: 11px;
    font-weight: 400;
}

.right .bubble .timestamp {
    color: rgba(232, 237, 242, 0.6);
}

/* Author name in group chats */
.chat-box .author {
    font-size: 12px;
    font-weight: 600;
    color: var(--green);
    margin-bottom: 2px;
}

/* Message text */
.bubble div.message-content {
    font-size: 14px;
    line-height: 1.45;
    padding: 0;
    color: var(--text-primary);
    max-width: 38rem;
}

/* Date chip (meta bubble) */
.meta .bubble.date {
    background: rgba(15, 22, 33, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    text-transform: none;
    min-width: 0;
    box-shadow: var(--shadow-sm);
}

/* System/meta messages */
.meta .bubble.deleted {
    background: rgba(76, 175, 80, 0.08);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
}

/* ── 11. REPLY QUOTES ────────────────────────────────────────────── */

.reply-quote {
    border-left: 3px solid var(--green);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    padding: 4px 8px;
    margin: 0 0 6px 0;
    background: rgba(0, 0, 0, 0.15);
}

.chat-box .left .reply-quote {
    background: rgba(0, 0, 0, 0.18);
}

.chat-box .right .reply-quote {
    background: rgba(0, 0, 0, 0.18);
}

/* Reply preview in send message area */
#reply-quote-preview .reply-quote {
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--green);
    border-radius: var(--radius-xs);
}

/* ── 12. SEND MESSAGE PANEL ──────────────────────────────────────── */

#send-message-panel {
    background: var(--bg-footer);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 1px solid var(--border);
    padding: 8px 12px;
    gap: 8px;
    min-height: 56px;
    align-items: flex-end;
    z-index: 5;
}

#send-message-input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 10px 16px;
    min-height: 40px;
    max-height: 160px;
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.45;
    transition: border-color 0.15s ease;
}

#send-message-input:focus {
    border-color: rgba(76, 175, 80, 0.4);
    outline: none;
}

#send-message-panel .material-icons {
    color: var(--text-secondary);
    font-size: 22px;
    transition: var(--transition-fast);
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

#send-message-panel a .material-icons:hover,
#send-message-panel .material-icons.secondary:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.07);
}

/* Send button */
#send-message-panel > a:last-of-type .material-icons {
    color: var(--green);
    font-size: 24px;
}

#send-message-panel > a:last-of-type:hover .material-icons {
    color: var(--green-hover);
    background: rgba(76, 175, 80, 0.12);
}

/* ── 13. DUMMY VIEW (no chat selected) ──────────────────────────── */

#dummy-view {
    background: var(--bg-chat);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#dummy-view .empty-state-icon {
    color: var(--text-muted);
    font-size: 64px;
    opacity: 0.4;
}

/* ── 14. BUTTONS ─────────────────────────────────────────────────── */

button {
    border-radius: var(--radius-sm);
    font-size: 14px;
    height: auto;
    min-height: 36px;
    padding: 8px 20px;
    line-height: 1.2;
    font-weight: 500;
    transition: var(--transition-fast);
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
}

button.primary {
    background: var(--green);
    color: #fff;
    border: none;
}

button.primary:hover:not([disabled]) {
    background: var(--green-hover);
    transform: none;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.35);
}

button.secondary {
    background: rgba(255, 255, 255, 0.07);
    color: var(--green);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

button.secondary:hover:not([disabled]) {
    background: rgba(76, 175, 80, 0.12);
    border-color: rgba(76, 175, 80, 0.3);
}

button.outline {
    background: transparent;
    color: var(--green);
    border: 1px solid rgba(76, 175, 80, 0.4);
}

button.outline:hover:not([disabled]) {
    background: rgba(76, 175, 80, 0.1);
    border-color: var(--green);
}

button.danger {
    background: var(--danger);
    color: #fff;
    border: none;
}

button.danger:hover:not([disabled]) {
    background: var(--danger-hover);
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.35);
}

button.positive {
    background: var(--green);
    color: #fff;
    border: none;
}

button.positive:hover:not([disabled]) {
    background: var(--green-hover);
}

button[disabled] {
    opacity: 0.45;
    filter: none;
}

/* ── 15. INPUTS & FORMS ──────────────────────────────────────────── */

form {
    font-size: 14px;
    padding: 8px 12px;
    line-height: 1.5;
}

label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

label.small {
    font-size: 12px;
    color: var(--green);
}
label.large {
    font-size: 14px;
    color: var(--text-primary);
}
label.invalid {
    color: var(--danger);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0;
    box-shadow: none;
    color: var(--text-primary);
    font-size: 14px;
    height: 40px;
    padding: 8px 4px;
    transition: border-color 0.15s ease;
    width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus {
    border-bottom-color: var(--green);
    box-shadow: none;
    outline: none;
}

input[type="text"].invalid,
input[type="email"].invalid,
input[type="password"].invalid,
input[type="search"].invalid,
input[type="tel"].invalid,
textarea.invalid {
    border-bottom-color: var(--danger);
}

input:not(.login-input)::placeholder,
textarea::placeholder {
    color: var(--text-placeholder);
    font-weight: 400;
}

/* Rounded inputs (used in password change etc) */
.rounded-input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    padding: 10px 14px;
    transition: border-color 0.15s ease;
}

.rounded-input:focus {
    border-color: rgba(76, 175, 80, 0.5);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.12);
    outline: none;
}

/* Search input */
input.search {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    text-indent: 1.9rem;
}

select {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    padding: 8px 12px;
}

option {
    background: var(--surface-2);
    color: var(--text-primary);
}

/* ── 16. CONTEXT MENU ────────────────────────────────────────────── */

ul.menu {
    background: #1a2638;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 6px 0;
    min-width: 160px;
    overflow: hidden;
    animation: menu-appear 0.12s ease;
}

@keyframes menu-appear {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

ul.menu > li {
    padding: 10px 16px;
    font-size: 14px;
    color: var(--text-primary);
    transition: background 0.1s ease;
    cursor: pointer;
}

ul.menu > li:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
}

ul.menu > li.separator {
    height: 1px;
    padding: 0;
    margin: 4px 8px;
    background: rgba(255, 255, 255, 0.07);
}

ul.menu > li.separator:hover {
    background: rgba(255, 255, 255, 0.07);
}

ul.menu > li.disabled {
    opacity: 0.4;
}

/* Menu trigger (arrow) */
.menuTrigger {
    opacity: 0;
    transition: opacity 0.15s;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.menuTrigger .material-icons {
    font-size: 16px;
}

.menuTrigger:hover,
:hover > .menuTrigger,
.message-wrap:hover .menuTrigger {
    opacity: 1;
}

/* ── 17. MODALS & ALERTS ─────────────────────────────────────────── */

.modal-overlay,
.alert-overlay {
    background: var(--overlay);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal,
.forward-dialog,
.alert-box {
    background: var(--surface-2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.forward-dialog {
    border-radius: var(--radius-lg);
    padding: 0;
    box-shadow: var(--shadow-xl);
}

.modal-footer,
.forward-dialog-footer {
    border-top: 1px solid var(--border);
    padding: 12px 16px;
}

/* ── 18. LOGIN PANEL ────────────────────────────────────────────── */
#sidepanel.login-panel #sidepanel-content {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.login-logo {
    width: 220px;
    height: auto;
    max-height: 130px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(0, 200, 83, 0.6)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
    border-radius: 0;
    box-shadow: none;
}

.login-title {
    color: var(--text-primary);
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 28px;
    letter-spacing: -0.02em;
    text-shadow: none;
}

.login-fields {
    gap: 16px;
    margin-bottom: 24px;
}

/* ── 19. INFO PANEL / NOTIFICATIONS ────────────────────────────── */

.info-box {
    border-radius: var(--radius-sm);
    border: none;
    padding: 10px 14px;
}

.info-box.error {
    background: rgba(244, 67, 54, 0.12);
    border-left: 3px solid var(--danger);
    color: #ff8a80;
}

.info-box.warning {
    background: rgba(255, 183, 77, 0.12);
    border-left: 3px solid var(--warning);
    color: #ffcc80;
}

.info-box.info {
    background: rgba(113, 186, 250, 0.1);
    border-left: 3px solid var(--blue);
    color: #90caf9;
}

/* ── 20. LETTER TILES (avatars) ─────────────────────────────────── */

.letter-tile {
    border-radius: 50%;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    user-select: none;
}

/* ── 21. PINNED MESSAGES ─────────────────────────────────────────── */

.pinned {
    background: transparent;
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    transition: background 0.15s;
}

.pinned:hover {
    background: rgba(255, 255, 255, 0.05);
}

.pinned-scroll {
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
}

#pinned-wrapper {
    border-left: 3px solid var(--green);
    padding-left: 4px;
}

/* ── 22. AUDIO PLAYER ────────────────────────────────────────────── */

.audio {
    background: rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-pill);
}

.audio-player .material-icons.large {
    color: var(--green);
}

.audio-speed-btn {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
}

.audio-speed-btn:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* ── 23. IMAGE PREVIEW ───────────────────────────────────────────── */

/* Inline images/videos inside chat bubbles */
.inline-image {
    border-radius: var(--radius-sm);
    overflow: hidden;
    max-width: min(36rem, 100%);
    max-height: 24rem;
    height: auto;
}

.inline-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: initial;
    border-radius: var(--radius-sm);
}

/* .image-preview used as inline element in bubbles */
.bubble .image-preview {
    border-radius: var(--radius-sm);
    overflow: hidden;
    max-width: min(36rem, 100%);
    max-height: 24rem;
    height: auto;
}

/* .image-preview as <video> inside the fullscreen modal — fill the container */
#image-preview-container .image-preview,
#image-preview-container video.image-preview {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 200px;
    max-height: calc(100vh - 120px);
    object-fit: contain;
    display: block;
    border-radius: 0;
    background: #000;
}

/* ── 24. DRAG AND DROP ────────────────────────────────────────────── */

.drag-n-drop {
    border-color: var(--green);
    background: rgba(13, 20, 33, 0.95);
    border-radius: var(--radius-xl);
    border-width: 2px;
}

/* ── 25. SKELETON LOADERS ─────────────────────────────────────────── */

.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.09) 50%,
        rgba(255, 255, 255, 0.04) 75%
    );
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: skeleton-shimmer 1.6s ease infinite;
}

.skeleton-avatar {
    border-radius: 50%;
}

/* ── 26. EMPTY STATES ─────────────────────────────────────────────── */

.empty-state {
    color: var(--text-muted);
    text-align: center;
    padding: 40px 20px;
}

.empty-state-icon {
    font-size: 52px;
    opacity: 0.35;
    margin-bottom: 16px;
    color: var(--text-muted);
}

.empty-state-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.empty-state-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ── 27. REACTION BAR & CAPSULES ────────────────────────────────── */

.reaction-bar {
    background: rgba(20, 32, 48, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-pill);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.5),
        0 1px 4px rgba(0, 0, 0, 0.3);
    padding: 5px 10px;
    gap: 4px;
    display: flex;
    align-items: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.reaction-btn {
    border-radius: var(--radius-sm);
    font-size: 20px;
    padding: 4px 6px;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.12s;
}

.reaction-btn:hover:not(.reaction-btn--disabled) {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(1.3) translateY(-2px);
}

.reaction-btn--mine {
    background: rgba(76, 175, 80, 0.18);
}

.reaction-btn--disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.reaction-capsule {
    background: rgba(28, 43, 56, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-pill);
    padding: 4px 10px 4px 7px;
    font-size: 13px;
    gap: 5px;
    transition:
        transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.12s,
        border-color 0.12s;
}

.reaction-capsule:hover:not(.reaction-capsule--disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(76, 175, 80, 0.45);
    transform: scale(1.06);
}

.reaction-capsule--mine {
    background: rgba(76, 175, 80, 0.18);
    border-color: rgba(76, 175, 80, 0.5);
}

.reaction-capsule--mine .reaction-capsule__count {
    color: var(--green);
    font-weight: 600;
}

.reaction-capsule--disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.reaction-capsule__emoji {
    font-size: 15px;
    line-height: 1;
}

.reaction-capsule__count {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ── 28. EMOJI PICKER ────────────────────────────────────────────── */

.emoji-picker {
    background: #1a2638;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 10px;
}

.emoji-picker__search {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
}

.emoji-picker__search:focus {
    border-color: rgba(76, 175, 80, 0.45);
}

/* ── 29. CHIP TAGS ───────────────────────────────────────────────── */

.chip {
    background: rgba(76, 175, 80, 0.12);
    border: 1px solid rgba(76, 175, 80, 0.25);
    border-radius: var(--radius-pill);
    color: var(--green);
    font-size: 13px;
    padding: 4px 10px;
}

/* ── 30. BADGES & LABELS ─────────────────────────────────────────── */

/* Unread count badge */
.unread {
    background: var(--green);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    width: auto;
    height: 20px;
    border-radius: var(--radius-pill);
    padding: 0 5px;
    line-height: 20px;
    margin-left: 4px;
}

.badge {
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    border-radius: var(--radius-xs);
    padding: 2px 5px;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.badge.green {
    background: rgba(76, 175, 80, 0.15);
    border-color: rgba(76, 175, 80, 0.25);
    color: var(--green);
}

/* ── 31. DAY CHIP ─────────────────────────────────────────────────── */

.day-chip-row {
    margin: 8px 0;
}

.day-chip {
    background: rgba(13, 22, 33, 0.82);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    letter-spacing: 0.01em;
    text-transform: none;
}

/* ── 32. SETTINGS PANELS ─────────────────────────────────────────── */

.acc-section {
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 12px;
}

.acc-section-row {
    border-bottom: 1px solid var(--border);
    padding: 14px 16px;
    transition: background 0.12s;
}

.acc-section-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.acc-section-row:last-child {
    border-bottom: none;
}

/* ── 33. SMOOTH PANEL TRANSITIONS ────────────────────────────────── */

#sidepanel-content > * {
    transition: opacity 0.15s ease;
}

/* ── 34. CALL ITEMS ──────────────────────────────────────────────── */

.call-item {
    border-radius: var(--radius-sm);
    margin: 2px 8px;
    padding: 10px 12px;
    transition: background 0.12s;
}

.call-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* ── 35. FILE DOC PREVIEW ────────────────────────────────────────── */

.doc-preview {
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── 36. UPLOADING/FILE PROGRESS ─────────────────────────────────── */

.file-progress {
    background: rgba(76, 175, 80, 0.15);
    border-radius: var(--radius-sm);
}

/* ── 37. INLINE VIDEO ────────────────────────────────────────────── */

/* Inline video thumbnail in chat bubble */
.inline-video {
    border-radius: var(--radius-sm);
    overflow: hidden;
    max-width: min(36rem, 100%);
    max-height: 24rem;
    height: auto;
    position: relative;
}

/* Expanded HTML5 player inside inline-video (after click) */
.inline-video video {
    width: 100%;
    height: auto;
    max-height: 24rem;
    display: block;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

/* Thumbnail img inside .inline-video */
.inline-video img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ── 38. BOT FORM BUTTONS ────────────────────────────────────────── */

.bot-form button {
    background: rgba(76, 175, 80, 0.12);
    color: var(--green);
    border-radius: var(--radius-sm);
    text-transform: none;
    font-size: 13px;
    height: 32px;
    line-height: 32px;
    border: 1px solid rgba(76, 175, 80, 0.2);
}

.bot-form button:hover {
    background: rgba(76, 175, 80, 0.2);
}

/* ── 39. NAV ACTION BTN ──────────────────────────────────────────── */

.nav-action-btn {
    background: rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-sm);
    width: 32px;
    height: 32px;
    transition: var(--transition-fast);
}

.nav-action-btn:hover {
    background: rgba(76, 175, 80, 0.18);
    color: var(--green);
}

/* ── 40. RECEIVED MARKER (checkmarks) ────────────────────────────── */

.material-icons.received-marker {
    color: rgba(232, 237, 242, 0.55);
    font-size: 14px;
}

.material-icons.received-marker.read {
    color: var(--green);
}

/* ── 41. OFFLINE BANNER ──────────────────────────────────────────── */

.offline-banner {
    background: #2a1a00;
    border-bottom: 1px solid rgba(255, 183, 77, 0.3);
    color: var(--warning);
    font-size: 13px;
    font-weight: 500;
}

/* ── 42. TABBAR ──────────────────────────────────────────────────── */

.tabbar {
    border-bottom: 1px solid var(--border);
    background: transparent;
}

.tabbar-item {
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 16px;
    transition: var(--transition-fast);
}

.tabbar-item:hover {
    color: var(--text-primary);
}

.tabbar-item.active {
    color: var(--green);
    border-bottom-color: var(--green);
}

/* ── 43. SPINNER ─────────────────────────────────────────────────── */

.spinner {
    border-color: rgba(255, 255, 255, 0.12);
    border-top-color: var(--green);
}

/* ── 44. ONLINE INDICATOR ─────────────────────────────────────────── */

.online-indicator,
.clr-online {
    background: var(--online);
    border: 2px solid var(--bg-sidebar);
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

/* ── 45. GLOBAL SEARCH RESULT HIGHLIGHT ──────────────────────────── */

mark,
.highlight {
    background: rgba(76, 175, 80, 0.25);
    color: var(--green);
    border-radius: 2px;
    padding: 0 2px;
}

/* ── 46. ACCEPT INVITE PANEL ─────────────────────────────────────── */

.accept-invite-panel {
    background: var(--bg-footer);
    backdrop-filter: none;
    border-top: 1px solid var(--border);
    box-shadow: none;
}

/* ── 47. SESSION EXPIRED MODAL ───────────────────────────────────── */

.session-expired-modal {
    background: var(--surface-2);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-xl);
}

/* ── 48. MAINTENANCE OVERLAY ─────────────────────────────────────── */

.maintenance-overlay {
    background: rgba(13, 20, 33, 0.96);
    backdrop-filter: blur(8px);
}

/* ── 49. QR CODE ─────────────────────────────────────────────────── */

.qr-container {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 12px;
    display: inline-block;
}

/* ── 50. PROFILE / INFO VIEW ─────────────────────────────────────── */

.info-view-header {
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
}

/* ── 51. ATTACHMENT/UPLOAD ───────────────────────────────────────── */

.attachment-preview {
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── 52. MESSAGE WRAP ────────────────────────────────────────────── */

.message-wrap {
    display: flex;
    flex-direction: column;
    position: relative;
}

.right .message-wrap {
    align-items: flex-end;
}

.left .message-wrap {
    align-items: flex-start;
}

/* ── 53. GLOBAL ANIMATIONS ───────────────────────────────────────── */

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── 54. RESPONSIVE — MOBILE ─────────────────────────────────────── */

@media (max-width: 767px) {
    #sidepanel {
        min-width: 100%;
        max-width: 100%;
    }

    .bubble {
        max-width: 88%;
    }

    #send-message-panel {
        padding: 6px 8px;
    }

    .caption-panel {
        height: 52px;
        min-height: 52px;
    }
}

/* ── 55. ICON RAIL ACTIVE INDICATOR ─────────────────────────────── */

.icon-rail-btn.active::before {
    display: none;
}

/* ── 56. PENDING/FAILED message states ───────────────────────────── */

.pending .bubble {
    opacity: 0.8;
}

.failed .bubble {
    border: 1px solid rgba(244, 67, 54, 0.4);
}

/* ── 57. SCHEDULE VIEW ───────────────────────────────────────────── */

.schedule-view-container {
    background: var(--bg-chat);
}

/* ── 58. WALLPAPER AREA ──────────────────────────────────────────── */

.wallpaper-container {
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.15s;
}

.wallpaper-container.selected {
    border-color: var(--green);
}

/* ── 59. CONTACT ACTION BUTTON ────────────────────────────────────── */

.contact-action {
    color: var(--green);
    transition: var(--transition-fast);
}

.contact-action:hover {
    color: var(--green-hover);
}

/* ── 60. PANEL FORM INDENT ────────────────────────────────────────── */

.panel-form-indent {
    padding-left: 20px;
}

.danger-text {
    color: var(--danger);
    font-size: 13px;
}
.success-text {
    color: var(--green);
    font-size: 13px;
}

/* ── 61. CHAT CARD (Stage 1 sidebar cards) ────────────────────────── */

.chat-list {
    gap: 2px;
    padding: 4px 0;
}

.chat-card {
    border-radius: var(--radius-md);
    min-height: 68px;
    padding: 10px 12px;
    gap: 10px;
    transition: background 0.12s ease;
    border: none;
}

.chat-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: none;
}

.chat-card.active {
    background: rgba(76, 175, 80, 0.16);
    border: none;
}

/* Avatars in chat-card — make circular like Telegram */
.chat-card .avatar,
.avatar:not(.contact-box .avatar) {
    border-radius: 50%;
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, #1a3a60, var(--green));
}

/* Online dot */
.online-dot {
    width: 11px;
    height: 11px;
    border: 2px solid var(--bg-sidebar);
    background: var(--online);
}

.online-dot.large {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

/* Chat name */
.chat-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
}

/* Chat preview text */
.chat-preview {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.3;
}

/* Chat meta (time, badge) */
.chat-meta {
    color: var(--text-muted);
    font-size: 12px;
    gap: 5px;
}

/* Stage 1 sidebar badge (different from .unread) */
.chat-list .badge {
    min-width: 20px;
    height: 20px;
    border-radius: var(--radius-pill);
    background: var(--green);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    padding: 0 5px;
    border: none;
}

/* ── 62. TV-BTN (teams view buttons) ──────────────────────────────── */

.tv-btn {
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    transition: var(--transition-fast);
}

.tv-btn-primary {
    background: var(--green);
    color: #fff;
}

.tv-btn-primary:hover:not(:disabled) {
    background: var(--green-hover);
}

.tv-btn-cancel {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
}

.tv-btn-cancel:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.07);
}

/* ── 63. TV-MODAL ─────────────────────────────────────────────────── */

.tv-modal {
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-xl);
}

.tv-overlay {
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
}

/* ── 64. TV-FIELD ─────────────────────────────────────────────────── */

.tv-field {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    padding: 10px 14px;
    transition: border-color 0.15s;
}

.tv-field:focus {
    border-color: rgba(76, 175, 80, 0.5);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.12);
    outline: none;
}

/* ── 65. ALERT/DIALOG ─────────────────────────────────────────────── */

div.alert {
    background: #1c2b38;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

div.alert-container {
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

div.alert-container .title {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
}

/* ── ПЛАВНЫЙ СКРОЛЛ ──────────────────────────────────────────────────── */

#messages-panel {
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    overflow-anchor: none;
}

/* Боковая панель */
#sidepanel .contact-box,
#sidepanel ul {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════════════════════
   СОВРЕМЕННЫЙ ДИЗАЙН — расширенный набор стилей
   ═══════════════════════════════════════════════════════════════════ */

/* ── KEYFRAMES ─────────────────────────────────────────────────────── */

@keyframes badgePop {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }
    70% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulseOnline {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.5);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(76, 175, 80, 0);
    }
}

@keyframes typingDot {
    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

@keyframes goLatestBounce {
    0% {
        transform: translateY(12px) scale(0.85);
        opacity: 0;
    }
    60% {
        transform: translateY(-3px) scale(1.04);
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* ── ФОН ЧАТА — тонкий точечный паттерн ───────────────────────────── */

#messages-panel {
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.018) 1px,
        transparent 1px
    );
    background-size: 28px 28px;
}

/* ── ПУЗЫРИ — улучшенные тени и глубина ───────────────────────────── */

.left .bubble {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.25),
        0 0 0 0.5px rgba(255, 255, 255, 0.04);
}

.right .bubble {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.25),
        0 0 0 0.5px rgba(76, 175, 80, 0.12);
}

/* ── ОНЛАЙН ИНДИКАТОР — пульс ─────────────────────────────────────── */

.online-dot,
.online-indicator,
.clr-online {
    animation: pulseOnline 2.5s ease-in-out infinite;
}

/* ── БЕЙДЖ НЕПРОЧИТАННЫХ — появление ─────────────────────────────── */

.unread-badge {
    animation: badgePop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.4);
}

/* ── КНОПКА "ВНИЗ" ────────────────────────────────────────────────── */

#go-to-latest {
    background: rgba(20, 32, 48, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.45),
        0 1px 4px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius-pill);
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: goLatestBounce 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

#go-to-latest:hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(76, 175, 80, 0.25);
    background: rgba(26, 40, 60, 0.98);
}

#go-to-latest .material-icons {
    color: var(--text-primary);
    font-size: 20px;
}

.new-msg-count {
    background: var(--green);
    box-shadow: 0 1px 4px rgba(76, 175, 80, 0.5);
    animation: badgePop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── КНОПКА ОТПРАВКИ — круговая, тёмная ───────────────────────────── */

#send-message-panel > a:last-of-type {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: #1e2c38;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.18s ease,
        background 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}

#send-message-panel > a:last-of-type:hover {
    background: #27384a;
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

#send-message-panel > a:last-of-type:active {
    transform: scale(0.92);
}

#send-message-panel > a:last-of-type .material-icons {
    color: #ffffff;
    font-size: 20px;
    animation: icon-pop-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes icon-pop-in {
    from { opacity: 0; transform: scale(0.35) rotate(-30deg); }
    to   { opacity: 1; transform: scale(1)    rotate(0deg); }
}

/* ── ПОЛЕ ВВОДА — улучшенное свечение ─────────────────────────────── */

#send-message-input:focus {
    border-color: rgba(76, 175, 80, 0.45);
    box-shadow:
        0 0 0 3px rgba(76, 175, 80, 0.1),
        inset 0 0 0 1px rgba(76, 175, 80, 0.08);
}

/* ── ХЭДЕР ЧАТА — разделитель с тенью ────────────────────────────── */

.caption-panel {
    box-shadow:
        0 1px 0 var(--border),
        0 2px 8px rgba(0, 0, 0, 0.12);
}

/* ── СПИСОК ЧАТОВ — активный индикатор слева ──────────────────────── */

.contact-box > li {
    position: relative;
    overflow: hidden;
}

.contact-box > li.selected::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 55%;
    background: var(--green);
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
    animation: slideUpFade 0.2s ease both;
}

/* ── АВАТАРЫ — плавное появление кольца при ховере ───────────────── */

.contact-box .avatar-box,
.contact-box .avatar {
    transition: box-shadow 0.2s ease;
}

.contact-box > li:hover .avatar-box,
.contact-box > li:hover .avatar {
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.35);
}

/* ── МЕНЮ СООБЩЕНИЯ — улучшенный триггер ─────────────────────────── */

.menuTrigger {
    background: rgba(13, 20, 33, 0.7);
    backdrop-filter: blur(4px);
    border-radius: var(--radius-sm);
    transition:
        opacity 0.15s ease,
        background 0.12s ease,
        transform 0.15s ease;
    width: 20px;
    height: 20px;
}

.menuTrigger .material-icons {
    font-size: 16px;
}

.menuTrigger:hover {
    background: rgba(26, 38, 56, 0.95);
    transform: scale(1.08);
}

ul.menu {
    animation: slideUpFade 0.15s ease both;
}

/* ── ИНДИКАТОР НАБОРА ТЕКСТА ───────────────────────────────────────── */

.typing-dot,
.typing .dot {
    animation: typingDot 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2),
.typing .dot:nth-child(2) {
    animation-delay: 0.2s;
}
.typing-dot:nth-child(3),
.typing .dot:nth-child(3) {
    animation-delay: 0.4s;
}

/* ── МОДАЛЬНЫЕ ОКНА — плавное появление ───────────────────────────── */

.modal,
.forward-dialog,
.alert-box {
    animation: slideUpFade 0.2s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

/* ── ДОП. КнопkИ В ПАНЕЛИ ВВОДА ──────────────────────────────────── */

#send-message-panel a:not(:last-of-type) {
    border-radius: var(--radius-sm);
    transition:
        background 0.12s ease,
        transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#send-message-panel a:not(:last-of-type):hover .material-icons {
    transform: scale(1.12);
}

/* ── ЗАКРЕПЛЁННЫЕ СООБЩЕНИЯ ───────────────────────────────────────── */

.pinned-message-bar {
    background: rgba(20, 32, 48, 0.95);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ── СКРОЛЛБАР — тонкий и современный ────────────────────────────── */

#messages-panel::-webkit-scrollbar {
    width: 4px;
}
#messages-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 4px;
}
#messages-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.24);
}

/* ── КНОПКИ ТУЛБАРА ШАПКИ — увеличенный ховер ────────────────────── */

.caption-toolbar a {
    transition:
        background 0.12s ease,
        transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.caption-toolbar a:hover {
    transform: scale(1.08);
}

/* ── ПОИСК В САЙДБАРЕ — плавный фокус ────────────────────────────── */

.global-search,
.local-search {
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}

/* ── ВРЕМЕННА́Я МЕТКА — fade in при ховере ─────────────────────────── */

.bubble .timestamp {
    transition: opacity 0.15s ease;
}

/* ── ДАТА-ЧИП — чуть интереснее ───────────────────────────────────── */

.meta .bubble.date {
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ── ФАЙЛОВЫЕ ВЛОЖЕНИЯ — hover ────────────────────────────────────── */

.attachment {
    transition:
        background 0.12s ease,
        border-color 0.12s ease;
}

.attachment:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
}

/* ═══════════════════════════════════════════════════════════════════
   NEXUS THEME — Stage 2: Full Redesign Match
   Reference: messenger_redesign.html
   ═══════════════════════════════════════════════════════════════════ */

/* Apply Sora to app UI — explicitly exclude icon font elements */
html,
body,
#app-container,
#sidepanel,
#sidepanel-content,
#topic-view,
#messages-panel,
#send-message-panel,
#icon-rail,
.caption-panel,
.sidebar,
button,
input,
textarea,
select,
label {
    font-family: var(--font);
}

/* Preserve Material Icons font — never override icon elements */
.material-icons,
.material-symbols-outlined,
[class*="material-icon"] {
    font-family: "Material Icons", "Material Symbols Outlined";
}

/* Apply Sora to app UI — never touch icon elements */
html,
body,
#app-container,
#sidepanel,
#sidepanel-content,
#topic-view,
#messages-panel,
#send-message-panel,
#icon-rail,
.caption-panel,
.sidebar,
button,
input,
textarea,
select,
label {
    font-family: var(--font);
}

/* Monospace for timestamps, code, schedule times */
.bubble .timestamp,
.chat-box .timestamp,
.day-chip,
code,
pre,
.font-mono {
    font-family: var(--font-mono);
}

/* Preserve Material Icons — must stay !important to win over any inherited font */
.material-icons,
.material-symbols-outlined,
[class*="material-icon"] {
    font-family: "Material Icons", "Material Symbols Outlined" !important;
}

/* ── ICON RAIL LOGO — gradient box with amber glow ─────────────────── */

.icon-rail-logo {
    background: linear-gradient(135deg, #2d9e4f, #3ecf8e);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(45, 158, 79, 0.35);
    color: #fff;
    width: 36px;
    height: 36px;
    margin: 0 auto 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-rail-logo .material-icons {
    font-size: 18px;
    color: #fff;
}

/* ── ICON RAIL LABEL — fix class name ────────────────────────────────── */
/* The compiled app uses .icon-rail-label, not .icon-rail-btn-label */
.icon-rail-label {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.02em;
    display: block;
    line-height: 1.2;
}

/* ── ICON RAIL ACTIVE STATE ──────────────────────────────────────────── */

.icon-rail-btn.active {
    background: rgba(45, 158, 79, 0.09);
    color: var(--green);
}

.icon-rail-btn.active::before {
    box-shadow: 0 0 8px rgba(45, 158, 79, 0.5);
}

.icon-rail-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-secondary);
}

/* ── SIDEBAR PANEL TITLE — 17px like reference ───────────────────────── */

.sidebar-head h1 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

#sidepanel-title.panel-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

/* ── AVATAR SHAPE — rounded square 14px like reference ───────────────── */

.contact-box .avatar-box,
.contact-box .avatar,
.letter-tile {
    border-radius: 14px;
}

/* Keep small inline avatars slightly rounder */
.contact-box .avatar-box img {
    border-radius: 12px;
}

/* Avatar amber ring on hover */
.contact-box > li:hover .avatar-box,
.contact-box > li:hover .avatar {
    box-shadow: 0 0 0 2px rgba(45, 158, 79, 0.4);
}

/* ── CHAT LIST SELECTED ITEM — amber indicator ───────────────────────── */

.contact-box > li.selected {
    background: rgba(45, 158, 79, 0.09);
}

.contact-box > li.selected::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 55%;
    background: var(--green);
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 8px rgba(45, 158, 79, 0.55);
    animation: slideUpFade 0.2s ease both;
}

/* ── STAGGERED CHAT LIST ANIMATION ──────────────────────────────────── */

@keyframes nexus-item-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.contact-box > li:nth-child(1) {
    animation: nexus-item-in 0.18s 0.02s both;
}
.contact-box > li:nth-child(2) {
    animation: nexus-item-in 0.18s 0.05s both;
}
.contact-box > li:nth-child(3) {
    animation: nexus-item-in 0.18s 0.08s both;
}
.contact-box > li:nth-child(4) {
    animation: nexus-item-in 0.18s 0.11s both;
}
.contact-box > li:nth-child(5) {
    animation: nexus-item-in 0.18s 0.14s both;
}
.contact-box > li:nth-child(6) {
    animation: nexus-item-in 0.18s 0.17s both;
}
.contact-box > li:nth-child(7) {
    animation: nexus-item-in 0.18s 0.2s both;
}

/* ── NEW MESSAGE BUBBLE ANIMATION ────────────────────────────────────── */

@keyframes nexus-msg-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.chat-box li {
    animation: nexus-msg-in 0.2s ease-out both;
}

/* ── MESSAGES PANEL BACKGROUND — radial gradient like reference ──────── */

#messages-panel {
    background:
        radial-gradient(
            ellipse at 20% 80%,
            rgba(45, 158, 79, 0.04) 0%,
            transparent 50%
        ),
        radial-gradient(
            ellipse at 80% 20%,
            rgba(62, 207, 142, 0.04) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px
        ),
        var(--bg-chat);
    background-size:
        100% 100%,
        100% 100%,
        28px 28px;
}

/* ── SCHEDULE VIEW — Complete Nexus Styling (.sch-*) ─────────────────── */

.sch-root {
    background: var(--bg-chat);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.sch-header {
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    padding: 10px 14px;
    min-height: 56px;
    flex-shrink: 0;
    box-shadow:
        0 1px 0 var(--border),
        0 2px 8px rgba(0, 0, 0, 0.12);
}

.sch-header-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.sch-header-info {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 1px;
}

.sch-search-wrap {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-pill);
    height: 40px;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.sch-search-wrap:focus-within {
    border-color: rgba(45, 158, 79, 0.45);
    box-shadow: 0 0 0 3px rgba(45, 158, 79, 0.12);
}

.sch-search-icon {
    color: var(--text-muted);
    font-size: 18px;
}

.sch-search-input {
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font);
    background: transparent;
    border: none;
    border-bottom: none;
    height: auto;
    padding: 0;
}

.sch-search-input::placeholder {
    color: var(--text-placeholder);
}

.sch-search-clear {
    color: var(--text-muted);
    transition: color 0.12s;
}

.sch-search-clear:hover {
    color: var(--text-primary);
}

.sch-back {
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    width: 36px;
    height: 36px;
}

.sch-back:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
}

.sch-list {
    flex: 1;
    overflow-y: auto;
    background: var(--bg-sidebar);
}

.sch-group-item {
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    padding: 10px 14px;
    transition: background 0.12s ease;
    gap: 12px;
    user-select: none;
}

.sch-group-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.sch-group-item:active {
    background: rgba(45, 158, 79, 0.08);
}

.sch-group-icon {
    background: rgba(45, 158, 79, 0.12);
    border-radius: 10px;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sch-group-icon .material-icons {
    font-size: 20px;
    color: var(--green);
}

.sch-group-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sch-group-info {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.sch-group-chevron {
    font-size: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.sch-days {
    flex: 1;
    overflow-y: auto;
    padding: 8px 20px 20px;
}

.sch-days::-webkit-scrollbar {
    width: 4px;
}
.sch-days::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-pill);
}
.sch-days::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
}

.sch-day {
    margin-bottom: 4px;
}

.sch-day-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: var(--font-mono);
    padding: 8px 0 6px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sch-day-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.sch-day:first-child .sch-day-label {
    margin-top: 8px;
}

.sch-day-today {
    color: var(--green);
}

.sch-day-today::after {
    background: rgba(45, 158, 79, 0.25);
}

.sch-lesson {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 10px 14px;
    margin: 5px 0;
    transition:
        background 0.12s ease,
        border-color 0.12s ease;
    cursor: default;
    position: relative;
}

.sch-lesson:hover {
    background: var(--bg-elevated);
    border-color: rgba(255, 255, 255, 0.1);
}

.sch-lesson-subject {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    line-height: 1.3;
}

.sch-lesson-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 3px;
}

.sch-lesson-time {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
}

.sch-lesson-room {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    letter-spacing: 0.02em;
}

.sch-lesson-type {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    letter-spacing: 0.03em;
    background: rgba(255, 255, 255, 0.06);
}

.sch-lesson-teacher {
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-top: 5px;
}

.sch-status {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
    font-size: 14px;
}

.sch-status-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.sch-status-empty .material-icons {
    color: var(--text-muted);
    opacity: 0.4;
}

/* ── CALLS & TEAMS (tv-*) — Nexus amber theme ────────────────────────── */

.tv-root {
    background: var(--bg-sidebar);
}

.tv-search-bar {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-pill);
    margin: 10px 14px;
    height: 40px;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.tv-search-bar:focus-within {
    border-color: rgba(45, 158, 79, 0.45);
    box-shadow: 0 0 0 3px rgba(45, 158, 79, 0.12);
}

.tv-search-icon {
    color: var(--text-muted);
    font-size: 18px;
}

.tv-search-input {
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font);
    border: none;
    border-bottom: none;
    height: auto;
    padding: 0;
    background: transparent;
}

.tv-search-input::placeholder {
    color: var(--text-placeholder);
}

.tv-search-clear {
    color: var(--text-muted);
    background: transparent;
    border: none;
    min-width: auto;
    height: auto;
    min-height: auto;
    padding: 0;
    box-shadow: none;
}

.tv-search-clear:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}

.tv-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.tv-add-btn {
    background: rgba(45, 158, 79, 0.12);
    color: var(--green);
    border-radius: var(--radius-sm);
    width: 30px;
    height: 30px;
    border: 1px solid rgba(45, 158, 79, 0.2);
    transition:
        background 0.12s ease,
        box-shadow 0.12s ease;
    min-width: auto;
    min-height: auto;
    box-shadow: none;
    padding: 0;
}

.tv-add-btn:hover {
    background: rgba(45, 158, 79, 0.22);
    box-shadow: 0 2px 8px rgba(45, 158, 79, 0.3);
}

.tv-add-btn .material-icons {
    font-size: 18px;
    color: var(--green);
}

/* Calls: filter tabs */
.calls-filter-tabs {
    display: flex;
    gap: 4px;
    padding: 6px 14px 10px;
    border-bottom: 1px solid var(--border);
}

.calls-filter-tab {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition:
        background 0.12s ease,
        color 0.12s ease;
    min-width: auto;
    height: auto;
    min-height: auto;
    margin: 0;
}

.calls-filter-tab:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    transform: none;
    box-shadow: none;
}

.calls-filter-tab.active {
    background: rgba(45, 158, 79, 0.12);
    color: var(--green);
}

.calls-group-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 12px 14px 6px;
    display: block;
}

.calls-list {
    flex: 1;
    overflow-y: auto;
}

/* TV state: empty state */
.tv-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    gap: 10px;
    text-align: center;
    flex: 1;
}

.tv-state-icon {
    font-size: 52px;
    color: var(--text-muted);
    opacity: 0.35;
    margin-bottom: 4px;
}

.tv-state-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
    padding: 0;
}

.tv-state-hint {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 240px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

/* TV content area */
.tv-content {
    flex: 1;
    overflow-y: auto;
    display: flex !important;
    flex-direction: column;
}

/* Teams: header actions alignment */
.tv-header {
    border-bottom: 1px solid var(--border);
    padding: 12px 14px 10px;
}

/* ── FULL-WIDTH PANEL (teams, calls, favorites, schedule) ─────────────── */

#sidepanel.full-width-panel {
    min-width: 100%;
    max-width: 100%;
    border-right: none;
}

/* ── INPUT FIELD BORDER-RADIUS — slightly rounder ────────────────────── */

#send-message-input {
    border-radius: 12px;
}

/* ── CONTACT LIST — apply avatar gradient (like reference) ───────────── */

.contact-box .avatar,
.contact-box .avatar-box .letter-tile {
    background: linear-gradient(135deg, #2d9e4f, #3ecf8e);
}

/* ── ONLINE INDICATOR — teal color with pulse ────────────────────────── */

.online-dot,
.online-indicator,
.clr-online {
    background: #3ecf8e;
    box-shadow: 0 0 6px rgba(62, 207, 142, 0.6);
}

/* Chat list: online dot on avatar — properly positioned */
.contact-box .avatar-box .online {
    width: 11px;
    height: 11px;
    min-width: 11px;
    min-height: 11px;
    bottom: -1px;
    right: -1px;
    border: 2px solid var(--bg-primary, #0b141a);
    box-shadow: none;
    background: #3ecf8e;
}

.contact-box .avatar-box .offline {
    bottom: -1px;
    right: -1px;
    border: 2px solid var(--bg-primary, #0b141a);
}

/* ── HEADER: online pulse indicator next to "online" text ────────────── */

#topic-last-seen {
    display: flex;
    align-items: center;
    gap: 5px;
}

.online-pulse-indicator {
    display: inline-block;
    width: 7px;
    height: 7px;
    min-width: 7px;
    min-height: 7px;
    background: #3ecf8e;
    border-radius: 50%;
    flex-shrink: 0;
    animation: online-pulse 2s ease-in-out infinite;
}

.online-pulse-indicator.typing {
    animation: typing-pulse 0.6s ease-in-out infinite;
}

@keyframes online-pulse {
    0%, 100% { opacity: 1;   transform: scale(1);    box-shadow: 0 0 0 0   rgba(62, 207, 142, 0.5); }
    50%       { opacity: 0.6; transform: scale(0.78); box-shadow: 0 0 0 3px rgba(62, 207, 142, 0);   }
}

@keyframes typing-pulse {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

/* ── UNREAD BADGE — amber colored ────────────────────────────────────── */

.unread-badge,
.unread,
.chat-list .badge,
.new-msg-count {
    background: var(--green);
    box-shadow: 0 2px 8px rgba(45, 158, 79, 0.4);
}

/* ── DAY CHIP — monospace font ───────────────────────────────────────── */

.day-chip {
    font-family: var(--font-mono);
    letter-spacing: 0.01em;
}

/* ── LINK COLORS — amber ─────────────────────────────────────────────── */

a {
    color: var(--green);
}

a:hover,
a:focus {
    color: var(--green-hover);
}

/* ── SPINNER — amber ─────────────────────────────────────────────────── */

.spinner {
    border-top-color: var(--green);
}

/* ── PANEL TITLE — refine for sidebar caption ─────────────────────────── */

.caption-panel .panel-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ── SEND BUTTON — amber rounded square ──────────────────────────────── */

#send-message-panel > a:last-of-type {
    border-radius: 11px;
}

/* ── SEARCH FOCUS GLOW — consistent amber ────────────────────────────── */

.global-search:focus-within,
.local-search:focus-within {
    box-shadow: 0 0 0 3px rgba(45, 158, 79, 0.12);
}

/* ── MODAL TITLE ─────────────────────────────────────────────────────── */

div.alert-container .title {
    color: var(--green);
}

/* ── TABBAR ACTIVE — amber ───────────────────────────────────────────── */

.tabbar-item.active {
    color: var(--green);
    border-bottom-color: var(--green);
}

/* ── CALL ITEM — styling ─────────────────────────────────────────────── */

.call-item {
    cursor: pointer;
    transition: background 0.12s ease;
}

.call-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* ── SMOOTH SCROLL ───────────────────────────────────────────────────── */

.sch-days,
.sch-list,
.tv-content,
.calls-list {
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

/* ─── FIX: Vertical indicator bar — full row height ─────────────── */
.contact-box > li.selected::after {
    height: calc(100% - 14px);
}

/* ─── FIX: Scroll-to-bottom button ─────────────────────────────── */

/* Стили только когда кнопка видима — не мешаем .hidden */
#go-to-latest:not(.hidden) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(22, 27, 36, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(14px);
    color: var(--text-primary);
    padding: 0;
    font-size: 0;
    animation: none;
    right: 32px; /* чуть левее */
    bottom: 10px; /* 10px от панели ввода */
    transition:
        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.2s ease;
}

#go-to-latest:not(.hidden):hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(45, 158, 79, 0.3);
}

#go-to-latest:not(.hidden) .material-icons {
    font-size: 20px;
    line-height: 1;
    display: block;
}

/* .hidden должен побеждать ID-селектор — нужен !important */
#go-to-latest.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   NEXUS — Reactions + Info panels polish
   Scope: reactions, emoji picker, group/user info only
   ═══════════════════════════════════════════════════════════════════ */

@keyframes nexus-pop-in {
    0%   { opacity: 0; transform: translateY(6px) scale(0.94); }
    70%  { opacity: 1; transform: translateY(-1px) scale(1.03); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes nexus-soft-slide {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes nexus-reaction-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(45, 158, 79, 0.26); }
    50%      { box-shadow: 0 0 0 5px rgba(45, 158, 79, 0); }
}

/* ─── REACTION BAR ─────────────────────────────────────────────── */

.message-wrap--reactionable {
    position: relative;
}

.reaction-bar-wrap {
    position: absolute;
    top: -28px;
    right: 10px;
    z-index: 8;
    pointer-events: none;
}

.left .reaction-bar-wrap {
    right: auto;
    left: 10px;
}

.reaction-bar {
    opacity: 0;
    transform: translateY(6px) scale(0.94);
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(35, 43, 61, 0.92), rgba(18, 23, 33, 0.88));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(45, 158, 79, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    transition:
        opacity 0.16s ease,
        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reaction-bar--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.reaction-btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    cursor: pointer;
    transition:
        transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.15s ease,
        box-shadow 0.15s ease,
        opacity 0.15s ease;
}

.reaction-btn__emoji {
    font-size: 18px;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35));
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reaction-btn:hover:not(.reaction-btn--disabled) {
    background: rgba(255, 255, 255, 0.10);
    transform: translateY(-3px) scale(1.14);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
}

.reaction-btn:hover:not(.reaction-btn--disabled) .reaction-btn__emoji {
    transform: scale(1.12);
}

.reaction-btn--mine {
    background: linear-gradient(135deg, rgba(45, 158, 79, 0.26), rgba(62, 207, 142, 0.12));
    box-shadow: inset 0 0 0 1px rgba(45, 158, 79, 0.26);
    animation: nexus-reaction-pulse 1.8s ease-in-out infinite;
}

.reaction-btn--disabled {
    opacity: 0.36;
    cursor: not-allowed;
    filter: grayscale(0.8);
}

.reaction-btn--more {
    color: var(--text-secondary);
}

.reaction-btn--more:hover:not(.reaction-btn--disabled) {
    color: var(--green);
}

/* ─── REACTION CAPSULES BELOW MESSAGE ───────────────────────────── */

.reaction-capsules {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
    animation: nexus-pop-in 0.22s ease both;
}

.right .reaction-capsules {
    justify-content: flex-end;
}

.reaction-capsule {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: auto;
    min-height: 26px;
    height: 26px;
    padding: 2px 8px 2px 6px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    background: rgba(28, 35, 51, 0.78);
    color: var(--text-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255,255,255,0.04);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition:
        transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.14s ease,
        border-color 0.14s ease,
        box-shadow 0.14s ease;
}

.reaction-capsule:hover:not(.reaction-capsule--disabled) {
    transform: translateY(-2px) scale(1.04);
    background: rgba(37, 45, 64, 0.92);
    border-color: rgba(45, 158, 79, 0.36);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(45, 158, 79, 0.10);
}

.reaction-capsule--mine {
    background: linear-gradient(135deg, rgba(45, 158, 79, 0.22), rgba(45, 158, 79, 0.08));
    border-color: rgba(45, 158, 79, 0.42);
    color: var(--green);
}

.reaction-capsule--disabled {
    opacity: 0.46;
    cursor: not-allowed;
    filter: grayscale(0.65);
}

.reaction-capsule__emoji {
    font-size: 15px;
    line-height: 1;
}

.reaction-capsule__count {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: currentColor;
}

/* ─── EMOJI PICKER ──────────────────────────────────────────────── */

.emoji-picker {
    width: 272px;
    padding: 10px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 16% 0%, rgba(45, 158, 79, 0.10), transparent 34%),
        radial-gradient(circle at 90% 90%, rgba(62,207,142,0.08), transparent 38%),
        rgba(22, 27, 36, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.56), inset 0 1px 0 rgba(255,255,255,0.06);
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    animation: nexus-pop-in 0.18s ease both;
}

.emoji-picker__search {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    margin: 0 0 8px;
    border-radius: 11px;
    background: rgba(10, 12, 16, 0.38);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-primary);
    font-size: 13px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.emoji-picker__search:focus {
    border-color: rgba(45, 158, 79, 0.44);
    box-shadow: 0 0 0 3px rgba(45, 158, 79, 0.12);
}

.emoji-picker__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    max-height: 230px;
    overflow-y: auto;
    padding-right: 2px;
}

.emoji-picker__grid::-webkit-scrollbar { width: 4px; }
.emoji-picker__grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; }

.emoji-picker__btn {
    min-width: 36px;
    min-height: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), background 0.12s ease;
}

.emoji-picker__btn:hover {
    transform: translateY(-2px) scale(1.16);
    background: rgba(255,255,255,0.10);
}

/* ─── INFO VIEW: USER/GROUP PROFILE ─────────────────────────────── */

#info-view {
    background:
        radial-gradient(ellipse at 18% 0%, rgba(45, 158, 79, 0.055) 0%, transparent 44%),
        radial-gradient(ellipse at 86% 20%, rgba(62,207,142,0.035) 0%, transparent 42%),
        var(--bg-chat);
}

#info-view-content {
    padding: 14px 14px 22px;
    scroll-behavior: smooth;
}

#info-view-content > .panel-form-column {
    padding: 0;
    gap: 8px;
}

#info-view-content center {
    position: relative;
    margin: 0 0 12px;
    padding: 24px 16px 20px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(45, 158, 79, 0.075), rgba(28,35,51,0.35)),
        rgba(22, 27, 36, 0.70);
    box-shadow: 0 10px 32px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
    overflow: hidden;
    animation: nexus-soft-slide 0.22s ease both;
}

#info-view-content center::before {
    content: '';
    position: absolute;
    inset: -40% -20% auto;
    height: 120px;
    background: linear-gradient(90deg, transparent, rgba(45, 158, 79, 0.12), transparent);
    transform: rotate(-8deg);
    pointer-events: none;
}

#info-view-content .avatar-upload,
#info-view-content .avatar-box,
#info-view-content .letter-tile {
    position: relative;
    z-index: 1;
}

#info-view-content .avatar-box,
#info-view-content .letter-tile {
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.34);
}

.avatar-edit-wrap-container {
    text-align: center;
    margin-bottom: 8px;
}
.avatar-edit-wrap {
    position: relative;
    display: inline-flex;
}
.avatar-edit-wrap .avatar-upload {
    margin: 0.25rem;
}
.avatar-edit-btn {
    position: absolute;
    bottom: 6px;
    right: -4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(45, 158, 79, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    text-decoration: none;
    z-index: 2;
}
.avatar-edit-btn .material-icons {
    font-size: 16px;
    color: #1c2333;
    line-height: 1;
}
.avatar-edit-btn:hover {
    background: rgba(45, 158, 79, 1.0);
}

#info-view-content .group {
    position: relative;
    margin: 0 0 8px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.075);
    background: rgba(22, 27, 36, 0.66);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
    animation: nexus-soft-slide 0.2s ease both;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

#info-view-content .group:hover {
    background: rgba(28, 35, 51, 0.78);
    border-color: rgba(45, 158, 79, 0.16);
    transform: translateY(-1px);
}

#info-view-content label.small,
#info-view-content .group label.small {
    display: block;
    margin-bottom: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.085em;
    text-transform: uppercase;
    color: var(--green);
}

#info-view-content .large {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

#info-view-content tt {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 7px;
    padding: 3px 7px;
}

#info-view-content .panel-form-row {
    margin: 0 0 8px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,0.075);
    border-radius: 14px;
    background: rgba(22, 27, 36, 0.56);
    animation: nexus-soft-slide 0.2s ease both;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

#info-view-content .panel-form-row:hover {
    background: rgba(28, 35, 51, 0.76);
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-1px);
}

#info-view-content .panel-form-row a:not(.flat-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.045);
    transition: color 0.14s ease, background 0.14s ease, transform 0.14s ease;
}

#info-view-content .panel-form-row a:not(.flat-button):hover {
    color: var(--green);
    background: rgba(45, 158, 79, 0.12);
    transform: scale(1.06);
}

#info-view-content .panel-form-row a:not(.flat-button) .material-icons {
    font-size: 17px;
}

#info-view-content .flat-button,
.flat-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--green);
    background: rgba(45, 158, 79, 0.09);
    border: 1px solid rgba(45, 158, 79, 0.18);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

#info-view-content .flat-button:hover,
.flat-button:hover {
    color: var(--green-hover);
    background: rgba(45, 158, 79, 0.16);
    border-color: rgba(45, 158, 79, 0.32);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(45, 158, 79, 0.13);
}

#info-view-content .flat-button .material-icons,
.flat-button .material-icons {
    font-size: 17px;
}

#info-view-content .flat-button.float-right {
    float: none;
    align-self: flex-end;
    margin: 0 0 4px;
}

#info-view-content .hr {
    height: 1px;
    margin: 10px 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.09), transparent);
}

#info-view .toast {
    position: absolute;
    left: 50%;
    top: 12px;
    transform: translateX(-50%) translateY(-12px);
    opacity: 0;
    pointer-events: none;
    z-index: 20;
    padding: 9px 14px;
    border-radius: 10px;
    background: rgba(22, 27, 36, 0.94);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--text-primary);
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
    backdrop-filter: blur(14px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

#info-view .toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ─── NEXUS: requested chat micro-fixes ─────────────────────────── */

/* Selected chat indicator: from very top to very bottom of the row */
.contact-box > li.selected::after {
    top: 0;
    bottom: 0;
    height: 100%;
    transform: none;
    border-radius: 0 3px 3px 0;
}

/* Short messages need enough width for time + read marks */
.chat-box li.right:not(.meta) .bubble {
    min-width: 6rem;
}

/* Сообщения с футером-кнопкой комментариев (и входящие, и исходящие)
   должны быть достаточно широкими, чтобы слово «Комментарий» со стрелкой
   помещалось целиком. Дальше пузырь растёт адаптивно под содержимое.
   На случай тесноты у лейбла есть многоточие (см. .msg-comment-label),
   так что стрелка-шеврон никогда не выходит за пределы пузыря. */
.chat-box li:not(.meta) .bubble:has(.msg-comment-btn) {
    min-width: 160px;
}

/* Reserve a little more inline room for the floating timestamp area */
.chat-box .timestamp-padding {
    width: 4.8rem;
}

/* Smaller sent/read check marks in timestamps */
.chat-box .timestamp .material-symbols-outlined.small,
.chat-box .timestamp .material-icons.small {
    font-size: 12px;
    line-height: 1;
    vertical-align: -2px;
    margin-left: -1px;
}

/* Slightly tighten timestamp itself so it fits better in compact bubbles */
.chat-box .timestamp {
    font-size: 10px;
    letter-spacing: -0.01em;
}

/* ─── NEXUS: media/avatar overlap guard + slightly larger read marks ─ */

/* Read/sent checks: a bit larger than the previous compact version */
.chat-box .timestamp .material-symbols-outlined.small,
.chat-box .timestamp .material-icons.small {
    font-size: 13px;
    line-height: 1;
    vertical-align: -2px;
    margin-left: 0;
}

/* Keep group avatars and media bubbles separated on old/media messages */
.chat-box.group {
    margin-left: 0;
}

.chat-box .avatar-box {
    z-index: 2;
    flex: 0 0 28px;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    margin-right: 10px;
}

.left .message-wrap {
    min-width: 0;
    margin-left: 0;
}

.left .bubble {
    z-index: 1;
}

/* Old inline media had a negative bottom offset in base.css; neutralize it */
.inline-image > .rounded-container {
    bottom: auto;
    margin: 0;
    border-left: 0;
    border-right: 0;
}

/* Media should stay within the bubble and not visually spill toward avatar */
.bubble .inline-image,
.bubble .image-preview,
.bubble .inline-video {
    display: block;
    max-width: 100%;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
}

/* ─── NEXUS: compact clamped emoji picker ───────────────────────── */
.emoji-picker {
    width: 178px;
    max-width: calc(100vw - 20px);
    padding: 7px;
    border-radius: 14px;
}

.emoji-picker__search {
    height: 30px;
    margin-bottom: 6px;
    padding: 0 9px;
    border-radius: 9px;
    font-size: 12px;
}

.emoji-picker__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    max-height: 190px;
}

.emoji-picker__btn {
    min-width: 34px;
    min-height: 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 18px;
}

/* ─── REACTIONS: адаптивное урезание быстрых реакций ────────────────
   Кнопки в панели идут: 1..5 — быстрые эмодзи, 6-я (последняя) — «ещё».
   На узких экранах прячем лишние быстрые реакции (nth-of-type), кнопка
   «ещё» (6-я) остаётся всегда — урезанные доступны через её окно.
   Десктоп: 5 · ≤600px: 4 · ≤400px: 3. */
@media (max-width: 600px) {
    .reaction-bar .reaction-btn:nth-of-type(5):not(.reaction-btn--more) {
        display: none;
    }
}

@media (max-width: 400px) {
    .reaction-bar .reaction-btn:nth-of-type(4):not(.reaction-btn--more) {
        display: none;
    }
}

/* ─── REACTIONS: окно «ещё» как шторка снизу на мобилке ─────────────
   На <=600px EmojiPicker рендерится с классом .emoji-picker--sheet и
   затемнённым фоном .emoji-picker-backdrop (см. emoji-picker.jsx). */
.emoji-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: nexus-backdrop-in 0.18s ease both;
}

.emoji-picker.emoji-picker--sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    z-index: 9999;
    border-radius: 20px 20px 0 0;
    padding: 8px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    animation: nexus-sheet-up 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.emoji-picker--sheet .emoji-picker__handle {
    width: 40px;
    height: 4px;
    margin: 2px auto 12px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.24);
}

.emoji-picker--sheet .emoji-picker__search {
    height: 38px;
    font-size: 14px;
}

.emoji-picker--sheet .emoji-picker__grid {
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    gap: 6px;
    max-height: 42vh;
}

.emoji-picker--sheet .emoji-picker__btn {
    width: 100%;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    font-size: 22px;
}

@keyframes nexus-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes nexus-sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* ─── SEND/VOICE BUTTON — dark round button ──────────────────────── */
#send-message-panel > a:last-of-type {
    background: #1e2c38;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition:
        transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.18s ease,
        background 0.15s ease;
}

#send-message-panel > a:last-of-type:hover {
    background: #27384a;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    transform: scale(1.08);
}

#send-message-panel > a:last-of-type .material-icons,
#send-message-panel > a:last-of-type .material-symbols-outlined,
#send-message-panel > a:last-of-type svg {
    color: #ffffff;
    fill: #ffffff;
    stroke: #ffffff;
}

#send-message-panel > a:last-of-type:hover .material-icons,
#send-message-panel > a:last-of-type:hover .material-symbols-outlined,
#send-message-panel > a:last-of-type:hover svg {
    color: #ffffff;
    fill: #ffffff;
    stroke: #ffffff;
    background: transparent;
}

/* ─── NEXUS: attachment card + avatar/media spacing fixes ───────── */

/* Reserve a real flex gap between group avatar and the incoming message/media. */
.chat-box li.left {
    column-gap: 10px;
}

.chat-box li.left > .avatar-box {
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    margin-right: 8px;
    margin-bottom: 10px;
    align-self: flex-end;
    z-index: 3;
}

.chat-box li.left > .message-wrap {
    min-width: 0;
    max-width: calc(100% - 44px);
}

.chat-box li.left .bubble .inline-image,
.chat-box li.left .bubble .image-preview,
.chat-box li.left .bubble .inline-video {
    max-width: 100%;
    margin-left: 0;
}

/* Author label sits under the bubble, not on top of the avatar. */
.chat-box li.left .message-wrap > .author {
    margin-left: 0;
    padding-left: 2px;
    margin-top: 3px;
    line-height: 1.2;
}

/* File/document attachments: darker, compact, better aligned inside bubbles. */
.bubble .attachment {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 280px;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 12px;
    border-radius: 13px;
    background: rgba(10, 12, 16, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

.right .bubble .attachment {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 2px 8px rgba(0, 0, 0, 0.2);
}

.bubble .attachment:hover {
    background: rgba(10, 12, 16, 0.42);
    border-color: rgba(255, 255, 255, 0.14);
}

.bubble .attachment > div:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(45, 158, 79, 0.14);
    color: #3ab85a;
}

.bubble .attachment .material-icons.big {
    font-size: 24px;
    color: #3ab85a;
}

.bubble .attachment .flex-column {
    min-width: 0;
    gap: 2px;
}

.bubble .attachment .flex-column > div:first-child {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.92);
}

.bubble .attachment .small.gray {
    color: rgba(255,255,255,0.46);
    font-size: 11px;
    font-weight: 500;
}

.bubble .attachment a,
.bubble .attachment .light-gray {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(90, 200, 130, 0.88);
    font-size: 12px;
    line-height: 1.2;
}

.bubble .attachment a:hover {
    color: #5ac87a;
}

.bubble .attachment a .material-icons,
.bubble .attachment .light-gray .material-icons {
    font-size: 15px;
}

/* Remove the legacy negative margin which could visually pull attachments down. */
.attachment:last-of-type {
    margin-bottom: 0;
}

/* ─── REPLY QUOTE inside bubble — единственный чистый блок ──────── */

.chat-box li:not(.meta) .bubble:has(.reply-quote) {
    min-width: 10rem;
}

.chat-box .bubble .reply-quote {
    display: block;
    position: relative;
    margin: 0 0 4px 0;
    padding: 2px 6px;
    border-left: 3px solid rgba(45, 158, 79, 0.85);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.18);
    overflow: hidden;
    min-width: 0;
    cursor: pointer;
}

/* BR between author and content creates a blank line — remove it */
.chat-box .bubble .reply-quote br {
    display: none;
}

/* author name */
.chat-box .bubble .reply-quote b,
.chat-box .bubble .reply-quote strong {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #3ab85a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
    margin: 0;
    padding: 0;
}

/* quoted content text */
.chat-box .bubble .reply-quote > span,
.chat-box .bubble .reply-quote > div,
.chat-box .bubble .reply-quote p {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
    margin: 0;
    padding: 0;
}

/* thumbnail (image / video preview) */
.chat-box .bubble .reply-quote .inline-image,
.chat-box .bubble .reply-quote .image-preview,
.chat-box .bubble .reply-quote img.inline-image,
.chat-box .bubble .reply-quote img.image-preview {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    min-width: 36px;
    max-width: 36px;
    max-height: 36px;
    object-fit: cover;
    border-radius: 6px;
    margin: 0;
}

.chat-box .bubble .reply-quote:has(.inline-image),
.chat-box .bubble .reply-quote:has(.image-preview),
.chat-box .bubble .reply-quote:has(img.inline-image),
.chat-box .bubble .reply-quote:has(img.image-preview) {
    padding-right: 50px;
}

.chat-box .bubble .reply-quote .inline-image > .rounded-container {
    position: static;
    width: 36px;
    height: 36px;
    margin: 0;
}

/* Video attachments should be a wide media card again. */
.bubble .inline-video {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: min(320px, 100%);
    min-width: min(260px, 100%);
    max-width: min(34rem, 100%);
    min-height: 180px;
    max-height: 360px;
    border-radius: 13px;
    overflow: hidden;
    background: #0a0c10;
}

.bubble .inline-video > img,
.bubble .inline-video img.inline-image,
.bubble .inline-video video {
    width: 100%;
    height: 100%;
    min-height: 180px;
    max-height: 360px;
    object-fit: cover;
    display: block;
}

.bubble .inline-video .play-control {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.56);
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.42);
}

.bubble .inline-video .play-control .material-icons {
    font-size: 36px;
    color: #fff;
}

.bubble .inline-video .duration {
    left: 8px;
    bottom: 8px;
    padding: 4px 7px;
    border-radius: 6px;
    background: rgba(10,12,16,0.72);
    color: rgba(255,255,255,0.84);
    font-family: var(--font-mono);
    font-size: 11px;
}

/* ─── HOTFIX: adaptive video message bounds ─────────────────────── */
.bubble .inline-video {
    width: min(40vw, 360px, 100%);
    min-width: min(220px, 100%);
    max-width: min(40vw, 360px, 100%);
    min-height: 0;
    max-height: min(40vh, 320px);
    aspect-ratio: auto;
}

.bubble .inline-video > img,
.bubble .inline-video img.inline-image,
.bubble .inline-video video {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: min(40vh, 320px);
    object-fit: contain;
    background: #0a0c10;
}

/* For very narrow portrait videos, keep a pleasant minimum width but cap height. */
.bubble .inline-video img[height],
.bubble .inline-video video[height] {
    max-height: min(40vh, 320px);
}

/* ─── NEXUS: adaptive voice message player ──────────────────────── */

/* Voice bubble should be compact but never overflow. */
.bubble .audio {
    width: min(280px, 100%);
    max-width: 100%;
    min-width: min(220px, 100%);
    height: auto;
    min-height: 48px;
    margin: 0;
    padding: 7px 10px;
    border-radius: 18px;
    background: rgba(10, 12, 16, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
    overflow: hidden;
}

.right .bubble .audio {
    background: rgba(10, 12, 16, 0.26);
    border-color: rgba(255, 255, 255, 0.10);
}

.bubble .audio-player {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Play button */
.bubble .audio-player > a:first-child {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 50%;
    background: rgba(45, 158, 79, 0.92);
    color: #11151c;
    transition: transform 0.15s ease, background 0.15s ease;
}

.bubble .audio-player > a:first-child:hover {
    transform: scale(1.06);
    background: #3ab85a;
}

.bubble .audio-player .material-icons.large {
    min-width: 0;
    width: auto;
    height: auto;
    font-size: 24px;
    color: #11151c;
    background: transparent;
}

/* Waveform + timer column */
.bubble .audio-player > div {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bubble .audio-player .playback,
.bubble .audio-player canvas.playback,
.bubble .audio canvas.playback,
.bubble .audio canvas {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 28px;
    margin: 0;
    display: block;
}

.bubble .audio-player .timer {
    font-family: var(--font-mono);
    font-size: 10.5px;
    line-height: 1;
    color: rgba(255,255,255,0.54);
    padding-left: 1px;
}

/* Short recorder preview uses only canvas + play button: keep it contained too. */
.bubble .audio-player > canvas.playback:first-child {
    flex: 1 1 auto;
    width: auto;
}

/* On very narrow bubbles, allow the voice message to claim enough width. */
.chat-box li:not(.meta) .bubble:has(.audio) {
    min-width: min(285px, 72vw);
}

/* ─── HOTFIX: restore stable voice message layout ───────────────── */

/* AudioPlayer is rendered directly in bubble (no .audio wrapper). Keep it horizontal. */
.chat-box li:not(.meta) .bubble:has(.audio-player) {
    min-width: 220px;
    max-width: 260px;
}

.bubble .audio-player {
    width: 210px;
    max-width: 210px;
    min-width: 210px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

/* Play button */
.bubble .audio-player > a:first-child {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin: 0;
}

/* Speed button */
.bubble .audio-player .audio-speed-btn {
    flex: 0 0 28px;
    min-width: 28px;
    width: 28px;
    height: 20px;
    padding: 0;
    font-size: 10px;
}

/* Waveform/timer column: fixed UI width, clipped. */
.bubble .audio-player > div {
    flex: 0 0 122px;
    width: 122px;
    max-width: 122px;
    min-width: 0;
    overflow: hidden;
    display: block;
}

.bubble .audio-player canvas.playback,
.bubble .audio-player .playback {
    width: 122px;
    max-width: 122px;
    min-width: 122px;
    height: 26px;
    margin: 0;
    overflow: hidden;
    display: block;
}

.bubble .audio-player .timer {
    display: block;
    width: 122px;
    max-width: 122px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.1;
    color: rgba(255,255,255,0.55);
}

/* ─── NEXUS: new group search results polish ────────────────────── */

/* In "create group" mode, search results must not consume the whole panel. */
.new-topic-group-view > div:has(> .contact-box) {
    flex: 0 0 auto;
    max-height: 304px; /* 4 users x ~72px + padding */
    overflow-y: auto;
    margin: 4px 10px 12px;
    border-radius: 14px;
}

.new-topic-group-view > div:has(> .contact-box)::-webkit-scrollbar {
    width: 4px;
}

.new-topic-group-view > div:has(> .contact-box)::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
}

/* Selected participant in group creation: highlight the whole row, not a tiny invisible mark. */
.contact-box > li.checkmark-selected {
    background: rgba(45, 158, 79, 0.13);
    border: 1px solid rgba(45, 158, 79, 0.34);
    box-shadow: 0 0 0 1px rgba(45, 158, 79, 0.08), 0 6px 18px rgba(0,0,0,0.18);
}

.contact-box > li.checkmark-selected::after {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--green);
    border-radius: 0 3px 3px 0;
}

.contact-box > li.checkmark-selected .avatar-box {
    box-shadow: 0 0 0 2px rgba(45, 158, 79, 0.5);
}

.contact-box > li.checkmark-selected .checkmark {
    right: -4px;
    bottom: -4px;
    color: #11151c;
    background: var(--green);
    border-radius: 50%;
    font-size: 17px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

/* The selected participants count block belongs to the form content, not to the panel edge. */
.panel-form > .group {
    margin: 0 16px 12px;
}

.panel-form > .group .small {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
}

/* ─── NEXUS: selected participant row only, no avatar ring/check ─── */
.contact-box > li.checkmark-selected .avatar-box {
    box-shadow: none;
}

.contact-box > li.checkmark-selected .checkmark {
    display: none;
}

/* ─── SEND/VOICE ICON — white icon with pop-in animation ────────── */
#send-message-panel > a:last-of-type .material-icons {
    font-family: "Material Icons" !important;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    color: #ffffff;
    opacity: 1;
    background: transparent;
    min-width: 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: icon-pop-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes icon-pop-in {
    from { opacity: 0; transform: scale(0.35) rotate(-30deg); }
    to   { opacity: 1; transform: scale(1)    rotate(0deg); }
}

#send-message-panel > a:last-of-type:hover .material-icons {
    color: #ffffff;
    background: transparent;
}

/* ── 66. COLLAPSED SIDEPANEL FOR NARROW SCREENS ───────────────────── */

.contact-box .avatar-box .unread {
    display: none;
}

@media (min-width: 641px) and (max-width: 960px) {
    /* Collapse the sidepanel width */
    #sidepanel.view-contacts,
    #sidepanel.view-archive,
    #sidepanel.view-blocked {
        min-width: 128px !important;
        max-width: 128px !important;
        width: 128px !important;
    }

    /* Hide sidepanel header when collapsed */
    #sidepanel.view-contacts #side-caption-panel,
    #sidepanel.view-archive #side-caption-panel,
    #sidepanel.view-blocked #side-caption-panel {
        display: none !important;
    }

    /* Hide contact search bar when collapsed */
    #sidepanel.view-contacts .contacts-with-search > .panel-form,
    #sidepanel.view-archive .contacts-with-search > .panel-form,
    #sidepanel.view-blocked .contacts-with-search > .panel-form {
        display: none !important;
    }

    /* Center and adjust padding for avatar containers */
    #sidepanel.view-contacts .contact-box > li,
    #sidepanel.view-archive .contact-box > li,
    #sidepanel.view-blocked .contact-box > li {
        display: flex !important;
        justify-content: center !important;
        padding: 10px 0 !important;
        margin: 2px 0 !important;
    }

    /* Hide text details inside each chat list row */
    #sidepanel.view-contacts .contact-box > li .text-box,
    #sidepanel.view-archive .contact-box > li .text-box,
    #sidepanel.view-blocked .contact-box > li .text-box {
        display: none !important;
    }

    /* Hide row context menu trigger */
    #sidepanel.view-contacts .contact-box > li .menuTrigger,
    #sidepanel.view-archive .contact-box > li .menuTrigger,
    #sidepanel.view-blocked .contact-box > li .menuTrigger {
        display: none !important;
    }

    /* Display the unread badge on top-right of the avatar box in collapsed view */
    #sidepanel.view-contacts .contact-box .avatar-box .unread,
    #sidepanel.view-archive .contact-box .avatar-box .unread,
    #sidepanel.view-blocked .contact-box .avatar-box .unread {
        display: flex !important;
        position: absolute;
        right: -4px !important;
        top: -4px !important;
        bottom: auto !important;
        z-index: 2;
        box-shadow: 0 2px 6px rgba(76, 175, 80, 0.5);
        margin-left: 0 !important;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 10px;
        border: 2px solid var(--bg-sidebar, #111d27);
        box-sizing: content-box;
    }
    
    /* Adjust selected item indicator bar size */
    #sidepanel.view-contacts .contact-box > li.selected::after,
    #sidepanel.view-archive .contact-box > li.selected::after,
    #sidepanel.view-blocked .contact-box > li.selected::after {
        height: 36px !important;
    }
}

/* Teams Chat Styles */
.tv-chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    /* Dark background for Teams */
    background: #0f1721;
}

.tv-chat-messages {
    flex: 1;
    overflow-y: scroll;
    /* Match regular chat (#messages-panel padding 0.75rem) 1:1 */
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    background: transparent;
}

/* Match regular chat #messages-panel scrollbar (10px) 1:1 */
.tv-chat-messages::-webkit-scrollbar {
    width: 10px;
}

.tv-chat-messages::-webkit-scrollbar-track {
    background: var(--clr-scrollbar-track);
}

.tv-chat-messages::-webkit-scrollbar-thumb {
    background: var(--clr-scrollbar-thumb);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}

/* Ensure empty state text is readable on dark background */
.tv-chat-messages .tv-state-text {
    color: rgba(255, 255, 255, 0.7);
}

.tv-chat-messages .tv-state-hint {
    color: rgba(255, 255, 255, 0.5);
}

.tv-chat-messages .tv-state-icon {
    color: rgba(255, 255, 255, 0.15);
}

.tv-messages-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Match regular chat .chat-box horizontal margin (0 0.5rem) 1:1 */
    margin: 0 0.5rem;
}

.tv-message {
    display: flex;
    /* Gap avatar→bubble to match regular chat incoming spacing (~16px) */
    gap: 16px;
    /* Match regular chat .bubble max-width (72%) 1:1 */
    max-width: 72%;
    align-self: flex-start;
}

.tv-message-own {
    align-self: flex-end;
    flex-direction: row-reverse;
}

/* Own messages never render an avatar — collapse the empty 32px slot so the
   bubble isn't pushed away from the right edge. */
.tv-message-own .tv-message-avatar {
    display: none;
}

.tv-message-avatar {
    /* Match regular chat incoming avatar size (34px) 1:1 */
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.tv-avatar-sm {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.tv-avatar-sm .material-icons {
    font-size: 20px;
}

.tv-message-body {
    background: var(--bubble-in);
    padding: 8px 12px;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    position: relative;
    box-shadow: var(--shadow-bubble);
}

.tv-message-own .tv-message-body {
    background: var(--bubble-out);
    color: #ffffff;
}

.tv-message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
}

.tv-message-sender {
    font-weight: 600;
    color: var(--green);
}

.tv-message-own .tv-message-sender {
    color: #a3ffd6;
}

.tv-message-time {
    color: var(--text-muted);
    font-size: 11px;
}

.tv-message-content {
    font-size: 14px;
    line-height: 1.45;
    word-break: break-word;
}

.tv-message-time-inline {
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
    margin-top: 4px;
}

.tv-message-image-container {
    margin-top: 6px;
    max-width: 100%;
}

.tv-message-image {
    max-width: 480px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.tv-message-own .tv-message-image {
    border-color: rgba(0, 0, 0, 0.15);
}

.tv-message-image:hover {
    opacity: 0.9;
}

.tv-message-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: contain;
}

.tv-message-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    margin-top: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
    max-width: 100%;
    width: 280px;
    box-sizing: border-box;
}

.tv-message-own .tv-message-file {
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.1);
}

.tv-message-file:hover {
    background: rgba(255, 255, 255, 0.1);
}

.tv-message-own .tv-message-file:hover {
    background: rgba(0, 0, 0, 0.25);
}

.tv-message-file .tv-file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(38, 166, 154, 0.15);
    color: var(--clr-teal);
    flex-shrink: 0;
}

.tv-message-own .tv-message-file .tv-file-icon {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.tv-message-file .tv-file-info {
    flex: 1;
    min-width: 0;
}

.tv-message-file .tv-file-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tv-message-own .tv-message-file .tv-file-name {
    color: #ffffff;
}

.tv-message-file .tv-file-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.tv-message-own .tv-message-file .tv-file-meta {
    color: rgba(255, 255, 255, 0.7);
}

.tv-message-file .tv-file-action {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.tv-message-own .tv-message-file .tv-file-action {
    color: rgba(255, 255, 255, 0.85);
}

.tv-chat-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-footer);
    border-top: 1px solid var(--border);
}

.tv-attach-btn, .tv-send-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    padding: 0;
}

.tv-attach-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
}

.tv-send-btn {
    color: var(--green);
}

.tv-send-btn:hover:not(:disabled) {
    color: var(--green-hover);
    background: rgba(76, 175, 80, 0.12);
}

.tv-send-btn:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    background: transparent;
}

.tv-send-btn .material-icons {
    font-size: 24px;
}

.tv-message-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 10px 16px;
    min-height: 40px;
    color: var(--text-primary);
    outline: none;
    font-size: 14px;
    line-height: 1.45;
    transition: border-color 0.15s ease;
}

.tv-message-input:focus {
    border-color: rgba(76, 175, 80, 0.4);
}

.tv-chat-read-only {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}

.tv-chat-read-only .material-icons {
    font-size: 18px;
    color: var(--green);
    opacity: 0.85;
}

/* Message actions (menu trigger) */
.tv-msg-actions {
    position: absolute;
    right: 4px;
    top: 4px;
    z-index: 10;
}

.tv-message:hover .menuTrigger {
    opacity: 0.9;
}

.tv-message-own .menuTrigger {
    color: rgba(255, 255, 255, 0.7);
}

.tv-message-own .menuTrigger:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.tv-msg-delete-option:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

/* Redesign Overrides for Sidebar & Shared Components */
.tv-split-layout {
    display: flex !important;
    height: 100% !important;
    width: 100%;
    overflow: hidden !important;
}

.tv-sidebar {
    width: 320px;
    min-width: 320px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    height: 100% !important;
    background: var(--bg-sidebar);
    transition: width 0.2s ease, min-width 0.2s ease, max-width 0.2s ease;
    overflow-y: auto !important;
}

/* Narrow sidebar for tablet view */
.tv-split-layout.tv-narrow-sidebar .tv-sidebar {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
}

.tv-split-layout.tv-narrow-sidebar .tv-sidebar .tv-header,
.tv-split-layout.tv-narrow-sidebar .tv-sidebar .tv-search-bar {
    display: none !important;
}

.tv-split-layout.tv-narrow-sidebar .tv-sidebar .tv-card-body {
    display: none !important;
}

.tv-split-layout.tv-narrow-sidebar .tv-sidebar .tv-card-team {
    justify-content: center !important;
    padding: 12px 0 !important;
}

/* Mobile back button */
.tv-back-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 8px;
    margin-right: 8px;
    border-radius: 50%;
    transition: var(--transition-fast);
    line-height: 1;
}

.tv-back-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.tv-back-btn .material-icons {
    font-size: 24px;
}

@media (max-width: 640px) {
    .tv-back-btn {
        display: block;
    }

    /* Teams: show one pane at a time (list OR chat), each full-width.
       Driven by .tv-team-open (derived from selectedTeam) which — unlike
       #sidepanel.team-open — is reliably toggled when a team is opened from
       the list, so there is no stale half-slid "black screen" state. */
    .tv-split-layout {
        width: 100%;
        display: flex;
        flex-direction: row;
    }

    /* Default (no team selected): team list fills the screen, chat hidden. */
    .tv-sidebar {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        border-right: none;
    }

    .tv-main-panel {
        display: none !important;
    }

    /* A team is open: chat fills the screen, list hidden. */
    .tv-split-layout.tv-team-open .tv-sidebar {
        display: none !important;
    }

    .tv-split-layout.tv-team-open .tv-main-panel {
        display: flex !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    /* Hide the nav rail while a team chat is open so the chat is truly
       full-screen; it (and the team list) returns when the user taps Back. */
    #sidepanel.view-teams:has(.tv-split-layout.tv-team-open) #icon-rail {
        display: none !important;
    }

    /* Main Chats logic - simpler show/hide to avoid black screen */
    #app-container {
        display: block !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        left: 0 !important;
        transform: none !important;
        overflow: hidden !important;
    }

    /* When chat is open, hide sidepanel (rail + list) */
    #app-container.chat-open #sidepanel {
        display: none !important;
    }

    /* When chat is NOT open, hide topic view */
    #app-container:not(.chat-open) #topic-view {
        display: none !important;
    }

    #sidepanel,
    #topic-view {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        flex: none !important;
        display: flex !important;
        height: 100% !important;
    }

    #sidepanel-content {
        flex: 1 !important;
    }

    #sidepanel.login-panel {
        width: 100vw !important;
    }
}

.tv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 16px;
    height: 56px;
    min-height: 56px;
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
}

.tv-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.tv-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm) !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--text-secondary) !important;
    cursor: pointer;
    transition: var(--transition-fast) !important;
    padding: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    box-shadow: none !important;
}

.tv-add-btn:hover {
    background: rgba(76, 175, 80, 0.18) !important;
    color: var(--green) !important;
    box-shadow: none !important;
}

.tv-add-btn .material-icons {
    font-size: 20px !important;
    color: inherit !important;
}

.tv-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 12px 10px !important;
    padding: 0 12px !important;
    height: 38px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--radius-pill) !important;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    box-sizing: border-box;
}

.tv-search-bar:focus-within {
    border-color: rgba(76, 175, 80, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.12) !important;
}

.tv-search-icon {
    color: var(--text-muted) !important;
    font-size: 20px !important;
}

.tv-search-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    font-size: 14px !important;
    outline: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    height: auto !important;
    font-family: var(--font) !important;
}

.tv-search-input::placeholder {
    color: var(--text-placeholder) !important;
}

.tv-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    height: 24px !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    cursor: pointer;
    border-radius: 50% !important;
    padding: 0 !important;
    transition: var(--transition-fast) !important;
    min-width: auto !important;
    min-height: auto !important;
    box-shadow: none !important;
}

.tv-search-clear:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-primary) !important;
}

.tv-search-clear .material-icons {
    font-size: 16px !important;
}

.tv-list {
    padding: 4px 0 !important;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tv-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 10px !important;
    min-height: 68px !important;
    border-radius: var(--radius-sm) !important;
    margin: 1px 4px !important;
    background: transparent !important;
    transition: background-color 0.12s ease;
    box-sizing: border-box;
    cursor: pointer;
}

.tv-card:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.tv-card-active {
    background: rgba(76, 175, 80, 0.18) !important;
}

.tv-card-active::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 36px;
    background: var(--green);
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
    animation: slideUpFade 0.2s ease both;
}

.tv-card-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #2d9e4f, #3ecf8e) !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: box-shadow 0.2s ease;
}

.tv-card:hover .tv-card-icon {
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.35);
}

.tv-card-icon .material-icons {
    font-size: 22px !important;
}

.tv-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tv-card-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tv-card-name {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.tv-card-row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}

.tv-members-container, .tv-files-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tv-files-filter-bar {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.tv-filter-btn {
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-fast);
}

.tv-filter-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.tv-filter-btn-active {
    background: var(--green) !important;
    border-color: var(--green) !important;
    color: #fff !important;
}

.tv-files-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

/* Right Panel & Empty States */
.tv-main-panel {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    height: 100% !important;
    min-width: 0;
    background-color: var(--bg-chat);
    background-image: linear-gradient(rgba(15, 23, 33, 0.92), rgba(15, 23, 33, 0.92)), url('../img/bkg/a00.png');
    background-repeat: repeat;
    background-size: 400px;
    background-attachment: fixed;
}

.tv-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background: transparent;
    color: var(--text-muted);
    text-align: center;
    padding: 40px 20px;
    box-sizing: border-box;
}

.tv-empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 320px;
}

.tv-empty-icon {
    font-size: 64px !important;
    color: var(--text-muted) !important;
    opacity: 0.35 !important;
    margin-bottom: 4px !important;
}

.tv-empty-content h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
}

.tv-empty-content p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

.tv-detail-info {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px !important;
    margin: 12px 16px 8px !important;
    background: var(--surface-2) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border) !important;
    box-sizing: border-box;
}

.tv-detail-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #2d9e4f, #3ecf8e) !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm) !important;
}

.tv-detail-icon .material-icons {
    font-size: 28px !important;
}

.tv-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.tv-detail-name {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    line-height: 1.25;
}

.tv-detail-role {
    font-size: 13px !important;
    color: var(--green) !important;
    font-weight: 500 !important;
}

.tv-detail-role-badge {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: var(--radius-sm) !important;
    background: rgba(76, 175, 80, 0.12) !important;
    color: var(--green) !important;
    border: 1px solid rgba(76, 175, 80, 0.2) !important;
}

/* Tab Navigation */
.tv-tabs {
    display: flex;
    gap: 4px;
    padding: 0 16px !important;
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
    /* Если ярлыки не помещаются — горизонтальный скролл вместо переноса */
    overflow-x: auto;
    scrollbar-width: none;
}

.tv-tabs::-webkit-scrollbar {
    display: none;
}

.tv-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Ширина подстраивается под длину текста: не растягивать и не сжимать */
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    background: none !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    cursor: pointer;
    transition: var(--transition-fast) !important;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
}

.tv-tab > span {
    white-space: nowrap;
}

.tv-tab:hover {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

.tv-tab-active {
    color: var(--green) !important;
    border-bottom-color: var(--green) !important;
    background: rgba(76, 175, 80, 0.08) !important;
}

.tv-tab .material-icons {
    font-size: 18px;
}

/* Modals & Overlays */
.tv-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px) !important;
    animation: tv-fade-in 0.2s ease;
}

.tv-modal {
    width: 90%;
    max-width: 440px !important;
    background: var(--surface-2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
    animation: tv-modal-in 0.25s ease;
    overflow: hidden;
}

.tv-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px !important;
    border-bottom: 1px solid var(--border);
}

.tv-modal-header h3 {
    margin: 0;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

.tv-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    cursor: pointer;
    padding: 0;
    transition: var(--transition-fast);
}

.tv-modal-close:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-primary) !important;
}

.tv-modal-close .material-icons {
    font-size: 18px !important;
}

.tv-modal-body {
    padding: 20px !important;
}

.tv-label {
    display: block;
    font-size: 13px !important;
    font-weight: 500;
    color: var(--text-secondary) !important;
    margin-bottom: 6px !important;
}

.tv-field {
    width: 100%;
    height: 38px !important;
    padding: 0 12px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-primary) !important;
    font-size: 14px !important;
    outline: none !important;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tv-field:focus {
    border-color: rgba(76, 175, 80, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.12) !important;
}

.tv-field::placeholder {
    color: var(--text-placeholder) !important;
}

.tv-field-err {
    border-color: var(--danger) !important;
    background: rgba(240, 110, 110, 0.06) !important;
}

.tv-field-error {
    color: var(--danger) !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

.tv-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 20px !important;
    border-top: 1px solid var(--border);
}

.tv-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px !important;
    border-radius: var(--radius-sm) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer;
    border: none !important;
    transition: var(--transition-fast) !important;
}

.tv-btn:disabled {
    opacity: 0.5 !important;
}

.tv-btn-cancel {
    background: rgba(255, 255, 255, 0.07) !important;
    border: none !important;
    color: var(--text-secondary) !important;
}

.tv-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--text-primary) !important;
}

.tv-btn-primary {
    background: var(--green) !important;
    color: #fff !important;
}

.tv-btn-primary:hover {
    background: var(--green-hover) !important;
}

/* Member Chips & Search In Modals */
.tv-selected-members {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tv-member-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--radius-pill) !important;
    font-size: 13px !important;
    color: var(--text-primary) !important;
}

.tv-member-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-member-remove {
    background: transparent !important;
    border: none !important;
    color: var(--text-muted) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: 50% !important;
    width: 16px !important;
    height: 16px !important;
    transition: var(--transition-fast) !important;
    min-width: auto !important;
    min-height: auto !important;
    box-shadow: none !important;
}

.tv-member-remove:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: var(--text-primary) !important;
}

.tv-member-remove .material-icons {
    font-size: 12px !important;
}

.tv-member-search {
    margin-top: 16px;
}

.tv-search-results {
    margin-top: 8px;
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    background: rgba(0, 0, 0, 0.15) !important;
}

.tv-search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px !important;
    cursor: pointer;
    transition: var(--transition-fast);
    border-bottom: 1px solid var(--border) !important;
}

.tv-search-result:last-child {
    border-bottom: none !important;
}

.tv-search-result:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

.tv-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.tv-user-name {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-user-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    overflow: hidden;
    flex-shrink: 0;
}

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

.tv-add-btn-small {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(76, 175, 80, 0.12) !important;
    color: var(--green) !important;
    cursor: pointer;
    padding: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    box-shadow: none !important;
}

.tv-add-btn-small:hover {
    background: var(--green) !important;
    color: #fff !important;
}

.tv-add-btn-small .material-icons {
    font-size: 16px !important;
}

/* Members Tab */
.tv-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 16px 8px !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tv-section-header .material-icons {
    font-size: 18px !important;
}

.tv-section-count {
    margin-left: auto;
    font-size: 12px !important;
    color: var(--text-muted) !important;
}

.tv-card-member {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
    transition: background-color 0.12s ease;
}

.tv-card-member:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}

.tv-card-icon-sm {
    width: 36px !important;
    height: 36px !important;
    border-radius: var(--radius-sm) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-secondary) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tv-card-icon-sm .material-icons {
    font-size: 18px !important;
}

.tv-role-badge {
    display: inline-block;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 2px 8px !important;
    border-radius: var(--radius-sm) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-secondary) !important;
}

.tv-role-0 {
    background: rgba(76, 175, 80, 0.12) !important;
    color: var(--green) !important;
    border: 1px solid rgba(76, 175, 80, 0.2) !important;
}

.tv-role-1 {
    background: rgba(113, 186, 250, 0.12) !important;
    color: var(--blue) !important;
    border: 1px solid rgba(113, 186, 250, 0.2) !important;
}

.tv-role-2 {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-secondary) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Actions Panel */
.tv-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px !important;
    margin-top: auto !important;
}

.tv-btn-danger {
    background: rgba(240, 110, 110, 0.1) !important;
    color: var(--danger) !important;
    border: 1px solid rgba(240, 110, 110, 0.2) !important;
    justify-content: center;
}

.tv-btn-danger:hover {
    background: rgba(240, 110, 110, 0.18) !important;
}

.tv-btn-danger .material-icons {
    font-size: 18px !important;
}

.tv-btn-delete {
    background: rgba(240, 110, 110, 0.05) !important;
    border-color: rgba(240, 110, 110, 0.1) !important;
    color: var(--danger-hover) !important;
}

.tv-btn-delete:hover {
    background: rgba(240, 110, 110, 0.12) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   TEAMS MODULE — PATCH v2 (fixes for dropdown, header btns, logo, etc.)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Логотип: сделать видимым на тёмном фоне ─────────────────── */
.icon-rail-logo img {
    filter: brightness(0) invert(1) !important;
    width: 2rem !important;
    height: 2rem !important;
    object-fit: contain;
}

/* ── Боковая разделительная линия: от верха до низа ─────────── */

/* ── Dropdown-меню: overlay поверх контента ──────────────────── */
.tv-menu-container {
    position: relative !important;
}

.tv-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    right: 0 !important;
    z-index: 9999 !important;
    min-width: 180px !important;
    background: #1a2230 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important;
    animation: tv-dropdown-in 0.15s ease both !important;
}

@keyframes tv-dropdown-in {
    from { opacity: 0; transform: scale(0.95) translateY(-6px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}

.tv-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px 14px !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-primary, #e8eaed) !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: background 0.1s ease !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-height: auto !important;
    min-width: auto !important;
}

.tv-menu-item .material-icons {
    font-size: 18px !important;
    color: var(--text-secondary, #9ca8ba) !important;
    flex-shrink: 0;
}

.tv-menu-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

.tv-menu-danger {
    color: var(--danger, #e74c3c) !important;
}

.tv-menu-danger .material-icons {
    color: var(--danger, #e74c3c) !important;
}

.tv-menu-danger:hover {
    background: rgba(231, 76, 60, 0.1) !important;
}

/* ── Кнопки в шапке команды: строгий квадрат/круг ─────────── */
.tv-header-actions .tv-header-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    color: var(--text-secondary, #9ca8ba) !important;
}

.tv-header-actions .tv-header-btn:hover {
    background: rgba(76, 175, 80, 0.16) !important;
    color: var(--green, #4caf50) !important;
}

.tv-header-actions .tv-header-btn .material-icons {
    font-size: 18px !important;
}

/* ── Карточки участников команды ─────────────────────────────── */
.tv-card-member {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 14px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    cursor: default !important;
    transition: background 0.12s ease;
}

.tv-card-member:last-child {
    border-bottom: none !important;
}

.tv-card-member:hover {
    background: rgba(255, 255, 255, 0.035) !important;
}

/* Аватарка участника — круглая с градиентом */
.tv-card-member .tv-card-icon-sm {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #1a4a2e, #2d9e4f) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.tv-card-member .tv-card-icon-sm .material-icons {
    font-size: 20px !important;
    color: #fff !important;
}

/* Body карточки — имя над бейджем роли, выровнены по левому краю.
   flex-direction задаём явно: иначе сюда «протекает» column из общего
   правила .tv-card-body, а align-items:center центрировал текст по середине
   строки (баг со «съезжающим» ФИО). */
.tv-card-member .tv-card-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    flex: 1 !important;
    min-width: 0;
    gap: 3px !important;
}

.tv-card-member .tv-card-name {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-primary, #e8eaed) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 0 0 auto;
    max-width: 100%;
    min-width: 0;
}

/* Кнопки действий с участником */
.tv-member-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
}

.tv-member-action-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary, #9ca8ba) !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: background 0.12s ease, color 0.12s ease !important;
    box-shadow: none !important;
    min-width: auto !important;
    min-height: auto !important;
}

.tv-member-action-btn .material-icons {
    font-size: 16px !important;
}

.tv-member-action-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-primary) !important;
}

.tv-member-action-btn.tv-danger:hover {
    background: rgba(231, 76, 60, 0.12) !important;
    color: var(--danger, #e74c3c) !important;
}

/* ── Секция добавления участника ─────────────────────────────── */
.tv-add-member-section {
    padding: 10px 14px 6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.tv-add-member-header h4 {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin: 0 0 8px !important;
}

.tv-add-member-search {
    position: relative;
}

.tv-member-search-results {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: #1a2230 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    max-height: 200px !important;
    overflow-y: auto !important;
}

.tv-search-result {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 9px 12px !important;
    cursor: pointer !important;
    transition: background 0.1s ease !important;
}

.tv-search-result:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.tv-user-name {
    font-size: 13.5px !important;
    color: var(--text-primary) !important;
}

.tv-members-list h4 {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin: 10px 14px 4px !important;
    padding: 0 !important;
}

/* ── Исправление: убрать лишний border-radius у tv-card в членах ─ */
.tv-list .tv-card-member {
    border-radius: 0 !important;
    margin: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   THREADS — комментарии к постам командного чата (widgets/thread-panel.jsx).
   Изолированный блок: на десктопе правая колонка, на мобильном — на весь экран.
   ══════════════════════════════════════════════════════════════════════ */

/* tv-root становится контекстом позиционирования для оверлея треда */
.tv-root {
    position: relative;
}

/* Кнопка "оставить комментарий / N комментариев" под сообщением */
.tv-comment-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 2px 8px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    border-radius: var(--radius-pill);
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.tv-comment-btn:hover {
    background: rgba(76, 175, 80, 0.18);
    color: var(--green);
}

.tv-comment-btn .material-icons {
    font-size: 15px;
}

/* Threads: кнопка комментариев ВНУТРИ пузыря — футер-секция под текстом, во всю
   ширину пузыря с разделителем сверху. Паттерн full-bleed: отрицательные margin
   гасят padding пузыря (8px 12px), а равные им padding кнопки возвращают отступ
   тексту — поэтому пузырь корректно подрастает, чтобы вместить текст кнопки. */
.bubble .msg-comment-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 6px -12px -8px -12px;
    padding: 7px 12px;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 0 0 var(--radius-bubble) var(--radius-bubble);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.bubble .msg-comment-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    /* На hover подсветка с прямыми углами; левый нижний оставляем скруглённым,
       чтобы совпадал со скруглением пузыря в этом углу. */
    border-radius: 0 0 0 var(--radius-bubble);
}

/* На исходящем (зелёном) пузыре разделитель и hover светлее. */
.right .bubble .msg-comment-btn {
    border-top-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
}

.right .bubble .msg-comment-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.msg-comment-btn-main {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    /* Может ужиматься, уступая место стрелке (лейбл уходит в многоточие). */
    min-width: 0;
    overflow: hidden;
}

.msg-comment-btn-main .material-icons {
    font-size: 18px;
    flex-shrink: 0;
}

/* Текст кнопки сжимается с многоточием, если ширины не хватает, — стрелка
   при этом всегда остаётся внутри пузыря. */
.msg-comment-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-comment-chevron {
    font-size: 18px;
    opacity: 0.55;
    flex-shrink: 0;
    /* Небольшой отступ от правого края пузыря. */
    margin-right: 4px;
}

/* Панель треда */
.thread-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    display: flex;
    flex-direction: column;
    background: #0f1721;
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
    z-index: 30;
}

.thread-header {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    min-height: 56px;
    padding: 0 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-sidebar);
}

.thread-back-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    line-height: 1;
}

.thread-back-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.thread-header-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Закреплённый оригинальный пост */
.thread-pinned {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
}

.thread-pinned-bar {
    width: 3px;
    border-radius: 2px;
    background: var(--green);
    flex-shrink: 0;
}

.thread-pinned-author {
    font-size: 12px;
    font-weight: 600;
    color: var(--green);
    margin-bottom: 2px;
}

.thread-pinned-text {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.thread-pinned-text .material-icons {
    font-size: 16px;
}

/* Список комментариев */
.thread-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.thread-state {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: 24px 12px;
}

.thread-state-err {
    color: var(--clr-danger-text, #e57373);
}

.thread-comment {
    display: flex;
    gap: 8px;
    max-width: 100%;
}

.thread-comment-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
}

.thread-comment-avatar .material-icons {
    font-size: 18px;
}

.thread-comment-body {
    background: var(--bubble-in);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    min-width: 0;
    flex: 1;
    position: relative;
}

.thread-comment-own .thread-comment-body {
    background: var(--bubble-out);
}

.thread-comment:hover .menuTrigger {
    display: block;
}

.thread-comment-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.thread-comment-author {
    font-size: 12px;
    font-weight: 600;
    color: var(--green);
}

.thread-comment-time {
    font-size: 11px;
    color: var(--text-muted);
}

.thread-comment-text {
    font-size: 14px;
    color: var(--text-primary);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* Вложения комментариев */
.thread-att {
    display: block;
    margin-top: 6px;
}

.thread-att-img img {
    max-width: 100%;
    max-height: 220px;
    border-radius: 8px;
    display: block;
}

.thread-att-audio {
    width: 100%;
    margin-top: 6px;
}

.thread-att-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
}

.thread-att-file .material-icons {
    color: var(--green);
}

.thread-att-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.thread-att-size {
    font-size: 11px;
    color: var(--text-muted);
}

/* Реакции в комментариях используют общий компонент чата (ReactionBar +
   ReactionCapsules), здесь только привязка позиционирования панели к телу
   комментария. Сам пузырёк реакций см. в секции REACTION BAR / CAPSULES. */
.thread-comment-body {
    position: relative;
}

.thread-comment .reaction-bar-wrap {
    position: absolute;
    top: -30px;
    left: 0;
    right: auto;
    z-index: 8;
    pointer-events: none;
}

.thread-comment-own .reaction-bar-wrap {
    left: auto;
    right: 0;
}

.thread-comment .reaction-capsules {
    margin-top: 6px;
}

/* Заглушка про голосовые без HTTPS */
.thread-voice-note {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid var(--border);
}

.thread-voice-note .material-icons {
    font-size: 16px;
}

/* Поле ввода — переиспользует виджет SendMessage основного чата */
.thread-input {
    border-top: 1px solid var(--border);
    background: var(--bg-sidebar);
}

/* Мобильный: тред на весь экран поверх чата команды */
@media (max-width: 600px) {
    .thread-panel {
        width: 100%;
        left: 0;
        border-left: none;
    }
}