:root {
    --chat-green-950: #062d28;
    --chat-green-900: #083931;
    --chat-green-850: #0a4439;
    --chat-green-800: #0d5142;

    --chat-cream: #f6f2e8;
    --chat-cream-2: #fffdf7;

    --chat-text: #102c28;
    --chat-muted: #65716d;

    --chat-gold: #efbc48;
    --chat-gold-light: #ffd875;
    --chat-gold-dark: #c99425;

    --chat-line: rgba(16, 44, 40, 0.12);

    --chat-radius: 22px;

    --chat-shadow:
        0 28px 80px rgba(18, 45, 39, 0.14);
}


* {
    box-sizing: border-box;
}


html {
    min-width: 320px;
}


body.chat-body {
    min-width: 320px;
    min-height: 100vh;

    margin: 0;

    display: flex;
    flex-direction: column;

    color: var(--chat-text);

    background:
        linear-gradient(180deg,
            var(--chat-cream-2),
            var(--chat-cream));

    font-family:
        "Manrope",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;
}


button,
textarea {
    font: inherit;
}


button {
    border: 0;
}


a {
    color: inherit;
}


img {
    display: block;
    max-width: 100%;
}


.chat-site-shell,
.chat-shell {
    width: calc(100% - 96px);
    max-width: 1720px;

    margin-inline: auto;
}


/* ==========================================================
   HEADER
========================================================== */

.chat-site-header {
    position: relative;
    z-index: 40;

    width: 100%;

    color: #fff;

    background:
        radial-gradient(circle at 76% 20%,
            rgba(65, 141, 103, 0.15),
            transparent 30%),
        linear-gradient(90deg,
            #0b3932 0%,
            #103d35 48%,
            #133f36 100%);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}


.chat-site-header__inner {
    min-height: 96px;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;

    gap: 38px;
}


.chat-site-brand {
    display: flex;
    align-items: center;

    gap: 13px;

    color: #fff;
    text-decoration: none;
}


.chat-site-brand__logo {
    width: 63px;
    height: 63px;

    object-fit: cover;

    border-radius: 50%;

    filter:
        drop-shadow(0 8px 16px rgba(0, 0, 0, 0.24));
}


.chat-site-brand__text {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.chat-site-brand__text strong {
    font-size: 21px;
    line-height: 1.1;

    font-weight: 800;
    letter-spacing: -0.03em;
}


.chat-site-brand__text small {
    color: rgba(255, 255, 255, 0.72);

    font-size: 11px;
    line-height: 1.35;
}


.chat-site-nav {
    justify-self: center;

    display: flex;
    align-items: center;

    gap: 30px;
}


.chat-site-nav a {
    position: relative;

    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition:
        color 180ms ease,
        transform 180ms ease;
}


.chat-site-nav a::after {
    position: absolute;

    left: 0;
    right: 100%;
    bottom: -8px;

    height: 2px;

    content: "";

    background: var(--chat-gold);

    border-radius: 999px;

    transition: right 180ms ease;
}


.chat-site-nav a:hover,
.chat-site-nav a.is-active {
    color: #fff;
}


.chat-site-nav a:hover {
    transform: translateY(-1px);
}


.chat-site-nav a:hover::after,
.chat-site-nav a.is-active::after {
    right: 0;
}


.chat-site-action {
    min-width: 132px;
    height: 46px;

    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    border:
        1px solid rgba(255, 211, 99, 0.9);

    border-radius: 999px;

    background:
        rgba(0, 0, 0, 0.08);

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    backdrop-filter: blur(10px);

    transition:
        transform 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}


.chat-site-action:hover {
    transform: translateY(-2px);

    background:
        rgba(239, 188, 72, 0.12);

    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.15);
}


/* ==========================================================
   PAGE
========================================================== */

.chat-page {
    position: relative;

    flex: 1;

    overflow: hidden;

    padding: 0 0 58px;

    background:
        linear-gradient(180deg,
            var(--chat-cream-2),
            var(--chat-cream));
}


.chat-page::before {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 265px;

    content: "";

    background:
        radial-gradient(circle at 78% 25%,
            rgba(72, 144, 105, 0.20),
            transparent 34%),
        linear-gradient(90deg,
            #0b3932 0%,
            #103d35 48%,
            #133f36 100%);
}


.chat-shell {
    position: relative;
    z-index: 2;
}


.chat-page-header {
    min-height: 205px;

    padding: 38px 0 34px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    color: #fff;
}


.chat-page-kicker {
    margin: 0 0 12px;

    color: var(--chat-gold-light);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.20em;
    text-transform: uppercase;
}


.chat-page-header h1 {
    margin: 0;

    font-size: clamp(40px, 4.8vw, 64px);
    line-height: 1;

    font-weight: 800;

    letter-spacing: -0.05em;
}


.chat-page-description {
    max-width: 650px;

    margin: 17px 0 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 15px;
    line-height: 1.6;
}


.chat-current-user {
    min-width: 250px;

    padding: 12px 16px;

    display: flex;
    align-items: center;

    gap: 12px;

    border:
        1px solid rgba(255, 255, 255, 0.13);

    border-radius: 18px;

    background:
        rgba(0, 0, 0, 0.10);

    backdrop-filter: blur(12px);
}


.chat-current-user-avatar {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: grid;
    place-items: center;

    overflow: hidden;

    color: #2c321c;

    background:
        linear-gradient(180deg,
            var(--chat-gold-light),
            var(--chat-gold));

    border-radius: 50%;

    font-size: 18px;
    font-weight: 800;
}


.chat-current-user-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.chat-current-user-info {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.chat-current-user-label {
    color: rgba(255, 255, 255, 0.60);

    font-size: 10px;
}


.chat-current-user-info strong {
    overflow: hidden;

    color: #fff;

    font-size: 14px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================
   CHAT LAYOUT
========================================================== */

.chat-layout {
    min-height: 650px;

    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);

    overflow: hidden;

    background: var(--chat-cream-2);

    border:
        1px solid rgba(16, 44, 40, 0.08);

    border-radius: 28px;

    box-shadow: var(--chat-shadow);
}


/* ==========================================================
   SIDEBAR
========================================================== */

.chat-sidebar {
    padding: 28px;

    display: flex;
    flex-direction: column;

    gap: 18px;

    color: #fff;

    background:
        radial-gradient(circle at 10% 10%,
            rgba(239, 188, 72, 0.09),
            transparent 28%),
        linear-gradient(180deg,
            #0b453a,
            #07372f);
}


.chat-sidebar-card {
    padding: 21px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 19px;

    background:
        rgba(255, 255, 255, 0.045);
}


.chat-sidebar-card h2 {
    margin: 0;

    font-size: 15px;
    line-height: 1.3;

    letter-spacing: -0.02em;
}


.chat-sidebar-card p {
    margin: 10px 0 0;

    color: rgba(255, 255, 255, 0.61);

    font-size: 12px;
    line-height: 1.55;
}


.chat-sidebar-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}


.chat-online-dot {
    width: 9px;
    height: 9px;

    display: inline-block;

    flex: 0 0 9px;

    background: #72d89e;

    border-radius: 50%;

    box-shadow:
        0 0 0 4px rgba(114, 216, 158, 0.10);
}


.chat-moods-preview {
    margin-top: 17px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 8px;
}


.chat-mood-option {
    position: relative;

    width: 100%;
    aspect-ratio: 1;

    padding: 3px;

    display: grid;
    place-items: center;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.055);

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 14px;

    cursor: pointer;

    transition:
        transform 170ms ease,
        border-color 170ms ease,
        background 170ms ease,
        box-shadow 170ms ease;
}


.chat-mood-option img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    transform: scale(1.08);

    filter:
        drop-shadow(0 5px 8px rgba(0, 0, 0, 0.18));

    transition:
        transform 170ms ease,
        filter 170ms ease;
}


.chat-mood-option:hover {
    z-index: 2;

    transform: translateY(-3px) scale(1.06);

    background:
        rgba(239, 188, 72, 0.10);

    border-color:
        rgba(255, 216, 117, 0.72);

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.18);
}


.chat-mood-option:hover img {
    transform: scale(1.16);

    filter:
        drop-shadow(0 8px 11px rgba(0, 0, 0, 0.22));
}


.chat-mood-option.is-selected {
    background:
        rgba(239, 188, 72, 0.17);

    border-color:
        var(--chat-gold-light);

    box-shadow:
        0 0 0 2px rgba(239, 188, 72, 0.16),
        0 10px 24px rgba(0, 0, 0, 0.17);
}


.chat-mood-option.is-selected img {
    transform: scale(1.14);
}


/* ==========================================================
   MAIN CHAT
========================================================== */

.chat-main {
    min-width: 0;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(180deg,
            #fffdf8,
            #f8f5ed);
}


.chat-channel-header {
    min-height: 86px;

    padding: 0 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    background:
        rgba(255, 255, 255, 0.58);

    border-bottom:
        1px solid var(--chat-line);
}


.chat-channel-eyebrow {
    color: var(--chat-gold-dark);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}


.chat-channel-header h2 {
    margin: 5px 0 0;

    color: var(--chat-text);

    font-size: 22px;
    line-height: 1.15;

    letter-spacing: -0.035em;
}


.chat-channel-status {
    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--chat-muted);

    font-size: 11px;
    font-weight: 600;
}


/* === AURORA PATCH START: PERSONAL CHAT NOTICES === */

.chat-own-sanctions[hidden] {
    display: none !important;
}

.chat-own-sanctions {
    margin: 18px 24px 0;
    padding: 18px;

    display: flex;
    align-items: flex-start;
    gap: 16px;

    color: #173329;
    background: linear-gradient(135deg, #fff5d5, #fffdf7);

    border: 1px solid #e9c875;
    border-radius: 18px;

    box-shadow: 0 8px 24px rgba(94, 74, 25, 0.09);
}

.chat-own-sanctions__avatar {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    object-fit: contain;
}

.chat-own-sanctions__content {
    min-width: 0;
    flex: 1;
}

.chat-own-sanctions__content h3 {
    margin: 0 0 7px;
    font-size: 16px;
    font-weight: 800;
}

.chat-own-sanctions__description {
    margin: 0 0 12px;
    color: #65716d;
    font-size: 12px;
    line-height: 1.5;
}

.chat-own-sanctions__list {
    display: grid;
    gap: 10px;
    max-height: 210px;
    overflow-y: auto;
}

.chat-own-sanctions__item {
    padding: 12px;
    background: #fffdf8;
    border: 1px solid #eadbb5;
    border-radius: 12px;
}

.chat-own-sanctions__item strong {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
}

.chat-own-sanctions__item p {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    font-size: 12px;
    line-height: 1.5;
}

.chat-own-sanctions__item small {
    display: block;
    margin-top: 7px;
    color: #65716d;
    font-size: 10px;
}

@media (max-width: 520px) {
    .chat-own-sanctions {
        margin: 12px 12px 0;
        padding: 12px;
        gap: 10px;
    }

    .chat-own-sanctions__avatar {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }
}

/* === AURORA PATCH END: PERSONAL CHAT NOTICES === */
.chat-messages {
    min-height: 430px;
    flex: 1;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 17px;
    overflow-y: auto;
    background:
        radial-gradient(circle at 85% 0%,
            rgba(239, 188, 72, 0.07),
            transparent 30%);
}


.chat-empty-state {
    max-width: 430px;

    margin: auto;

    text-align: center;
}


.chat-empty-state-icon {
    width: 72px;
    height: 72px;

    margin: 0 auto 18px;

    display: grid;
    place-items: center;

    color: #21382e;

    background:
        linear-gradient(180deg,
            var(--chat-gold-light),
            var(--chat-gold));

    border-radius: 22px;

    box-shadow:
        0 16px 34px rgba(201, 148, 37, 0.18);

    font-size: 29px;
}


.chat-empty-state h3 {
    margin: 0;

    color: var(--chat-text);

    font-size: 20px;
    letter-spacing: -0.03em;
}


.chat-empty-state p {
    margin: 9px 0 0;

    color: var(--chat-muted);

    font-size: 13px;
    line-height: 1.55;
}

/* ==========================================================
   MESSAGES
========================================================== */

.chat-message {
    width: 100%;

    display: flex;
    align-items: flex-end;

    gap: 11px;
}


.chat-message--own {
    flex-direction: row-reverse;
}


.chat-message__avatar {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    overflow: hidden;

    color: #27361f;

    background:
        linear-gradient(180deg,
            var(--chat-gold-light),
            var(--chat-gold));

    border-radius: 50%;

    box-shadow:
        0 7px 18px rgba(26, 54, 43, 0.12);

    font-size: 14px;
    font-weight: 800;
}


.chat-message__avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.chat-message__content {
    width: fit-content;
    max-width: min(720px, 76%);

    display: flex;
    flex-direction: column;

    gap: 6px;
}


.chat-message--own .chat-message__content {
    align-items: flex-end;
}


.chat-message__meta {
    padding: 0 3px;

    display: flex;
    align-items: center;

    gap: 10px;
}


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


.chat-message__meta strong {
    color: #18342f;

    font-size: 11px;
    font-weight: 800;
}


.chat-message__meta time {
    color: #8a928e;

    font-size: 9px;
}


.chat-message__bubble-row {
    display: flex;
    align-items: flex-end;

    gap: 9px;
}


.chat-message--own .chat-message__bubble-row {
    flex-direction: row-reverse;
}


.chat-message__mood {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    object-fit: contain;

    filter:
        drop-shadow(0 5px 9px rgba(0, 0, 0, 0.14));
}


.chat-message__bubble {
    padding: 12px 15px;

    color: #18322e;

    background: #fff;

    border:
        1px solid rgba(16, 44, 40, 0.09);

    border-radius:
        8px 18px 18px 18px;

    box-shadow:
        0 7px 20px rgba(25, 48, 40, 0.055);
}


.chat-message--own .chat-message__bubble {
    background:
        linear-gradient(180deg,
            #fff5d5,
            #f6e7b3);

    border-color:
        rgba(201, 148, 37, 0.18);

    border-radius:
        18px 8px 18px 18px;
}


.chat-message__bubble p {
    margin: 0;

    overflow-wrap: anywhere;

    font-size: 13px;
    line-height: 1.55;

    white-space: pre-wrap;
}


.chat-empty-state--loading .chat-empty-state-icon {
    animation:
        chatLoadingPulse 1.1s ease-in-out infinite;
}


.chat-empty-state--error .chat-empty-state-icon {
    color: #fff;

    background:
        linear-gradient(180deg,
            #d86f59,
            #b84c3a);
}


@keyframes chatLoadingPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.72;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}


/* ==========================================================
   COMPOSER
========================================================== */

.chat-composer {
    padding: 20px 24px 17px;

    background:
        rgba(255, 255, 255, 0.72);

    border-top:
        1px solid var(--chat-line);
}


.chat-selected-mood {
    width: fit-content;

    margin-bottom: 12px;
    padding: 7px 10px 7px 12px;

    display: flex;
    align-items: center;

    gap: 7px;

    color: #4e4f42;

    background: #f6edce;

    border-radius: 999px;

    font-size: 11px;
}


.chat-selected-mood[hidden] {
    display: none;
}


.chat-selected-mood button {
    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;

    color: #685c38;

    background: rgba(0, 0, 0, 0.06);

    border-radius: 50%;

    cursor: pointer;
}


.chat-message-form {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;

    align-items: end;

    gap: 10px;
}


.chat-mood-button {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    color: #473b17;

    background:
        linear-gradient(180deg,
            #ffe28b,
            #efbc48);

    border-radius: 16px;

    font-size: 22px;
}

.chat-mood-button:not(:disabled) {
    cursor: pointer;
}


.chat-mood-button img {
    width: 48px;
    height: 48px;

    object-fit: contain;

    transform: scale(1.12);

    filter:
        drop-shadow(0 4px 7px rgba(0, 0, 0, 0.13));
}


.chat-send-button:not(:disabled) {
    cursor: pointer;

    transition:
        transform 160ms ease,
        filter 160ms ease,
        box-shadow 160ms ease;
}


.chat-send-button:not(:disabled):hover {
    transform: translateY(-2px);

    filter: brightness(1.03);

    box-shadow:
        0 14px 30px rgba(201, 148, 37, 0.24);
}


.chat-composer-meta--error span:last-child {
    color: #b8503e;

    font-weight: 700;
}


.chat-message-field {
    display: block;
}


.chat-message-field textarea {
    width: 100%;
    min-height: 54px;
    max-height: 150px;

    padding: 15px 17px;

    display: block;

    resize: none;

    color: var(--chat-text);

    background: #fffdf8;

    border:
        1px solid rgba(16, 44, 40, 0.13);

    border-radius: 16px;

    outline: 0;

    line-height: 1.45;

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease;
}


.chat-message-field textarea:focus {
    border-color: var(--chat-gold-dark);

    box-shadow:
        0 0 0 3px rgba(239, 188, 72, 0.14);
}


.chat-message-field textarea:disabled {
    color: #8a918e;

    background: #f4f2eb;

    cursor: not-allowed;
}


.chat-send-button {
    min-width: 126px;
    height: 54px;

    padding: 0 24px;

    color: #18291d;

    background:
        linear-gradient(180deg,
            var(--chat-gold-light),
            var(--chat-gold));

    border-radius: 16px;

    font-size: 13px;
    font-weight: 800;

    box-shadow:
        0 10px 26px rgba(201, 148, 37, 0.16);
}


.chat-send-button:disabled,
.chat-mood-button:disabled {
    opacity: 0.58;

    cursor: not-allowed;
}


.chat-composer-meta {
    margin-top: 9px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    color: #818985;

    font-size: 10px;
}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    white-space: nowrap;

    border: 0;
}


/* ==========================================================
   FOOTER
========================================================== */

.chat-site-footer {
    color: rgba(255, 255, 255, 0.78);

    background: #07372f;
}


.chat-site-footer__inner {
    min-height: 78px;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;

    gap: 28px;
}


.chat-site-footer__brand {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #fff;
    text-decoration: none;

    font-size: 13px;
    font-weight: 700;
}


.chat-site-footer__brand img {
    width: 38px;
    height: 38px;

    border-radius: 50%;
}


.chat-site-footer__copyright {
    color: rgba(255, 255, 255, 0.48);

    font-size: 10px;
}


.chat-site-footer__nav {
    display: flex;
    align-items: center;

    gap: 26px;
}


.chat-site-footer__nav a {
    color: rgba(255, 255, 255, 0.67);

    text-decoration: none;

    font-size: 10px;

    transition: color 160ms ease;
}


.chat-site-footer__nav a:hover {
    color: var(--chat-gold-light);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1180px) {

    .chat-site-shell,
    .chat-shell {
        width: calc(100% - 40px);
    }


    .chat-site-header__inner {
        gap: 20px;
    }


    .chat-site-nav {
        gap: 18px;
    }


    .chat-site-nav a {
        font-size: 11px;
    }


    .chat-layout {
        grid-template-columns: 260px minmax(0, 1fr);
    }


    .chat-sidebar {
        padding: 20px;
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 760px) {

    .chat-site-shell,
    .chat-shell {
        width: calc(100% - 32px);
    }


    .chat-site-header__inner {
        min-height: auto;

        padding: 15px 0;

        display: flex;
        flex-wrap: wrap;

        gap: 14px;
    }


    .chat-site-brand {
        flex: 1;
    }


    .chat-site-brand__logo {
        width: 48px;
        height: 48px;
    }


    .chat-site-brand__text strong {
        font-size: 18px;
    }


    .chat-site-brand__text small {
        font-size: 9px;
    }


    .chat-site-action {
        min-width: auto;
        height: 42px;

        padding: 0 15px;

        font-size: 11px;
    }


    .chat-site-nav {
        order: 3;

        width: 100%;

        justify-self: auto;

        overflow-x: auto;

        gap: 22px;

        padding: 3px 0 7px;

        scrollbar-width: none;
    }


    .chat-site-nav::-webkit-scrollbar {
        display: none;
    }


    .chat-site-nav a {
        flex: 0 0 auto;

        padding: 6px 0;

        font-size: 12px;
    }


    .chat-site-nav a::after {
        bottom: 0;
    }


    .chat-page::before {
        height: 330px;
    }


    .chat-page-header {
        min-height: 245px;

        padding: 34px 0 28px;

        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;

        gap: 22px;
    }


    .chat-page-header h1 {
        font-size: 46px;
    }


    .chat-page-description {
        font-size: 14px;
    }


    .chat-current-user {
        min-width: 0;
        width: 100%;
    }


    .chat-layout {
        min-height: 0;

        grid-template-columns: 1fr;

        border-radius: 22px;
    }


    .chat-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        border-bottom:
            1px solid rgba(255, 255, 255, 0.08);
    }


    .chat-main {
        min-height: 570px;
    }


    .chat-channel-header {
        min-height: 78px;

        padding: 0 20px;
    }


    .chat-messages {
        min-height: 330px;

        padding: 24px 20px;
    }


    .chat-composer {
        padding: 16px;
    }


    .chat-message-form {
        grid-template-columns: 48px minmax(0, 1fr);
    }


    .chat-mood-button {
        width: 48px;
        height: 48px;

        border-radius: 14px;
    }


    .chat-send-button {
        grid-column: 1 / -1;

        width: 100%;
    }


    .chat-composer-meta {
        align-items: flex-start;
        flex-direction: column;

        gap: 4px;
    }


    .chat-site-footer__inner {
        padding: 22px 0;

        grid-template-columns: 1fr;

        gap: 14px;
    }


    .chat-site-footer__nav {
        flex-wrap: wrap;

        gap: 16px;
    }
}


@media (max-width: 520px) {

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


        .chat-channel-status {
            display: none;
        }
        }
    
        /* ==========================================================
       CHAT MODERATION
    ========================================================== */
    
        .chat-role-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
    
            padding: 3px 7px;
    
            border-radius: 6px;
    
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.04em;
            white-space: nowrap;
        }
    
        .chat-role-badge--admin {
            color: #634300;
            background: #ffe29a;
            border: 1px solid #e9b94d;
        }
    
        .chat-role-badge--moderator {
            color: #0d5548;
            background: #c9efe1;
            border: 1px solid #75c6aa;
        }
    
        .chat-message__meta {
            flex-wrap: wrap;
        }
    
        .chat-message__moderation {
            padding: 0 6px;
    
            color: #52645e;
            background: transparent;
    
            border-radius: 6px;
    
            font-size: 18px;
            font-weight: 800;
            line-height: 1;
    
            cursor: pointer;
        }
    
        .chat-message__moderation:hover {
            color: #0d5142;
            background: #e5eee8;
        }
    
        .chat-moderation-refresh,
        .chat-sanction-revoke {
            margin-top: 12px;
            padding: 8px 12px;
    
            border-radius: 10px;
    
            background: #efbc48;
            color: #173329;
    
            font-size: 11px;
            font-weight: 800;
    
            cursor: pointer;
        }
    
        .chat-moderation-notice {
            margin-top: 10px;
    
            color: #ffe29a;
    
            font-size: 11px;
            line-height: 1.5;
        }
    
        .chat-sanctions-list {
            margin-top: 12px;
            max-height: 340px;
    
            overflow-y: auto;
    
            font-size: 11px;
            line-height: 1.5;
        }
    
        .chat-sanction-item {
            margin-bottom: 10px;
            padding: 11px;
    
            display: flex;
            flex-direction: column;
            align-items: flex-start;
    
            gap: 5px;
    
            background: rgba(255, 255, 255, 0.075);
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 12px;
        }
    
        .chat-sanction-item small {
            color: #e7ca86;
        }
    
        .chat-sanction-item p {
            margin: 0;
            overflow-wrap: anywhere;
        }
    
        .chat-sanction-dialog {
            width: min(440px, calc(100% - 32px));
            max-height: calc(100vh - 32px);
    
            padding: 24px;
    
            overflow-y: auto;
    
            color: #102c28;
            background: #fffdf7;
    
            border: 1px solid #e8d9ae;
            border-radius: 22px;
    
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
        }
    
        /* === AURORA PATCH START: CHAT HELPER CONFIRM === */

.chat-confirm-dialog {
    width: min(560px, calc(100% - 32px));
    max-height: calc(100vh - 32px);
    padding: 24px;
    overflow-y: auto;

    color: #102c28;
    background: #fffdf7;

    border: 1px solid #e8d9ae;
    border-radius: 22px;

    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.28);
}

.chat-confirm-dialog::backdrop {
    background: rgba(2, 29, 24, 0.68);
    backdrop-filter: blur(3px);
}

.chat-confirm-dialog__layout {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 20px;
}

.chat-confirm-dialog__avatar {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.chat-confirm-dialog__content {
    min-width: 0;
}

.chat-confirm-dialog__content h2 {
    margin: 0 0 12px;
    font-size: 21px;
}

.chat-confirm-dialog__content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.chat-confirm-dialog__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.chat-confirm-dialog__buttons button {
    padding: 11px 16px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

#chat-confirm-cancel {
    color: #415e55;
    background: #e8eee9;
}

#chat-confirm-accept {
    color: #173329;
    background: #efbc48;
}

.chat-confirm-dialog__buttons button:hover {
    filter: brightness(0.96);
}

.chat-confirm-dialog__buttons button:focus-visible {
    outline: 3px solid #0d5142;
    outline-offset: 3px;
}

@media (max-width: 520px) {
    .chat-confirm-dialog {
        padding: 20px;
    }

    .chat-confirm-dialog__layout {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .chat-confirm-dialog__buttons {
        justify-content: center;
    }
}

/* === AURORA PATCH END: CHAT HELPER CONFIRM === */

/* === AURORA PATCH START: CHAT REVOKE DIALOG === */

.chat-revoke-dialog__label {
    display: block;
    margin: 18px 0 8px;

    color: #173329;

    font-size: 13px;
    font-weight: 800;
}

.chat-revoke-dialog__reason {
    width: 100%;
    min-height: 100px;

    padding: 12px 14px;

    color: #102c28;
    background: #fff;

    border: 1px solid #cbd8ce;
    border-radius: 12px;

    font: inherit;
    font-size: 13px;
    line-height: 1.5;

    resize: vertical;
}

.chat-revoke-dialog__reason:focus {
    outline: 2px solid #0d5142;
    outline-offset: 2px;
    border-color: #0d5142;
}

.chat-confirm-dialog__content .chat-revoke-dialog__error {
    margin: 8px 0 0;

    color: #b42318;

    font-size: 12px;
    line-height: 1.5;
}

.chat-revoke-dialog__error:empty {
    display: none;
}

#chat-revoke-cancel {
    color: #415e55;
    background: #e8eee9;
}

#chat-revoke-accept {
    color: #173329;
    background: #efbc48;
}

#chat-revoke-accept:disabled {
    opacity: 0.55;
    cursor: wait;
}

/* === AURORA PATCH END: CHAT REVOKE DIALOG === */

.chat-sanction-dialog::backdrop {
            background: rgba(2, 29, 24, 0.65);
        }
    
        .chat-sanction-dialog__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
        }
    
        .chat-sanction-dialog h2 {
            margin: 0;
            font-size: 21px;
        }
    
        .chat-sanction-close {
            background: transparent;
            color: #415e55;
            font-size: 27px;
            cursor: pointer;
        }
    
        .chat-sanction-target {
            margin: 12px 0 20px;
            font-size: 13px;
            color: #65716d;
        }
    
        .chat-sanction-dialog form,
        #chat-sanction-duration-row {
            display: flex;
            flex-direction: column;
            gap: 9px;
        }
    
        .chat-sanction-dialog label {
            margin-top: 8px;
            font-size: 12px;
            font-weight: 800;
        }
    
        .chat-sanction-dialog select,
        .chat-sanction-dialog textarea {
            width: 100%;
            padding: 11px 12px;
    
            color: #102c28;
            background: #fff;
    
            border: 1px solid #d7dfd8;
            border-radius: 10px;
    
            font: inherit;
            font-size: 12px;
        }
    
        #chat-sanction-duration-row[hidden] {
            display: none;
        }
    
        .chat-sanction-error {
            min-height: 18px;
            margin: 0;
            color: #b8503e;
            font-size: 11px;
        }
    
        .chat-sanction-submit {
            margin-top: 8px;
            padding: 13px;
    
            background: #efbc48;
            color: #173329;
    
            border-radius: 12px;
    
            font-weight: 800;
            cursor: pointer;
        }
    
                .chat-sanction-submit:disabled {
                    opacity: 0.6;
                    cursor: wait;
                }
        
                /* ==========================================================
           CHAT RULES AND PRESENCE
        ========================================================== */
        
                .chat-info-card {
                    min-width: 0;
                }
        
                .chat-info-card__summary {
                    display: flex;
                    align-items: center;
        
                    gap: 8px;
        
                    color: #fff;
        
                    font-size: 14px;
                    font-weight: 800;
        
                    cursor: pointer;
        
                    list-style: none;
                }
        
                .chat-info-card__summary::-webkit-details-marker {
                    display: none;
                }
        
                .chat-info-card__summary:focus-visible {
                    outline: 2px solid #efbc48;
                    outline-offset: 5px;
                    border-radius: 4px;
                }
        
                                .chat-info-card__arrow {
                                    position: relative;
                
                                    width: 28px;
                                    height: 28px;
                                    flex: 0 0 28px;
                
                                    margin-left: auto;
                
                                    border: 1px solid rgba(239, 188, 72, 0.28);
                                    border-radius: 999px;
                
                                    background: rgba(239, 188, 72, 0.08);
                
                                    transition:
                                        transform 180ms ease,
                                        background 180ms ease,
                                        border-color 180ms ease,
                                        box-shadow 180ms ease;
                                }
                
                                .chat-info-card__arrow::before {
                                    content: "";
                
                                    position: absolute;
                                    left: 50%;
                                    top: 50%;
                
                                    width: 8px;
                                    height: 8px;
                
                                    border-right: 2px solid #efbc48;
                                    border-bottom: 2px solid #efbc48;
                
                                    transform: translate(-50%, -62%) rotate(45deg);
                                }
                
                                .chat-info-card__summary:hover .chat-info-card__arrow {
                                    background: rgba(239, 188, 72, 0.14);
                                    border-color: rgba(239, 188, 72, 0.5);
                                    box-shadow: 0 0 0 3px rgba(239, 188, 72, 0.08);
                                }
                
                                .chat-info-card[open] .chat-info-card__arrow {
                                    transform: rotate(180deg);
                                    background: rgba(239, 188, 72, 0.14);
                                    border-color: rgba(239, 188, 72, 0.5);
                                }
        
                .chat-info-card__body {
                    margin-top: 15px;
                    padding-top: 13px;
        
                    border-top: 1px solid rgba(255, 255, 255, 0.1);
                }
        
                .chat-rules-list {
                    margin: 12px 0;
                    padding-left: 18px;
        
                    color: rgba(255, 255, 255, 0.83);
        
                    font-size: 11px;
                    line-height: 1.7;
                }
        
                .chat-rules-list li+li {
                    margin-top: 7px;
                }
        
                .chat-rules-link {
                    display: inline-block;
        
                    margin-top: 12px;
        
                    color: #ffd875;
        
                    font-size: 11px;
                    font-weight: 800;
        
                    text-decoration: none;
                }
        
                .chat-rules-link:hover {
                    text-decoration: underline;
                }
        
                .chat-presence-count {
                    margin-left: auto;
                    padding: 3px 8px;
        
                    color: #173329;
                    background: #a6ecc1;
        
                    border-radius: 999px;
        
                    font-size: 11px;
                    font-weight: 800;
                    font-variant-numeric: tabular-nums;
                }
        
                .chat-presence-card .chat-info-card__arrow {
                    margin-left: 0;
                }
        
                .chat-presence-list {
                    max-height: 240px;
        
                    margin: 12px 0 0;
                    padding: 0 6px 0 0;
        
                    overflow-y: auto;
                    overscroll-behavior: contain;
        
                    list-style: none;
        
                    scrollbar-width: thin;
                    scrollbar-color: rgba(166, 236, 193, 0.65) transparent;
                }
        
                .chat-presence-user {
                    display: flex;
                    align-items: center;
        
                    gap: 9px;
        
                    min-width: 0;
                    padding: 9px 7px;
        
                    color: #fff;
        
                    font-size: 12px;
        
                    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
                }
        
                .chat-presence-user__dot {
                    width: 7px;
                    height: 7px;
        
                    flex: 0 0 7px;
        
                    background: #72d89e;
                    border-radius: 50%;
                }
        
                .chat-presence-user__name {
                    min-width: 0;
        
                    overflow-wrap: anywhere;
                }
        
                .chat-presence-empty {
                    padding: 10px 0;
        
                    color: rgba(255, 255, 255, 0.6);
        
                    font-size: 11px;
                    line-height: 1.5;
                }
        
                .chat-info-card__body .chat-presence-footer {
                    margin-top: 10px;
        
                    color: #ffd875;
        
                    font-size: 10px;
                }
        
                .chat-info-card__body .chat-presence-footer[hidden] {
                    display: none;
                }