/* =========================================================
   Webchat module styles — Spyral theme integration
   ========================================================= */

/* Force border-box inside webchat */
#webchat-container,
#webchat-container *,
#webchat-container *::before,
#webchat-container *::after {
    box-sizing: border-box;
}

#webchat-container {
    display: flex;
    flex-direction: column;
    height: 560px;
    border: 1px solid #131316;
    border-radius: 4px;
    background: #101013;
    color: #d0c8b8;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    text-shadow: 0 1px 1px #000;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #131316;
}

/* ---------- Header ---------- */

.webchat-header {
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid #1e1e22;
    padding: 8px 12px;
}

.webchat-character-select {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.webchat-character-select label {
    font-size: 12px;
    font-family: calibrib, Verdana, sans-serif;
    color: #848177;
    white-space: nowrap;
}

.webchat-character-select select {
    flex: 1;
    background: #1a1a1e;
    color: #d0c8b8;
    border: 1px solid #2a2a2e;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 12px;
    max-width: 350px;
    text-shadow: 0 1px 1px #000;
}

/* ---------- Realm Selector ---------- */

.webchat-realm-select {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.webchat-realm-select label {
    font-size: 12px;
    font-family: calibrib, Verdana, sans-serif;
    color: #848177;
    white-space: nowrap;
}

.webchat-realm-select select {
    background: #1a1a1e;
    color: #d0c8b8;
    border: 1px solid #2a2a2e;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 12px;
    max-width: 250px;
    text-shadow: 0 1px 1px #000;
}

/* ---------- Channel Tabs ---------- */

.webchat-tabs {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}

.webchat-tab {
    background: rgba(0, 0, 0, 0.3);
    color: #4e5253;
    border: 1px solid #1e1e22;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    padding: 4px 14px;
    font-size: 12px;
    font-family: calibrib, Verdana, sans-serif;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}

.webchat-tab:hover {
    background: rgba(255, 255, 255, 0.03);
    color: #d0a53d;
}

.webchat-tab.active {
    background: #101013;
    color: #f9b52d;
    border-color: #2a2a2e;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(249, 181, 45, 0.3);
}

/* Channel-specific tab colors */
.webchat-tab[data-channel="world"].active   { color: #ff8000; text-shadow: 0 0 6px rgba(255, 128, 0, 0.3); }
.webchat-tab[data-channel="trade"].active   { color: #ff7fff; text-shadow: 0 0 6px rgba(255, 127, 255, 0.3); }
.webchat-tab[data-channel="guild"].active   { color: #3ce13c; text-shadow: 0 0 6px rgba(60, 225, 60, 0.3); }
.webchat-tab[data-channel="say"].active     { color: #ffffff; }
.webchat-tab[data-channel="whisper"].active { color: #ff80ff; text-shadow: 0 0 6px rgba(255, 128, 255, 0.3); }
.webchat-tab[data-channel="local"].active   { color: #ffb060; text-shadow: 0 0 6px rgba(255, 176, 96, 0.3); }
.webchat-tab[data-channel="lfg"].active     { color: #c8c8ff; text-shadow: 0 0 6px rgba(200, 200, 255, 0.3); }

/* ---------- Online + connection status ---------- */

.webchat-header-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    width: 100%;
    padding-top: 2px;
}

.webchat-realm-online {
    font-size: 11px;
    color: #8ecf7a;
    font-family: calibrib, Verdana, sans-serif;
    text-shadow: 0 1px 1px #000;
    min-height: 1.2em;
    flex: 1 1 auto;
    min-width: 0;
}

.webchat-realm-online-guest {
    margin-top: 6px;
    flex: none;
    width: 100%;
}

article.page_article .page_content .webchat-realm-online {
    color: #8ecf7a !important;
}

.webchat-header-status-row .webchat-status {
    flex: 0 0 auto;
    margin-left: auto;
}

/* ---------- Connection Status ---------- */

.webchat-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-size: 11px;
    color: #848177;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-checking {
    background: #aa8800;
    animation: status-pulse 1s infinite;
}

.status-online {
    background: #00cc44;
    box-shadow: 0 0 4px #00cc44;
}

.status-offline {
    background: #cc3333;
    box-shadow: 0 0 4px #cc3333;
}

.status-partial {
    background: #cc8800;
    box-shadow: 0 0 4px #cc8800;
}

@keyframes status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ---------- Messages Area ---------- */
/* IMPORTANT: the Spyral page.tpl injects a rule
       article.page_article .page_content div { overflow: hidden; ... }
   which (specificity 0,2,1) wins over a plain `.webchat-messages` rule
   (0,1,0) and silently kills scrolling. We qualify with #webchat-container
   to bump our specificity to (1,1,0) so the chat list can scroll again. */

#webchat-container .webchat-messages {
    flex: 1;
    min-height: 0; /* important for flexbox scrolling */
    overflow-y: scroll; /* always show scrollbar so users can see the rail */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable; /* reserve space so layout doesn't jump */
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.5; /* override .page_content { line-height: 1.8 } inheritance */
    background: rgba(0, 0, 0, 0.15);

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #2a2a2e #0a0a0d;
}

#webchat-container .webchat-messages::-webkit-scrollbar {
    width: 10px;
}

#webchat-container .webchat-messages::-webkit-scrollbar-track {
    background: #0a0a0d;
    border-left: 1px solid #131316;
}

#webchat-container .webchat-messages::-webkit-scrollbar-thumb {
    background: #2a2a2e;
    border: 1px solid #3a3a40;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
    min-height: 24px;
}

#webchat-container .webchat-messages::-webkit-scrollbar-thumb:hover {
    background: #d0a53d;
    border-color: #f9b52d;
}

#webchat-container .webchat-messages::-webkit-scrollbar-corner {
    background: #0a0a0d;
}

.webchat-loading {
    text-align: center;
    color: #848177;
    padding: 20px;
    font-style: italic;
}

.webchat-no-messages {
    text-align: center;
    color: #4e5253;
    padding: 20px;
}

/* ---------- Message Line ---------- */

.webchat-msg {
    padding: 2px 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.webchat-msg:hover {
    background: rgba(255, 255, 255, 0.02);
}

.webchat-msg .msg-time {
    color: #4e5253;
    font-size: 11px;
    margin-right: 4px;
}

.webchat-msg .msg-channel {
    font-size: 11px;
    margin-right: 4px;
    font-weight: bold;
}

.webchat-msg .msg-author {
    font-weight: bold;
    font-family: calibrib, Verdana, sans-serif;
    margin-right: 2px;
}

.webchat-msg .msg-text {
    color: #d0c8b8;
}

.webchat-msg .msg-text .webchat-premium-tag {
    color: #ff8c00 !important;
    font-weight: 600;
    text-shadow: 0 1px 1px #000;
}

/* WoW item links from chat (|Hitem:...|h[...]|h) — compact row */
.webchat-msg .webchat-wow-item {
    display: inline-flex;
    align-items: center;
    vertical-align: text-bottom;
    gap: 2px;
    margin: 0 1px;
    max-width: 100%;
    cursor: help;
    line-height: 1.15;
}

.webchat-msg .webchat-wow-item-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    border-radius: 2px;
    padding: 0 1px 0 0;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
}

.webchat-msg .webchat-wow-item-link:hover {
    border-color: rgba(255, 200, 80, 0.35);
    background: rgba(30, 28, 20, 0.6);
}

.webchat-msg .webchat-wow-item-icon {
    display: block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
    vertical-align: middle;
    object-fit: cover;
}

.webchat-msg .webchat-wow-item-name {
    color: #a335ee;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.15;
    text-shadow: 0 1px 1px #000;
}

/* Spyral theme: page.tpl forces *:not(a) { color !important } inside .page_content */
article.page_article .page_content .webchat-msg .msg-text .webchat-premium-tag {
    color: #ff8c00 !important;
    font-weight: 600;
    text-shadow: 0 1px 1px #000;
}

article.page_article .page_content .webchat-msg .webchat-wow-item-name {
    color: #a335ee !important;
    font-weight: 600;
    font-size: 11px !important;
    line-height: 1.15 !important;
    text-shadow: 0 1px 1px #000;
}

article.page_article .page_content .webchat-msg .webchat-wow-item-icon {
    width: 14px !important;
    height: 14px !important;
}

.webchat-msg .msg-source-web {
    color: #697a89;
    font-size: 10px;
    margin-left: 2px;
}

.webchat-msg .msg-delete {
    color: #a00;
    font-size: 10px;
    cursor: pointer;
    margin-left: 4px;
    text-decoration: none;
}

.webchat-msg .msg-delete:hover {
    color: #f55;
}

/* Channel colors (matching WoW defaults) */
.channel-world  .msg-channel { color: #ff8000; }
.channel-world  .msg-author  { color: #ff8000; }
.channel-trade  .msg-channel { color: #ff7fff; }
.channel-trade  .msg-author  { color: #ff7fff; }
.channel-guild  .msg-channel { color: #3ce13c; }
.channel-guild  .msg-author  { color: #3ce13c; }
.channel-say    .msg-channel { color: #ffffff; }
.channel-say    .msg-author  { color: #ffffff; }
.channel-whisper .msg-channel { color: #ff80ff; }
.channel-whisper .msg-author  { color: #ff80ff; }
.channel-local  .msg-channel { color: #ffb060; }
.channel-local  .msg-author  { color: #ffb060; }
.channel-lfg    .msg-channel { color: #c8c8ff; }
.channel-lfg    .msg-author  { color: #c8c8ff; }
.channel-party  .msg-channel { color: #aab8ff; }
.channel-party  .msg-author  { color: #aab8ff; }
.channel-raid   .msg-channel { color: #ff7f40; }
.channel-raid   .msg-author  { color: #ff7f40; }
.channel-bg     .msg-channel { color: #ff7f40; }
.channel-bg     .msg-author  { color: #ff7f40; }

/* Faction badge */
.faction-horde .msg-author::before {
    content: "⚔ ";
    color: #cc3333;
}

.faction-alliance .msg-author::before {
    content: "🛡 ";
    color: #3366cc;
}

/* ---------- New-Messages Indicator ---------- */
/* Floating "↓ N new messages" button that appears when the user has
   scrolled up and new messages arrive during polling. Anchored to the
   top edge of the input area so it floats above the messages list. */

.webchat-new-messages {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none; /* container is decorative; only the button is clickable */
}

.webchat-new-messages button {
    pointer-events: auto;
    background: rgba(208, 165, 61, 0.92);
    color: #101013;
    border: 1px solid #f9b52d;
    border-radius: 12px;
    padding: 4px 12px;
    font-size: 11px;
    font-family: calibrib, Verdana, sans-serif;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    text-shadow: none;
    transition: background 0.2s, transform 0.2s;
}

.webchat-new-messages button:hover {
    background: #f9b52d;
    transform: translateY(-1px);
}

/* ---------- Input Area ---------- */

.webchat-input-area {
    position: relative; /* anchor for .webchat-new-messages */
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid #1e1e22;
    padding: 8px 12px;
}

.webchat-guest-notice {
    position: relative; /* anchor for .webchat-new-messages */
}

.webchat-whisper-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.webchat-whisper-row label {
    font-size: 12px;
    font-family: calibrib, Verdana, sans-serif;
    color: #ff80ff;
    white-space: nowrap;
}

.webchat-whisper-row input {
    flex: 1;
    background: #1a1a1e;
    color: #d0c8b8;
    border: 1px solid #2a2a2e;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 12px;
    max-width: 200px;
    text-shadow: 0 1px 1px #000;
}

.webchat-input-row {
    display: flex;
    gap: 8px;
}

.webchat-input-row input[type="text"] {
    flex: 1;
    background: #1a1a1e;
    color: #d0c8b8;
    border: 1px solid #2a2a2e;
    border-radius: 3px;
    padding: 6px 10px;
    font-size: 12px;
    text-shadow: 0 1px 1px #000;
}

.webchat-input-row input[type="text"]:focus {
    border-color: #d0a53d;
    outline: none;
    box-shadow: 0 0 4px rgba(208, 165, 61, 0.3);
}

/* Spyral theme sets .nice_button { height: 18px } — override so Send is usable */
#webchat-container .webchat-input-row .nice_button,
#webchat-container #webchat-send {
    flex-shrink: 0;
    height: auto;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    margin-top: 0;
    line-height: 1.25;
    white-space: nowrap;
}

.webchat-char-count {
    text-align: right;
    font-size: 11px;
    color: #4e5253;
    margin-top: 2px;
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
    #webchat-container {
        width: 100%;
        height: 70vh;
        max-height: 560px;
        min-height: 360px;
    }

    @supports (height: 100dvh) {
        #webchat-container {
            height: 70dvh;
        }
    }

    .webchat-header {
        padding: 6px 10px;
    }

    .webchat-realm-select,
    .webchat-character-select {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        margin-bottom: 6px;
    }

    .webchat-realm-select select,
    .webchat-character-select select {
        max-width: none;
        width: 100%;
    }

    .webchat-tabs {
        gap: 1px;
    }

    .webchat-tab {
        padding: 4px 10px;
        font-size: 11px;
    }

    .webchat-input-area {
        padding: 8px 10px;
        padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    }

    .webchat-whisper-row {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .webchat-whisper-row input {
        max-width: none;
        width: 100%;
    }

    /* One row: message field + Send (theme-friendly touch targets) */
    .webchat-input-row {
        flex-direction: row;
        align-items: stretch;
        gap: 8px;
    }

    .webchat-input-row input[type="text"] {
        flex: 1;
        min-width: 0;
        min-height: 44px;
        padding: 10px 12px;
    }

    #webchat-container #webchat-send {
        min-width: 112px;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 15px;
        font-weight: bold;
        align-self: stretch;
    }

    /* Prevent iOS Safari from zooming inputs on focus */
    #webchat-message {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    #webchat-container {
        height: 75vh;
        min-height: 320px;
    }

    @supports (height: 100dvh) {
        #webchat-container {
            height: 75dvh;
        }
    }

    .webchat-messages {
        padding: 8px 10px;
    }
}