/* Chat (js/chat.js): a CHAT button at the lower left during a match (on the menu, the lower right) opening a panel
   with the world and room channels. Admin answers carry a gold "Quản trị viên" badge that a player name cannot get. */
.chat-dock{position:absolute;left:max(16px,var(--safe-left,0px));bottom:36px;z-index:6;display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:calc(100vw - 32px);font-size:12.5px;line-height:1.45;user-select:text;-webkit-user-select:text;touch-action:auto}
body:not(.playing) .chat-dock{left:auto;right:max(16px,var(--safe-right,0px));align-items:flex-end}
.chat-toggle{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 14px;border:1px solid #c9a24f;border-radius:6px;background:rgba(14,10,6,.78);color:#f1dc9c;font-size:12px;font-weight:700;letter-spacing:.12em;box-shadow:0 2px 8px #0008}
.chat-toggle::before{content:'';width:14px;height:11px;border:1.6px solid currentColor;border-radius:3px 3px 3px 0;box-sizing:border-box}
.chat-toggle.on{background:#4a3612e6}
.chat-badge{position:absolute;top:-8px;right:-8px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#c0392b;color:#fff;font-size:11px;line-height:19px;letter-spacing:0;text-align:center}
.chat-panel{width:min(360px,calc(100vw - 32px));display:flex;flex-direction:column;border:1px solid #c9a24f;border-radius:8px;background:rgba(14,10,6,.86);color:var(--light,#efe4c8);box-shadow:0 6px 20px #000a;overflow:hidden}
.chat-tabs{display:flex;align-items:stretch;border-bottom:1px solid #c9a24f66}
.chat-tabs button{flex:1;min-height:34px;padding:6px 8px;border:0;background:transparent;color:#cdbb8d;font-size:12px;font-weight:700;letter-spacing:.06em}
.chat-tabs button i{font-style:normal;color:#ffb199}
.chat-tabs button[aria-selected="true"]{background:#c9a24f2e;color:#f1dc9c;box-shadow:inset 0 -2px #e0b25c}
.chat-tabs .chat-close{flex:0 0 40px;font-size:18px;line-height:1}
.chat-log{height:220px;overflow-y:auto;padding:6px 10px;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin}
.chat-line{padding:2px 0;overflow-wrap:anywhere}
.chat-line time{color:#a9a08a;font-size:11px;margin-right:5px;font-variant-numeric:tabular-nums}
.chat-line b{color:#e9c97a;font-weight:700;margin-right:4px}
.chat-line b::after{content:':'}
.chat-line .chat-admin{display:inline-block;padding:0 6px;border-radius:3px;background:linear-gradient(#f5d77a,#c9962e);color:#2b1a02;font-size:11px;letter-spacing:.04em}
.chat-line .chat-admin::before{content:'★ '}
.chat-line .chat-admin::after{content:''}
.chat-line.admin{margin:2px -10px;padding:3px 10px;background:#c9a24f26;border-left:3px solid #e0b25c}
.chat-line.admin span{color:#fff3cf}
.chat-line small{color:#9fc3e8;margin-right:3px}
.chat-empty{margin:8px 0;color:#a9a08a;font-style:italic}
.chat-status{margin:0;padding:3px 10px;color:#cdbb8d;font-size:11.5px;border-top:1px solid #c9a24f33}
.chat-status.warn{color:#ffb199}
.chat-form{display:flex;gap:6px;padding:7px;border-top:1px solid #c9a24f66}
.chat-form input{flex:1;min-width:0;min-height:34px;padding:6px 9px;border:1px solid #8d794d;border-radius:5px;background:#0b0905;color:#f6ecd2;font:inherit;font-size:16px;line-height:1.2}
.chat-form input:focus{outline:2px solid #e0b25c;outline-offset:0}
.chat-form button{min-height:34px;padding:6px 14px;border:1px solid #c9a24f;border-radius:5px;background:linear-gradient(#e0b25c,#a87a2a);color:#241503;font-weight:700}
.chat-peek{max-width:min(360px,calc(100vw - 32px));padding:5px 10px;border:1px solid #c9a24f88;border-radius:6px;background:rgba(14,10,6,.82);cursor:pointer;animation:chat-peek .25s ease-out}
.chat-dock.open .chat-peek{display:none}
@keyframes chat-peek{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* the system lines (.chat) sit in the same corner: they make way while the panel or a peek is shown */
body:has(.chat-dock.open) .chat,body:has(.chat-peek:not([hidden])) .chat{opacity:0}
/* mouse: during a match the panel and the peek open above the height of the skill bar, never over it */
@media(pointer:fine),(pointer:none){.playing .chat-dock>.chat-toggle{margin-top:58px}}
@media(min-width:561px){.chat-form input{font-size:13px}}
/* touch: the joystick owns the lower left, so the button sits above it; the panel opens above the button */
@media(pointer:coarse){
  /* the menu fills a phone: the chat waits for the match (or the training ground) */
  body:not(.playing) .chat-dock{display:none}
  .playing .chat-dock{bottom:calc(var(--safe-bottom,0px) + 168px);left:calc(var(--safe-left,0px) + 14px)}
  .chat-toggle{min-height:38px;padding:6px 12px}
  .chat-log{height:min(200px,30dvh)}
  /* open: the panel moves to the top left with the box under the tabs, above where the on-screen keyboard rises */
  .playing .chat-dock.open{bottom:auto;top:calc(var(--safe-top,0px) + 8px)}
  .playing .chat-dock.open .chat-toggle{display:none}
  .chat-form{order:-1;border-top:0;border-bottom:1px solid #c9a24f66}
  .chat-tabs{order:-2}
}
@media(pointer:coarse) and (orientation:landscape){
  .playing .chat-dock{bottom:calc(var(--safe-bottom,0px) + 148px)}
  .chat-log{height:min(150px,30dvh)}
  .chat-panel{width:min(340px,48vw)}
}
@media(prefers-reduced-motion:reduce){.chat-peek{animation:none}}