/* =========================================================
   PG16 SETUP CHAT — IRC STYLE
   Visual changes only. Does not change chat logic.
   ========================================================= */


/* ---------- MAIN CHAT PANEL ---------- */

#pg16-setup-sidechat {
    background: #0d0d0d !important;
    color: #e8e8e8 !important;

    font-family:
        "Cascadia Mono",
        "Cascadia Code",
        Consolas,
        "Courier New",
        monospace !important;
}


/* ---------- HEADER ---------- */

#pg16-sidechat-header {
    background: #111 !important;

    border-bottom:
        1px solid #ff00b7 !important;

    padding:
        10px 14px !important;
}

#pg16-sidechat-title {
    font-family:
        "Cascadia Mono",
        Consolas,
        monospace !important;

    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: .3px;
}

#pg16-sidechat-subtitle {
    font-family:
        "Cascadia Mono",
        Consolas,
        monospace !important;

    color: #8e8e8e !important;
    font-size: 12px !important;
}


/* ---------- MESSAGE AREA ---------- */

#pg16-setup-sidechat-messages {
    background: #0d0d0d !important;

    padding:
        10px 14px !important;

    font-family:
        "Cascadia Mono",
        Consolas,
        "Courier New",
        monospace !important;

    font-size: 15px !important;
    line-height: 1.35 !important;
}


/*
 * Classic IRC-like compact message rows.
 */

.pg16-sidechat-row {
    margin: 0 0 4px 0 !important;
    padding: 1px 0 !important;

    line-height: 1.35 !important;

    word-break:
        break-word;
}


/* nickname */

.pg16-sidechat-nick {
    color: #ff00b7 !important;

    font-weight: 800 !important;

    margin-right:
        6px !important;
}


/* message */

.pg16-sidechat-text {
    color: #e6e6e6 !important;

    font-family:
        "Cascadia Mono",
        Consolas,
        monospace !important;
}


/* ---------- BIGGER CUSTOM EMOTES ---------- */


/*
 * Emotes displayed inside #setup-chat.
 * Previously roughly 42px.
 */

.pg16-custom-emote-inline {
    width: 64px !important;
    height: 64px !important;

    max-width: 64px !important;
    max-height: 64px !important;

    object-fit: contain !important;

    vertical-align: middle !important;

    margin:
        3px 5px !important;
}


/*
 * Make the emotes inside the picker bigger too.
 */

.pg16-sidechat-custom-emote-choice {
    height: 76px !important;
}

.pg16-sidechat-custom-emote-choice img {
    width: 68px !important;
    height: 68px !important;
}


/*
 * Slightly larger picker cells to accommodate them.
 */

#pg16-sidechat-custom-emote-picker {
    grid-template-columns:
        repeat(auto-fill, minmax(70px, 1fr)) !important;

    gap: 8px !important;
}


/* ---------- MESSAGE INPUT ---------- */

#pg16-sidechat-form {
    background: #111 !important;

    border-top:
        1px solid #292929 !important;

    padding:
        9px 10px !important;

    gap:
        7px !important;
}

#pg16-sidechat-input {
    background: #080808 !important;

    color: #eee !important;

    border:
        1px solid #444 !important;

    border-radius:
        3px !important;

    font-family:
        "Cascadia Mono",
        Consolas,
        monospace !important;

    font-size:
        14px !important;
}

#pg16-sidechat-input:focus {
    border-color:
        #ff00b7 !important;

    outline:
        none !important;
}


/* ---------- SEND / EMOTE BUTTON ---------- */

#pg16-sidechat-send,
#pg16-sidechat-custom-emote-button {
    border-radius:
        3px !important;

    font-family:
        "Cascadia Mono",
        Consolas,
        monospace !important;
}


/*
 * Slight terminal/IRC feel when selecting messages.
 */

#pg16-setup-sidechat ::selection {
    background: #ff00b7;
    color: #000;
}