:root {
    --cn-notice-surface: var(--global-dm-surface-solid, var(--panel-bg, #0f172a));
    --cn-notice-border: rgba(100, 116, 139, 0.42);
    --cn-notice-text: var(--global-dm-text, #f8fafc);
    --cn-notice-shadow: 0 22px 50px rgba(2, 6, 23, 0.42);
    --cn-notice-width: 420px;
    --cn-notice-padding: 12px 12px 12px 14px;
    --cn-notice-radius: 18px;
    --cn-notice-message-size: 14px;
    --cn-notice-icon-size: 20px;
    --cn-notice-font-family: "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    --cn-notice-brand: var(--accent-color-strong, var(--accent-color, #3b82f6));
    --cn-notice-accent: var(--cn-notice-brand);
    --cn-notice-text: #f8fbff;
    --cn-notice-link: #ffffff;
    --cn-notice-inner-bg-top: color-mix(in srgb, var(--cn-notice-surface) 82%, var(--cn-notice-accent) 18%);
    --cn-notice-inner-bg-bottom: color-mix(in srgb, var(--cn-notice-surface) 90%, #000000 10%);
    --cn-notice-inner-border: color-mix(in srgb, var(--cn-notice-accent) 35%, rgba(100, 116, 139, 0.42) 65%);
    --cn-notice-bubble-bg: rgba(255, 255, 255, 0.16);
    --cn-notice-bubble-border: rgba(255, 255, 255, 0.32);
    --cn-notice-bubble-shadow: 0 10px 24px rgba(2, 6, 23, 0.22);
    --cn-notice-close-bg: color-mix(in srgb, var(--cn-notice-surface) 78%, #000000 22%);
    --cn-notice-close-border: color-mix(in srgb, var(--cn-notice-accent) 44%, rgba(255, 255, 255, 0.22) 56%);
    --cn-notice-close-color: color-mix(in srgb, var(--cn-notice-text) 86%, #ffffff 14%);
}

.cn-global-chat-notice {
    position: fixed;
    right: max(14px, env(safe-area-inset-right, 0px));
    left: auto;
    top: 6px;
    z-index: 2147482000;
    width: fit-content;
    max-width: min(var(--cn-notice-width), calc(100vw - 18px));
    pointer-events: none;
}

html.cn-global-chat-notice-prehidden .cn-global-chat-notice {
    display: none !important;
}

.cn-global-chat-notice.is-hidden {
    display: none;
}

.cn-global-chat-notice__inner {
    position: relative;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    color: var(--cn-notice-text);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0;
    pointer-events: auto;
    padding: 4px 28px 0 0;
    width: fit-content;
    max-width: 100%;
    animation: cnNoticeSlideIn 0.28s ease-out;
    transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;
}

.cn-global-chat-notice__inner.is-entering {
    animation: cnNoticeSwipeDown 0.34s cubic-bezier(0.2, 0.72, 0.18, 1);
}

.cn-global-chat-notice__inner.is-updating {
    animation: cnNoticeContentRefresh 0.42s cubic-bezier(0.2, 0.72, 0.18, 1);
}

.cn-global-chat-notice__inner:hover {
    transform: translateY(-1px) scale(1.005);
}

.cn-global-chat-notice__inner::before {
    display: none;
}

.cn-global-chat-notice__inner::after {
    display: none;
}

.cn-global-chat-notice__body {
    display: flex;
    align-items: flex-end;
    gap: 0;
    min-width: 0;
    flex: 0 1 auto;
    width: fit-content;
    max-width: calc(100% - 64px);
}

.cn-global-chat-notice__message {
    position: relative;
    display: block;
    font-size: var(--cn-notice-message-size);
    line-height: 1.5;
    min-width: 0;
    padding: 10px 38px 10px 14px;
    border-radius: 16px;
    border: 2px solid var(--cn-notice-bubble-border);
    background: linear-gradient(172deg, color-mix(in srgb, var(--cn-notice-bubble-bg) 90%, #ffffff 10%), var(--cn-notice-bubble-bg));
    box-shadow: 0 12px 22px rgba(2, 6, 23, 0.28);
    backdrop-filter: saturate(1.12) blur(2px);
    white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: break-word;
    transform-origin: right bottom;
    color: var(--cn-notice-text);
    font-family: var(--cn-notice-font-family);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-rendering: optimizeLegibility;
}

.cn-global-chat-notice__message.is-talking {
    animation: cnNoticeBubbleTalk 0.34s cubic-bezier(0.2, 0.72, 0.18, 1);
}

.cn-global-chat-notice__message::before {
    content: '';
    position: absolute;
    right: -11px;
    top: calc(100% - 47px);
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 0 solid transparent;
    border-left: 11px solid var(--cn-notice-bubble-border);
    transform: rotate(10deg);
}

.cn-global-chat-notice__message::after {
    content: '';
    position: absolute;
    right: -8px;
    top: calc(100% - 46px);
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 0 solid transparent;
    border-left: 9px solid var(--cn-notice-bubble-bg);
    transform: rotate(10deg);
}

.cn-global-chat-notice__mascot {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    object-fit: contain;
    margin-top: 0;
    margin-right: 0;
    filter: drop-shadow(0 8px 14px rgba(2, 6, 23, 0.26));
    animation: cnNoticeMascotFloat 3.2s ease-in-out infinite;
}

body.notice-density-compact {
    --cn-notice-width: 360px;
    --cn-notice-padding: 9px 10px 9px 12px;
    --cn-notice-radius: 14px;
    --cn-notice-message-size: 12.5px;
    --cn-notice-icon-size: 18px;
}

body.notice-density-compact .cn-global-chat-notice__mascot {
    width: 44px;
    height: 44px;
}

body.notice-density-comfortable {
    --cn-notice-width: 420px;
    --cn-notice-padding: 12px 12px 12px 14px;
    --cn-notice-radius: 18px;
    --cn-notice-message-size: 14px;
    --cn-notice-icon-size: 20px;
}

.cn-global-chat-notice__message a {
    color: var(--cn-notice-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

.cn-global-chat-notice__close {
    position: absolute;
    top: 6px;
    right: 6px;
    flex: 0 0 auto;
    margin: 0;
    opacity: 0.92;
    border-radius: 999px;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cn-notice-close-border);
    background: var(--cn-notice-close-bg);
    box-shadow: 0 4px 10px rgba(2, 6, 23, 0.28);
    background-image: none;
    filter: none;
    color: var(--cn-notice-close-color);
}

.cn-global-chat-notice__close::before {
    content: '✕';
    color: var(--cn-notice-close-color);
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    transform: translateY(0);
}

.cn-global-chat-notice__close:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--cn-notice-close-bg) 80%, #ffffff 20%);
}

.cn-global-chat-notice__close:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--cn-notice-accent) 70%, #ffffff 30%);
    outline-offset: 1px;
}

.cn-global-chat-notice--success {
    --cn-notice-accent: #198754;
    --cn-notice-bubble-bg: color-mix(in srgb, #22c55e 18%, var(--cn-notice-surface) 82%);
    --cn-notice-bubble-border: color-mix(in srgb, #86efac 68%, rgba(255, 255, 255, 0.32) 32%);
    --cn-notice-text: #f4fff7;
}

.cn-global-chat-notice--success .cn-global-chat-notice__inner {
    --cn-notice-inner-bg-top: color-mix(in srgb, #22c55e 20%, var(--cn-notice-surface) 80%);
    --cn-notice-inner-bg-bottom: color-mix(in srgb, #16a34a 12%, var(--cn-notice-surface) 88%);
    --cn-notice-inner-border: color-mix(in srgb, #86efac 45%, rgba(100, 116, 139, 0.42) 55%);
}

.cn-global-chat-notice--warning {
    --cn-notice-accent: #f59e0b;
    --cn-notice-bubble-bg: color-mix(in srgb, #f59e0b 18%, var(--cn-notice-surface) 82%);
    --cn-notice-bubble-border: color-mix(in srgb, #fcd34d 66%, rgba(255, 255, 255, 0.32) 34%);
    --cn-notice-text: #fff8e8;
}

.cn-global-chat-notice--warning .cn-global-chat-notice__inner {
    --cn-notice-inner-bg-top: color-mix(in srgb, #f59e0b 22%, var(--cn-notice-surface) 78%);
    --cn-notice-inner-bg-bottom: color-mix(in srgb, #d97706 12%, var(--cn-notice-surface) 88%);
    --cn-notice-inner-border: color-mix(in srgb, #fcd34d 45%, rgba(100, 116, 139, 0.42) 55%);
}

.cn-global-chat-notice--danger {
    --cn-notice-accent: #dc3545;
    --cn-notice-bubble-bg: color-mix(in srgb, #f43f5e 18%, var(--cn-notice-surface) 82%);
    --cn-notice-bubble-border: color-mix(in srgb, #fda4af 63%, rgba(255, 255, 255, 0.32) 37%);
    --cn-notice-text: #fff3f5;
}

.cn-global-chat-notice--danger .cn-global-chat-notice__inner {
    --cn-notice-inner-bg-top: color-mix(in srgb, #f43f5e 22%, var(--cn-notice-surface) 78%);
    --cn-notice-inner-bg-bottom: color-mix(in srgb, #be123c 13%, var(--cn-notice-surface) 87%);
    --cn-notice-inner-border: color-mix(in srgb, #fda4af 46%, rgba(100, 116, 139, 0.42) 54%);
}

.cn-global-chat-notice--primary {
    --cn-notice-accent: var(--cn-notice-brand);
    --cn-notice-bubble-bg: color-mix(in srgb, var(--cn-notice-accent) 20%, var(--cn-notice-surface) 80%);
    --cn-notice-bubble-border: color-mix(in srgb, var(--cn-notice-accent) 60%, rgba(255, 255, 255, 0.34) 40%);
}

.cn-global-chat-notice--primary .cn-global-chat-notice__inner {
    --cn-notice-inner-bg-top: color-mix(in srgb, var(--cn-notice-accent) 20%, var(--cn-notice-surface) 80%);
    --cn-notice-inner-bg-bottom: color-mix(in srgb, var(--cn-notice-accent) 12%, var(--cn-notice-surface) 88%);
    --cn-notice-inner-border: color-mix(in srgb, var(--cn-notice-accent) 45%, rgba(100, 116, 139, 0.42) 55%);
}

.cn-global-chat-notice--secondary {
    --cn-notice-accent: #64748b;
    --cn-notice-bubble-bg: color-mix(in srgb, #94a3b8 14%, var(--cn-notice-surface) 86%);
    --cn-notice-bubble-border: color-mix(in srgb, #cbd5e1 60%, rgba(255, 255, 255, 0.3) 40%);
    --cn-notice-text: #f8fbff;
}

.cn-global-chat-notice--secondary .cn-global-chat-notice__inner {
    --cn-notice-inner-bg-top: color-mix(in srgb, #64748b 16%, var(--cn-notice-surface) 84%);
    --cn-notice-inner-bg-bottom: color-mix(in srgb, #475569 10%, var(--cn-notice-surface) 90%);
    --cn-notice-inner-border: color-mix(in srgb, #94a3b8 42%, rgba(100, 116, 139, 0.42) 58%);
}

.cn-global-chat-notice--info {
    --cn-notice-accent: #06b6d4;
    --cn-notice-bubble-bg: color-mix(in srgb, #06b6d4 19%, var(--cn-notice-surface) 81%);
    --cn-notice-bubble-border: color-mix(in srgb, #67e8f9 64%, rgba(255, 255, 255, 0.32) 36%);
    --cn-notice-text: #effdff;
}

.cn-global-chat-notice--info .cn-global-chat-notice__inner {
    --cn-notice-inner-bg-top: color-mix(in srgb, #06b6d4 20%, var(--cn-notice-surface) 80%);
    --cn-notice-inner-bg-bottom: color-mix(in srgb, #0e7490 12%, var(--cn-notice-surface) 88%);
    --cn-notice-inner-border: color-mix(in srgb, #67e8f9 45%, rgba(100, 116, 139, 0.42) 55%);
}

.cn-global-chat-notice--light {
    --cn-notice-accent: #cbd5e1;
    --cn-notice-bubble-bg: rgba(255, 255, 255, 0.9);
    --cn-notice-bubble-border: rgba(100, 116, 139, 0.72);
    --cn-notice-bubble-shadow: 0 9px 20px rgba(71, 85, 105, 0.16);
    --cn-notice-inner-bg-top: rgba(255, 255, 255, 0.98);
    --cn-notice-inner-bg-bottom: rgba(241, 245, 249, 0.96);
    --cn-notice-inner-border: rgba(203, 213, 225, 0.92);
    --cn-notice-text: #1e293b;
    --cn-notice-link: #1d4ed8;
    --cn-notice-close-bg: rgba(241, 245, 249, 0.95);
    --cn-notice-close-border: rgba(100, 116, 139, 0.38);
    --cn-notice-close-color: #334155;
}

.cn-global-chat-notice--light .cn-global-chat-notice__inner {
    color: var(--cn-notice-text);
}

.cn-global-chat-notice--dark {
    --cn-notice-accent: #0f172a;
    --cn-notice-bubble-bg: rgba(255, 255, 255, 0.14);
    --cn-notice-bubble-border: rgba(203, 213, 225, 0.45);
    --cn-notice-inner-bg-top: rgba(15, 23, 42, 0.98);
    --cn-notice-inner-bg-bottom: rgba(2, 6, 23, 0.98);
    --cn-notice-inner-border: rgba(71, 85, 105, 0.9);
    --cn-notice-link: #bfdbfe;
}

.trueblue .cn-global-chat-notice,
body.trueblue .cn-global-chat-notice {
    --cn-notice-brand: #1877f2;
    --cn-notice-accent: var(--cn-notice-brand);
    --cn-notice-text: #f7fbff;
    --cn-notice-link: #dbeafe;
    --cn-notice-close-bg: color-mix(in srgb, #125fcb 56%, #0b2f63 44%);
    --cn-notice-close-border: color-mix(in srgb, #93c5fd 58%, rgba(255, 255, 255, 0.22) 42%);
    --cn-notice-close-color: #eaf3ff;
}

.trueblue .cn-global-chat-notice--primary,
body.trueblue .cn-global-chat-notice--primary {
    --cn-notice-bubble-bg: color-mix(in srgb, #1877f2 24%, var(--cn-notice-surface) 76%);
    --cn-notice-bubble-border: color-mix(in srgb, #60a5fa 68%, rgba(255, 255, 255, 0.32) 32%);
}

.trueblue .cn-global-chat-notice--success,
.trueblue .cn-global-chat-notice--warning,
.trueblue .cn-global-chat-notice--danger,
.trueblue .cn-global-chat-notice--secondary,
.trueblue .cn-global-chat-notice--info,
body.trueblue .cn-global-chat-notice--success,
body.trueblue .cn-global-chat-notice--warning,
body.trueblue .cn-global-chat-notice--danger,
body.trueblue .cn-global-chat-notice--secondary,
body.trueblue .cn-global-chat-notice--info {
    --cn-notice-accent: var(--cn-notice-brand);
    --cn-notice-bubble-bg: color-mix(in srgb, #1877f2 22%, var(--cn-notice-surface) 78%);
    --cn-notice-bubble-border: color-mix(in srgb, #60a5fa 70%, rgba(255, 255, 255, 0.3) 30%);
}

.trueblue .cn-global-chat-notice--primary .cn-global-chat-notice__inner,
body.trueblue .cn-global-chat-notice--primary .cn-global-chat-notice__inner {
    --cn-notice-inner-bg-top: color-mix(in srgb, #1877f2 22%, var(--cn-notice-surface) 78%);
    --cn-notice-inner-bg-bottom: color-mix(in srgb, #125fcb 14%, var(--cn-notice-surface) 86%);
    --cn-notice-inner-border: color-mix(in srgb, #60a5fa 52%, rgba(100, 116, 139, 0.42) 48%);
}

.trueblue .cn-global-chat-notice--success .cn-global-chat-notice__inner,
.trueblue .cn-global-chat-notice--warning .cn-global-chat-notice__inner,
.trueblue .cn-global-chat-notice--danger .cn-global-chat-notice__inner,
.trueblue .cn-global-chat-notice--secondary .cn-global-chat-notice__inner,
.trueblue .cn-global-chat-notice--info .cn-global-chat-notice__inner,
body.trueblue .cn-global-chat-notice--success .cn-global-chat-notice__inner,
body.trueblue .cn-global-chat-notice--warning .cn-global-chat-notice__inner,
body.trueblue .cn-global-chat-notice--danger .cn-global-chat-notice__inner,
body.trueblue .cn-global-chat-notice--secondary .cn-global-chat-notice__inner,
body.trueblue .cn-global-chat-notice--info .cn-global-chat-notice__inner {
    --cn-notice-inner-bg-top: color-mix(in srgb, #1877f2 22%, var(--cn-notice-surface) 78%);
    --cn-notice-inner-bg-bottom: color-mix(in srgb, #125fcb 14%, var(--cn-notice-surface) 86%);
    --cn-notice-inner-border: color-mix(in srgb, #60a5fa 52%, rgba(100, 116, 139, 0.42) 48%);
}

.cn-global-chat-notice--dark .cn-global-chat-notice__inner {
    color: #f8fafc;
}

.cn-global-chat-notice--light .cn-global-chat-notice__close {
    filter: none;
}

.cn-global-chat-notice--dark .cn-global-chat-notice__close,
.cn-global-chat-notice--primary .cn-global-chat-notice__close,
.cn-global-chat-notice--secondary .cn-global-chat-notice__close,
.cn-global-chat-notice--danger .cn-global-chat-notice__close,
.cn-global-chat-notice--warning .cn-global-chat-notice__close,
.cn-global-chat-notice--success .cn-global-chat-notice__close,
.cn-global-chat-notice--info .cn-global-chat-notice__close {
    filter: none;
}

@keyframes cnNoticeSlideIn {
    from {
        opacity: 0;
        transform: translate3d(14px, -8px, 0) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes cnNoticeSwipeDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -14px, 0) scale(0.985);
    }

    65% {
        opacity: 1;
        transform: translate3d(0, 1px, 0) scale(1.002);
    }

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

@keyframes cnNoticeContentRefresh {
    0% {
        transform: translate3d(0, -7px, 0) scale(0.992);
        filter: saturate(0.92) brightness(0.98);
    }

    55% {
        transform: translate3d(0, 0, 0) scale(1.004);
        filter: saturate(1.08) brightness(1.02);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: saturate(1) brightness(1);
    }
}

@keyframes cnNoticeBubbleTalk {
    0% {
        transform: translate3d(0, 2px, 0) scale(0.97) rotate(-1.5deg);
    }

    55% {
        transform: translate3d(0, -1px, 0) scale(1.02) rotate(0.7deg);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

@keyframes cnNoticeMascotFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2px);
    }
}

@media (max-width: 767.98px) {
    .cn-global-chat-notice {
        right: 8px;
        left: 8px;
        width: auto;
    }

    .cn-global-chat-notice__inner {
        border-radius: 0;
        padding: 2px 24px 0 0;
    }

    .cn-global-chat-notice__inner::before {
        display: none;
    }

    .cn-global-chat-notice__inner::after {
        border-radius: 16px;
    }

    .cn-global-chat-notice__message {
        font-size: 13px;
        padding: 8px 34px 8px 10px;
        border-width: 2px;
    }

    .cn-global-chat-notice__body {
        max-width: calc(100% - 52px);
    }

    .cn-global-chat-notice__message::before {
        right: -10px;
        top: calc(100% - 39px);
    }

    .cn-global-chat-notice__message::after {
        right: -7px;
        top: calc(100% - 38px);
    }

    .cn-global-chat-notice__mascot {
        width: 46px;
        height: 46px;
        margin-right: 0;
        margin-top: 0;
    }

    body.notice-density-compact .cn-global-chat-notice__message {
        font-size: 12px;
    }

    body.notice-density-compact .cn-global-chat-notice__mascot {
        width: 36px;
        height: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .cn-global-chat-notice__inner,
    .cn-global-chat-notice__inner.is-entering,
    .cn-global-chat-notice__inner.is-updating,
    .cn-global-chat-notice__message,
    .cn-global-chat-notice__message.is-talking,
    .cn-global-chat-notice__mascot {
        animation: none !important;
        transition: none !important;
    }
}