/* ==========================================================================
   Inside a chat (13 Oct 2026) — pages/messages.js and chatMediaViewer.js.
   Loaded after polish-comms.css, so a repeated selector here wins. The
   phone's twin is components/pages/ThreadPage.tsx (and MessagesPage.tsx's
   slide, components/ChatMediaViewer.tsx).
   ========================================================================== */

/* ---- a picture in its bubble: whole, in a frame of its own shape ----
   The frame's width and aspect-ratio are set from the picture's shape
   (chatView.mjs mediaBox); the picture is drawn whole inside it, never
   cropped. A sliver or a panorama, held to the minimum side, shows a quiet
   band either side. */
.mrow .media-frame.k-pic,
.mrow .media-frame.k-vid {
  position: relative; max-width: 100%; height: auto;
  border-radius: 15px; overflow: hidden; background: var(--surface);
  cursor: zoom-in; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.mrow .media-frame.k-vid { background: #000; cursor: pointer; }
.mrow .media-frame.k-pic > .bubble-media,
.mrow .media-frame.k-vid > .bubble-media {
  display: block; width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: contain; border-radius: 0; background: transparent;
  -webkit-touch-callout: none; pointer-events: none;
}
.mrow .media-frame.k-pic:focus-visible,
.mrow .media-frame.k-vid:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mrow .media-frame.k-vid .media-stamp { top: auto; bottom: 8px; }
.media-play {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 26px; background: rgba(0, 0, 0, 0.5); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.35);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.media-play svg { width: 22px; height: 22px; fill: currentColor; stroke: none; margin-left: 3px; }

/* ---- the head: a pronounced Back, the name pill, what they are doing, the actions ----
   The Shmangus feel's key look: a 1.5px border with a deeper lip under it,
   the surface colour, and a press that sinks onto the lip. The visible
   shapes are 40px; ::before takes each target past 44. */
.msg-convo > .stack-head { gap: 6px; padding: 6px 10px 8px; container: convohead / inline-size; }
.head-back,
.head-pill,
.head-actions {
  border: 1.5px solid var(--border); border-bottom-width: 3px;
  background: var(--surface); color: var(--ink);
}
.head-back {
  position: relative; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 20px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.head-back::before { content: ''; position: absolute; inset: -4px; }
.head-back svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 46; margin-left: -2px; }
.head-back:active,
.head-pill:active { transform: translateY(1.5px); border-bottom-width: 1.5px; }
.head-back:hover, .head-pill:hover { background: color-mix(in srgb, var(--surface) 82%, var(--ink) 6%); }

.head-pill {
  position: relative; flex: 0 1 auto; min-width: 0; max-width: 56%; min-height: 40px;
  display: flex; align-items: center; gap: 6px; padding: 2px 8px 2px 4px;
  border-radius: 14px; font: inherit; text-align: left; cursor: pointer;
}
.head-pill::before { content: ''; position: absolute; inset: -4px -1px; }
.head-pill.open { border-color: var(--accent); }
.head-pill-face { flex: none; }
.head-pill-face .head-face { width: 30px; height: 30px; border-radius: 15px; }
/* The dot sits on the pill, so its ring is the pill's colour. */
.head-pill .presence-dot { width: 11px; height: 11px; border-color: var(--surface); }
.head-pill-name { min-width: 0; font-size: 16px; font-weight: 700; line-height: 1.2; white-space: normal; overflow-wrap: break-word; }
.head-pill-name .flair-name { min-width: 0; white-space: normal; overflow-wrap: break-word; }
/* A long group name shows whole in a smaller size rather than ending in "…" (21 Oct 2026). */
.head-pill-name.long { font-size: 13.5px; line-height: 1.15; }
.head-pill-chev { flex: none; display: flex; color: var(--ink-faint); transition: transform 160ms cubic-bezier(.2, .9, .25, 1); }
.head-pill-chev svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 48; }

.head-pill.open .head-pill-chev { transform: rotate(180deg); color: var(--accent); }

/* What they are doing: it takes the room the name leaves (the name never
   gives way to it); a group's (who is about, how many) only where the head
   is wide — on a phone the group's name keeps the room. */
.head-side {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 1px; overflow: hidden;
}
.head-side-line { font-size: 12px; font-weight: 650; line-height: 1.25; color: var(--ink-muted); white-space: normal; overflow-wrap: break-word; }
.head-side-line.sub { font-size: 11.5px; font-weight: 500; color: var(--ink-faint); }
.head-side-line.live { color: var(--success, #2E7D4F); }
@container convohead (max-width: 459.98px) { .head-side.group { display: none; } }
@container convohead (max-width: 339.98px) { .head-side { display: none; } }
/* Under 360 the video call leaves the capsule; it is in the pill's card as Video. */
@media (max-width: 359.98px) { .msg-convo .head-actions > .head-video { display: none; } }

/* Games, video and the call: one capsule of three keys. */
.msg-convo > .stack-head > .head-actions {
  margin-left: auto; flex: none; height: 40px; padding: 0; gap: 0;
  display: flex; align-items: stretch; border-radius: 14px;
}
.head-actions > .head-btn {
  position: relative; width: 40px; height: auto; margin: 0; padding: 0; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; color: var(--accent); cursor: pointer;
}
.head-actions > .head-btn::before { content: ''; position: absolute; inset: -5px 0; }
.head-actions > .head-btn + .head-btn { border-left: 1px solid var(--border); }
.head-actions > .head-btn:first-child { border-radius: 12.5px 0 0 11px; }
.head-actions > .head-btn:last-child { border-radius: 0 12.5px 11px 0; }
.head-actions > .head-btn:only-child { border-radius: 12.5px 12.5px 11px 11px; }
.head-actions > .head-btn:hover { background: var(--accent-soft); }
.head-actions > .head-btn:active { background: var(--accent-soft); }
.head-actions > .head-btn svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 32; }
.head-actions > .games-pill { height: auto; gap: 0; padding: 0; margin: 0; font-size: 0; background: none; color: var(--accent); }
.head-actions > .games-pill svg { width: 21px; height: 21px; }
.head-actions > .games-pill.open { background: var(--accent-soft); color: var(--accent); }
.head-actions > .head-btn .call-count { top: 1px; right: 0; }
/* Side by side the list's head carries the way out (shell.css hid the old chevron the same way). */
@media (min-width: 720px) {
  .msg-convo > .stack-head > .head-back { display: none; }
  .msg-convo > .stack-head { padding-left: 14px; }
}

/* ---- the name pill's dropdown: that person's or group's settings ---- */
.info-host { position: absolute; inset: 0; z-index: 26; pointer-events: none; }
.info-host[hidden] { display: none; }
.info-catch { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: auto; }
.info-drop {
  position: absolute; pointer-events: auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 12px 6px;
  background: var(--surface-solid, var(--surface)); color: var(--ink);
  border: 1.5px solid var(--border); border-bottom-width: 3px; border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  transform-origin: 24px 0;
  transition: transform 160ms cubic-bezier(.2, .9, .25, 1), opacity 160ms;
}
.info-drop.in { animation: info-drop-in 200ms cubic-bezier(.2, .9, .25, 1); }
.info-drop.out { animation: info-drop-out 150ms ease-in forwards; pointer-events: none; }
@keyframes info-drop-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes info-drop-out { to { opacity: 0; transform: translateY(-6px) scale(.96); } }
.info-drop-who { padding: 0 4px 12px; }
.info-drop-name { font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.info-drop-line { margin-top: 2px; font-size: 13px; color: var(--ink-muted); overflow-wrap: anywhere; }
.info-drop .info-quick-row { justify-content: flex-start; margin-bottom: 4px; gap: 6px; }
.info-drop .info-quick { min-height: 58px; max-width: none; min-width: 0; padding: 10px 2px; font-size: 11px; background: var(--bg); border: 1.5px solid var(--border); border-bottom-width: 3px; }
.info-drop .info-quick:active { transform: translateY(1.5px); border-bottom-width: 1.5px; }
.info-drop .info-quick.on { border-color: var(--ink); }
.info-drop .info-label { margin: 12px 0 6px 4px; font-size: 12px; letter-spacing: 0.2px; }
.info-drop .bg-swatches { padding-bottom: 10px; }
.info-drop .info-card { margin-bottom: 8px; }
.info-drop .info-member { min-height: 52px; }
.info-drop .info-member > svg:first-child { width: 19px; height: 19px; stroke: var(--accent); }
.info-drop .info-member .danger-text ~ svg, .info-drop .info-member:has(.danger-text) > svg:first-child { stroke: var(--danger, #C43D3D); }
.info-row-main { font-weight: 600; }
/* The profile: one row of three keys, the one it is in lit. */
.info-personas { display: flex; gap: 6px; margin-bottom: 10px; }
.info-persona {
  flex: 1 1 0; min-width: 0; min-height: 48px; padding: 6px 4px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px solid var(--border); border-bottom-width: 3px; border-radius: 14px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.info-persona span { white-space: normal; overflow-wrap: break-word; }
.info-persona svg { flex: none; width: 18px; height: 18px; stroke: var(--ink-muted); fill: none; stroke-width: 34; }
.info-persona:active { transform: translateY(1.5px); border-bottom-width: 1.5px; }
.info-persona.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); cursor: default; }
.info-persona.on svg { stroke: var(--accent); }

/* ---- the conversation comes in from the RIGHT on a narrow window ----
   polish-comms.css's own push (the list a quarter to the left), as any
   pushed screen moves; from the left 13–14 Oct 2026, while Messages was a
   page swiped to. Since 14 Oct it is a pop-up (the user: "please make it so
   messages open to the right instead of the left now that swiping is not an
   issue"): the way back is a drag from the left edge to the right, and a
   drag to the right anywhere else on a message is a reply (chatView.mjs
   swipeIntent, BACK_EDGE). The timing and the curve are unchanged
   (MessagesPage.tsx PUSH_MS, POP_MS, PUSH_EASE). */
@media (max-width: 719.98px) {
  /* A finger holding the chat: it and the list follow the finger, with the list in view behind. */
  .msg-stack.back-drag > .msg-convo,
  .msg-stack.back-drag > .msg-list { transition: none !important; }
  .msg-stack.back-drag > .msg-list { visibility: visible !important; }
}
@media (prefers-reduced-motion: reduce) {
  .msg-stack[data-view='convo'] > .msg-list { transform: none; }
  .info-drop.in, .info-drop.out { animation-duration: 1ms; }
}

/* ---- the viewer (chatMediaViewer.js), on the Photos viewer's black (.pv) ---- */
.pv.cmv { --cmv-dim: 1; background: rgba(0, 0, 0, var(--cmv-dim)); opacity: 0; transition: opacity 200ms cubic-bezier(.2, .9, .25, 1); }
.pv.cmv.cmv-on { opacity: 1; }
.pv.cmv.cmv-off { opacity: 0; transition-duration: 150ms; transition-timing-function: ease-in; }
.cmv .pv-media { transition: transform 200ms cubic-bezier(.2, .9, .25, 1); }
.cmv:not(.cmv-on) .pv-media { transform: scale(.96); }
.cmv-stage { touch-action: none; }
.cmv-bar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 22px;
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
.cmv-words { flex: 1; min-width: 0; text-align: center; }
.cmv-who { font-size: 14px; font-weight: 700; white-space: normal; overflow-wrap: break-word; }
.cmv-count { font-size: 12.5px; font-weight: 600; opacity: 0.75; margin-top: 1px; }
.cmv-count[hidden] { display: none; }
.cmv-btn {
  position: relative; flex: none; width: 44px; height: 44px; border-radius: 22px; padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.28); border-bottom-width: 3px;
  background: rgba(255, 255, 255, 0.12); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cmv-btn:active { transform: translateY(1.5px); border-bottom-width: 1.5px; }
.cmv-btn:hover { background: rgba(255, 255, 255, 0.2); }
.cmv-btn svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 40; }
/* The arrows on every screen, a finger's too (the Photos viewer hides them on touch). */
.cmv .cmv-nav { display: flex; width: 46px; height: 46px; border-radius: 23px; border: 1.5px solid rgba(255, 255, 255, 0.28); background: rgba(0, 0, 0, 0.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (hover: none) { .cmv .cmv-nav { display: flex; } }
.cmv .cmv-nav[hidden] { display: none; }
.cmv .cmv-nav.prev { left: 10px; }
.cmv .cmv-nav.next { right: 10px; }
.cmv .cmv-nav:hover { background: rgba(0, 0, 0, 0.55); }
.cmv-wait {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: min(280px, 70vw); height: min(280px, 50vh); border-radius: 18px;
  background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.75); font-size: 14px; font-weight: 600;
}
.cmv-wait svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 34; }
/* Words under the icon stay inside the tile, centred; Try again (a Claude chat's picture) under them. */
.cmv-wait.failed { text-align: center; padding: 0 20px; box-sizing: border-box; }
.cmv-retry { min-height: 40px; padding: 0 18px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.12); color: #fff; font: inherit; cursor: pointer; }
.cmv-retry:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cmv-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: #fff; animation: cmv-spin .8s linear infinite; }
@keyframes cmv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pv.cmv, .cmv .pv-media { transition: none; }
  .cmv:not(.cmv-on) .pv-media { transform: none; }
}

/* ---- swipe right to reply: the arrow the drag uncovers ----
   The wrapper (.mwrap) is what moves and carries --swipe; the arrow hangs
   off its bubble's left edge (styles.css aimed it at the bubble itself,
   which never wore .swipeable, so it never showed). */
.mwrap.swipeable > .mbox > .thread-bubble::before {
  content: '↩';
  position: absolute; left: -32px; top: 50%; transform: translateY(-50%) scale(calc(0.7 + 0.3 * var(--swipe, 0)));
  width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 800;
  opacity: var(--swipe, 0); pointer-events: none;
}
.mwrap.settling { transition: transform 180ms cubic-bezier(.2, .9, .3, 1); }