/**
 * 🎨 RF ONLINE LIVE CHAT SYSTEM - STYLE SPECIFICATION (PART 1/3)
 * พิกัดจัดเก็บ: chat_system/css/chat_style.css
 * ฟังก์ชัน: โครงสร้างกรอบแชทหลัก, ระบบสลับหน้า Gateway เลือกเผ่าพันธุ์ และการปรับปรุงความสูงกล่องแชทเพิ่มขึ้น 30% (546px)
 */
.xat-chat-box { background: #0c0d0e; border: 1px solid rgba(224, 185, 122, 0.4); border-radius: 6px; font-family: 'Chakra Petch', 'Tahoma', sans-serif; margin-top: 15px; color: #fff; position: relative; }
.xat-race-select-screen { padding: 25px 30px; text-align: center; background: rgba(24, 25, 26, 0.95); }
.xat-race-select-screen h3 { color:#e0b97a; margin-bottom:12px; font-size:15px; text-shadow:0 0 4px rgba(224,185,122,0.4); }
.xat-race-select-screen input[type="text"] { background:#000; border:1px solid #e0b97a; color:#fff; padding:8px; margin-bottom:12px; border-radius:4px; width:260px; text-align:center; font-family: 'Chakra Petch', sans-serif; }
.xat-race-btn { padding: 12px 22px; margin: 6px; border: 1px solid rgba(224, 185, 122, 0.4); cursor: pointer; font-weight: bold; border-radius: 4px; color:#fff; font-size:12px; display: inline-block; background: #222; transition: all 0.15s; }
.xat-btn-acc { background: #5a1818 !important; border-color: #ff5252 !important; }
.xat-btn-bell { background: #183059 !important; border-color: #448aff !important; }
.xat-btn-cora { background: #4a185a !important; border-color: #e040fb !important; }
.xat-race-btn:hover { transform: translateY(-2px); box-shadow: 0 0 10px rgba(255,255,255,0.15); }
.rf-gateway-bottom-bar { margin-top:15px; border-top:1px dashed rgba(224,185,122,0.2); padding-top:12px; display: flex; justify-content: center; gap: 10px; }

/* ปรับสัดส่วนความสูงแนวตั้งของกรอบเลย์เอาท์แชทหลักจากเดิม 420px เพิ่มขึ้นเป็น 546px จุแชทได้ยาวตาแตก */
.xat-chat-layout { display: flex; height: 546px !important; }

.xat-msg-area { flex: 1; padding: 12px; overflow-y: auto; background: #141517; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid rgba(224, 185, 122, 0.2); scrollbar-width: thin !important; scrollbar-color: #ff6a00 #090a0c !important; }
.xat-user-list { width: 240px; background: #101112; overflow-y: auto; padding: 10px; font-size: 12px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin !important; scrollbar-color: #ff6a00 #090a0c !important; }
.xat-msg-area::-webkit-scrollbar, .xat-user-list::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
.xat-msg-area::-webkit-scrollbar-track, .xat-user-list::-webkit-scrollbar-track { background: #090a0c !important; border-radius: 10px !important; }
.xat-msg-area::-webkit-scrollbar-thumb, .xat-user-list::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ff6a00 0%, #b34a00 100%) !important; border-radius: 10px !important; box-shadow: 0 0 6px rgba(255, 106, 0, 0.6) !important; }
/**
 * 🎨 RF ONLINE LIVE CHAT SYSTEM - STYLE SPECIFICATION (PART 2/3)
 * ฟังก์ชัน: สกินตกแต่งสีสันฟองสบู่แชท (Chat Bubbles) แยกตามเผ่านักรบ และแถบพิมพ์ส่งเครื่องมือด้านล่าง
 */
.xat-race-group-header { font-weight: bold; padding: 4px 6px; border-radius: 3px; margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; letter-spacing: 0.5px; }
.group-header-ADMIN { background: rgba(212, 163, 89, 0.25); border: 1px solid #e0b97a; color: #e0b97a; text-shadow: 0 0 4px rgba(224,185,122,0.5); }
.group-header-ACC { background: rgba(90, 24, 24, 0.4); border: 1px solid rgba(255, 82, 82, 0.4); color: #ff5252; }
.group-header-BELL { background: rgba(24, 48, 89, 0.4); border: 1px solid rgba(68, 138, 255, 0.4); color: #448aff; }
.group-header-CORA { background: rgba(74, 24, 90, 0.4); border: 1px solid rgba(224, 64, 251, 0.4); color: #e040fb; }
.xat-bubble { padding: 8px 14px; border-radius: 4px 12px 12px 12px; max-width: 85%; display: inline-block; font-size: 13px; line-height: 1.4; word-break: break-all; margin-top: 4px; }
.chat-user-ui-badge { inline-flex; align-items: center; padding: 4px 10px; border-radius: 4px; font-weight: bold; font-size: 12px; margin-bottom: 2px; }
.badge-ADMIN { background: rgba(224, 185, 122, 0.3) !important; border: 1px solid #e0b97a !important; color: #e0b97a !important; text-shadow: 0 0 4px #e0b97a; }
.bubble-ADMIN { background: rgba(35, 28, 18, 0.95); border: 1px solid rgba(224,185,122,0.4); box-shadow: 0 0 12px rgba(224,185,122,0.15); color: #f7dfbe; }
.badge-ACC { background: rgba(90, 24, 24, 0.6) !important; border: 1px solid #ff5252 !important; color: #ff5252 !important; }
.badge-BELL { background: rgba(24, 48, 89, 0.6) !important; border: 1px solid #448aff !important; color: #448aff !important; }
.badge-CORA { background: rgba(74, 24, 90, 0.6) !important; border: 1px solid #e040fb !important; color: #e040fb !important; }
.msg-ADMIN { color: #e0b97a; font-weight: bold; } .msg-ACC { color: #ff5252; } .bubble-ACC { background: rgba(30, 10, 10, 0.8); border: 1px solid rgba(255,82,82,0.2); }
.msg-BELL { color: #448aff; } .bubble-BELL { background: rgba(10, 20, 35, 0.8); border: 1px solid rgba(68,138,255,0.2); }
.msg-CORA { color: #e040fb; } .bubble-CORA { background: rgba(25, 10, 30, 0.8); border: 1px solid rgba(224,64,251,0.2); }
.xat-input-bar { display: flex; padding: 10px; background: #18191a; gap: 6px; border-top: 1px solid rgba(224, 185, 122, 0.3); align-items: center; }
.xat-input-bar input[type="text"] { flex: 1; background: #000; border: 1px solid rgba(224, 185, 122, 0.4); padding: 8px; color: #fff; border-radius: 4px; font-family: 'Chakra Petch', sans-serif; }
.xat-emoji-panel { padding: 5px; display: flex; gap: 6px; background: #111; border-top: 1px solid rgba(224,185,122,0.15); font-size: 16px; overflow-x: auto; }
.user-row { display: flex; align-items: center; gap: 6px; padding: 5px 4px; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 11.5px; }
.chat-clickable-img { max-width:180px; max-height:150px; border-radius:4px; margin-top:5px; display:block; cursor:pointer; }
.xat-action-btn { background: #222 !important; color: #e0b97a !important; border: 1px solid rgba(224, 185, 122, 0.4) !important; padding: 7px 10px; border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: bold; font-family: 'Chakra Petch', sans-serif; white-space: nowrap; display: inline-block; transition: all 0.15s; }
.xat-typing-indicator-bar { background: rgba(0, 0, 0, 0.6); font-size: 11px; color: #e0b97a; padding: 4px 15px; text-align: left; min-height: 18px; border-top: 1px solid rgba(224,185,122,0.1); font-style: italic; }/**
 * 🎨 RF ONLINE LIVE CHAT SYSTEM - STYLE SPECIFICATION (PART 3/3)
 * ฟังก์ชัน: แผงเส้นแบ่งวันที่กึ่งกลาง, ระบบออร่าเผ่าพันธุ์ และระบบตรึงปุ่มกากบาท X ขยายร่างให้อยู่ภายใต้กรอบแชทหลักถาวร 100%
 */
.xat-date-divider { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; margin: 20px 0 !important; color: #a7f3d0 !important; font-size: 11px !important; font-weight: bold !important; font-family: 'Chakra Petch', sans-serif !important; letter-spacing: 0.5px !important; text-shadow: 0 0 4px rgba(167, 243, 208, 0.4) !important; }
.xat-date-divider::before, .xat-date-divider::after { content: '' !important; flex: 1 !important; border-bottom: 1px solid rgba(167, 243, 208, 0.15) !important; margin: 0 15px !important; }
.rf-master-login-header { font-size: 15px !important; font-weight: 800 !important; color: #ffaa00 !important; text-align: center !important; margin-bottom: 5px !important; letter-spacing: 1px !important; text-shadow: 0 0 6px rgba(255,170,0,0.5) !important; font-family: 'Chakra Petch', sans-serif !important; }
.rf-account-mini-form { background: rgba(10,13,16,0.9) !important; border: 1px solid #1e293b !important; box-shadow: 0 4px 20px rgba(0,0,0,0.6); padding: 20px !important; border-radius: 6px !important; max-width: 360px; margin: 10px auto; text-align: left; }
.rf-input-sys-title { display: block !important; font-size: 11px !important; font-weight: 700 !important; color: #94a3b8 !important; margin-bottom: 4px !important; letter-spacing: 0.5px !important; font-family: 'Chakra Petch', sans-serif !important; }
.rf-mini-input { width: 100%; padding: 10px; margin-bottom: 12px; background: #000 !important; border: 1px solid #334155 !important; color: #fff !important; border-radius: 4px !important; font-size: 12.5px !important; box-sizing: border-box; font-family: 'Chakra Petch', sans-serif; transition: all 0.2s ease; }
.rf-mini-input:focus { border-color: #ffaa00 !important; box-shadow: 0 0 8px rgba(255,170,0,0.25) !important; outline: none; }
.xat-action-btn.btn-submit-action { width: 100% !important; text-align: center !important; padding: 10px !important; font-size: 12.5px !important; letter-spacing: 0.5px !important; font-family: 'Chakra Petch', sans-serif !important; box-sizing: border-box; margin-top: 4px !important; }
.xat-action-btn.rf-btn-sys-back { display: block !important; width: 110px !important; text-align: center !important; margin: 12px auto 0 auto !important; padding: 6px 12px !important; font-size: 11.5px !important; font-family: 'Chakra Petch', sans-serif !important; border-color: #334155 !important; color: #94a3b8 !important; }
.rf-inline-error-msg { font-size: 12px !important; font-weight: 700 !important; margin-top: 10px !important; display: none; text-align: center !important; font-family: 'Chakra Petch', sans-serif !important; }
.rf-admin-action-trigger { color: #ef4444 !important; cursor: pointer; font-size: 10px; font-weight: bold; margin-left: 8px; background: rgba(239,68,68,0.15); padding: 2px 6px; border: 1px solid rgba(239,68,68,0.3); border-radius: 3px; }
.rf-online-header { color:#e0b97a; font-weight:bold; border-bottom:1px solid rgba(224,185,122,0.2); padding-bottom:4px; font-size:12px; }
.rf-file-photo-label { background:#222; border:1px solid rgba(224, 185, 122, 0.4); padding:6px 10px; border-radius:4px; cursor:pointer; font-size:12px; color:#e0b97a; display: inline-block; }
.btn-send-submit { border-color:#10b981 !important; background:rgba(16,185,129,0.1) !important; color:#10b981 !important; padding: 8px 22px !important; }
.rf-file-profile-label.rf-master-neon-glow { animation: rfSoftBreathingPulse 2.5s ease-in-out infinite alternate !important; border: 1px solid rgba(255, 170, 0, 0.7) !important; background: rgba(255, 106, 0, 0.1) !important; color: #ffbc42 !important; text-shadow: 0 0 4px rgba(255,170,0,0.4) !important; }
@keyframes rfSoftBreathingPulse { 0% { box-shadow: 0 0 4px rgba(255, 106, 0, 0.3) !important; } 100% { box-shadow: 0 0 12px rgba(255, 170, 0, 0.7) !important; } }
.chat-timestamp { opacity: 1 !important; visibility: visible !important; font-size: 9px !important; font-weight: 500 !important; color: #334155 !important; margin-left: 8px !important; align-self: center !important; font-family: 'Chakra Petch', sans-serif !important; }
.rf-discord-avatar-wrapper { width: 32px !important; height: 32px !important; border-radius: 50% !important; object-fit: cover !important; display: inline-block !important; margin-right: 10px !important; vertical-align: middle !important; background: #1a1c1e; flex-shrink: 0 !important; border: 2px solid transparent !important; }
.rf-avatar-aura-admin, .rf-avatar-aura-ADMIN { border-color: #e0b97a !important; box-shadow: 0 0 8px #e0b97a, inset 0 0 3px #e0b97a !important; }
.rf-avatar-aura-acc, .rf-avatar-aura-ACC { border-color: #ff5252 !important; box-shadow: 0 0 8px #ff5252, inset 0 0 3px #ff5252 !important; }
.rf-avatar-aura-bell, .rf-avatar-aura-BELL { border-color: #448aff !important; box-shadow: 0 0 8px #448aff, inset 0 0 3px #448aff !important; }
.rf-avatar-aura-cora, .rf-avatar-aura-CORA { border-color: #e040fb !important; box-shadow: 0 0 8px #e040fb, inset 0 0 3px #e040fb !important; }
.xat-global-image-modal-backdrop { display: none; position: absolute !important; inset: 0 !important; background: rgba(0, 0, 0, 0.85) !important; backdrop-filter: blur(5px) !important; z-index: 1000 !important; justify-content: center !important; align-items: center !important; border-radius: 6px !important; }

/* ปรับแต่งกรอบโมดอลและรูปภาพซูมให้กางขยายออกไปกว้างใหญ่ที่สุดถึง 98% เพื่อความยิ่งใหญ่เต็มตาคมชัด */
.xat-center-popup-img-wrapper { width: 98% !important; max-width: 98% !important; height: auto !important; max-height: 94% !important; background: #0c0d0e !important; border: 1px solid rgba(224, 185, 122, 0.5) !important; padding: 6px !important; border-radius: 6px !important; position: relative !important; box-shadow: 0 0 25px rgba(0,0,0,0.9) !important; display: flex !important; justify-content: center !important; align-items: center !important; }
.xat-center-popup-img-wrapper img { width: 100% !important; max-width: 100% !important; max-height: 520px !important; height: auto !important; display: block !important; border-radius: 4px !important; object-fit: contain !important; }

/* 🛡️ 🟢 INSIDE FIXED OVERLAY SNAP: ล้างค่าพิกัดติดลบเดิมออก ย้ายตำแหน่งปุ่มกากบาทสีแดงเข้ามาล็อกตรึงไว้ด้านในกรอบมุมขวาบนอย่างเหนียวแน่น เรียบร้อย ไม่กระเด็นลอยทะลุเฟรม 100% */
.xat-modal-close-corner-btn { position: absolute !important; top: 10px !important; right: 10px !important; background: #111214 !important; color: #ff5252 !important; border: 1px solid #ff5252 !important; width: 26px !important; height: 26px !important; border-radius: 50% !important; text-align: center !important; line-height: 22px !important; font-size: 16px !important; cursor: pointer !important; font-weight: bold !important; box-shadow: 0 0 8px rgba(255,82,82,0.4) !important; transition: all 0.15s !important; z-index: 1010 !important; }
.xat-modal-close-corner-btn:hover { background: #ff5252 !important; color: #fff !important; }

/* ระบบเอฟเฟกต์สีรุ้งออโรร่าเรืองแสงวิ่งช้า ๆ บนอักษรยศภาษาไทย ทรงพลัง สวยงามและสบายตา */
.rf-chat-inline-badge-rank { display: block !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: 0.5px !important; margin-bottom: 3px !important; font-family: 'Chakra Petch', 'Tahoma', sans-serif !important; background: linear-gradient(90deg, #ffaa00, #ff5252, #e040fb, #448aff, #10b981, #ffaa00) !important; background-size: 400% 400% !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: rfRankChromaFlow 6s ease infinite !important; filter: drop-shadow(0 0 3px rgba(255, 170, 0, 0.4)) !important; }
@keyframes rfRankChromaFlow { 0% { background-position: 0% 50%; filter: drop-shadow(0 0 2px rgba(255,82,82,0.4)); } 50% { background-position: 100% 50%; filter: drop-shadow(0 0 5px rgba(68,138,255,0.5)); } 100% { background-position: 0% 50%; filter: drop-shadow(0 0 2px rgba(255,82,82,0.4)); } }