/*
 * Palet khusus modul chat PANJI.
 * Neutral surfaces dominate, charcoal builds the frame, blue handles ordinary
 * interaction, and PANJI red is kept for active/unread/brand emphasis.
 */
.panji-chat-hub {
    --chat-ink: #252a2f;
    --chat-muted: #77818a;
    --chat-primary: #2e6f95;
    --chat-primary-deep: #202428;
    --chat-teal: #4e8eae;
    --chat-sky: #e8f2f8;
    --chat-mint: #f2f7fa;
    --chat-sand: #eef1f4;
    --chat-border: rgba(32, 36, 40, 0.12);
    --chat-shadow: 0 1.25rem 3.5rem rgba(32, 36, 40, 0.11);
}

.panji-chat-hub .chat-hub-hero {
    border-color: rgba(46, 111, 149, 0.13);
    background:
        radial-gradient(circle at 92% 12%, rgba(181, 30, 42, 0.075), transparent 17rem),
        linear-gradient(118deg, rgba(255,255,255,.99) 0 58%, rgba(232,242,248,.96) 58% 100%),
        #fcfcfd;
}

.panji-chat-hub .chat-hub-hero::before {
    border-color: rgba(46, 111, 149, 0.13);
    box-shadow:
        0 0 0 4.5rem rgba(46, 111, 149, 0.035),
        0 0 0 9rem rgba(32, 36, 40, 0.025);
}

.panji-chat-hub .chat-hub-hero::after {
    background: rgba(46, 111, 149, 0.13);
}

.panji-chat-hub .btn-chat-primary,
.panji-chat-hub .signal-core,
.panji-chat-hub .conversation-avatar.is-group {
    border-color: #245a78;
    background: linear-gradient(145deg, #4e8eae, #245a78);
    color: #fff;
}

.panji-chat-hub .signal-core {
    box-shadow: 0 1rem 2.5rem rgba(46, 111, 149, 0.25);
}

.panji-chat-hub .btn-chat-secondary {
    border-color: rgba(32, 36, 40, 0.18);
    background: #fff;
    color: #202428;
}

.panji-chat-hub .chat-tab.is-active {
    border-color: rgba(46, 111, 149, 0.25);
    color: #1d4963;
    box-shadow: inset 0 -3px 0 #b51e2a;
}

.panji-chat-hub .conversation-card.has-unread {
    border-color: rgba(181, 30, 42, 0.24);
    background: linear-gradient(90deg, rgba(248,232,234,.9), rgba(255,255,255,.98) 30%);
}

.panji-chat-hub .conversation-unread {
    background: #b51e2a;
    color: #fff;
}

.panji-chat-hub .chat-tab.is-active span {
    background: #e8f2f8;
    color: #1d4963;
}

.chat-management-page {
    --mg-ink: #252a2f;
    --mg-muted: #77818a;
    --mg-primary: #2e6f95;
    --mg-primary-deep: #202428;
    --mg-teal: #4e8eae;
    --mg-sky: #e8f2f8;
    --mg-mint: #f2f7fa;
    --mg-sand: #eef1f4;
    --mg-rose: #f8e8ea;
    --mg-border: rgba(32, 36, 40, 0.12);
    --mg-shadow: 0 1.1rem 3rem rgba(32, 36, 40, 0.1);
}

.chat-management-page .chat-management-hero,
.chat-management-page .group-profile-hero {
    background:
        radial-gradient(circle at 91% 9%, rgba(181,30,42,.2), transparent 17rem),
        linear-gradient(120deg, #202428, #283b49 58%, #2e6f95);
}

.chat-management-page .btn-management-primary {
    border-color: #245a78;
    background: linear-gradient(145deg, #4e8eae, #245a78);
    color: #fff;
}

.chat-management-page .btn-management-secondary {
    border-color: rgba(32,36,40,.17);
    background: #fff;
    color: #202428;
}

.chat-management-page .personal-confirm-signal,
.chat-management-page .management-step-number {
    background: #2e6f95;
    color: #fff;
}

.chat-management-page .role-badge.is-admin {
    background: #e8f2f8;
    color: #1d4963;
}

.chat-management-page .role-badge.is-creator,
.chat-management-page .member-you {
    background: #f8e8ea;
    color: #901720;
}

.conversation-info-page {
    --conversation-ink: #252a2f;
    --conversation-muted: #77818a;
    --conversation-primary: #2e6f95;
    --conversation-primary-deep: #202428;
    --conversation-accent: #b51e2a;
    --conversation-line: rgba(32, 36, 40, 0.12);
    --conversation-paper: #ffffff;
}

.conversation-info-page .conversation-info-hero {
    background:
        radial-gradient(circle at 88% 16%, rgba(181,30,42,.2), transparent 18rem),
        linear-gradient(125deg, #202428, #283c4a 58%, #2e6f95);
    box-shadow: 0 1.4rem 3.5rem rgba(32, 36, 40, 0.18);
}

.conversation-info-page .conversation-info-primary,
.conversation-info-page .conversation-info-avatar {
    border-color: rgba(255,255,255,.25);
}

.conversation-info-page .btn-conversation-primary {
    border-color: #245a78;
    background: linear-gradient(145deg, #4e8eae, #245a78);
    color: #fff;
}

.conversation-info-page .conversation-info-danger,
.conversation-info-page .conversation-danger-zone {
    border-color: rgba(181, 30, 42, 0.22);
    background: #f8e8ea;
}

/* Detail conversation workspace */
.chat-conversation-body {
    --chat-ink: #252a2f;
    --chat-muted: #77818a;
    --chat-primary: #2e6f95;
    --chat-primary-deep: #202428;
    --chat-accent: #b51e2a;
    --chat-sky: #e8f2f8;
    --chat-mint: #f2f7fa;
    --chat-paper: #ffffff;
    --chat-line: rgba(32, 36, 40, 0.12);
    --chat-shadow: 0 1.5rem 4rem rgba(32, 36, 40, 0.15);
    background:
        radial-gradient(circle at 8% 12%, rgba(46, 111, 149, 0.075), transparent 24rem),
        radial-gradient(circle at 92% 86%, rgba(181, 30, 42, 0.04), transparent 28rem),
        linear-gradient(135deg, #eef1f4 0%, #f8f9fa 50%, #edf2f5 100%);
}

.chat-conversation-body .chat-workspace {
    border-color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: var(--chat-shadow);
}

.chat-conversation-body .chat-app {
    border-left-color: var(--chat-line);
    background: rgba(252, 252, 253, 0.98);
}

.chat-conversation-body .chat-topbar {
    background:
        radial-gradient(circle at 94% 20%, rgba(181, 30, 42, 0.18), transparent 12rem),
        linear-gradient(110deg, #202428 0%, #263743 60%, #2e6f95 100%);
}

.chat-conversation-body .chat-topbar::after {
    background: rgba(78, 142, 174, 0.24);
}

.chat-conversation-body .chat-stage {
    background:
        radial-gradient(circle at 13% 22%, rgba(46, 111, 149, 0.055), transparent 14rem),
        radial-gradient(circle at 86% 74%, rgba(181, 30, 42, 0.025), transparent 18rem),
        linear-gradient(180deg, #f3f6f8 0%, #fbfcfd 52%, #eff3f5 100%);
}

.chat-conversation-body .chat-composer-area {
    border-top-color: var(--chat-line);
    background: rgba(255, 255, 255, 0.985);
    box-shadow: 0 -0.55rem 1.4rem rgba(32, 36, 40, 0.06);
}

.chat-conversation-body .chat-composer textarea {
    border-color: rgba(46, 111, 149, 0.23);
    background: #f8fafb;
}

.chat-conversation-body .chat-composer textarea:focus {
    border-color: rgba(46, 111, 149, 0.68);
    box-shadow: 0 0 0 0.22rem rgba(46, 111, 149, 0.13);
}

.chat-conversation-body #chat-message-submit {
    background: linear-gradient(145deg, #4e8eae, #245a78);
    box-shadow: 0 0.55rem 1.2rem rgba(46, 111, 149, 0.24);
}

.chat-conversation-body #chat-message-submit:hover,
.chat-conversation-body #chat-message-submit:focus-visible {
    box-shadow: 0 0.75rem 1.45rem rgba(46, 111, 149, 0.31);
    outline-color: rgba(46, 111, 149, 0.22);
}

.chat-conversation-body .chat-message.is-own .chat-bubble {
    border-color: rgba(29, 73, 99, 0.22);
    background: linear-gradient(145deg, #377da4, #245a78);
    box-shadow: 0 0.45rem 1.1rem rgba(36, 90, 120, 0.18);
}

.chat-conversation-body .chat-message-avatar {
    background: linear-gradient(145deg, #e8f2f8, #eef1f4);
    color: #202428;
}

.chat-conversation-body .chat-sender-name,
.chat-conversation-body .chat-reply-draft-label {
    color: #2e6f95;
}

.chat-conversation-body .chat-reply-reference {
    border-left-color: #b51e2a;
    background: rgba(46, 111, 149, 0.07);
}

.chat-conversation-body .chat-date-separator {
    border-color: rgba(46, 111, 149, 0.12);
    background: rgba(252, 252, 253, 0.94);
}

.chat-conversation-body .chat-new-message-button {
    background: #202428;
    box-shadow: 0 0.8rem 1.8rem rgba(32, 36, 40, 0.24);
}

.chat-conversation-body .chat-new-message-button:hover,
.chat-conversation-body .chat-new-message-button:focus-visible {
    background: #2e6f95;
    outline-color: rgba(46, 111, 149, 0.24);
}

.chat-conversation-body .chat-desktop-sidebar {
    background:
        radial-gradient(circle at 12% 4%, rgba(181, 30, 42, 0.14), transparent 10rem),
        linear-gradient(180deg, #252a2f, #181b1e);
}

.chat-conversation-body .chat-sidebar-brand__mark {
    background: linear-gradient(145deg, #b51e2a, #901720);
}

.chat-conversation-body .chat-sidebar-filters button.is-active {
    background: #2e6f95;
    color: #fff;
    box-shadow: inset 0 -2px 0 #b51e2a;
}

.chat-conversation-body .chat-sidebar-search:focus-within {
    border-color: rgba(78, 142, 174, 0.62);
    box-shadow: 0 0 0 0.18rem rgba(46, 111, 149, 0.15);
}

.chat-conversation-body .chat-sidebar-item:hover,
.chat-conversation-body .chat-sidebar-item:focus-visible {
    background: rgba(46, 111, 149, 0.2);
}

.chat-conversation-body .chat-sidebar-item.is-active {
    border-left-color: #b51e2a;
    background: linear-gradient(90deg, rgba(46, 111, 149, 0.38), rgba(46, 111, 149, 0.12));
}

.chat-conversation-body .chat-sidebar-unread {
    background: #b51e2a;
    color: #fff;
}