@property --brk-border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

:root {
    --chat-left: 24px;
    --chat-bottom: 64px;
    --chat-width: 500px;
    --chat-height: 152px;
    --chat-input-height: 36px;
    --chat-panel-opacity: 0.34;
    --chat-focused-panel-opacity: 0.52;
    --chat-input-opacity: 0.38;
    --chat-suggestion-opacity: 0.44;
    --chat-fade-ms: 220ms;
    --chat-font-size: 16px;
    --chat-suggestions-shift: 0px;
    --chat-edge-padding: 8px;

    --chat-text-main: rgba(255, 255, 255, 0.98);
    --chat-text-name: rgba(204, 213, 216, 0.96);
    --chat-text-me: rgba(177, 8, 8, 0.98);
    --chat-text-do: rgba(199, 82, 65, 0.96);
    --chat-text-ooc: rgba(105, 20, 28, 0.98);
    --chat-text-system: rgba(204, 213, 216, 0.96);
    --chat-dm-incoming: rgba(211, 172, 92, 0.98);
    --chat-dm-outgoing: rgba(211, 172, 92, 0.86);
    --chat-unread-flash: rgba(177, 8, 8, 0.92);
    --chat-text-yell: rgba(255, 244, 235, 1.0);
    --chat-text-whisper: rgba(168, 168, 160, 0.88);
    --chat-red: rgba(177, 8, 8, 0.98);
    --chat-gold: rgba(207, 157, 62, 0.98);

    --chat-theme-primary: rgba(177, 8, 8, 0.98);
    --chat-theme-deep: rgba(105, 20, 28, 0.96);
    --chat-theme-highlight: rgba(255, 255, 255, 0.92);
    --chat-theme-accent: rgba(207, 157, 62, 0.94);
    --chat-theme-border-duration: 5000ms;
    --chat-theme-border-opacity: 0.92;
    --chat-theme-read-only-border: rgba(154, 154, 152, 0.98);
    --chat-theme-read-only-opacity: 0.54;
    --chat-theme-read-only-placeholder: rgba(207, 157, 62, 0.72);

    --channel-color: var(--chat-gold);
    --active-channel-color: var(--chat-gold);
}

* {
    box-sizing: border-box;
    user-select: none;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: transparent;
    font-family: 'RDRLedger', Georgia, serif;
}

#app {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.chat-panel {
    position: absolute;
    left: var(--chat-left);
    bottom: var(--chat-bottom);
    width: var(--chat-width);
    height: var(--chat-height);
    max-width: calc(100vw - (var(--chat-edge-padding) * 2));
    max-height: calc(100vh - (var(--chat-edge-padding) * 2));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
    opacity: 1;
    isolation: isolate;
    transition:
        opacity var(--chat-fade-ms) ease,
        width 170ms ease,
        height 170ms ease,
        font-size 170ms ease,
        transform 170ms ease;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.48));
}

.chat-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('../../../ui/inkroller_1a.png') bottom left / 100% 100% no-repeat;
    opacity: var(--chat-panel-opacity);
    pointer-events: none;
    transition: opacity var(--chat-fade-ms) ease;
}

.chat-panel.panel-hidden {
    opacity: 0;
}

.chat-panel.panel-focused::before {
    opacity: var(--chat-focused-panel-opacity);
}

.chat-panel:focus {
    outline: none;
}

.chat-panel.positioning,
.chat-panel.opacity-editing {
    opacity: 1;
    transition: none;
}

.chat-panel.positioning::before,
.chat-panel.opacity-editing::before {
    opacity: var(--chat-focused-panel-opacity);
}

/* Reuse the active chat theme border while the whole panel is selected for movement/editing. */
.chat-panel.positioning::after,
.chat-panel.opacity-editing::after {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: 10;
    padding: 1px;
    border-radius: 2px;
    background: conic-gradient(
        from var(--brk-border-angle),
        var(--chat-theme-primary) 0deg,
        var(--chat-theme-primary) 82deg,
        var(--chat-theme-deep) 128deg,
        var(--chat-theme-highlight) 158deg,
        var(--chat-theme-primary) 198deg,
        var(--chat-theme-accent) 250deg,
        var(--chat-theme-primary) 306deg,
        var(--chat-theme-primary) 360deg
    );
    animation: brk-input-border-flow var(--chat-theme-border-duration) linear infinite;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: var(--chat-theme-border-opacity);
    pointer-events: none;
}

.chat-messages {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: 15px 10px 7px 16px;
    overflow-y: auto;
    scrollbar-width: none;
}

/* pins short histories to the bottom edge without the focus jump
   justify-content flex-end causes when the list switches to scrollable */
.chat-messages > .chat-row:first-child {
    margin-top: auto;
}

.chat-panel.panel-focused .chat-messages {
    pointer-events: auto;
}

/* the popup sits below the input row, the panel lifts by a steady amount while
   it is open so the popup clears the bottom of the screen */
.chat-panel.has-suggestions {
    transform: translateY(calc(-1 * var(--chat-suggestions-shift)));
}

.chat-messages::-webkit-scrollbar {
    width: 0;
}

.chat-row {
    position: relative;
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    max-width: none;
    min-width: 0;
    padding-left: 8px;
    padding-right: 2px;
    color: var(--chat-text-main);
    font-size: var(--chat-font-size);
    font-weight: 400;
    line-height: 1.22;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 1),
        0 0 4px rgba(0, 0, 0, 0.82);
    overflow-wrap: anywhere;
    word-break: break-all;
}

.chat-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.25em;
    bottom: 0.18em;
    width: 2px;
    background: transparent;
}

.chat-name {
    color: var(--chat-text-name);
    font-weight: 400;
}

.chat-me {
    color: var(--chat-text-me);
    font-style: italic;
}

.chat-me::before {
    background: rgba(177, 8, 8, 0.86);
}

.chat-do {
    color: var(--chat-text-do);
    font-style: italic;
}

.chat-do::before {
    background: rgba(190, 205, 214, 0.56);
}

.chat-ooc {
    color: var(--chat-text-ooc);
}

.chat-yell {
    color: var(--chat-text-yell);
    letter-spacing: 0.4px;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 1),
        0 0 6px rgba(0, 0, 0, 0.95);
}

.chat-yell::before {
    background: rgba(255, 244, 235, 0.62);
}

.chat-whisper {
    color: var(--chat-text-whisper);
    font-style: italic;
    font-size: calc(var(--chat-font-size) - 1px);
}

.chat-whisper::before {
    background: rgba(168, 168, 160, 0.42);
}

.chat-ooc::before {
    background: rgba(155, 151, 143, 0.50);
}

.chat-system,
.chat-external {
    font-size: calc(var(--chat-font-size) - 1px);
}

.chat-system {
    color: var(--chat-text-system);
}

.chat-system::before {
    background: rgba(177, 8, 8, 0.74);
}

.chat-announce,
.chat-notify {
    color: var(--chat-gold);
    font-family: 'Redemption', Georgia, serif;
}

.chat-announce .chat-text,
.chat-notify .chat-text {
    color: inherit;
}

.chat-announce::before,
.chat-notify::before {
    background: rgba(177, 8, 8, 0.74);
}

.chat-channel::before {
    background: var(--channel-color);
    opacity: 0.78;
}

.chat-channel .chat-name {
    color: var(--channel-color);
}

.chat-dm {
    font-size: calc(var(--chat-font-size) - 1px);
}

.chat-dm-incoming {
    color: var(--chat-dm-incoming);
}

.chat-dm-outgoing {
    color: var(--chat-dm-outgoing);
}

.chat-dm::before {
    background: currentColor;
    opacity: 0.72;
}

.chat-dm-label {
    color: inherit;
    font-weight: 400;
}


.chat-input-row {
    position: relative;
    z-index: 5;
    display: flex;
    flex: 0 0 var(--chat-input-height);
    align-items: center;
    min-height: var(--chat-input-height);
    margin: 0 11px 8px;
    padding: 3px 22px 4px 10px;
    background: transparent;
    pointer-events: auto;
    isolation: isolate;
}

.chat-input-row::before {
    content: '';
    position: absolute;
    inset: -1px -14px -1px 0;
    z-index: -2;
    background: rgba(5, 5, 5, var(--chat-input-opacity));
    border-radius: 2px;
    opacity: 1;
    pointer-events: none;
}

.chat-input-row::after {
    content: '';
    position: absolute;
    inset: -1px -14px -1px 0;
    z-index: -1;
    padding: 1px;
    border-radius: 2px;
    background: conic-gradient(
        from var(--brk-border-angle),
        var(--chat-theme-primary) 0deg,
        var(--chat-theme-primary) 82deg,
        var(--chat-theme-deep) 128deg,
        var(--chat-theme-highlight) 158deg,
        var(--chat-theme-primary) 198deg,
        var(--chat-theme-accent) 250deg,
        var(--chat-theme-primary) 306deg,
        var(--chat-theme-primary) 360deg
    );
    animation: brk-input-border-flow var(--chat-theme-border-duration) linear infinite;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: var(--chat-theme-border-opacity);
    pointer-events: none;
}

@keyframes brk-input-border-flow {
    to {
        --brk-border-angle: 360deg;
    }
}

.chat-input-row.hidden {
    display: none;
}

.chat-channel-tabs {
    position: relative;
    z-index: 6;
    display: flex;
    flex: 0 0 auto;
    align-items: flex-end;
    gap: 5px;
    min-height: 25px;
    margin: 0 11px 4px;
    padding: 0 1px;
    overflow: hidden;
    pointer-events: none;
}

.chat-channel-tabs.hidden {
    display: none;
}

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

    position: relative;
    display: flex;
    flex: 0 1 auto;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    max-width: 34%;
    padding: 7px 8px 2px;
    background: rgba(4, 4, 4, 0.58);
    border: 1px solid rgba(110, 110, 110, 0.34);
    border-bottom-color: rgba(110, 110, 110, 0.58);
    color: rgba(202, 202, 202, 0.72);
    font-family: 'Redemption', Georgia, serif;
    line-height: 1;
    opacity: 0.78;
}

.chat-channel-tab::after {
    content: '';
    position: absolute;
    right: 5px;
    bottom: -1px;
    left: 5px;
    height: 1px;
    background: transparent;
}

.chat-channel-tab.active {
    background: rgba(8, 8, 8, 0.88);
    border-color: var(--tab-channel-color);
    color: var(--tab-channel-color);
    opacity: 1;
}

.chat-channel-tab.active .chat-channel-tab-name {
    color: var(--tab-channel-color);
    filter: brightness(1.35);
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.18);
}

.chat-channel-tab.active::after {
    background: var(--tab-channel-color);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.72);
}

.chat-channel-tab.unread:not(.active) {
    animation: brk-chat-unread-tab 1.85s ease-in-out infinite;
    border-color: var(--chat-unread-flash);
}

.chat-channel-tab.unread:not(.active) .chat-channel-tab-name {
    color: var(--chat-unread-flash);
}

.chat-channel-tab.unread:not(.active)::after {
    background: var(--chat-unread-flash);
    box-shadow: 0 0 7px var(--chat-unread-flash);
}

@keyframes brk-chat-unread-tab {
    0%, 100% {
        background: rgba(4, 4, 4, 0.58);
        box-shadow: none;
        opacity: 0.78;
    }
    50% {
        background: rgba(45, 6, 6, 0.70);
        box-shadow: 0 0 8px var(--chat-unread-flash);
        opacity: 0.95;
    }
}

.chat-channel-tab.read-only {
    opacity: 0.42;
}

.chat-channel-tab-name {
    min-width: 0;
    overflow: hidden;
    font-size: calc(var(--chat-font-size) - 2px);
    letter-spacing: 0.3px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.chat-channel-tab-hint {
    flex: 0 0 auto;
    color: rgba(220, 220, 220, 0.58);
    font-family: 'RDRLedger', Georgia, serif;
    font-size: calc(var(--chat-font-size) - 6px);
    letter-spacing: 0;
    text-transform: uppercase;
}

.chat-channel-tab-hint.read-only {
    color: rgba(207, 157, 62, 0.82);
}

.chat-input-row.read-only-channel::after {
    animation: none;
    background: var(--chat-theme-read-only-border);
    opacity: var(--chat-theme-read-only-opacity);
}

.chat-input-row.read-only-channel .chat-input::placeholder {
    color: var(--chat-theme-read-only-placeholder);
}

.chat-input-row.read-only-flash::before {
    animation: brk-read-only-flash 320ms ease-out;
}

@keyframes brk-read-only-flash {
    0% {
        background: var(--chat-theme-primary);
    }

    100% {
        background: rgba(5, 5, 5, var(--chat-input-opacity));
    }
}

/* suggestions hang below the chat panel, under the input row */
.chat-suggestions {
    position: absolute;
    z-index: 6;
    left: 11px;
    right: 11px;
    top: calc(100% + 4px);
    padding: 6px 16px 7px 12px;
    background: transparent;
    pointer-events: none;
}

.chat-suggestions.hidden {
    display: none;
}

.chat-suggestion {
    min-height: 31px;
    padding: 3px 1px 4px;
}

.chat-suggestion + .chat-suggestion {
    border-top: 1px solid rgba(255, 255, 255, 0.045);
}

.chat-suggestion-main {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

.chat-suggestion-command,
.chat-suggestion-param {
    font-family: 'RDRLedger', Georgia, serif;
    font-size: calc(var(--chat-font-size) - 1px);
    font-weight: 400;
    line-height: 1.05;
    transition: color 120ms ease, text-shadow 120ms ease;
}

/* command token: lit while it is being typed, solid once the args start */
.chat-suggestion-command.active {
    color: rgba(238, 243, 245, 0.84);
}

.chat-suggestion-command.complete {
    color: rgba(255, 255, 255, 0.99);
}

.chat-suggestion-params {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* params: dim grey until reached, lit while being typed, solid once filled */
.chat-suggestion-param.pending {
    color: rgba(205, 211, 214, 0.38);
}

.chat-suggestion-param.active {
    color: rgba(238, 243, 245, 0.86);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.28);
}

.chat-suggestion-param.complete {
    color: rgba(255, 255, 255, 0.99);
}

.chat-suggestion-help {
    margin-top: 1px;
    color: rgba(204, 213, 216, 0.72);
    font-size: calc(var(--chat-font-size) - 4px);
    font-weight: 400;
    line-height: 1.04;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-input {
    flex: 1;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--chat-text-main);
    caret-color: var(--chat-gold);
    font-family: 'RDRLedger', Georgia, serif;
    font-size: var(--chat-font-size);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.98);
}


/* Website preview only ----------------------------------------------------- */

html,
body {
    cursor: url('../../../ui/cursor_brk.png') 3 3, default;
}

.chat-input {
    cursor: text;
}

/* Keep the real NUI fully visible inside the framed website stage. */
html.is-website-preview .chat-panel {
    max-width: calc(100vw - 70px);
    max-height: calc(100vh - 70px);
}

/* Website preview suggestion behavior -------------------------------------
   Keep the chat panel fixed in place. Suggestions hang below the input and
   never push/lift the chat upward. */
html.is-website-preview .chat-panel.has-suggestions {
    transform: none !important;
}

html.is-website-preview .chat-suggestions {
    top: calc(100% + 4px);
    max-height: none;
}

/* Narrow website stage (phones) — compact HUD, tabs readable. */
html.is-website-preview.is-mobile-preview {
    --chat-left: 6px;
    --chat-input-height: 34px;
    --chat-bottom: calc(var(--chat-input-height) + 16px);
    --chat-width: calc(100vw - 12px);
    --chat-height: 196px;
    --chat-font-size: 14px;
    --chat-edge-padding: 4px;
}

html.is-website-preview.is-mobile-preview .chat-panel {
    left: var(--chat-left);
    bottom: var(--chat-bottom);
    width: var(--chat-width);
    height: var(--chat-height);
    max-width: none;
    max-height: none;
    transition: opacity var(--chat-fade-ms) ease;
}

html.is-website-preview.is-mobile-preview .chat-messages > .chat-row:first-child {
    margin-top: 0;
}

html.is-website-preview.is-mobile-preview .chat-suggestions {
    bottom: auto;
    max-height: calc(var(--chat-input-height) + 72px);
    overflow-y: auto;
}

html.is-website-preview.is-mobile-preview .chat-channel-tabs {
    gap: 3px;
    margin: 0 4px 3px;
}

html.is-website-preview.is-mobile-preview .chat-channel-tab {
    flex: 1 1 0;
    max-width: none;
    justify-content: center;
    gap: 0;
    padding: 6px 2px 2px;
}

html.is-website-preview.is-mobile-preview .chat-channel-tab-hint {
    display: none;
}

html.is-website-preview.is-mobile-preview .chat-channel-tab-name {
    font-size: calc(var(--chat-font-size) - 3px);
    letter-spacing: 0.12px;
}