/* Messages (public/screens/messages.js). Built on the shared tokens and components (public/ui/);
   the age skins change sizes, not the layout. */

.m-art { display: inline-grid; place-items: center; flex: none; }
.m-art > svg { display: block; width: 100%; height: 100%; }
.m-stack { --av: 32px; }
.m-when { font-size: var(--text-xs); color: var(--ink-faint); }
.m-starts { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.m-starts > .ui-btn { flex: 1 1 160px; }
.m-hiddenlink { padding: 0 var(--space-3); }
.m-listbox { display: grid; gap: var(--space-5); }

/* Little ones: their people, big */
.m-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr)); gap: var(--space-3); }
.m-person {
  position: relative; display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-3);
  border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  color: inherit; text-decoration: none; font: var(--weight-strong) var(--text-lg)/1.2 var(--font-display);
  transition: transform var(--dur-fast) var(--press-ease);
}
.m-person:active { transform: scale(var(--press-scale)); }
.m-person-badge { position: absolute; top: 8px; right: 8px; }

/* New group: pick people */
.m-picks { padding: 0 var(--space-3); }
.m-pick { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap); padding: var(--row-pad) var(--space-1); cursor: pointer; }
.m-pick + .m-pick { border-top: 1px solid var(--line); }
.m-pick input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }

/* One chat */
.m-convo { display: grid; gap: var(--space-2); min-height: calc(100dvh - var(--appbar-h) - 2 * var(--space-4)); grid-template-rows: auto 1fr auto auto; }
.m-strip { display: flex; align-items: center; gap: var(--space-2); }
.m-strip-who { display: flex; align-items: center; gap: var(--space-2); }
.m-helpbtn { border-color: color-mix(in srgb, var(--info) 45%, var(--line)); color: var(--info-text, var(--info)); }
.m-helpbtn .ui-icon { color: var(--info-text, var(--info)); }

.m-thread { display: flex; flex-direction: column; gap: var(--space-2); align-content: end; justify-content: flex-end; padding-bottom: var(--space-2); }
.m-thread > .ui-btn { align-self: center; }
.m-empty { text-align: center; padding: var(--space-6) 0; }
.m-day { display: flex; justify-content: center; margin: var(--space-2) 0; }
.m-day > span { font-size: var(--text-xs); font-weight: var(--weight-strong); color: var(--ink-muted); background: var(--surface-sunken); border-radius: var(--radius-full); padding: 2px 10px; }

.m-msg { display: flex; align-items: flex-end; gap: var(--space-2); max-width: 100%; }
.m-msg.is-mine { justify-content: flex-end; }
.m-col { display: grid; gap: 2px; max-width: min(78%, 520px); justify-items: start; }
.m-msg.is-mine .m-col { justify-items: end; }
.m-name { font-size: var(--text-xs); font-weight: var(--weight-strong); color: var(--ink-muted); padding: 0 var(--space-2); }
.m-bubble {
  padding: 9px 14px; border-radius: 20px 20px 20px 6px; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); font-size: var(--text-md); line-height: 1.4; box-shadow: var(--shadow-1);
  overflow-wrap: anywhere; white-space: pre-wrap; cursor: default;
}
.m-bubble[role="button"] { cursor: pointer; }
.m-bubble:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.m-msg.is-mine .m-bubble { background: var(--accent); color: var(--accent-ink); border-color: transparent; border-radius: 20px 20px 6px 20px; }
.m-bubble.is-sticker { background: transparent; border: 0; box-shadow: none; padding: 0; }
.m-msg.is-mine .m-bubble.is-sticker { background: transparent; }
.m-bubble.is-deleted, .m-msg.is-mine .m-bubble.is-deleted { background: transparent; color: var(--ink-muted); border: 1px dashed var(--line-strong); box-shadow: none; }
.m-phrase { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-strong); }
.m-time { font-size: 12px; color: var(--ink-faint); padding: 0 var(--space-2); }
.m-reacts { display: inline-flex; gap: 4px; margin-top: -8px; position: relative; }
.m-react { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-full); font-size: 12px; font-weight: var(--weight-strong); }
.m-typing { min-height: 1.4em; margin: 0; font-size: var(--text-sm); }

/* The send box stays at the bottom of the screen */
.m-composer {
  position: sticky; bottom: 0; z-index: 2; display: grid; gap: var(--space-2);
  margin: 0 calc(-1 * var(--space-4)); padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line);
}
.m-compose-row { display: flex; align-items: flex-end; gap: var(--space-2); }
/* [storeready] 200% zoom (a phone about 188px wide): the send box gets its own line, the buttons go
   under it, so the chat never scrolls sideways. */
/* [storeready] Phones: the page's side margin is smaller there (components.css), so the bar matches it
   (it was 8px wider than the screen). */
@media (max-width: 480px) { .m-composer { margin-inline: calc(-1 * var(--space-3)); padding-inline: var(--space-3); } }
@media (max-width: 340px) {
  .m-compose-row { flex-wrap: wrap; }
  .m-compose-row textarea.m-box { flex: 1 1 100%; order: -1; }
  .m-compose-row .m-send { margin-left: auto; }
  .m-strip { flex-wrap: wrap; }
}
textarea.m-box { flex: 1; min-width: 0; resize: none; min-height: var(--tap); max-height: 160px; line-height: 1.35; padding-top: 10px; padding-bottom: 10px; }
.m-send { background: var(--accent); color: var(--accent-ink); flex: none; }
.m-send[aria-busy="true"] { opacity: 0.6; }
.m-tool { flex: none; }
.m-talk.is-on { background: var(--danger-soft); color: var(--danger-text); }

.m-phrases, .m-stickers-row { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.m-phrase-btn {
  flex: none; display: grid; justify-items: center; gap: 4px; width: 104px; min-height: 96px; padding: var(--space-2);
  border-radius: var(--radius-md); border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
  font: var(--weight-strong) var(--text-sm)/1.15 var(--font-body); text-align: center;
  transition: transform var(--dur-fast) var(--press-ease);
}
.m-phrase-btn:active, .m-sticker-btn:active { transform: scale(var(--press-scale)); }
.m-sticker-btn { flex: none; display: grid; place-items: center; min-width: var(--tap); min-height: var(--tap); padding: 6px; border: 0; border-radius: var(--radius-md); background: var(--surface-sunken); cursor: pointer; }
.m-stickergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--space-2); }
.m-reactpick { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.m-reactbtn { display: grid; place-items: center; width: 60px; height: 60px; border-radius: var(--radius-md); border: 2px solid transparent; background: var(--surface-sunken); cursor: pointer; }
.m-reactbtn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }

/* Little ones: bigger bubbles and buttons */
.m-convo.is-little .m-bubble { font-size: var(--text-lg); padding: 12px 18px; }
.m-convo.is-little textarea.m-box { font-size: var(--text-lg); }
.m-convo.is-little .m-helpbtn { font-size: var(--text-md); }

/* Guardian read-only view */
.m-thread--readonly { padding: var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-lg); }

@media (prefers-reduced-motion: reduce) {
  .m-person, .m-phrase-btn, .m-sticker-btn { transition: none; }
}

/* Group members: plain lines about the group, the paused bar, the people button */
.m-sys { align-self: center; max-width: 90%; margin: var(--space-1) 0; padding: 4px 12px; border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--ink-muted); font-size: var(--text-sm); text-align: center; overflow-wrap: anywhere; }
.m-paused { display: grid; gap: var(--space-2); padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); }
.m-fix { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.m-strip-btn { border: 0; background: none; padding: 4px 8px 4px 0; margin: -4px 0; min-height: var(--tap); color: inherit; font: inherit; cursor: pointer; border-radius: var(--radius-md); }
.m-strip-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.m-entry-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-text); flex: none; }

/* Pictures (photos and drawings) */
.m-bubble.is-picture { padding: 4px; }
.m-msg.is-mine .m-bubble.is-picture { padding: 4px; }
.m-pic { display: grid; gap: 4px; }
.m-pic-img { display: block; width: min(260px, 62vw); height: auto; max-height: 360px; object-fit: cover; border-radius: 16px; background: var(--surface-sunken); cursor: zoom-in; }
.m-pic-cap { padding: 2px 10px 6px; }
.m-waiting { padding: 4px; opacity: 0.75; }
.m-waiting .m-pic-cap .ui-icon { width: 16px; height: 16px; vertical-align: -3px; }
.m-waiting.is-rejected, .m-msg.is-mine .m-bubble.m-waiting.is-rejected { opacity: 1; background: transparent; color: var(--ink-muted); border: 1px dashed var(--line-strong); }
.m-waiting .m-pic-img { cursor: default; filter: saturate(0.6); }
.m-wait-note { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: var(--weight-strong); color: var(--ink-muted); padding: 0 var(--space-2); }
.m-wait-note .ui-icon { width: 14px; height: 14px; }
.m-wait-note.is-rejected { color: var(--danger-text); }
.m-picsheet .m-pic-big { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain; border-radius: var(--radius-md); background: var(--surface-sunken); }
.m-pic-options { display: grid; gap: var(--space-2); }

/* Drawing pad */
.m-pad { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-md); touch-action: none; cursor: crosshair; }
.m-pad-colors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-2); }
.m-swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line-strong); cursor: pointer; }
.m-swatch[aria-checked="true"] { outline: 3px solid var(--focus); outline-offset: 2px; }
.m-pad-tools { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }

/* Notebook page picker */
.m-nb-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; background: #fff; }
.m-nb-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.m-nb-page { display: grid; gap: 4px; justify-items: center; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: inherit; font: inherit; font-size: var(--text-sm); cursor: pointer; }
.m-nb-page img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: #fff; }

/* Review: Approve pictures */
.m-review { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .m-review { grid-template-columns: 200px minmax(0, 1fr); align-items: start; } }
.m-review-pic { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-md); overflow: hidden; }
.m-review-pic img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; background: var(--surface-sunken); }
.m-review-who { margin: 0; overflow-wrap: anywhere; }
.m-review-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.m-review-actions > .ui-btn { flex: 1 1 140px; }
.m-review-gone { display: grid; place-items: center; min-height: 80px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); font-size: var(--text-sm); }
.m-recent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); gap: var(--space-3); }
.m-recent { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.m-recent .m-review-pic img { aspect-ratio: 1; object-fit: cover; }

/* [landscape] A phone on its side (wide and short), where the keyboard can leave very little height:
   the chat fits the screen, the box to write in stays stuck to the bottom (sticky, above), and pictures
   and the drawing pad are sized by the height so they never push it away. */
@media (orientation: landscape) and (max-height: 500px) {
  .ui-main:has(> .m-convo) { padding-bottom: 0; }
  .m-convo { min-height: calc(100vh - var(--appbar-h) - var(--space-3)); min-height: calc(100dvh - var(--appbar-h) - env(safe-area-inset-top, 0px) - var(--space-3)); }
  .m-composer { gap: var(--space-1); }
  textarea.m-box { max-height: 30vh; max-height: 30dvh; }
  .m-phrase-btn { min-height: 64px; width: 96px; }
  /* Typing (the keyboard is up): the quick phrases and stickers step aside so the box stays in view. */
  .m-composer:has(textarea.m-box:focus) :is(.m-phrases, .m-stickers-row) { display: none; }
  .m-pic-img { max-height: 60vh; width: auto; max-width: min(260px, 40vw); }
  .m-picsheet .m-pic-big { max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); }
  .m-pad { width: auto; max-width: 100%; height: max(140px, calc(100vh - 200px)); height: max(140px, calc(100dvh - 200px)); margin-inline: auto; }
}