/* Shared between the phone's chat sheet (index.html) and the admin full page
   (admin.html). Relies on the --ink/--paper/--muted/--ring/--ring-press custom
   properties each page already defines on :root. */

.chat-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* anchor point for .chat-emoji-sheet, which slides up from the bottom of
     this box rather than the whole viewport */
  position: relative;
}

.chat-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge/IE */
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px 8px;
}
.chat-list::-webkit-scrollbar { width: 0; height: 0; background: transparent; } /* Chrome/Safari/Edge */
/* the phone's chat gate (index.html) hides this while logged out - without
   this, [hidden] is silently overridden by the display:flex above */
.chat-list[hidden] { display: none; }

/* WhatsApp-style floating date pill, dropped in whenever a message's
   calendar day differs from the one before it (see dayKeyFor/renderMessage
   in chat.js) - a plain flex child of .chat-list, so it already gets that
   column's gap spacing for free. */
.chat-date-sep {
  display: flex;
  justify-content: center;
}
.chat-date-sep span {
  font-size: 11.5px;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.07);
  padding: 4px 13px;
  border-radius: 14px;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 78%;
}
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-msg.theirs { align-self: flex-start; align-items: flex-start; }

.chat-bubble {
  padding: 9px 13px;
  border-radius: 16px;
  border: 1.5px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
}
.chat-msg.mine .chat-bubble {
  background: var(--ring);
  border-color: var(--ring-press);
  color: #fff;
}
.chat-msg.emoji-only .chat-bubble {
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 2.4em;
  line-height: 1.15;
}

.chat-bubble img, .chat-bubble video {
  display: block;
  max-width: min(240px, 60vw);
  max-height: 280px;
  border-radius: 10px;
}
.chat-bubble img { cursor: pointer; }

.chat-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* single check (sent) by default; the second stroke fades in once seen,
   turning it into a double check - same convention as WhatsApp/iMessage */
.chat-check { display: flex; align-items: center; color: var(--muted); }
.chat-check .chk-a { opacity: 0; transition: opacity 150ms; }
.chat-check.seen { color: var(--live); }
.chat-check.seen .chk-a { opacity: 1; }

.chat-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.7;
}
.chat-delete-btn svg { width: 13px; height: 13px; }
.chat-delete-btn:active { opacity: 1; color: var(--dead); }

@media (hover: hover) {
  .chat-delete-btn:hover { opacity: 1; color: var(--dead); }
}

.chat-typing {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  padding-left: 2px;
}
.chat-typing[hidden] { display: none; }
.chat-typing-dots { display: inline-flex; gap: 3px; }
.chat-typing-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
  animation: chat-typing-bounce 1s infinite ease-in-out;
}
.chat-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-typing-dots span { animation: none; opacity: 0.8; }
}

/* Reload button feedback (friend's header + admin's header, both pages) -
   added to the icon itself right on click, so there's instant visible
   feedback in the brief moment before location.reload() actually navigates
   away. Shared here (not duplicated per page) since both reload buttons use
   the same spin-on-tap behavior regardless of their other, page-specific
   button styling. */
.spinning { animation: icon-spin 0.6s linear infinite; }
@keyframes icon-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .spinning { animation: none; }
}

.chat-error {
  font-size: 13px;
  color: var(--dead);
  text-align: center;
}
.chat-error[hidden] { display: none; }

.chat-progress { width: 100%; accent-color: var(--ring); }
.chat-progress[hidden] { display: none; }

/* <emoji-picker> is a real custom element (emoji-picker-element) - it owns
   its own internal layout/search/categories via shadow DOM, themed here
   through its documented CSS custom properties. */
.chat-emoji-picker {
  width: 100%;
  height: 100%;
  border: none;
  --background: var(--paper);
  --border-color: var(--muted);
  --indicator-color: var(--ring);
  --outline-color: var(--ink);
  /* the component defaults these to a near-white color when the OS is in
     dark mode (its own light/dark switch, separate from --background) - this
     app has one fixed light theme, so pin them instead of inheriting that */
  --input-font-color: var(--ink);
  --input-placeholder-color: var(--muted);
  --input-border-color: var(--muted);
}

/* Slide-up sheet (same idea as the friend-side Games/Chat sheets) hosting the
   emoji picker, instead of it just popping into the layout in place - tapping
   the emoji button slides this up over the message list; picking one slides
   it back down automatically. Anchored to .chat-body (position: relative),
   not the whole viewport, so it only ever covers the chat area. */
.chat-emoji-sheet {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
}
.chat-emoji-sheet[hidden] { display: none; }
.chat-emoji-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 220ms ease;
}
.chat-emoji-sheet.open .chat-emoji-sheet-backdrop { opacity: 1; }
.chat-emoji-sheet-panel {
  position: relative;
  width: 100%;
  height: min(320px, 50vh);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}
/* the rounded-corner clipping for the emoji picker's own (square-cornered)
   content lives on this separate inner wrapper, not the panel itself -
   overflow:hidden on an element clips that element's OWN box-shadow too, not
   just its children, which was cutting the panel's shadow off in a jagged
   rectangle right at its edges instead of letting it fall off naturally */
.chat-emoji-sheet-clip {
  width: 100%;
  height: 100%;
  border-radius: 16px 16px 0 0; /* panel's own radius minus its ~1.5px border */
  overflow: hidden;
}
.chat-emoji-sheet.open .chat-emoji-sheet-panel { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .chat-emoji-sheet-backdrop, .chat-emoji-sheet-panel { transition: none; }
}

/* The compose card: a single rounded box (textarea on top, a slim toolbar
   row glued to its bottom edge) instead of a pill-shaped single-line input
   with separate floating round buttons beside it. */
.chat-compose {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border: 1.5px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
  overflow: hidden;
}
/* the phone's chat gate (index.html) hides this while logged out - without
   this, the [hidden] attribute is silently overridden by the display:flex
   above (author rules always beat the UA [hidden] rule) */
.chat-compose[hidden] { display: none; }

.chat-input {
  display: block;
  width: 100%;
  resize: none;
  font: inherit;
  font-size: 16px; /* below 16px, iOS/Chrome zoom the page in on focus */
  line-height: 1.35;
  padding: 14px 14px 10px;
  border: none;
  background: transparent;
  color: var(--ink);
  max-height: 120px;
  overflow-y: auto;
  transition: height 90ms ease;
}
.chat-input:focus { outline: none; }
.chat-input::placeholder { color: var(--muted); }

.chat-compose-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-top: 1.5px solid var(--muted);
}
.chat-tool-sep {
  width: 1.5px;
  align-self: stretch;
  margin: 6px 2px;
  background: var(--muted);
  opacity: 0.5;
  flex-shrink: 0;
}
.chat-tool-spacer { flex: 1; }

/* !important on the properties .ttt-card button:not(.ttt-cell) also sets:
   that rule is more specific than a plain class and would otherwise win
   (see the D-pad/close-icon buttons in index.html for the same fix) */
.chat-tool-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-size: 15px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chat-tool-btn svg { width: 17px; height: 17px; }
.chat-tool-btn b, .chat-tool-btn i, .chat-tool-btn u { font-style: normal; text-decoration: none; }
.chat-tool-btn b { font-weight: 700; }
.chat-tool-btn i { font-style: italic; }
.chat-tool-btn u { text-decoration: underline; }
.chat-tool-btn:active { background: var(--press) !important; color: #fff !important; }
.chat-tool-btn.chat-send {
  width: 34px;
  height: 34px;
  background: var(--ring) !important;
  color: #fff !important;
}
.chat-tool-btn.chat-send svg { width: 16px; height: 16px; }
.chat-tool-btn.chat-send:active { background: var(--ring-press) !important; }

.chat-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9000;
}
.chat-lightbox[hidden] { display: none; }

/* a real horizontally-scrollable, snap-aligned row (same technique as the
   phone's video reels feed) - swiping between photos is native browser
   scrolling, not a hand-rolled touchstart/touchend jump cut, so it gets real
   momentum/snap physics and an actual sliding animation for free */
.chat-lightbox-strip {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.chat-lightbox-strip::-webkit-scrollbar { display: none; }
/* while any photo is zoomed in, the strip itself stops scrolling - otherwise
   a drag-to-pan gesture could also drift into swiping to the next photo */
.chat-lightbox-strip.zoom-locked { overflow-x: hidden; }

.chat-lightbox-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 24px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* clips a panned/zoomed photo to its own slide */
  /* the default/resting state, present from first paint (not just set
     reactively in JS once a gesture starts - a pinch's very first frame would
     otherwise still hit the browser's own native pinch-zoom before any JS
     could react). Set on the whole SLIDE, not just the <img>: a smaller
     photo leaves empty padding around it, and a pinch landing there (one or
     both fingers off the actual image) needs blocking too, or the browser
     zooms the whole page instead. pan-x still lets a one-finger drag do the
     native swipe-to-next-photo scroll; it just tells the browser never to
     run its own pinch-zoom here - chat.js's wireZoomAndPan() owns that
     entirely instead, switching this to "none" while actually zoomed in. */
  touch-action: pan-x;
}
.chat-lightbox-slide img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  cursor: zoom-in;
  transition: transform 150ms ease;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}
/* no transition while actively zoomed/panning - a live drag should track the
   finger exactly, not lag behind an eased animation */
.chat-lightbox-slide img.zoomed { cursor: grab; transition: none; }
.chat-lightbox-slide img.zoomed:active { cursor: grabbing; }

.chat-lightbox-counter {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 12px;
  border-radius: 20px;
  pointer-events: none;
}
.chat-lightbox-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chat-lightbox-close svg { width: 16px; height: 16px; }
/* hidden by default (touch devices - the phone) since swiping already
   navigates there; shown only for hover-capable devices (the admin's
   laptop/mouse, no touchscreen) further down, same distinction this file
   already makes for .chat-tool-btn's hover feedback */
.chat-lightbox-nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.9);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chat-lightbox-nav svg { width: 16px; height: 16px; }
.chat-lightbox-nav:disabled { opacity: 0.25; cursor: default; }
.chat-lightbox-prev { left: max(8px, env(safe-area-inset-left, 0px)); }
.chat-lightbox-next { right: max(8px, env(safe-area-inset-right, 0px)); }

@media (hover: hover) {
  .chat-tool-btn:hover:not(:active) { background: rgba(0, 0, 0, 0.06) !important; }
  .chat-lightbox-nav { display: flex; }
  .chat-lightbox-nav:hover:not(:disabled) { background: rgba(0, 0, 0, 0.75); }
}