/* The text chat (public/chat.js): the Chat tab, the thread, the composer and
   the call chat. Loaded after account-ui.css; colours are the theme tokens.
   2.45.0: the thread reads like Telegram: a patterned wall, bubbles with a
   tail, grouped messages, the time inside the bubble, sticky days, a reply
   strip, photo/clip/file bubbles, a waveform for voice, round video notes,
   hold-to-record. The interfaces (next.css, modern-engine.css) only retune
   the --chat-* tokens below. */

/* --- Tokens --------------------------------------------------------------- */
.chat-thread {
    --chat-wall: #dfe7f1;
    --chat-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none' stroke='%231e3a5f' stroke-opacity='.075' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='28' cy='32' r='7'/%3E%3Cpath d='M118 44c-4-6-13-2-9 5l9 9 9-9c4-7-5-11-9-5z'/%3E%3Cpath d='M30 130l26-11-9 22-5-8z'/%3E%3Cpath d='M136 126v18M127 135h18'/%3E%3Ccircle cx='88' cy='84' r='3'/%3E%3Cpath d='M62 24c3 4 9 4 12 0'/%3E%3Cpath d='M150 78a7 7 0 1 0 .1 0'/%3E%3Cpath d='M86 150h3v-16l9-3v15'/%3E%3C/svg%3E");
    --chat-in: #ffffff; --chat-in-text: var(--text);
    --chat-out: #d9f5c4; --chat-out-text: #0f2314;
    --chat-out-meta: #5f9b5b; --chat-out-read: #3d8f4b;
    --chat-in-meta: #8a94a6;
    --chat-accent: var(--primary, #2563eb);
    --chat-day-bg: rgba(31, 41, 55, 0.42); --chat-day-text: #fff;
    --chat-bubble-shadow: 0 1px 1px rgba(15, 23, 42, 0.14);
    --chat-quote-bar: var(--chat-accent);
    --chat-media-radius: 14px;
    --chat-pop: 220ms;
}
[data-theme="graphite"] .chat-thread {
    --chat-wall: #0f1725;
    --chat-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='28' cy='32' r='7'/%3E%3Cpath d='M118 44c-4-6-13-2-9 5l9 9 9-9c4-7-5-11-9-5z'/%3E%3Cpath d='M30 130l26-11-9 22-5-8z'/%3E%3Cpath d='M136 126v18M127 135h18'/%3E%3Ccircle cx='88' cy='84' r='3'/%3E%3Cpath d='M62 24c3 4 9 4 12 0'/%3E%3Cpath d='M150 78a7 7 0 1 0 .1 0'/%3E%3Cpath d='M86 150h3v-16l9-3v15'/%3E%3C/svg%3E");
    --chat-in: #1f2a3d; --chat-in-text: #eef2f8;
    --chat-out: #2b5278; --chat-out-text: #f1f5fc;
    --chat-out-meta: #9fc3e6; --chat-out-read: #7fd3ff;
    --chat-in-meta: #93a0b5;
    --chat-day-bg: rgba(0, 0, 0, 0.45);
    --chat-bubble-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
[data-theme="minimal"] .chat-thread {
    --chat-wall: #eef0f3;
    --chat-in: #ffffff; --chat-out: #e4e8ee; --chat-out-text: #111821;
    --chat-out-meta: #6b7482; --chat-out-read: #202a37;
    --chat-accent: #202a37; --chat-day-bg: rgba(32, 42, 55, 0.5);
    --chat-media-radius: 8px;
}

/* --- Conversations ------------------------------------------------------- */
.chat-card { display:flex; flex-direction:column; min-height:0; }
.chat-threads { display:flex; flex-direction:column; gap:8px; }
.chat-thread-row { display:flex; align-items:center; gap:12px; width:100%; min-height:64px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-strong); color:var(--text); text-align:left; cursor:pointer; font:inherit; }
.chat-thread-row:hover { background:var(--primary-soft); }
.chat-thread-row.is-unread .chat-thread-name, .chat-thread-row.is-unread .chat-thread-preview { font-weight:700; color:var(--text); }
.chat-thread-copy { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.chat-thread-top, .chat-thread-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
.chat-thread-name { font-weight:600; font-size:var(--fs-md); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.chat-thread-time { flex:0 0 auto; font-size:var(--fs-xs); color:var(--muted); font-variant-numeric:tabular-nums; }
.chat-thread-preview { font-size:var(--fs-sm); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.chat-unread-badge { flex:0 0 auto; display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--danger); color:#fff; font-size:11px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.chat-avatar { position:relative; flex:0 0 44px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary-strong); font-weight:700; font-size:var(--fs-sm); background-size:cover; background-position:center; overflow:hidden; }
.chat-avatar.has-photo { color:transparent; }
/* Callixy Support (2.45.0): the logo fills the same circle as every avatar, inside a fine gold ring; the Safe box keeps its lock. */
.chat-avatar.is-support { background:#fff; padding:0; box-shadow:0 0 0 1.5px #d4af37, 0 0 0 3.5px rgba(212, 175, 55, 0.22), inset 0 0 0 1px rgba(212, 175, 55, 0.35); }
.chat-avatar.is-support img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.chat-avatar.is-safe { background:#0f766e; color:#fff; }
/* The verified rosette: blue, a soft glow, and every few seconds a sheen passes over it. */
.chat-verified { position:relative; display:inline-grid; place-items:center; width:16px; height:16px; margin-inline-start:5px; vertical-align:-2px; border-radius:50%; overflow:hidden; filter:drop-shadow(0 1px 2px rgba(21, 101, 224, 0.35)); flex:0 0 auto; }
.chat-verified svg { display:block; }
.chat-verified::after { content:''; position:absolute; top:-30%; left:-80%; width:45%; height:160%; background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%); transform:translateX(0) rotate(12deg); animation:chat-verified-shine 4.6s ease-in-out infinite; pointer-events:none; }
@keyframes chat-verified-shine { 0%, 72% { transform:translateX(0) rotate(12deg); } 92%, 100% { transform:translateX(420%) rotate(12deg); } }

/* --- The thread ----------------------------------------------------------- */
.chat-thread { display:flex; flex-direction:column; min-height:0; height:100%; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--surface); overflow:hidden; position:relative; }
/* 2.46.0: only the list gives up room. The emoji panel, the strips and the
   composer keep their height however long the conversation is (the panel
   was squeezed to a single row of a long one). */
.chat-thread > :not(.chat-messages) { flex-shrink:0; }
#tabChat { display:none; }
#tabChat.active { display:flex; flex-direction:column; min-height:0; }
#chatThreadHost { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
#chatThreadHost .chat-thread { height:calc(var(--app-vh, 100dvh) - 190px); min-height:320px; }
.chat-thread-head { display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid var(--border); background:var(--surface-strong); position:relative; z-index:3; }
.chat-thread-head .icon-button { flex:0 0 44px; width:44px; height:44px; min-height:44px; padding:0; display:grid; place-items:center; border-radius:var(--radius-sm); --clx-icon-size:26px; }
.chat-thread-head .icon-button.has-3d::before { margin:0; }
.chat-peer { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:10px; }
.chat-peer .chat-avatar { flex-basis:38px; width:38px; height:38px; }
.chat-peer-copy { min-width:0; }
.chat-peer-name { font-weight:700; font-size:var(--fs-md); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; }
.chat-peer-status { font-size:var(--fs-xs); color:var(--muted); font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:5px; min-height:16px; }
.chat-peer-status.is-typing { color:var(--chat-accent, var(--primary-strong)); }
/* "typing" and its dots after it (2.47.0) */
.chat-peer-status.is-typing { gap:2px; }
.chat-typing-dots { display:inline-flex; gap:2px; align-items:flex-end; height:10px; padding-bottom:1px; }
.chat-typing-dots i { width:3.5px; height:3.5px; border-radius:50%; background:currentColor; animation:chat-typing 1.2s ease-in-out infinite; }
.chat-typing-dots i:nth-child(2) { animation-delay:.15s; }
.chat-typing-dots i:nth-child(3) { animation-delay:.3s; }
@keyframes chat-typing { 0%, 60%, 100% { transform:translateY(0); opacity:.45; } 30% { transform:translateY(-3px); opacity:1; } }

/* The wall: a quiet colour with a drawn pattern, the messages over it. */
/* The reply arrow of a swipe is drawn only while a bubble moves (2.46.0), inside the room the bubble left. */
.chat-messages { flex:1 1 0; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding:10px 10px 12px; display:flex; flex-direction:column; gap:2px; background-color:var(--chat-wall); background-image:var(--chat-pattern); background-size:180px 180px; position:relative; }
.chat-day { position:sticky; top:4px; z-index:2; align-self:center; margin:8px 0 6px; padding:4px 11px; border-radius:999px; background:var(--chat-day-bg); color:var(--chat-day-text); font-size:12px; font-weight:600; letter-spacing:.01em; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.chat-empty { margin:auto; color:var(--text); font-size:var(--fs-sm); text-align:center; padding:12px 18px; background:var(--chat-day-bg); color:#fff; border-radius:14px; max-width:260px; }
.chat-load-more { align-self:center; min-height:40px; padding:0 16px; margin-bottom:6px; font-size:var(--fs-sm); }

/* A message: the bubble, its tail, the floating ⋯ for a mouse. */
.chat-msg { position:relative; display:flex; align-items:flex-end; gap:4px; max-width:min(82%, 560px); touch-action:pan-y; transition:transform .18s ease-out; }
.chat-msg.is-swiping { transition:none; }
.chat-msg.is-own { align-self:flex-end; flex-direction:row-reverse; }
.chat-msg.is-peer { align-self:flex-start; }
.chat-msg.is-first, .chat-msg.is-single { margin-top:6px; }
.chat-msg::before { content:''; position:absolute; top:50%; width:30px; height:30px; margin-top:-15px; border-radius:50%; background:var(--chat-day-bg); color:#fff; opacity:0; transform:scale(.6); transition:opacity .15s, transform .15s; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17H6a4 4 0 0 1 0-8h12'/%3E%3Cpath d='m14 5 4 4-4 4'/%3E%3C/svg%3E"); background-size:18px; background-position:center; background-repeat:no-repeat; pointer-events:none; }
.chat-msg:not(.is-swiping):not(.will-reply)::before { display:none; }
.chat-msg.is-own::before { right:-40px; }
.chat-msg.is-peer::before { left:-40px; transform:scale(.6) scaleX(-1); }
/* A tap is the menu, a double tap a reaction (2.46.0): no text selection or callout under a finger. */
.chat-msg { -webkit-tap-highlight-color:transparent; }
@media (pointer: coarse) { .chat-bubble { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; } }
/* the message a tapped reply quote goes to lights up */
.chat-msg.is-flash .chat-bubble { animation:chat-flash 1.6s ease-out; }
@keyframes chat-flash { 0%, 35% { box-shadow:0 0 0 3px var(--chat-accent), 0 6px 20px rgba(15, 23, 42, 0.25); transform:scale(1.02); } 100% { box-shadow:var(--chat-bubble-shadow); transform:none; } }
.chat-msg.is-swiping::before { opacity:.7; }
.chat-msg.will-reply::before { opacity:1; transform:scale(1); }
.chat-msg.is-peer.will-reply::before { transform:scale(1) scaleX(-1); }
/* flow-root: the bubble holds its floated time (under a caption it hung out of the bubble). */
.chat-bubble { display:flow-root; position:relative; padding:6px 10px 6px; border-radius:18px; background:var(--chat-in); color:var(--chat-in-text); font-size:var(--fs-md); line-height:1.4; word-break:break-word; overflow-wrap:anywhere; box-shadow:var(--chat-bubble-shadow); max-width:100%; min-width:0; }
.chat-msg.is-own .chat-bubble { background:var(--chat-out); color:var(--chat-out-text); }
/* corners: full where a group starts and ends, tight toward the sender in between */
.chat-msg.is-own.is-first .chat-bubble { border-bottom-right-radius:6px; }
.chat-msg.is-own.is-middle .chat-bubble { border-top-right-radius:6px; border-bottom-right-radius:6px; }
.chat-msg.is-own.is-last .chat-bubble { border-top-right-radius:6px; border-bottom-right-radius:4px; }
.chat-msg.is-own.is-single .chat-bubble { border-bottom-right-radius:4px; }
.chat-msg.is-peer.is-first .chat-bubble { border-bottom-left-radius:6px; }
.chat-msg.is-peer.is-middle .chat-bubble { border-top-left-radius:6px; border-bottom-left-radius:6px; }
.chat-msg.is-peer.is-last .chat-bubble { border-top-left-radius:6px; border-bottom-left-radius:4px; }
.chat-msg.is-peer.is-single .chat-bubble { border-bottom-left-radius:4px; }
/* the tail, the bubble's own colour, on the last bubble of a group */
.chat-msg.is-last .chat-bubble::after, .chat-msg.is-single .chat-bubble::after { content:''; position:absolute; bottom:0; width:11px; height:14px; background:inherit; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath d='M0 0v14h11C5.6 13.1 1.9 8.6 0 0z'/%3E%3C/svg%3E") no-repeat center / 100% 100%; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath d='M0 0v14h11C5.6 13.1 1.9 8.6 0 0z'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.chat-msg.is-own.is-last .chat-bubble::after, .chat-msg.is-own.is-single .chat-bubble::after { right:-9px; }
.chat-msg.is-peer.is-last .chat-bubble::after, .chat-msg.is-peer.is-single .chat-bubble::after { left:-9px; transform:scaleX(-1); }
.chat-msg.is-sending .chat-bubble { opacity:.78; }
.chat-msg.is-failed .chat-bubble { box-shadow:0 0 0 1.5px var(--danger); }
/* a new message grows in from its corner */
.chat-msg.is-new { animation:chat-pop var(--chat-pop) cubic-bezier(.2, .9, .3, 1.2); }
.chat-msg.is-own.is-new { transform-origin:bottom right; }
.chat-msg.is-peer.is-new { transform-origin:bottom left; }
@keyframes chat-pop { from { opacity:0; transform:translateY(10px) scale(.92); } to { opacity:1; transform:none; } }
/* a lifted bubble under its menu; the rest steps back */
.chat-msg.has-menu { z-index:5; }
.chat-msg.has-menu .chat-bubble { transform:scale(1.03); box-shadow:0 8px 24px rgba(15, 23, 42, 0.28); transition:transform .14s ease-out, box-shadow .14s; }
.chat-messages.has-menu .chat-msg:not(.has-menu) { opacity:.55; transition:opacity .14s; }
.chat-messages.has-menu .chat-day { opacity:.55; }
/* the text and the time: the time sits at the end of the last line, like a postmark */
.chat-body { display:inline; white-space:pre-wrap; unicode-bidi:plaintext; }
.chat-body.is-empty { display:none; }
.chat-body.is-caption { display:block; padding:4px 2px 0; }
.chat-link { color:inherit; text-decoration:underline; text-underline-offset:2px; word-break:break-all; }
.chat-msg.is-peer .chat-link { color:var(--chat-accent); }
.chat-meta { float:right; display:inline-flex; align-items:center; gap:4px; margin:7px -2px -2px 10px; font-size:11px; line-height:1; color:var(--chat-in-meta); font-variant-numeric:tabular-nums; white-space:nowrap; position:relative; top:2px; }
.chat-msg.is-own .chat-meta { color:var(--chat-out-meta); }
.chat-edited { font-style:italic; }
.chat-ticks { display:inline-flex; align-items:center; margin-left:1px; font-weight:700; line-height:1; }
.chat-ticks svg { display:block; }
.chat-ticks[data-state="failed"] { color:var(--danger, #dc2626); }
.chat-ticks.is-read { color:var(--chat-out-read); }
/* a forwarded message (2.47.0) */
.chat-forwarded { display:flex; align-items:center; gap:4px; margin:0 0 3px; font-size:12px; font-weight:600; font-style:italic; color:var(--chat-accent); }
.chat-msg.is-own .chat-forwarded { color:var(--chat-out-meta); }
.chat-msg.is-photo .chat-forwarded, .chat-msg.is-clip .chat-forwarded { padding:3px 7px 0; }
/* the pinned message of the conversation, under its head */
.chat-pinned { display:flex; align-items:center; gap:4px; padding:4px 6px 4px 10px; border-bottom:1px solid var(--border); background:var(--surface-strong); position:relative; z-index:3; }
.chat-pinned.hidden { display:none; }
.chat-pinned-go { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:10px; min-height:44px; padding:0 4px; border:0; background:transparent; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.chat-pinned-icon { flex:0 0 auto; display:grid; place-items:center; color:var(--chat-accent, var(--primary)); }
.chat-pinned-copy { min-width:0; display:flex; flex-direction:column; gap:1px; padding-inline-start:10px; border-inline-start:2px solid var(--chat-accent, var(--primary)); }
.chat-pinned-label { font-size:12px; font-weight:700; color:var(--chat-accent, var(--primary)); }
.chat-pinned-text { font-size:var(--fs-sm); color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; unicode-bidi:plaintext; }
.chat-pinned-close { flex:0 0 40px; width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; }
.chat-pinned-close:hover { background:var(--primary-soft); }
.chat-pinned-close.hidden { display:none; }
.chat-msg-menu { flex:0 0 32px; width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:var(--surface-strong); color:var(--muted); font-size:16px; line-height:1; cursor:pointer; opacity:0; transition:opacity .15s; }
.chat-msg:hover .chat-msg-menu, .chat-msg:focus-within .chat-msg-menu, .chat-msg.has-menu .chat-msg-menu { opacity:1; }
@media (pointer: coarse) { .chat-msg-menu { display:none; } }
.chat-retry { border:0; background:transparent; color:var(--danger); font-size:var(--fs-xs); font-weight:700; cursor:pointer; padding:4px; text-align:inherit; }
/* The menu of a message (2.46.0, as Telegram): a pill of reactions over a card of actions, the rest of the thread dimmed behind. */
.chat-message-menu { position:absolute; z-index:6; display:flex; flex-direction:column; align-items:stretch; gap:8px; min-width:200px; max-width:calc(100% - 16px); animation:chat-menu-in .14s ease-out; }
.chat-message-menu.hidden { display:none; }
.chat-message-menu { align-items:flex-start; }
.chat-message-menu.is-end { align-items:flex-end; }
.chat-menu-item .chat-menu-icon { display:grid; place-items:center; width:22px; height:22px; color:var(--muted); flex:0 0 22px; }
.chat-menu-item .chat-menu-label { flex:1 1 auto; }
.chat-menu-item.is-danger, .chat-menu-item.is-danger .chat-menu-icon { color:var(--danger, #dc2626); }
.chat-menu-items { display:flex; flex-direction:column; min-width:210px; padding:6px; border-radius:var(--radius-md); border:1px solid var(--border-strong); background:var(--surface-strong); box-shadow:0 12px 32px rgba(15, 23, 42, 0.22); }
.chat-menu-reactions { display:flex; align-items:center; gap:2px; padding:4px 6px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface-strong); box-shadow:0 10px 28px rgba(15, 23, 42, 0.22); overflow-x:auto; scrollbar-width:none; }
.chat-menu-reactions::-webkit-scrollbar { display:none; }
.chat-menu-reactions { max-width:100%; }
.chat-menu-reaction { flex:0 1 38px; min-width:28px; width:auto; height:auto; aspect-ratio:1; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:transparent; color:var(--muted); font-size:24px; line-height:1; cursor:pointer; transition:transform .12s ease-out, background .12s; font-family:"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.chat-menu-reaction:hover, .chat-menu-reaction:focus-visible { transform:scale(1.18); background:var(--primary-soft); }
.chat-menu-reaction:active { transform:scale(.92); }
.chat-menu-reaction.is-mine { background:var(--primary-soft); box-shadow:inset 0 0 0 1.5px var(--chat-accent); }
.chat-menu-reaction.is-more { background:var(--primary-soft); color:var(--text); }
.chat-menu-scrim { position:absolute; inset:0; z-index:4; background:rgba(15, 23, 42, 0.22); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); animation:chat-scrim-in .14s ease-out; }
.chat-menu-scrim.hidden { display:none; }
@keyframes chat-scrim-in { from { opacity:0; } to { opacity:1; } }
/* the reactions of a message: chips at the foot of the bubble, the time at its end */
.chat-foot { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:4px 10px; margin-top:4px; }
.chat-foot .chat-meta { float:none; margin:0 -2px -2px auto; top:0; }
.chat-reactions { display:flex; flex-wrap:wrap; gap:4px; min-width:0; }
.chat-reaction { display:inline-flex; align-items:center; gap:4px; height:28px; padding:0 9px; border:0; border-radius:14px; background:rgba(37, 99, 235, 0.12); background:color-mix(in srgb, var(--chat-accent) 14%, transparent); color:var(--chat-accent); font:inherit; font-size:12px; font-weight:700; line-height:1; cursor:pointer; font-variant-numeric:tabular-nums; }
.chat-reaction-emoji { font-size:16px; line-height:1; font-family:"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.chat-reaction.is-mine { background:var(--chat-accent); color:#fff; }
.chat-msg.is-own .chat-reaction { background:rgba(255, 255, 255, 0.22); color:var(--chat-out-text); }
.chat-msg.is-own .chat-reaction.is-mine { background:var(--chat-out-text); color:var(--chat-out); }
.chat-reaction.is-pop .chat-reaction-emoji { animation:chat-react-pop .42s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes chat-react-pop { 0% { transform:scale(.3); } 60% { transform:scale(1.45); } 100% { transform:scale(1); } }
.chat-quote { cursor:pointer; }
.chat-quote:active { filter:brightness(.94); }
@keyframes chat-menu-in { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:none; } }
.chat-menu-item { display:flex; align-items:center; gap:8px; min-height:40px; padding:0 10px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--text); font:inherit; font-size:var(--fs-sm); font-weight:600; text-align:left; cursor:pointer; --clx-icon-size:20px; }
.chat-menu-item:hover, .chat-menu-item:focus-visible { background:var(--primary-soft); }
/* the quoted line of a reply, inside the bubble */
.chat-quote { display:flex; flex-direction:column; gap:1px; margin:2px 0 6px; padding:4px 8px 5px 10px; border-radius:8px; border-inline-start:3px solid var(--chat-quote-bar); background:rgba(127, 127, 127, 0.13); font-size:var(--fs-sm); line-height:1.3; unicode-bidi:plaintext; }
.chat-quote-label { font-weight:700; font-size:11.5px; color:var(--chat-quote-bar); }
.chat-quote-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.85; }
.chat-msg.is-own .chat-quote { --chat-quote-bar:var(--chat-out-read); background:rgba(0, 0, 0, 0.07); }
/* the round button to the latest messages, with what arrived meanwhile */
.chat-jump { position:absolute; right:12px; bottom:84px; z-index:4; width:44px; height:44px; padding:0; display:grid; place-items:center; border-radius:50%; border:1px solid var(--border-strong); background:var(--surface-strong); color:var(--text); box-shadow:0 6px 18px rgba(15, 23, 42, 0.2); cursor:pointer; transition:opacity .15s, transform .15s; }
.chat-jump.hidden { display:none; }
.chat-jump-count { position:absolute; top:-7px; left:50%; transform:translateX(-50%); min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--chat-accent); color:#fff; font-size:11px; font-weight:700; line-height:20px; font-variant-numeric:tabular-nums; }
.chat-jump-count.hidden { display:none; }
.chat-notice { padding:8px 12px; font-size:var(--fs-xs); color:var(--muted); text-align:center; border-top:1px solid var(--border); background:var(--surface-strong); }
.chat-edit-bar, .chat-reply-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 12px; font-size:var(--fs-xs); font-weight:700; color:var(--primary-strong); border-top:1px solid var(--border); background:var(--primary-soft); }
.chat-edit-bar button { min-height:32px; padding:0 10px; border-radius:999px; border:1px solid var(--border); background:var(--surface-strong); color:var(--text); font:inherit; font-size:var(--fs-xs); font-weight:700; cursor:pointer; }
.chat-reply-bar { background:var(--surface-strong); color:var(--text); padding:6px 8px 6px 12px; }
.chat-reply-copy { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; padding-inline-start:10px; border-inline-start:3px solid var(--chat-accent); }
.chat-reply-label { color:var(--chat-accent); font-size:12px; }
.chat-reply-text { font-weight:400; font-size:var(--fs-sm); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; unicode-bidi:plaintext; }
.chat-reply-cancel { flex:0 0 36px; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; border:0; background:transparent; color:var(--muted); cursor:pointer; }
.chat-reply-cancel:hover { background:var(--primary-soft); }

/* --- Photos, clips, files, recordings ------------------------------------------- */
.chat-msg.is-photo .chat-bubble, .chat-msg.is-clip .chat-bubble { padding:3px; }
.chat-msg.is-photo .chat-bubble.is-media-only, .chat-msg.is-clip .chat-bubble.is-media-only { padding:0; background:transparent; box-shadow:none; }
/* under a caption the time keeps inside the thin frame of a picture's bubble */
.chat-msg.is-photo .chat-bubble:not(.is-media-only) .chat-meta, .chat-msg.is-clip .chat-bubble:not(.is-media-only) .chat-meta { margin:4px 7px 4px 10px; top:0; }
.chat-msg.is-photo .chat-body.is-caption, .chat-msg.is-clip .chat-body.is-caption { padding:5px 7px 0; }
.chat-msg.is-photo .chat-bubble.is-media-only::after, .chat-msg.is-clip .chat-bubble.is-media-only::after { display:none; }
.chat-photo, .chat-clip { position:relative; display:block; width:min(280px, 72vw); max-width:100%; min-width:120px; min-height:80px; max-height:min(360px, 60vh); padding:0; border:0; border-radius:var(--chat-media-radius); overflow:hidden; background:rgba(127, 127, 127, 0.18); cursor:pointer; color:inherit; font:inherit; }
.chat-photo img, .chat-clip video { display:block; width:100%; height:100%; object-fit:cover; max-height:min(360px, 60vh); }
.chat-photo.is-broken img { opacity:.3; }
.chat-bubble.is-media-only .chat-meta { position:absolute; right:8px; bottom:8px; margin:0; padding:3px 7px; border-radius:999px; background:rgba(0, 0, 0, 0.45); color:#fff; backdrop-filter:blur(4px); z-index:1; top:auto; float:none; }
.chat-bubble.is-media-only .chat-ticks.is-read, .chat-bubble.is-media-only .chat-meta { color:#fff; }
.chat-clip-badge { position:absolute; left:8px; top:8px; display:inline-flex; align-items:center; gap:6px; padding:3px 8px 3px 4px; border-radius:999px; background:rgba(0, 0, 0, 0.5); color:#fff; font-size:11px; font-weight:600; }
.chat-clip-play { display:inline-block; width:0; height:0; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent currentColor; margin-left:3px; }
.chat-clip::after { content:''; position:absolute; inset:0; margin:auto; width:52px; height:52px; border-radius:50%; background:rgba(0, 0, 0, 0.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l12-7z'/%3E%3C/svg%3E") no-repeat center / 24px; backdrop-filter:blur(4px); pointer-events:none; }
.chat-attach-preview .chat-clip-play { position:absolute; inset:0; margin:auto; border-width:9px 0 9px 15px; color:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.chat-upload { position:absolute; inset:0; display:grid; place-items:center; background:rgba(0, 0, 0, 0.35); z-index:2; }
.chat-upload::before { content:''; width:52px; height:52px; border-radius:50%; background:conic-gradient(#fff calc(var(--p, 0) * 360deg), rgba(255, 255, 255, 0.28) 0); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); grid-area:1 / 1; }
/* The ring never takes the tap: Cancel sits above it. */
.chat-upload::before { pointer-events:none; }
.chat-upload-cancel { position:relative; z-index:1; grid-area:1 / 1; width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:#fff; cursor:pointer; }
.chat-file { display:flex; align-items:center; gap:10px; min-width:200px; max-width:100%; min-height:48px; padding:4px 8px 4px 4px; border:0; border-radius:12px; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; position:relative; }
.chat-file.is-gone { cursor:default; opacity:.75; }
.chat-file.is-busy { opacity:.6; }
.chat-file-icon { flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:var(--chat-accent); color:#fff; font-size:11px; font-weight:800; letter-spacing:.02em; }
.chat-msg.is-own .chat-file-icon { background:var(--chat-out-read); }
.chat-file-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.chat-file-name { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; unicode-bidi:plaintext; }
.chat-file-size { font-size:var(--fs-xs); opacity:.75; }
.chat-file .chat-upload { border-radius:12px; background:rgba(0, 0, 0, 0.15); }
.chat-file .chat-upload::before { width:40px; height:40px; }
.chat-gone { display:grid; place-items:center; min-width:160px; min-height:72px; padding:12px; font-size:var(--fs-sm); color:var(--muted); text-align:center; }
/* voice: play, a waveform that fills as it plays, the length */
.chat-recording { display:flex; align-items:center; gap:10px; min-height:44px; max-width:100%; padding:2px 6px 2px 2px; border:0; border-radius:999px; background:transparent; color:inherit; font:inherit; cursor:pointer; text-align:left; }
.chat-recording-icon { flex:0 0 40px; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--chat-accent); color:#fff; }
.chat-msg.is-own .chat-recording-icon { background:var(--chat-out-read); }
.chat-recording.is-loading .chat-recording-icon { animation:chat-pulse 1s ease-in-out infinite; }
@keyframes chat-pulse { 50% { opacity:.5; } }
.chat-recording-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
/* the bars are a mask (drawn by chat.js from the message's id); what was heard is the accent part of one gradient */
.chat-recording { --played:0; }
.chat-wave { display:block; height:26px; width:150px; max-width:46vw; --chat-wave-on:var(--chat-accent); --chat-wave-off:rgba(127, 127, 127, 0.42); background:linear-gradient(90deg, var(--chat-wave-on) calc(var(--played, 0) * 100%), var(--chat-wave-off) 0); -webkit-mask:var(--wave) no-repeat center / 100% 100%; mask:var(--wave) no-repeat center / 100% 100%; }
.chat-msg.is-own .chat-wave { --chat-wave-on:var(--chat-out-read); --chat-wave-off:rgba(0, 0, 0, 0.2); }
.chat-recording-label { font-size:var(--fs-xs); opacity:.8; font-variant-numeric:tabular-nums; }
/* a round video note */
.chat-msg.is-video .chat-bubble { padding:0; background:transparent; box-shadow:none; }
.chat-msg.is-video .chat-bubble::after { display:none; }
.chat-msg.is-video .chat-bubble .chat-meta { position:absolute; bottom:6px; right:50%; transform:translateX(50%); margin:0; padding:3px 7px; border-radius:999px; background:rgba(0, 0, 0, 0.45); color:#fff; float:none; top:auto; }
.chat-videonote { position:relative; display:grid; place-items:center; width:min(220px, 60vw); aspect-ratio:1; padding:0; border:0; border-radius:50%; background:#0b1220; overflow:hidden; cursor:pointer; color:#fff; }
.chat-videonote video { width:100%; height:100%; object-fit:cover; border-radius:50%; grid-area:1 / 1; }
.chat-videonote-ring { position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 0 3px rgba(255, 255, 255, 0.35); pointer-events:none; }
.chat-videonote-play { grid-area:1 / 1; display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:rgba(0, 0, 0, 0.45); color:#fff; backdrop-filter:blur(4px); z-index:1; transition:opacity .15s; }
.chat-videonote.is-playing .chat-videonote-play { opacity:0; }
.chat-videonote:hover .chat-videonote-play, .chat-videonote:focus-visible .chat-videonote-play { opacity:1; }
.chat-videonote-length { position:absolute; left:50%; bottom:28px; transform:translateX(-50%); padding:2px 8px; border-radius:999px; background:rgba(0, 0, 0, 0.45); font-size:11px; font-weight:600; z-index:1; }

/* --- The composer ---------------------------------------------------------- */
.chat-composer { position:relative; display:flex; align-items:flex-end; gap:6px; padding:8px; border-top:1px solid var(--border); background:var(--surface-strong); z-index:3; }
.chat-composer .icon-button, .chat-send { flex:0 0 44px; width:44px; height:44px; min-height:44px; padding:0; display:grid; place-items:center; border-radius:50%; --clx-icon-size:26px; }
.chat-composer .icon-button.has-3d::before, .chat-send.has-3d::before { margin:0; }
.chat-composer .icon-button.is-active { background:var(--primary-soft); }
.chat-send { background:var(--chat-accent, var(--primary)); color:#fff; border:1px solid transparent; transition:transform .12s; }
.chat-send:active { transform:scale(.92); }
.chat-send:disabled, .chat-composer .icon-button:disabled { opacity:.45; cursor:not-allowed; }
#chatInput { flex:1 1 auto; min-width:0; min-height:44px; max-height:140px; padding:11px 14px; border:1px solid var(--border); border-radius:22px; background:var(--surface); color:var(--text); font:inherit; font-size:var(--fs-md); line-height:1.4; resize:none; overflow-y:auto; unicode-bidi:plaintext; }
#chatInput:disabled { opacity:.6; }
/* touch-action: a finger that slides up to the lock must stay the button's, not become a scroll (which cancelled it). */
.chat-record { position:relative; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.chat-record svg { grid-area:1 / 1; transition:opacity .15s, transform .15s; }
.chat-record[data-mode="audio"] .chat-record-cam, .chat-record[data-mode="video"] .chat-record-mic { opacity:0; transform:scale(.6); pointer-events:none; }
.chat-record.is-flip { animation:chat-flip .25s ease-out; }
@keyframes chat-flip { 0% { transform:scale(1); } 50% { transform:scale(.8) rotate(-12deg); } 100% { transform:scale(1); } }
.chat-record:disabled { opacity:.4; }
.chat-composer.has-text .chat-record { display:none; }
.chat-composer.can-record:not(.has-text) .chat-send { display:none; }
.chat-attach-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.chat-attach-menu { position:absolute; right:10px; bottom:68px; z-index:7; display:flex; flex-direction:column; min-width:200px; padding:6px; border-radius:16px; border:1px solid var(--border-strong); background:var(--surface-strong); box-shadow:0 12px 32px rgba(15, 23, 42, 0.22); animation:chat-menu-in .14s ease-out; }
.chat-attach-menu.hidden { display:none; }
.chat-attach-item { display:flex; align-items:center; gap:12px; min-height:48px; padding:4px 12px 4px 6px; border:0; border-radius:12px; background:transparent; color:var(--text); font:inherit; font-size:var(--fs-sm); font-weight:600; text-align:left; cursor:pointer; }
.chat-attach-item:hover, .chat-attach-item:focus-visible { background:var(--primary-soft); }
.chat-attach-item.hidden { display:none; }
.chat-attach-ico { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#fff; background:#3b82f6; }
.chat-attach-ico.is-camera { background:#ef4444; }
.chat-attach-ico.is-file { background:#8b5cf6; }
/* The emoji panel: on a phone it stands where the keyboard was, at the keyboard's height (chat.js measures it). */
.chat-emoji-sheet { border-top:1px solid var(--border); background:var(--surface-strong); min-height:72px; padding-bottom:env(safe-area-inset-bottom); }
.chat-emoji-sheet emoji-picker { display:block; width:100%; height:min(320px, 42vh); --background:var(--surface-strong); --border-color:var(--border); --border-size:0; --indicator-color:var(--chat-accent, var(--primary)); --input-border-color:var(--border); --input-font-color:var(--text); --input-placeholder-color:var(--muted); --outline-color:var(--chat-accent, var(--primary)); --button-hover-background:var(--primary-soft); --button-active-background:var(--primary-soft); --category-font-color:var(--muted); --skintone-border-radius:12px; --num-columns:8; --emoji-size:1.55rem; --emoji-padding:.4rem; --font-family:inherit; --font-size:14px; --input-border-radius:12px; --input-padding:.4rem .75rem; }
.chat-emoji-sheet.hidden { display:none; }
@media (pointer: coarse) {
    .chat-emoji-sheet emoji-picker { height:var(--chat-sheet-h, min(300px, 40vh)); max-height:55vh; --emoji-size:1.75rem; --emoji-padding:.38rem; }
}
@media (max-width: 360px) {
    .chat-emoji-sheet emoji-picker { --num-columns:7; }
}
.chat-thread.has-emoji .chat-composer { padding-bottom:8px; }
#chatInput { overflow-y:hidden; }

/* --- Hold to record: the bar over the composer, the round picture in the middle ----- */
.chat-record-overlay { position:absolute; inset:0; z-index:8; display:flex; flex-direction:column; justify-content:flex-end; pointer-events:none; --p:0; }
.chat-record-overlay.hidden { display:none; }
.chat-record-stage { flex:1 1 auto; display:grid; place-items:center; padding:16px; pointer-events:none; }
.chat-record-overlay[data-mode="video"] .chat-record-stage { pointer-events:auto; background:rgba(5, 9, 18, 0.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.chat-record-overlay[data-mode="audio"] .chat-record-stage { visibility:hidden; }
.chat-record-ring { position:relative; width:min(72vw, 300px, calc(var(--app-vh, 100vh) - 260px)); aspect-ratio:1; border-radius:50%; padding:5px; background:conic-gradient(var(--chat-accent, #2563eb) calc(var(--p) * 360deg), rgba(255, 255, 255, 0.25) 0); box-shadow:0 20px 60px rgba(0, 0, 0, 0.45); transition:--p .25s linear; }
.chat-record-ring video { display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; background:#0b1220; transform:scaleX(-1); }
.chat-record-overlay.is-preview .chat-record-ring video { transform:none; }
.chat-record-overlay.is-preview[data-mode="video"] .chat-record-ring::after { content:''; position:absolute; inset:5px; border-radius:50%; background:rgba(0, 0, 0, 0.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l12-7z'/%3E%3C/svg%3E") no-repeat center / 44px; pointer-events:none; }
.chat-record-overlay.is-preview.is-playing[data-mode="video"] .chat-record-ring::after { opacity:0; }
.chat-record-bar { position:relative; display:flex; align-items:center; gap:10px; min-height:60px; padding:8px 12px 8px 14px; background:var(--surface-strong); border-top:1px solid var(--border); pointer-events:auto; }
.chat-record-overlay.is-preview .chat-record-bar { display:none; }
.chat-record-dot { width:12px; height:12px; border-radius:50%; background:#ef4444; animation:chat-rec-blink 1.1s ease-in-out infinite; flex:0 0 auto; }
@keyframes chat-rec-blink { 50% { opacity:.25; } }
.chat-record-time { font-variant-numeric:tabular-nums; font-weight:700; font-size:var(--fs-md); min-width:44px; color:var(--text); }
.chat-record-hint { flex:1 1 auto; text-align:center; color:var(--muted); font-size:var(--fs-sm); font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:opacity .1s; }
.chat-record-hint::before { content:'‹'; font-size:20px; line-height:1; animation:chat-hint-slide 1.4s ease-in-out infinite; }
@keyframes chat-hint-slide { 50% { transform:translateX(-5px); } }
.chat-record-overlay.will-cancel .chat-record-hint { color:var(--danger); }
.chat-record-cancel { min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--danger); font:inherit; font-size:var(--fs-sm); font-weight:700; cursor:pointer; margin-left:auto; }
.chat-record-stop { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; border:0; background:#ef4444; color:#fff; cursor:pointer; }
.chat-record-lock { position:absolute; right:14px; bottom:76px; display:flex; flex-direction:column; align-items:center; gap:4px; width:40px; padding:10px 0 8px; border-radius:20px; background:var(--surface-strong); border:1px solid var(--border); color:var(--muted); box-shadow:var(--shadow-soft); transition:transform .15s, color .15s; }
.chat-record-lock-arrow { animation:chat-lock-bob 1.4s ease-in-out infinite; }
@keyframes chat-lock-bob { 50% { transform:translateY(-4px); } }
.chat-record-overlay.will-lock .chat-record-lock { color:var(--chat-accent, var(--primary)); transform:translateY(-6px) scale(1.06); }
.chat-record-overlay.is-locked .chat-record-lock, .chat-record-overlay.is-preview .chat-record-lock, .chat-record-overlay[data-mode="video"] .chat-record-lock { background:var(--chat-accent, var(--primary)); color:#fff; border-color:transparent; }
.chat-record-overlay.is-locked .chat-record-lock-arrow, .chat-record-overlay.is-preview .chat-record-lock { display:none; }
.chat-record-overlay.is-locked .chat-record-hint { display:none; }
.chat-record-overlay.is-sending .chat-record-bar, .chat-record-overlay.is-sending .chat-record-preview { opacity:.6; pointer-events:none; }
.chat-record-preview { display:flex; align-items:center; gap:8px; min-height:60px; padding:8px 8px 8px 6px; background:var(--surface-strong); border-top:1px solid var(--border); pointer-events:auto; }
.chat-record-preview.hidden { display:none; }
.chat-record-delete { width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--danger); cursor:pointer; }
.chat-record-play { width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:50%; background:var(--chat-accent, var(--primary)); color:#fff; cursor:pointer; flex:0 0 auto; }
.chat-record-wave { flex:1 1 auto; min-width:0; display:flex; align-items:center; height:36px; padding:0 8px; border-radius:18px; background:var(--primary-soft); --played:0; }
.chat-record-wave .chat-wave { width:100%; max-width:none; }
.chat-record-length { font-variant-numeric:tabular-nums; font-weight:700; font-size:var(--fs-sm); color:var(--text); }
.chat-record-send { flex:0 0 44px; width:44px; height:44px; }
/* the record button keeps the finger (it is under the bar, not hidden) */
.chat-composer.is-recording .icon-button:not(.chat-record), .chat-composer.is-recording .chat-send { visibility:hidden; }
/* 2.48.2: the message box only fades while recording; hidden, Android took its focus and closed the keyboard, and the page jumped under the finger. */
.chat-composer.is-recording #chatInput { opacity:0; pointer-events:none; caret-color:transparent; }
/* The round button under the finger (2.46.0): it follows a slide; locked, it sends. */
.chat-record-fab { position:absolute; z-index:3; width:76px; height:76px; margin:0 -38px -38px 0; padding:0; display:grid; place-items:center; border:0; border-radius:50%; background:var(--chat-accent, var(--primary)); color:#fff; box-shadow:0 8px 26px rgba(37, 99, 235, 0.42); transform:translate(var(--dx, 0px), var(--dy, 0px)); pointer-events:none; animation:chat-fab-in .18s ease-out; transition:background .15s; }
.chat-record-fab.hidden { display:none; }
.chat-record-fab svg { grid-area:1 / 1; }
.chat-record-fab::before { content:''; position:absolute; inset:-10px; border-radius:50%; background:var(--chat-accent, var(--primary)); opacity:.22; animation:chat-fab-pulse 1.3s ease-in-out infinite; pointer-events:none; }
.chat-record-fab .chat-fab-send, .chat-record-fab[data-mode="audio"] .chat-fab-cam, .chat-record-fab[data-mode="video"] .chat-fab-mic { display:none; }
.chat-record-fab.is-locked { pointer-events:auto; cursor:pointer; transition:transform .18s ease-out, background .15s; }
.chat-record-fab.is-locked svg { display:none; }
.chat-record-fab.is-locked .chat-fab-send { display:block; }
.chat-record-overlay.will-cancel .chat-record-fab { background:var(--danger, #ef4444); }
.chat-record-overlay.is-preview .chat-record-fab, .chat-record-overlay.is-sending .chat-record-fab { display:none; }
@keyframes chat-fab-in { from { transform:scale(.4); opacity:0; } to { transform:translate(var(--dx, 0px), var(--dy, 0px)); opacity:1; } }
@keyframes chat-fab-pulse { 50% { transform:scale(1.14); opacity:.1; } }
.chat-record-lock { transform:translateY(calc(var(--lift, 0) * -12px)); }
/* Locked: where the lock was, the stop button (listen before sending); Cancel left of the round Send. */
.chat-record-overlay.is-locked .chat-record-lock { display:none; }
.chat-record-overlay.is-locked .chat-record-bar { padding-right:100px; }
.chat-record-overlay.is-locked .chat-record-stop { position:absolute; right:12px; bottom:84px; width:44px; height:44px; box-shadow:0 6px 18px rgba(239, 68, 68, 0.35); }

/* --- New chat, the attach preview, the share chooser ---------------------------------- */
.chat-new-search { display:flex; gap:8px; margin-bottom:12px; }
.chat-new-search input { flex:1 1 auto; min-width:0; min-height:44px; padding:0 14px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); color:var(--text); font:inherit; unicode-bidi:plaintext; }
.chat-new-list { display:flex; flex-direction:column; gap:8px; max-height:50vh; overflow-y:auto; }
.chat-share-card .section-note { margin:4px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:260px; }
.chat-attach-card { gap:12px; }
.chat-attach-previews { display:grid; grid-template-columns:1fr; gap:8px; max-height:min(46vh, 380px); overflow-y:auto; }
.chat-attach-previews.is-grid { grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); }
.chat-attach-preview { position:relative; display:grid; place-items:center; min-height:120px; border-radius:14px; overflow:hidden; background:var(--bg-soft); border:1px solid var(--border); }
.chat-attach-preview img, .chat-attach-preview video { display:block; width:100%; max-height:min(40vh, 320px); object-fit:contain; background:#0b1220; }
.chat-attach-previews.is-grid .chat-attach-preview img, .chat-attach-previews.is-grid .chat-attach-preview video { aspect-ratio:1; max-height:none; object-fit:cover; }
.chat-attach-preview.is-file { grid-template-rows:1fr auto; padding:14px 10px 28px; }
.chat-attach-preview .chat-file-icon { width:56px; height:56px; font-size:13px; }
.chat-attach-name { position:absolute; left:0; right:0; bottom:0; padding:4px 36px 4px 8px; font-size:11px; color:#fff; background:linear-gradient(transparent, rgba(0, 0, 0, 0.6)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; unicode-bidi:plaintext; }
.chat-attach-preview.is-file .chat-attach-name { color:var(--muted); background:none; }
.chat-attach-remove { position:absolute; top:6px; right:6px; width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(0, 0, 0, 0.55); color:#fff; cursor:pointer; }
.chat-attach-form { display:flex; align-items:flex-end; gap:8px; }
.chat-attach-form textarea { flex:1 1 auto; min-width:0; min-height:44px; max-height:120px; padding:11px 14px; border:1px solid var(--border); border-radius:22px; background:var(--surface); color:var(--text); font:inherit; font-size:var(--fs-md); line-height:1.4; resize:none; unicode-bidi:plaintext; }
.chat-attach-form .chat-send { flex:0 0 44px; width:44px; height:44px; min-height:44px; padding:0; display:grid; place-items:center; border-radius:50%; }

/* --- The viewer ----------------------------------------------------------------------- */
.chat-viewer.modal-scrim { --viewer-dim:1; display:flex; flex-direction:column; align-items:stretch; justify-content:stretch; padding:0; background:rgba(5, 9, 18, calc(0.94 * var(--viewer-dim))); backdrop-filter:none; -webkit-backdrop-filter:none; z-index:1400; color:#fff; }
.chat-viewer.hidden { display:none; }
.chat-viewer-head { display:flex; align-items:center; gap:6px; padding:calc(8px + env(safe-area-inset-top)) 8px 8px 14px; opacity:var(--viewer-dim); }
.chat-viewer-copy { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.chat-viewer-name { font-weight:700; font-size:var(--fs-md); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; unicode-bidi:plaintext; }
.chat-viewer-time { font-size:var(--fs-xs); opacity:.75; }
.chat-viewer-btn { flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(255, 255, 255, 0.1); color:#fff; cursor:pointer; text-decoration:none; }
.chat-viewer-btn:hover { background:rgba(255, 255, 255, 0.2); }
.chat-viewer-stage { flex:1 1 auto; min-height:0; display:grid; place-items:center; overflow:hidden; touch-action:none; cursor:zoom-in; }
.chat-viewer-stage img { max-width:100%; max-height:100%; object-fit:contain; user-select:none; -webkit-user-select:none; transition:transform .08s linear; will-change:transform; cursor:grab; }
.chat-viewer-stage img.is-zoomed { cursor:grab; transition:none; }
.chat-viewer-stage video { max-width:100%; max-height:100%; background:#000; }
.chat-viewer-caption { margin:0; padding:10px 16px calc(14px + env(safe-area-inset-bottom)); text-align:center; font-size:var(--fs-sm); opacity:var(--viewer-dim); unicode-bidi:plaintext; }
.chat-viewer-caption.hidden { display:none; }

/* --- The call chat ------------------------------------------------------------ */
/* The chat switch of the call dock: a red count of the messages that arrived
   while the chat was closed sits on its corner. */
.call-chat-button.has-new { border-color:#ff819c; }
.video-dock .call-chat-button > .call-chat-count { position:absolute; top:-5px; right:-5px; z-index:1; width:auto; margin:0; overflow:visible; clip-path:none; white-space:nowrap; display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border-radius:999px; box-shadow:0 0 0 2px #172338; background:#dc2626; color:#fff; font-size:11px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; pointer-events:none; }
.call-chat-panel { display:flex; flex-direction:column; height:min(62vh, calc(100% - var(--dock-h) - 16px)); padding:0; overflow:hidden; }
.call-chat-panel.hidden { display:none; }
.call-chat-panel > #callChatHost { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.call-chat-panel .chat-thread { flex:1 1 auto; height:auto; min-height:0; border:0; border-radius:inherit; }
/* Full screen gives the picture everything; chat.js leaves full screen before it opens the chat. */
.call-surface.is-immersive .call-chat-panel { display:none; }
.chat-thread.is-call .chat-thread-head { padding:6px 8px; }
.chat-thread.is-call .chat-peer-status { display:none; }

/* --- Theme and responsive ------------------------------------------------------- */
[data-theme="graphite"] .call-chat-button.has-new { border-color:#ff4d6d; }
[data-theme="minimal"] .chat-thread-row, [data-theme="minimal"] .chat-thread, [data-theme="minimal"] .chat-message-menu, [data-theme="minimal"] .chat-attach-menu { border-radius:10px; }
.history-chip[data-clx-icon="chat"] svg { width:22px; height:22px; }
@media (max-width: 600px) {
    #chatThreadHost .chat-thread { height:calc(var(--app-vh, 100dvh) - 170px); min-height:260px; }
    .chat-msg { max-width:88%; }
}
@media (max-width: 340px) {
    .chat-photo, .chat-clip { width:min(240px, 70vw); }
    .chat-wave { width:110px; }
    .chat-file { min-width:170px; }
}
@media (max-height: 500px) and (orientation: landscape) {
    #chatThreadHost .chat-thread { height:calc(var(--app-vh, 100dvh) - 120px); min-height:200px; }
    .chat-emoji-sheet emoji-picker { height:min(220px, 50vh); }
    .chat-photo, .chat-clip { max-height:50vh; }
    .chat-videonote { width:min(160px, 40vh); }
    .chat-record-ring { width:min(300px, calc(var(--app-vh, 100vh) - 200px)); }
}
@media (prefers-reduced-motion: reduce) {
    .chat-verified::after, .chat-typing-dots i, .chat-record-dot, .chat-record-hint::before, .chat-record-lock-arrow, .chat-recording.is-loading .chat-recording-icon { animation:none; }
    .chat-msg.is-new, .chat-message-menu, .chat-attach-menu, .chat-record.is-flip { animation:none; }
    .chat-msg, .chat-msg.has-menu .chat-bubble, .chat-messages.has-menu .chat-msg, .chat-send, .chat-jump, .chat-record-lock { transition:none; }
}
/* 2.48.1: while the microphone starts, the bar is already there, its dot still grey. */
.chat-record-overlay.is-starting .chat-record-dot { background:var(--text-3, #94a3b8); animation:none; }
/* 2.48.4: in the chat of a call the scrim under a message's menu, and the day labels, carry no blur.
   The call screen behind changes every second; a phone's GPU redrew the blur with it and the menu
   seemed to blink (the owner, on Android). A plain veil does the same job. */
#chatThread.is-call .chat-menu-scrim { -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(15, 23, 42, 0.32); animation:none; }
#chatThread.is-call .chat-day { -webkit-backdrop-filter:none; backdrop-filter:none; }

/* Recording controls are gestures, not selectable message text. */
.chat-record-overlay, .chat-record-overlay * { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
@font-face {
    font-family: "Callixy Vazirmatn";
    src: url("/fonts/vazirmatn/Vazirmatn-NL-33.003.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200D,U+FB50-FDFF,U+FE70-FEFF;
}
.chat-body, .chat-quote-text, .chat-reply-text, .chat-pinned-text, .chat-attach-form textarea, #chatInput {
    font-family: "Callixy Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}