:root {
    --bubo-ink-950: #1f2431;
    --bubo-ink-900: #283046;
    --bubo-ink-800: #37415d;
    --bubo-ink-700: #4b5877;
    --bubo-ink-600: #67748f;
    --bubo-ink-500: #7f8aa5;
    --bubo-owl-blue-700: #2044aa;
    --bubo-owl-blue-600: #2a59cd;
    --bubo-owl-blue-500: #4677df;
    --bubo-owl-blue-400: #8aaeff;
    --bubo-amber-600: #bd822b;
    --bubo-amber-500: #d9a142;
    --bubo-paper-100: #fbf7f0;
    --bubo-paper-200: #f3ecdf;
    --bubo-mist-100: #f4f7ff;
    --bubo-mist-200: #eaf0ff;
    --bubo-mist-300: #dfe7fa;
    --bubo-danger-600: #cf4a3b;
    --bubo-danger-500: #e25d4d;
    --bubo-line-soft: rgba(44, 57, 94, 0.1);
    --bubo-line-strong: rgba(37, 53, 89, 0.16);
    --bubo-shadow-soft: 0 18px 38px rgba(27, 39, 68, 0.1);
    --bubo-shadow-card: 0 22px 44px rgba(29, 44, 78, 0.12);
    --bubo-shadow-strong: 0 34px 72px rgba(28, 43, 76, 0.18);
    --bubo-surface-primary-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 247, 240, 0.98) 100%);
    --bubo-surface-primary-border: rgba(70, 95, 155, 0.16);
    --bubo-surface-primary-shadow: 0 24px 44px rgba(28, 43, 76, 0.14);
    --bubo-surface-secondary-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(246, 248, 255, 0.97) 100%);
    --bubo-surface-secondary-border: rgba(44, 57, 94, 0.08);
    --bubo-surface-secondary-shadow: 0 14px 28px rgba(28, 43, 76, 0.08);
    --bubo-surface-utility-bg: linear-gradient(180deg, rgba(250, 247, 240, 0.92) 0%, rgba(244, 247, 255, 0.96) 100%);
    --bubo-surface-utility-border: rgba(44, 57, 94, 0.09);
    --bubo-surface-utility-shadow: 0 18px 34px rgba(28, 43, 76, 0.1);
    --bubo-surface-muted-bg: linear-gradient(180deg, rgba(248, 250, 255, 0.82) 0%, rgba(245, 241, 234, 0.88) 100%);
    --bubo-surface-muted-border: rgba(44, 57, 94, 0.06);
    --bubo-surface-muted-shadow: 0 8px 18px rgba(28, 43, 76, 0.04);
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

#login, #register, #chat, #logout {
    margin-bottom: 20px;
}

#input {
    display: flex;
}

#input input, #input button {
    margin-right: 5px;
}

#input input {
    flex: 1;
}

.message-row {
    display: flex;
    align-items: flex-end;
    margin-bottom: 8px;
}

.msg-bubble {
    background-color: #e1f5fe;
    padding: 8px 12px;
    border-radius: 10px;
    max-width: 70%;
    word-break: break-word;
    position: relative;
    flex-grow: 1;
}

.msg-timestamp {
    font-size: 0.7em;
    color: #999;
    margin-top: 2px;
    text-align: right;
}

body {
    display: flex;
    flex-direction: column;
}

/* Keep top section (login/register/chat title) wrapped */
#login, #register, #logout {
    margin: 20px;
}

/* Chat container fills the rest of the page */
#chat {
    display: flex;
    flex-direction: column;
    height: calc(100% - 88px - 60px - 74px); /* top-bar chrome + composer + primary tabs */
    position: relative;
}

#messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    background-color: #f7f7f7;
}

/* Input sticks to bottom */
#input {
    display: flex;
}

#input input, #input button {
    margin-right: 5px;
}

#input input {
    flex: 1;
}

.hidden {
    display: none;
}


.message-row {
    display: flex;
    align-items: flex-end;
    margin-bottom: 8px;
}

.other-message {
    justify-content: flex-start;
}

.own-message {
    justify-content: flex-end;
}

.other-message .msg-bubble {
    background-color: #e1f5fe;
    color: #000;
}

.own-message .msg-bubble {
    background-color: #c8e6c9;
    color: #000;
}

.msg-bubble {
    padding: 8px 12px;
    border-radius: 10px;
    max-width: 70%;
    word-break: break-word;
    position: relative;
    flex-grow: 0;
}

.msg-timestamp {
    font-size: 0.7em;
    color: #999;
    margin-top: 4px;
    text-align: right;
}

.msg-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 8px;
}
.own-message .msg-avatar {
    order: 2;
    margin-left: 8px;
    margin-right: 0;
}

#top-bar {
    height: 60px;
    background-color: #007bff;
    color: white;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
}

.top-bar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

#app-title {
    margin: 0;
    line-height: 1;
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.brand-logo-link {
    min-width: 0;
}

.brand-logo-image {
    display: block;
    width: auto;
    height: 34px;
    max-width: 160px;
    object-fit: contain;
}

#toggle-button,
#home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    box-sizing: border-box;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

#toggle-button:hover,
#home-button:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.48);
    transform: translateY(-1px);
}

.nav-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

#top-user-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 220px;
    height: 42px;
    padding: 0 12px 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-sizing: border-box;
    cursor: pointer;
}

#top-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.7);
    background: white;
}

#top-user-name {
    color: white;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#top-user-summary:hover {
    background: rgba(255, 255, 255, 0.24);
}


#logout {
    display: inline-block; /* ✅ Fix alignment inside nav-buttons */
}

#bottom-bar {
    min-height: 60px;
    padding: 10px 20px;
    background-color: #f0f0f0;
    border-top: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    z-index: 1000;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.bottom-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

#bottom-bar input {
    flex: 1;
    padding: 8px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#bottom-bar button {
    padding: 4px 8px;
    font-weight: bold;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#bottom-bar button:hover {
    background-color: #0056b3;
}

.reply-preview {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(23, 67, 141, 0.1);
    box-shadow: 0 10px 18px rgba(17, 43, 89, 0.08);
}

.reply-preview-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.reply-preview-label {
    color: #17438d;
    font-size: 0.84rem;
    font-weight: 800;
}

.reply-preview-snippet {
    color: #5d708d;
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#bottom-bar .reply-preview-cancel {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    font-weight: 700;
    border: none;
    border-radius: 999px;
    background: #edf4ff;
    color: #17438d;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

#bottom-bar .reply-preview-cancel:hover {
    background: #dbeafe;
}

.composer-attachment {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(23, 67, 141, 0.1);
    box-shadow: 0 10px 18px rgba(17, 43, 89, 0.08);
}

.composer-attachment-copy {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.composer-attachment-image {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 8px 18px rgba(18, 42, 82, 0.14);
}

.composer-attachment-meta {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.composer-attachment-name {
    color: #17438d;
    font-size: 0.9rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.composer-attachment-status {
    color: #5d708d;
    font-size: 0.82rem;
    line-height: 1.35;
}

.composer-attachment-progress {
    width: min(220px, 100%);
    height: 6px;
    margin-top: 2px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(187, 208, 236, 0.7);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.composer-attachment-progress-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2f7dfd 0%, #1c57d4 100%);
    transition: width 0.16s ease;
}

.composer-attachment-remove {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #edf4ff;
    color: #17438d;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.composer-attachment-remove:hover {
    background: #dbeafe;
}

.composer-attach-btn {
    flex-shrink: 0;
    min-width: 70px;
}

#bottom-bar button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    background-color: #91b4eb;
}

#bottom-bar button:disabled:hover {
    background-color: #91b4eb;
}

.conversation-item {
    display: flex;
    align-items: center;
    padding: 10px;
    gap: 10px;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.84);
    transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.conversation-item:hover {
    border-color: #bfd4ea;
    background: #f8fbff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

@media (max-width: 640px) {
    #top-bar {
        min-height: 50px;
        margin: 0;
        padding: 6px 10px;
        border-radius: 0;
    }

    .top-bar-brand {
        gap: 8px;
    }

    .brand-logo-image {
        height: 20px;
        max-width: 92px;
    }

    .nav-buttons {
        gap: 6px;
    }

    #toggle-button,
    #home-button,
    #top-notifications-button,
    .top-search-button {
        height: 36px;
        min-height: 36px;
        padding: 0 10px;
        border-radius: 10px;
        font-size: 0.82rem;
    }

    #top-notifications-button,
    .top-search-button {
        width: 36px;
        min-width: 36px;
        padding: 0;
    }

    .top-notifications-badge {
        top: -3px;
        right: -3px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        font-size: 0.66rem;
    }

    #top-user-summary {
        max-width: 146px;
        height: 36px;
        min-height: 36px;
        padding: 0 9px 0 5px;
        border-radius: 10px;
        gap: 6px;
    }

    #top-user-avatar {
        width: 24px;
        height: 24px;
    }

    #top-user-name {
        font-size: 0.92em;
    }

    .nav-buttons button:not(#top-notifications-button):not(.top-search-button) {
        padding: 0 10px;
        font-size: 0.9em;
    }

    .chat-page-shell #top-user-summary {
        max-width: 40px;
        padding: 0;
        justify-content: center;
    }

    .chat-page-shell #top-user-name {
        display: none;
    }

}

.conversation-item.selected {
    background-color: #eef6ff;
    border-color: #93c5fd;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.08);
}

.conversation-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}


.conversation-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.conversation-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.conversation-item.has-unread .conversation-label {
    color: #17376c;
    font-weight: 800;
}

.conversation-main {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 2px;
}

.conversation-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.conversation-badge {
    padding: 2px 7px;
    border-radius: 999px;
    background: #e8f1ff;
    color: #2563eb;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    flex-shrink: 0;
}

.conversation-unread-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #2563eb;
    color: white;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
}

.conversation-subtitle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #64748b;
    font-size: 0.75rem;
}

.conversation-item.selected .conversation-badge {
    background: #dbeafe;
}

.conversation-item.selected .conversation-unread-badge {
    background: #1d4ed8;
}

.sidebar-actions {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.chat-onboarding-note {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
    padding: 14px 13px;
    border: 1px solid rgba(217, 161, 66, 0.24);
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(217, 161, 66, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(255, 251, 241, 0.96) 0%, rgba(246, 249, 255, 0.98) 100%);
    box-shadow: 0 14px 26px rgba(28, 43, 76, 0.08);
}

.chat-onboarding-note-title {
    color: var(--bubo-ink-900);
    font-size: 0.92rem;
    font-weight: 900;
}

.chat-onboarding-note p {
    margin: 0;
    color: var(--bubo-ink-600);
    font-size: 0.84rem;
    line-height: 1.45;
}

.sidebar-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 2px 10px;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sidebar-section-heading::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #d6e4f3 0%, rgba(214, 228, 243, 0) 100%);
}

.conversation-list {
    display: grid;
    gap: 8px;
}

.sidebar-action-btn {
    width: 100%;
    display: grid;
    gap: 3px;
    padding: 11px 12px;
    border: 1px solid #cfe0f2;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f5faff 100%);
    color: #0f172a;
    text-align: left;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}

.sidebar-action-toggle {
    grid-template-columns: 1fr;
    align-items: center;
}

.sidebar-action-toggle-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.sidebar-action-btn:hover {
    border-color: #8bbcf7;
    background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.08);
    transform: translateY(-1px);
}

.sidebar-action-btn.is-suggested {
    border-color: rgba(217, 161, 66, 0.55);
    background:
        radial-gradient(circle at top right, rgba(217, 161, 66, 0.18), transparent 38%),
        linear-gradient(180deg, #fffdf7 0%, #f4f8ff 100%);
    box-shadow: 0 16px 28px rgba(217, 161, 66, 0.12);
}

.sidebar-action-title {
    font-size: 0.96rem;
    font-weight: 700;
    color: #0f172a;
}

.sidebar-action-hint {
    font-size: 0.78rem;
    line-height: 1.3;
    color: #5f7287;
}

#conversations .conversation-hide-btn {
    width: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding: 5px 9px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #52657a;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

#conversations .conversation-hide-btn:hover {
    color: #1d4ed8;
    border-color: #93c5fd;
    background: #f8fbff;
}
#user-popup,
#group-popup,
#chat-info-popup,
#group-members-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.34);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

#user-popup:not(.hidden),
#group-popup:not(.hidden),
#chat-info-popup:not(.hidden),
#group-members-popup:not(.hidden) {
    display: flex;
}

#user-popup-content,
#group-popup-content,
#chat-info-popup-content,
#group-members-popup-content {
    width: min(100%, 360px);
    display: grid;
    gap: 12px;
    background: #f8fbff;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid #d6e4f3;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.18);
}

#user-popup-content,
#group-popup-content {
    width: min(100%, 420px);
}

#user-popup-content {
    width: min(100%, 480px);
    max-height: min(720px, calc(100vh - 40px));
    overflow: hidden;
}

#chat-info-popup-content {
    width: min(100%, 440px);
}

#group-members-popup-content {
    width: min(100%, 440px);
}

.user-popup-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.user-popup-header h3 {
    margin: 2px 0 0;
    font-size: 1.15rem;
    color: #0f172a;
}

.user-popup-subtitle {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.4;
}

.user-popup-eyebrow {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2563eb;
}

.user-popup-close,
.user-popup-cancel {
    border: none;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

.user-popup-close {
    padding: 7px 12px;
    background: white;
    color: #2563eb;
    box-shadow: inset 0 0 0 1px #bfd4ea;
}

.user-popup-close:hover,
.user-popup-cancel:hover {
    transform: translateY(-1px);
}

#user-list,
#group-user-list,
#group-members-list {
    display: grid;
    gap: 8px;
    max-height: min(55vh, 320px);
    overflow-y: auto;
    padding-right: 2px;
}

#user-popup #user-list {
    max-height: min(46vh, 360px);
    min-height: 0;
    padding: 2px 2px 4px 0;
}

.user-list-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #d7e5f2;
    border-radius: 14px;
    background: white;
    color: #0f172a;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.user-list-item:hover {
    background: #eef6ff;
    border-color: #91c3ff;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
    transform: translateY(-1px);
}

.user-list-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #d7e5f2;
}

.user-list-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-list-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.user-list-meta {
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 700;
}

.user-list-check {
    margin-left: auto;
    padding: 5px 9px;
    border-radius: 999px;
    background: #eef4fb;
    color: #47637f;
    font-size: 0.76rem;
    font-weight: 700;
    flex-shrink: 0;
}

.group-user-item.selected {
    background: #eef6ff;
    border-color: #91c3ff;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
}

.group-user-item.selected .user-list-check {
    background: #2563eb;
    color: white;
}

.user-list-empty {
    padding: 16px 14px;
    border: 1px dashed #c9d8e8;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.76);
    color: #64748b;
    text-align: center;
}

.user-popup-cancel {
    padding: 10px 14px;
    background: #007bff;
    color: white;
}

.user-popup-cancel:hover {
    background: #0056b3;
}

.group-popup-field {
    display: grid;
    gap: 6px;
}

.group-popup-field span {
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
}

#group-name-input,
#new-chat-group-name-input,
#new-chat-user-search {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: white;
    color: #0f172a;
    font: inherit;
    box-sizing: border-box;
}

#group-name-input:focus,
#new-chat-group-name-input:focus,
#new-chat-user-search:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}

.new-chat-search-shell {
    display: grid;
}

.group-selection-count {
    font-size: 0.84rem;
    color: #64748b;
}

.new-chat-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    padding: 5px;
    border-radius: 999px;
    background: rgba(241, 244, 250, 0.98);
    border: 1px solid rgba(43, 58, 96, 0.08);
}

.new-chat-mode-btn {
    min-height: 38px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #52657a;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.new-chat-mode-btn.is-active {
    background: white;
    color: #2044aa;
    box-shadow: 0 10px 20px rgba(28, 43, 76, 0.1);
}

.new-chat-mode-btn:hover {
    color: #2044aa;
}

.new-chat-selected-users {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.new-chat-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(42, 89, 205, 0.14);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(244, 247, 255, 0.98) 0%, rgba(234, 240, 255, 0.98) 100%);
    color: #2044aa;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 900;
    cursor: pointer;
}

.new-chat-user-chip span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-popup-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.new-chat-actions {
    position: sticky;
    bottom: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin: 0 -16px -16px;
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(43, 58, 96, 0.08);
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.92) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.new-chat-actions .user-popup-cancel {
    min-width: 112px;
    border: 1px solid rgba(43, 58, 96, 0.1);
    background: rgba(255, 255, 255, 0.92);
    color: #334155;
    box-shadow: none;
}

.new-chat-actions .user-popup-cancel:hover {
    background: #eef6ff;
    color: #2044aa;
}

.group-popup-primary {
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background: #007bff;
    color: white;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.12s ease, transform 0.12s ease;
}

.group-popup-primary:hover {
    background: #0056b3;
    transform: translateY(-1px);
}

.group-popup-primary:disabled {
    background: #9dbde0;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 640px) {
    #group-popup {
        padding: 14px;
    }

    #group-popup-content {
        width: 100%;
        padding: 14px;
        border-radius: 16px;
    }

    #user-popup {
        align-items: flex-end;
        padding: 0;
    }

    #user-popup-content {
        width: 100%;
        max-height: min(88vh, 760px);
        padding: 16px 14px calc(14px + env(safe-area-inset-bottom, 0px));
        border-radius: 26px 26px 0 0;
        border-bottom: none;
    }

    #user-popup #user-list {
        max-height: min(42vh, 360px);
    }

    .user-popup-header {
        align-items: center;
    }

    .user-popup-close {
        padding: 7px 10px;
    }

    .group-popup-actions {
        grid-template-columns: 1fr;
    }

    .new-chat-actions {
        grid-template-columns: 1fr;
        margin: 0 -14px calc(-14px - env(safe-area-inset-bottom, 0px));
        padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    }

    .new-chat-actions .user-popup-cancel {
        min-width: 0;
    }

    .sidebar-action-btn {
        padding: 10px 11px;
        border-radius: 12px;
    }

    .sidebar-section-heading {
        margin: 10px 2px 8px;
        font-size: 0.7rem;
    }

    .sidebar-action-title {
        font-size: 0.92rem;
    }

    .sidebar-action-hint {
        font-size: 0.75rem;
    }

    .conversation-item {
        padding: 9px;
        border-radius: 12px;
    }

    #conversations .conversation-hide-btn {
        padding: 4px 8px;
        font-size: 0.72rem;
    }
}

#chat-container {
    flex: 1;
    display: flex;
    overflow: hidden;
    height: 100%;
}

#conversations {
    width: 200px;
    min-width: 0;
    max-width: 200px;
    overflow: hidden;
    /* border-right: 1px solid #ccc; */
    background: #f9f9f9;
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
}

#sidebar-content {
    padding: 12px 10px 10px 10px;
    display: block;
    flex: 1;
    overflow-y: auto;
    transition: all 0.3s ease;
}

#messages-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hidden {
    display: none;
}

#message-placeholder {
    color: #888;
    text-align: center;
    padding: 20px;
    font-style: italic;
}

.msg-reactions {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.msg-reactions.visible {
    opacity: 1;
}

.msg-bubble {
    position: relative;
    padding: 10px;
    border-radius: 12px;
    background-color: #e2e2e2;
    max-width: 70%;
    word-wrap: break-word;
    overflow: visible;
}

.own-message .msg-bubble {
    background-color: #d1edc1;
}

.msg-reactions {
    /* position: absolute; */
    bottom: 4px;
    right: 8px;
    display: flex;
    flex-wrap: wrap;       /* ✅ allow wrapping */
    justify-content: flex-end;
    gap: 4px;
    font-size: 16px;
    max-width: 80%;        /* ✅ constrain width to bubble */
    overflow-wrap: break-word;
}


.own-message .msg-reactions {
    right: 8px;
}

.other-message .msg-reactions {
    left: 8px;
}

.other-message .msg-reactions {
    left: 8px;
    right: auto;
    justify-content: flex-start;
}

.msg-reactions {
    margin-top: 4px;
    font-size: 16px;
}

.msg-meta-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
}

.own-message .msg-meta-row {
    justify-content: flex-end;
}

.other-message .msg-meta-row {
    justify-content: flex-start;
}

.message-action-btn {
    border: 1px solid #cbd5e1;
    background: rgba(255, 255, 255, 0.82);
    color: #475569;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.message-action-btn:hover {
    background: #eef6ff;
    border-color: #93c5fd;
}

.message-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: #94a3b8;
    border-color: #d8e1ea;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: none;
    transform: none;
}

.msg-timestamp {
    color: #64748b;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.msg-receipt {
    color: #7d8ca3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    height: 12px;
    white-space: nowrap;
}

.msg-receipt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 12px;
}

.msg-receipt-icon svg {
    width: 16px;
    height: 12px;
    overflow: visible;
}

.msg-receipt-icon path {
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.msg-receipt.is-seen {
    color: #245fdd;
}

.message-avatar-link {
    display: flex;
    align-items: flex-end;
    margin-right: 8px;
    flex-shrink: 0;
    text-decoration: none;
}

.own-message .message-avatar-link {
    order: 2;
    margin-left: 8px;
    margin-right: 0;
}

.message-avatar-link .msg-avatar {
    margin: 0;
}

.msg-reply-preview {
    width: 100%;
    display: grid;
    gap: 2px;
    margin-bottom: 8px;
    padding: 8px 10px;
    border: none;
    border-left: 3px solid #2563eb;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.58);
    text-align: left;
    cursor: pointer;
}

.msg-reply-preview:hover {
    background: rgba(255, 255, 255, 0.78);
}

.msg-reply-author {
    color: #17438d;
    font-size: 0.78rem;
    font-weight: 800;
}

.msg-reply-snippet {
    color: #536987;
    font-size: 0.84rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-attachment {
    display: block;
    width: min(260px, 100%);
    margin-top: 10px;
    padding: 0;
    border: none;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(14, 32, 64, 0.14);
}

.msg-attachment-image {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    background: #dbe7f6;
}

.msg-text-wrapper.image-only .msg-text {
    color: #5d708d;
    font-size: 0.82rem;
    margin-bottom: 4px;
}

.msg-bubble.menu-enabled {
    cursor: pointer;
    transition: box-shadow 0.14s ease, transform 0.14s ease;
}

.msg-bubble.menu-enabled:hover {
    box-shadow: 0 10px 24px rgba(17, 43, 89, 0.08);
}

.msg-bubble.menu-open {
    box-shadow: 0 0 0 2px rgba(26, 107, 255, 0.16), 0 18px 34px rgba(17, 43, 89, 0.14);
    transform: translateY(-1px);
}

.message-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(12, 27, 53, 0.1);
    backdrop-filter: blur(2px);
}

.message-menu-popover {
    position: fixed;
    z-index: 41;
    width: min(360px, calc(100% - 24px));
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid rgba(19, 58, 122, 0.1);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 28px 46px rgba(13, 31, 64, 0.24);
}

.message-menu-reaction-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.message-menu-reaction-btn,
.message-menu-expand-btn {
    min-width: 42px;
    height: 42px;
    border: none;
    border-radius: 14px;
    background: #eff4fb;
    color: #17376c;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    transition: transform 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.message-menu-reaction-btn:hover,
.message-menu-expand-btn:hover {
    background: #e1edff;
    box-shadow: inset 0 0 0 1px rgba(26, 107, 255, 0.12);
    transform: translateY(-1px);
}

.message-menu-expand-btn {
    font-size: 1rem;
    font-weight: 800;
    flex-shrink: 0;
}

.message-menu-more {
    display: grid;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.message-menu-section {
    display: grid;
    gap: 8px;
}

.message-menu-section-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.message-menu-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
}

.message-menu-action-list {
    display: grid;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.message-menu-action-btn {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: none;
    border-radius: 14px;
    background: transparent;
    color: #17376c;
    font-size: 0.97rem;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.message-menu-action-btn:hover {
    background: #eef4ff;
}

.message-menu-action-btn.danger {
    color: #c2410c;
}

.message-menu-action-btn.danger:hover {
    background: #fff1f2;
    color: #b42318;
}

@media (max-width: 640px) {
    .msg-bubble {
        max-width: 88%;
    }

    .message-menu-popover {
        width: min(340px, calc(100% - 18px));
        padding: 12px;
        border-radius: 20px;
    }

    .message-menu-reaction-btn,
    .message-menu-expand-btn {
        min-width: 40px;
        height: 40px;
        font-size: 1.35rem;
    }

    .message-menu-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    #bottom-bar {
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .bottom-bar-row {
        gap: 8px;
    }

    .reply-preview {
        padding: 9px 10px;
    }

    .composer-attachment {
        padding: 9px 10px;
    }

    .composer-attachment-image {
        width: 48px;
        height: 48px;
    }

    .composer-attach-btn {
        min-width: 60px;
    }

    .msg-attachment {
        width: min(220px, 100%);
    }

    .image-lightbox {
        padding: 18px 12px;
    }

    .image-lightbox-close {
        top: -6px;
        right: -2px;
    }
}

.hidden {
    display: none;
}

.reaction {
    margin-right: 4px;
}

.msg-timestamp {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.edited-tag {
    display: inline-block;
    margin-left: 4px;
    color: #7c8da0;
    font-size: 0.75em;
    font-weight: 500;
    line-height: 1;
    vertical-align: baseline;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.edit-input {
    width: 100%;
    min-height: 92px;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(30, 75, 153, 0.16);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    color: #16345f;
    font: inherit;
    line-height: 1.45;
    resize: vertical;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.edit-input:focus {
    outline: none;
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.edit-shell {
    display: grid;
    gap: 10px;
    margin-top: 6px;
    padding: 12px;
    border: 1px solid rgba(23, 67, 141, 0.12);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(244, 248, 255, 0.92) 100%);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.edit-shell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.edit-shell-eyebrow {
    color: #17438d;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.edit-shell-counter {
    color: #6a7f9d;
    font-size: 0.78rem;
    font-weight: 700;
}

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

.edit-state-btn {
    padding: 5px 11px;
    font-size: 0.84rem;
}

.edit-state-btn.save-btn {
    background: rgba(26, 107, 255, 0.12);
    border-color: rgba(26, 107, 255, 0.22);
    color: #1957c2;
}

.edit-state-btn.save-btn:hover {
    background: rgba(26, 107, 255, 0.18);
    border-color: rgba(26, 107, 255, 0.32);
    color: #1548a5;
}

.edit-state-btn.cancel-btn {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.18);
    color: #526278;
}

.edit-state-btn.cancel-btn:hover {
    background: rgba(148, 163, 184, 0.2);
    border-color: rgba(148, 163, 184, 0.28);
    color: #334155;
}

@media (max-width: 640px) {
    .edit-shell {
        padding: 10px;
    }

    .edit-actions {
        justify-content: flex-start;
    }

    .edit-state-btn {
        min-height: 34px;
    }
}

.deleted-msg {
    font-style: italic;
    color: #888;
}

.message-row-target .msg-bubble {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18), 0 18px 28px rgba(37, 99, 235, 0.12);
    animation: message-target-pulse 1.2s ease;
}

.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 4200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 19, 40, 0.74);
    backdrop-filter: blur(10px);
}

.image-lightbox.hidden {
    display: none !important;
}

.image-lightbox-shell {
    position: relative;
    width: min(100%, 960px);
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-lightbox-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #17376c;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 12px 22px rgba(8, 19, 40, 0.24);
}

.image-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: min(86vh, 900px);
    border-radius: 22px;
    box-shadow: 0 30px 60px rgba(8, 19, 40, 0.28);
}

@keyframes message-target-pulse {
    0% {
        transform: scale(1);
    }
    35% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

.app-page-shell,
.chat-page-shell {
    --bubo-header-surface: linear-gradient(135deg, #1a6bff 0%, #1d53d6 100%);
    --bubo-header-border: rgba(15, 51, 122, 0.28);
    --bubo-header-shadow: 0 20px 42px rgba(18, 43, 89, 0.18);
    --bubo-header-item-bg: rgba(255, 255, 255, 0.14);
    --bubo-header-item-border: rgba(255, 255, 255, 0.24);
    --bubo-header-item-hover-bg: rgba(255, 255, 255, 0.22);
    --bubo-header-active-bg: rgba(255, 255, 255, 0.26);
    --bubo-header-active-border: rgba(255, 255, 255, 0.4);
    --bubo-header-text: #ffffff;
    --bubo-nav-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 249, 255, 0.96) 100%);
    --bubo-nav-border: rgba(23, 67, 141, 0.1);
    --bubo-nav-shadow: 0 18px 38px rgba(18, 43, 89, 0.1);
    --bubo-nav-item-bg: rgba(237, 244, 255, 0.86);
    --bubo-nav-item-border: rgba(23, 67, 141, 0.08);
    --bubo-nav-item-hover-bg: rgba(226, 238, 255, 0.96);
    --bubo-nav-active-bg: rgba(21, 87, 212, 0.12);
    --bubo-nav-active-border: rgba(21, 87, 212, 0.18);
    --bubo-nav-text: #17376c;
    --bubo-nav-muted: #5c7090;
}

.app-page-shell {
    background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 32%, #f4f7fb 100%);
}

.app-page-main {
    flex: 1;
    overflow-y: auto;
    padding: 18px 18px 96px;
}

.page-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.page-hero h2 {
    margin: 0 0 6px;
    font-size: 2rem;
    color: #17376c;
}

.page-hero p {
    margin: 0;
    color: #5e7291;
    font-size: 1rem;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(19, 87, 210, 0.12);
    color: #17438d;
    font-weight: 700;
    white-space: nowrap;
}

#top-bar {
    min-height: 54px;
    margin: 0;
    padding: 6px 14px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--bubo-header-border);
    background: var(--bubo-header-surface);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px rgba(18, 43, 89, 0.12);
    color: var(--bubo-header-text);
    backdrop-filter: none;
    box-sizing: border-box;
}

.top-bar-brand {
    gap: 8px;
}

.brand-logo-image {
    height: 24px;
    max-width: 108px;
}

#toggle-button,
#home-button {
    min-height: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--bubo-header-item-border);
    border-radius: 12px;
    background: var(--bubo-header-item-bg);
    color: var(--bubo-header-text);
    font-size: 0.9rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

#toggle-button:hover,
#home-button:hover,
#top-user-summary:hover,
#top-notifications-button:hover,
.top-search-button:hover {
    background: var(--bubo-header-item-hover-bg);
    border-color: var(--bubo-header-active-border);
    transform: translateY(-1px);
}

#top-user-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 220px;
    min-height: 38px;
    height: 38px;
    padding: 0 12px 0 6px;
    border-radius: 12px;
    background: var(--bubo-header-item-bg);
    border: 1px solid var(--bubo-header-item-border);
    box-sizing: border-box;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

#top-user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.68);
    background: white;
    box-shadow: 0 4px 12px rgba(18, 43, 89, 0.08);
}

#top-user-name {
    color: var(--bubo-header-text);
    font-weight: 700;
}

#top-notifications-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--bubo-header-item-border);
    border-radius: 12px;
    background: var(--bubo-header-item-bg);
    color: var(--bubo-header-text);
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.top-search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--bubo-header-item-border);
    border-radius: 18px;
    background: var(--bubo-header-item-bg);
    color: var(--bubo-header-text);
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

#top-notifications-button.active {
    background: var(--bubo-header-active-bg);
    border-color: var(--bubo-header-active-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 20px rgba(21, 87, 212, 0.08);
}

.top-search-button.active {
    background: var(--bubo-header-active-bg);
    border-color: var(--bubo-header-active-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 20px rgba(21, 87, 212, 0.08);
}

.top-notifications-icon {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
    line-height: 1;
    opacity: 0.96;
}

.top-search-icon {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.96;
}

.top-notifications-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    padding: 0;
    border-radius: 999px;
    background: #f97316;
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.28);
}

.inline-notice {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(24, 71, 148, 0.14);
    background: rgba(255, 255, 255, 0.82);
    color: #4f6486;
    box-shadow: 0 12px 24px rgba(21, 49, 99, 0.06);
}

.home-section {
    margin-bottom: 22px;
}

.home-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.home-section-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #2f4a78;
}

.section-link,
.section-link-btn {
    border: none;
    background: none;
    padding: 0;
    color: #2a63c7;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
}

.search-toolbar-card {
    margin-bottom: 18px;
    padding: 16px 18px 18px;
    border-radius: 22px;
    border: 1px solid rgba(27, 62, 127, 0.08);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 34px rgba(18, 43, 89, 0.08);
}

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

.search-input-shell {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-height: 56px;
    padding: 0 16px;
    border-radius: 18px;
    border: 1px solid rgba(24, 67, 140, 0.12);
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    box-sizing: border-box;
}

.search-input-shell:focus-within {
    border-color: #5b95ff;
    box-shadow: 0 0 0 4px rgba(91, 149, 255, 0.14);
}

.search-input-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: #5b6f8f;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#global-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #17376c;
    font: inherit;
    font-size: 1rem;
}

#global-search-input::placeholder {
    color: #7386a3;
}

.search-clear-btn {
    min-height: 50px;
    padding: 0 16px;
    border: none;
    border-radius: 16px;
    background: #edf4ff;
    color: #17438d;
    font-weight: 700;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(23, 67, 141, 0.08);
    transition: background-color 0.14s ease, transform 0.14s ease;
}

.search-clear-btn:hover {
    background: #e3efff;
    transform: translateY(-1px);
}

.search-helper-text {
    margin: 10px 2px 0;
    color: #627694;
    font-size: 0.94rem;
    line-height: 1.5;
}

.search-empty-state {
    margin-bottom: 18px;
}

.search-user-card .summary-card-meta {
    margin-top: 4px;
}

.home-search-fab {
    position: fixed;
    right: 22px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 999px;
    background: linear-gradient(135deg, #1a6bff 0%, #1d53d6 100%);
    color: white;
    text-decoration: none;
    box-shadow: 0 22px 36px rgba(21, 87, 212, 0.26);
    border: 1px solid rgba(255, 255, 255, 0.34);
    transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}

.home-search-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 28px 42px rgba(21, 87, 212, 0.3);
    filter: saturate(1.04);
}

.home-search-fab-icon {
    display: block;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-card-list,
.thread-list,
.thread-reply-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.summary-card,
.thread-card,
.thread-detail-card,
.thread-reply-card,
.thread-composer {
    display: block;
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid rgba(27, 62, 127, 0.08);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 34px rgba(18, 43, 89, 0.08);
    text-decoration: none;
    color: inherit;
}

.summary-card,
.thread-card {
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.summary-card:hover,
.thread-card:hover {
    transform: translateY(-1px);
    border-color: rgba(28, 76, 166, 0.18);
    box-shadow: 0 22px 36px rgba(18, 43, 89, 0.11);
}

.summary-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.summary-card-thread {
    gap: 0;
}

.summary-card-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 2px solid rgba(24, 67, 140, 0.12);
    flex-shrink: 0;
}

.summary-card-body {
    min-width: 0;
    flex: 1;
}

.summary-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.summary-card-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.summary-card-meta-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.summary-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #17376c;
    line-height: 1.2;
}

.summary-card.has-unread .summary-card-title {
    color: #103a80;
}

.summary-card-time,
.summary-card-meta,
.thread-card-meta {
    color: #627694;
    font-size: 0.96rem;
}

.summary-card-preview,
.thread-card-preview,
.thread-detail-body,
.thread-reply-body {
    color: #273d63;
    line-height: 1.5;
}

.summary-card-preview,
.thread-card-preview {
    margin-top: 2px;
}

.summary-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(32, 95, 206, 0.12);
    color: #205fce;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.thread-scope-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 4px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(20, 58, 122, 0.08);
    border: 1px solid rgba(28, 76, 166, 0.12);
}

.thread-scope-btn {
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #40608f;
    font-size: 0.92rem;
    font-weight: 700;
    padding: 9px 14px;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.thread-scope-btn.is-active {
    background: linear-gradient(135deg, #2563eb, #1f4fb8);
    color: white;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
}

.summary-card-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #2563eb;
    color: white;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
}

.notification-card {
    display: block;
}

.notification-card.is-read {
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 14px 28px rgba(18, 43, 89, 0.05);
}

.notification-card.is-read .summary-card-title {
    color: #486283;
}

.activity-summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-radius: 24px;
    border: 1px solid rgba(42, 89, 205, 0.12);
    background:
        radial-gradient(circle at top left, rgba(217, 161, 66, 0.18), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(241, 246, 255, 0.98) 100%);
    box-shadow: 0 18px 34px rgba(28, 43, 76, 0.1);
}

.activity-summary-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.activity-summary-kicker {
    color: #bd822b;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.activity-summary-copy strong {
    color: #1f2431;
    font-size: 1.18rem;
}

.activity-summary-copy p,
.notifications-section-copy {
    margin: 0;
    color: #667793;
    line-height: 1.5;
}

.activity-summary-metrics {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.activity-summary-metric {
    display: grid;
    justify-items: center;
    min-width: 76px;
    padding: 10px 12px;
    border-radius: 18px;
    border: 1px solid rgba(42, 89, 205, 0.1);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.activity-summary-metric span {
    color: #2145ac;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1;
}

.activity-summary-metric small {
    margin-top: 4px;
    color: #667793;
    font-size: 0.74rem;
    font-weight: 800;
}

.notifications-section .home-section-header {
    align-items: flex-start;
}

.activity-empty-card {
    display: flex;
    align-items: center;
    gap: 14px;
}

.activity-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(217, 161, 66, 0.2) 0%, rgba(42, 89, 205, 0.14) 100%);
    color: #2145ac;
    font-weight: 900;
}

.activity-empty-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.activity-empty-copy strong {
    color: #26344f;
}

.activity-empty-copy p {
    margin: 0;
    color: #667793;
    line-height: 1.45;
}

.notification-card-main {
    display: block;
    min-width: 0;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.notification-card-body {
    display: grid;
    gap: 10px;
}

.notification-card-title {
    margin-bottom: 0;
}

.notification-card-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.notification-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 12px;
}

.notification-mark-read-btn {
    white-space: nowrap;
}

.notification-state-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
    color: #60738e;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.notification-state-badge.is-read {
    background: rgba(148, 163, 184, 0.14);
}

.notifications-section-actions {
    display: flex;
    justify-content: flex-end;
    margin: -2px 0 12px;
}

.empty-state-card {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px dashed rgba(43, 91, 178, 0.18);
    background: rgba(255, 255, 255, 0.72);
    color: #607493;
}

.thread-composer {
    margin-bottom: 22px;
}

.thread-composer-field {
    display: block;
    margin-bottom: 14px;
}

.thread-composer-field span {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    color: #2f4a78;
}

.thread-composer-field input,
.thread-composer-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(30, 75, 153, 0.14);
    border-radius: 16px;
    padding: 12px 14px;
    font: inherit;
    color: #16345f;
    background: #fff;
}

.thread-composer-field textarea {
    resize: vertical;
}

.thread-composer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.primary-action-btn,
.secondary-action-btn,
.danger-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    text-decoration: none;
}

.primary-action-btn {
    border: none;
    background: linear-gradient(135deg, #1a6bff 0%, #1d53d6 100%);
    color: white;
    box-shadow: 0 12px 22px rgba(26, 77, 170, 0.22);
}

.secondary-action-btn {
    background: rgba(26, 107, 255, 0.08);
    border-color: rgba(26, 107, 255, 0.18);
    color: #1c57c5;
    box-shadow: 0 10px 20px rgba(24, 78, 174, 0.1);
}

.danger-action-btn {
    background: rgba(221, 57, 57, 0.08);
    border-color: rgba(221, 57, 57, 0.18);
    color: #b42318;
    box-shadow: 0 10px 20px rgba(180, 35, 24, 0.08);
}

.primary-action-btn:disabled,
.secondary-action-btn:disabled,
.danger-action-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
}

.primary-action-btn:hover,
.secondary-action-btn:hover,
.danger-action-btn:hover {
    transform: translateY(-1px);
}

.thread-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #17376c;
    margin-bottom: 6px;
}

.thread-card-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.thread-card-title-row .thread-card-title {
    margin-bottom: 0;
}

.thread-card-preview {
    margin-bottom: 8px;
}

.thread-detail-card {
    margin-bottom: 22px;
}

.thread-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.thread-detail-copy {
    min-width: 0;
    flex: 1;
}

.thread-author-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.thread-reply-header .thread-author-link:hover .thread-reply-author,
.thread-reply-header .thread-author-link:hover .thread-card-meta {
    color: #1749ad;
}

.thread-detail-meta {
    margin-top: 4px;
    color: #7d8ba0;
    font-size: 0.84rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.thread-detail-body {
    white-space: pre-wrap;
}

.thread-media-attachment {
    display: block;
    width: min(100%, 520px);
    margin-top: 14px;
    padding: 0;
    border: none;
    border-radius: 18px;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 18px 32px rgba(18, 43, 89, 0.14);
}

.thread-media-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
    background: #eff5ff;
}

.thread-post-attachment {
    margin-bottom: 2px;
}

.thread-reply-attachment {
    margin-top: 12px;
}

.thread-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.thread-reply-card {
    padding: 14px 16px;
}

.thread-comment-card {
    position: relative;
}

.thread-comment-card.has-thread {
    border-color: rgba(24, 71, 148, 0.18);
    box-shadow: 0 18px 30px rgba(18, 43, 89, 0.09);
}

.thread-comment-card.has-thread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(53, 101, 191, 0.72), rgba(120, 151, 204, 0.28));
}

.thread-reply-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.thread-reply-meta {
    min-width: 0;
    flex: 1;
}

.thread-reply-author {
    font-weight: 700;
    color: #17376c;
    margin-bottom: 2px;
}

.thread-reply-body {
    white-space: pre-wrap;
}

.thread-reply-body-wrap {
    margin-top: 2px;
}

.thread-reply-body-deleted {
    color: #7c8ba3;
    font-style: italic;
}

.thread-reply-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.thread-reply-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    background: rgba(255, 255, 255, 0.82);
    color: #475569;
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.thread-reply-action-btn:hover {
    background: #eef6ff;
    border-color: #93c5fd;
    color: #1e3a8a;
}

.thread-follow-toggle-btn.is-active {
    background: linear-gradient(135deg, #245fdd, #1946a8);
    color: white;
    border-color: rgba(23, 73, 173, 0.78);
    box-shadow: 0 14px 24px rgba(26, 86, 205, 0.22);
}

.user-profile-card {
    display: grid;
    gap: 18px;
}

.user-profile-header {
    display: flex;
    align-items: center;
    gap: 18px;
}

.user-profile-avatar {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    background: white;
    border: 3px solid rgba(24, 67, 140, 0.14);
    box-shadow: 0 18px 34px rgba(18, 43, 89, 0.12);
    flex-shrink: 0;
}

.user-profile-copy {
    min-width: 0;
    flex: 1;
}

.user-profile-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.user-profile-name-row h3 {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.05;
    color: #17376c;
}

.user-profile-presence-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: rgba(99, 115, 138, 0.12);
    color: #51657f;
}

.user-profile-presence-badge.online_now {
    background: rgba(25, 162, 91, 0.14);
    color: #127242;
}

.user-profile-presence-badge.active_recently {
    background: rgba(44, 102, 215, 0.12);
    color: #1b58c6;
}

.user-profile-presence-badge.last_seen,
.user-profile-presence-badge.unknown {
    background: rgba(99, 115, 138, 0.12);
    color: #51657f;
}

.user-profile-description {
    margin: 0;
    color: #51657f;
    line-height: 1.55;
}

.user-profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.moderation-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(99, 115, 138, 0.12);
    color: #51657f;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.moderation-pill.is-restricted {
    background: rgba(193, 121, 18, 0.12);
    color: #8a5a10;
}

.moderation-pill.is-suspended {
    background: rgba(180, 35, 24, 0.1);
    color: #a62a1c;
}

.user-profile-private-chat-note {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(24, 71, 148, 0.06);
    border: 1px solid rgba(24, 71, 148, 0.1);
    color: #51657f;
    line-height: 1.5;
}

.user-profile-private-chat-note.is-blocked {
    background: rgba(180, 35, 24, 0.08);
    border-color: rgba(180, 35, 24, 0.14);
    color: #8f2118;
}

.user-profile-moderation-note {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(24, 71, 148, 0.06);
    border: 1px solid rgba(24, 71, 148, 0.1);
    color: #51657f;
    line-height: 1.5;
}

.composer-block-note {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(180, 35, 24, 0.12);
    background: rgba(180, 35, 24, 0.08);
    color: #8f2118;
    font-size: 0.92rem;
    line-height: 1.45;
}

.thread-follow-toggle-btn.is-active:hover {
    background: linear-gradient(135deg, #2b69ea, #1d4cb6);
    color: white;
}

.thread-reply-delete-btn:hover {
    background: #fff1f2;
    border-color: #fda4af;
    color: #b42318;
}

.thread-delete-thread-btn:hover {
    background: #fff1f2;
    border-color: #fda4af;
    color: #b42318;
}

.thread-reply-save-btn {
    background: rgba(26, 107, 255, 0.12);
    border-color: rgba(26, 107, 255, 0.22);
    color: #1957c2;
}

.thread-reply-cancel-btn {
    background: rgba(148, 163, 184, 0.12);
}

.thread-target-highlight {
    box-shadow: 0 0 0 3px rgba(50, 104, 211, 0.14), 0 18px 34px rgba(18, 43, 89, 0.12);
    transition: box-shadow 0.22s ease;
}

.thread-comment-card.is-deleted,
.thread-root-comment-card.is-deleted {
    background: linear-gradient(180deg, rgba(247, 250, 255, 0.98), rgba(239, 245, 255, 0.95));
}

.thread-comment-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.thread-comment-thread-summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 30px;
}

.thread-comment-count {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(24, 71, 148, 0.08);
    color: #31558f;
    font-size: 0.83rem;
    font-weight: 700;
}

.thread-comment-count.has-thread {
    background: rgba(33, 89, 181, 0.14);
    color: #1c4c9b;
    box-shadow: inset 0 0 0 1px rgba(33, 89, 181, 0.08);
}

.thread-comment-thread-rail {
    display: inline-block;
    width: 18px;
    height: 26px;
    border-left: 3px solid rgba(93, 119, 170, 0.38);
    border-bottom: 3px solid rgba(93, 119, 170, 0.38);
    border-bottom-left-radius: 12px;
    margin-top: -6px;
}

.thread-comment-footer .thread-reply-actions {
    margin-top: 0;
}

.thread-comment-open-btn {
    background: linear-gradient(135deg, rgba(26, 107, 255, 0.14), rgba(26, 107, 255, 0.22));
    border-color: rgba(26, 107, 255, 0.24);
    color: #1957c2;
    box-shadow: 0 8px 16px rgba(26, 107, 255, 0.1);
}

.thread-comment-open-btn:hover {
    background: linear-gradient(135deg, rgba(26, 107, 255, 0.2), rgba(26, 107, 255, 0.28));
    border-color: rgba(26, 107, 255, 0.34);
    color: #14479e;
}

.thread-root-comment-card {
    border-color: rgba(24, 71, 148, 0.16);
    box-shadow: 0 16px 28px rgba(18, 43, 89, 0.08);
}

.thread-thread-anchor-card {
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(240, 246, 255, 0.95));
    border-color: rgba(35, 82, 168, 0.2);
    box-shadow: 0 20px 34px rgba(18, 43, 89, 0.11);
}

.thread-comment-thread-lane {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 14px;
    align-items: stretch;
}

.thread-comment-thread-lane-rail {
    display: block;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(67, 95, 149, 0.18), rgba(67, 95, 149, 0.52), rgba(67, 95, 149, 0.16));
    justify-self: center;
}

.thread-comment-thread-lane-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.thread-child-reply-card {
    margin-left: 0;
    border-left: none;
    background: rgba(250, 252, 255, 0.94);
    box-shadow: 0 12px 24px rgba(18, 43, 89, 0.06);
}

.thread-comment-composer-lane {
    position: relative;
    margin-left: 34px;
}

.thread-comment-composer-lane::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 16px;
    bottom: 16px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(67, 95, 149, 0.18), rgba(67, 95, 149, 0.48), rgba(67, 95, 149, 0.12));
}

.thread-reply-edit-input {
    width: 100%;
    min-height: 90px;
    box-sizing: border-box;
    border: 1px solid rgba(30, 75, 153, 0.14);
    border-radius: 14px;
    padding: 12px 14px;
    font: inherit;
    color: #16345f;
    background: #fff;
    resize: vertical;
}

.report-dialog-root {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.report-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 23, 43, 0.54);
    backdrop-filter: blur(3px);
}

.report-dialog-card {
    position: relative;
    width: min(100% - 28px, 560px);
    margin: 8vh auto 0;
    padding: 24px 22px 22px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 28px 54px rgba(18, 43, 89, 0.28);
    border: 1px solid rgba(27, 62, 127, 0.1);
    display: grid;
    gap: 18px;
}

.report-dialog-title {
    font-size: 1.28rem;
    font-weight: 800;
    color: #17376c;
}

.report-dialog-subtitle {
    margin-top: 6px;
    color: #5f728f;
    line-height: 1.5;
}

.report-dialog-reasons {
    display: grid;
    gap: 12px;
}

.report-dialog-reasons-label,
.report-dialog-note-label {
    color: #435a7c;
    font-size: 0.9rem;
    font-weight: 700;
}

.report-dialog-reason-list {
    display: grid;
    gap: 10px;
}

.report-dialog-reason-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(27, 62, 127, 0.1);
    background: rgba(245, 248, 255, 0.96);
    color: #445c7d;
    cursor: pointer;
}

.report-dialog-reason-option input {
    margin: 0;
}

.report-dialog-note-field {
    display: grid;
    gap: 10px;
}

.report-dialog-note-input {
    width: 100%;
    min-height: 110px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(27, 62, 127, 0.12);
    background: rgba(248, 251, 255, 0.96);
    color: #17376c;
    resize: vertical;
    box-sizing: border-box;
    font: inherit;
}

.report-dialog-note-input:focus {
    outline: none;
    border-color: rgba(34, 97, 212, 0.46);
    box-shadow: 0 0 0 4px rgba(34, 97, 212, 0.12);
}

.report-dialog-error {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(180, 35, 24, 0.08);
    border: 1px solid rgba(180, 35, 24, 0.12);
    color: #9a2318;
    line-height: 1.45;
}

.report-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-reports-list {
    display: grid;
    gap: 18px;
}

.report-queue-card {
    display: grid;
    gap: 14px;
}

.report-queue-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.report-queue-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.report-type-badge,
.report-reason-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
}

.report-type-badge {
    background: rgba(24, 71, 148, 0.1);
    color: #2351a0;
}

.report-reason-badge {
    background: rgba(193, 121, 18, 0.1);
    color: #925d0e;
}

.report-queue-meta {
    display: grid;
    gap: 8px;
    color: #506884;
    line-height: 1.5;
}

.report-queue-meta strong,
.report-queue-note strong {
    color: #17376c;
}

.report-queue-snapshot {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(246, 249, 255, 0.96);
    border: 1px solid rgba(27, 62, 127, 0.08);
    color: #263b5c;
    line-height: 1.58;
    white-space: pre-wrap;
}

.report-queue-note {
    color: #506884;
    line-height: 1.5;
}

.report-queue-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.app-tabbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(84px, 112px));
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
    border: none;
    border-top: 1px solid var(--bubo-nav-border);
    border-radius: 0;
    background: var(--bubo-nav-surface);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.82), 0 -8px 18px rgba(18, 43, 89, 0.08);
    backdrop-filter: none;
}

.app-tabbar.hidden {
    display: none !important;
}

.app-tab-link {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    padding: 5px 6px;
    gap: 4px;
    border-radius: 12px;
    border: 1px solid transparent;
    color: var(--bubo-nav-muted);
    text-decoration: none;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

.app-tab-icon {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: 0.88;
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.app-tab-link:hover {
    background: var(--bubo-nav-item-bg);
    border-color: var(--bubo-nav-item-border);
    color: var(--bubo-nav-text);
}

.app-tab-link:hover .app-tab-icon,
.app-tab-link.active .app-tab-icon {
    opacity: 1;
    transform: translateY(-1px);
}

.app-tab-link.active {
    background: var(--bubo-nav-active-bg);
    border-color: var(--bubo-nav-active-border);
    color: var(--bubo-nav-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.app-tab-badge {
    position: absolute;
    top: 4px;
    right: 8px;
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #d74f3f 0%, #d9a142 100%);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 16px rgba(169, 65, 45, 0.22);
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    pointer-events: none;
}

.app-tab-badge.hidden,
.top-notifications-badge.hidden {
    display: none !important;
}

@media (max-width: 720px) {
    .app-page-main {
        padding: 16px 14px 90px;
    }

    .page-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .page-hero h2 {
        font-size: 1.75rem;
    }

    .summary-card,
    .thread-card,
    .thread-detail-card,
    .thread-reply-card,
    .thread-composer {
        padding: 14px;
        border-radius: 18px;
    }

    .summary-card-avatar {
        width: 44px;
        height: 44px;
    }

    .summary-card-title,
    .thread-card-title {
        font-size: 1.08rem;
    }

    .summary-card-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .notifications-section-actions {
        justify-content: flex-start;
        margin: -2px 0 10px;
    }

    .activity-summary-card {
        align-items: stretch;
        flex-direction: column;
        padding: 16px;
        border-radius: 22px;
    }

    .activity-summary-metrics {
        width: 100%;
    }

    .activity-summary-metric {
        flex: 1;
        min-width: 0;
    }

    .thread-scope-switch {
        width: 100%;
        box-sizing: border-box;
        justify-content: space-between;
    }

    .thread-scope-btn {
        flex: 1;
        text-align: center;
    }

    .notification-card-body {
        gap: 8px;
    }

    .notification-card-meta-row {
        justify-content: flex-start;
    }

    .notification-card-actions {
        justify-content: flex-start;
        margin-top: 10px;
    }

    .activity-empty-card {
        align-items: flex-start;
    }

    .chat-info-action-grid {
        grid-template-columns: 1fr;
    }

    .summary-card-meta-right {
        width: 100%;
        justify-content: space-between;
    }

    .app-tabbar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: stretch;
        margin: 0;
        gap: 6px;
        padding: 5px 8px calc(5px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
    }

    .thread-reply-actions {
        justify-content: flex-start;
    }

    .thread-detail-actions {
        justify-content: flex-start;
    }

    .thread-comment-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .thread-comment-thread-lane {
        grid-template-columns: 14px minmax(0, 1fr);
        column-gap: 10px;
    }

    .thread-comment-thread-rail {
        width: 14px;
        height: 20px;
        margin-top: -3px;
    }

    .thread-comment-composer-lane {
        margin-left: 24px;
    }

    .thread-comment-composer-lane::before {
        left: -16px;
    }

    .thread-child-reply-card,
    .thread-thread-anchor-card,
    .thread-comment-card.has-thread {
        padding-left: 12px;
    }

    .thread-media-attachment {
        width: 100%;
        border-radius: 16px;
    }

    .thread-media-image {
        max-height: 360px;
    }

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

    .user-profile-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .user-profile-avatar {
        width: 88px;
        height: 88px;
    }

    .user-profile-name-row h3 {
        font-size: 1.5rem;
    }

    .user-profile-actions {
        justify-content: flex-start;
    }

    .search-input-shell {
        min-height: 52px;
        border-radius: 16px;
    }

    .search-clear-btn {
        width: 100%;
        min-height: 44px;
        border-radius: 14px;
    }

    .home-search-fab {
        right: 16px;
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
        width: 56px;
        height: 56px;
    }

    .home-search-fab-icon {
        width: 22px;
        height: 22px;
    }

    .thread-reply-action-btn {
        padding: 5px 10px;
        font-size: 0.82rem;
    }

    .app-tab-link {
        min-height: 40px;
        padding: 4px 5px;
        border-radius: 10px;
        font-size: 0.76rem;
        gap: 3px;
    }

    .app-tab-icon {
        width: 17px;
        height: 17px;
    }
}

.bubo-dialog-open {
    overflow: hidden !important;
}

.bubo-dialog-root {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bubo-dialog-root.hidden {
    display: none !important;
}

.bubo-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 27, 56, 0.42);
    backdrop-filter: blur(8px);
}

.bubo-dialog-card {
    position: relative;
    width: min(100%, 430px);
    display: grid;
    gap: 18px;
    padding: 22px 20px 18px;
    border-radius: 24px;
    border: 1px solid rgba(23, 67, 141, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 30px 60px rgba(16, 39, 78, 0.26);
}

.bubo-dialog-card[data-tone="danger"] {
    border-color: rgba(180, 35, 24, 0.12);
    box-shadow: 0 30px 60px rgba(111, 38, 34, 0.18);
}

.bubo-dialog-accent {
    width: 56px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #1a6bff 0%, #1d53d6 100%);
}

.bubo-dialog-card[data-tone="danger"] .bubo-dialog-accent {
    background: linear-gradient(135deg, #ef5a49 0%, #d92d20 100%);
}

.bubo-dialog-copy {
    display: grid;
    gap: 10px;
}

.bubo-dialog-title {
    margin: 0;
    color: #17376c;
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.bubo-dialog-message {
    color: #4e6482;
    font-size: 0.98rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

.bubo-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.bubo-dialog-btn {
    min-height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}

.bubo-dialog-btn:hover {
    transform: translateY(-1px);
}

.bubo-dialog-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(91, 149, 255, 0.16);
}

.bubo-dialog-btn-secondary {
    background: #edf4ff;
    color: #17438d;
    box-shadow: inset 0 0 0 1px rgba(23, 67, 141, 0.08);
}

.bubo-dialog-btn-primary {
    background: linear-gradient(135deg, #1a6bff 0%, #1d53d6 100%);
    color: white;
    box-shadow: 0 12px 22px rgba(26, 77, 170, 0.22);
}

.bubo-dialog-btn-danger {
    background: linear-gradient(135deg, #ef5a49 0%, #d92d20 100%);
    color: white;
    box-shadow: 0 12px 22px rgba(180, 45, 32, 0.22);
}

@media (max-width: 640px) {
    .bubo-dialog-root {
        padding: 16px;
        align-items: flex-end;
    }

    .bubo-dialog-card {
        width: 100%;
        padding: 20px 16px 16px;
        border-radius: 24px 24px 20px 20px;
    }

    .bubo-dialog-actions {
        flex-direction: column-reverse;
    }

    .bubo-dialog-btn {
        width: 100%;
    }
}

/* BUBO identity refresh */
body {
    color: var(--bubo-ink-900);
    background:
        radial-gradient(circle at top left, rgba(86, 126, 219, 0.16), transparent 30%),
        radial-gradient(circle at top right, rgba(217, 161, 66, 0.12), transparent 28%),
        radial-gradient(circle at bottom left, rgba(55, 87, 157, 0.12), transparent 24%),
        linear-gradient(180deg, #f7f4ee 0%, #f6f8fe 42%, #eef2fa 100%);
}

.app-page-shell,
.chat-page-shell {
    --bubo-header-surface: linear-gradient(135deg, #203268 0%, #2852ba 46%, #274286 100%);
    --bubo-header-border: rgba(15, 28, 63, 0.18);
    --bubo-header-item-bg: rgba(255, 255, 255, 0.12);
    --bubo-header-item-border: rgba(255, 255, 255, 0.2);
    --bubo-header-item-hover-bg: rgba(255, 255, 255, 0.18);
    --bubo-header-active-bg: rgba(255, 255, 255, 0.22);
    --bubo-header-active-border: rgba(255, 255, 255, 0.34);
    --bubo-header-text: #ffffff;
    --bubo-nav-surface: linear-gradient(180deg, rgba(255, 250, 244, 0.96) 0%, rgba(242, 246, 255, 0.98) 100%);
    --bubo-nav-border: rgba(43, 58, 96, 0.1);
    --bubo-nav-item-bg: rgba(255, 255, 255, 0.82);
    --bubo-nav-item-border: rgba(43, 58, 96, 0.08);
    --bubo-nav-item-hover-bg: rgba(245, 247, 255, 0.98);
    --bubo-nav-active-bg: rgba(32, 68, 170, 0.12);
    --bubo-nav-active-border: rgba(32, 68, 170, 0.18);
    --bubo-nav-text: var(--bubo-ink-900);
    --bubo-nav-muted: var(--bubo-ink-700);
    background:
        radial-gradient(circle at top left, rgba(86, 126, 219, 0.12), transparent 28%),
        radial-gradient(circle at top right, rgba(217, 161, 66, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(251, 247, 240, 0.95) 0%, rgba(245, 248, 254, 0.98) 36%, rgba(238, 242, 250, 0.98) 100%);
    color: var(--bubo-ink-900);
}

.app-page-main {
    width: 100%;
    max-width: 1180px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 26px 20px 112px;
}

.page-hero {
    margin-bottom: 26px;
    padding: 0 2px;
    gap: 18px;
}

.page-hero h2 {
    margin: 0 0 8px;
    font-family: Arial, sans-serif;
    font-size: clamp(2.1rem, 2vw + 1.4rem, 3rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    color: var(--bubo-ink-950);
}

.page-hero p {
    max-width: 66ch;
    color: var(--bubo-ink-700);
    line-height: 1.65;
}

.hero-chip {
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(189, 130, 43, 0.16);
    background: linear-gradient(180deg, rgba(255, 249, 236, 0.98) 0%, rgba(249, 238, 209, 0.98) 100%);
    color: #8d5b10;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

#top-bar {
    position: sticky;
    top: 0;
    min-height: 72px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--bubo-header-border);
    background:
        radial-gradient(circle at top right, rgba(232, 192, 108, 0.16), transparent 28%),
        var(--bubo-header-surface);
    box-shadow: 0 18px 34px rgba(22, 32, 58, 0.16);
    backdrop-filter: blur(16px);
}

.top-bar-brand {
    gap: 16px;
}

.brand-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.brand-mark-image {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 12px 20px rgba(13, 20, 42, 0.24));
}

.brand-logo-image {
    height: 40px;
    max-width: 176px;
    object-fit: contain;
}

#toggle-button,
#home-button,
#top-user-summary,
#top-notifications-button,
.top-search-button {
    transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

#toggle-button,
#home-button {
    min-height: 42px;
    height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--bubo-header-item-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.1) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
    color: var(--bubo-header-text);
    font-weight: 800;
    letter-spacing: 0.01em;
}

#toggle-button:hover,
#home-button:hover,
#top-user-summary:hover,
#top-notifications-button:hover,
.top-search-button:hover {
    background: var(--bubo-header-item-hover-bg);
    border-color: var(--bubo-header-active-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 24px rgba(18, 32, 61, 0.14);
    filter: saturate(1.04);
    transform: translateY(-1px);
}

#top-user-summary {
    max-width: 248px;
    min-height: 44px;
    height: 44px;
    padding: 0 14px 0 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.09) 100%);
}

#top-user-avatar {
    width: 30px;
    height: 30px;
    border: 2px solid rgba(255, 255, 255, 0.56);
    box-shadow: 0 8px 18px rgba(13, 22, 41, 0.18);
}

#top-user-name {
    font-weight: 800;
    letter-spacing: 0.01em;
}

#top-notifications-button,
.top-search-button {
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.1) 100%);
}

.top-notifications-badge {
    width: 21px;
    min-width: 21px;
    height: 21px;
    padding: 0;
    background: linear-gradient(135deg, #efbb57 0%, #d48f25 100%);
    color: #fffdf7;
    box-shadow: 0 10px 18px rgba(201, 134, 24, 0.3);
}

.inline-notice,
.search-toolbar-card,
.summary-card,
.thread-card,
.thread-detail-card,
.thread-reply-card,
.thread-composer,
.empty-state-card,
.report-card {
    border: 1px solid var(--bubo-line-soft);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(250, 251, 255, 0.95) 100%);
    box-shadow: var(--bubo-shadow-card);
    backdrop-filter: blur(12px);
}

.inline-notice {
    color: var(--bubo-ink-700);
}

.inline-notice-warning,
.profile-banner-warning {
    border-color: rgba(185, 132, 35, 0.24);
    background:
        radial-gradient(circle at top right, rgba(217, 161, 66, 0.12), transparent 26%),
        linear-gradient(180deg, rgba(255, 250, 239, 0.96) 0%, rgba(250, 247, 240, 0.98) 100%);
}

.inline-notice-title {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--bubo-ink-900);
}

.inline-notice-copy {
    margin: 0;
    color: var(--bubo-ink-700);
    line-height: 1.58;
}

.inline-notice-copy.is-error {
    color: #9c2f2f;
}

.inline-notice-actions,
.profile-inline-actions,
.profile-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.inline-notice-actions {
    margin-top: 14px;
}

.onboarding-context-note {
    margin-bottom: 18px;
}

.thread-composer.onboarding-focus {
    border-color: rgba(217, 161, 66, 0.34);
    box-shadow: 0 28px 54px rgba(201, 134, 24, 0.16), var(--bubo-shadow-card);
}

.thread-composer.onboarding-focus::before {
    opacity: 1;
}

.profile-panel-heading {
    margin-bottom: 8px;
}

.profile-inline-actions {
    margin-top: 6px;
}

.profile-btn-secondary {
    border: 1px solid rgba(43, 58, 96, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 244, 255, 0.96) 100%);
    color: var(--bubo-ink-800);
}

.profile-btn-secondary:hover {
    border-color: rgba(42, 89, 205, 0.18);
    color: var(--bubo-owl-blue-700);
}

.home-section {
    margin-bottom: 28px;
}

.home-section-header h3,
.thread-composer h3,
.profile-panel h2,
.profile-banner h2,
.thread-detail-header .thread-card-title,
.user-profile-name-row h3 {
    font-family: Arial, sans-serif;
    letter-spacing: -0.03em;
}

.home-section-header h3 {
    font-size: 1.4rem;
    color: var(--bubo-ink-950);
}

.section-link,
.section-link-btn {
    color: var(--bubo-owl-blue-700);
    font-weight: 800;
}

.section-link:hover,
.section-link-btn:hover {
    color: var(--bubo-owl-blue-600);
}

.search-toolbar {
    gap: 14px;
}

.search-input-shell {
    min-height: 60px;
    border-radius: 20px;
    border: 1px solid rgba(43, 58, 96, 0.1);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.search-input-shell:focus-within,
.thread-composer-field input:focus,
.thread-composer-field textarea:focus,
#message:focus {
    border-color: rgba(42, 89, 205, 0.36);
    box-shadow: 0 0 0 5px rgba(70, 119, 223, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.search-input-icon {
    stroke: var(--bubo-ink-600);
}

#global-search-input,
#message,
.thread-composer-field input,
.thread-composer-field textarea {
    color: var(--bubo-ink-900);
}

#global-search-input::placeholder,
#message::placeholder,
.thread-composer-field input::placeholder,
.thread-composer-field textarea::placeholder {
    color: var(--bubo-ink-500);
}

.search-clear-btn,
.thread-reply-action-btn,
.notification-mark-read-btn,
.composer-attach-btn {
    border: 1px solid rgba(43, 58, 96, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 244, 255, 0.96) 100%);
    color: var(--bubo-ink-800);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
    font-weight: 800;
}

.search-clear-btn:hover,
.thread-reply-action-btn:hover,
.notification-mark-read-btn:hover,
.composer-attach-btn:hover {
    border-color: rgba(42, 89, 205, 0.18);
    background: linear-gradient(180deg, rgba(248, 250, 255, 0.98) 0%, rgba(232, 239, 255, 0.98) 100%);
    color: var(--bubo-owl-blue-700);
}

.home-search-fab,
.primary-action-btn,
#send-button,
.group-popup-primary,
.user-popup-cancel {
    background: linear-gradient(135deg, #244aae 0%, #2f63d9 65%, #2450b8 100%);
    color: white;
    box-shadow: 0 18px 32px rgba(33, 69, 172, 0.24);
}

.home-search-fab {
    width: 64px;
    height: 64px;
    border: 1px solid rgba(255, 255, 255, 0.42);
}

.home-search-fab:hover,
.primary-action-btn:hover,
#send-button:hover,
.group-popup-primary:hover,
.user-popup-cancel:hover {
    box-shadow: 0 24px 40px rgba(33, 69, 172, 0.28);
}

.summary-card,
.thread-card,
.thread-detail-card,
.thread-reply-card,
.thread-composer,
.search-toolbar-card {
    border-radius: 28px;
}

.summary-card:hover,
.thread-card:hover {
    transform: translateY(-3px);
    border-color: rgba(42, 89, 205, 0.16);
    box-shadow: var(--bubo-shadow-strong);
}

.summary-card-title,
.thread-card-title,
.thread-detail-header .thread-card-title,
.user-profile-name-row h3 {
    font-family: Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--bubo-ink-950);
}

.summary-card-title {
    font-size: 1.32rem;
}

.summary-card-time,
.summary-card-meta,
.thread-card-meta,
.profile-subtitle,
.search-helper-text,
.thread-author-meta,
.thread-comment-count {
    color: var(--bubo-ink-600);
}

.summary-card-preview,
.thread-card-preview,
.thread-detail-body,
.thread-reply-body {
    color: var(--bubo-ink-800);
    line-height: 1.62;
}

.summary-card-avatar,
.user-profile-avatar {
    border: 2px solid rgba(84, 108, 167, 0.12);
    box-shadow: 0 14px 22px rgba(28, 43, 76, 0.08);
}

.summary-card-badge,
.profile-username-pill {
    background: linear-gradient(180deg, rgba(255, 248, 231, 0.98) 0%, rgba(252, 240, 209, 0.98) 100%);
    color: #8d5b10;
}

.profile-username-pill.is-verified {
    background: linear-gradient(180deg, rgba(224, 250, 235, 0.98) 0%, rgba(201, 240, 219, 0.98) 100%);
    color: #12613b;
    box-shadow: inset 0 0 0 1px rgba(18, 97, 59, 0.14);
}

.summary-card-unread-badge,
.conversation-unread-badge {
    background: linear-gradient(135deg, #244aae 0%, #2f63d9 100%);
    box-shadow: 0 10px 18px rgba(33, 69, 172, 0.18);
}

.thread-scope-switch {
    padding: 7px;
    border: 1px solid rgba(189, 130, 43, 0.14);
    background: linear-gradient(180deg, rgba(255, 249, 236, 0.92) 0%, rgba(247, 244, 237, 0.96) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.thread-scope-btn {
    color: var(--bubo-ink-700);
    font-weight: 800;
}

.thread-scope-btn.is-active {
    background: linear-gradient(135deg, #244aae 0%, #2f63d9 100%);
    box-shadow: 0 12px 22px rgba(33, 69, 172, 0.22);
}

.thread-composer-field span,
.field-label {
    color: var(--bubo-ink-700);
    font-weight: 800;
}

.thread-composer-field input,
.thread-composer-field textarea,
#message,
#group-name-input,
.profile-input,
.current-value {
    border: 1px solid rgba(43, 58, 96, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.thread-composer-field textarea {
    min-height: 168px;
}

.empty-state-card {
    color: var(--bubo-ink-600);
}

#chat {
    margin: 0;
    flex: 1;
    min-height: 0;
    height: calc(100% - 72px - 92px);
}

#chat-container {
    min-height: 0;
    gap: 14px;
    padding: 18px 18px 0;
    box-sizing: border-box;
}

#conversations {
    width: 200px;
    max-width: 200px;
    border: 1px solid var(--bubo-line-soft);
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(251, 247, 240, 0.9) 0%, rgba(244, 247, 255, 0.95) 100%);
    box-shadow: var(--bubo-shadow-card);
}

#sidebar-content {
    padding: 16px 14px 14px;
}

.sidebar-section-heading {
    color: var(--bubo-ink-600);
}

.sidebar-section-heading::after {
    background: linear-gradient(90deg, rgba(125, 141, 175, 0.4) 0%, rgba(125, 141, 175, 0) 100%);
}

.sidebar-action-btn,
.conversation-item,
.user-list-item {
    border: 1px solid rgba(43, 58, 96, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 248, 255, 0.98) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.sidebar-action-btn:hover,
.conversation-item:hover,
.user-list-item:hover {
    border-color: rgba(42, 89, 205, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 244, 255, 0.98) 100%);
    box-shadow: 0 16px 28px rgba(28, 43, 76, 0.12);
}

.conversation-item.selected,
.group-user-item.selected {
    border-color: rgba(42, 89, 205, 0.22);
    background: linear-gradient(180deg, rgba(244, 247, 255, 0.98) 0%, rgba(234, 240, 255, 0.98) 100%);
    box-shadow: 0 16px 30px rgba(33, 69, 172, 0.12);
}

.conversation-badge,
.user-list-check {
    background: rgba(240, 242, 248, 0.96);
    color: var(--bubo-ink-700);
}

.conversation-subtitle,
.sidebar-action-hint {
    color: var(--bubo-ink-600);
}

#messages {
    border: 1px solid var(--bubo-line-soft);
    border-radius: 32px;
    padding: 18px 18px 20px;
    background:
        radial-gradient(circle at top right, rgba(217, 161, 66, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(255, 253, 248, 0.96) 0%, rgba(246, 248, 255, 0.98) 100%);
    box-shadow: var(--bubo-shadow-card);
}

#message-placeholder {
    color: var(--bubo-ink-600);
    font-style: normal;
}

.message-row {
    margin-bottom: 12px;
}

.msg-bubble {
    padding: 12px 14px;
    border-radius: 22px;
    box-shadow: 0 14px 24px rgba(24, 38, 68, 0.08);
}

.other-message .msg-bubble {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 248, 255, 0.98) 100%);
    color: var(--bubo-ink-900);
    border: 1px solid rgba(43, 58, 96, 0.08);
}

.own-message .msg-bubble {
    background: linear-gradient(135deg, rgba(36, 74, 174, 0.96) 0%, rgba(47, 99, 217, 0.96) 100%);
    color: #fdfefe;
    border: 1px solid rgba(33, 69, 172, 0.18);
}

.own-message .msg-text,
.own-message .msg-text a,
.own-message .msg-reply-author,
.own-message .msg-timestamp,
.own-message .msg-receipt {
    color: inherit;
}

.msg-reply-preview {
    border-left: 3px solid rgba(217, 161, 66, 0.82);
    background: rgba(255, 255, 255, 0.12);
}

.other-message .msg-reply-preview {
    background: rgba(244, 247, 255, 0.96);
}

.msg-attachment {
    border-radius: 18px;
}

.msg-attachment-image {
    background: #dde5f6;
}

.message-action-btn {
    border: 1px solid rgba(43, 58, 96, 0.1);
    background: rgba(255, 255, 255, 0.82);
    color: var(--bubo-ink-700);
    font-weight: 700;
}

.message-action-btn:hover {
    border-color: rgba(42, 89, 205, 0.16);
    color: var(--bubo-owl-blue-700);
}

#bottom-bar {
    min-height: 92px;
    padding: 12px 18px 14px;
    border-top: 1px solid rgba(43, 58, 96, 0.08);
    background: linear-gradient(180deg, rgba(252, 249, 244, 0.98) 0%, rgba(242, 246, 255, 0.98) 100%);
    box-shadow: 0 -18px 34px rgba(28, 43, 76, 0.08);
    backdrop-filter: blur(16px);
}

.bottom-bar-row {
    gap: 12px;
}

#message {
    min-height: 50px;
    padding: 0 16px;
    font-size: 0.98rem;
}

#send-button,
.composer-attach-btn {
    min-height: 50px;
    border-radius: 18px;
    padding: 0 18px;
}

#send-button:disabled,
.group-popup-primary:disabled {
    box-shadow: none;
}

#user-popup-content,
#group-popup-content,
#chat-info-popup-content,
#group-members-popup-content,
.message-menu-popover {
    border: 1px solid var(--bubo-line-soft);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 249, 255, 0.99) 100%);
    box-shadow: var(--bubo-shadow-strong);
}

.app-tabbar {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background:
        linear-gradient(180deg, rgba(255, 251, 246, 0.98) 0%, rgba(243, 247, 255, 0.98) 100%);
    box-shadow: 0 -12px 24px rgba(28, 43, 76, 0.08);
    backdrop-filter: blur(14px);
}

.app-tab-link {
    min-height: 52px;
    gap: 5px;
    border-radius: 18px;
    font-weight: 800;
}

.app-tab-icon {
    width: 19px;
    height: 19px;
}

.app-tab-link:hover {
    box-shadow: 0 12px 20px rgba(28, 43, 76, 0.08);
}

.app-tab-link.active {
    box-shadow: 0 12px 22px rgba(33, 69, 172, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

@media (max-width: 720px) {
    .app-page-main {
        padding: 20px 14px 98px;
    }

    .home-section-header {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .section-link,
    .section-link-btn {
        max-width: 100%;
    }

    #top-bar {
        min-height: 64px;
        padding: 10px 12px;
    }

    .brand-logo-link {
        gap: 10px;
    }

    .brand-mark-image {
        width: 34px;
        height: 34px;
    }

    .brand-logo-image {
        height: 28px;
        max-width: 126px;
    }

    #chat {
        height: calc(100% - 64px - 88px);
    }

    #chat-container {
        gap: 10px;
        padding: 12px 12px 0;
    }

    #conversations {
        width: 200px;
        max-width: 200px;
        border-radius: 24px;
    }

    #messages {
        border-radius: 26px;
        padding: 14px;
    }

    #bottom-bar {
        min-height: 88px;
        padding: 10px 12px 12px;
    }

    #message,
    #send-button,
    .composer-attach-btn {
        min-height: 46px;
    }

    .summary-card,
    .thread-card,
    .thread-detail-card,
    .thread-reply-card,
    .thread-composer,
    .search-toolbar-card {
        border-radius: 22px;
    }
}

/* Surface hierarchy */
.search-toolbar-card,
#conversations {
    border-color: var(--bubo-surface-utility-border);
    background: var(--bubo-surface-utility-bg);
    box-shadow: var(--bubo-surface-utility-shadow);
}

.thread-composer,
.thread-detail-card,
.report-queue-card,
#messages {
    border-color: var(--bubo-surface-primary-border);
    background: var(--bubo-surface-primary-bg);
    box-shadow: var(--bubo-surface-primary-shadow);
}

#bottom-bar {
    background: var(--bubo-surface-primary-bg);
    border-top-color: var(--bubo-surface-primary-border);
    box-shadow: 0 -20px 36px rgba(28, 43, 76, 0.08);
}

.search-toolbar-card,
.thread-composer,
.thread-detail-card,
.report-queue-card {
    position: relative;
    overflow: hidden;
}

.search-toolbar-card::before,
.thread-composer::before,
.thread-detail-card::before,
.report-queue-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(217, 161, 66, 0.92) 0%, rgba(70, 119, 223, 0.92) 52%, rgba(32, 68, 170, 0.72) 100%);
    opacity: 0.95;
    pointer-events: none;
}

.summary-card,
.thread-card,
.thread-reply-card,
.notification-card,
.thread-comment-card {
    border-color: var(--bubo-surface-secondary-border);
    background: var(--bubo-surface-secondary-bg);
    box-shadow: var(--bubo-surface-secondary-shadow);
}

.summary-card-thread,
.search-user-card,
.inline-notice,
.empty-state-card,
.thread-scope-switch,
.notification-card.is-read,
.report-queue-meta,
.report-queue-note,
.report-queue-snapshot {
    border-color: var(--bubo-surface-muted-border);
    background: var(--bubo-surface-muted-bg);
    box-shadow: var(--bubo-surface-muted-shadow);
}

.report-queue-meta,
.report-queue-note,
.report-queue-snapshot {
    padding: 14px 16px;
    border: 1px solid var(--bubo-surface-muted-border);
    border-radius: 18px;
}

.summary-card.has-unread,
.conversation-item.has-unread,
.conversation-item.selected,
.thread-card.is-following,
.notification-card:not(.is-read) {
    border-color: rgba(42, 89, 205, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 245, 255, 0.99) 100%);
    box-shadow: 0 20px 34px rgba(33, 69, 172, 0.12);
}

.summary-card.has-unread .summary-card-title,
.conversation-item.has-unread .conversation-label,
.conversation-item.selected .conversation-label,
.thread-card.is-following .thread-card-title,
.notification-card:not(.is-read) .summary-card-title {
    color: var(--bubo-owl-blue-700);
}

.summary-card-thread .summary-card-title,
.search-user-card .summary-card-title,
.notification-card.is-read .summary-card-title {
    color: var(--bubo-ink-900);
}

.summary-card-thread:hover,
.search-user-card:hover,
.notification-card.is-read:hover {
    border-color: rgba(44, 57, 94, 0.1);
    box-shadow: 0 12px 22px rgba(28, 43, 76, 0.06);
}

.inline-notice,
.empty-state-card {
    border-style: solid;
}

.thread-scope-switch {
    box-shadow: none;
}

.thread-detail-meta,
.thread-card-meta,
.summary-card-meta,
.summary-card-time,
.report-queue-meta,
.report-queue-note,
.report-queue-snapshot {
    color: var(--bubo-ink-600);
}

/* Chat immersion refresh */
#chat-container {
    min-width: 0;
    align-items: stretch;
    gap: 16px;
}

#conversations {
    width: min(236px, calc(100vw - 24px));
    max-width: min(236px, calc(100vw - 24px));
    border-radius: 32px;
}

#sidebar-content,
#messages,
#bottom-bar,
.bottom-bar-row {
    min-width: 0;
}

.conversation-list {
    gap: 10px;
}

.conversation-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 13px 13px 12px;
    border-radius: 24px;
}

.conversation-avatar {
    width: 44px;
    height: 44px;
    border: 2px solid rgba(255, 255, 255, 0.86);
    box-shadow: 0 12px 22px rgba(28, 43, 76, 0.14);
}

.conversation-main {
    gap: 5px;
}

.conversation-title-row {
    gap: 7px;
}

.conversation-label {
    color: var(--bubo-ink-950);
    font-size: 0.96rem;
}

.conversation-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.conversation-preview {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bubo-ink-700);
    font-size: 0.78rem;
    line-height: 1.35;
}

.conversation-time {
    flex-shrink: 0;
    color: var(--bubo-ink-500);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.conversation-item.has-unread .conversation-preview,
.conversation-item.selected .conversation-preview {
    color: var(--bubo-ink-800);
}

.conversation-badge {
    background: rgba(217, 161, 66, 0.16);
    color: var(--bubo-amber-600);
}

.conversation-unread-badge {
    box-shadow: 0 10px 18px rgba(42, 89, 205, 0.18);
}

#conversations .conversation-hide-btn {
    align-self: center;
    margin-left: 12px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(43, 58, 96, 0.16);
    background: linear-gradient(180deg, rgba(255, 252, 246, 0.98) 0%, rgba(244, 247, 255, 0.98) 100%);
    box-shadow: 0 10px 18px rgba(28, 43, 76, 0.08);
    color: var(--bubo-ink-800);
    opacity: 0.88;
    transform: none;
    transition:
        opacity 0.16s ease,
        transform 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        background-color 0.16s ease,
        box-shadow 0.16s ease;
}

.conversation-item:hover .conversation-hide-btn,
.conversation-item.selected .conversation-hide-btn {
    opacity: 1;
    transform: none;
}

#conversations .conversation-hide-btn:hover {
    border-color: rgba(42, 89, 205, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(239, 244, 255, 0.98) 100%);
    color: var(--bubo-owl-blue-700);
    box-shadow: 0 12px 22px rgba(28, 43, 76, 0.11);
}

#messages-pane {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mobile-chat-detail-header {
    display: none;
}

#chat.mobile-chat-list #chat-container,
#chat.mobile-chat-detail #chat-container {
    justify-content: center;
    gap: 0;
}

#chat.mobile-chat-list #conversations {
    display: flex !important;
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    height: 100%;
    margin: 0 auto;
}

#chat.mobile-chat-list #messages-pane,
#chat.mobile-chat-detail #conversations {
    display: none !important;
}

#chat.mobile-chat-detail #messages-pane {
    display: flex !important;
    flex-direction: column;
    width: min(960px, 100%);
    min-width: 0;
    margin: 0 auto;
}

#chat.mobile-chat-list .split-preview-overlay,
#chat.mobile-chat-detail .split-preview-overlay,
#chat.mobile-chat-list .composer-preview-overlay,
#chat.mobile-chat-detail .composer-preview-overlay {
    display: none !important;
    pointer-events: none !important;
}

#chat.mobile-chat-list ~ #composer-accessories,
#chat.mobile-chat-list ~ #bottom-bar {
    display: none !important;
}

#chat.mobile-chat-detail .mobile-chat-detail-header:not(.hidden) {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(42, 89, 205, 0.12);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(242, 247, 255, 0.98) 100%);
    box-shadow: 0 14px 28px rgba(28, 43, 76, 0.1);
}

.mobile-chat-detail-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 10px 18px rgba(28, 43, 76, 0.13);
}

.mobile-chat-detail-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.mobile-chat-detail-name {
    overflow: hidden;
    color: var(--bubo-ink-900);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-chat-detail-subtitle {
    overflow: hidden;
    margin-top: 3px;
    color: var(--bubo-ink-600);
    font-size: 0.78rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-chat-detail-chip {
    flex: 0 0 auto;
    max-width: 96px;
    overflow: hidden;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(42, 89, 205, 0.1);
    color: var(--bubo-owl-blue-700);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-chat-detail-chip.is-blocked {
    background: rgba(214, 70, 70, 0.12);
    color: var(--bubo-danger-600);
}

.mobile-chat-info-button,
.mobile-chat-search-button,
.mobile-chat-shopping-button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(42, 89, 205, 0.16);
    background: rgba(255, 255, 255, 0.82);
    color: var(--bubo-owl-blue-700);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(28, 43, 76, 0.08);
}

.mobile-chat-info-button:hover,
.mobile-chat-search-button:hover,
.mobile-chat-shopping-button:hover {
    background: rgba(239, 244, 255, 0.98);
    border-color: rgba(42, 89, 205, 0.24);
}

.mobile-chat-search-button.is-active {
    background: linear-gradient(135deg, rgba(32, 68, 170, 0.96) 0%, rgba(54, 104, 219, 0.96) 100%);
    border-color: rgba(32, 68, 170, 0.24);
    color: white;
}

.mobile-chat-shopping-button {
    border-color: rgba(217, 161, 66, 0.26);
    background: rgba(255, 249, 237, 0.9);
    color: var(--bubo-amber-600);
}

.mobile-chat-shopping-button.is-active {
    background: linear-gradient(135deg, rgba(217, 161, 66, 0.98) 0%, rgba(236, 181, 75, 0.98) 100%);
    border-color: rgba(185, 124, 37, 0.28);
    color: white;
}

.chat-info-status {
    color: var(--bubo-ink-600);
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.45;
}

.chat-info-status.error {
    color: var(--bubo-danger-600);
}

.chat-info-status.success {
    color: var(--bubo-owl-blue-700);
}

.chat-info-content {
    display: grid;
    gap: 14px;
}

.chat-info-hero {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(42, 89, 205, 0.1);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 246, 255, 0.98));
}

.chat-info-avatar {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border-radius: 18px;
    object-fit: cover;
    border: 1px solid rgba(42, 89, 205, 0.12);
    background: white;
    box-shadow: 0 12px 22px rgba(28, 43, 76, 0.1);
}

.chat-info-hero-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.chat-info-hero-copy strong {
    overflow: hidden;
    color: var(--bubo-ink-900);
    font-size: 1.08rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-info-hero-copy span {
    color: var(--bubo-ink-600);
    font-size: 0.82rem;
    font-weight: 800;
}

.chat-info-notice {
    padding: 11px 12px;
    border-radius: 16px;
    border: 1px solid rgba(214, 70, 70, 0.14);
    background: rgba(214, 70, 70, 0.08);
    color: var(--bubo-danger-600);
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.45;
}

.chat-info-details {
    display: grid;
    gap: 8px;
}

.chat-info-detail {
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    border-radius: 16px;
    background: rgba(248, 250, 255, 0.98);
}

.chat-info-detail span {
    color: var(--bubo-ink-500);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chat-info-detail strong {
    color: var(--bubo-ink-900);
    font-size: 0.92rem;
    line-height: 1.35;
}

.chat-info-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.chat-info-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(42, 89, 205, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--bubo-owl-blue-700);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.chat-info-action:hover {
    background: rgba(239, 244, 255, 0.98);
    border-color: rgba(42, 89, 205, 0.22);
}

.chat-info-action.danger {
    border-color: rgba(214, 70, 70, 0.16);
    background: rgba(214, 70, 70, 0.08);
    color: var(--bubo-danger-600);
}

.chat-info-actions {
    display: flex;
    justify-content: flex-end;
}

.group-members-summary {
    margin: 5px 0 0;
    color: var(--bubo-ink-600);
    font-size: 0.86rem;
    line-height: 1.4;
}

.group-members-status {
    color: var(--bubo-ink-600);
    font-size: 0.88rem;
    line-height: 1.45;
}

.group-members-status.error {
    color: var(--bubo-danger-600);
    font-weight: 800;
}

.group-member-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid rgba(42, 89, 205, 0.1);
    border-radius: 16px;
    background: rgba(248, 250, 255, 0.98);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.group-member-row:hover {
    background: rgba(239, 244, 255, 0.98);
    border-color: rgba(42, 89, 205, 0.2);
    transform: translateY(-1px);
}

.group-member-avatar {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    object-fit: cover;
    border: 1px solid rgba(42, 89, 205, 0.12);
    background: white;
}

.group-member-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.group-member-copy strong {
    overflow: hidden;
    color: var(--bubo-ink-900);
    font-size: 0.94rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-member-copy small {
    color: var(--bubo-ink-600);
    font-size: 0.78rem;
    font-weight: 800;
}

.group-members-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.group-members-add-btn {
    flex: 1 1 auto;
    min-height: 42px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #244aae 0%, #2f63d9 100%);
    color: white;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.shopping-lists-panel {
    margin: 0 0 10px;
    padding: 10px;
    max-height: min(40vh, 340px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(42, 89, 205, 0.13);
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(217, 161, 66, 0.13), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 247, 255, 0.98) 100%);
    box-shadow: 0 14px 28px rgba(28, 43, 76, 0.09);
}

.shopping-lists-panel.is-collapsed {
    margin-bottom: 0;
    padding: 0;
    max-height: 0;
    display: block;
    border: none;
    background: transparent;
    box-shadow: none;
}

.shopping-lists-panel.is-collapsed .shopping-lists-header {
    display: none;
}

.shopping-lists-header,
.shopping-list-toolbar,
.shopping-lists-create,
.shopping-item-create {
    display: flex;
    align-items: center;
    gap: 8px;
}

.shopping-lists-header {
    justify-content: space-between;
}

.shopping-lists-eyebrow {
    color: var(--bubo-amber-700);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.shopping-lists-header h3 {
    margin: 2px 0 0;
    color: var(--bubo-ink-900);
    font-size: 0.96rem;
}

.shopping-lists-toggle,
.shopping-list-toolbar button,
.shopping-lists-create button,
.shopping-item-create button,
.shopping-item-delete {
    border: 1px solid rgba(42, 89, 205, 0.15);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--bubo-owl-blue-700);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
}

.shopping-lists-toggle,
.shopping-list-toolbar button,
.shopping-lists-create button,
.shopping-item-create button {
    min-height: 34px;
    padding: 7px 11px;
}

.shopping-lists-body {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    min-height: 0;
    overflow: hidden;
}

.shopping-lists-body.hidden {
    display: none !important;
}

.shopping-lists-create input,
.shopping-item-create input,
.shopping-list-toolbar select {
    min-width: 0;
    min-height: 36px;
    border: 1px solid rgba(43, 58, 96, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--bubo-ink-900);
    font: inherit;
}

.shopping-lists-create,
.shopping-item-create {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.shopping-list-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
}

.shopping-lists-create input,
.shopping-item-create input {
    flex: 1 1 auto;
    padding: 0 11px;
}

.shopping-list-toolbar select {
    flex: 1 1 auto;
    padding: 0 9px;
    font-weight: 800;
}

.shopping-list-toolbar button,
.shopping-lists-create button,
.shopping-item-create button {
    white-space: nowrap;
}

.shopping-list-workspace {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
    overflow: hidden;
}

.shopping-danger-action {
    color: var(--bubo-danger-600) !important;
}

.shopping-lists-empty,
.shopping-items-empty {
    padding: 10px 12px;
    border: 1px dashed rgba(43, 58, 96, 0.15);
    border-radius: 14px;
    color: var(--bubo-ink-600);
    font-size: 0.84rem;
}

.shopping-items {
    display: grid;
    gap: 7px;
    min-height: 78px;
    max-height: none;
    overflow-y: auto;
    padding-right: 2px;
}

.shopping-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 8px;
    border: 1px solid rgba(43, 58, 96, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
}

.shopping-item-check {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(42, 89, 205, 0.22);
    border-radius: 50%;
    background: white;
    color: var(--bubo-owl-blue-700);
    font-weight: 900;
    cursor: pointer;
}

.shopping-item-text {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.shopping-item-text span {
    overflow-wrap: anywhere;
    color: var(--bubo-ink-900);
    font-size: 0.9rem;
    font-weight: 800;
}

.shopping-item-text small {
    color: var(--bubo-ink-500);
    font-size: 0.72rem;
    font-weight: 700;
}

.shopping-item.is-purchased .shopping-item-check {
    background: var(--bubo-owl-blue-600);
    color: white;
}

.shopping-item.is-purchased .shopping-item-text span {
    color: var(--bubo-ink-500);
    text-decoration: line-through;
}

.shopping-item-delete {
    width: 30px;
    height: 30px;
    color: var(--bubo-danger-600);
}

.shopping-lists-panel.is-read-only input,
.shopping-lists-panel.is-read-only button:not(.shopping-lists-toggle),
.shopping-lists-panel button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.message-search-panel {
    margin: 0 0 10px;
    padding: 10px;
    border: 1px solid rgba(42, 89, 205, 0.13);
    border-radius: 20px;
    background:
        radial-gradient(circle at top left, rgba(70, 119, 223, 0.1), transparent 38%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 247, 255, 0.98) 100%);
    box-shadow: 0 14px 28px rgba(28, 43, 76, 0.08);
}

.message-search-panel.hidden {
    display: none !important;
}

.message-search-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

#message-search-input {
    min-width: 0;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(43, 58, 96, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--bubo-ink-900);
    font: inherit;
}

#message-search-input:focus {
    outline: none;
    border-color: rgba(42, 89, 205, 0.3);
    box-shadow: 0 0 0 3px rgba(42, 89, 205, 0.12);
}

#message-search-close {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(42, 89, 205, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--bubo-owl-blue-700);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 900;
    cursor: pointer;
}

.message-search-results {
    display: grid;
    gap: 7px;
    max-height: min(28vh, 220px);
    overflow-y: auto;
    margin-top: 9px;
}

.message-search-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid rgba(43, 58, 96, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.message-search-result:hover {
    border-color: rgba(42, 89, 205, 0.22);
    background: rgba(239, 244, 255, 0.98);
}

.message-search-result-author {
    overflow: hidden;
    color: var(--bubo-ink-900);
    font-size: 0.82rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-search-result-snippet {
    grid-column: 1 / -1;
    overflow: hidden;
    color: var(--bubo-ink-700);
    font-size: 0.84rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-search-result-time {
    color: var(--bubo-ink-500);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.message-search-empty {
    padding: 9px 10px;
    border: 1px dashed rgba(43, 58, 96, 0.14);
    border-radius: 14px;
    color: var(--bubo-ink-600);
    font-size: 0.84rem;
}

.message-search-notice {
    padding: 8px 10px;
    border: 1px solid rgba(217, 161, 66, 0.22);
    border-radius: 14px;
    background: rgba(255, 249, 237, 0.88);
    color: var(--bubo-amber-700);
    font-size: 0.78rem;
    font-weight: 800;
}

#messages {
    min-width: 0;
    flex: 1;
    padding: 22px 24px 28px;
    background:
        radial-gradient(circle at top right, rgba(217, 161, 66, 0.11), transparent 22%),
        radial-gradient(circle at top left, rgba(70, 119, 223, 0.09), transparent 24%),
        linear-gradient(180deg, rgba(255, 254, 250, 0.98) 0%, rgba(244, 247, 255, 0.98) 100%);
    scroll-padding-top: 84px;
    overflow-x: hidden;
}

#messages-pane.split-preview-active #messages,
#bottom-bar.split-preview-active {
    filter: saturate(0.94);
}

.split-preview-overlay,
.composer-preview-overlay {
    position: absolute;
    inset: 0;
    border: none;
    background: linear-gradient(180deg, rgba(255, 252, 246, 0.18) 0%, rgba(244, 247, 255, 0.3) 100%);
    cursor: pointer;
    z-index: 3;
}

.split-preview-overlay.hidden,
.composer-preview-overlay.hidden {
    display: none !important;
    pointer-events: none;
}

.split-preview-overlay {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 18px;
}

.split-preview-overlay-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(43, 58, 96, 0.14);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 24px rgba(28, 43, 76, 0.12);
    color: var(--bubo-ink-800);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.split-preview-overlay:hover .split-preview-overlay-chip {
    border-color: rgba(42, 89, 205, 0.22);
    color: var(--bubo-owl-blue-700);
}

#message-placeholder {
    padding: 56px 20px;
    color: var(--bubo-ink-600);
}

.message-day-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 8px 0 4px;
}

.message-day-divider::before,
.message-day-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(125, 141, 175, 0) 0%, rgba(125, 141, 175, 0.28) 50%, rgba(125, 141, 175, 0) 100%);
}

.message-day-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border: 1px solid rgba(70, 95, 155, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 18px rgba(28, 43, 76, 0.06);
    color: var(--bubo-ink-600);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.message-row {
    gap: 10px;
    margin: 16px 0 0;
    align-items: flex-end;
}

.message-row.is-continuation {
    margin-top: 6px;
}

.message-avatar-link,
.message-avatar-spacer {
    width: 44px;
    min-width: 44px;
    flex: 0 0 44px;
}

.message-avatar-link {
    align-self: flex-end;
}

.message-avatar-spacer {
    height: 44px;
}

.own-message .message-avatar-spacer {
    order: 2;
}

.message-avatar-link .msg-avatar {
    width: 44px;
    height: 44px;
    border: 2px solid rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 24px rgba(28, 43, 76, 0.14);
}

.msg-bubble {
    max-width: min(72%, 640px);
    padding: 14px 16px 12px;
    border-radius: 24px;
    display: grid;
    gap: 8px;
    box-shadow: 0 18px 30px rgba(24, 38, 68, 0.1);
}

.message-row.is-continuation .msg-bubble {
    border-radius: 21px;
}

.other-message .msg-bubble {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 249, 255, 0.98) 100%);
    border: 1px solid rgba(43, 58, 96, 0.08);
}

.own-message .msg-bubble {
    background: linear-gradient(135deg, rgba(32, 68, 170, 0.98) 0%, rgba(54, 104, 219, 0.97) 100%);
    border: 1px solid rgba(33, 69, 172, 0.18);
    box-shadow: 0 20px 34px rgba(33, 69, 172, 0.22);
}

.msg-sender-name {
    color: var(--bubo-owl-blue-700);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.msg-text {
    font-size: 0.95rem;
    line-height: 1.6;
}

.msg-text-wrapper.image-only .msg-text {
    margin-bottom: 0;
    color: var(--bubo-ink-600);
}

.msg-reply-preview {
    margin-bottom: 0;
    padding: 10px 12px;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.other-message .msg-reply-preview {
    background: linear-gradient(180deg, rgba(243, 247, 255, 0.98) 0%, rgba(248, 250, 255, 0.98) 100%);
}

.msg-attachment {
    width: min(320px, 100%);
    margin-top: 2px;
    border-radius: 20px;
}

.msg-meta-row {
    margin-top: 2px;
    gap: 6px;
}

.msg-timestamp,
.msg-receipt {
    font-size: 0.72rem;
}

.other-message .msg-timestamp,
.other-message .msg-receipt {
    color: var(--bubo-ink-500);
}

.own-message .msg-timestamp,
.own-message .msg-receipt {
    color: rgba(255, 255, 255, 0.78);
}

.msg-reactions {
    margin-top: 2px;
    gap: 6px;
}

.reaction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 8px 14px rgba(28, 43, 76, 0.08);
    font-size: 0.95rem;
    line-height: 1;
}

.own-message .reaction {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

#composer-accessories {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 12px 8px;
    box-sizing: border-box;
    flex: 0 0 auto;
}

#composer-accessories.hidden {
    display: none !important;
}

#bottom-bar {
    position: relative;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    box-sizing: border-box;
    padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(255, 250, 243, 0.98) 0%, rgba(242, 246, 255, 0.99) 100%);
}

#bottom-bar.hidden,
#bottom-bar.split-preview-active {
    display: none !important;
}

.composer-preview-overlay {
    z-index: 4;
    background: linear-gradient(180deg, rgba(255, 251, 246, 0.16) 0%, rgba(244, 247, 255, 0.26) 100%);
}

#bottom-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(217, 161, 66, 0.88) 0%, rgba(70, 119, 223, 0.92) 55%, rgba(32, 68, 170, 0.76) 100%);
    opacity: 0.82;
    pointer-events: none;
}

.reply-preview,
.composer-attachment,
#composer-block-note {
    margin-bottom: 10px;
}

.reply-preview,
.composer-attachment {
    border: 1px solid rgba(70, 95, 155, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 16px 26px rgba(28, 43, 76, 0.08);
    flex: 0 0 auto;
}

.reply-preview.hidden,
.composer-attachment.hidden,
#composer-block-note.hidden {
    display: none !important;
}

#composer-block-note {
    border-radius: 18px;
    background: rgba(217, 161, 66, 0.12);
    color: var(--bubo-ink-800);
}

.bottom-bar-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 5px;
    border: 1px solid rgba(70, 95, 155, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    flex: 0 0 auto;
}

#message {
    min-width: 0;
    flex: 1;
    min-height: 36px;
    max-height: 72px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    box-shadow: none;
    color: var(--bubo-ink-950);
    font-size: 0.96rem;
    font-family: inherit;
    line-height: 1.35;
    resize: none;
    overflow-y: hidden;
    box-sizing: border-box;
}

#message::placeholder {
    color: var(--bubo-ink-500);
}

#message:focus {
    outline: none;
}

.composer-attach-btn,
#send-button {
    min-height: 36px;
    border-radius: 14px;
    align-self: flex-end;
}

.composer-attach-btn {
    min-width: 38px;
    padding: 0 10px;
    border: 1px solid rgba(42, 89, 205, 0.2);
    background: linear-gradient(135deg, rgba(214, 229, 255, 0.98) 0%, rgba(194, 216, 255, 0.98) 58%, rgba(255, 241, 212, 0.96) 100%);
    color: var(--bubo-owl-blue-800);
    box-shadow: 0 10px 18px rgba(42, 89, 205, 0.16);
}

#send-button {
    min-width: 66px;
    padding: 0 12px;
    border: 1px solid rgba(33, 69, 172, 0.18);
    background: linear-gradient(135deg, rgba(32, 68, 170, 0.98) 0%, rgba(54, 104, 219, 0.98) 100%);
    color: #fff;
    box-shadow: 0 18px 28px rgba(33, 69, 172, 0.22);
}

.composer-attach-btn:hover {
    border-color: rgba(42, 89, 205, 0.3);
    background: linear-gradient(135deg, rgba(225, 237, 255, 1) 0%, rgba(204, 224, 255, 0.98) 64%, rgba(255, 245, 224, 0.98) 100%);
    color: var(--bubo-owl-blue-800);
    box-shadow: 0 12px 22px rgba(42, 89, 205, 0.2);
}

/* Android-inspired single-pane chat polish */
.chat-page-shell #chat.mobile-chat-list #conversations {
    border: none;
    border-radius: 30px;
    background:
        radial-gradient(circle at top left, rgba(217, 161, 66, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(255, 254, 250, 0.98) 0%, rgba(244, 247, 255, 0.98) 100%);
    box-shadow: 0 24px 48px rgba(28, 43, 76, 0.12);
}

.chat-page-shell #sidebar-content {
    padding: 18px;
}

.chat-page-shell .sidebar-section-heading {
    margin: 18px 2px 10px;
    color: var(--bubo-ink-600);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chat-page-shell .conversation-search-shell {
    position: relative;
    margin: 0 0 12px;
}

.chat-page-shell #conversation-search {
    width: 100%;
    min-height: 44px;
    padding: 0 44px 0 15px;
    border: 1px solid rgba(42, 89, 205, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--bubo-ink-900);
    font: inherit;
    font-size: 0.92rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 10px 20px rgba(28, 43, 76, 0.05);
}

.chat-page-shell #conversation-search:focus {
    outline: none;
    border-color: rgba(42, 89, 205, 0.3);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 0 0 4px rgba(70, 119, 223, 0.12), 0 12px 24px rgba(28, 43, 76, 0.08);
}

.chat-page-shell #conversation-search::placeholder {
    color: var(--bubo-ink-500);
}

.chat-page-shell .conversation-search-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(42, 89, 205, 0.1);
    color: var(--bubo-owl-blue-700);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

.chat-page-shell .conversation-search-clear:hover {
    background: rgba(42, 89, 205, 0.16);
}

.chat-page-shell .conversation-search-empty {
    margin: 10px 4px 0;
    padding: 14px;
    border: 1px dashed rgba(42, 89, 205, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.64);
    color: var(--bubo-ink-600);
    font-size: 0.88rem;
    text-align: center;
}

.chat-page-shell .conversation-item.conversation-search-hidden {
    display: none !important;
}

.chat-page-shell .conversation-list {
    gap: 11px;
}

.chat-page-shell .conversation-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 13px;
    padding: 14px;
    border: 1px solid rgba(43, 58, 96, 0.08);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 24px rgba(28, 43, 76, 0.06);
}

.chat-page-shell .conversation-item:hover {
    border-color: rgba(42, 89, 205, 0.18);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 32px rgba(28, 43, 76, 0.12);
    transform: translateY(-1px);
}

.chat-page-shell .conversation-item.has-unread {
    border-color: rgba(42, 89, 205, 0.24);
    background:
        radial-gradient(circle at top right, rgba(217, 161, 66, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(240, 245, 255, 0.99) 100%);
    box-shadow: 0 18px 34px rgba(33, 69, 172, 0.16);
}

.chat-page-shell .conversation-avatar {
    width: 52px;
    height: 52px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    box-shadow: 0 12px 22px rgba(28, 43, 76, 0.16);
}

.chat-page-shell .conversation-label {
    color: var(--bubo-ink-950);
    font-size: 1rem;
    font-weight: 800;
}

.chat-page-shell .conversation-preview {
    color: var(--bubo-ink-600);
    font-size: 0.86rem;
}

.chat-page-shell .conversation-time {
    color: var(--bubo-ink-500);
    font-size: 0.74rem;
}

.chat-page-shell .conversation-item.has-unread .conversation-preview,
.chat-page-shell .conversation-item.has-unread .conversation-time {
    color: var(--bubo-ink-800);
}

.chat-page-shell .conversation-unread-badge {
    min-width: 24px;
    height: 24px;
    box-shadow: 0 10px 18px rgba(32, 68, 170, 0.22);
}

.chat-page-shell #conversations .conversation-hide-btn {
    opacity: 1;
    border-color: rgba(43, 58, 96, 0.14);
    background: rgba(255, 255, 255, 0.74);
    color: var(--bubo-ink-700);
}

.chat-page-shell #chat.mobile-chat-detail #messages-pane {
    gap: 0;
}

.chat-page-shell #chat.mobile-chat-detail .mobile-chat-detail-header:not(.hidden) {
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 26px;
}

.chat-page-shell #messages {
    border: none;
    border-radius: 30px;
    padding: 22px 22px 26px;
    background:
        radial-gradient(circle at 8% 0%, rgba(217, 161, 66, 0.1), transparent 24%),
        radial-gradient(circle at 94% 12%, rgba(70, 119, 223, 0.1), transparent 24%),
        linear-gradient(180deg, rgba(255, 254, 250, 0.98) 0%, rgba(244, 247, 255, 0.98) 100%);
    box-shadow: 0 24px 48px rgba(28, 43, 76, 0.12);
}

.chat-page-shell .message-day-divider {
    margin: 10px 0 2px;
}

.chat-page-shell .message-day-chip {
    border: 1px solid rgba(43, 58, 96, 0.08);
    background: rgba(255, 255, 255, 0.72);
    color: var(--bubo-ink-600);
    box-shadow: 0 8px 16px rgba(28, 43, 76, 0.06);
}

.chat-page-shell .message-row {
    gap: 10px;
    margin-top: 15px;
}

.chat-page-shell .message-row.is-continuation {
    margin-top: 5px;
}

.chat-page-shell .msg-bubble {
    max-width: min(76%, 660px);
    padding: 13px 15px 11px;
    border-radius: 24px;
}

.chat-page-shell .message-row.is-continuation .msg-bubble {
    border-radius: 21px;
}

.chat-page-shell .other-message .msg-bubble {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(43, 58, 96, 0.08);
    box-shadow: 0 14px 26px rgba(28, 43, 76, 0.08);
}

.chat-page-shell .own-message .msg-bubble {
    background: linear-gradient(135deg, rgba(32, 68, 170, 0.98) 0%, rgba(54, 104, 219, 0.98) 100%);
    color: #fff;
    box-shadow: 0 18px 30px rgba(33, 69, 172, 0.22);
}

.chat-page-shell #bottom-bar {
    padding: 9px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    background: transparent;
    border-top: none;
    box-shadow: none;
}

.chat-page-shell .bottom-bar-row {
    max-width: 960px;
    margin: 0 auto;
    border: 1px solid rgba(42, 89, 205, 0.12);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 36px rgba(28, 43, 76, 0.14);
}

@media (max-width: 640px) {
    body.chat-page-shell.chat-detail-active {
        padding-bottom: 0;
    }

    body.chat-page-shell.chat-detail-active .app-tabbar {
        display: none !important;
    }

    #chat {
        min-height: 0;
    }

    #chat-container {
        gap: 12px;
        padding: 12px 10px 0;
        min-height: 0;
    }

    #conversations {
        width: 100%;
        max-width: none;
        border-radius: 24px;
    }

    #chat.mobile-chat-list #conversations,
    #chat.mobile-chat-detail #messages-pane {
        width: 100% !important;
        max-width: none !important;
    }

    #sidebar-content {
        padding: 14px 12px;
    }

    .conversation-list {
        gap: 9px;
    }

    .conversation-item {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: 13px;
        border-radius: 20px;
    }

    .conversation-avatar {
        width: 46px;
        height: 46px;
    }

    .conversation-label {
        font-size: 0.98rem;
    }

    .conversation-preview {
        font-size: 0.82rem;
    }

    .conversation-time {
        font-size: 0.72rem;
    }

    .conversation-item.has-unread {
        box-shadow: 0 14px 26px rgba(33, 69, 172, 0.13);
    }

    #conversations .conversation-hide-btn {
        opacity: 1;
        margin-left: 8px;
        padding: 7px 10px;
    }

    #messages {
        padding: 16px 12px 18px;
        border-radius: 24px;
    }

    .chat-page-shell #chat.mobile-chat-detail .mobile-chat-detail-header:not(.hidden) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto auto;
        gap: 8px;
        align-items: center;
        margin-bottom: 8px;
        padding: 9px 10px;
        border-radius: 22px;
    }

    .mobile-chat-detail-avatar {
        width: 38px;
        height: 38px;
        border-radius: 14px;
    }

    .mobile-chat-detail-name {
        font-size: 0.93rem;
    }

    .mobile-chat-detail-subtitle {
        font-size: 0.74rem;
    }

    .mobile-chat-detail-chip {
        display: none;
    }

    .mobile-chat-info-button,
    .mobile-chat-search-button,
    .mobile-chat-shopping-button {
        min-width: 0;
        min-height: 32px;
        padding: 6px 9px;
        font-size: 0.7rem;
        box-shadow: none;
    }

    .message-search-panel {
        margin-bottom: 8px;
        padding: 9px;
        border-radius: 18px;
    }

    .message-search-results {
        max-height: 180px;
    }

    .message-day-divider {
        margin: 6px 0 2px;
    }

    .message-row {
        gap: 8px;
        margin-top: 14px;
    }

    .message-row.is-continuation {
        margin-top: 4px;
    }

    .message-avatar-link,
    .message-avatar-spacer {
        width: 36px;
        min-width: 36px;
        flex-basis: 36px;
    }

    .message-avatar-spacer {
        height: 36px;
    }

    .message-avatar-link .msg-avatar {
        width: 36px;
        height: 36px;
    }

    .msg-bubble {
        max-width: calc(100% - 44px);
        padding: 12px 13px 10px;
        border-radius: 20px;
    }

    #bottom-bar {
        min-height: 60px;
        gap: 7px;
        padding: 7px 10px calc(13px + env(safe-area-inset-bottom, 0px));
    }

    #composer-accessories {
        gap: 7px;
        padding: 0 10px 7px;
    }

    .bottom-bar-row {
        gap: 8px;
        padding: 5px;
        border-radius: 18px;
    }

    .composer-attach-btn,
    #send-button {
        min-height: 36px;
    }

    .composer-attach-btn {
        min-width: 36px;
        padding: 0 8px;
    }

    #send-button {
        min-width: 60px;
        padding: 0 10px;
    }

    #message {
        min-height: 36px;
        max-height: 68px;
        padding: 8px 8px;
        font-size: 0.93rem;
    }
}

/* Home command center */
.onboarding-card {
    display: grid;
    gap: 18px;
    margin-bottom: 22px;
    padding: 22px;
    border: 1px solid rgba(42, 89, 205, 0.14);
    border-radius: 30px;
    background:
        radial-gradient(circle at top left, rgba(217, 161, 66, 0.14), transparent 24%),
        radial-gradient(circle at top right, rgba(70, 119, 223, 0.12), transparent 25%),
        linear-gradient(180deg, rgba(255, 252, 246, 0.98) 0%, rgba(246, 249, 255, 0.98) 100%);
    box-shadow: 0 24px 44px rgba(33, 69, 172, 0.11);
}

.onboarding-card[hidden] {
    display: none;
}

.onboarding-card.is-complete {
    border-color: rgba(39, 139, 74, 0.2);
    background:
        radial-gradient(circle at top left, rgba(50, 168, 92, 0.13), transparent 24%),
        linear-gradient(180deg, rgba(248, 255, 250, 0.98) 0%, rgba(245, 250, 255, 0.98) 100%);
}

.onboarding-card-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, 0.28fr);
    gap: 18px;
    align-items: start;
}

.onboarding-eyebrow {
    color: var(--bubo-amber-600);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.onboarding-card h3 {
    margin: 4px 0 6px;
    color: var(--bubo-ink-950);
    font-size: clamp(1.24rem, 2vw, 1.7rem);
    line-height: 1.16;
    letter-spacing: -0.03em;
}

.onboarding-card p {
    margin: 0;
    color: var(--bubo-ink-600);
    line-height: 1.55;
}

.onboarding-progress {
    display: grid;
    gap: 8px;
    justify-items: end;
}

.onboarding-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(42, 89, 205, 0.1);
    color: var(--bubo-owl-blue-700);
    font-weight: 800;
}

.onboarding-progress-track {
    width: min(100%, 180px);
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(44, 57, 94, 0.09);
}

.onboarding-progress-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--bubo-amber-500) 0%, var(--bubo-owl-blue-500) 100%);
    transition: width 0.22s ease;
}

.onboarding-next-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    border: 1px solid rgba(44, 57, 94, 0.08);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.onboarding-next-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.onboarding-next-copy span {
    color: var(--bubo-amber-600);
    font-size: 0.73rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.onboarding-next-copy strong {
    color: var(--bubo-ink-950);
    font-size: 1.05rem;
}

.onboarding-next-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.onboarding-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.onboarding-step {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 178px;
    padding: 14px;
    border: 1px solid rgba(44, 57, 94, 0.08);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.onboarding-step.is-complete {
    border-color: rgba(39, 139, 74, 0.18);
    background: rgba(248, 255, 250, 0.88);
}

.onboarding-step-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(44, 57, 94, 0.08);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 900;
}

.onboarding-step.is-complete .onboarding-step-check {
    background: linear-gradient(135deg, #278b4a 0%, #3fbf6f 100%);
}

.onboarding-step-body {
    min-width: 0;
}

.onboarding-step h4 {
    margin: 0 0 5px;
    color: var(--bubo-ink-900);
    font-size: 0.98rem;
    line-height: 1.22;
}

.onboarding-step p {
    font-size: 0.85rem;
    line-height: 1.45;
}

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

.onboarding-step-done {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(39, 139, 74, 0.12);
    color: #1f7a41;
    font-size: 0.78rem;
    font-weight: 800;
}

.home-overview-card,
.home-section {
    position: relative;
    overflow: hidden;
}

.home-overview-card {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.95fr);
    gap: 16px;
    margin-bottom: 22px;
    padding: 22px 22px 20px;
    border: 1px solid var(--bubo-surface-primary-border);
    border-radius: 32px;
    background:
        radial-gradient(circle at top left, rgba(217, 161, 66, 0.11), transparent 22%),
        radial-gradient(circle at top right, rgba(70, 119, 223, 0.1), transparent 24%),
        linear-gradient(180deg, rgba(255, 252, 246, 0.98) 0%, rgba(245, 248, 255, 0.98) 100%);
    box-shadow: var(--bubo-surface-primary-shadow);
}

.home-overview-card::before,
.home-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(217, 161, 66, 0.9) 0%, rgba(70, 119, 223, 0.9) 52%, rgba(32, 68, 170, 0.72) 100%);
    opacity: 0.92;
    pointer-events: none;
}

.home-overview-copy {
    min-width: 0;
    display: grid;
    gap: 8px;
    align-content: center;
}

.home-overview-eyebrow {
    color: var(--bubo-ink-600);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-overview-status {
    color: var(--bubo-ink-950);
    font-size: clamp(1.25rem, 2vw, 1.8rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.03em;
}

.home-overview-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.home-overview-metric {
    display: grid;
    gap: 4px;
    padding: 14px 14px 13px;
    border: 1px solid rgba(44, 57, 94, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.home-overview-metric.is-hot {
    border-color: rgba(42, 89, 205, 0.18);
    background: linear-gradient(180deg, rgba(245, 248, 255, 0.98) 0%, rgba(236, 242, 255, 0.98) 100%);
}

.home-overview-metric.is-alert {
    border-color: rgba(217, 161, 66, 0.18);
    background: linear-gradient(180deg, rgba(255, 249, 237, 0.98) 0%, rgba(255, 245, 226, 0.98) 100%);
}

.home-overview-metric.is-cool {
    border-color: rgba(44, 57, 94, 0.08);
}

.home-overview-metric-value {
    color: var(--bubo-ink-950);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
}

.home-overview-metric-label {
    color: var(--bubo-ink-600);
    font-size: 0.8rem;
    font-weight: 700;
}

.home-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.92fr);
    gap: 22px;
    align-items: start;
}

.home-dashboard-main,
.home-dashboard-side {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.home-section {
    margin-bottom: 0;
    padding: 20px 20px 18px;
    border: 1px solid var(--bubo-surface-secondary-border);
    border-radius: 30px;
    background: var(--bubo-surface-secondary-bg);
    box-shadow: var(--bubo-surface-secondary-shadow);
}

.home-section-primary {
    border-color: var(--bubo-surface-primary-border);
    background: var(--bubo-surface-primary-bg);
    box-shadow: var(--bubo-surface-primary-shadow);
}

.home-section-secondary {
    background: linear-gradient(180deg, rgba(252, 249, 243, 0.96) 0%, rgba(246, 249, 255, 0.98) 100%);
}

.home-section-urgent {
    background: linear-gradient(180deg, rgba(255, 250, 241, 0.98) 0%, rgba(250, 246, 238, 0.98) 100%);
}

.home-android-card {
    border-color: rgba(42, 89, 205, 0.14);
    background:
        radial-gradient(circle at 16% 16%, rgba(217, 161, 66, 0.2), transparent 32%),
        linear-gradient(180deg, rgba(255, 253, 248, 0.98) 0%, rgba(241, 246, 255, 0.98) 100%);
}

.home-android-card-copy {
    margin: 0;
    color: var(--bubo-ink-600);
    font-size: 0.92rem;
    line-height: 1.55;
}

.home-section.has-unread,
.home-section.has-alerts {
    box-shadow: 0 24px 40px rgba(33, 69, 172, 0.1);
}

.home-section.has-alerts {
    border-color: rgba(217, 161, 66, 0.22);
    box-shadow: 0 24px 42px rgba(189, 130, 43, 0.12);
}

.home-section-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.home-section-header {
    margin-bottom: 14px;
}

.home-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(44, 57, 94, 0.08);
    color: var(--bubo-ink-700);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
}

.home-section-count.is-hot {
    background: linear-gradient(135deg, #244aae 0%, #2f63d9 100%);
    color: #fff;
    box-shadow: 0 10px 18px rgba(33, 69, 172, 0.16);
}

.home-card-list {
    gap: 12px;
}

.home-chat-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.home-chat-list .summary-card.is-featured {
    grid-column: 1 / -1;
}

.home-thread-list,
.home-replies-list {
    display: grid;
    gap: 12px;
}

@media (max-width: 640px) {
    .shopping-lists-panel {
        margin: 0 0 8px;
        padding: 10px;
        max-height: min(44vh, 340px);
        border-radius: 18px;
    }

    .shopping-lists-panel.is-collapsed {
        margin: 0;
        padding: 0;
        max-height: 0;
    }

    .shopping-list-toolbar,
    .shopping-lists-create,
    .shopping-item-create {
        align-items: center;
    }

    .shopping-list-toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .shopping-list-toolbar select {
        grid-column: 1 / -1;
    }

    .shopping-lists-create,
    .shopping-item-create {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .shopping-list-toolbar button,
    .shopping-lists-create button,
    .shopping-item-create button {
        width: 100%;
        padding-inline: 10px;
        white-space: nowrap;
    }

    .shopping-items {
        min-height: 110px;
        max-height: none;
    }
}

.summary-card-kicker-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.summary-card-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(44, 57, 94, 0.08);
    color: var(--bubo-ink-700);
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.summary-card-kicker.is-hot {
    background: rgba(42, 89, 205, 0.12);
    color: var(--bubo-owl-blue-700);
}

.summary-card-kicker-alert {
    background: rgba(217, 161, 66, 0.16);
    color: var(--bubo-amber-600);
}

.summary-card-chat,
.summary-card-thread,
.notification-card {
    height: 100%;
}

.summary-card-chat.is-featured {
    padding: 20px;
    gap: 16px;
    background:
        radial-gradient(circle at top right, rgba(70, 119, 223, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(247, 250, 255, 0.98) 100%);
}

.summary-card-chat.is-featured .summary-card-avatar {
    width: 60px;
    height: 60px;
}

.summary-card-chat.is-featured .summary-card-title {
    font-size: 1.44rem;
}

.summary-card-chat.is-featured .summary-card-preview {
    font-size: 0.99rem;
}

.summary-card-thread.is-featured,
.notification-card.is-featured {
    padding: 18px 18px 17px;
}

.summary-card-thread.is-featured .summary-card-title,
.notification-card.is-featured .summary-card-title {
    font-size: 1.18rem;
}

.notification-card {
    border-color: rgba(217, 161, 66, 0.12);
    background: linear-gradient(180deg, rgba(255, 252, 245, 0.98) 0%, rgba(250, 247, 240, 0.98) 100%);
}

.notification-card .summary-card-title {
    font-size: 1.03rem;
    line-height: 1.38;
}

.notification-card .notification-state-badge {
    background: rgba(217, 161, 66, 0.14);
    color: var(--bubo-amber-600);
}

.notification-card.is-featured {
    border-color: rgba(217, 161, 66, 0.18);
    box-shadow: 0 22px 34px rgba(189, 130, 43, 0.12);
}

.notification-card.is-read .notification-state-badge {
    background: rgba(148, 163, 184, 0.14);
    color: #60738e;
}

.empty-state-card {
    min-height: 112px;
    display: grid;
    place-items: center;
    text-align: center;
}

@media (max-width: 900px) {
    .onboarding-card-header {
        grid-template-columns: 1fr;
    }

    .onboarding-progress {
        justify-items: start;
    }

    .onboarding-next-step {
        align-items: flex-start;
        flex-direction: column;
    }

    .onboarding-next-actions {
        justify-content: flex-start;
    }

    .onboarding-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-overview-card {
        grid-template-columns: 1fr;
    }

    .home-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .home-dashboard-side {
        order: -1;
    }
}

@media (max-width: 640px) {
    .onboarding-card {
        gap: 15px;
        margin-bottom: 18px;
        padding: 18px 16px;
        border-radius: 24px;
    }

    .onboarding-steps {
        grid-template-columns: 1fr;
    }

    .onboarding-step {
        min-height: 0;
    }

    .onboarding-next-actions,
    .onboarding-next-actions .primary-action-btn,
    .onboarding-next-actions .section-link,
    .onboarding-next-actions .section-link-btn {
        width: 100%;
    }

    .home-overview-card {
        margin-bottom: 18px;
        padding: 18px 16px 16px;
        border-radius: 24px;
    }

    .home-overview-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .home-overview-metric {
        padding: 12px 10px;
        border-radius: 16px;
    }

    .home-overview-metric-value {
        font-size: 1.18rem;
    }

    .home-overview-metric-label {
        font-size: 0.72rem;
    }

    .home-dashboard-grid,
    .home-dashboard-main,
    .home-dashboard-side {
        gap: 16px;
    }

    .home-section {
        padding: 16px 14px 14px;
        border-radius: 24px;
    }

    .home-chat-list {
        grid-template-columns: 1fr;
    }

    .summary-card-chat.is-featured,
    .summary-card-thread.is-featured,
    .notification-card.is-featured {
        padding: 16px;
    }

    .summary-card-chat.is-featured .summary-card-avatar {
        width: 52px;
        height: 52px;
    }

    .summary-card-chat.is-featured .summary-card-title {
        font-size: 1.24rem;
    }

    .home-section-count {
        min-width: 22px;
        height: 22px;
        padding: 0 7px;
    }
}