/* ═══════════════════════════════════════════
   CHAT — chat.css
   Separate from style.css for clean structure
═══════════════════════════════════════════ */

/* ── Container ── */
#chat {
    transform-origin: bottom left;
    position: absolute;
    z-index: 4;
    bottom: 10px;
    left: 10px;
    margin: auto;
    padding: 0;
}

/* ── Input ── */
#chat_input {
    font-family: Poppins;
    transition: background 0.5s ease-in-out;
    position: absolute;
    z-index: 4;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.4);
    border: 0px;
    outline: none;
    color: white;
    height: 30px;
    text-indent: 10px;
    left: 37px;
    width: 230px;
    font-size: 13px;
    pointer-events: all;
    direction: ltr !important;
}
#chat_input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
#chat_input:focus {
    background: rgba(0, 0, 0, 0.5);
}
#chat_input:disabled {
    background: rgba(0, 0, 0, 0.25);
    cursor: not-allowed;
}
#chat_input:disabled::placeholder {
    color: rgba(255, 200, 80, 0.75);
}
#chat_input:focus::placeholder {
    color: rgba(255, 255, 255, 0);
}

/* ── Tabs ── */
#tabs {
    position: absolute;
    left: 0px;
    bottom: 40px;
}
.tabsWrapper {
    position: relative;
}

.chatTab {
    width: max-content;
    user-select: none;
    -webkit-user-select: none;
    overflow-y: auto;
    overflow-x: hidden;
    direction: rtl;
    max-height: 185px;
}
.chatTab::-webkit-scrollbar-track {
    background-color: rgba(100, 100, 100, 0.1);
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.25);
}
.chatTab::-webkit-scrollbar {
    width: 8px;
    background-color: transparent;
    border-radius: 6px;
}
.chatTab::-webkit-scrollbar-thumb {
    background-color: #2d6efa;
    border-radius: 6px;
    width: 8px;
}

/* ── Messages ── */
.chatMessage {
    display: flex;
    /* A chat row is a run of text ("[badge] [id] Name: message") whose parts have
       different font-sizes, weights and text-strokes. flex-end lined up their BOX
       BOTTOMS, so the glyphs sat visibly uneven. baseline lines up the text
       baselines, which is what makes the row read as one coherent line. Icons opt
       out via align-self:center below. */
    align-items: baseline;
    font-family: Ubuntu;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    margin-right: -5px;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    font-size: 0.9rem;
    gap: 5px;
    line-height: 1.2;
    width: 503px;
    direction: ltr !important;
}

.chatMessage .sender:empty { display: none !important; }
.chatMessage:has(button) .sender,
.chatMessage:has(button) .messageText:nth-child(2) { display: none !important; }

.message {
    display: flex;
    justify-content: center;
    font-weight: bold;
    font-family: Ubuntu;
}
.messageText {
    margin: 0;
    font-weight: 400;
    white-space: nowrap;
}
.sender {
    margin: 0;
    font-weight: bold;
    -webkit-text-stroke: 2px black;
    paint-order: stroke fill;
    white-space: nowrap;
    flex-shrink: 0;
}
/* The sent-message text and sender name live in their own child <p> elements
   (Chat.js appends $sender / $text), which have no font of their own and were
   therefore picking up Cairo from the universal `* { font-family: Poppins, 'Cairo' }`
   rule. Scope them here (specificity 0,2,0 > the universal 0,0,0) to Ubuntu so they
   match the reference game's `.chatMessage { font-family: Ubuntu }`: Latin renders in
   Ubuntu, and — because Ubuntu carries no Arabic glyphs — Arabic falls through to the
   browser/system default, exactly as the original reference does. */
.chatMessage .sender,
.chatMessage .messageText {
    font-family: Ubuntu;
}
/* The ":" is rendered as its OWN flex item (Chat.js appends $sender, $colon,
   $text), so the row's `gap: 5px` applied on BOTH sides of it and the colon
   floated away from the name — "Name : message" instead of "Name: message".
   Cancel that single gap so the colon hugs the name; the gap between the colon
   and the message text is intentional and stays. */
.chatMessage .sender + .messageText {
    margin-left: -5px;
}
/* Staff-only [pID] prefix in chat — smaller than the name, fixed neutral gray
   (never the sender's own color). Only ever added to the DOM for staff viewers. */
.chatIdPrefix { 
    font-size: 0.75em;
    font-weight: 600;
    color: #9aa0a6;
    -webkit-text-stroke: 1.5px black;
    paint-order: stroke fill;
    white-space: nowrap;
    flex-shrink: 0;
    /* was align-self:center — that opted this element out of the row alignment,
       so the [id] floated vertically against the name. It now shares the row
       baseline like every other text part. */
}
.hideChatMessage { visibility: hidden; }
.vipBadge {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
/* The VIP/rank badge is wrapped in a bare <div> by Chat.js, which made it a flex
   item with no text baseline of its own. Icons read better optically centered
   than baseline-aligned, so this one item opts out of the baseline group. */
.chatMessage > div:has(> .vipBadge) {
    align-self: center;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.chatText { margin-left: -0.3rem; }

/* ── Admin Message ── */
.adminMessage {
    z-index: 8;
    display: block;
    font-family: Ubuntu;
    font-size: 15px;
    font-weight: bold;
    width: 100%;
    border-radius: 3px;
    word-wrap: break-word;
    margin-top: 5px;
    margin-left: 5px;
    padding: 0px 5px;
    user-select: none;
    -webkit-user-select: none;
    margin-bottom: -10px;
    font-weight: 900;
}
#adminMessage p { z-index: 9; }
.adminMessage font { text-shadow: 0px 0px 7px #003e0ba6; }
.noshadow font { text-shadow: none !important; }

/* ── Announcement ── */
/* System/announcement rows are an icon + a single sentence (no name, no colon),
   so they centre as a unit rather than sharing the player-row text baseline. */
.chat-announcement {
    font-size: 12px;
    color: #007FE7 !important;
    font-weight: bold;
    align-items: center;
}
.chat-announcement img {
    width: 20px;
    height: 20px;
}
.warning-text { margin: auto 0; }

/* ── Emote Button ── */
#btnEmote {
    position: absolute;
    z-index: 5;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    border: 0px;
    outline: none;
    color: #fff;
    height: 30px;
    left: 267px;
    width: 35px;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: all;
    font-weight: bold;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    
}
#btnEmote img {
    pointer-events: none;
    width: 18px;
    height: auto;
    margin-bottom: 2px;
    margin-left: 1px;
}
#btnEmote:hover { cursor: pointer; background: rgba(0, 0, 0, 0.3); }
#btnEmote:active { background: rgba(0, 0, 0, 0.5); }
.chatEmote { height: 20px; width: auto; margin-top: -5px; }


#btnEmoteIcon { 
    display: inline-block;
    transition: transform 0.15s ease;
}
#btnEmote:hover #btnEmoteIcon { 
    transform: rotate(-15deg) scale(1.2); 
}


/* ── Emotes Panel ── */
#emotes {
    color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    position: absolute;
    bottom: 35px;
    left: 270px;
    width: 135px;
    height: 110px;
    border-radius: 5px;
    overflow-x: hidden;
    overflow-y: scroll;
    pointer-events: auto;
    user-select: auto;
    z-index: 3;
}
#emotes::-webkit-scrollbar { width: 5px; }
#emotes::-webkit-scrollbar-thumb { background-color: #2db9fa; border-radius: 4px; }
#emotes h3 {
    font-size: 12px;
    margin: 0;
    padding: 2px 0 0 5px;
    font-family: Poppins, 'Cairo';
    font-weight: 900;
}
#emotes ul {
    display: flex;
    flex-flow: row wrap;
    list-style-type: none;
    padding: 0;
    margin: 2px 0 0 3px;
}
#emotes ul li {
    width: 25px;
    height: 25px;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
}
#emotes ul li:hover { cursor: pointer; border: 1px solid #008cff; }
#emotes ul li img { width: 20px; height: auto; }

/* ── Channels ── */
#channels {
    display: none;
    position: absolute;
    z-index: 5;
    bottom: 31px;
    border: 0px;
    outline: none;
    color: #fff;
    left: 200px;
    width: 90px;
    font-size: 15px;
    list-style: none;
    pointer-events: all;
    font-weight: bold;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
#channels li {
    border-radius: 10px;
    padding-top: 4px;
    padding-left: 5px;
    vertical-align: middle;
    background: rgba(0, 0, 0, 0.7);
    text-align: right;
    cursor: pointer;
    margin-bottom: 5px;
    height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 80px;
    padding-right: 10px;
}
#channels li:hover { background: rgba(0, 0, 0, 0.4); }
#channels li:active { background: rgba(0, 0, 0, 0.7); }

/* ── Toggle Button ── */
#chat_toggle {
    display: none;
    position: absolute;
    z-index: 5;
    bottom: 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 0px;
    outline: none;
    color: #fff;
    height: 30px;
    left: 10px;
    width: 30px;
    font-size: 15px;
    cursor: pointer;
    border-bottom-left-radius: 10px;
    pointer-events: all;
}
#chat_toggle:hover { background: rgba(15, 15, 15, 0.3); }
#chat_toggle:active { background: rgba(0, 0, 0, 0.5); }

/* ── Settings Button ── */
#btnChatSettings {
    position: absolute;
    z-index: 5;
    bottom: 0;
    background: #007fe7;
    border: 0px;
    outline: none;
    color: #fff;
    height: 30px;
    left: 0px;
    width: 35px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: all;
    font-weight: bold;
}
#btnChatSettings i { pointer-events: none; }
#btnChatSettings:hover { cursor: pointer; background: rgba(0, 0, 0, 0.3); }
#btnChatSettings:active { background: rgba(0, 0, 0, 0.5); }

/* ── Chat Settings Panel ──
   ملاحظة: الحجم والخلفية والمحتوى الداخلي
   أصبحوا في ChatSettings.css (التصميم الجديد).
   هنا نترك فقط التموضع والأنيميشن. ── */
#chatSettings {
    display: none;
    position: absolute;
    left: 25px;
    bottom: 75px;
    z-index: 9;
    transform-origin: bottom left;
    width: 370px;
  height: auto;
}

#chatSettings .tab-content {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  max-height: 340px;
  overflow-y: auto;
  background: #2d3748;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 10px;
  box-sizing: border-box;
}

#chatSettings .tab-content::-webkit-scrollbar {
  width: 6px;
}
#chatSettings .tab-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
}
#chatSettings .tab-content::-webkit-scrollbar-thumb {
  background: rgba(127, 119, 221, 0.5);
  border-radius: 10px;
}


#chatSettings.cs-opening {
  display: block;
  animation: chatSettingsOpen 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#chatSettings.cs-closing {
  display: block;
  animation: chatSettingsClose 0.18s ease-in forwards;
}

@keyframes chatSettingsOpen {
  0% {
    opacity: 0;
    transform: scale(0.85) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes chatSettingsClose {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.85) translateY(10px);
  }
}

/* ── Misc ── */
.nowrap {
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.up {
    transform: scaleY(-1);
    margin-bottom: 2px;
    margin-left: 5px;
}