/* Conversation refinement: messages, sticker library, folders and stories. */

/* ── Message canvas ───────────────────────────────────────── */
#chat-view .messages-list {
    width: min(100%, 1080px);
    margin-inline: auto;
    padding-inline: clamp(13px, 2.1vw, 30px);
}

#chat-view .message-wrapper {
    max-width: min(76%, 690px);
    margin-bottom: 4px;
}

#chat-view .message-bubble-wrapper {
    min-width: 0;
}

#chat-view .message-bubble {
    position: relative;
    padding: 9px 12px 8px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 20px 20px 20px 7px;
    color: rgba(247, 246, 251, 0.94);
    background:
        linear-gradient(145deg, rgba(31, 34, 50, 0.88), rgba(20, 23, 37, 0.91));
    box-shadow:
        0 8px 24px rgba(3, 5, 12, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
    backdrop-filter: blur(20px) saturate(125%);
}

#chat-view .message-wrapper.sent .message-bubble {
    border-color: color-mix(in srgb, var(--accent) 23%, rgba(255, 255, 255, 0.08));
    border-radius: 20px 20px 7px 20px;
    background:
        radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.09), transparent 32%),
        linear-gradient(145deg,
            color-mix(in srgb, var(--accent) 54%, #29253d),
            color-mix(in srgb, var(--accent) 34%, #171927));
    box-shadow:
        0 9px 26px color-mix(in srgb, var(--accent) 11%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#chat-view .message-wrapper.grouped:not(.group-last) .message-bubble {
    border-bottom-left-radius: 10px;
}

#chat-view .message-wrapper.sent.grouped:not(.group-last) .message-bubble {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 20px;
}

#chat-view .message-text {
    font-size: var(--msg-font-size, 15px);
    line-height: 1.46;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

#chat-view .message-text code {
    padding: 0.12em 0.34em;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 6px;
    color: #ddd6fe;
    background: rgba(4, 5, 12, 0.22);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
}

.message-inline-link {
    color: #b9d8ff;
    text-decoration: none;
    font-weight: 610;
    text-decoration-line: underline;
    text-decoration-color: rgba(185, 216, 255, 0.3);
    text-underline-offset: 3px;
}

.message-inline-link:hover {
    color: #e0ecff;
    text-decoration-color: currentColor;
}

#chat-view .message-meta {
    margin-top: 3px;
    padding-inline: 3px;
    color: rgba(209, 205, 220, 0.46);
    font-size: 0.6rem;
    letter-spacing: 0.01em;
}

#chat-view .message-edited-label {
    color: rgba(210, 205, 223, 0.5);
}

/* Link cards are part of the message, not loose blocks. */
#chat-view .link-preview-card {
    position: relative;
    width: min(100%, 430px);
    min-height: 74px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    margin-top: 6px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 17px;
    color: inherit;
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--accent) 13%, transparent), transparent 42%),
        rgba(15, 18, 30, 0.82);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.055);
    text-decoration: none;
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), border-color 180ms ease, background 180ms ease;
}

#chat-view .message-wrapper.sent > .link-preview-card {
    align-self: flex-end;
}

#chat-view .message-wrapper.received > .link-preview-card {
    align-self: flex-start;
}

#chat-view .link-preview-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 36%, rgba(255, 255, 255, 0.1));
    background-color: rgba(22, 25, 40, 0.92);
}

#chat-view .link-preview-card.has-image {
    grid-template-columns: 108px minmax(0, 1fr);
}

#chat-view .link-preview-image {
    min-height: 100%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.035);
}

#chat-view .link-preview-image img {
    width: 100%;
    height: 100%;
    min-height: 98px;
    display: block;
    object-fit: cover;
}

#chat-view .link-preview-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 11px 13px;
}

#chat-view .link-preview-domain {
    overflow: hidden;
    color: color-mix(in srgb, var(--accent) 64%, #d8d2ea);
    font-size: 0.61rem;
    font-weight: 720;
    letter-spacing: 0.035em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

#chat-view .link-preview-title {
    display: -webkit-box;
    overflow: hidden;
    color: rgba(248, 246, 252, 0.92);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#chat-view .link-preview-desc {
    display: -webkit-box;
    overflow: hidden;
    color: rgba(215, 211, 225, 0.5);
    font-size: 0.65rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Date navigation */
#chat-view .date-indicator {
    position: sticky;
    z-index: 16;
    top: 8px;
    width: max-content;
    margin: 0 auto -29px;
    pointer-events: none;
}

#chat-view .date-indicator span,
#chat-view .messages-date-divider span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    color: rgba(231, 228, 239, 0.67);
    background: rgba(14, 17, 29, 0.72);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    backdrop-filter: blur(24px) saturate(145%);
    font-size: 0.64rem;
    font-weight: 670;
    letter-spacing: 0.015em;
}

#chat-view .messages-date-divider {
    width: 100%;
    max-width: 720px;
    display: grid;
    grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
    align-items: center;
    gap: 12px;
    margin: 18px auto 11px;
}

#chat-view .messages-date-divider::before,
#chat-view .messages-date-divider::after {
    content: "";
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09));
}

#chat-view .messages-date-divider::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.09), transparent);
}

/* Stickers float naturally in the conversation. */
#chat-view .message-type-sticker .message-bubble,
#chat-view .message-type-sticker.sent .message-bubble,
#chat-view .message-type-sticker.received .message-bubble {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

#chat-view .message-type-sticker .media-sticker {
    width: clamp(118px, 14vw, 190px);
    height: clamp(118px, 14vw, 190px);
    display: grid;
    place-items: center;
    font-size: clamp(4.4rem, 8vw, 7rem);
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.17));
}

#chat-view .message-type-sticker .media-sticker img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#chat-view .message-type-sticker .message-meta {
    width: max-content;
    margin-top: -4px;
    padding: 3px 7px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    background: rgba(11, 13, 23, 0.5);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}

/* ── Editing state ────────────────────────────────────────── */
.edit-bar {
    position: relative;
    min-height: 58px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto 34px;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    margin: 0 4px 8px;
    padding: 8px 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 27%, rgba(255, 255, 255, 0.07));
    border-radius: 18px;
    color: var(--text-primary);
    background: rgba(17, 20, 33, 0.84);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(28px) saturate(135%);
    backdrop-filter: blur(28px) saturate(135%);
    opacity: 0;
    transform: translateY(8px) scale(.985);
    transition: opacity 170ms ease, transform 240ms cubic-bezier(.2,.85,.2,1);
}

.edit-bar.active {
    opacity: 1;
    transform: none;
}

.edit-bar.is-leaving {
    opacity: 0;
    transform: translateY(5px) scale(.99);
}

.edit-bar-aurora {
    position: absolute;
    inset: -70% 35% 20% -10%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent), transparent 67%);
    pointer-events: none;
}

.edit-bar-icon {
    position: relative;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #e7e0ff;
    background: color-mix(in srgb, var(--accent) 20%, rgba(255,255,255,.035));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

.edit-bar-copy {
    position: relative;
    min-width: 0;
}

.edit-bar-kicker,
.edit-bar-copy strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edit-bar-kicker {
    margin-bottom: 3px;
    color: color-mix(in srgb, var(--accent) 65%, #e1dbea);
    font-size: .64rem;
    font-weight: 760;
}

.edit-bar-copy strong {
    color: rgba(232,229,239,.63);
    font-size: .71rem;
    font-weight: 520;
}

.edit-bar-hint {
    color: rgba(208,204,218,.36);
    font-size: .58rem;
    white-space: nowrap;
}

.edit-bar-close {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: rgba(226,222,235,.55);
    background: rgba(255,255,255,.05);
    cursor: pointer;
}

.edit-bar-close:hover { color: #fff; background: rgba(255,255,255,.1); }
.edit-bar.is-saving .edit-bar-icon i { animation: editPulse 850ms ease-in-out infinite alternate; }
@keyframes editPulse { to { transform: scale(.84); opacity: .55; } }

.composer.is-editing .input-wrapper {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border-subtle));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 9%, transparent), inset 0 1px 0 rgba(255,255,255,.06);
}

.send-btn.editing {
    background: linear-gradient(145deg, #8c75e8, #6851c8);
}

/* ── Emoji and sticker library ────────────────────────────── */
.emoji-panel {
    width: min(430px, calc(100vw - 24px));
    max-height: min(610px, calc(100dvh - 118px));
    border-color: rgba(255,255,255,.105);
    border-radius: 25px;
    background: rgba(15, 18, 30, .92);
    box-shadow: 0 30px 90px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.09);
    -webkit-backdrop-filter: blur(42px) saturate(145%);
    backdrop-filter: blur(42px) saturate(145%);
}

.emoji-panel-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 15px 10px;
}

.emoji-panel-brand { display:flex; align-items:center; gap:10px; min-width:0; }
.emoji-panel-brand > span {
    width: 37px; height:37px; display:grid; place-items:center; flex:0 0 37px;
    border-radius:13px; color:#dcd2ff;
    background:linear-gradient(145deg, rgba(145,119,232,.24),rgba(86,70,156,.14));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.emoji-panel-brand strong,.emoji-panel-brand small { display:block; }
.emoji-panel-brand strong { color:rgba(247,245,252,.92);font-size:.82rem;font-weight:750; }
.emoji-panel-brand small { margin-top:2px;color:rgba(205,201,216,.43);font-size:.59rem; }
.emoji-panel-close,.sticker-flow-close {
    width:32px;height:32px;display:grid;place-items:center;flex:0 0 32px;
    border:1px solid rgba(255,255,255,.07);border-radius:50%;
    color:rgba(222,218,232,.5);background:rgba(255,255,255,.04);cursor:pointer;
}

.emoji-tabs {
    margin: 0 12px 9px;
    padding: 4px;
    gap: 4px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 15px;
    background: rgba(255,255,255,.025);
}

.emoji-tab { min-height:37px; gap:7px; border-radius:11px; font-size:.67rem; font-weight:680; }
.emoji-tab.active { color:#eee9ff; background:color-mix(in srgb,var(--accent) 22%,rgba(255,255,255,.035)); box-shadow:inset 0 1px 0 rgba(255,255,255,.09); }
.emoji-panel-content { max-height:360px; padding:10px 12px 13px; }
#emoji-panel-stickers { display:flex; flex-direction:column; max-height:390px; }

.sticker-library-head { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 12px 9px; }
.sticker-library-head > div { min-width:0; }
.sticker-library-head strong,.sticker-library-head small { display:block; }
.sticker-library-head strong { color:rgba(243,241,249,.88);font-size:.72rem;font-weight:720; }
.sticker-library-head small { margin-top:2px;color:rgba(202,198,213,.38);font-size:.56rem; }
.sticker-search {
    width:158px;min-height:34px;display:flex;align-items:center;gap:7px;padding:0 10px;
    border:1px solid rgba(255,255,255,.075);border-radius:12px;
    color:rgba(214,209,226,.38);background:rgba(255,255,255,.035);
}
.sticker-search:focus-within { border-color:color-mix(in srgb,var(--accent) 42%,transparent);background:rgba(255,255,255,.055); }
.sticker-search input { min-width:0;width:100%;border:0;outline:0;color:var(--text-primary);background:transparent;font:inherit;font-size:.64rem; }
.sticker-search input::placeholder { color:rgba(210,205,220,.35); }

.sticker-packs-bar { min-height:50px;padding:7px 11px;border-block:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.018);align-items:center; }
.sticker-pack-btn,.sticker-pack-add { width:38px;height:38px;border-radius:12px; }
.sticker-pack-btn { padding:4px; }
.sticker-pack-btn.active { background:color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.09); }
.sticker-pack-btn::after { bottom:-7px;height:3px;border-radius:99px; }
.sticker-pack-cover { background:transparent; }
.sticker-grid-wrapper { flex:1 1 auto;max-height:260px;padding:9px 11px 12px; }
.sticker-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:0; }
.sticker-item {
    appearance:none;border:1px solid transparent;background:transparent;color:inherit;
    border-radius:17px;padding:4px;
}
.sticker-item:hover { z-index:2;border-color:rgba(255,255,255,.07);background:rgba(255,255,255,.045);transform:translateY(-2px) scale(1.055); }
.sticker-item:focus-visible { outline:2px solid var(--accent);outline-offset:2px; }
.sticker-item.is-sending { opacity:.45;transform:scale(.9); }
.sticker-library-footer { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px 11px;border-top:1px solid rgba(255,255,255,.055); }
.sticker-library-footer > span { color:rgba(203,199,215,.35);font-size:.56rem; }
.sticker-library-footer > span i { color:color-mix(in srgb,var(--accent) 70%,#fff);margin-right:5px; }
.sticker-add-btn {
    position:static;width:auto;height:34px;display:inline-flex;gap:6px;padding:0 12px;
    border:1px solid color-mix(in srgb,var(--accent) 25%,rgba(255,255,255,.06));border-radius:12px;
    color:#e5ddff;background:color-mix(in srgb,var(--accent) 15%,rgba(255,255,255,.025));font-size:.62rem;font-weight:720;
}
.sticker-add-btn:hover { transform:translateY(-1px); }

/* Sticker flow sheets */
.sticker-flow-overlay { z-index:1200; padding:18px; }
.sticker-flow-card {
    position:relative;width:min(440px,100%);max-width:440px;overflow:hidden;
    border:1px solid rgba(255,255,255,.11);border-radius:27px;
    color:var(--text-primary);background:rgba(16,19,31,.95);
    box-shadow:0 34px 100px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.1);
    -webkit-backdrop-filter:blur(42px) saturate(145%);backdrop-filter:blur(42px) saturate(145%);
}
.sticker-flow-glow { position:absolute;inset:-160px 30% auto -90px;height:260px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 24%,transparent),transparent 68%);pointer-events:none; }
.sticker-flow-handle { display:none; }
.sticker-flow-head { position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 34px;align-items:start;gap:12px;padding:19px 19px 14px;border-bottom:1px solid rgba(255,255,255,.06); }
.sticker-flow-icon { width:48px;height:48px;display:grid;place-items:center;border-radius:17px;color:#ded4ff;background:linear-gradient(145deg,rgba(144,116,232,.26),rgba(90,73,158,.13));box-shadow:inset 0 1px 0 rgba(255,255,255,.11); }
.sticker-flow-head small,.sticker-flow-head h3,.sticker-flow-head p { display:block;margin:0; }
.sticker-flow-head small { margin-bottom:3px;color:color-mix(in srgb,var(--accent) 60%,#cfc9dc);font-size:.58rem;font-weight:760;letter-spacing:.05em;text-transform:uppercase; }
.sticker-flow-head h3 { color:rgba(249,247,252,.94);font-size:1rem;font-weight:760; }
.sticker-flow-head p { margin-top:5px;color:rgba(207,202,217,.45);font-size:.64rem;line-height:1.4; }
.sticker-flow-body { position:relative;padding:17px 19px; }
.sticker-flow-field > span { display:flex;justify-content:space-between;margin-bottom:7px;color:rgba(220,216,228,.58);font-size:.62rem;font-weight:680; }
.sticker-flow-field > span small { color:rgba(201,196,211,.33);font-size:.56rem; }
.sticker-flow-field > div { min-height:48px;display:flex;align-items:center;gap:10px;padding:0 13px;border:1px solid rgba(255,255,255,.085);border-radius:15px;color:rgba(210,205,220,.4);background:rgba(255,255,255,.035); }
.sticker-flow-field > div:focus-within { border-color:color-mix(in srgb,var(--accent) 40%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 8%,transparent); }
.sticker-flow-field input { width:100%;border:0;outline:0;color:var(--text-primary);background:transparent;font:inherit;font-size:.76rem; }
.sticker-flow-tip { display:flex;align-items:flex-start;gap:9px;margin-top:12px;padding:10px 11px;border-radius:13px;color:rgba(209,204,220,.46);background:rgba(255,255,255,.025);font-size:.61rem;line-height:1.4; }
.sticker-flow-tip i { margin-top:2px;color:#c7b9f7; }
.sticker-flow-error { margin:10px 0 0;padding:9px 10px;border-radius:11px;color:#ffabb8;background:rgba(244,63,94,.1);font-size:.62rem; }
.sticker-flow-actions { display:flex;justify-content:flex-end;gap:9px;padding:12px 19px 17px;border-top:1px solid rgba(255,255,255,.055); }
.sticker-flow-actions button { min-height:40px;padding:0 15px;border-radius:13px;font:inherit;font-size:.68rem;font-weight:720;cursor:pointer; }
.sticker-flow-secondary { border:1px solid rgba(255,255,255,.075);color:rgba(228,224,236,.65);background:rgba(255,255,255,.035); }
.sticker-flow-primary { display:inline-flex;align-items:center;gap:8px;border:0;color:#fff;background:linear-gradient(145deg,#8b72e3,#6750c6);box-shadow:0 9px 22px rgba(96,74,187,.24); }
.sticker-flow-primary:disabled { opacity:.38;cursor:not-allowed;box-shadow:none; }

.sticker-drop-zone { min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:15px;border:1px dashed rgba(255,255,255,.14);border-radius:20px;background:rgba(255,255,255,.025);cursor:pointer;transition:180ms ease; }
.sticker-drop-zone:hover,.sticker-drop-zone.dragover { border-color:color-mix(in srgb,var(--accent) 52%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent); }
.sticker-upload-preview { width:92px;height:92px;display:grid;place-items:center;overflow:hidden;border-radius:24px;color:rgba(220,215,230,.35);background:rgba(255,255,255,.04);font-size:1.7rem; }
.sticker-upload-preview img { width:100%;height:100%;object-fit:contain; }
.sticker-drop-zone.has-file .sticker-upload-preview { background:transparent;box-shadow:0 12px 28px rgba(0,0,0,.18); }
.sticker-drop-copy { text-align:center; }
.sticker-drop-copy strong,.sticker-drop-copy small { display:block; }
.sticker-drop-copy strong { color:rgba(239,236,246,.74);font-size:.7rem; }
.sticker-drop-copy small { margin-top:4px;color:rgba(202,197,213,.38);font-size:.58rem; }
.sticker-file-summary { display:flex;align-items:center;gap:9px;margin-top:10px;padding:9px 11px;border:1px solid rgba(74,222,128,.14);border-radius:13px;color:#71dda0;background:rgba(34,197,94,.07); }
.sticker-file-summary > span { min-width:0; }
.sticker-file-summary strong,.sticker-file-summary small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.sticker-file-summary strong { color:rgba(236,244,239,.8);font-size:.65rem; }
.sticker-file-summary small { margin-top:2px;color:rgba(174,218,190,.5);font-size:.55rem; }
.sticker-pack-pick-list { display:flex;flex-direction:column;gap:7px;max-height:340px;overflow-y:auto; }
.pack-pick-btn { width:100%;min-height:60px;display:grid;grid-template-columns:42px minmax(0,1fr) 14px;align-items:center;gap:10px;padding:8px 10px;border:1px solid rgba(255,255,255,.06);border-radius:16px;color:var(--text-primary);background:rgba(255,255,255,.025);text-align:left;cursor:pointer; }
.pack-pick-btn:hover { border-color:rgba(255,255,255,.11);background:rgba(255,255,255,.055); }
.pack-pick-cover { width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:rgba(255,255,255,.04);font-size:1.35rem; }
.pack-pick-cover img { width:36px;height:36px;object-fit:contain; }
.pack-pick-copy strong,.pack-pick-copy small { display:block; }
.pack-pick-copy strong { font-size:.7rem;font-weight:700; }
.pack-pick-copy small { margin-top:3px;color:var(--text-muted);font-size:.56rem; }
.pack-pick-btn > i { color:rgba(215,210,224,.25);font-size:.55rem; }
.btn-new-pack-pick { min-height:54px;display:flex;align-items:center;gap:11px;padding:8px 12px;border:1px dashed color-mix(in srgb,var(--accent) 30%,rgba(255,255,255,.06));border-radius:16px;color:#d9d0f8;background:color-mix(in srgb,var(--accent) 7%,transparent);text-align:left;cursor:pointer; }
.btn-new-pack-pick > i { width:31px;height:31px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--accent) 15%,transparent); }
.btn-new-pack-pick span strong,.btn-new-pack-pick span small { display:block; }
.btn-new-pack-pick strong { font-size:.68rem; }.btn-new-pack-pick small { margin-top:2px;color:rgba(211,205,224,.4);font-size:.55rem; }

/* ── Sticky folder workspace ─────────────────────────────── */
/* Контейнер полностью прозрачный — сам каркас невидим, видна только «пилюля» табов */
.modern-sidebar .folder-tabs-wrap {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    min-height: 0;
    margin: 2px 2px 10px !important;
    padding: 0 3px;
    border: 0;
    background: rgba(14, 18, 34, 0.86) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: none;
    border-radius: 14px;
}

.modern-sidebar .ftabs-scroll {
    width: 100%;
    min-width: 0;
    min-height: 39px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;
    
    box-shadow:
        0 7px 18px rgba(2,4,12,.45),
        0 2px 5px rgba(2,4,12,.28),
        inset 0 1px 0 rgba(255,255,255,.05);
    -webkit-mask-image: none;
    mask-image: none;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.modern-sidebar .ftabs-scroll::-webkit-scrollbar { display:none; }

.modern-sidebar .ftab {
    min-height: 33px;
    flex: 1 1 0;
    min-width: 88px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: rgba(211,207,221,.48);
    background: transparent;
    font-size: .59rem;
    font-weight: 680;
    white-space: nowrap;
    scroll-snap-align: center;
    cursor: pointer;
    transition: color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease;
}

.modern-sidebar .ftab:hover { color:rgba(241,239,247,.82);background:rgba(255,255,255,.045); }
.modern-sidebar .ftab:active { transform:scale(.97); }
.modern-sidebar .ftab-active { border-color:color-mix(in srgb,var(--accent) 23%,rgba(255,255,255,.05));color:#f2eeff;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 21%,rgba(255,255,255,.025)),rgba(75,187,255,.045));box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 6px 16px rgba(54,39,121,.12); }
.modern-sidebar .ftab-ico { color:inherit;font-size:.58rem;opacity:.72; }
.modern-sidebar .ftab-active .ftab-ico { opacity:1; }
.modern-sidebar .ftab-badge { min-width:17px;height:17px;display:grid;place-items:center;padding:0 4px;border-radius:999px;color:#fff;background:color-mix(in srgb,var(--accent) 78%,#5b4f8a);font-size:.48rem;font-weight:780;box-shadow:0 3px 9px rgba(57,39,127,.2); }
.modern-sidebar .ftab::after { display:none; }

/* ── Folder picker ────────────────────────────────────────── */
.folder-picker-overlay { padding:18px;background:rgba(3,5,12,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); }
.folder-picker {
    position:relative;width:min(470px,100%);max-width:470px;max-height:min(720px,calc(100dvh - 36px));
    border:1px solid rgba(255,255,255,.11);border-radius:28px;
    color:var(--text-primary);background:rgba(15,18,30,.96);
    box-shadow:0 38px 110px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.1);
    -webkit-backdrop-filter:blur(44px) saturate(150%);backdrop-filter:blur(44px) saturate(150%);
}
.fp-glow { position:absolute;inset:-180px 28% auto -100px;height:280px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 23%,transparent),transparent 68%);pointer-events:none; }
.fp-handle { display:none; }
.folder-picker-head { position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 34px;align-items:start;gap:12px;padding:19px 19px 14px;border-bottom:1px solid rgba(255,255,255,.06); }
.folder-picker-head .fp-title-icon { width:48px;height:48px;display:grid;place-items:center;border-radius:17px;color:#ded5ff;background:linear-gradient(145deg,rgba(145,119,232,.25),rgba(83,69,148,.13));box-shadow:inset 0 1px 0 rgba(255,255,255,.11); }
.folder-picker-head .fp-title-icon i { color:inherit;opacity:1;font-size:1rem; }
.folder-picker-head > div { min-width:0; }
.folder-picker-head > div > small { margin:0 0 3px;color:color-mix(in srgb,var(--accent) 60%,#ccc6d8);font-size:.57rem;font-weight:760;letter-spacing:.05em;text-transform:uppercase; }
.folder-picker-head > div > span { color:rgba(249,247,252,.94);font-size:1rem;font-weight:760; }
.folder-picker-head p { margin:5px 0 0;color:rgba(208,203,218,.44);font-size:.63rem;line-height:1.4; }
.fp-close-btn { width:34px;height:34px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.04); }
.fp-chat-card { position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;margin:14px 17px 2px;padding:10px 11px;border:1px solid rgba(255,255,255,.07);border-radius:17px;background:rgba(255,255,255,.03); }
.fp-chat-avatar { width:42px;height:42px;display:grid;place-items:center;border-radius:14px;color:#fff;background:linear-gradient(145deg,#816bd4,#4f519b);background-position:center;background-size:cover;font-size:.72rem;font-weight:760; }
.fp-chat-card > span:nth-child(2) { min-width:0; }.fp-chat-card small,.fp-chat-card strong { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.fp-chat-card small { color:rgba(202,197,212,.38);font-size:.54rem;text-transform:uppercase;letter-spacing:.04em; }.fp-chat-card strong { margin-top:3px;color:rgba(242,239,247,.82);font-size:.7rem; }
.fp-selected-count { min-width:28px;height:28px;display:grid;place-items:center;border-radius:10px;color:#ded4ff;background:color-mix(in srgb,var(--accent) 18%,transparent);font-size:.62rem;font-weight:760; }
.folder-picker-body { min-height:0;padding:13px 17px 17px; }
.fp-section-label { display:flex;justify-content:space-between;align-items:center;margin:0 2px 7px;color:rgba(222,217,230,.56);font-size:.61rem;font-weight:700; }.fp-section-label small { color:rgba(200,195,211,.33);font-size:.54rem;font-weight:550; }
.folder-picker-list { max-height:300px;gap:6px;margin:0; }
.folder-picker-item { width:100%;min-height:58px;display:grid;grid-template-columns:38px minmax(0,1fr) 28px;align-items:center;gap:10px;padding:7px 9px;border:1px solid transparent;border-radius:16px;color:var(--text-secondary);background:transparent;text-align:left;cursor:pointer; }
.folder-picker-item + .folder-picker-item { border-top-color:transparent; }
.folder-picker-item:hover { border-color:rgba(255,255,255,.065);background:rgba(255,255,255,.035); }
.folder-picker-item.active { border-color:color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.04));color:#eeeaff;background:color-mix(in srgb,var(--accent) 11%,rgba(255,255,255,.02)); }
.fp-folder-icon { width:38px;height:38px;display:grid;place-items:center;border-radius:13px;color:rgba(214,209,224,.4);background:rgba(255,255,255,.035); }.fp-folder-icon i { width:auto;color:inherit;font-size:.78rem; }
.folder-picker-item.active .fp-folder-icon { color:#cfc4f7;background:color-mix(in srgb,var(--accent) 15%,transparent); }
.fp-item-copy { min-width:0; }.fp-item-copy strong,.fp-item-copy small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.fp-item-copy strong { color:inherit;font-size:.7rem;font-weight:690; }.fp-item-copy small { margin-top:3px;color:rgba(199,194,210,.34);font-size:.55rem;font-weight:520; }
.fp-item-check { width:25px;height:25px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:9px;color:transparent;background:rgba(255,255,255,.025); }.fp-item-check i { width:auto;color:inherit;font-size:.56rem; }
.folder-picker-item.active .fp-item-check { border-color:transparent;color:#fff;background:linear-gradient(145deg,#8b74e2,#6852c5);box-shadow:0 5px 14px rgba(103,79,190,.26); }
.folder-picker-item.is-loading { opacity:.55; }
.fp-empty { min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:20px;color:var(--text-muted); }.fp-empty > span { width:48px;height:48px;display:grid;place-items:center;margin-bottom:4px;border-radius:17px;color:#bcaeee;background:rgba(132,105,216,.11);font-size:1rem; }.fp-empty strong { color:rgba(231,227,238,.66);font-size:.7rem; }.fp-empty small { max-width:260px;color:rgba(200,195,210,.34);font-size:.58rem;line-height:1.4; }
.folder-picker-create-wrap { margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.055); }.folder-picker-create-wrap > label { display:block;margin:0 2px 7px;color:rgba(221,216,229,.53);font-size:.6rem;font-weight:680; }.folder-picker-create-wrap > small { display:block;margin:6px 2px 0;color:rgba(199,194,209,.3);font-size:.54rem; }
.folder-picker-create { min-height:46px;gap:9px;padding:0 7px 0 12px;border-color:rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.035); }.folder-picker-create > i { color:rgba(209,204,218,.36);font-size:.7rem; }.folder-picker-create input { font-size:.68rem; }.folder-picker-create button { width:33px;height:33px;border-radius:11px;background:linear-gradient(145deg,#8a72e2,#6650c4); }.folder-picker-create button:disabled { opacity:.34;cursor:not-allowed; }

/* ── Story color and viewer polish ────────────────────────── */
.story-backgrounds { grid-template-columns:repeat(7,minmax(0,1fr)); }
.story-background-custom { display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,var(--story-custom-color,#7866d5),#30264f); }
.story-background-custom input { position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer; }
.story-background-custom span { position:relative;width:25px;height:25px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:9px;color:#fff;background:rgba(7,8,16,.26);font-size:.58rem;pointer-events:none; }

@media (min-width: 1100px) {
    .story-viewers-panel {
        top: 50%;
        right: auto;
        bottom: auto;
        left: calc(50% + 237px);
        width: min(370px, calc(50vw - 265px));
        height: min(720px, calc(100dvh - 72px));
        border-radius: 28px;
        transform: translate(34px, -50%) scale(.97);
        background:
            radial-gradient(circle at 15% 0, rgba(132,106,217,.15),transparent 34%),
            rgba(14,16,27,.94);
    }
    .story-viewers-panel.open { transform:translateY(-50%); }
}

.story-viewers-heading > span { display:flex !important;align-items:center;gap:7px; }
.story-viewers-heading > span > i { color:#bcaef0;font-size:.66rem; }
.story-viewers-heading b { min-width:24px;height:22px;display:inline-grid;place-items:center;padding:0 6px;border-radius:8px;color:#ded5ff;background:rgba(137,110,222,.15);font-size:.57rem; }
.story-viewers-list { padding:10px; }
.story-viewer-person { min-height:62px;gap:11px;padding:8px 9px;border:1px solid transparent;border-radius:17px; }
.story-viewer-person:hover { border-color:rgba(255,255,255,.06);background:rgba(255,255,255,.035); }
.story-viewer-person-avatar { width:43px;height:43px;flex-basis:43px;box-shadow:0 0 0 2px rgba(159,135,232,.24),0 7px 18px rgba(0,0,0,.16); }
.story-viewer-person-copy strong { font-size:.72rem; }.story-viewer-person-copy small { font-size:.57rem; }
.story-viewer-person-seen { width:28px;height:28px;display:grid;place-items:center;border-radius:10px;color:#8cd3b0;background:rgba(45,190,120,.08);font-size:.55rem; }

/* ── Light theme ──────────────────────────────────────────── */
[data-theme="light"] #chat-view .message-bubble {
    border-color:rgba(52,45,77,.09);color:#272633;background:rgba(255,255,255,.82);
    box-shadow:0 8px 24px rgba(52,42,85,.07),inset 0 1px 0 #fff;
}
[data-theme="light"] #chat-view .message-wrapper.sent .message-bubble { border-color:color-mix(in srgb,var(--accent) 22%,rgba(61,50,91,.08));color:#282431;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 18%,#fff),color-mix(in srgb,var(--accent) 9%,#f8f7fb)); }
[data-theme="light"] .message-inline-link { color:#4d5fc0; }
[data-theme="light"] #chat-view .link-preview-card { border-color:rgba(60,50,88,.09);background:rgba(255,255,255,.76);box-shadow:0 10px 28px rgba(54,43,88,.08),inset 0 1px 0 #fff; }
[data-theme="light"] #chat-view .link-preview-title { color:#2c2936; }[data-theme="light"] #chat-view .link-preview-desc { color:#777280; }
[data-theme="light"] #chat-view .date-indicator span,[data-theme="light"] #chat-view .messages-date-divider span { border-color:rgba(59,50,82,.09);color:#6d6877;background:rgba(255,255,255,.82);box-shadow:0 8px 25px rgba(53,43,80,.07),inset 0 1px 0 #fff; }
[data-theme="light"] #chat-view .messages-date-divider::before { background:linear-gradient(90deg,transparent,rgba(66,56,91,.11)); }[data-theme="light"] #chat-view .messages-date-divider::after { background:linear-gradient(90deg,rgba(66,56,91,.11),transparent); }
[data-theme="light"] #chat-view .message-type-sticker .message-meta { border-color:rgba(64,53,91,.08);background:rgba(255,255,255,.68); }
[data-theme="light"] .edit-bar,[data-theme="light"] .emoji-panel,[data-theme="light"] .sticker-flow-card,[data-theme="light"] .folder-picker { border-color:rgba(57,47,82,.1);color:#292733;background:rgba(252,251,255,.94);box-shadow:0 30px 90px rgba(53,42,82,.17),inset 0 1px 0 #fff; }
[data-theme="light"] .edit-bar-copy strong,[data-theme="light"] .emoji-panel-brand strong,[data-theme="light"] .sticker-library-head strong,[data-theme="light"] .sticker-flow-head h3,[data-theme="light"] .folder-picker-head > div > span { color:#2c2935; }
[data-theme="light"] .modern-sidebar .folder-tabs-wrap { border:0;background:rgba(247,247,251,.94) !important;box-shadow:0 7px 18px rgba(53,43,80,.12),0 2px 5px rgba(53,43,80,.07),inset 0 1px 0 #fff; }
[data-theme="light"] .modern-sidebar .ftabs-scroll { border-color:rgba(61,52,84,.1);background:rgba(247,247,251,.94) !important;box-shadow:0 7px 18px rgba(53,43,80,.12),0 2px 5px rgba(53,43,80,.07),inset 0 1px 0 #fff; }
[data-theme="light"] .modern-sidebar .ftab { color:#7b7685; }[data-theme="light"] .modern-sidebar .ftab-active { color:#40365c;background:color-mix(in srgb,var(--accent) 10%,#fff); }
[data-theme="light"] .fp-chat-card,[data-theme="light"] .folder-picker-item:hover,[data-theme="light"] .folder-picker-create,[data-theme="light"] .sticker-drop-zone,[data-theme="light"] .emoji-tabs { border-color:rgba(58,49,80,.08);background:rgba(55,45,77,.035); }
[data-theme="light"] .fp-item-copy strong,[data-theme="light"] .sticker-flow-field input,[data-theme="light"] .sticker-search input { color:#2f2c38; }

@media (max-width: 768px) {
    html.has-open-chat,
    html.has-open-chat body {
        width: 100%;
        height: var(--xsm-visual-height, 100dvh);
        overflow: hidden;
        overscroll-behavior: none;
    }

    html.has-open-chat .main-area {
        position: fixed !important;
        top: var(--xsm-visual-top, 0px) !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        height: var(--xsm-visual-height, 100dvh) !important;
        min-height: 0 !important;
        overflow: hidden !important;
        transform: none !important;
    }

    html.has-open-chat #chat-view {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
    }

    html.composer-keyboard-open #chat-view .composer {
        margin-bottom: max(4px, env(safe-area-inset-bottom, 0px)) !important;
        transition: margin 140ms ease, border-color 160ms ease, box-shadow 180ms ease !important;
    }

    html.composer-focused #chat-view .messages-container {
        scroll-padding-bottom: 12px;
    }

    #chat-view .messages-list { padding-inline:10px; }
    #chat-view .message-wrapper { max-width:86%; }
    #chat-view .message-bubble { padding:8px 10px 7px;border-radius:18px 18px 18px 6px; }
    #chat-view .message-wrapper.sent .message-bubble { border-radius:18px 18px 6px 18px; }
    #chat-view .message-text { font-size:var(--msg-font-size,15px); }
    #chat-view .messages-date-divider { margin:13px auto 8px;grid-template-columns:1fr auto 1fr;gap:8px; }
    #chat-view .messages-date-divider::before,#chat-view .messages-date-divider::after { display:block; }
    #chat-view .date-indicator span,#chat-view .messages-date-divider span { min-height:24px;padding:4px 10px;font-size:.59rem; }
    #chat-view .link-preview-card.has-image { grid-template-columns:82px minmax(0,1fr); }
    #chat-view .link-preview-image img { min-height:88px; }
    #chat-view .link-preview-info { padding:9px 10px; }
    #chat-view .message-type-sticker .media-sticker { width:132px;height:132px;font-size:4.8rem; }

    .edit-bar { grid-template-columns:35px minmax(0,1fr) 32px;margin:0 2px 7px;border-radius:16px; }
    .edit-bar-icon { width:35px;height:35px;border-radius:12px; }
    .edit-bar-hint { display:none; }

    .emoji-panel { inset:auto 7px calc(74px + env(safe-area-inset-bottom));width:auto;max-height:min(70dvh,570px);transform:translateY(10px) scale(.985);border-radius:25px; }
    .emoji-panel.active { transform:none; }
    .emoji-panel-head { padding:12px 12px 8px; }
    .emoji-tabs { margin-inline:9px; }
    .emoji-panel-content { max-height:42dvh; }
    #emoji-panel-stickers { max-height:48dvh; }
    .sticker-library-head { align-items:flex-end;padding-inline:10px; }
    .sticker-search { width:150px; }
    .sticker-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .sticker-library-footer > span { display:none; }
    .sticker-library-footer { justify-content:flex-end; }

    .sticker-flow-overlay,.folder-picker-overlay { align-items:flex-end;padding:0; }
    .sticker-flow-card,.folder-picker { width:100%;max-width:none;max-height:min(88dvh,760px);border-right:0;border-bottom:0;border-left:0;border-radius:29px 29px 0 0; }
    .sticker-flow-handle,.fp-handle { width:38px;height:5px;display:block;margin:8px auto -3px;border-radius:99px;background:rgba(255,255,255,.16); }
    .sticker-flow-head,.folder-picker-head { padding:15px 15px 12px;grid-template-columns:43px minmax(0,1fr) 33px; }
    .sticker-flow-icon,.folder-picker-head .fp-title-icon { width:43px;height:43px;border-radius:15px; }
    .sticker-flow-body,.folder-picker-body { padding:14px 15px; }
    .sticker-flow-actions { padding:11px 15px calc(13px + env(safe-area-inset-bottom)); }
    .fp-chat-card { margin-inline:15px; }
    .folder-picker-list { max-height:34dvh; }

    .modern-sidebar .folder-tabs-wrap { position:relative!important;top:auto!important;z-index:1!important;min-height:0;margin:2px 2px 8px!important;padding:0 3px;border:0;background:transparent!important;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0; }
    .modern-sidebar .ftabs-scroll { min-height:39px;padding:3px;border-radius:14px;box-shadow:0 7px 18px rgba(2,4,12,.4),0 2px 5px rgba(2,4,12,.25),inset 0 1px 0 rgba(255,255,255,.05); }
    .modern-sidebar .ftab { min-height:33px;padding:0 11px;font-size:.58rem; }
    [data-theme="light"] .modern-sidebar .folder-tabs-wrap { border:0;background:transparent!important;box-shadow:none; }
    [data-theme="light"] .modern-sidebar .ftabs-scroll { background:rgba(247,247,251,.94) !important;box-shadow:0 7px 18px rgba(53,43,80,.12),0 2px 5px rgba(53,43,80,.07),inset 0 1px 0 #fff; }

    .story-backgrounds { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .story-nav {
        top:50%;width:42px;height:52px;border:1px solid rgba(255,255,255,.12);
        border-radius:15px !important;color:rgba(255,255,255,.74);
        background:rgba(6,7,13,.24) !important;
        -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
        opacity:.86;transform:translateY(-50%);
    }
    .story-nav i { display:block;font-size:.7rem; }
    .story-nav-prev { left:8px; }.story-nav-next { right:8px; }
    .story-viewers-panel { max-height:72dvh;background:rgba(13,15,25,.97); }
}

/* Interaction fixes shared by desktop and touch layouts. */
#chat-view .composer-inner-btn {
    position: relative;
    z-index: 6;
    pointer-events: auto !important;
    touch-action: manipulation;
    isolation: isolate;
}
#chat-view .composer-inner-btn > i { pointer-events:none; }

.sticker-item { position:relative;overflow:visible; }
.sticker-delete-action {
    position:absolute;top:-4px;right:-4px;z-index:5;
    width:22px;height:22px;display:grid;place-items:center;
    border:1px solid rgba(255,255,255,.15);border-radius:50%;
    color:#fff;background:rgba(220,55,78,.92);
    box-shadow:0 5px 14px rgba(83,10,24,.34);
    opacity:0;transform:scale(.72);pointer-events:none;
    transition:opacity 140ms ease,transform 180ms cubic-bezier(.16,1,.3,1);
}
.sticker-item:hover .sticker-delete-action,
.sticker-item:focus-visible .sticker-delete-action { opacity:1;transform:scale(1);pointer-events:auto; }
.media-thumb-unavailable {
    display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    min-height:96px;color:var(--text-muted);background:rgba(255,255,255,.035);
    border:1px dashed rgba(255,255,255,.09);border-radius:14px;font-size:.62rem;
}

@media (hover:none), (max-width:768px) {
    .sticker-delete-action { opacity:1;transform:scale(.9);pointer-events:auto; }
}

@media (min-width:769px) {
    .modern-sidebar .sys-suggest-banner { position:relative!important;top:auto!important;z-index:2!important; }
}

@media (max-width: 390px) {
    .emoji-panel { inset-inline:5px; }
    .emoji-panel-brand small { display:none; }
    .emoji-tab { gap:5px; }.emoji-tab span { font-size:.61rem; }
    .sticker-search { width:132px; }
    .sticker-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .story-nav { width:38px;height:48px; }
}

@media (prefers-reduced-motion: reduce) {
    .edit-bar,.link-preview-card,.sticker-item,.sticker-flow-card,.folder-picker { transition:none !important; }
}

/* ── XSSM 3.2 conversation finish layer ─────────────────── */
#chat-view .message-wrapper {
    --bubble-line: rgba(255,255,255,.075);
    margin-block: 2px;
}

#chat-view .message-bubble {
    overflow: visible;
    min-width: 42px;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 180ms ease;
}

@media (hover:hover) {
    #chat-view .message-wrapper:hover .message-bubble {
        border-color: color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,.105));
        box-shadow: 0 11px 30px rgba(3,5,12,.17), inset 0 1px 0 rgba(255,255,255,.075);
    }
    #chat-view .message-wrapper.sent:hover .message-bubble {
        border-color: color-mix(in srgb, var(--accent) 34%, rgba(255,255,255,.1));
    }
}

#chat-view .message-bubble.has-caption {
    min-width: min(280px, 64vw);
    overflow: hidden;
    padding: 4px 4px 5px;
    border-radius: 22px 22px 22px 8px;
}

#chat-view .message-wrapper.sent .message-bubble.has-caption {
    border-radius: 22px 22px 8px 22px;
}

#chat-view .message-bubble.has-caption > .media-wrap,
#chat-view .message-bubble.has-caption > .media-video-wrap {
    overflow: hidden;
    border-radius: 18px 18px 11px 11px;
}

#chat-view .message-bubble.has-caption .media-image,
#chat-view .message-bubble.has-caption .media-video {
    width: 100%;
    display: block;
}

#chat-view .media-caption {
    position: relative;
    padding: 11px 10px 7px;
}

#chat-view .media-caption::before {
    content: "";
    position: absolute;
    top: 4px;
    right: 9px;
    left: 9px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.075), transparent);
}

#chat-view .media-caption .message-text { font-size:calc(var(--msg-font-size,15px) * .96); line-height:1.42; }
#chat-view .media-caption-locked { display:flex;align-items:center;gap:7px;color:rgba(211,206,220,.48);font-size:.63rem; }
#chat-view .message-bubble.has-caption > .link-preview-card { width:calc(100% - 12px);margin:5px 6px 3px;border-radius:15px; }
#chat-view .message-expire-icon { margin-right:4px;color:var(--text-muted);font-size:.61rem; }

/* Official channel reads as a first-class conversation, not an advertisement. */
.official-channel-item {
    border-color: color-mix(in srgb, var(--accent) 14%, transparent) !important;
    background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 56%) !important;
}
.official-channel-item.active { background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 17%,transparent),rgba(255,255,255,.018)) !important; }

.channel-context-menu { width: min(286px, calc(100vw - 18px)); padding: 7px !important; }
.channel-context-head { display:flex;align-items:center;gap:10px;padding:8px 9px 10px; }
.channel-context-head > span:last-child { min-width:0;display:flex;flex-direction:column; }
.channel-context-head strong,.channel-context-head small { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.channel-context-head strong { color:var(--text-primary);font-size:.75rem; }
.channel-context-head small { margin-top:2px;color:var(--text-muted);font-size:.59rem; }
.channel-context-avatar { width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border-subtle));border-radius:11px;color:var(--accent-light);background:color-mix(in srgb,var(--accent) 11%,transparent); }
[data-theme="light"] .channel-context-menu { color:#2e2a36;background:linear-gradient(150deg,rgba(255,255,255,.98),rgba(244,243,249,.98)) !important; }

.chat-muted-mark {
    width:19px;
    height:19px;
    display:grid;
    place-items:center;
    flex:0 0 19px;
    border:1px solid color-mix(in srgb,var(--text-muted) 14%,transparent);
    border-radius:7px;
    color:color-mix(in srgb,var(--text-muted) 78%,transparent);
    background:color-mix(in srgb,var(--text-muted) 7%,transparent);
    font-size:.48rem;
    transition:color 150ms ease,border-color 150ms ease,background-color 150ms ease;
}
.chat-item.muted:hover .chat-muted-mark,.chat-item.muted.active .chat-muted-mark { color:var(--text-secondary);border-color:color-mix(in srgb,var(--accent) 18%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent); }
.chat-item.muted .unread-badge { color:var(--text-secondary);background:color-mix(in srgb,var(--text-muted) 18%,transparent);box-shadow:none; }
[data-theme="light"] .chat-muted-mark { color:#777281;border-color:rgba(62,55,78,.1);background:rgba(62,55,78,.045); }
[data-theme="light"] .chat-item.muted .unread-badge { color:#625c6b;background:rgba(72,65,87,.1); }
.official-channel-avatar {
    position:relative;
    color:#fff !important;
    background:linear-gradient(145deg,#9279e8,#5146a0);
    box-shadow:0 9px 24px rgba(68,49,147,.28),inset 0 1px 0 rgba(255,255,255,.2) !important;
    font-weight:830 !important;
}
.official-channel-check { width:15px;height:15px;display:inline-grid;place-items:center;margin-left:5px;border-radius:50%;color:#fff;background:linear-gradient(145deg,#9079e8,#6351bd);vertical-align:1px;font-size:.42rem;box-shadow:0 3px 8px rgba(91,69,178,.25); }
.official-channel-label { padding:4px 6px;border:1px solid color-mix(in srgb,var(--accent) 17%,transparent);border-radius:7px;color:color-mix(in srgb,var(--accent) 62%,#ddd5f0);background:color-mix(in srgb,var(--accent) 8%,transparent);font-size:.46rem;font-weight:760;letter-spacing:.035em;text-transform:uppercase; }
.official-channel-name { display:inline-flex;align-items:center;gap:6px; }
.channel-official-status { display:inline-flex;align-items:center;gap:5px;color:color-mix(in srgb,var(--accent) 60%,var(--text-muted));font-size:.61rem; }
.channel-official-status i { font-size:.58rem; }

/* Context menu remains fully visible even for the bottom-most message. */
.ctx-menu-msg {
    position: fixed !important;
    width: min(286px, calc(100vw - 18px)) !important;
    max-height: calc(100dvh - 18px);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 8px !important;
    border-radius: 22px !important;
    background: linear-gradient(150deg,rgba(24,27,44,.96),rgba(11,13,24,.97)) !important;
    box-shadow:0 28px 78px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.13) !important;
}
.ctx-menu-msg[data-placement="top"] { transform-origin: bottom center; }
.ctx-menu-msg .ctx-msg-head { margin:1px 2px 6px;padding:9px 10px;border:1px solid rgba(255,255,255,.055);border-radius:14px;background:rgba(255,255,255,.028); }
.ctx-menu-msg .context-menu-item { min-height:43px;padding:6px 8px !important;border-radius:13px !important;font-size:.68rem; }
.ctx-menu-msg .context-menu-item i { width:29px !important;height:29px !important;border-radius:9px !important; }
.ctx-menu-msg .ctx-reactions-wrap { padding:3px 2px; }
.ctx-menu-msg .ctx-reactions-row { gap:3px;justify-content:space-between; }
.ctx-menu-msg .ctx-reaction-btn { width:32px;height:32px;border-radius:10px; }

/* Portaled chat menu — desktop popover, mobile action sheet. */
.chat-dropdown-scrim {
    position:fixed;
    z-index:9998;
    inset:0;
    display:block;
    border:0;
    background:rgba(4,5,12,.12);
    opacity:0;
    pointer-events:none;
    -webkit-backdrop-filter:blur(0);
    backdrop-filter:blur(0);
    transition:opacity 180ms ease,backdrop-filter 220ms ease,-webkit-backdrop-filter 220ms ease;
}
.chat-dropdown-scrim.open { opacity:1;pointer-events:auto; }
body > .chat-dropdown {
    position:fixed !important;
    z-index:9999 !important;
    width:300px !important;
    min-width:300px !important;
    max-height:min(610px,calc(100dvh - 24px));
    overflow-y:auto;
    padding:8px !important;
    border-radius:22px !important;
    background:linear-gradient(150deg,rgba(25,28,47,.965),rgba(10,12,23,.97)) !important;
    box-shadow:0 30px 86px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.14) !important;
}
body > .chat-dropdown[aria-hidden="true"] { display:none !important; }
body > .chat-dropdown.open { display:flex !important; }
body > .chat-dropdown .chat-dropdown-item { min-height:47px;padding:7px 9px !important;border-radius:14px !important;color:rgba(236,232,243,.78);font-size:.69rem;font-weight:610; }
body > .chat-dropdown .chat-dropdown-item[hidden] { display:none !important; }
body > .chat-dropdown .chat-dropdown-item:hover { transform:none !important;background:rgba(255,255,255,.065) !important; }
body > .chat-dropdown .chat-dropdown-divider { margin:5px 8px !important; }

[data-theme="light"] #chat-view .message-bubble.has-caption { box-shadow:0 9px 25px rgba(53,43,80,.08),inset 0 1px 0 #fff; }
[data-theme="light"] #chat-view .media-caption::before { background:linear-gradient(90deg,transparent,rgba(61,51,82,.09),transparent); }
[data-theme="light"] .official-channel-item { border-color:rgba(78,62,130,.07) !important;background:linear-gradient(110deg,rgba(132,103,220,.055),transparent 56%) !important; }
[data-theme="light"] .ctx-menu-msg,[data-theme="light"] body > .chat-dropdown { border-color:rgba(59,48,84,.09) !important;color:#2e2a36;background:linear-gradient(150deg,rgba(255,255,255,.98),rgba(244,243,249,.98)) !important;box-shadow:0 26px 72px rgba(48,38,74,.2),inset 0 1px 0 #fff !important; }
[data-theme="light"] .ctx-menu-msg .ctx-msg-head { border-color:rgba(60,49,84,.07);background:rgba(55,44,79,.03); }
[data-theme="light"] body > .chat-dropdown .chat-dropdown-item { color:#484250; }

@media (max-width:560px) {
    .chat-dropdown-scrim.open { background:rgba(3,4,10,.48);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); }
    body > .chat-dropdown {
        top:auto !important;
        right:8px !important;
        bottom:calc(8px + env(safe-area-inset-bottom)) !important;
        left:8px !important;
        width:auto !important;
        min-width:0 !important;
        max-height:min(76dvh,620px);
        border-radius:27px !important;
        transform-origin:bottom center !important;
    }
    body > .chat-dropdown::before { display:none !important; }
    body > .chat-dropdown .chat-dropdown-item { min-height:50px;padding:8px 10px !important;font-size:.72rem; }
    body > .chat-dropdown .chat-dropdown-item i { width:32px !important;height:32px !important;border-radius:11px !important; }
    .ctx-menu-msg { width:min(282px,calc(100vw - 14px)) !important;border-radius:20px !important; }
    #chat-view .message-bubble.has-caption { min-width:min(250px,78vw); }
}

/* ── Realtime motion and low-jank updates ─────────────────────────────── */
.connection-status {
    display:flex !important;
    align-items:center;
    gap:7px;
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,14px) scale(.98);
    transition:opacity 180ms ease,transform 240ms cubic-bezier(.22,1,.36,1),border-color 180ms ease,background-color 180ms ease !important;
}
.connection-status.is-visible {
    opacity:1;
    transform:translate(-50%,0) scale(1);
}

.chat-item {
    transition:background-color 160ms ease,border-color 160ms ease,box-shadow 200ms ease,opacity 160ms ease,transform 180ms cubic-bezier(.22,1,.36,1) !important;
}
.chat-item.is-reordering {
    z-index:2;
    pointer-events:none;
    will-change:transform;
}
.chat-avatar,
.chat-avatar::after,
.up-online,
#partner-avatar {
    transition:background-color 180ms ease,border-color 180ms ease,box-shadow 220ms ease,transform 220ms cubic-bezier(.22,1,.36,1) !important;
}
.chat-avatar.online::after,
.up-online.online {
    animation:xssmPresenceIn 260ms cubic-bezier(.22,1,.36,1);
}

#chat-view .message-wrapper.new-message {
    animation:xssmMessageArrive 220ms cubic-bezier(.22,1,.36,1) both;
    transform-origin:left bottom;
}
#chat-view .message-wrapper.sent.new-message { transform-origin:right bottom; }
.unread-badge { transition:transform 180ms cubic-bezier(.22,1,.36,1),opacity 160ms ease !important; }
.typing-status { animation:xssmTypingFade 180ms ease both; }

/* Group conversations: clear authorship and calmer message rhythm. */
#chat-view .messages-container[data-conversation-kind="group"] .messages-list {
    width: min(100%, 1020px);
    padding-block: 18px 22px;
}

#chat-view .messages-container[data-conversation-kind="group"] .message-wrapper.received {
    max-width: min(74%, 720px);
}

#chat-view .messages-container[data-conversation-kind="group"] .message-wrapper.group-conversation-message {
    margin-block: 2px;
}

#chat-view .messages-container[data-conversation-kind="group"] .message-wrapper.group-conversation-message:not(.grouped) {
    margin-top: 13px;
}

#chat-view .messages-container[data-conversation-kind="group"] .group-conversation-message .message-bubble-wrapper {
    position: relative;
    padding-left: 42px;
}

#chat-view .messages-container[data-conversation-kind="group"] .group-conversation-message.grouped .message-bubble-wrapper::before {
    display:none;
}

#chat-view .messages-container[data-conversation-kind="group"] .group-conversation-message .message-sender-name {
    width:max-content;
    max-width:100%;
    min-height:0;
    display:flex;
    align-items:center;
    gap:6px;
    margin:0 0 5px;
    padding:0 2px 1px 0;
    border: 0;
    color: hsl(var(--group-sender-hue), 72%, 72%);
    background: transparent;
    font: inherit;
    font-size:.7rem;
    font-weight:780;
    line-height:1.1;
    letter-spacing:.005em;
    text-align: left;
    cursor: pointer;
    text-shadow:none;
    transition:color 150ms ease,opacity 150ms ease;
}

#chat-view .messages-container[data-conversation-kind="group"] .group-conversation-message .message-sender-name::after {
    content:"";
    width:17px;
    height:2px;
    flex:0 0 17px;
    border-radius:2px;
    background:linear-gradient(90deg,hsla(var(--group-sender-hue),72%,68%,.8),hsla(var(--group-sender-hue),72%,68%,0));
}
#chat-view .messages-container[data-conversation-kind="group"] .group-conversation-message .message-sender-name:hover { color:hsl(var(--group-sender-hue),82%,82%); }

#chat-view .messages-container[data-conversation-kind="group"] .message-sender-avatar-button {
    position:absolute;
    z-index:3;
    left:-42px;
    top:0;
    width:33px;
    height:33px;
    display:grid;
    place-items:center;
    padding:0;
    border:0;
    border-radius:12px;
    color:#fff;
    background:transparent;
    cursor:pointer;
    transition:transform 170ms cubic-bezier(.22,1,.36,1),filter 170ms ease;
}
#chat-view .messages-container[data-conversation-kind="group"] .message-sender-avatar-button::after {
    content:"";
    position:absolute;
    right:-1px;
    bottom:-1px;
    width:7px;
    height:7px;
    border:2px solid var(--bg-primary,#10111a);
    border-radius:4px;
    background:hsl(var(--group-sender-hue),72%,64%);
}
#chat-view .messages-container[data-conversation-kind="group"] .message-sender-avatar-button:hover { transform:translateY(-1px) scale(1.045);filter:brightness(1.08); }
#chat-view .messages-container[data-conversation-kind="group"] .message-sender-avatar,
#chat-view .messages-container[data-conversation-kind="group"] .message-sender-avatar-text { width:33px;height:33px;display:grid;place-items:center;border:1px solid hsla(var(--group-sender-hue),70%,72%,.3);border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 7px 18px rgba(3,5,12,.24);object-fit:cover; }
#chat-view .messages-container[data-conversation-kind="group"] .message-sender-avatar-text { color:#fff;background:linear-gradient(145deg,hsla(var(--group-sender-hue),62%,54%,.96),hsla(var(--group-sender-hue),54%,32%,.96));font-size:.66rem;font-weight:780; }
#chat-view .messages-container[data-conversation-kind="group"] .group-conversation-message .message-bubble { position:relative;overflow:visible;border-left-color:hsla(var(--group-sender-hue),65%,65%,.22);background:linear-gradient(145deg,rgba(28,29,43,.92),rgba(20,21,33,.9));box-shadow:0 7px 22px rgba(3,5,12,.12),inset 0 1px 0 rgba(255,255,255,.055); }
#chat-view .messages-container[data-conversation-kind="group"] .group-conversation-message.grouped .message-bubble { border-top-left-radius:9px; }
#chat-view .messages-container[data-conversation-kind="group"] .group-conversation-message.group-last .message-bubble { border-bottom-left-radius:20px; }
#chat-view .messages-container[data-conversation-kind="group"] .group-conversation-message .message-bubble.has-group-sender.media-only { overflow:visible !important; }
#chat-view .messages-container[data-conversation-kind="group"] .group-conversation-message .message-bubble.has-group-sender.media-only > .message-sender-name {
    position:absolute;
    z-index:4;
    top:8px;
    left:8px;
    max-width:calc(100% - 16px);
    margin:0;
    padding:5px 8px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:9px;
    color:#fff;
    background:rgba(12,13,21,.68);
    box-shadow:0 4px 14px rgba(0,0,0,.18);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
}
#chat-view .messages-container[data-conversation-kind="group"] .group-conversation-message .message-bubble.has-group-sender.media-only > .message-sender-name::after { display:none; }
#chat-view .messages-container[data-conversation-kind="group"] .group-conversation-empty small { color:var(--accent-light);font-size:.61rem;font-weight:760;letter-spacing:.08em;text-transform:uppercase; }

[data-theme="light"] #chat-view .messages-container[data-conversation-kind="group"] .group-conversation-message .message-bubble {
    border-color:rgba(58,49,82,.09);
    border-left-color:hsla(var(--group-sender-hue),48%,45%,.22);
    background:rgba(250,249,252,.9);
    box-shadow:0 7px 20px rgba(55,45,83,.065),inset 0 1px 0 #fff;
}

[data-theme="light"] #chat-view .messages-container[data-conversation-kind="group"] .group-conversation-message .message-sender-name {
    color:hsl(var(--group-sender-hue),48%,38%);
}
[data-theme="light"] #chat-view .messages-container[data-conversation-kind="group"] .message-sender-avatar-button::after { border-color:#eff0f4; }

/* Forwarded source is a compact, fully clickable identity card. */
#chat-view .message-forwarded-label {
    width:max-content;
    max-width:min(100%,320px);
    min-height:34px;
    display:grid;
    grid-template-columns:26px minmax(0,1fr);
    align-items:center;
    gap:8px;
    margin:0 4px 5px;
    padding:3px 8px 3px 4px;
    border:1px solid color-mix(in srgb,var(--accent) 16%,var(--border-subtle));
    border-radius:11px;
    color:var(--text-primary);
    background:color-mix(in srgb,var(--accent) 7%,rgba(18,19,30,.78));
    font:inherit;
    text-align:left;
    cursor:pointer;
    transition:transform 160ms ease,border-color 160ms ease,background-color 160ms ease;
}
#chat-view .message-wrapper.sent .message-forwarded-label { margin-left:auto;color:rgba(255,255,255,.9);background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.1); }
#chat-view .message-forwarded-label:hover { transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 35%,var(--border-subtle));background:color-mix(in srgb,var(--accent) 12%,rgba(18,19,30,.84)); }
#chat-view .message-forwarded-label .forward-icon { width:26px;height:26px;display:grid;place-items:center;border-radius:8px;color:var(--accent-light);background:color-mix(in srgb,var(--accent) 14%,transparent);font-size:.59rem; }
#chat-view .message-forwarded-label > span:last-child { min-width:0;display:flex;flex-direction:column; }
#chat-view .message-forwarded-label small,#chat-view .message-forwarded-label strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
#chat-view .message-forwarded-label small { color:var(--text-muted);font-size:.49rem;font-weight:650;letter-spacing:.03em; }
#chat-view .message-forwarded-label .forward-name { color:inherit;font-size:.63rem;font-weight:760;text-decoration:none; }
[data-theme="light"] #chat-view .message-forwarded-label { color:#3f3850;background:rgba(246,244,250,.94);border-color:rgba(74,58,111,.12);box-shadow:0 5px 14px rgba(60,46,91,.055); }

/* Forwarding workspace: preview, search, multi-select and visible progress. */
.forward-overlay { z-index:430 !important;padding:18px !important; }
.forward-dialog {
    width:min(540px,calc(100vw - 28px));
    max-height:min(760px,calc(100dvh - 36px));
    display:grid;
    grid-template-rows:auto auto auto minmax(140px,1fr) auto auto;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.075);
    border-radius:25px;
    color:var(--text-primary);
    background:linear-gradient(155deg,rgba(29,30,45,.98),rgba(15,16,27,.99));
    box-shadow:0 32px 90px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.055);
    animation:forwardDialogIn 230ms cubic-bezier(.22,1,.36,1) both;
}
.forward-dialog-header { display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:19px 20px 12px; }
.forward-dialog-kicker { display:block;margin-bottom:3px;color:var(--accent-light);font-size:.54rem;font-weight:780;letter-spacing:.13em;text-transform:uppercase; }
.forward-dialog-header h3 { margin:0;color:var(--text-primary);font-size:1.06rem;line-height:1.25; }
.forward-close { width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border:1px solid var(--border-subtle);border-radius:11px;color:var(--text-muted);background:rgba(255,255,255,.035);cursor:pointer;transition:color 150ms ease,background-color 150ms ease,transform 150ms ease; }
.forward-close:hover { color:var(--text-primary);background:rgba(255,255,255,.07);transform:rotate(3deg); }
.forward-preview { min-height:48px;display:flex;align-items:center;gap:6px;overflow-x:auto;margin:0 20px 12px;padding:8px;border:1px solid color-mix(in srgb,var(--accent) 13%,var(--border-subtle));border-radius:14px;background:color-mix(in srgb,var(--accent) 5%,rgba(255,255,255,.018));scrollbar-width:none; }
.forward-preview::-webkit-scrollbar { display:none; }
.forward-preview-item { min-width:0;max-width:230px;display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:10px;color:var(--text-secondary);background:rgba(255,255,255,.035);font-size:.62rem;white-space:nowrap; }
.forward-preview-item i { color:var(--accent-light);font-size:.58rem; }
.forward-preview-item span { overflow:hidden;text-overflow:ellipsis; }
.forward-preview-more { min-width:29px;height:29px;display:grid;place-items:center;border-radius:9px;color:var(--accent-light);background:color-mix(in srgb,var(--accent) 14%,transparent);font-size:.58rem;font-weight:780; }
.forward-search { height:42px;display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:8px;margin:0 20px 10px;padding:0 12px;border:1px solid var(--border-subtle);border-radius:13px;color:var(--text-muted);background:rgba(8,9,17,.34);transition:border-color 160ms ease,box-shadow 160ms ease; }
.forward-search:focus-within { border-color:color-mix(in srgb,var(--accent) 42%,var(--border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent); }
.forward-search input { width:100%;border:0;outline:0;color:var(--text-primary);background:transparent;font:inherit;font-size:.69rem; }
.forward-search input::placeholder { color:var(--text-muted); }
.forward-targets { min-height:0;overflow-y:auto;padding:0 12px 10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent; }
.forward-target { width:100%;min-height:54px;display:grid;grid-template-columns:38px minmax(0,1fr) 26px;align-items:center;gap:10px;margin:2px 0;padding:7px 9px;border:1px solid transparent;border-radius:14px;color:var(--text-primary);background:transparent;font:inherit;text-align:left;cursor:pointer;transition:background-color 150ms ease,border-color 150ms ease,transform 160ms ease; }
.forward-target:hover:not(:disabled) { background:rgba(255,255,255,.035);transform:translateX(2px); }
.forward-target.selected { border-color:color-mix(in srgb,var(--accent) 28%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent); }
.forward-target:disabled { opacity:.46;cursor:not-allowed; }
.forward-target-avatar { width:38px;height:38px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:13px;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 82%,#26354e),color-mix(in srgb,var(--accent) 48%,#131725));font-size:.74rem;font-weight:780; }
.forward-target-avatar.channel { border-radius:12px;color:var(--accent-light);background:color-mix(in srgb,var(--accent) 11%,rgba(255,255,255,.025)); }
.forward-target-avatar img { width:100%;height:100%;object-fit:cover; }
.forward-target-copy { min-width:0;display:flex;flex-direction:column;gap:2px; }
.forward-target-copy strong,.forward-target-copy small { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.forward-target-copy strong { font-size:.69rem;font-weight:720; }
.forward-target-copy small { color:var(--text-muted);font-size:.55rem; }
.forward-target-check { width:23px;height:23px;display:grid;place-items:center;border:1px solid var(--border-subtle);border-radius:8px;color:transparent;background:rgba(255,255,255,.02);font-size:.51rem;transition:all 150ms ease; }
.forward-target.selected .forward-target-check { border-color:transparent;color:#fff;background:var(--accent);box-shadow:0 5px 15px color-mix(in srgb,var(--accent) 24%,transparent); }
.forward-target:disabled .forward-target-check { color:var(--text-muted); }
.forward-empty { min-height:150px;place-self:stretch;display:grid;place-content:center;justify-items:center;gap:6px;padding:20px;color:var(--text-muted);text-align:center; }
.forward-empty[hidden] { display:none; }
.forward-empty i { margin-bottom:4px;color:var(--accent-light);font-size:1.2rem; }
.forward-empty strong { color:var(--text-secondary);font-size:.7rem; }
.forward-empty span { font-size:.58rem; }
.forward-progress { padding:0 20px 10px; }
.forward-progress[hidden] { display:none; }
.forward-progress span { display:block;margin-bottom:6px;color:var(--text-muted);font-size:.55rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.forward-progress div { height:4px;overflow:hidden;border-radius:4px;background:rgba(255,255,255,.06); }
.forward-progress i { display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--blue,#4b8dff));transition:width 180ms ease; }
.forward-dialog-footer { min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px 14px;border-top:1px solid var(--border-subtle);background:rgba(8,9,16,.22); }
.forward-selection-hint { color:var(--text-muted);font-size:.58rem; }
.forward-send { min-width:136px;height:40px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 15px;border:0;border-radius:13px;color:#fff;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 64%,#2e92dc));box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 22%,transparent);font:inherit;font-size:.64rem;font-weight:740;cursor:pointer;transition:transform 160ms ease,opacity 160ms ease; }
.forward-send:hover:not(:disabled) { transform:translateY(-1px); }
.forward-send:disabled { opacity:.38;box-shadow:none;cursor:not-allowed; }

[data-theme="light"] .forward-dialog { color:#312d3b;border-color:rgba(58,49,82,.12);background:linear-gradient(155deg,rgba(252,251,253,.99),rgba(241,240,246,.99));box-shadow:0 28px 75px rgba(53,44,77,.2),inset 0 1px 0 #fff; }
[data-theme="light"] .forward-preview { background:rgba(117,91,181,.045); }
[data-theme="light"] .forward-preview-item,[data-theme="light"] .forward-target:hover:not(:disabled),[data-theme="light"] .forward-close { background:rgba(55,44,78,.045); }
[data-theme="light"] .forward-search { background:rgba(255,255,255,.72); }
[data-theme="light"] .forward-target.selected { background:rgba(109,76,190,.085); }
[data-theme="light"] .forward-target-avatar { border-color:rgba(55,44,78,.1); }
[data-theme="light"] .forward-dialog-footer { background:rgba(226,224,234,.42); }

@keyframes forwardDialogIn { from { opacity:0;transform:translateY(12px) scale(.975); } to { opacity:1;transform:translateY(0) scale(1); } }

@media (max-width: 768px) {
    #chat-view .messages-container[data-conversation-kind="group"] .messages-list { padding-inline:9px;padding-block:12px 18px; }
    #chat-view .messages-container[data-conversation-kind="group"] .message-wrapper.received { max-width:91%; }
    #chat-view .messages-container[data-conversation-kind="group"] .group-conversation-message .message-bubble-wrapper { padding-left:38px; }
    #chat-view .messages-container[data-conversation-kind="group"] .message-sender-avatar-button { left:-38px;width:30px;height:30px;border-radius:11px; }
    #chat-view .messages-container[data-conversation-kind="group"] .message-sender-avatar,
    #chat-view .messages-container[data-conversation-kind="group"] .message-sender-avatar-text { width:30px;height:30px;border-radius:11px; }
    #chat-view .messages-container[data-conversation-kind="group"] .group-conversation-message .message-sender-name { font-size:.68rem; }
    .forward-overlay { padding:0 !important;align-items:flex-end !important; }
    .forward-dialog { width:100%;max-height:min(88dvh,760px);border-width:1px 0 0;border-radius:24px 24px 0 0;grid-template-rows:auto auto auto minmax(120px,1fr) auto auto; }
    .forward-dialog-header { padding:17px 16px 10px; }
    .forward-preview,.forward-search { margin-inline:16px; }
    .forward-targets { padding-inline:8px; }
    .forward-dialog-footer { padding:10px 16px calc(12px + env(safe-area-inset-bottom)); }
    .forward-selection-hint { max-width:110px; }
}

@keyframes xssmMessageArrive {
    from { opacity:0;transform:translate3d(0,8px,0) scale(.985); }
    to { opacity:1;transform:translate3d(0,0,0) scale(1); }
}
@keyframes xssmPresenceIn {
    0% { transform:scale(.72); }
    70% { transform:scale(1.08); }
    100% { transform:scale(1); }
}
@keyframes xssmTypingFade {
    from { opacity:0;transform:translate3d(0,3px,0); }
    to { opacity:1;transform:translate3d(0,0,0); }
}

/* Cursor history loading stays above the timeline without changing its height. */
.message-history-loader {
    position:sticky;
    top:38px;
    z-index:14;
    width:max-content;
    max-width:calc(100% - 24px);
    height:30px;
    margin:0 auto -30px;
    padding:0 12px;
    display:flex;
    align-items:center;
    gap:7px;
    border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border-subtle));
    border-radius:999px;
    color:var(--text-secondary);
    background:color-mix(in srgb,var(--bg-elevated,#171925) 88%,transparent);
    box-shadow:0 8px 26px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    font-size:.57rem;
    font-weight:650;
    pointer-events:none;
}
.message-history-loader[hidden] { display:none; }
.message-history-spinner {
    width:11px;
    height:11px;
    flex:0 0 auto;
    border:2px solid color-mix(in srgb,var(--accent) 24%,transparent);
    border-top-color:var(--accent-light);
    border-radius:50%;
    animation:xssmHistorySpin .72s linear infinite;
}

/* Once several pages are open, the browser can skip layout and paint work for
   rows that are far outside the viewport while retaining their measured size. */
.messages-container.is-long-history .message-wrapper {
    content-visibility:auto;
    contain-intrinsic-size:auto 72px;
}

[data-theme="light"] .message-history-loader {
    border-color:rgba(92,72,145,.14);
    color:#655f70;
    background:rgba(248,247,251,.9);
    box-shadow:0 8px 24px rgba(58,48,82,.12),inset 0 1px 0 #fff;
}

@keyframes xssmHistorySpin { to { transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce) {
    .connection-status,
    .chat-item,
    .chat-avatar,
    .chat-avatar::after,
    .up-online,
    #partner-avatar,
    #chat-view .message-wrapper.new-message,
    .typing-status {
        animation:none !important;
        transition:none !important;
    }
    .message-history-spinner { animation:none !important; }
}

/* Saved messages are a private archive, not a simulated one-person chat. */
#chat-view.saved-mode .chat-header {
    border-bottom-color:color-mix(in srgb,#f6c453 18%,var(--border-subtle));
    background:
        radial-gradient(circle at 18% -40%,rgba(246,196,83,.12),transparent 38%),
        color-mix(in srgb,var(--bg-elevated,#171925) 92%,transparent);
}
#chat-view.saved-mode #chat-partner { pointer-events:none;cursor:default; }
#chat-view.saved-mode #partner-avatar.saved-avatar {
    color:#231a05;
    border-color:rgba(255,225,143,.52);
    background:linear-gradient(145deg,#ffe79b,#e8a92f);
    box-shadow:0 8px 25px rgba(226,164,40,.24),inset 0 1px 0 rgba(255,255,255,.72);
}
#chat-view.saved-mode #partner-name { letter-spacing:-.025em; }
#chat-view.saved-mode #partner-status { color:color-mix(in srgb,#f4ca6b 72%,var(--text-muted)); }
#chat-view.saved-mode .composer {
    background:linear-gradient(180deg,transparent,color-mix(in srgb,#d9a633 4%,var(--bg-primary)) 35%);
}
#chat-view.saved-mode .composer .input-wrapper:focus-within {
    border-color:rgba(239,185,64,.38);
    box-shadow:0 0 0 3px rgba(239,185,64,.08),0 13px 36px rgba(3,5,12,.2);
}

#chat-view .messages-container[data-conversation-kind="saved"] {
    background:
        radial-gradient(circle at 82% 8%,rgba(242,188,59,.085),transparent 31%),
        radial-gradient(circle at 12% 78%,rgba(123,97,255,.065),transparent 34%),
        var(--chat-wallpaper,transparent);
}
#chat-view .messages-container[data-conversation-kind="saved"] .messages-list {
    width:min(100%,920px);
    padding-block:18px 26px;
}
.saved-collection-intro {
    width:min(100% - 24px,650px);
    min-height:72px;
    margin:2px auto 20px;
    padding:13px 15px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
    border:1px solid rgba(241,190,69,.18);
    border-radius:20px;
    color:var(--text-primary);
    background:linear-gradient(135deg,rgba(241,190,69,.095),rgba(124,93,225,.055)),color-mix(in srgb,var(--bg-elevated,#171925) 84%,transparent);
    box-shadow:0 16px 42px rgba(3,5,12,.14),inset 0 1px 0 rgba(255,255,255,.055);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}
.saved-intro-icon,.saved-intro-lock {
    display:grid;
    place-items:center;
    flex:0 0 auto;
}
.saved-intro-icon {
    width:42px;
    height:42px;
    border:1px solid rgba(255,229,160,.42);
    border-radius:15px;
    color:#2c2107;
    background:linear-gradient(145deg,#ffe9a4,#e4a62e);
    box-shadow:0 8px 20px rgba(218,158,40,.2),inset 0 1px 0 rgba(255,255,255,.72);
}
.saved-collection-intro > div { min-width:0;display:grid;gap:2px; }
.saved-collection-intro small { color:#e8bc5d;font-size:.58rem;font-weight:780;letter-spacing:.1em;text-transform:uppercase; }
.saved-collection-intro strong { font-size:.88rem;font-weight:760;letter-spacing:-.015em; }
.saved-collection-intro div > span { color:var(--text-muted);font-size:.66rem;line-height:1.35; }
.saved-intro-lock { width:30px;height:30px;border-radius:11px;color:#d7ad53;background:rgba(239,190,73,.085);font-size:.7rem; }

#chat-view .messages-container[data-conversation-kind="saved"] .message-wrapper.saved-message {
    width:auto;
    max-width:min(78%,690px);
    margin-block:5px;
}
#chat-view .messages-container[data-conversation-kind="saved"] .saved-message .message-bubble-wrapper {
    min-width:138px;
}
#chat-view .messages-container[data-conversation-kind="saved"] .saved-message .message-bubble {
    border-color:rgba(238,190,75,.15);
    background:linear-gradient(145deg,rgba(53,45,25,.76),rgba(29,27,27,.92));
    box-shadow:0 9px 26px rgba(3,5,12,.16),inset 0 1px 0 rgba(255,235,179,.055);
}
#chat-view .messages-container[data-conversation-kind="saved"] .saved-message .message-bubble-wrapper::before {
    border-top-color:rgba(238,190,75,.13);
    border-right-color:rgba(238,190,75,.13);
    background:rgba(44,38,24,.94);
}
.saved-message-source {
    width:max-content;
    max-width:100%;
    margin:0 7px 4px auto;
    padding:3px 8px;
    display:flex;
    align-items:center;
    gap:5px;
    border:1px solid rgba(238,190,75,.12);
    border-radius:999px;
    color:#d8b35f;
    background:rgba(224,170,49,.07);
    font-size:.56rem;
    font-weight:690;
    line-height:1.25;
}
.saved-message-source i { font-size:.52rem;opacity:.85; }
#chat-view .messages-container[data-conversation-kind="saved"] .saved-message .message-meta { color:color-mix(in srgb,#dbb55e 42%,var(--text-muted)); }

.saved-state-card {
    position:relative;
    isolation:isolate;
    width:min(calc(100% - 28px),480px);
    min-height:310px;
    margin:auto;
    padding:42px 34px 32px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    overflow:hidden;
    border:1px solid rgba(239,191,75,.17);
    border-radius:30px;
    color:var(--text-primary);
    text-align:center;
    background:
        radial-gradient(circle at 50% 0,rgba(241,190,67,.13),transparent 42%),
        color-mix(in srgb,var(--bg-elevated,#171925) 88%,transparent);
    box-shadow:0 26px 72px rgba(3,5,12,.2),inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}
.saved-state-card::before {
    content:"";
    position:absolute;
    z-index:-1;
    width:190px;
    height:190px;
    top:-105px;
    border:1px solid rgba(242,195,81,.12);
    border-radius:50%;
    box-shadow:0 0 0 28px rgba(242,195,81,.035),0 0 0 58px rgba(242,195,81,.018);
}
.saved-state-orbit {
    width:70px;
    height:70px;
    margin-bottom:9px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,226,151,.48);
    border-radius:24px;
    color:#2b210a;
    background:linear-gradient(145deg,#ffeaa5,#dea02a);
    box-shadow:0 14px 34px rgba(213,154,35,.25),inset 0 1px 0 rgba(255,255,255,.78);
    font-size:1.45rem;
}
.saved-state-card > small { color:#e5b959;font-size:.59rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase; }
.saved-state-card > strong { font-size:1.12rem;font-weight:790;letter-spacing:-.035em; }
.saved-state-card > span:not(.saved-state-orbit) { max-width:350px;color:var(--text-muted);font-size:.72rem;line-height:1.58; }
.saved-state-tips { margin-top:10px;display:flex;flex-wrap:wrap;justify-content:center;gap:7px; }
.saved-state-tips span { padding:5px 9px;border:1px solid var(--border-subtle);border-radius:999px;color:var(--text-secondary);background:rgba(255,255,255,.025);font-size:.59rem;font-weight:650; }
.saved-state-tips i { margin-right:4px;color:#dcb252; }
.saved-state-action {
    min-height:38px;
    margin-top:12px;
    padding:0 15px;
    border:1px solid rgba(255,225,148,.35);
    border-radius:13px;
    color:#2a2008;
    background:linear-gradient(145deg,#ffe69b,#dfa32f);
    box-shadow:0 9px 22px rgba(213,155,38,.2),inset 0 1px 0 rgba(255,255,255,.6);
    font-family:inherit;
    font-size:.68rem;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    transition:transform 160ms ease,filter 160ms ease;
}
.saved-state-action:hover { transform:translateY(-1px);filter:brightness(1.04); }
.saved-state-error { border-color:rgba(248,113,113,.2);background:radial-gradient(circle at 50% 0,rgba(239,68,68,.11),transparent 42%),color-mix(in srgb,var(--bg-elevated,#171925) 88%,transparent); }
.saved-state-error .saved-state-orbit { color:#fff1f1;border-color:rgba(254,202,202,.26);background:linear-gradient(145deg,#de6262,#9f3038);box-shadow:0 14px 34px rgba(172,49,58,.22); }
.saved-loading-lines { width:min(100%,260px);margin-top:16px;display:grid;gap:7px; }
.saved-loading-lines i { height:8px;border-radius:999px;background:linear-gradient(90deg,rgba(241,192,74,.045),rgba(241,192,74,.2),rgba(241,192,74,.045));background-size:220% 100%;animation:savedLoadingSweep 1.35s ease-in-out infinite; }
.saved-loading-lines i:nth-child(2) { width:82%;animation-delay:90ms; }
.saved-loading-lines i:nth-child(3) { width:62%;animation-delay:180ms; }
.saved-search-empty {
    width:min(calc(100% - 28px),430px);
    margin:22px auto;
    padding:26px 22px;
    display:grid;
    place-items:center;
    gap:6px;
    border:1px dashed rgba(238,190,75,.2);
    border-radius:22px;
    color:var(--text-muted);
    text-align:center;
    background:rgba(239,188,67,.035);
}
.saved-search-empty i { width:38px;height:38px;margin-bottom:3px;display:grid;place-items:center;border-radius:13px;color:#d9ae50;background:rgba(235,183,59,.09); }
.saved-search-empty strong { color:var(--text-primary);font-size:.8rem; }
.saved-search-empty span { max-width:330px;font-size:.65rem;line-height:1.45; }

[data-theme="light"] #chat-view.saved-mode .chat-header { background:radial-gradient(circle at 18% -40%,rgba(218,157,31,.12),transparent 38%),rgba(250,249,252,.94); }
[data-theme="light"] #chat-view .messages-container[data-conversation-kind="saved"] { background:radial-gradient(circle at 82% 8%,rgba(220,160,33,.09),transparent 31%),radial-gradient(circle at 12% 78%,rgba(108,79,191,.055),transparent 34%),#f5f3f0; }
[data-theme="light"] .saved-collection-intro,[data-theme="light"] .saved-state-card { border-color:rgba(172,118,22,.16);background:linear-gradient(135deg,rgba(234,182,59,.09),rgba(112,78,191,.035)),rgba(255,255,255,.84);box-shadow:0 18px 46px rgba(66,47,18,.09),inset 0 1px 0 #fff; }
[data-theme="light"] #chat-view .messages-container[data-conversation-kind="saved"] .saved-message .message-bubble { border-color:rgba(170,119,27,.14);background:linear-gradient(145deg,#fffaf0,#fff);box-shadow:0 8px 22px rgba(73,50,12,.08),inset 0 1px 0 #fff; }
[data-theme="light"] #chat-view .messages-container[data-conversation-kind="saved"] .saved-message .message-bubble-wrapper::before { border-color:rgba(170,119,27,.12);background:#fffaf0; }
[data-theme="light"] .saved-message-source { color:#8b6318;border-color:rgba(168,113,18,.14);background:rgba(223,164,44,.08); }

@keyframes savedLoadingSweep { 0% { background-position:100% 0; } 100% { background-position:-110% 0; } }

@media (max-width:768px) {
    #chat-view .messages-container[data-conversation-kind="saved"] .messages-list { padding:12px 9px 20px; }
    .saved-collection-intro { width:calc(100% - 8px);margin-bottom:14px;border-radius:17px; }
    #chat-view .messages-container[data-conversation-kind="saved"] .message-wrapper.saved-message { max-width:91%; }
    .saved-state-card { width:calc(100% - 18px);min-height:270px;padding:34px 22px 28px;border-radius:25px; }
    .saved-state-orbit { width:62px;height:62px;border-radius:21px;font-size:1.25rem; }
}

@media (prefers-reduced-motion:reduce) {
    .saved-loading-lines i { animation:none; }
    .saved-state-action { transition:none; }
}

/* Message selection: full-row targets, calm contrast and a dedicated action dock. */
#chat-view.selection-mode .composer { display:none; }
#chat-view .messages-list.is-selecting {
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;
}
#chat-view .messages-list.is-selecting .message-wrapper {
    width:100%;
    max-width:none !important;
    min-height:42px;
    margin-block:1px;
    padding:3px 4px 3px 48px;
    align-self:stretch !important;
    box-sizing:border-box;
    border-radius:16px;
    outline:none !important;
    content-visibility:visible;
    cursor:pointer;
    transition:background-color 150ms ease,box-shadow 170ms ease,filter 150ms ease;
}
#chat-view .messages-list.is-selecting .message-wrapper::before {
    content:"";
    position:absolute;
    z-index:4;
    top:50%;
    left:10px;
    display:grid;
    width:25px;
    height:25px;
    place-items:center;
    box-sizing:border-box;
    border:1.5px solid color-mix(in srgb,var(--text-muted) 47%,transparent);
    border-radius:50%;
    color:#fff;
    background:color-mix(in srgb,var(--bg-elevated,#171925) 78%,transparent);
    box-shadow:0 5px 16px rgba(4,6,14,.18),inset 0 1px 0 rgba(255,255,255,.055);
    font:800 12px/1 var(--font-family,Inter,sans-serif);
    opacity:.76;
    transform:translateY(-50%) scale(.92);
    transition:transform 170ms cubic-bezier(.22,1,.36,1),opacity 150ms ease,border-color 150ms ease,background 170ms ease,box-shadow 170ms ease;
}
#chat-view .messages-list.is-selecting .message-wrapper:not(.selected-for-delete):hover {
    background:color-mix(in srgb,var(--accent) 5%,transparent);
}
#chat-view .messages-list.is-selecting .message-wrapper:not(.selected-for-delete):hover::before,
#chat-view .messages-list.is-selecting .message-wrapper:focus-visible::before {
    opacity:1;
    border-color:color-mix(in srgb,var(--accent) 62%,rgba(255,255,255,.26));
    transform:translateY(-50%) scale(1);
}
#chat-view .messages-list.is-selecting .message-wrapper.selected-for-delete {
    border-radius:16px;
    background:
        linear-gradient(90deg,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--accent) 7%,transparent) 58%,transparent),
        rgba(255,255,255,.012);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 15%,transparent),0 7px 22px rgba(4,6,15,.065);
}
#chat-view .messages-list.is-selecting .message-wrapper.selected-for-delete::before {
    content:"✓";
    opacity:1;
    border-color:color-mix(in srgb,var(--accent) 66%,#d9d2ff);
    background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 88%,#b6a7ff),color-mix(in srgb,var(--accent) 72%,#5647b5));
    box-shadow:0 7px 20px color-mix(in srgb,var(--accent) 26%,transparent),inset 0 1px 0 rgba(255,255,255,.27);
    transform:translateY(-50%) scale(1);
    animation:messageSelectionCheck 220ms cubic-bezier(.2,1.45,.45,1) both;
}
#chat-view .messages-list.is-selecting .message-wrapper.selected-for-delete .message-bubble-wrapper {
    opacity:1 !important;
    transform:none !important;
}
#chat-view .messages-list.is-selecting .message-wrapper.selected-for-delete .message-bubble {
    filter:saturate(1.055) brightness(1.025);
}
#chat-view .messages-list.is-selecting .message-wrapper.dimmed { opacity:1 !important; }
#chat-view .messages-list.is-selecting .message-wrapper:focus-visible {
    outline:none !important;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent);
}

#chat-view .selection-toolbar {
    min-height:62px;
    gap:10px;
    padding:8px 10px !important;
    border-color:color-mix(in srgb,var(--accent) 17%,rgba(255,255,255,.07)) !important;
    background:
        radial-gradient(circle at 22% -80%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 47%),
        linear-gradient(145deg,rgba(25,27,43,.94),rgba(13,15,26,.94)) !important;
    box-shadow:0 -3px 22px rgba(3,5,13,.13),0 12px 34px rgba(3,5,13,.19),inset 0 1px 0 rgba(255,255,255,.055) !important;
    animation:selectionDockIn 220ms cubic-bezier(.22,1,.36,1) both;
}
#chat-view .selection-close,
#chat-view .selection-action {
    display:inline-flex;
    min-width:40px;
    height:40px;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.07);
    border-radius:13px;
    color:var(--text-secondary);
    background:rgba(255,255,255,.035);
    font-family:inherit;
    cursor:pointer;
    transition:transform 150ms ease,color 150ms ease,border-color 150ms ease,background-color 150ms ease;
}
#chat-view .selection-close { flex:0 0 40px;padding:0;font-size:.82rem; }
#chat-view .selection-close:hover { color:var(--text-primary);border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.065);transform:translateY(-1px); }
#chat-view .selection-summary { display:flex;min-width:0;align-items:center;gap:9px; }
#chat-view .selection-count {
    display:grid;
    width:34px;
    height:34px;
    flex:0 0 34px;
    place-items:center;
    border:1px solid color-mix(in srgb,var(--accent) 38%,rgba(255,255,255,.12));
    border-radius:12px;
    color:#f7f4ff;
    background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 68%,#8778dd),color-mix(in srgb,var(--accent) 45%,#42376e));
    box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 17%,transparent),inset 0 1px 0 rgba(255,255,255,.18);
    font-size:.72rem;
    font-weight:800;
}
#chat-view .selection-summary-copy { display:flex;min-width:0;flex-direction:column;gap:1px; }
#chat-view .selection-summary-copy strong { overflow:hidden;color:var(--text-primary);font-size:.7rem;font-weight:760;text-overflow:ellipsis;white-space:nowrap; }
#chat-view .selection-summary-copy small { overflow:hidden;color:var(--text-muted);font-size:.54rem;text-overflow:ellipsis;white-space:nowrap; }
#chat-view .selection-actions { display:flex;margin-left:auto;gap:6px; }
#chat-view .selection-action { gap:7px;padding:0 13px;color:color-mix(in srgb,var(--accent-light,#b5a7f4) 86%,#fff);font-size:.63rem;font-weight:700; }
#chat-view .selection-action:hover { border-color:color-mix(in srgb,var(--accent) 27%,rgba(255,255,255,.1));background:color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,.035));transform:translateY(-1px); }
#chat-view .selection-action-danger { color:#f3a3aa; }
#chat-view .selection-action-danger:hover { border-color:rgba(244,110,122,.2);background:rgba(244,91,106,.075); }

[data-theme="light"] #chat-view .messages-list.is-selecting .message-wrapper::before { border-color:rgba(74,68,91,.3);color:#fff;background:rgba(255,255,255,.78);box-shadow:0 5px 14px rgba(54,44,83,.1),inset 0 1px 0 #fff; }
[data-theme="light"] #chat-view .messages-list.is-selecting .message-wrapper.selected-for-delete { background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 13%,#fff),color-mix(in srgb,var(--accent) 5%,#fff) 63%,rgba(255,255,255,.45));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 13%,transparent),0 7px 20px rgba(64,52,94,.055); }
[data-theme="light"] #chat-view .messages-list.is-selecting .message-wrapper.selected-for-delete::before { color:#fff;border-color:color-mix(in srgb,var(--accent) 58%,#a99bdb);background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 76%,#a99de5),color-mix(in srgb,var(--accent) 61%,#6658a4)); }
[data-theme="light"] #chat-view .selection-toolbar { border-color:rgba(77,63,115,.11) !important;background:radial-gradient(circle at 22% -80%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 48%),rgba(252,251,255,.94) !important;box-shadow:0 -2px 18px rgba(58,46,88,.055),0 12px 32px rgba(58,46,88,.1),inset 0 1px 0 #fff !important; }
[data-theme="light"] #chat-view .selection-close,[data-theme="light"] #chat-view .selection-action { border-color:rgba(61,52,83,.09);background:rgba(66,56,91,.035); }
[data-theme="light"] #chat-view .selection-action-danger { color:#b94f59; }

@keyframes messageSelectionCheck { 0% { transform:translateY(-50%) scale(.72); } 100% { transform:translateY(-50%) scale(1); } }
@keyframes selectionDockIn { from { opacity:0;transform:translateY(14px) scale(.985); } to { opacity:1;transform:translateY(0) scale(1); } }

@media (max-width:768px) {
    #chat-view .messages-list.is-selecting .message-wrapper { min-height:40px;padding-left:42px;border-radius:14px; }
    #chat-view .messages-list.is-selecting .message-wrapper::before { left:7px;width:24px;height:24px; }
    #chat-view .selection-toolbar { width:calc(100% - 12px);min-height:60px;margin-bottom:calc(4px + env(safe-area-inset-bottom,0px));padding:7px !important;border-radius:17px !important; }
    #chat-view .selection-summary { gap:7px; }
    #chat-view .selection-summary-copy small { display:none; }
    #chat-view .selection-count { width:32px;height:32px;flex-basis:32px;border-radius:11px; }
    #chat-view .selection-action { width:40px;padding:0; }
    #chat-view .selection-action span { display:none; }
}

@media (prefers-reduced-motion:reduce) {
    #chat-view .selection-toolbar,
    #chat-view .messages-list.is-selecting .message-wrapper.selected-for-delete::before { animation:none; }
    #chat-view .messages-list.is-selecting .message-wrapper,
    #chat-view .messages-list.is-selecting .message-wrapper::before { transition:none; }
}