/* ==========================================================================
   The chatroom, self-hosted. Replaces the old Cbox embed.
   Loaded only by chat.html, which runs inside the site's center box, so the
   header, menu, badges, music player and footer are never touched.
   ========================================================================== */

td.windowbody#chat {
    height: 420px;
    padding: 0;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.45) 0 1px, transparent 1px 20px),
        linear-gradient(165deg, #cfefff 0%, #ded2ff 50%, #ffd6f2 100%);
}

#croom {
    height: 420px;
    box-sizing: border-box;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-family: 'W95FA';
}

/* ---- header ------------------------------------------------------------- */

.cr-top {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cr-title {
    font-family: '2Credits';
    font-size: 17px;
    color: #d43ea0;
    text-shadow: 1px 1px 0 #fff;
    letter-spacing: 1px;
}

.cr-title img { width: 16px; vertical-align: -3px; }

.cr-online {
    margin-left: auto;
    font-family: 'ModernDOS';
    font-size: 11px;
    color: #0b5c2e;
    background: #b6ffce;
    border: 1px solid #fff;
    box-shadow: inset -1px -1px #4b8f66;
    padding: 1px 6px;
    cursor: help;
}

.cr-online.is-off { color: #6b2f2f; background: #ffc9c9; box-shadow: inset -1px -1px #a35b5b; }
.cr-online .dot { animation: crBlink 1.4s steps(1) infinite; }

@keyframes crBlink { 50% { opacity: 0; } }

/* ---- the log ------------------------------------------------------------ */

#cr-log {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 7px;
    background: #fffdf2;
    box-shadow: inset -2px -2px #fff, inset 2px 2px #9a7fd0;
    font-size: 12px;
    line-height: 1.45;
    color: #2f2a44;
    scrollbar-width: thin;
    scrollbar-color: #ff9ada #e9dcff;
}

.cr-msg { margin: 0 0 5px; word-wrap: break-word; overflow-wrap: anywhere; }
.cr-msg:last-child { margin-bottom: 0; }

.cr-head { display: flex; align-items: baseline; gap: 6px; }
.cr-name { font-weight: bold; color: #3f7fd4; }
.cr-time { margin-left: auto; font-family: 'ModernDOS'; font-size: 10px; color: #9a92b5; }
.cr-body { display: block; padding-left: 2px; white-space: pre-wrap; }

.cr-msg.is-me   .cr-name { color: #2fa36b; }
.cr-msg.is-me   .cr-body { color: #1d5c3d; }

/* Laiza gets to look special */
.cr-msg.is-bot {
    background: linear-gradient(90deg, #ffeaf8, rgba(255,234,248,0));
    border-left: 3px solid #ff9ada;
    padding: 2px 4px 2px 5px;
    margin-left: -2px;
}

.cr-msg.is-bot .cr-name { color: #d43ea0; }
.cr-msg.is-bot .cr-body { color: #7a2a5c; }

.cr-tag {
    font-family: 'ModernDOS';
    font-size: 9px;
    background: #ff9ada;
    color: #fff;
    padding: 0 3px;
    vertical-align: 1px;
}

.cr-msg.is-system {
    font-style: italic;
    color: #7a6a9c;
    font-size: 11px;
}

.cr-msg.is-system .cr-head { display: none; }
.cr-msg.is-error .cr-body { color: #a33; font-style: italic; }
.cr-msg.is-gone  .cr-body { color: #a99fc4; font-style: italic; }

#cr-typing {
    flex: none;
    height: 13px;
    font-family: 'ModernDOS';
    font-size: 10px;
    color: #d43ea0;
    visibility: hidden;
}

#cr-typing.is-on { visibility: visible; }

/* ---- composer ----------------------------------------------------------- */

.cr-rows { flex: none; display: flex; flex-direction: column; gap: 4px; }
.cr-row  { display: flex; gap: 4px; align-items: center; }

.cr-label {
    font-family: 'ModernDOS';
    font-size: 11px;
    color: #5b4a9c;
    flex: none;
}

.cr-input {
    flex: 1;
    min-width: 0;
    font-family: 'W95FA';
    font-size: 12px;
    color: #2f2a44;
    padding: 5px 6px;
    border: none;
    background: #fffdf2;
    box-shadow: inset -2px -2px #fff, inset 2px 2px #9a7fd0;
    outline: none;
}

.cr-input::placeholder { color: #a99fc4; }
.cr-input:disabled { background: #efeafa; }
#cr-user { flex: none; width: 150px; }

.cr-btn {
    flex: none;
    font-family: 'W95FA';
    font-size: 11px;
    color: #3d2f6b;
    background: linear-gradient(#fff, #e9dcff);
    border: none;
    box-shadow: inset -2px -2px #9a7fd0, inset 2px 2px #fff, 1px 1px 0 rgba(90,40,120,.35);
    padding: 5px 9px;
    cursor: url(../cursor/cur905.gif), pointer;
}

.cr-btn:active { box-shadow: inset 2px 2px #9a7fd0, inset -2px -2px #fff; }
.cr-btn:disabled { color: #9a92b5; }

.cr-btn.send {
    background: linear-gradient(#ffd6f2, #ff9ada);
    box-shadow: inset -2px -2px #c0338d, inset 2px 2px #fff, 1px 1px 0 rgba(90,40,120,.35);
    color: #6b1247;
    font-weight: bold;
}

.cr-foot {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'ModernDOS';
    font-size: 10px;
    color: #6b5ba8;
}

#cr-status { flex: 1; }
#cr-status.is-bad { color: #c0338d; }

.cr-foot a {
    color: #3d2f6b;
    text-decoration: none;
    background: linear-gradient(#fff, #e9dcff);
    box-shadow: inset -2px -2px #9a7fd0, inset 2px 2px #fff;
    padding: 2px 7px;
}

.cr-foot a:hover { color: #d43ea0; }
.cr-foot a img { width: 13px; vertical-align: -3px; }