@charset "utf-8";
/* Chat bar (design-ref brief §12, contract C4): everything inside #chatbar, built by js/chat.js. app.css places the
   container (full-width black bar from the chat top C to the screen bottom, bottom safe area included); this file
   styles its content and the speech bubbles that js/chat.js puts inside #pc0 / #pc1.
   Units: --r = one pixel of the 707-px reference frame, --fx = the frame's left edge (both set on #game by game.js).
   Content row 76r from C: chat icon 32×30 centred (46, 41) · input from x 88, text centred on y 41 (placeholder
   «سلام...» 400 19r #D3D3D3) · sticker icon 30×30 centred (602.5, 38.5) · send icon 31×34 centred (668, 37.5). */

/* a popup is open or the keyboard is up: above the toasts (5) and the side controls, still under the overlays (20) */
.chatbar.cb-raised { z-index: 7; }

.cb-row { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--r) * 76); background: #000; }
/* typing: the row rides on top of the on-screen keyboard (top set by chat.js from the visual viewport) */
.cb-row.cb-lift { position: fixed; z-index: 2; box-shadow: 0 -1px 0 rgba(255, 255, 255, .06); }
/* the moment between the focus and the keyboard's arrival: parked out of the keyboard's way, unseen */
.cb-row.cb-pre { opacity: 0; pointer-events: none; }

/* icon buttons: as tall as the row; the icon sits at (--ix, --iy) inside, a soft disc behind it when pressed / open */
.cb-btn { position: absolute; top: 0; height: 100%; display: block; touch-action: manipulation; -webkit-touch-callout: none; }
.cb-btn::before { content: ''; position: absolute; left: var(--ix); top: var(--iy); width: calc(var(--r) * 60); height: calc(var(--r) * 60);
  border-radius: 50%; transform: translate(-50%, -50%); background: transparent; transition: background-color 120ms ease-out; pointer-events: none; }
.cb-btn:active::before, .cb-btn[aria-expanded="true"]::before { background: rgba(255, 255, 255, .1); }
.cb-btn:focus-visible { outline: none; }
.cb-btn:focus-visible::before { box-shadow: 0 0 0 2px var(--lamp, #1687EF); }
.cb-btn img { position: absolute; left: var(--ix); top: var(--iy); display: block; transform: translate(-50%, -50%); pointer-events: none;
  transition: transform 90ms ease-out, filter 150ms ease-out; }
.cb-btn:active img { transform: translate(-50%, -50%) scale(.92); }
.cb-quick { --ix: calc(var(--r) * 40); --iy: calc(var(--r) * 41); left: calc(var(--fx) + var(--r) * 6); width: calc(var(--r) * 80); }
.cb-quick img { width: calc(var(--r) * 32); height: calc(var(--r) * 30); }
.cb-sticker { --ix: calc(var(--r) * 36); --iy: calc(var(--r) * 38.5); left: calc(var(--fx) + var(--r) * 566.5); width: calc(var(--r) * 72); }
.cb-sticker img { width: calc(var(--r) * 30); height: calc(var(--r) * 30); }
.cb-send { --ix: calc(var(--r) * 29.5); --iy: calc(var(--r) * 37.5); left: calc(var(--fx) + var(--r) * 638.5); width: calc(var(--r) * 62); }
.cb-send img { width: calc(var(--r) * 31); height: calc(var(--r) * 34); }
/* something to send: the grey arrow lights up */
.cb-row.cb-has .cb-send img { filter: brightness(1.75); }

/* the input: from x 88 to the sticker button; RTL text whose left edge sits at 88 (as the target's placeholder) */
.cb-input { position: absolute; top: 0; left: calc(var(--fx) + var(--r) * 88); width: calc(var(--r) * 474); height: 100%; margin: 0;
  padding: calc(var(--r) * 6) 0 0; border: 0; border-radius: 0; outline: none; background: transparent; box-shadow: none;
  -webkit-appearance: none; appearance: none; color: #fff; caret-color: #8FD24E; text-align: left; unicode-bidi: plaintext;
  font: 400 calc(var(--r) * 19) / 1.25 Vazirmatn, Tahoma, sans-serif;
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; touch-action: manipulation; }
.cb-input::placeholder { color: #D3D3D3; opacity: 1; }
.cb-input::-webkit-input-placeholder { color: #D3D3D3; opacity: 1; }
/* phones: readable while typing (and never under 16 px, which some WebViews would zoom in on) */
@media (pointer: coarse) {
  .chatbar.cb-typing .cb-input { font-size: max(16px, calc(var(--r) * 19)); }
}

/* rate limit / not sent: a short shake */
.cb-row.cb-nudge .cb-send img { animation: cbNudgeIcon 360ms ease-out; }
.cb-row.cb-nudge .cb-input { animation: cbNudge 360ms ease-out; }
@keyframes cbNudgeIcon {
  0%, 100% { transform: translate(-50%, -50%); }
  25% { transform: translate(calc(-50% - var(--r) * 6), -50%); }
  50% { transform: translate(calc(-50% + var(--r) * 5), -50%); }
  75% { transform: translate(calc(-50% - var(--r) * 3), -50%); }
}
@keyframes cbNudge {
  25% { transform: translateX(calc(var(--r) * -6)); }
  50% { transform: translateX(calc(var(--r) * 5)); }
  75% { transform: translateX(calc(var(--r) * -3)); }
}

/* ---------- popups above the row: quick messages (from the chat icon), stickers (from the sticker icon) */
.cb-pop { position: absolute; bottom: calc(100% + var(--r) * 12); z-index: 1; direction: rtl; padding: calc(var(--r) * 8);
  border-radius: calc(var(--r) * 18); background: #161B1E;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 calc(var(--r) * 8) calc(var(--r) * 28) rgba(0, 0, 0, .6);
  animation: cbPop 160ms cubic-bezier(.2, .7, .2, 1); }
.cb-pop::after { content: ''; position: absolute; top: 100%; width: 0; height: 0; transform: translateX(-50%); pointer-events: none;
  border: calc(var(--r) * 10) solid transparent; border-bottom: 0; border-top-color: #161B1E; }
@keyframes cbPop { from { opacity: 0; transform: translateY(calc(var(--r) * 8)) scale(.97); } }

.cb-quicklist { left: calc(var(--fx) + var(--r) * 14); display: flex; flex-direction: column; min-width: calc(var(--r) * 340);
  max-width: calc(100% - var(--fx) * 2 - var(--r) * 28); transform-origin: calc(var(--r) * 32) 100%; }
.cb-quicklist::after { left: calc(var(--r) * 32); }
.cb-qi { display: flex; align-items: center; justify-content: flex-start; gap: calc(var(--r) * 14); width: 100%;
  min-height: max(44px, calc(var(--r) * 76)); padding: 0 calc(var(--r) * 22); border-radius: calc(var(--r) * 12);
  color: #fff; font: 700 max(14px, calc(var(--r) * 25)) / 1.3 Vazirmatn, Tahoma, sans-serif; text-align: right; white-space: nowrap;
  touch-action: manipulation; transition: background-color 90ms ease-out; }
.cb-qi:active { background: rgba(255, 255, 255, .08); }
.cb-qi:focus-visible { outline: 2px solid var(--lamp, #1687EF); outline-offset: -2px; }
/* online: hide the opponent's messages (a checkbox row under the four messages) */
.cb-mute { margin-top: calc(var(--r) * 6); border-top: 1px solid rgba(255, 255, 255, .08); border-radius: 0 0 calc(var(--r) * 12) calc(var(--r) * 12);
  color: #B4ABB9; font-weight: 400; font-size: max(12px, calc(var(--r) * 20)); white-space: normal; text-align: right; }
.cb-mute::before { content: ''; flex: none; width: max(14px, calc(var(--r) * 26)); height: max(14px, calc(var(--r) * 26));
  border-radius: calc(var(--r) * 6); box-shadow: inset 0 0 0 2px #B4ABB9; }
.cb-mute[aria-checked="true"] { color: #fff; }
.cb-mute[aria-checked="true"]::before { box-shadow: none; background: #1687EF center / 72% no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.cb-stickers { right: calc(var(--fx) + var(--r) * 14); display: grid; grid-template-columns: repeat(6, max(44px, calc(var(--r) * 78)));
  transform-origin: calc(100% - var(--r) * 90.5) 100%; }
.cb-stickers::after { left: calc(100% - var(--r) * 90.5); }
.cb-st { display: grid; place-items: center; height: max(44px, calc(var(--r) * 78)); border-radius: calc(var(--r) * 14);
  font: 400 max(24px, calc(var(--r) * 44)) / 1 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  touch-action: manipulation; transition: transform 90ms ease-out, background-color 90ms ease-out; }
.cb-st:active { background: rgba(255, 255, 255, .08); transform: scale(.9); }
.cb-st:focus-visible { outline: 2px solid var(--lamp, #1687EF); outline-offset: -2px; }

@media (hover: hover) {
  .cb-qi:hover, .cb-st:hover { background: rgba(255, 255, 255, .07); }
  .cb-btn:hover::before { background: rgba(255, 255, 255, .07); }
}

/* ---------- speech bubbles: inside #pc0 / #pc1 (a 0-wide box at the avatar's centre x, from the header top H),
   below the name / turn pill (and below the 16r group balls once they show). chat.js sets the horizontal offset
   (left) and the tail's x (--tail) so the bubble stays on its player's half of the frame. */
.cb-bubble { position: absolute; left: 0; top: calc(var(--r) * 110); z-index: 3; box-sizing: border-box; width: max-content;
  max-width: calc(var(--r) * 330); padding: calc(var(--r) * 9) calc(var(--r) * 18) calc(var(--r) * 10); border-radius: calc(var(--r) * 16);
  background: #fff; color: #141116; font: 700 max(13px, calc(var(--r) * 21)) / 1.35 Vazirmatn, Tahoma, sans-serif; text-align: center;
  white-space: normal; overflow-wrap: break-word; word-break: break-word; pointer-events: none;
  box-shadow: 0 calc(var(--r) * 3) calc(var(--r) * 12) rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; transform: translateY(calc(var(--r) * -6)) scale(.9); transform-origin: var(--tail, 50%) 0;
  transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s linear 180ms; }
.cb-bubble.low { top: calc(var(--r) * 132); }
.cb-bubble.show { opacity: 1; visibility: visible; transform: none;
  transition: opacity 140ms ease-out, transform 220ms cubic-bezier(.3, 1.4, .5, 1), visibility 0s; }
.cb-bubble::before { content: ''; position: absolute; left: var(--tail, 50%); bottom: 100%; width: 0; height: 0; margin-left: calc(var(--r) * -9);
  border: calc(var(--r) * 9) solid transparent; border-top: 0; border-bottom: calc(var(--r) * 10) solid #fff; }
.cb-bubble.sticker { padding: calc(var(--r) * 4) calc(var(--r) * 12);
  font: 400 max(26px, calc(var(--r) * 46)) / 1.15 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.cb-text { display: block; }
.cb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .cb-pop, .cb-row.cb-nudge .cb-send img, .cb-row.cb-nudge .cb-input { animation: none; }
  .cb-bubble, .cb-bubble.show { transform: none; }
  .cb-bubble { transition: opacity 120ms linear, visibility 0s linear 120ms; }
  .cb-bubble.show { transition: opacity 120ms linear, visibility 0s; }
}