/* Copyright (c) 2026 Ascent. All rights reserved. PRIVATE TABLE — https://poker.ascent-web.jp/terms */
/* Ephemeral comments. The travelling line is intentionally only type: no box. */

.table-comments {
  position: absolute;
  inset: 0;
  z-index: 11;
  overflow: hidden;
  pointer-events: none;
}

.table-comment {
  --comment-duration: 8s;
  --comment-travel: -500px;
  position: absolute;
  left: 100%;
  display: flex;
  align-items: baseline;
  gap: 7px;
  width: max-content;
  max-width: none;
  margin: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
  white-space: nowrap;
  -webkit-text-stroke: .35px rgba(0, 0, 0, .88);
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, .92),
     1px -1px 0 rgba(0, 0, 0, .92),
    -1px  1px 0 rgba(0, 0, 0, .92),
     1px  1px 0 rgba(0, 0, 0, .92),
     0 2px 4px rgba(0, 0, 0, .5);
  animation: table-comment-run var(--comment-duration) linear forwards;
  will-change: transform;
}

.table-comment-name {
  color: rgba(226, 231, 227, .72);
  font-size: 10px;
  font-weight: 700;
  -webkit-text-stroke: 0;
}

.table-comment.is-spectator,
.table-comment.is-spectator .table-comment-name {
  color: #eadca8;
}

@keyframes table-comment-run {
  to { transform: translateX(var(--comment-travel)); }
}

.comment-toggle {
  position: fixed;
  right: 12px;
  bottom: calc(14px + var(--safe-bottom));
  z-index: 13;
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(10, 15, 12, .84);
  box-shadow: var(--sh-2);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}
/* The same Material symbol treatment as the HUD buttons (table.css .hud-btn
   .icon): 22px on the 24px grid, the 44px circle supplies the target. It
   replaced the 💬 emoji, whose blue Apple bubble sat outside the palette. */
.comment-toggle .icon { width: 22px; height: 22px; }

/* During the after-party the toggle belongs to the REMATCH row, not to the
   bottom of the screen: left where it was it sat on the end of the HOME line
   (owner, 2026-09-09 23:0x). `.ap-row` is two rows — the button at `--tap`
   and the quiet line at `--tap-min`, 8px apart, 10px above the safe area — so
   centring a 44px circle on the upper one puts it at 10 + 44 + 8 + (48-44)/2
   above the safe inset. Still fixed, still z 13: only its line moves. */
body.is-after-party .comment-toggle {
  bottom: calc(10px + var(--safe-bottom) + var(--tap-min) + 8px + (var(--tap) - var(--tap-min)) / 2);
}

.comment-composer {
  position: fixed;
  right: 12px;
  bottom: calc(10px + var(--safe-bottom));
  z-index: 14;
  width: min(366px, calc(var(--app-w) - 24px));
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(9, 14, 11, .94);
  box-shadow: var(--sh-3);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  /* `comments.js` writes the keyboard's height here from the visual viewport
     as the keys rise, holds it while they are up, and writes 0 once the input
     UI is gone: the sheet rides up to sit on the keys instead of behind them,
     and slides back when they go. The transition therefore runs only on the
     way up and the way down — while the height is held nothing is written,
     so nothing transitions (owner's latch, 2026-09-13). */
  --keyboard-inset: 0px;
  transform: translateY(calc(-1 * var(--keyboard-inset)));
  transition: transform calc(220ms * var(--motion)) var(--ease-out);
}

/* The deal can come round while the sheet is up; the sheet stays, and this
   one line — the clock's own colour — says why the pane underneath went live.
   Close, then act. */
.comment-turn {
  /* Reserved whether or not it is your turn, and only its ink comes and goes.
     The sheet is anchored by its bottom edge, so a line that appears at its top
     pushes the TOP edge up — measured 26 px on production, on every turn
     arrival and 26 px back when the turn passes: 70 moves across 10 hands with
     the sheet held open, while you are typing into it (2026-09-11,
     tools/phone/night-ui/composerdrift.mjs). The field and the chips never
     moved, so this was never about losing your place in the text; it is the
     panel you are looking at changing size under you, and the 26 px it takes
     are your own stack line and the last sliver of your hole cards.

     The information still has to arrive the moment the deal comes round. The
     geometry does not have to arrive with it. `visibility` keeps the box and
     drops the text — and drops it out of the accessibility tree too, so it is
     not announced while it is not true. */
  visibility: hidden;
  margin: 0 28px 8px 0;
  color: var(--lime);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}
body.is-your-turn .comment-turn { visibility: visible; }

.comment-close {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 22px;
}

.comment-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding-right: 28px;
}

.comment-chip {
  min-width: 0;
  min-height: 36px;
  padding: 6px 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  margin-top: 8px;
}

.comment-input {
  min-width: 0;
  height: 42px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
}

.comment-send {
  min-width: 62px;
  height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: var(--gold);
  color: var(--gold-ink);
  font-size: 13px;
  font-weight: 800;
}

/* The action pane rises exactly here on your turn, shown by this same body
   class (actions.js sets it once the cards can be read, not on the raw frame),
   so the toggle steps aside on the very tick the pane arrives — never a beat
   earlier or later than the pane itself. The open sheet is unaffected. */
body.is-your-turn .comment-toggle,
.comment-toggle[hidden],
.comment-composer[hidden] { display: none; }