chats 0.1.1

data/app/assets/stylesheets/chats.css

@@ -0,0 +1,818 @@
+/*
+ * chats — bundled default styles.
+ *
+ * Self-contained on purpose: engine views can't lean on the host's CSS
+ * framework (a Tailwind host never scans gem view files, so utility classes
+ * used here would simply not exist in its build). Semantic chats-* classes +
+ * plain modern CSS work in ANY host with zero build integration.
+ *
+ * Theme with CSS variables (override in any host stylesheet):
+ *
+ *   :root {
+ *     --chats-accent: #facc15;          /\* brand color: own bubbles, send button *\/
+ *     --chats-accent-contrast: #111827; /\* text on top of the accent *\/
+ *   }
+ *
+ * Want a completely different look? `rails g chats:views` ejects the
+ * templates into your app — restyle them with your own framework and skip
+ * including this file (it's linked by the views via the chats_styles helper).
+ */
+
+:root {
+  --chats-accent: #111827;
+  --chats-accent-contrast: #ffffff;
+  --chats-bg: #ffffff;
+  --chats-surface: #f3f4f6;
+  --chats-border: rgba(0, 0, 0, 0.08);
+  --chats-text: #111827;
+  --chats-text-muted: #6b7280;
+  --chats-bubble-bg: #f3f4f6;
+  --chats-bubble-text: #111827;
+  --chats-radius: 1.1rem;
+  --chats-max-width: 42rem;
+}
+
+/* --- Shell ----------------------------------------------------------------- */
+
+.chats {
+  margin: 0 auto;
+  width: 100%;
+  max-width: var(--chats-max-width);
+  color: var(--chats-text);
+  background: var(--chats-bg);
+  display: flex;
+  flex-direction: column;
+  min-height: 100dvh;
+}
+
+/* --- Inbox ------------------------------------------------------------------ */
+
+.chats-inbox__header { padding: 1rem 1.25rem 0.25rem; }
+.chats-inbox__title { font-size: 1.6rem; font-weight: 800; margin: 0; }
+
+.chats-search { padding: 0.5rem 1.25rem; }
+.chats-search__input {
+  width: 100%;
+  padding: 0.6rem 0.9rem;
+  border-radius: 999px;
+  border: 1px solid var(--chats-border);
+  background: var(--chats-surface);
+  font: inherit;
+  outline-offset: 2px;
+}
+
+.chats-inbox__list { list-style: none; margin: 0; padding: 0.25rem 0 2rem; }
+
+.chats-row__link {
+  display: flex;
+  gap: 0.85rem;
+  align-items: center;
+  padding: 0.8rem 1.25rem;
+  text-decoration: none;
+  color: inherit;
+}
+.chats-row__link:hover { background: var(--chats-surface); }
+.chats-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
+.chats-row__top, .chats-row__bottom {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.chats-row__title {
+  font-weight: 650;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.chats-row__time { font-size: 0.75rem; color: var(--chats-text-muted); flex-shrink: 0; }
+.chats-row__subject {
+  font-size: 0.75rem;
+  color: var(--chats-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.chats-row__preview {
+  font-size: 0.875rem;
+  color: var(--chats-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.chats-row--unread .chats-row__title,
+.chats-row--unread .chats-row__preview { font-weight: 750; color: var(--chats-text); }
+
+.chats-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.35rem;
+  height: 1.35rem;
+  padding: 0 0.35rem;
+  border-radius: 999px;
+  background: var(--chats-accent);
+  color: var(--chats-accent-contrast);
+  font-size: 0.72rem;
+  font-weight: 800;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.chats-badge--floating[hidden] { display: none; }
+
+/* --- Empty states ------------------------------------------------------------ */
+
+.chats-empty { text-align: center; padding: 4rem 1.5rem; }
+.chats-empty__icon { font-size: 2.5rem; display: block; margin-bottom: 0.75rem; }
+.chats-empty__title { font-weight: 750; margin: 0 0 0.35rem; }
+.chats-empty__hint { color: var(--chats-text-muted); font-size: 0.9rem; margin: 0; }
+
+/* --- Avatars ------------------------------------------------------------------ */
+
+.chats-avatar {
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 999px;
+  object-fit: cover;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.chats-avatar--initials {
+  background: var(--chats-surface);
+  color: var(--chats-text-muted);
+  font-weight: 750;
+  font-size: 0.95rem;
+  user-select: none;
+}
+
+/* --- Thread -------------------------------------------------------------------- */
+
+.chats-thread {
+  height: 100dvh;
+  overflow: hidden;
+}
+
+.chats-thread__header {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  padding: 0.65rem 1rem;
+  border-bottom: 1px solid var(--chats-border);
+  background: var(--chats-bg);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  flex: 0 0 auto;
+}
+.chats-thread__header .chats-avatar { width: 2.4rem; height: 2.4rem; }
+.chats-thread__back {
+  font-size: 1.8rem;
+  line-height: 1;
+  text-decoration: none;
+  color: inherit;
+  padding: 0 0.35rem;
+}
+.chats-thread__identity { flex: 1; min-width: 0; }
+.chats-thread__title {
+  font-size: 1rem;
+  font-weight: 750;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.chats-thread__subject {
+  font-size: 0.75rem;
+  color: var(--chats-text-muted);
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chats-thread__scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  /* Keep the composer dock out of the scroll chain: the message pane is the
+     only scroll container, and boundary drags should not bubble into browser /
+     WebView pull-to-refresh. Sources:
+     https://developer.mozilla.org/docs/Web/CSS/min-height#values
+     https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior */
+  overscroll-behavior-y: contain;
+  padding: 1rem 1rem 0.5rem;
+  display: flex;
+  flex-direction: column;
+}
+.chats-thread__messages { display: flex; flex-direction: column; gap: 0; }
+.chats-day-separator {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  margin: 0.8rem 0;
+  color: var(--chats-text-muted);
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-align: center;
+}
+.chats-day-separator::before,
+.chats-day-separator::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--chats-border);
+}
+
+/* The «new messages» divider: same shape as the day separator but in the
+   accent color — it marks where the unread catch-up starts on thread open
+   (rendered server-side before the first unread bubble; see show.html.erb). */
+.chats-thread__unread-line {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  margin: 0.8rem 0;
+  color: var(--chats-text-muted);
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.chats-thread__unread-line::before,
+.chats-thread__unread-line::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: currentColor;
+  opacity: 0.4;
+}
+.chats-loader {
+  text-align: center;
+  color: var(--chats-text-muted);
+  font-size: 0.8rem;
+  padding: 0.5rem;
+}
+
+/* Paginated history loads inside (nested) turbo-frames, and a custom
+   element's default display:block strands those bubbles in a block context —
+   .chats-message--own aligns with align-self, which only works when the
+   bubble is a direct flex item of a column. Make each page frame its own
+   flex column mirroring the scroller. NOT display:contents: that removes
+   the frame's box, and Turbo's lazy loading watches the frame with an
+   IntersectionObserver — no box, no intersection, no fetch ("loading…"
+   forever). https://developer.mozilla.org/en-US/docs/Web/CSS/display#contents */
+turbo-frame[id^="chats_page_"] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* --- Bubbles --------------------------------------------------------------------- */
+
+.chats-message {
+  display: flex;
+  gap: 0.5rem;
+  align-items: flex-end;
+  max-width: 85%;
+  margin: 0.2rem 0 0;
+}
+.chats-message--continuation { margin-top: 0.15rem; }
+.chats-message__avatar { width: 1.9rem; height: 1.9rem; font-size: 0.7rem; }
+.chats-message__content { display: flex; flex-direction: column; min-width: 0; }
+.chats-message__bubble-row { display: flex; align-items: flex-end; gap: 0.5rem; }
+.chats-message__sender {
+  font-size: 0.72rem;
+  font-weight: 700;
+  color: var(--chats-text-muted);
+  margin: 0 0 0.1rem 2.4rem;
+}
+.chats-message--continuation .chats-message__sender { display: none; }
+.chats-message--followed .chats-message__avatar { visibility: hidden; }
+
+.chats-message__bubble {
+  background: var(--chats-bubble-bg);
+  color: var(--chats-bubble-text);
+  border-radius: var(--chats-radius);
+  border-bottom-left-radius: 0.3rem;
+  padding: 0.5rem 0.8rem;
+  overflow-wrap: anywhere;
+}
+/* pre-wrap: the body renders as plain escaped text, so every newline the
+   sender typed shows literally (chat semantics — simple_format used to
+   collapse consecutive blank lines into one paragraph break). */
+.chats-message__text {
+  margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.chats-message__meta {
+  display: flex;
+  justify-content: flex-end;
+  align-items: baseline;
+  gap: 0.3rem;
+  margin-top: 0.2rem;
+  font-size: 0.62rem;
+  color: var(--chats-text-muted);
+  user-select: none;
+}
+.chats-message__receipt {
+  display: inline-flex;
+  align-items: baseline;
+  white-space: nowrap;
+}
+.chats-message__receipt[data-state="seen"] {
+  letter-spacing: -0.3em;
+  padding-right: 0.3em;
+}
+.chats-message__receipt[hidden] { display: none; }
+.chats-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Own messages: flipped to the right, accent-colored. The chats--thread
+   controller adds .chats-message--own client-side (bubbles broadcast
+   viewer-agnostic — see _message.html.erb). */
+.chats-message--own { align-self: flex-end; flex-direction: row-reverse; }
+.chats-message--own .chats-message__bubble-row { flex-direction: row-reverse; }
+.chats-message--own .chats-message__avatar { display: none; }
+.chats-message--own .chats-message__sender { display: none; }
+.chats-message--own .chats-message__bubble {
+  background: var(--chats-accent);
+  color: var(--chats-accent-contrast);
+  border-bottom-left-radius: var(--chats-radius);
+  border-bottom-right-radius: 0.3rem;
+}
+.chats-message--own .chats-message__meta { color: var(--chats-accent-contrast); opacity: 0.75; }
+.chats-message--continuation .chats-message__bubble { border-top-left-radius: 0.35rem; }
+.chats-message--followed .chats-message__bubble { border-bottom-left-radius: var(--chats-radius); }
+.chats-message--own.chats-message--continuation .chats-message__bubble { border-top-right-radius: 0.35rem; }
+.chats-message--own.chats-message--followed .chats-message__bubble { border-bottom-right-radius: var(--chats-radius); }
+
+/* System + deleted */
+.chats-message--system { align-self: center; max-width: 100%; }
+.chats-message__system {
+  font-size: 0.78rem;
+  color: var(--chats-text-muted);
+  background: var(--chats-surface);
+  border-radius: 999px;
+  padding: 0.3rem 0.9rem;
+  text-align: center;
+  margin: 0.35rem auto;
+}
+.chats-message--deleted .chats-message__bubble { background: transparent; border: 1px dashed var(--chats-border); }
+.chats-message__tombstone { color: var(--chats-text-muted); font-size: 0.85rem; }
+
+/* --- Attachments -------------------------------------------------------------------- */
+
+.chats-message__attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  margin-top: 0.35rem;
+}
+.chats-message__image {
+  max-width: 14rem;
+  max-height: 14rem;
+  border-radius: 0.75rem;
+  display: block;
+}
+.chats-message__image-link { cursor: zoom-in; }
+.chats-message__file { font-size: 0.85rem; }
+
+.chats-attachment-preview {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: rgba(0, 0, 0, 0.82);
+}
+.chats-attachment-preview[hidden] { display: none; }
+.chats-attachment-preview-open { overflow: hidden; }
+.chats-attachment-preview__surface {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
+  background: rgba(0, 0, 0, 0.82);
+}
+.chats-attachment-preview__figure { margin: 0; max-width: 100%; max-height: 100%; }
+.chats-attachment-preview__image {
+  display: block;
+  max-width: 100%;
+  max-height: calc(100dvh - 5rem);
+  object-fit: contain;
+  border-radius: 0.5rem;
+}
+.chats-attachment-preview__close {
+  position: absolute;
+  top: max(0.75rem, env(safe-area-inset-top));
+  right: 0.75rem;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.16);
+  color: #ffffff;
+  font: inherit;
+  font-size: 1.75rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+/* --- Reactions ----------------------------------------------------------------------- */
+
+.chats-message__reactions { display: flex; gap: 0.25rem; margin: 0.2rem 0 0 0.5rem; flex-wrap: wrap; }
+.chats-message--own .chats-message__reactions { justify-content: flex-end; margin-right: 0.5rem; }
+.chats-reaction {
+  border: 1px solid var(--chats-border);
+  background: var(--chats-bg);
+  border-radius: 999px;
+  font-size: 0.8rem;
+  padding: 0.1rem 0.5rem;
+  cursor: pointer;
+  display: inline-flex;
+  gap: 0.25rem;
+  align-items: center;
+}
+.chats-reaction__count { font-size: 0.7rem; font-weight: 700; color: var(--chats-text-muted); }
+
+/* --- Long-press popup (Telegram-style) ------------------------------------------------ */
+/*
+   Long-press / right-click a bubble: its clone morphs to the center over a
+   blurred glass backdrop, the reactions pill above, the contextual menu
+   below. Markup lives in conversations/show (the slots) + each bubble's
+   <template data-chats-message-menu> (the content); the chats--thread
+   controller does the FLIP transform dance.
+*/
+
+.chats-message--lifted { visibility: hidden; }
+
+/* Long-press must read as a GESTURE on touch: without this, iOS Safari
+   starts the selection loupe / callout mid-press and the popup never
+   opens cleanly. Desktop keeps normal selection; on coarse pointers the
+   popup menu’  Copy replaces it. (The native shells already suppress
+   callouts globally; this covers the mobile WEB thread.) */
+@media (pointer: coarse) {
+  .chats-message {
+    user-select: none;
+    -webkit-user-select: none;
+    -webkit-touch-callout: none;
+  }
+}
+
+.chats-popup {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+}
+.chats-popup[hidden] { display: none; }
+.chats-popup__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.3);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  opacity: 0;
+  transition: opacity 180ms ease;
+  will-change: opacity;
+}
+.chats-popup--open .chats-popup__backdrop { opacity: 1; }
+
+.chats-popup__stack {
+  /* Anchored to the pressed bubble's SIDE by the controller (inline
+     left/right) — never dragged to the horizontal center. Vertically
+     centered; the FLIP morph on the clone covers the y-travel. */
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.6rem;
+  max-height: 92dvh;
+}
+.chats-popup__stack--own { align-items: flex-end; }
+.chats-popup__slot--bubble { max-width: 100%; }
+.chats-popup__bubble {
+  /* Long messages scroll inside the lifted clone instead of pushing the
+     pill/menu off-screen (Telegram does the same). */
+  max-height: 45dvh;
+  overflow-y: auto;
+}
+.chats-popup__bubble {
+  /* No background/radius/overflow of its own: the clone IS the bubble, at
+     its original width — wrapping it in a styled box reads as a different
+     element. drop-shadow (not box-shadow) hugs the bubble's real shape. */
+  transition: transform 260ms cubic-bezier(0.32, 0.72, 0.18, 1);
+  will-change: transform;
+  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.28));
+}
+
+.chats-popup__slot--reactions,
+.chats-popup__slot--menu {
+  opacity: 0;
+  transform: scale(0.92);
+  transition: opacity 180ms ease 60ms, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1) 60ms;
+}
+.chats-popup--open .chats-popup__slot--reactions,
+.chats-popup--open .chats-popup__slot--menu { opacity: 1; transform: scale(1); }
+
+.chats-popup__reactions {
+  display: flex;
+  gap: 0.15rem;
+  background: var(--chats-bg);
+  border-radius: 999px;
+  padding: 0.3rem 0.45rem;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
+}
+.chats-popup__reactions form { display: inline; }
+.chats-popup__reaction,
+.chats-reaction {
+  /* Emoji-FIRST family: iOS WKWebView per-glyph fallback through webfont
+     stacks can dead-end at LastResort (the boxed "?") for VS16/ZWJ emoji;
+     leading with the emoji fonts sidesteps it. Digits (reaction counts)
+     fall through to sans-serif — Apple Color Emoji maps none. */
+  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
+}
+.chats-popup__reaction {
+  font-size: 1.35rem;
+  line-height: 1;
+  background: none;
+  border: none;
+  padding: 0.25rem;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: transform 120ms ease;
+}
+.chats-popup__reaction:hover { transform: scale(1.25); }
+
+.chats-popup__menu {
+  display: flex;
+  flex-direction: column;
+  min-width: 13rem;
+  background: var(--chats-bg);
+  border-radius: 1rem;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
+  overflow: hidden;
+  padding: 0.25rem;
+}
+.chats-popup__menu form { display: contents; }
+.chats-popup__item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  font: inherit;
+  font-size: 0.9rem;
+  color: var(--chats-text);
+  background: none;
+  border: none;
+  border-radius: 0.6rem;
+  padding: 0.55rem 0.8rem;
+  cursor: pointer;
+  text-decoration: none;
+}
+.chats-popup__item:hover { background: var(--chats-surface); }
+.chats-popup__item--danger { color: #dc2626; }
+
+/* --- Seen + typing --------------------------------------------------------------------- */
+
+.chats-seen {
+  align-self: flex-end;
+  font-size: 0.68rem;
+  color: var(--chats-text-muted);
+  margin: 0.1rem 0.5rem 0.2rem;
+}
+.chats-typing {
+  font-size: 0.8rem;
+  color: var(--chats-text-muted);
+  font-style: italic;
+  padding: 0.4rem 0.5rem;
+}
+
+/* --- Composer ----------------------------------------------------------------------------- */
+
+.chats-composer {
+  flex: 0 0 auto;
+  background: var(--chats-bg);
+  border-top: 1px solid var(--chats-border);
+  padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
+}
+.chats-composer__bar { display: flex; align-items: flex-end; gap: 0.55rem; }
+.chats-composer__input {
+  flex: 1;
+  resize: none;
+  border: 1px solid var(--chats-border);
+  background: var(--chats-surface);
+  border-radius: 1.25rem;
+  padding: 0.55rem 0.9rem;
+  font: inherit;
+  line-height: 1.35;
+  max-height: 10rem;
+  outline: none;
+}
+.chats-composer__input:focus { outline: none; }
+.chats-composer__send {
+  width: 2.6rem;
+  height: 2.6rem;
+  border-radius: 999px;
+  border: none;
+  background: var(--chats-accent);
+  color: var(--chats-accent-contrast);
+  font-size: 1.05rem;
+  cursor: pointer;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.chats-composer__send:hover { filter: brightness(0.92); }
+.chats-composer__attach {
+  cursor: pointer;
+  font-size: 1.2rem;
+  padding-bottom: 0.45rem;
+  position: relative;
+}
+.chats-composer__file-count {
+  position: absolute;
+  top: -0.3rem;
+  right: -0.5rem;
+  background: var(--chats-accent);
+  color: var(--chats-accent-contrast);
+  border-radius: 999px;
+  font-size: 0.62rem;
+  font-weight: 800;
+  min-width: 1rem;
+  height: 1rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.chats-composer__error {
+  color: #dc2626;
+  font-size: 0.8rem;
+  margin: 0 0 0.4rem;
+}
+
+/* Selected-attachment previews (rendered by the composer controller). */
+.chats-composer__previews {
+  display: flex;
+  gap: 0.5rem;
+  overflow-x: auto;
+  padding: 0.25rem 0.25rem 0.6rem;
+}
+
+/* The edit cue (Telegram's flow): a quote-style bar over the input — left
+   accent border, bold label, the original message trimmed to one line. */
+.chats-composer__edit {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  margin: 0 0.25rem 0.45rem;
+  padding: 0.3rem 0.6rem;
+  border-left: 3px solid var(--chats-accent);
+  background: var(--chats-surface);
+  border-radius: 0.45rem;
+}
+.chats-composer__edit-quote { min-width: 0; flex: 1; display: flex; flex-direction: column; }
+.chats-composer__edit-label { font-size: 0.72rem; font-weight: 700; color: var(--chats-accent); }
+.chats-composer__edit-preview {
+  font-size: 0.8rem;
+  color: var(--chats-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.chats-composer__edit-cancel {
+  border: none;
+  background: none;
+  font-size: 1.1rem;
+  line-height: 1;
+  color: var(--chats-text-muted);
+  cursor: pointer;
+  padding: 0.2rem 0.4rem;
+}
+
+.chats-composer__previews[hidden] { display: none; }
+.chats-composer__preview {
+  position: relative;
+  flex-shrink: 0;
+}
+.chats-composer__preview-image {
+  height: 4.5rem;
+  width: 4.5rem;
+  border-radius: 0.75rem;
+  object-fit: cover;
+  border: 1px solid var(--chats-border);
+}
+.chats-composer__preview-name {
+  display: inline-flex;
+  align-items: center;
+  height: 4.5rem;
+  max-width: 10rem;
+  padding: 0 0.75rem;
+  border-radius: 0.75rem;
+  border: 1px solid var(--chats-border);
+  background: var(--chats-surface);
+  font-size: 0.75rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.chats-composer__preview-remove {
+  position: absolute;
+  top: -0.4rem;
+  right: -0.4rem;
+  width: 1.3rem;
+  height: 1.3rem;
+  border-radius: 999px;
+  border: none;
+  background: var(--chats-text);
+  color: var(--chats-bg);
+  font-size: 0.7rem;
+  line-height: 1;
+  cursor: pointer;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+}
+
+/* --- Menus (⋯ and emoji picker) ----------------------------------------------------------------- */
+
+.chats-menu { position: relative; }
+.chats-menu__trigger {
+  cursor: pointer;
+  list-style: none;
+  padding: 0.2rem 0.5rem;
+  border-radius: 0.5rem;
+}
+.chats-menu__trigger::-webkit-details-marker,
+.chats-menu__trigger:hover { background: var(--chats-surface); }
+.chats-menu__panel {
+  position: absolute;
+  right: 0;
+  top: 100%;
+  background: var(--chats-bg);
+  border: 1px solid var(--chats-border);
+  border-radius: 0.75rem;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  padding: 0.3rem;
+  z-index: 20;
+  min-width: 9rem;
+}
+.chats-menu__panel--emoji {
+  display: flex;
+  gap: 0.15rem;
+  min-width: 0;
+  left: 0;
+  right: auto;
+  bottom: 100%;
+  top: auto;
+}
+.chats-message--own .chats-menu__panel--emoji { left: auto; right: 0; }
+.chats-menu__item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  font: inherit;
+  font-size: 0.85rem;
+  padding: 0.45rem 0.7rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+}
+.chats-menu__item:hover { background: var(--chats-surface); }
+.chats-menu__item--danger { color: #dc2626; }
+.chats-emoji {
+  background: none;
+  border: none;
+  font-size: 1.1rem;
+  padding: 0.25rem;
+  cursor: pointer;
+  border-radius: 0.5rem;
+}
+.chats-emoji:hover { background: var(--chats-surface); }