/* Chat screen, search state, pinned sessions, and message actions */

#chat-screen {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    height: 100dvh;
    background: var(--surface);
    border: none;
    border-radius: 0;
    display: none;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    box-shadow: none;
    position: relative;
}

/* Image preview modal */
body.image-modal-open {
    overflow: hidden;
}

#image-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: rgba(0, 0, 0, 0.88);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: zoom-out;
    transition: opacity 0.2s var(--ease), visibility 0.2s var(--ease);
}

#image-modal.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#image-modal-content,
#image-modal .modal-canvas-view {
    display: block;
    width: auto;
    height: auto;
    max-width: min(92vw, 1200px);
    max-height: min(88vh, 900px);
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    cursor: zoom-out;
}

#image-modal .modal-canvas-view {
    background: #050505;
}

#image-modal-close {
    position: fixed;
    top: max(20px, calc(12px + env(safe-area-inset-top, 0px)));
    right: max(20px, calc(12px + env(safe-area-inset-right, 0px)));
    z-index: 1;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-pill);
    background: rgba(17, 20, 24, 0.78);
    color: #fff;
    font-size: 32px;
    line-height: 42px;
    font-family: Arial, sans-serif;
    cursor: pointer;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
    transition: background 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease);
}

#image-modal-close:hover,
#image-modal-close:focus-visible {
    background: rgba(31, 41, 55, 0.94);
    border-color: rgba(255, 255, 255, 0.38);
    outline: none;
    transform: scale(1.04);
}

#image-modal .image-modal-nav {
    position: fixed;
    top: 50%;
    z-index: 2;
    width: 48px;
    height: 64px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    background: rgba(17, 20, 24, 0.72);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    line-height: 1;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

#image-modal .image-modal-nav:hover,
#image-modal .image-modal-nav:focus-visible {
    background: rgba(31, 41, 55, 0.94);
    border-color: rgba(255, 255, 255, 0.34);
    outline: none;
}

#image-modal .image-modal-nav--prev {
    left: max(18px, calc(12px + env(safe-area-inset-left, 0px)));
}

#image-modal .image-modal-nav--next {
    right: max(18px, calc(12px + env(safe-area-inset-right, 0px)));
}

#image-modal .image-modal-nav.is-hidden,
#image-modal .image-modal-counter.is-hidden {
    display: none;
}

#image-modal .image-modal-counter {
    position: fixed;
    left: 50%;
    bottom: max(22px, calc(14px + env(safe-area-inset-bottom, 0px)));
    z-index: 2;
    min-width: 58px;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(17, 20, 24, 0.72);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    transform: translateX(-50%);
}

/* --- 4.4 Pin Proposal Notification --- */
/* NOTE: declared before .message/.message.system in cascade — use !important
   on layout properties so later rules cannot override the grid layout. */
.pin-proposal-msg {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    background: var(--surface-2) !important;
    border: 1px solid var(--border-2) !important;
    border-radius: 16px !important;
    padding: 14px 18px !important;
    margin: 12px auto;
    max-width: 85%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    align-self: center;
    color: var(--text) !important;
    text-align: left !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-size: var(--fs-base) !important;
    font-weight: 400 !important;
    white-space: normal !important;
}

.pin-proposal-msg span[data-field="text"] {
    grid-column: span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    font-size: var(--fs-base);
    color: var(--text);
    margin-bottom: 6px;
    text-align: center;
}

.pin-proposal-msg span[data-field="text"] svg {
    color: var(--accent-color);
}

.pin-action-btn {
    padding: 10px 16px;
    border-radius: 10px;
    font-size: var(--fs-sm);
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform 0.1s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.pin-action-btn:active {
    transform: scale(0.97);
}

.pin-action-btn.accept {
    background: var(--accent-color);
    color: #fff;
    box-shadow: 0 2px 8px rgba(32, 124, 214, 0.2);
}

.pin-action-btn.accept:hover {
    background: var(--accent-gradient-end);
    box-shadow: 0 4px 12px rgba(32, 124, 214, 0.3);
}

.pin-action-btn.decline {
    background: var(--surface-3);
    color: var(--text-2);
    border: 1px solid var(--border-2);
}

.pin-action-btn.decline:hover {
    background: var(--border-2);
    color: var(--text);
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   SIDEBAR “My chats”
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

/* 5.1 Overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay);
    opacity: 0;
    z-index: 1000;
    transition: opacity 0.3s var(--ease);
}

/* 5.1 Panel */
.chats-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate3d(-120%, 0, 0);
    will-change: transform;
    width: 280px;
    height: 100vh;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--border);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s var(--ease);
    font-family: var(--font);
}

.chats-sidebar.open {
    transform: translate3d(0, 0, 0);
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sidebar-title {
    font-size: var(--fs-lg);
    font-weight: 800;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-title-icon {
    font-size: 15px;
    color: var(--accent-color);
}

.sidebar-close-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-3);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration);
    padding: 0;
}

.sidebar-close-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}

.sidebar-limit-bar {
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sidebar-limit-text {
    font-size: var(--fs-xs);
    color: var(--text-3);
    text-align: center;
    line-height: 1.4;
}

/* 5.2 Slots */
.sidebar-slots {
    flex: 1;
    overflow-y: auto;
    will-change: scroll-position;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pinned-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    min-height: 64px;
    position: relative;
    transition: background 0.22s var(--ease), border-color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
    cursor: pointer;
    user-select: none;
}

.pinned-slot:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.pinned-slot.active-slot {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
}

body.light .pinned-slot {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.04);
}

body.light .pinned-slot:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

body.light .pinned-slot.active-slot {
    background: rgba(16, 185, 129, 0.07);
    border-color: rgba(16, 185, 129, 0.2);
}

/* Telegram Avatar and Status indicators */
.tg-avatar-wrap {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 800;
    color: #ffffff;
    font-size: 16px;
    background: var(--surface-3);
    overflow: visible; /* Required to show online indicator overflow */
}

.tg-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.tg-online-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #10b981;
    border: 2px solid var(--surface);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.65);
    z-index: 3;
}

/* Slot Center Content */
.tg-slot-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.tg-slot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.tg-slot-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.tg-slot-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 6px;
    flex-shrink: 0;
    text-transform: lowercase;
    letter-spacing: 0.01em;
}

.tg-slot-badge.roleplay {
    color: #c084fc;
    background: rgba(167, 139, 250, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.25);
}

.tg-slot-badge.basic {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.25);
}

body.light .tg-slot-badge.roleplay {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.2);
}

body.light .tg-slot-badge.basic {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.2);
}

.tg-slot-sub {
    font-size: 12px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tg-slot-presence.online {
    color: #10b981;
    font-weight: 600;
}

/* Right Column Actions & Counters */
.tg-slot-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    position: relative;
    width: 24px;
    height: 100%;
}

.tg-slot-unread {
    background-color: var(--c-basic);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    min-width: 18px;
    height: 16px;
    transition: opacity 0.2s var(--ease);
}

.tg-unpin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-3);
    font-size: 9px;
    font-weight: 900;
    opacity: 0;
    transition: opacity 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease), color 0.2s var(--ease);
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%) scale(0.95);
}

.pinned-slot:hover .tg-unpin-btn {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    z-index: 5;
}

.pinned-slot:hover .tg-slot-unread {
    opacity: 0;
    pointer-events: none;
}

.tg-unpin-btn:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.35);
    color: #ef4444;
    transform: translateY(-50%) scale(1.15);
}

body.light .tg-unpin-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.08);
}

body.light .tg-unpin-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: #dc2626;
}

/* Empty, Locked & Future slots stylings */
.pinned-slot.empty-slot {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}

.pinned-slot.empty-slot .tg-avatar-wrap {
    border: 1.5px dashed rgba(255, 255, 255, 0.25);
    background: transparent;
    color: rgba(255, 255, 255, 0.35);
}

.pinned-slot.locked-slot,
.pinned-slot.future-slot {
    opacity: 0.6;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.pinned-slot.locked-slot .tg-avatar-wrap,
.pinned-slot.future-slot .tg-avatar-wrap {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.25);
}

.pinned-slot.locked-slot:hover,
.pinned-slot.future-slot:hover {
    background: transparent;
    cursor: not-allowed;
}

/* Telegram-specific Locked Slot styling */
.pinned-slot.tg-locked-slot {
    background: linear-gradient(135deg, rgba(36, 161, 222, 0.07) 0%, rgba(36, 161, 222, 0.01) 100%);
    border: 1px solid rgba(36, 161, 222, 0.18);
    opacity: 0.85;
    cursor: pointer !important;
}

.pinned-slot.tg-locked-slot:hover {
    background: linear-gradient(135deg, rgba(36, 161, 222, 0.12) 0%, rgba(36, 161, 222, 0.03) 100%) !important;
    border-color: rgba(36, 161, 222, 0.3) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(36, 161, 222, 0.15);
}

.pinned-slot.tg-locked-slot .tg-avatar-wrap {
    background: rgba(36, 161, 222, 0.12) !important;
    border: 1px solid rgba(36, 161, 222, 0.3);
    color: #24a1de !important;
}

body.light .pinned-slot.tg-locked-slot {
    background: linear-gradient(135deg, rgba(36, 161, 222, 0.05) 0%, rgba(36, 161, 222, 0.01) 100%);
    border-color: rgba(36, 161, 222, 0.15);
}

body.light .pinned-slot.tg-locked-slot:hover {
    background: linear-gradient(135deg, rgba(36, 161, 222, 0.08) 0%, rgba(36, 161, 222, 0.02) 100%) !important;
    border-color: rgba(36, 161, 222, 0.25) !important;
}

body.light .pinned-slot.tg-locked-slot .tg-avatar-wrap {
    background: rgba(36, 161, 222, 0.08) !important;
    border-color: rgba(36, 161, 222, 0.2);
    color: #0088cc !important;
}

.sidebar-empty-hint {
    font-size: var(--fs-sm);
    color: var(--text-3);
    text-align: center;
    margin-top: 24px;
    line-height: 1.5;
}

.sidebar-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.04);
}

body.light .sidebar-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.03);
}

.future-slot-icon {
    font-size: 13px;
    color: var(--text-3);
    flex-shrink: 0;
    animation: futurePulse 3s ease-in-out infinite;
}

@keyframes futurePulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.65; }
}

.future-slot-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-2);
}

.future-slot-sub {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 1px;
    opacity: 0.8;
}

/* Dividers and structural layouts */
.slots-section-divider {
    height: 1px;
    margin: 8px 0;
    background: var(--border);
    opacity: 0.4;
}

/* Light Theme overrides for slots */
body.light .pinned-slot {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

body.light .pinned-slot:hover {
    background: rgba(0, 0, 0, 0.02);
}

body.light .pinned-slot.active-slot {
    background: rgba(16, 185, 129, 0.06);
}

body.light .tg-avatar-wrap {
    background: rgba(0, 0, 0, 0.04);
    color: #475569;
}

body.light .tg-online-dot {
    border-color: var(--surface);
}

body.light .tg-unpin-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

body.light .pinned-slot.locked-slot .tg-avatar-wrap,
body.light .pinned-slot.future-slot .tg-avatar-wrap {
    background: rgba(0, 0, 0, 0.03);
    color: rgba(0, 0, 0, 0.3);
}



/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   Phase 3 — Chat Screen (Telegram-style)
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

/* --- 3.1 Chat Header (sticky, frosted) --- */
.chat-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    /* Fixed height prevents the header from jumping when the sub-row
       appears/disappears (presence line, status badge, guest label). */
    min-height: 52px;
    height: 52px;
    padding: 0 12px;
    padding-left: max(12px, calc(8px + env(safe-area-inset-left, 0px)));
    padding-right: max(12px, calc(8px + env(safe-area-inset-right, 0px)));
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
}

.chat-header-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-color);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--duration);
}

.chat-header-avatar:hover {
    opacity: 0.85;
}

.chat-header-avatar-letter {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    font-family: var(--font);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Center icons perfectly inside circular wraps */
.chat-header-avatar .ui-icon,
.tg-avatar-wrap .ui-icon,
.plot-waiting-logo .ui-icon,
.partner-profile-avatar .ui-icon,
.radar-logo .ui-icon {
    margin: 0 !important;
    display: block !important;
}

.chat-header-center {
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: background var(--duration);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.chat-header-center:active {
    opacity: 0.8;
}

.chat-header-center:hover {
    background: rgba(255, 255, 255, 0.04);
}

body.light .chat-header-center:hover {
    background: rgba(0, 0, 0, 0.03);
}

.chat-header-name {
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-header-friend-badge {
    font-size: 10px;
    font-weight: 600;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 25%, transparent);
    border-radius: 6px;
    padding: 0.5px 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    font-style: normal;
    text-transform: lowercase;
    flex-shrink: 0;
}

/* ── Inline stat badge after partner nickname ──────────────────────────────
   Shows the partner's highest stat (mastery rank OR reputation rank) as a
   compact pill right after the nickname. Hidden on compact keyboard-open view. */
.chat-header-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 6px;
    flex-shrink: 0;
    vertical-align: middle;
    white-space: nowrap;
    transition: opacity var(--duration);
}
.chat-header-stat-badge--rp {
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.25);
}
.chat-header-stat-badge--rep {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.10);
    border: 1px solid rgba(251, 191, 36, 0.22);
}
body.light .chat-header-stat-badge--rp {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.18);
}
body.light .chat-header-stat-badge--rep {
    color: #d97706;
    background: rgba(217, 119, 6, 0.08);
    border-color: rgba(217, 119, 6, 0.18);
}

.chat-header-status-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.2;
}

.chat-header-status-row .chat-header-sub,
.chat-header-status-row .partner-presence-line,
.chat-header-status-row .partner-rank-area {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    gap: 4px;
}

.chat-header-status-row .partner-presence-line {
    color: var(--text-3);
}

.chat-header-status-row .partner-presence-line.online {
    color: var(--c-basic);
    font-weight: 500;
}

.chat-header-status-row > div:not(.is-hidden):not([style*="display: none"]):not(:empty) ~ div:not(.is-hidden):not([style*="display: none"]):not(:empty)::before {
    content: "•";
    margin-right: 2px;
    color: var(--text-3);
    font-weight: bold;
    opacity: 0.5;
}

.chat-header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.chat-sidebar-toggle-inline {
    margin-right: -2px;
    padding: 4px;
}

.chat-menu-icon {
    width: 20px;
    height: 20px;
}

.chat-hdr-icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration);
    color: var(--text-2);
}

.chat-hdr-icon-btn img {
    opacity: 0.7;
    transition: opacity var(--duration);
}

.chat-hdr-icon-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

.chat-hdr-icon-btn:hover img {
    opacity: 1;
}

body.light .chat-hdr-icon-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* Header Go Home button */
#chat-go-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
    padding: 0;
}

#chat-go-home-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-2);
}

body.light #chat-go-home-btn {
    border-color: rgba(0, 0, 0, 0.08);
}

body.light #chat-go-home-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.15);
    color: var(--text);
}

#chat-go-home-btn .ui-icon {
    margin: 0 !important;
    vertical-align: middle !important;
}

.chat-action-icon {
    width: 22px;
    height: 22px;
    vertical-align: middle;
}

/* .chat-hdr-pill is an alias — use .chat-header-pill-btn */
.chat-hdr-pill,
.chat-header-pill-btn {
    background: rgba(58, 174, 122, 0.08);
    border: 1px solid rgba(58, 174, 122, 0.2);
    color: var(--c-basic);
    padding: 4px 10px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: var(--fs-sm);
    transition: background var(--duration);
}

.chat-hdr-pill:hover,
.chat-header-pill-btn:hover {
    background: rgba(58, 174, 122, 0.15);
}

#next-btn.chat-hdr-skip {
    background: rgba(58, 174, 122, 0.08);
    border: 1px solid rgba(58, 174, 122, 0.2);
    color: var(--c-basic);
    padding: 4px 10px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: var(--fs-xs);
    font-weight: 700;
    font-family: var(--font);
    transition: background var(--duration), color var(--duration);
    white-space: nowrap;
}

#next-btn.chat-hdr-skip:hover {
    background: rgba(58, 174, 122, 0.15);
    color: var(--c-basic);
}

.chat-hdr-stop {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
    padding: 4px 10px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: var(--fs-xs);
    font-weight: 700;
    font-family: var(--font);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: background var(--duration);
    white-space: nowrap;
}

.chat-hdr-stop:hover {
    background: rgba(239, 68, 68, 0.08);
}

/* Chat header subtitle: rank В· reputation */
.chat-header-sub {
    display: none;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-xs);
    line-height: 1;
    margin-top: 0;
}

.chat-header-sub[style*="display: flex"],
.chat-header-sub[style*="display:flex"] {
    display: flex;
}

.chat-hsub-rank {
    font-weight: 600;
    color: var(--c-basic);
    letter-spacing: 0.01em;
}

.chat-hsub-sep {
    color: var(--text-3);
    font-size: 9px;
}

.chat-hsub-rep {
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: 1px 4px;
    font-size: var(--fs-xs);
}

.chat-hsub-rep.pos {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.chat-hsub-rep.neg {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.chat-hsub-guest {
    color: var(--text-3);
    font-weight: 500;
    font-style: italic;
    font-size: var(--fs-xs);
}

.partner-rank-area {
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 3px;
    min-width: 0;
}

.partner-rank-area .rank-badge,
.partner-meta-pill {
    min-height: 18px;
    padding: 2px 7px;
    font-size: var(--fs-xs);
    line-height: 1.15;
}

.partner-meta-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    font-weight: 700;
    white-space: nowrap;
}

.partner-meta-mastery {
    color: #a78bfa;
    background: rgba(124, 58, 237, 0.12);
    border-color: rgba(124, 58, 237, 0.28);
}

.partner-meta-guest {
    color: var(--text-3);
    font-style: italic;
    font-weight: 500;
}

#speed-match-wrap {
    text-align: center;
    padding: 0 16px;
    margin-top: 18px;
}

#speed-match-btn {
    position: relative;
    isolation: isolate;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    min-width: 188px;
    max-width: 100%;
    background: var(--accent-color);
    border: 1px solid color-mix(in srgb, var(--accent-color) 72%, #ffffff 28%);
    color: #ffffff;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    line-height: 1.2;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-color) 24%, transparent);
    animation: pulse 2.2s infinite;
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), filter var(--duration) var(--ease);
}

#speed-match-btn::after {
    content: '';
    position: absolute;
    inset: -5px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    animation: speedMatchPulseRing 2.2s infinite;
    z-index: -1;
}

#speed-match-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--accent-color) 30%, transparent);
}

#speed-match-btn:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

#speed-match-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-color) 45%, #ffffff);
    outline-offset: 3px;
}

#speed-match-btn .speed-match-icon,
#speed-match-btn svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

@keyframes pulse {
    0%,
    100% {
        transform: translateZ(0);
    }

    50% {
        transform: translateZ(0) scale(1.02);
    }
}

@keyframes speedMatchPulseRing {
    0% {
        opacity: 0.42;
        transform: scale(0.96);
    }
    100% {
        opacity: 0;
        transform: scale(1.12);
    }
}

/* Active / loading state after clicking the speed-match button */
#speed-match-btn.speed-match-btn--active {
    animation: none;
    background: color-mix(in srgb, var(--accent-color) 55%, #0a0c10);
    border-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-color) 12%, transparent);
    cursor: default;
    opacity: 0.75;
}

#speed-match-btn.speed-match-btn--active::after {
    animation: none;
    opacity: 0;
}

#speed-match-btn.speed-match-btn--active .speed-match-icon,
#speed-match-btn.speed-match-btn--active svg {
    animation: spin-icon 1.2s linear infinite;
}

@keyframes spin-icon {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* --- 3.2 Messages Area --- */
#messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 10px 10px;
    /* Mobile scroll jitter fix: isolate into its own compositor layer so that
       visualViewport scroll/resize events do not trigger a full relayout of
       the chat-screen. */
    touch-action: pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
    transform: translateZ(0);
}

/* Light theme: messages area gets a slight gray tint so white
   incoming bubbles (#ffffff) visually stand out from the background. */
body.light #messages {
    background: var(--surface-2);
    background-image: none;
}

#chat-screen.plot-ad-waiting-mode .input-area,
#chat-screen.plot-ad-waiting-mode .chat-status-row,
#chat-screen.plot-ad-waiting-mode #edit-message-bar,
#chat-screen.plot-ad-waiting-mode #reply-message-bar,
#chat-screen.plot-ad-waiting-mode #pinned-messages-bar {
    display: none !important;
}

#chat-screen.plot-ad-waiting-mode #chat-status-container,
#chat-screen.plot-ad-waiting-mode #chat-back-avatar-btn {
    pointer-events: none;
}

#chat-screen.plot-ad-waiting-mode #messages {
    gap: 10px;
    padding: 18px 14px 24px;
}


.chat-status-row {
    display: flex;
    gap: 8px;
    padding: 2px 16px;
    /* Always reserve the row's height so #messages never expands into
       this slot — prevents the typing indicator from overlapping the
       last message bubble when it appears. */
    min-height: 22px;
    align-items: center;
    flex-shrink: 0;
}

.typing-status,
.afk-status {
    font-size: 12px;
    margin: 0;
    animation: typingFadeIn 0.15s ease;
}

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

.typing-status {
    color: var(--text-3);
}

body.light .typing-status {
    color: var(--text-2);
}

.afk-status {
    color: #ef4444;
}

/* --- 3.2b Date Separators (Telegram-style) --- */
/* A centered row containing a frosted-glass pill label.
   Appears automatically between messages from different days. */
.chat-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 10px 0 6px;
    pointer-events: none;
    user-select: none;
}

.chat-date-separator span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 4px 12px;
    border-radius: 12px;
    white-space: nowrap;
    line-height: 1.4;
    /* Dark theme */
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

body.light .chat-date-separator span {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* --- 3.3 Message Bubbles (TG-style) --- */

.message {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 18px;
    font-size: var(--fs-base);
    line-height: 1.45;
    word-break: break-word;
    white-space: pre-wrap;
    position: relative;
    display: flow-root; /* contains floated .message-meta without overflow:hidden */
}

.message.me {
    align-self: flex-end;
    background: var(--outgoing-bg, var(--c-basic));
    color: var(--outgoing-color, #fff);
    border-bottom-right-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

body.light .message.me {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
    border: none;
}

body.light .message.partner {
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
}

.message.partner {
    align-self: flex-start;
    background: var(--incoming-bg, var(--surface-2));
    color: var(--incoming-color, var(--text));
    border-bottom-left-radius: 4px;
    border: 1px solid var(--incoming-border, rgba(255,255,255,0.06));
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}

.msg-photo-canvas {
    display: block;
    max-width: min(100%, 336px);
    max-height: 420px;
    width: auto;
    height: auto;
    border-radius: 14px;
    background: var(--surface-3);
    cursor: default;
    user-select: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.msg-photo-canvas.thumbnail-preview {
    filter: blur(5px);
    transition: filter 0.3s ease;
}

.message.me .msg-photo-canvas {
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.message.partner .msg-photo-canvas {
    border: 1px solid var(--border-2);
}

.img-expired-notice {
    max-width: 220px;
    min-height: 58px;
    padding: 12px 14px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--surface-3) 82%, transparent);
    border: 1px dashed var(--border-2);
    color: var(--text-3);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.message.me .img-expired-notice {
    color: rgba(255,255,255,0.76);
    border-color: rgba(255,255,255,0.28);
    background: rgba(0,0,0,0.14);
}

body.light .img-expired-notice {
    background: rgba(0,0,0,0.045);
    border-color: rgba(0,0,0,0.16);
    color: rgba(0,0,0,0.56);
    box-shadow: none;
}

/* ── NSFW Blur Overlay ───────────────────────────────────────────────────── */
.nsfw-blur-wrapper {
    position: relative;
    display: inline-block;
    border-radius: 14px;
    overflow: hidden;
}

.nsfw-blurred {
    filter: blur(18px);
    transform: scale(1.05); /* hide blurry edges */
    cursor: default !important;
}

.nsfw-reveal-btn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font);
    border: none;
    cursor: pointer;
    border-radius: 14px;
    letter-spacing: 0.02em;
    transition: background 0.2s;
    padding: 0 12px;
    text-align: center;
}

.nsfw-reveal-btn:hover {
    background: rgba(0, 0, 0, 0.6);
}


/* --- Telegram Grouping overrides --- */
.message.me.grouped-next {
    border-bottom-right-radius: 4px;
}
.message.me.grouped {
    border-top-right-radius: 4px;
}
.message.partner.grouped-next {
    border-bottom-left-radius: 4px;
}
.message.partner.grouped {
    border-top-left-radius: 4px;
}

/* --- 3.4 System Messages --- */
.message.system {
    align-self: center;
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    color: var(--text-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-align: center;
    max-width: 90%;
    border-radius: var(--radius-pill);
    padding: 4px 14px;
    margin: 4px 0;
    border: 1px solid rgba(255,255,255,0.06);
}

body.light .message.system {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0,0,0,0.06);
    color: var(--text-2);
}

/* --- 3.5 Formatting Toolbar (legacy – hidden; replaced by #msg-context-menu) --- */
.format-toolbar {
    display: none !important;
}

/* --- 3.5a Custom context menu for msg-input --- */
.msg-context-menu {
    position: fixed;
    z-index: 9999;
    min-width: 160px;
    background: var(--surface-2, #1e2130);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.38), 0 2px 6px rgba(0,0,0,0.2);
    overflow: hidden;
    padding: 4px 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

body.light .msg-context-menu {
    background: #ffffff;
    border-color: rgba(0,0,0,0.10);
    box-shadow: 0 8px 22px rgba(0,0,0,0.11), 0 2px 6px rgba(0,0,0,0.06);
}

.msg-context-menu.is-hidden {
    display: none;
}

/* Formatting row inside context menu */
.msg-fmt-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 6px 8px;
    gap: 2px;
}

.msg-fmt-btn {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 6px 4px;
    cursor: pointer;
    color: var(--text-2);
    font-size: 13px;
    font-family: inherit;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration), color var(--duration);
    min-width: 32px;
}

.msg-fmt-btn:hover,
.msg-fmt-btn:active {
    background: var(--surface-3);
    color: var(--text);
}

body.light .msg-fmt-btn:hover {
    background: rgba(0,0,0,0.06);
}

/* Separator between formatting row and text actions */
.msg-ctx-sep {
    border: none;
    border-top: 1px solid var(--border, rgba(255,255,255,0.07));
    margin: 3px 0;
}

/* Text action items (Cut / Copy / Paste / Select all) */
.msg-ctx-item {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    padding: 9px 16px;
    text-align: left;
    font-size: var(--fs-sm, 13px);
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
    transition: background var(--duration);
    white-space: nowrap;
}

.msg-ctx-item:hover,
.msg-ctx-item:active {
    background: var(--surface-3);
}

body.light .msg-ctx-item:hover {
    background: rgba(0,0,0,0.05);
}

/* fmt-btn styles (kept for any legacy reference) */
.fmt-btn {
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-family: inherit;
    line-height: 1;
    transition: background var(--duration), color var(--duration);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.fmt-btn:hover {
    background: var(--surface-3);
    color: var(--text);
}


/* --- 3.6 Input Area (TG bottom bar) --- */
.input-area {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.image-upload-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-3);
    transition: background var(--duration), color var(--duration);
    padding: 0;
}

.image-upload-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-2);
}

body.light .image-upload-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

.image-upload-btn .ui-icon {
    width: 20px;
    height: 20px;
    display: block;
}

#msg-input {
    flex: 1;
    padding: 10px 16px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: var(--fs-base);
    font-family: inherit;
    line-height: 1.45;
    transition: border-color var(--duration);
    min-height: 42px;
    max-height: 160px;
    overflow-y: auto;
    box-sizing: border-box;
    outline: none;
    white-space: pre-wrap;
    word-break: break-word;
    cursor: text;
    position: relative;
}

/* Placeholder for contenteditable */
#msg-input:empty::before {
    content: attr(data-placeholder);
    color: var(--text-3, rgba(255,255,255,0.35));
    pointer-events: none;
    position: absolute;
}

#msg-input:focus {
    outline: none;
    border-color: var(--c-basic);
}

/* ── Inline formatting styles (WYSIWYG) ── */
#msg-input b,
#msg-input strong    { font-weight: 700; }
#msg-input em,
#msg-input i         { font-style: italic; }
#msg-input s,
#msg-input del,
#msg-input strike    { text-decoration: line-through; }


/* Error/shake state */
#msg-input.input-error {
    border-color: var(--c-danger, #e05c5c) !important;
}

/* Disabled state (contenteditable="false") */
#msg-input.input-disabled,
#msg-input[contenteditable="false"] {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}



.action-btn {
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    background: var(--surface-3);
    color: var(--text);
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-size: var(--fs-sm);
    transition: background var(--duration);
    white-space: nowrap;
}

/* Send icon button */
#send-btn,
.send-icon-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    padding: 0;
    background: var(--accent-color);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0;
    transition: transform var(--duration) var(--ease), box-shadow var(--duration), background var(--duration);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-color) 45%, transparent);
}

#send-btn:hover,
.send-icon-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-color) 55%, transparent);
}

#send-btn:active,
.send-icon-btn:active {
    transform: scale(0.94);
}

#send-btn:disabled,
.send-icon-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

#next-btn {
    background: var(--surface-2);
    color: var(--text-2);
    border: 1px solid var(--border);
}

#next-btn:hover {
    background: var(--surface-3);
    color: var(--text);
}

/* --- 3.6 Partner Profile Overlay & Modal --- */
.partner-profile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 2000;
    display: flex;
    justify-content: flex-end;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
}

.partner-profile-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: -1;
}

.partner-profile-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.partner-profile-modal {
    position: relative;
    width: min(100%, 420px);
    height: 100%;
    background: var(--surface);
    border-left: 1px solid var(--border);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: -8px 0 22px rgba(0, 0, 0, 0.22);
    overflow-y: auto;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.partner-profile-overlay.is-hidden .partner-profile-modal {
    transform: translate3d(100%, 0, 0);
}

.partner-profile-close-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    background: transparent;
    border: none;
    color: var(--text-2);
    font-size: 20px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
    z-index: 10;
}

.partner-profile-close-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
}

.partner-profile-hero {
    display: flex;
    align-items: center;
    gap: 20px;
}

.partner-profile-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    width: 100%;
}

.partner-profile-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.partner-profile-avatar-wrap {
    --katomu-avatar-size: 100px;
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    user-select: none;
}

.partner-profile-avatar {
    --katomu-avatar-size: 100px;
}

.partner-profile-hero-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.partner-profile-name {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
}

.partner-profile-presence {
    font-size: 13px;
    color: var(--text-3);
}

.partner-profile-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.partner-profile-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration);
    text-align: left;
    font-family: inherit;
}

.partner-profile-action:hover {
    background: rgba(255, 255, 255, 0.04);
}

body.light .partner-profile-action:hover {
    background: rgba(0, 0, 0, 0.03);
}

.partner-profile-action.danger {
    color: #ef4444;
}

.partner-profile-action.danger:hover {
    background: rgba(239, 68, 68, 0.06);
}

.partner-profile-action-icon {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

/* Light theme overrides for partner profile modal */
body.light .partner-profile-modal {
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08);
}

body.light .partner-profile-close-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

body.light .partner-profile-presence {
    color: var(--text-2);
}

/* ═══════════════════════════════════════════════════════
   ── New Compact Profile (pp-*) ──────────────────────
   ═══════════════════════════════════════════════════════ */

/* Drag handle — only shown on mobile bottom-sheet */
.pp-drag-handle {
    display: none;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-2, rgba(255,255,255,0.15));
    align-self: center;
    flex-shrink: 0;
    margin-bottom: -4px;
}

body.light .pp-drag-handle {
    background: rgba(0,0,0,0.12);
}

/* Override modal to be full screen on mobile */
@media (max-width: 600px) {
    .partner-profile-overlay {
        justify-content: center;
        align-items: stretch;
    }
    .partner-profile-modal {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100dvh !important;
        border-left: none !important;
        border-top: none !important;
        border-radius: 0 !important;
        padding: 24px 20px 32px !important;
        gap: 20px !important;
    }
    .pp-drag-handle {
        display: none !important;
    }
    .partner-profile-overlay.is-hidden .partner-profile-modal {
        transform: translate3d(0, 100%, 0) !important;
    }
    .partner-profile-modal {
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        transform: translate3d(0, 0, 0) !important;
    }
}

/* Desktop: narrower panel */
@media (min-width: 601px) {
    .partner-profile-modal {
        width: min(100%, 420px) !important;
        padding: 24px 20px !important;
        gap: 16px !important;
    }
}

/* ── Hero Row ───────────────────────────────────────── */
.pp-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 34px;
}

.pp-avatar-wrap {
    --katomu-avatar-size: 68px;
    position: relative;
    width: 68px;
    height: 68px;
    flex-shrink: 0;
}

.pp-avatar-wrap .partner-profile-avatar {
    --katomu-avatar-size: 68px;
}

.pp-hero-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pp-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.pp-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-writing-class-badge {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 48%;
    height: 24px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    color: var(--accent-color) !important;
    border-color: color-mix(in srgb, var(--accent-color) 44%, transparent) !important;
    background: color-mix(in srgb, var(--accent-color) 13%, transparent) !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent-color) 14%, transparent);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.light .pp-writing-class-badge {
    border-color: color-mix(in srgb, var(--accent-color) 36%, transparent) !important;
    background: color-mix(in srgb, var(--accent-color) 9%, #ffffff) !important;
    box-shadow: none;
}

.pp-presence {
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.3;
}

.pp-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 3px;
}

/* ── Top Badge ──────────────────────────────────────── */
.pp-top-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    align-self: flex-start;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pp-top-icon {
    flex-shrink: 0;
}

.pp-top-badge--rep {
    background: linear-gradient(135deg, rgba(234,179,8,0.16) 0%, rgba(249,115,22,0.12) 100%);
    border: 1px solid rgba(234,179,8,0.3);
    color: #eab308;
}

.pp-top-badge--rep .pp-top-icon {
    color: #eab308;
}

.pp-top-badge--mastery {
    background: linear-gradient(135deg, rgba(167,139,250,0.16) 0%, rgba(99,102,241,0.12) 100%);
    border: 1px solid rgba(167,139,250,0.35);
    color: #a78bfa;
}

.pp-top-badge--mastery .pp-top-icon {
    color: #a78bfa;
}

body.light .pp-top-badge--rep {
    background: linear-gradient(135deg, rgba(234,179,8,0.12) 0%, rgba(249,115,22,0.08) 100%);
    border-color: rgba(234,179,8,0.25);
}

body.light .pp-top-badge--mastery {
    background: linear-gradient(135deg, rgba(167,139,250,0.12) 0%, rgba(99,102,241,0.08) 100%);
    border-color: rgba(167,139,250,0.28);
}

/* ── Chat Photos Panel ───────────────────────────────── */
.partner-profile-modal.pp-photos-open {
    overflow: hidden;
}

.pp-photos-panel {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 14px 18px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent-color) 8%, transparent), transparent 150px),
        var(--surface);
    color: var(--text);
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}

.pp-photos-panel.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(14px);
}

.pp-photos-panel__header {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 0 2px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}

.pp-photos-panel__back {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pp-photos-panel__back:hover {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

.pp-photos-panel__back .ui-icon,
.pp-photos-panel__back svg {
    width: 19px;
    height: 19px;
}

.pp-photos-panel__heading {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pp-photos-panel__title {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text);
}

.pp-photos-panel__subtitle {
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.2;
}

.pp-photos-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 6px;
    padding: 2px 4px 4px 0;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent-color) 34%, transparent) transparent;
}

.pp-photo-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-2);
    color: var(--text-2);
    cursor: default;
    font-family: inherit;
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.pp-photo-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 56%, rgba(0,0,0,0.28));
    opacity: 0;
    transition: opacity 0.15s ease;
}

.pp-photo-tile:hover,
.pp-photo-tile:focus-visible {
    border-color: color-mix(in srgb, var(--accent-color) 58%, var(--border));
    box-shadow: 0 10px 22px rgba(0,0,0,0.2), 0 0 0 1px color-mix(in srgb, var(--accent-color) 24%, transparent);
    transform: translateY(-1px);
    outline: none;
}

.pp-photo-tile:hover::after,
.pp-photo-tile:focus-visible::after {
    opacity: 1;
}

.pp-photo-tile canvas,
.pp-photo-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pp-photo-tile__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    color: var(--text-3);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 10%, transparent), transparent 55%),
        var(--surface-2);
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.pp-photo-tile__placeholder .ui-icon,
.pp-photo-tile__placeholder svg {
    width: 20px;
    height: 20px;
    color: var(--accent-color);
}

.pp-photo-tile--locked {
    cursor: default;
}

.pp-photo-tile--mine::before {
    content: "";
    position: absolute;
    right: 7px;
    bottom: 7px;
    z-index: 2;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--surface) 76%, transparent);
    pointer-events: none;
}

.pp-photo-tile--locked .pp-photo-tile__placeholder {
    color: var(--text-2);
    background:
        linear-gradient(135deg, rgba(239,68,68,0.12), transparent 58%),
        var(--surface-2);
}

.pp-photo-tile--locked .pp-photo-tile__placeholder::before {
    content: "18+";
    min-width: 32px;
    height: 22px;
    padding: 0 7px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,0.32);
    background: rgba(239,68,68,0.12);
    font-size: 11px;
    font-weight: 900;
}

.pp-photos-empty {
    margin: auto;
    max-width: 240px;
    padding: 18px;
    border: 1px dashed color-mix(in srgb, var(--border) 86%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-2) 78%, transparent);
    color: var(--text-3);
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

body.light .pp-photos-panel {
    background: var(--surface);
}

body.light .pp-photo-tile {
    background: rgba(0,0,0,0.045);
    box-shadow: 0 8px 18px rgba(15,23,42,0.08);
}

body.light .pp-photo-tile__placeholder {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 9%, transparent), transparent 55%),
        rgba(0,0,0,0.045);
}

.pp-photo-context-menu {
    position: fixed;
    z-index: 9999;
    background: rgba(22, 28, 36, 0.85);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 6px;
    box-shadow: none;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: menu-pop 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.dark .pp-photo-context-menu {
    background: rgba(17, 20, 24, 0.88);
    border-color: rgba(255, 255, 255, 0.06);
}

.pp-photo-context-menu.is-hidden {
    display: none !important;
}

.pp-photo-context-menu__item {
    background: transparent;
    border: none;
    color: var(--text, #f3f4f6);
    padding: 8px 12px;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.pp-photo-context-menu__item .ui-icon,
.pp-photo-context-menu__item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.pp-photo-context-menu__item:hover,
.pp-photo-context-menu__item:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    outline: none;
}

.pp-photo-context-menu__item.is-danger {
    color: #ef4444;
}

.pp-photo-context-menu__item.is-danger:hover,
.pp-photo-context-menu__item.is-danger:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #ef4444;
}

.pp-photo-context-menu__item.is-disabled,
.pp-photo-context-menu__item:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

body.light .pp-photo-context-menu {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: none;
}

body.light .pp-photo-context-menu__item {
    color: #1f2937;
}

body.light .pp-photo-context-menu__item:hover,
body.light .pp-photo-context-menu__item:focus-visible {
    background: rgba(0, 0, 0, 0.05);
    color: #000000;
}

body.light .pp-photo-context-menu__item.is-danger,
body.light .pp-photo-context-menu__item.is-danger:hover,
body.light .pp-photo-context-menu__item.is-danger:focus-visible {
    color: #ef4444;
}

@media (max-width: 600px) {
    .pp-photos-panel {
        padding: 14px 10px 16px;
    }

    .pp-photos-grid {
        gap: 5px;
    }

    .pp-photo-tile {
        border-radius: 7px;
    }
}


/* ── Guest Notice (unregistered anonymous partner) ──── */
.pp-guest-notice {
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-3);
    font-style: italic;
    text-align: center;
}

/* ── Bio ────────────────────────────────────────────── */

.pp-bio {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.pp-bio-text {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-2);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Stats Row ──────────────────────────────────────── */
.pp-stats-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible;
}

.pp-stat-divider {
    display: none !important;
}

.pp-stat-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    min-height: 126px;
    padding: 15px 16px;
    border-radius: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
    transition: border-color var(--duration) ease, box-shadow var(--duration) ease, transform var(--duration) ease;
}

/* Reputation Card */
#partner-card-reputation.pp-stat-cell {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.05) 0%, var(--surface-2) 100%);
    border: 1px solid rgba(234, 179, 8, 0.18);
}

#partner-card-reputation.pp-stat-cell:hover {
    border-color: rgba(234, 179, 8, 0.35);
    box-shadow: 0 6px 24px rgba(234, 179, 8, 0.08), 0 4px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

/* Mastery Card */
#partner-card-mastery.pp-stat-cell {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.05) 0%, var(--surface-2) 100%);
    border: 1px solid rgba(167, 139, 250, 0.18);
}

#partner-card-mastery.pp-stat-cell:hover {
    border-color: rgba(167, 139, 250, 0.35);
    box-shadow: 0 6px 24px rgba(167, 139, 250, 0.08), 0 4px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.pp-stat-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 8px;
    border-radius: 20px;
    align-self: flex-start;
    line-height: 1;
}

#partner-card-reputation .pp-stat-label {
    background: rgba(234, 179, 8, 0.08);
    color: #fbbf24;
}

#partner-card-reputation .pp-stat-label svg {
    color: #fbbf24;
}

#partner-card-mastery .pp-stat-label {
    background: rgba(167, 139, 250, 0.08);
    color: #c084fc;
}

#partner-card-mastery .pp-stat-label svg {
    color: #c084fc;
}

.pp-stat-label svg {
    flex-shrink: 0;
}

.pp-stat-value-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    min-height: 62px;
    justify-content: flex-start;
}

.pp-stat-num {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}

#partner-card-reputation .pp-stat-num {
    background: linear-gradient(135deg, #ffffff 30%, #fcd34d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 12px rgba(234, 179, 8, 0.12);
}

#partner-card-mastery .pp-stat-num {
    background: linear-gradient(135deg, #ffffff 30%, #c084fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 12px rgba(167, 139, 250, 0.12);
}

/* Light Theme overrides */
body.light .pp-stat-cell {
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

body.light #partner-card-reputation.pp-stat-cell {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.03) 0%, rgba(255, 255, 255, 0.9) 100%);
    border: 1px solid rgba(234, 179, 8, 0.18);
}
body.light #partner-card-reputation.pp-stat-cell:hover {
    border-color: rgba(234, 179, 8, 0.35);
    box-shadow: 0 6px 20px rgba(234, 179, 8, 0.1), 0 4px 15px rgba(0, 0, 0, 0.05);
}

body.light #partner-card-mastery.pp-stat-cell {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.03) 0%, rgba(255, 255, 255, 0.9) 100%);
    border: 1px solid rgba(167, 139, 250, 0.18);
}
body.light #partner-card-mastery.pp-stat-cell:hover {
    border-color: rgba(167, 139, 250, 0.35);
    box-shadow: 0 6px 20px rgba(167, 139, 250, 0.1), 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* ── Permissions ────────────────────────────────────── */
.pp-permissions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pp-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
}

.pp-perms-row {
    display: flex;
    gap: 8px;
}

.pp-perm-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 9px;
    cursor: default;
    user-select: none;
}

.pp-perm-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0;
}

.pp-perm-checkmark {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--border-2, rgba(255,255,255,0.15));
    background: var(--surface-3, rgba(255,255,255,0.04));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.pp-perm-checkmark svg {
    opacity: 0;
    color: #fff;
    transition: opacity 0.15s ease;
}

/* Checked state — driven by JS which sets .checked on the checkbox */
.pp-perm-item input:checked ~ .pp-perm-checkmark {
    background: var(--accent-color, #3AAE7A);
    border-color: var(--accent-color, #3AAE7A);
}

.pp-perm-item input:checked ~ .pp-perm-checkmark svg {
    opacity: 1;
}

.pp-perm-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    white-space: nowrap;
}

body.light .pp-perm-item {
    background: rgba(0,0,0,0.03);
}

body.light .pp-perm-checkmark {
    border-color: rgba(0,0,0,0.18);
    background: rgba(0,0,0,0.04);
}

/* ── Action Buttons ─────────────────────────────────── */
.pp-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}

.pp-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    border-radius: 11px;
    border: 1px solid rgba(239,68,68,0.3);
    background: rgba(239,68,68,0.1);
    color: #ef4444;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, transform 0.1s ease;
}

.pp-btn-primary:hover {
    background: rgba(239,68,68,0.18);
}

.pp-btn-primary:active {
    transform: scale(0.98);
}

/* When "Добавить" state — use accent colour */
.pp-btn-primary:not([data-action="unpin"]) {
    border-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
}

.pp-btn-primary:not([data-action="unpin"]):hover {
    background: color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.pp-secondary-row {
    display: flex;
    gap: 8px;
}

.pp-btn-secondary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease;
}

.pp-btn-secondary:hover {
    background: var(--surface-3);
    color: var(--text);
}

.pp-btn-secondary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pp-btn-danger {
    border-color: rgba(239,68,68,0.25);
    background: rgba(239,68,68,0.07);
    color: #ef4444;
}

.pp-btn-danger:hover {
    background: rgba(239,68,68,0.14);
    color: #ef4444;
}

body.light .pp-btn-secondary {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
}

body.light .pp-btn-secondary:hover {
    background: rgba(0,0,0,0.08);
}

/* Partner profile compact redesign */
.partner-profile-modal {
    gap: 14px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* scrollbar-gutter omitted: scrollbars are globally hidden in base.css,
       so 'stable' caused pointless layout work on every scroll frame */
}

.pp-hero {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 6px 28px 0;
}

.pp-avatar-wrap {
    --katomu-avatar-size: 78px;
    width: var(--katomu-avatar-size);
    height: var(--katomu-avatar-size);
}

.pp-avatar-wrap .partner-profile-avatar {
    --katomu-avatar-size: 78px;
}

.pp-hero-info {
    align-items: center;
    width: 100%;
    gap: 4px;
}

.pp-title-row {
    justify-content: center;
}

.pp-name {
    flex: 0 1 auto;
    max-width: 100%;
    text-align: center;
    font-size: 18px;
}

.pp-presence {
    text-align: center;
}

.pp-profile-facts {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 2px;
    color: var(--text-3);
    font-size: 12px;
    line-height: 1.35;
}

.pp-profile-facts .profile-gender-badge,
.pp-profile-facts .profile-age-badge {
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: var(--text-3) !important;
    box-shadow: none !important;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
}

.pp-profile-facts .profile-gender-badge svg,
.pp-profile-facts .profile-age-badge svg {
    width: 12px;
    height: 12px;
    color: currentColor !important;
}

.pp-writing-class-badge {
    max-width: 100%;
    height: auto;
    min-height: 20px;
    padding: 2px 8px;
    font-size: 10px;
    color: var(--text-2) !important;
    border-color: color-mix(in srgb, var(--text-3) 30%, transparent) !important;
    background: color-mix(in srgb, var(--surface-3) 72%, transparent) !important;
    box-shadow: none;
}

body.light .pp-writing-class-badge {
    color: #64748b !important;
    border-color: rgba(100, 116, 139, 0.24) !important;
    background: rgba(100, 116, 139, 0.06) !important;
}

.pp-action-tiles {
    --pp-action-tile-width: 68px;
    --pp-action-icon-size: 38px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, var(--pp-action-tile-width)));
    justify-content: center;
    align-items: start;
    gap: 10px;
    width: 100%;
    max-width: calc((var(--pp-action-tile-width) * 3) + 20px);
    margin: -2px auto 0;
}

.pp-action-tile {
    box-sizing: border-box;
    width: var(--pp-action-tile-width);
    min-width: var(--pp-action-tile-width);
    min-height: 62px;
    padding: 2px 2px 0;
    border: 0;
    background: transparent;
    color: var(--text-2);
    font-family: inherit;
    cursor: pointer;
    display: grid;
    grid-template-rows: var(--pp-action-icon-size) minmax(14px, auto);
    align-items: center;
    justify-items: center;
    align-content: start;
    gap: 6px;
    text-align: center;
    overflow: hidden;
    transition: color 0.15s ease;
}

.pp-action-tile:hover:not(:disabled) {
    color: var(--text);
}

.pp-action-tile:active:not(:disabled) {
    color: var(--accent-color);
}

.pp-action-tile:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pp-action-tile__icon {
    width: var(--pp-action-icon-size);
    height: var(--pp-action-icon-size);
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
    overflow: hidden;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pp-action-tile__icon svg {
    width: 18px;
    height: 18px;
    display: block;
    flex: 0 0 auto;
}

.pp-action-tile:hover:not(:disabled) .pp-action-tile__icon {
    background: color-mix(in srgb, var(--accent-color) 17%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 32%, var(--border));
}

.pp-action-tile__label {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    color: inherit;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.pp-action-tile--pin[data-action="unpin"],
.pp-action-tile--danger {
    color: #ef4444;
}

.pp-action-tile--pin[data-action="unpin"] .pp-action-tile__icon,
.pp-action-tile--danger .pp-action-tile__icon {
    border-color: rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.pp-action-tile--pin[data-action="unpin"]:hover:not(:disabled),
.pp-action-tile--danger:hover:not(:disabled) {
    color: #ef4444;
}

.pp-action-tile--pin[data-action="unpin"]:hover:not(:disabled) .pp-action-tile__icon,
.pp-action-tile--danger:hover:not(:disabled) .pp-action-tile__icon {
    background: rgba(239, 68, 68, 0.17);
    border-color: rgba(239, 68, 68, 0.34);
}

#partner-profile-top-badges-container {
    justify-content: center !important;
    margin-top: 0 !important;
}

.pp-photos-panel.pp-photos-panel--embedded {
    position: relative;
    inset: auto;
    z-index: 1;
    min-height: 180px;
    max-height: none;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-2) 82%, transparent);
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.pp-photos-panel.pp-photos-panel--embedded .pp-photos-panel__header {
    min-height: auto;
    padding: 0 0 10px;
}

.pp-media-header {
    justify-content: space-between;
}

.pp-photos-panel__title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.pp-photos-panel__title .ui-icon,
.pp-photos-panel__title svg {
    width: 17px;
    height: 17px;
    color: var(--accent-color);
}

.pp-media-count {
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
    font-size: 12px;
    font-weight: 800;
}

.pp-photos-panel.pp-photos-panel--embedded .pp-photos-grid {
    flex: none;
    max-height: none;
    min-height: 0;
    overflow: visible;
    padding: 2px 2px 0 0;
}

.pp-photos-panel.pp-photos-panel--embedded .pp-photos-empty {
    margin: 18px auto 8px;
}

body.light .pp-action-tile,
body.light .pp-photos-panel.pp-photos-panel--embedded {
    border-color: rgba(0, 0, 0, 0.1);
}

body.light .pp-action-tile__icon {
    background: rgba(0, 0, 0, 0.035);
    border-color: rgba(0, 0, 0, 0.1);
}

body.light .pp-action-tile:hover:not(:disabled) .pp-action-tile__icon {
    background: rgba(0, 0, 0, 0.065);
}

.partner-profile-modal .pp-stat-cell {
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.partner-profile-modal #partner-card-reputation.pp-stat-cell:hover,
.partner-profile-modal #partner-card-mastery.pp-stat-cell:hover,
body.light .partner-profile-modal #partner-card-reputation.pp-stat-cell:hover,
body.light .partner-profile-modal #partner-card-mastery.pp-stat-cell:hover {
    box-shadow: none;
    transform: none;
}

.partner-profile-modal .pp-photo-tile {
    box-shadow: none;
    transition: border-color 0.15s ease, filter 0.15s ease;
}

.partner-profile-modal .pp-photo-tile:hover,
.partner-profile-modal .pp-photo-tile:focus-visible {
    box-shadow: none;
    transform: none;
}

@media (max-width: 600px) {
    .pp-hero {
        padding: 4px 24px 0;
    }

    .pp-action-tiles {
        --pp-action-tile-width: 62px;
        --pp-action-icon-size: 36px;
        gap: 8px;
        max-width: calc((var(--pp-action-tile-width) * 3) + 16px);
    }

    .pp-action-tile__icon {
        border-radius: 13px;
    }

    .pp-action-tile__label {
        font-size: 10px;
    }

    .pp-photos-panel.pp-photos-panel--embedded .pp-photos-grid {
        max-height: none;
    }
}

/* ── Close button update ────────────────────────────── */
.partner-profile-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- 3.7 Scroll-to-bottom FAB --- */

.scroll-bottom-btn {
    position: absolute;
    bottom: 70px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-2);
    border: 1px solid var(--border-2);
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: background var(--duration);
}

.scroll-bottom-btn:hover {
    background: var(--surface-3);
}

.scroll-bottom-btn.visible {
    display: flex;
}

.pinned-messages-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: rgba(22, 28, 36, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 10;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 52px;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
}

.pinned-messages-bar.is-hidden {
    display: none !important;
}

.dark .pinned-messages-bar {
    background: rgba(17, 20, 24, 0.75);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.light .pinned-messages-bar {
    background: rgba(243, 244, 246, 0.85);
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

.pinned-messages-bar:hover {
    background: rgba(22, 28, 36, 0.85);
}

.dark .pinned-messages-bar:hover {
    background: rgba(25, 30, 36, 0.85);
}

.light .pinned-messages-bar:hover {
    background: rgba(230, 232, 236, 0.9);
}

.pinned-bar-icon {
    font-size: 1.1rem;
    color: var(--accent, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.pinned-messages-bar:hover .pinned-bar-icon {
    transform: scale(1.1) rotate(-10deg);
}

.pinned-bar-content {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pinned-bar-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent, #6366f1);
    margin-bottom: 2px;
}

.pinned-bar-text {
    font-size: 0.85rem;
    color: var(--text-2, #9ca3af);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pinned-bar-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.pinned-bar-close {
    display: none !important;
    background: transparent;
    border: none;
    color: var(--text-3, #6b7280);
    cursor: pointer;
    font-size: 0.9rem;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.pinned-bar-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f3f4f6;
    transform: rotate(90deg);
}

.light .pinned-bar-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #111827;
}

/* ── List button (≡) inside pinned bar ── */
.pinned-bar-list-btn {
    background: transparent;
    border: none;
    color: var(--text-3, #6b7280);
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.18s ease, color 0.18s ease;
    flex-shrink: 0;
    margin-right: 2px;
}

.pinned-bar-list-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-color);
}

body.light .pinned-bar-list-btn:hover {
    background: rgba(0, 0, 0, 0.07);
    color: var(--accent-color);
}

/* ── Full Pinned List Panel (Telegram style) ── */
.pinned-list-panel {
    position: absolute;
    top: 0; /* anchored below pinned bar via JS margin-top */
    left: 0;
    right: 0;
    z-index: 20;
    background: rgba(17, 22, 30, 0.96);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
    display: flex;
    flex-direction: column;
    max-height: 320px;
    animation: pinnedListSlideDown 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
}

body.light .pinned-list-panel {
    background: rgba(245, 247, 250, 0.97);
    border-bottom-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
}

.pinned-list-panel.is-hidden {
    display: none !important;
}

@keyframes pinnedListSlideDown {
    from { opacity: 0; transform: scaleY(0.88) translateY(-8px); }
    to   { opacity: 1; transform: scaleY(1)    translateY(0); }
}

/* Header */
.pinned-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

body.light .pinned-list-header {
    border-bottom-color: rgba(0, 0, 0, 0.07);
}

.pinned-list-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-color);
}

.pinned-list-close-btn {
    background: transparent;
    border: none;
    color: var(--text-3, #6b7280);
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.18s, color 0.18s, transform 0.18s;
    padding: 0;
}

.pinned-list-close-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f3f4f6;
    transform: rotate(90deg);
}

body.light .pinned-list-close-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #111827;
}

/* Scrollable list body */
.pinned-list-body {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}

.pinned-list-body::-webkit-scrollbar { width: 4px; }
.pinned-list-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

/* Each pinned message row */
.pinned-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-radius: 0;
}

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

body.light .pinned-list-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.pinned-list-num {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-color);
    opacity: 0.7;
    min-width: 18px;
    text-align: right;
    flex-shrink: 0;
}

.pinned-list-pin-icon {
    color: var(--accent-color);
    opacity: 0.6;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.pinned-list-text {
    flex: 1;
    font-size: 13px;
    color: var(--text-2, #9ca3af);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

body.light .pinned-list-text {
    color: var(--text-2);
}

.pinned-list-scroll-btn {
    background: transparent;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    padding: 0;
}

.pinned-list-item:hover .pinned-list-scroll-btn {
    opacity: 1;
}

.pinned-list-scroll-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-color);
}


/* 📌 Message Context Menu */
.message-context-menu {
    position: fixed;
    z-index: 9999;
    background: rgba(22, 28, 36, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 6px;
    box-shadow: none;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: menu-pop 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.dark .message-context-menu {
    background: rgba(17, 20, 24, 0.88);
    border-color: rgba(255, 255, 255, 0.06);
}

body.light .message-context-menu {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: none;
}

/* ⚠️ Must use !important: .message-context-menu { display: flex } is declared below
   and loaded after components.css .is-hidden { display: none }, causing a specificity
   conflict that would keep the menu permanently visible. */
.message-context-menu.is-hidden {
    display: none !important;
}

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

.context-menu-item {
    background: transparent;
    border: none;
    color: var(--text, #f3f4f6);
    padding: 8px 12px;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.context-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

body.light .context-menu-item {
    color: #1f2937;
}

body.light .context-menu-item:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #000000;
}

/* 📌 Pinned Message Bubble Overlay Indicator */
.message {
    position: relative;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}


/* 📌 Pinned Message Bubble – corner badge indicator
   A 20px circular badge that overlaps the bottom-outer corner of the bubble.
   Uses layered background-image: gradient circle (bg) + Lucide pin SVG (icon).
   z-index: 10 ensures the badge sits ABOVE the next consecutive pinned bubble
   (.message has no explicit z-index, so ::after joins the parent stacking context). */
.message.is-pinned-visual::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: -9px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10; /* above sibling .message elements */

    /* Layered backgrounds: 1) solid fill  2) pin icon centred */
    background-color: #1b2a38; /* near-surface dark background */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' x2='12' y1='17' y2='22'/%3E%3Cpath d='M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;

    border: 1.5px solid rgba(167, 139, 250, 0.25); /* subtle accent ring */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    opacity: 1;
}

body.light .message.is-pinned-visual::after {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' x2='12' y1='17' y2='22'/%3E%3Cpath d='M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z'/%3E%3C/svg%3E");
    border: 1.5px solid rgba(124, 58, 237, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Position: overlaps the bottom-outer corner of the bubble */
.message.me.is-pinned-visual::after {
    left: -9px;  /* straddles the left edge of .me bubble */
}

.message.partner.is-pinned-visual::after {
    right: -9px; /* straddles the right edge of .partner bubble */
}



/* 📌 Message Glow Animation */
.message.highlight-glow {
    animation: msg-glow 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes msg-glow {
    0% {
        outline: 2px solid var(--accent, #6366f1);
        outline-offset: 4px;
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);
        background-color: rgba(99, 102, 241, 0.25);
    }
    100% {
        outline: 2px solid transparent;
        outline-offset: 0px;
        box-shadow: none;
    }
}

/* ✏️ Edit Message Bar (Telegram Style) */
.edit-message-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 16px;
    background: rgba(22, 28, 36, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 10;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 48px;
    box-sizing: border-box;
    user-select: none;
}

body.dark .edit-message-bar {
    background: rgba(17, 20, 24, 0.8);
    border-top-color: rgba(255, 255, 255, 0.06);
}

body.light .edit-message-bar {
    background: rgba(243, 244, 246, 0.9);
    border-top-color: rgba(0, 0, 0, 0.08);
}

.edit-bar-icon {
    font-size: 1rem;
    color: var(--accent, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.edit-bar-content {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.edit-bar-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent, #6366f1);
    margin-bottom: 1px;
}

.edit-bar-text {
    font-size: 0.8rem;
    color: var(--text-2, #9ca3af);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edit-bar-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.edit-bar-close {
    background: transparent;
    border: none;
    color: var(--text-3, #6b7280);
    cursor: pointer;
    font-size: 0.85rem;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.edit-bar-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f3f4f6;
    transform: rotate(90deg);
}

body.light .edit-bar-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #111827;
}

.edit-message-bar.is-hidden {
    display: none !important;
}

/* ↩️ Reply Message Bar — Telegram style */
.reply-message-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 6px 12px 6px 16px;
    background: var(--bg-panel, rgba(22, 28, 36, 0.95));
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 10;
    min-height: 52px;
    box-sizing: border-box;
    user-select: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

body.dark .reply-message-bar {
    background: rgba(17, 20, 24, 0.97);
    border-top-color: rgba(255, 255, 255, 0.05);
}

body.light .reply-message-bar {
    background: rgba(240, 242, 245, 0.97);
    border-top-color: rgba(0, 0, 0, 0.07);
}

.reply-message-bar.is-hidden {
    display: none !important;
}

/* Icon: corner-up-left arrow */
.reply-bar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    color: var(--accent-color);
    opacity: 0.9;
}

/* Vertical theme accent bar */
.reply-bar-accent {
    width: 2px;
    min-height: 32px;
    align-self: stretch;
    border-radius: 2px;
    background: var(--accent-color);
    flex-shrink: 0;
    margin-right: 10px;
}

/* Text content area */
.reply-bar-content {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
}

/* "Ответить" label — colored like the current theme */
.reply-bar-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-color);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Snippet text below title */
.reply-bar-text {
    font-size: 0.8rem;
    color: var(--text-2, #9ca3af);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

body.light .reply-bar-text {
    color: #6b7280;
}

.reply-bar-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 6px;
}

/* Close ✕ button */
.reply-bar-close {
    background: transparent;
    border: none;
    color: var(--text-3, #6b7280);
    cursor: pointer;
    font-size: 1rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1;
}

.reply-bar-close:hover {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
}

/* ══════════════════════════════════════════════════════════════
   💬 Message Reply Quote Block (inside chat bubbles) — Telegram style
   ══════════════════════════════════════════════════════════════ */

.message-reply-quote {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 5px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.15s ease;
    /* Subtle border to separate from bubble bg */
    outline: none;
    position: relative;
}

.message-reply-quote:hover {
    background: rgba(255, 255, 255, 0.10);
}

/* Partner bubble (dark bg → slightly lighter quote block) */
.message.partner .message-reply-quote {
    background: rgba(255, 255, 255, 0.07);
}

.message.partner .message-reply-quote:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* My bubble (already colored) */
.message.me .message-reply-quote {
    background: rgba(255, 255, 255, 0.12);
}

.message.me .message-reply-quote:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* The colored left border — Telegram signature */
.reply-quote-accent {
    width: 3px;
    flex-shrink: 0;
    border-radius: 3px 0 0 3px;
    background: var(--accent-color);
    align-self: stretch;
}

.message.me .reply-quote-accent {
    background: rgba(255, 255, 255, 0.75);
}

/* Content area to the right of the accent bar */
.reply-quote-body {
    padding: 5px 10px 5px 8px;
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* "Ответить" sender name label */
.reply-quote-author {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.message.me .reply-quote-author {
    color: rgba(255, 255, 255, 0.85);
}

/* The quoted text snippet */
.reply-quote-snippet {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
    line-height: 1.35;
}

.message.me .reply-quote-snippet {
    color: rgba(255, 255, 255, 0.65);
}

.message.partner .reply-quote-snippet {
    color: rgba(200, 210, 230, 0.7);
}

.reply-quote-snippet.is-photo {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Deleted message reply — muted & italic */
.message-reply-quote.is-deleted-reply {
    cursor: default;
    opacity: 0.65;
}

.message-reply-quote.is-deleted-reply .reply-quote-snippet {
    font-style: italic;
}

.message-reply-quote.is-deleted-reply .reply-quote-accent {
    background: rgba(150, 150, 160, 0.5);
}

/* ✨ Highlight target message when quote is clicked */
@keyframes replyHighlight {
    0%   { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-color) 0%, transparent); background: transparent; }
    15%  { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-color) 50%, transparent); background: color-mix(in srgb, var(--accent-color) 12%, transparent); }
    80%  { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-color) 20%, transparent); background: color-mix(in srgb, var(--accent-color) 6%, transparent); }
    100% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-color) 0%, transparent); background: transparent; }
}

.message.reply-highlight {
    animation: replyHighlight 1.5s ease forwards;
    border-radius: 10px;
}


/* Message edited indicator label */
.message-edited-label {
    font-size: 0.7rem;
    color: var(--text-3, #6b7280);
    margin-left: 6px;
    font-style: italic;
    opacity: 0.8;
}

/* Deleted message visual */
.message.is-deleted-visual {
    opacity: 0.55;
}

.message-deleted-placeholder {
    font-size: 0.82rem;
    color: var(--text-3, #6b7280);
    font-style: italic;
}

/* Mobile overrides stay last so base chat rules cannot override them. */
@media (max-width: 768px) {
    html.chat-keyboard-open,
    html.chat-keyboard-open body {
        width: 100%;
        height: 100%;
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    body.light #chat-screen {
        border-radius: 0;
    }

    #chat-screen {
        width: 100%;
        max-width: none;
    }

    /* Keep the conversation identity visible above the Android browser keyboard.
       Only the viewport/positioning is adjusted — the header is NOT changed. */
    #chat-screen.chat-keyboard-open {
        position: fixed;
        top: var(--chat-keyboard-viewport-offset-top, 0);
        left: var(--chat-keyboard-viewport-offset-left, 0);
        right: auto;
        bottom: auto;
        width: var(--chat-keyboard-viewport-width, 100vw);
        height: var(--chat-keyboard-viewport-height, 100dvh);
        margin: 0;
    }



    #chat-status-container {
        min-width: 0;
        flex: 1 1 auto;
    }

    #chat-status-header {
        overflow-wrap: anywhere;
        line-height: 1.25;
    }

    .partner-rank-area {
        flex-wrap: wrap;
    }

    #chat-header-wrap>div:last-child {
        flex-wrap: wrap;
        justify-content: flex-end;
        min-width: 0;
    }

    .chat-header-pill-btn {
        padding: 5px 8px;
        font-size: 11px;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #speed-match-wrap {
        padding: 6px 10px !important;
    }

    #speed-match-btn {
        max-width: 100%;
        white-space: normal;
        line-height: 1.25;
    }

    .scroll-bottom-btn {
        right: 14px;
        bottom: calc(78px + env(safe-area-inset-bottom));
        width: 44px;
        height: 44px;
        font-size: 22px;
    }

    #image-modal {
        padding: 18px;
    }

    #image-modal-content,
    #image-modal .modal-canvas-view {
        max-width: 96vw;
        max-height: 86vh;
        border-radius: 8px;
    }

    #image-modal-close {
        top: 12px;
        right: 12px;
        width: 44px;
        height: 44px;
        font-size: 28px;
        line-height: 44px;
    }

    #image-modal .image-modal-nav {
        width: 40px;
        height: 54px;
        border-radius: 12px;
        font-size: 36px;
    }

    .input-area {
        gap: 6px;
        padding: 8px 8px max(10px, env(safe-area-inset-bottom));
    }

    .input-area #msg-input {
        min-width: 0;
        padding: 10px 12px;
    }

    #image-btn {
        width: 36px;
        height: 36px;
    }
}

/* Partner Profile Cards Styling */
.partner-profile-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 12px;
}

.partner-profile-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
    transition: transform var(--duration) ease, box-shadow var(--duration) ease;
}

.partner-profile-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.partner-profile-card .card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    font-size: 16px;
    flex-shrink: 0;
}

.partner-profile-card#partner-card-reputation .card-icon {
    color: #eab308;
    background: rgba(234, 179, 8, 0.12);
}

.partner-profile-card#partner-card-mastery .card-icon {
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.12);
}

.partner-profile-card#partner-card-age .card-icon {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.12);
}

.partner-profile-card .card-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.partner-profile-card .card-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.partner-profile-card .card-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.partner-profile-card .rank-badge {
    margin-top: 4px;
    align-self: flex-start;
}

/* ── Image Loading & Shimmer Enhancements ── */
@keyframes msg-photo-fade-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.msg-photo-canvas {
    animation: msg-photo-fade-in 0.25s cubic-bezier(0.1, 1, 0.1, 1) forwards;
}

.img-placeholder.loading {
    width: 140px;
    height: 105px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
    animation: shimmer-load 1.5s infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* ── Message meta: timestamp + read tick (Telegram-style) ─────────────────── */

/* Telegram-style: time + ticks float to bottom-right of the last text line.
   The bubble uses display:flow-root so the float is contained without
   clipping the absolute-positioned pin indicator that extends outside. */
.message-meta {
    float: right;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;   /* space between text and meta on the same line */
    margin-top: 4px;    /* breathing room when it drops to its own row */
    margin-bottom: -2px; /* align baseline with text */
    height: 14px;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
}

.message-time {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.01em;
    white-space: nowrap;
    user-select: none;
}

/* In light theme, partner bubbles have a white bg → dark meta text.
   Own bubbles (me) are always dark → keep white meta text (default). */
body.light .message.partner .message-time {
    color: rgba(0, 0, 0, 0.38);
}

.message.message-pending {
    opacity: 0.72;
}

.message.message-send-failed {
    opacity: 1;
    outline: 1px solid rgba(248, 113, 113, 0.34);
}

.message-send-error-label {
    font-size: 10px;
    color: #fca5a5;
    white-space: nowrap;
}

.message-tick {
    display: inline-flex;
    align-items: center;
    /* sent: single check → 14px wide; read: double → 20px */
    width: 14px;
    height: 9px;
    flex-shrink: 0;
    user-select: none;
    transition: color 0.35s ease, width 0.15s ease;
}

.message-tick.read {
    width: 20px;
}

.message-tick svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Sent (single, dim) ── */
.message-tick.sent {
    color: rgba(255, 255, 255, 0.42);
}

/* Tick in light theme: only dim on partner bubbles (white bg).
   Own bubbles (dark bg) keep the default rgba(255,255,255,0.42). */
body.light .message.partner .message-tick.sent {
    color: rgba(0, 0, 0, 0.28);
}

.message-tick.pending {
    width: 16px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0;
}

.message-tick.failed {
    width: 10px;
    color: #fca5a5;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* ── Read (double, blue) ── */
.message-tick.read {
    color: #4dabf7;
    animation: tickPop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Read tick stays blue on both themes — fine on dark bubbles.
   On partner (light) bubbles use a deeper blue for contrast. */
body.light .message.partner .message-tick.read {
    color: #1c7ed6;
}

@keyframes tickPop {
    0%   { transform: scale(0.75); opacity: 0.4; }
    70%  { transform: scale(1.08); }
    100% { transform: scale(1);    opacity: 1; }
}

/* ── Context menu read-info row ───────────────────────────────────────────── */

.ctx-read-info {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 12px;
    color: var(--text-3);
    border-top: 1px solid var(--border);
    margin-top: 2px;
    pointer-events: none;
    user-select: none;
}

.ctx-read-info::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 9px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5.5L5.5 10L15 1' stroke='%234dabf7' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 5.5L9.5 10L19 1' stroke='%234dabf7' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
}