/* The chat widget (docs/chat-plan.md): the mirror image of the music player, on the left edge.
   Green where the player is gold, so the two read as a pair but not as the same thing. It was blue at first;
   Tyler, 2026-11-14: the site already has far more blue, the page's sides (where the chat sits) included, so the
   palette's green gives the chat more contrast.

   Every use of the chat's colour goes through these names, set once here:
     --chat-main    the dark shade: borders, and backgrounds that carry white text;
     --chat-accent  the palette's forest green: accents with no text on them, and coloured text on light ground;
     --chat-head    the lighter end of the header's and the tab's gradient. A little darker than forest green, on
                    purpose: white text on forest green itself falls just short of the usual contrast guideline
                    (4.25 to 1, against 4.5), and the room's name there is small.
   Links to other pages stay the site's link blue: that is what a link looks like. */
.chat-widget {
    --chat-main: #1b5e3a;
    --chat-accent: var(--forest-green);
    --chat-head: #277a4c;
    --chat-tint: 46, 139, 87;            /* forest green as numbers, for see-through tints */
    /* A gold line around the green parts (Tyler, 2026-11-14): more contrast against the blue page, and it ties
       the chat to the rest of the site, where gold edges the header and the music player. */
    --chat-edge: var(--gold);
}

.chat-widget {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    align-items: stretch;
    transition: transform 0.3s ease;
    font-family: 'VT323', monospace;
    color: var(--text-dark);
}
.chat-widget.collapsed { transform: translateY(-50%) translateX(calc(-100% + 34px)); }
.chat-widget [hidden] { display: none !important; }

.chat-toggle {
    width: 34px;
    position: relative;
    background: linear-gradient(135deg, var(--chat-head), var(--chat-main));
    border: 3px solid var(--chat-main);
    border-left: none;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 0 0 2px var(--chat-edge);
    cursor: pointer;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0;
}
.chat-toggle:hover { background: linear-gradient(135deg, var(--green-light), var(--chat-head)); }
.chat-toggle-icon { font-size: 1rem; line-height: 1; }
.chat-badge {
    min-width: 20px;
    padding: 1px 3px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.2);
    font-family: 'VT323', monospace;
    font-size: 0.95rem;
    line-height: 1.1;
    text-align: center;
}
.chat-badge:empty { display: none; }
.chat-badge-unread { background: var(--gold); color: var(--text-dark); font-weight: bold; }
.chat-badge-mention { background: #e5484d; color: #fff; }

.chat-content {
    width: 310px;
    height: min(560px, 82vh);
    display: flex;
    flex-direction: column;
    background: var(--panel-bg);
    border: 4px solid var(--chat-main);
    border-left: none;
    border-radius: 0 0 12px 0;
    box-shadow: 0 0 0 2px var(--chat-edge), inset 2px 2px 0 #dff0e4, inset -2px -2px 0 var(--chat-main), 6px 6px 0 rgba(0, 0, 0, 0.3);
    position: relative;
    min-width: 0;
}

/* The larger size: taller, and as wide as chat.js makes it (up to the music player, less a gap). The width is set
   in the script because the player's edge moves when it is opened or closed. */
.chat-widget.chat-large .chat-content { height: min(860px, 90vh); }
.chat-widget.chat-large .chat-popup { right: auto; width: min(420px, calc(100% - 0.8rem)); }
.chat-widget.chat-large .chat-media img, .chat-widget.chat-large .chat-media video { height: 220px; }
.chat-size { font-size: 1.05rem; }

.chat-header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    background: linear-gradient(135deg, var(--chat-head), var(--chat-main));
    color: #fff;
    border-bottom: 2px solid var(--chat-edge);
}
.chat-room { font-family: 'Press Start 2P', monospace; font-size: 0.6rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-here {
    font-family: 'VT323', monospace; font-size: 1.15rem; color: #fff; background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 4px; padding: 0 0.35rem; cursor: pointer;
}
.chat-here:hover { background: rgba(255, 255, 255, 0.3); }
.chat-icon { background: none; border: none; cursor: pointer; font-size: 0.9rem; padding: 0 0.15rem; line-height: 1.2; color: inherit; }
.chat-close { display: none; font-size: 1.1rem; }

.chat-topic { font-size: 1.1rem; padding: 0.15rem 0.5rem; background: #e3f1e7; border-bottom: 1px solid var(--border-highlight); overflow-wrap: anywhere; }
.chat-members {
    max-height: 30%; overflow-y: auto; padding: 0.3rem 0.5rem; background: var(--cream);
    border-bottom: 2px solid var(--border-inner); font-size: 1.25rem;
}
.chat-member { padding: 0.05rem 0; }

/* The message list and, over it while open, the search. */
.chat-mid { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.chat-search { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; background: var(--panel-bg); }
.chat-search-top { display: flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.5rem; border-bottom: 2px solid var(--border-inner); background: var(--cream); }
.chat-search-top .chat-field { margin-top: 0; }
.chat-search-hits { flex: 1; min-height: 0; overflow-y: auto; padding: 0.3rem 0.4rem; overscroll-behavior: contain; }
.chat-search-note { text-align: center; margin: 0.8rem 0.4rem; }
.chat-search-note span { font-family: monospace; font-size: 0.8rem; background: var(--cream-dark); padding: 0 0.2rem; border-radius: 3px; }
.chat-hit {
    display: block; width: 100%; text-align: left; cursor: pointer; margin: 0 0 0.25rem; padding: 0.15rem 0.35rem;
    font-family: 'VT323', monospace; font-size: 1.2rem; line-height: 1.15; color: var(--text-dark);
    background: none; border: 1px solid transparent; border-radius: 4px; box-shadow: none;
}
.chat-hit:hover, .chat-hit:focus-visible { background: rgba(var(--chat-tint), 0.1); border-color: var(--border-inner); outline: none; }
.chat-hit-text { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.chat-hit mark { background: var(--gold); color: var(--text-dark); padding: 0 0.1rem; border-radius: 2px; }
.chat-find-on { background: rgba(255, 255, 255, 0.3); border-radius: 4px; }

.chat-list { flex: 1; overflow-y: auto; padding: 0.4rem 0.5rem; font-size: 1.3rem; line-height: 1.15; overscroll-behavior: contain; }
.chat-empty, .chat-dim { color: var(--text-body); opacity: 0.75; font-size: 1.1rem; }
.chat-empty { text-align: center; margin-top: 2rem; }
.chat-msg { position: relative; margin-top: 0.4rem; padding: 0 0.2rem; border-radius: 3px; }
.chat-msg.chat-grouped { margin-top: 0.05rem; }
.chat-msg:hover { background: rgba(var(--chat-tint), 0.07); }
.chat-msg-mention { background: #fff3c4; box-shadow: inset 3px 0 0 var(--gold-dark); }
.chat-pending { opacity: 0.55; }
.chat-meta { display: flex; align-items: baseline; gap: 0.4rem; }
.chat-name { font-weight: bold; color: var(--chat-main); overflow-wrap: anywhere; }
.chat-level-guest { color: #6b6b80; font-weight: normal; }
.chat-level-known { color: var(--deep-blue); }
.chat-level-admin { color: #a35a00; }
.chat-time { font-size: 1rem; color: var(--text-body); opacity: 0.7; white-space: nowrap; }
.chat-body { overflow-wrap: anywhere; white-space: normal; }
.chat-body code { background: var(--cream-dark); padding: 0 0.2rem; border-radius: 3px; font-family: monospace; font-size: 0.8rem; }
.chat-body a { color: var(--mid-blue); }
.chat-edited { font-size: 1rem; opacity: 0.6; }
.chat-emoji { font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; }
/* A custom emoji: a small picture in the line of text (22 px, as the plan says), smaller in a reaction. */
.chat-cemoji { height: 22px; width: auto; max-width: 66px; vertical-align: -5px; object-fit: contain; }
.chat-react .chat-cemoji { height: 15px; vertical-align: middle; }
.chat-emoji-btn-custom { display: inline-flex; align-items: center; justify-content: center; }
/* "Find more" (the admin only): emoji that aren't in the library yet, shown under the library's own results. */
.chat-findmore { display: block; width: 100%; text-align: left; margin-top: 0.35rem; }
.chat-grid-none { width: 100%; margin: 0.3rem 0; }
.chat-outside { margin-top: 0.3rem; padding-top: 0.25rem; border-top: 1px dashed var(--border-inner); }
.chat-emoji-btn-outside { display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--border-inner); margin: 1px; }
.chat-emoji-btn-outside img { height: 22px; max-width: 26px; object-fit: contain; }
.chat-emoji-btn-outside:disabled { opacity: 0.4; cursor: wait; }
.chat-colon-more { color: var(--chat-accent); border-top: 1px dashed var(--border-inner); border-radius: 0; margin-top: 0.15rem; }
.chat-emoji-btn-custom .chat-cemoji { height: 22px; max-width: 26px; vertical-align: middle; }
.chat-colon-item .chat-cemoji { height: 20px; vertical-align: -4px; }
.chat-quote .chat-cemoji, .chat-hit .chat-cemoji { height: 18px; vertical-align: -4px; }
.chat-mention { color: var(--chat-accent); font-weight: bold; }
.chat-mention-me { background: var(--gold); color: var(--text-dark); padding: 0 0.15rem; border-radius: 3px; }
.chat-actions { position: absolute; right: 0.1rem; top: -0.2rem; display: none; background: var(--panel-bg); border: 1px solid var(--border-inner); border-radius: 4px; }
.chat-msg:hover .chat-actions, .chat-msg:focus-within .chat-actions { display: inline-flex; }
.chat-actions button { background: none; border: none; cursor: pointer; font-size: 0.8rem; padding: 0.05rem 0.25rem; }
.chat-msg.chat-msg-active { background: rgba(var(--chat-tint), 0.1); }
.chat-msg.chat-msg-active .chat-actions { display: inline-flex; }
.chat-msg-flash { animation: chat-flash 2.5s ease-out; }
@keyframes chat-flash { 0%, 40% { background: #ffe08a; } 100% { background: transparent; } }

/* A quoted message: above a quote reply, or under a message that has a message link pasted in it. */
.chat-quote {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin: 0.1rem 0; padding: 0 0.35rem; border-left: 3px solid var(--chat-accent); border-radius: 0 3px 3px 0;
    background: rgba(var(--chat-tint), 0.08); font-size: 1.1rem; line-height: 1.15; overflow-wrap: anywhere; cursor: pointer;
}
.chat-quote:hover, .chat-quote:focus-visible { background: rgba(var(--chat-tint), 0.18); outline: none; }
.chat-quote-name { font-weight: bold; color: var(--chat-main); }
.chat-quote-gone { font-style: italic; opacity: 0.7; cursor: default; }
.chat-quote-gone:hover { background: rgba(var(--chat-tint), 0.08); }
.chat-msglink { white-space: nowrap; }

.chat-reactions { display: flex; flex-wrap: wrap; gap: 3px; margin: 0.15rem 0 0.1rem; }
.chat-react {
    display: inline-flex; align-items: center; gap: 0.2rem; height: 22px; padding: 0 0.35rem; cursor: pointer;
    font-family: 'VT323', monospace; font-size: 1.05rem; line-height: 1; color: var(--text-dark);
    background: var(--cream); border: 1px solid var(--border-inner); border-radius: 11px;
}
.chat-react:hover { border-color: var(--chat-accent); }
.chat-react .chat-emoji { font-size: 0.85rem; }
.chat-react-mine { background: #d6efdd; border-color: var(--chat-accent); }
.chat-react-add { color: var(--text-body); padding: 0 0.45rem; }
.chat-quick { display: flex; gap: 2px; padding-bottom: 0.25rem; margin-bottom: 0.25rem; border-bottom: 1px dashed var(--border-inner); }
.chat-react-clear { display: block; margin-top: 0.4rem; color: #b02a37; }

/* A GIF, image or video shown from a link. The height is fixed, so the list doesn't shift when the file arrives. */
.chat-media { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0.15rem 0; line-height: 0; }
.chat-media-link { display: block; }
.chat-media img, .chat-media video {
    display: block; height: 150px; width: auto; max-width: 100%; object-fit: contain; object-position: left center;
    border-radius: 5px; background: var(--cream-dark);
}
/* The save button sits over the picture's corner: on hover with a mouse, always on a touch screen. */
.chat-media-save {
    position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; padding: 0; display: none;
    align-items: center; justify-content: center; cursor: pointer; font-size: 0.85rem; line-height: 1;
    color: #fff; background: rgba(10, 30, 70, 0.72); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 5px; box-shadow: none;
}
.chat-media:hover .chat-media-save, .chat-media-save:focus-visible { display: inline-flex; }
.chat-media-save:hover { background: var(--chat-main); }
@media (hover: none) { .chat-media-save { display: inline-flex; } }
.chat-media-failed { overflow-wrap: anywhere; }

/* Threads: the "▸ 3 replies" line under a message, and the replies when it is open. */
.chat-thread { margin: 0 0 0.15rem 0.5rem; }
.chat-thread-open { border-left: 3px solid var(--border-inner); padding: 0 0 0.15rem 0.35rem; margin-top: 0.1rem; }
.chat-thread-toggle {
    background: none; border: none; box-shadow: none; padding: 0 0.15rem; cursor: pointer;
    font-family: 'VT323', monospace; font-size: 1.1rem; line-height: 1.2; color: var(--chat-accent);
}
.chat-thread-toggle:hover { text-decoration: underline; }
.chat-thread-new { font-weight: bold; color: #a35a00; }
.chat-thread .chat-msg { margin-top: 0.25rem; }
.chat-thread .chat-msg.chat-grouped { margin-top: 0.05rem; }
.chat-thread-reply { display: block; margin-top: 0.2rem; }
.chat-thread-here { margin-top: 0.2rem; }
/* Pictures uploaded and waiting to go with the next message. */
.chat-attachbar { display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.5rem; font-size: 1.05rem; background: #eef7ee; border-top: 1px dashed var(--border-inner); }
.chat-attached { position: relative; display: inline-block; line-height: 0; }
.chat-attached img { height: 40px; width: 40px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border-inner); background: var(--cream-dark); }
.chat-attached-x {
    position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; padding: 0; cursor: pointer; font-size: 0.6rem; line-height: 1;
    color: #fff; background: #b02a37; border: 1px solid #fff; border-radius: 50%; box-shadow: none;
}
.chat-content.chat-drop { outline: 3px dashed var(--chat-accent); outline-offset: -6px; }

.chat-replybar, .chat-threadbar {
    display: flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.5rem; font-size: 1.1rem;
    background: #e3f1e7; border-top: 1px dashed var(--border-inner);
}
.chat-threadbar { background: #fff3c4; }
.chat-reply-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chat-sys { font-size: 1.15rem; font-style: italic; color: var(--text-body); opacity: 0.85; margin-top: 0.3rem; overflow-wrap: anywhere; }
.chat-sys-private { background: #edf6ef; border-left: 3px solid var(--chat-accent); padding: 0.1rem 0.3rem; font-style: normal; }
.chat-divider { display: flex; align-items: center; gap: 0.4rem; color: #c0392b; font-size: 1.05rem; margin: 0.3rem 0 0; }
.chat-divider::before, .chat-divider::after { content: ''; flex: 1; border-top: 1px solid #e5a39c; }
.chat-older { display: block; margin: 0 auto 0.4rem; font-family: 'VT323', monospace; font-size: 0.9rem; background: none; border: 1px dashed var(--border-inner); border-radius: 4px; cursor: pointer; padding: 0.1rem 0.5rem; color: var(--text-body); }

.chat-status, .chat-flash { font-size: 1.15rem; padding: 0.15rem 0.5rem; }
.chat-status { background: #fff3cd; }
.chat-flash { background: #fde2e2; }
.chat-preview { font-size: 1.25rem; padding: 0.2rem 0.5rem; border-top: 1px dashed var(--border-inner); background: var(--cream); overflow-wrap: anywhere; max-height: 4.5rem; overflow-y: auto; }

/* Anchored to the top of .chat-bottom (the preview and the input row), so it can never cover the buttons. */
.chat-bottom { position: relative; }
.chat-popup {
    position: absolute; left: 0.4rem; right: 0.4rem; bottom: 100%; margin-bottom: 0.3rem; z-index: 5;
    background: var(--panel-bg); border: 3px solid var(--chat-main); border-radius: 6px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25); padding: 0.3rem; max-height: min(300px, 45vh); overflow-y: auto; overflow-x: hidden;
}
.chat-popup-head { display: flex; align-items: center; justify-content: space-between; font-size: 1.1rem; color: var(--text-body); margin-bottom: 0.25rem; }
.chat-popup-close, .chat-search-close { background: none; border: 1px solid var(--border-inner); border-radius: 4px; cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0.15rem 0.4rem; color: var(--text-dark); }
.chat-popup-close:hover, .chat-search-close:hover { background: var(--cream-dark); }
.chat-colon-item { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-family: 'VT323', monospace; font-size: 1.3rem; padding: 0.1rem 0.3rem; border-radius: 3px; color: var(--text-dark); }
.chat-colon-item.active, .chat-colon-item:hover { background: var(--chat-main); color: #fff; }
.chat-grid { display: flex; flex-wrap: wrap; gap: 1px; margin-top: 0.3rem; }
.chat-cat { width: 100%; font-size: 1.05rem; color: var(--text-body); margin-top: 0.3rem; }
.chat-emoji-btn { width: 30px; height: 30px; background: none; border: none; cursor: pointer; font-size: 1.15rem; border-radius: 4px; padding: 0; font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; }
.chat-emoji-btn:hover { background: var(--cream-dark); }
/* minmax(0, 1fr) and no padding: a button's default padding made eight columns wider than the window. */
.chat-swatches { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
.chat-swatch { height: 22px; min-width: 0; padding: 0; border: 2px solid var(--border-outer); border-radius: 3px; cursor: pointer; }

.chat-input-area { border-top: 3px solid var(--chat-main); box-shadow: 0 -2px 0 var(--chat-edge); padding: 0.4rem 0.5rem; background: var(--cream); border-radius: 0 0 8px 0; }
.chat-row { display: flex; gap: 0.3rem; align-items: flex-end; flex-wrap: wrap; }
.chat-text, .chat-field {
    flex: 1; min-width: 0; width: 100%; box-sizing: border-box;
    font-family: 'VT323', monospace; font-size: 1.3rem; line-height: 1.15;
    padding: 0.3rem 0.4rem; border: 2px solid var(--border-outer); border-radius: 5px;
    background: #fff; color: var(--text-dark); resize: none;
}
.chat-field { margin-top: 0.3rem; }
.chat-row .chat-field { margin-top: 0; }
.chat-text:focus, .chat-field:focus { outline: none; border-color: var(--chat-accent); }
.chat-tools { display: flex; align-items: flex-end; gap: 0.3rem; }
/* The emoji, colour and picture buttons, stacked; the message box is as tall as the stack. */
.chat-tool-col { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.chat-tool-col .chat-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 21px; margin: 0; padding: 0; font-size: 0.8rem; line-height: 1; }
.chat-row > .chat-text { min-height: 67px; }
.chat-send {
    font-family: 'VT323', monospace; font-size: 1.2rem; padding: 0.25rem 0.55rem; cursor: pointer;
    background: var(--forest-green); color: var(--cream); border: 2px solid #1e6b3f; border-radius: 5px;
}
.chat-send:hover { background: var(--green-light); }
.chat-prompt { font-family: 'Press Start 2P', monospace; font-size: 0.55rem; color: var(--chat-main); margin-bottom: 0.35rem; }
.chat-formlinks { display: flex; flex-wrap: wrap; gap: 0.25rem 0.8rem; margin-top: 0.3rem; }
.chat-passkeys { font-size: 1.1rem; margin: 0.35rem 0; }
.chat-passkey-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 0.5rem; padding: 0.05rem 4px 0.05rem 0; }
/* looks like the Send button, but is its own control (a shared class once sent a test's click to the wrong button) */
.chat-passkey-add {
    display: block; font-family: 'VT323', monospace; font-size: 1.1rem; padding: 0.2rem 0.55rem; cursor: pointer;
    background: var(--forest-green); color: var(--cream); border: 2px solid #1e6b3f; border-radius: 5px;
}
.chat-passkey-add:hover { background: var(--green-light); }
.chat-passkey-add:disabled { opacity: 0.6; cursor: default; }
.chat-who { display: flex; align-items: baseline; gap: 0.3rem; white-space: nowrap; font-size: 1.1rem; margin-top: 0.25rem; color: var(--text-body); }
.chat-who > * { flex: none; }
.chat-who > .chat-who-name { flex: 0 1 auto; min-width: 2rem; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.chat-link { background: none; border: none; padding: 0; cursor: pointer; font-family: 'VT323', monospace; font-size: 1.1rem; color: var(--mid-blue); text-decoration: underline; }
.chat-error { color: #b02a37; font-size: 1.15rem; margin-top: 0.25rem; }
.chat-banned { color: #b02a37; font-size: 1rem; }

/* Phones: a small edge button, and a full-screen chat when opened. */
@media (max-width: 768px) {
    .chat-widget.collapsed { transform: translateY(-50%) translateX(calc(-100% + 30px)); }
    .chat-widget.collapsed .chat-toggle { width: 30px; }
    .chat-widget.open { top: 0; left: 0; right: 0; bottom: 0; transform: none; z-index: 2000; }
    .chat-widget.open .chat-content { width: 100%; height: 100%; border: none; border-radius: 0; box-shadow: none; }
    .chat-widget.open .chat-toggle { display: none; }
    .chat-widget.open .chat-close { display: inline; }
    .chat-size { display: none; }
    .chat-widget.chat-large .chat-content { width: 100% !important; height: 100%; }
    .chat-list { font-size: 1.45rem; }
    .chat-tools { align-items: center; gap: 0.15rem; }
    .chat-tool-col { flex-direction: row; gap: 0.1rem; }
    .chat-tool-col .chat-icon { width: auto; height: auto; font-size: 0.9rem; line-height: 1.2; padding: 0 0.15rem; }
    .chat-row > .chat-text { min-height: 0; }
    .chat-quote { font-size: 1.25rem; }
    .chat-media img, .chat-media video { height: 190px; }
    .chat-react { height: 26px; font-size: 1.15rem; }
}