/* ========== SHEETS: Table Talk and Teach Me ==========
   One floating panel style (render.js buildSheet). Tablets and computers:
   a side panel on the right, between the top bar and your cards. Phones
   (and short landscape phones): a sheet that slides up and sits directly
   above your cards, so you can still play while it is open. On wide
   screens the table makes room for the panel instead of sitting under it. */

.sheet {
  position: fixed;
  right: 12px;
  top: calc(var(--chrome-h) + 10px);
  bottom: calc(var(--hand-h) + 10px);
  width: min(360px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  /* Opaque: the table must not show through under the messages (R-077). */
  background: rgb(10, 26, 18);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-panel);
  color: var(--text);
  animation: sheet-in-side 0.2s ease-out;
  overflow: hidden;
}

@keyframes sheet-in-side {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes sheet-in-up {
  from { transform: translateY(100%); }
  to { transform: none; }
}

.sheet-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 10px 16px;
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
}

.sheet-grip { display: none; }

.sheet-title {
  flex: 1;
  margin: 0;
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: 0.01em;
}

.sheet-head-extra { display: flex; align-items: center; }

.sheet-close {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-dim);
  font-size: 1.05rem;
  cursor: pointer;
}

.sheet-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }

.sheet-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Host's on/off switch (and Teach Me's "Turn off") */
.sheet-tips .chat-switch {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.chat-host-control {
  padding: 8px 12px 0;
  flex-shrink: 0;
}

.chat-host-control[hidden] { display: none; }

.host-switch {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--panel-border, rgba(227, 181, 74, 0.2));
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
  cursor: pointer;
  white-space: normal;
  transition: background 0.15s, border-color 0.15s;
}

.host-switch:hover {
  background: rgba(255, 255, 255, 0.07);
}

.chat-switch-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.chat-switch-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.chat-switch-caption {
  font-size: 0.75rem;
  color: var(--text-dim);
  line-height: 1.25;
}

.chat-switch-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  transition: background 0.2s;
}

.chat-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}

.host-switch.is-on {
  border-color: rgba(227, 181, 74, 0.4);
  background: rgba(227, 181, 74, 0.08);
}

.host-switch.is-on .chat-switch-toggle {
  background: var(--gold, #e3b54a);
}

.host-switch.is-on .chat-switch-thumb {
  transform: translateX(20px);
}

.chat-switch[hidden] { display: none; }

.chat-guest-disabled-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 0;
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.3;
}

.chat-guest-disabled-note[hidden] { display: none; }

.chat-guest-disabled-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* Muted users bar at top of chat */
.chat-muted-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.75rem;
  color: var(--text-dim);
  flex-shrink: 0;
}

.chat-unmute-chip {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.chat-unmute-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Messages */
.chat-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-empty {
  margin: auto;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.chat-msg {
  position: relative;
  max-width: 88%;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 11px;
  border-radius: 14px 14px 14px 4px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.9rem;
  line-height: 1.35;
  word-break: break-word;
}

.chat-msg.is-mine {
  align-self: flex-end;
  border-radius: 14px 14px 4px 14px;
  background: rgba(227, 181, 74, 0.18);
}

.chat-msg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chat-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold);
}

.chat-msg.is-mine .chat-name { color: var(--gold-strong); text-align: right; }

.chat-text { color: var(--text); }

.chat-msg-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 18px;
  padding: 0;
  margin: -2px 0 -2px 4px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.chat-msg:hover .chat-msg-menu-btn,
.chat-msg-menu-btn:focus-visible {
  opacity: 1;
}

.chat-msg-menu-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text);
}

@media (pointer: coarse) {
  .chat-msg-menu-btn {
    opacity: 0.7;
    width: 28px;
    height: 22px;
  }
}

/* Message action menu (Report, Mute) */
.chat-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-panel) + 20);
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: chat-fade 0.15s ease-out;
}

@keyframes chat-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.chat-menu {
  background: #0f271a;
  border: 1px solid var(--panel-border, rgba(227, 181, 74, 0.3));
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
  width: min(280px, 85vw);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: transparent;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.chat-menu-item:last-child {
  border-bottom: none;
}

.chat-menu-item:hover,
.chat-menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

.chat-menu-item.is-destructive {
  color: var(--bad, #e74c3c);
}

.chat-menu-item.chat-menu-cancel {
  justify-content: center;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.chat-menu-icon {
  font-size: 1.1rem;
}

/* Report dialog */
.report-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-panel) + 30);
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: chat-fade 0.15s ease-out;
}

.report-dialog-card {
  background: #0f271a;
  border: 1px solid var(--panel-border, rgba(227, 181, 74, 0.35));
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
  width: min(340px, 90vw);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.report-dialog-title {
  margin: 0;
  font-size: 1.1rem;
  color: var(--gold, #e3b54a);
}

.report-dialog-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text);
}

.report-support-link {
  color: var(--gold, #e3b54a);
  text-decoration: underline;
  word-break: break-all;
}

.report-dialog-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

/* Quick phrases — the owner's signal phrases are one tap away */
.chat-quick {
  display: flex;
  gap: 6px;
  padding: 8px 12px 0;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}

.chat-quick::-webkit-scrollbar { display: none; }
/* The edge with more chips past it fades (render/chat.js syncFade). */
.chat-quick.has-more-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.chat-quick.has-more-start { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px); mask-image: linear-gradient(to right, transparent, #000 40px); }
.chat-quick.has-more-start.has-more-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.chat-quick[hidden] { display: none; }

.chat-chip {
  flex-shrink: 0;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}

.chat-chip:hover { background: rgba(255, 255, 255, 0.1); }

.chat-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  flex-shrink: 0;
}

.chat-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  /* 16px stops iOS Safari from zooming the page when the field is focused */
  font-size: 16px;
}

.chat-input::placeholder { color: #9fb2a5; opacity: 1; }
.chat-input:disabled { opacity: 0.6; }

.chat-send.btn {
  width: auto;
  min-height: 44px;
  padding: 0 18px;
  flex-shrink: 0;
}

/* Unread count on the Chat button */
.icon-btn { position: relative; }
.icon-btn.is-active {
  background: rgba(227, 181, 74, 0.16);
  border-color: rgba(227, 181, 74, 0.55);
  color: var(--gold-strong);
}

.icon-btn .badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--bad);
  color: #fff;
  font-size: var(--text-micro, 0.6875rem);
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}

/* Speech bubbles next to a seat (render.js showSeatBubble) */
#bubble-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: calc(var(--z-panel) - 1);
}

.seat-bubble {
  position: fixed;
  max-width: min(200px, 55vw);
  padding: 6px 11px;
  border-radius: 14px;
  background: #fbf7ea;
  color: #1d2a22;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  animation: bubble-in 0.18s ease-out;
  transition: opacity 0.4s;
}

/* In the bubble's own slot beside its plate (chat.js layoutSeatBubbles,
   public/bubble-layout.js, docs/TABLE_LAYOUT.md): never on the plate's bid
   line, the bid panel, the trick or the hand. The tail points at the plate. */
.seat-bubble.in-slot {
  max-width: none;
  box-sizing: border-box;
  padding: 4px 8px;
  border-radius: 9px;
  font-size: 0.78rem;
  line-height: 1.25;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  --tail: 50%;
}
/* The whole line, never clamped: chat.js keeps a bubble to 4 lines (5 on a
   big window) by its width, and tucks one that can't fit (build 24). */
.seat-bubble-text {
  display: block;
  overflow-wrap: anywhere;
}
.seat-bubble.in-slot::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
  transform: rotate(45deg);
}
.seat-bubble[data-side="below"]::after { top: -4px; left: calc(var(--tail) - 4px); }
.seat-bubble[data-side="above"]::after { bottom: -4px; left: calc(var(--tail) - 4px); }
.seat-bubble[data-side="right"]::after { left: -4px; top: calc(var(--tail) - 4px); }
.seat-bubble[data-side="left"]::after { right: -4px; top: calc(var(--tail) - 4px); }
/* No free slot: a speech mark on the plate's corner (the chat has the words). */
.seat-bubble.is-tucked {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 11px;
  font-size: 0.75rem;
  line-height: 22px;
  text-align: center;
}
.seat-bubble.is-tucked::after { content: none; }
.seat-bubble.is-tucked .seat-bubble-text { display: none; }
.seat-bubble.is-tucked::before { content: '\1F4AC'; }
/* Several lines in a row from that seat: their count on the mark (build 24). */
.seat-bubble.is-tucked[data-count]::after {
  content: attr(data-count);
  position: absolute;
  top: -6px;
  right: -7px;
  width: auto;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--gold, #e3b54a);
  color: #000;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  transform: none;
  border: 0;
}
/* A tucked line: the Chat badge is ringed so its words are found. */
body.talk-waiting .toolbar-chat .badge { box-shadow: 0 0 0 2px #fff; }
.seat-bubble.is-leaving { opacity: 0; }

@keyframes bubble-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Landscape tablets and computers: the table makes room for the panel. */
@media (min-width: 1024px) and (min-height: 501px) {
  body.sheet-open #phase-root { padding-right: 384px; }
  /* The side seats give up room first, so the bid panel keeps 360 px or
     half the narrowed felt (N-006: it was 280 px between two 218 px seats). */
  /* Each side column at least as wide as its plate needs for the longer
     side name's longest word beside the avatar (render/table.js
     fitSideNames; F-004: "Tommy" read "Tom…" in a 160 px column). */
  body.sheet-open:not(.pad-landscape) .game-table {
    --side-col: clamp(160px, calc((var(--side-name-w, 0px) + 48px) * var(--plate-z, 1)), 220px);
    grid-template-columns: minmax(96px, var(--side-col)) minmax(min(360px, 50%), 1fr) minmax(96px, var(--side-col));
  }
  body.big-table.sheet-open .game-table { --plate-z: calc(1.2 * var(--big-step, 1)); }
}

/* Phones, landscape phones and portrait tablets: a sheet above your cards. */
@media (max-width: 600px), (max-height: 500px), (max-width: 900px) and (orientation: portrait) {
  .sheet {
    left: 0;
    right: 0;
    top: auto;
    width: auto;
    bottom: var(--hand-h);
    height: min(56vh, calc(100dvh - var(--chrome-h) - var(--hand-h) - 8px));
    border-radius: 18px 18px 0 0;
    border-bottom: none;
    animation: sheet-in-up 0.22s ease-out;
    transition: transform 0.15s;
  }

  .sheet-head { padding-top: 16px; }

  .sheet-grip {
    display: block;
    position: absolute;
    top: 6px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
  }
}

/* iPad-width screens and bigger (Luke, build 20): one step larger chat and
   speech-bubble text. The bubble clamps itself inside the screen (chat.js). */
@media (min-width: 768px) and (min-height: 501px) {
  .chat-text { font-size: 1.05rem; }
  .chat-name { font-size: 0.9rem; }
  .chat-chip { font-size: 0.9rem; }
  .chat-input { font-size: 1.05rem; }
  .seat-bubble.in-slot { font-size: 0.92rem; padding: 5px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet, .seat-bubble { animation: none; }
}
.chat-quick[hidden], .chat-chip[hidden] { display: none; }