/* Chat launcher and panel (game/src/core/chat.js, chat-panel.js), in the Blipyard brand: glass panel, gummy bubbles
   (world = glass, team = violet, yours = mint, system = centred pill with Blip), Blip's expressions as reactions.
   Every colour, radius and size comes from the --chat-* tokens below, which read the brand tokens (css/tokens.css,
   loaded by arcade.css on every page). The panel is one of the two blurred layers a screen may have. */
:root {
  --chat-bg: var(--by-glass-solid, #181c3b);
  --chat-glass: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 120px), var(--by-glass-bg-strong, rgba(21, 25, 53, .8));
  --chat-surface: color-mix(in srgb, var(--by-text, #f3f5ff) 7%, transparent);
  --chat-surface-2: color-mix(in srgb, var(--by-text, #f3f5ff) 13%, transparent);
  --chat-line: var(--by-glass-border, rgba(255, 255, 255, .1));
  --chat-text: var(--by-text, #f3f5ff);
  --chat-muted: var(--by-text-muted, #a9b0d0);
  --chat-accent: var(--by-cta, #ffc94d);
  --chat-accent-ink: var(--by-cta-ink, #2a1c00);
  --chat-own: color-mix(in srgb, var(--by-owned, #5ff2c0) 18%, transparent);
  --chat-own-line: color-mix(in srgb, var(--by-owned, #5ff2c0) 40%, transparent);
  --chat-team: color-mix(in srgb, var(--by-social, #b69cff) 16%, transparent);
  --chat-team-line: color-mix(in srgb, var(--by-social, #b69cff) 35%, transparent);
  --chat-bad: var(--by-danger, #ff6b7d);
  --chat-good: var(--by-owned, #5ff2c0);
  --chat-radius: var(--by-r-xl, 28px);
  --chat-radius-sm: var(--by-r-md, 16px);
  --chat-font: var(--by-font-ui, system-ui, sans-serif);
  --chat-shadow: var(--by-shadow-3, 0 18px 60px rgba(0, 0, 0, .5));
  --chat-width: 360px;
  --chat-z: 50;                    /* in games: above the HUD (10), panels (40) and the top bar (45), below the invite sheet (60) */
  --chat-kb: 0px;                  /* on-screen keyboard height on phones, set by the panel */
  --chat-dock-bottom: 0px;         /* room taken by a fixed bottom bar on the page (the site's phone tab bar; set in home.css) */
}
body.home { --chat-z: 350; }       /* on the site: above the header (100), the tab bar (200) and scrims (300) */

/* ---------- launcher ---------- */
.chat-launch { position: relative; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-family: var(--chat-font); cursor: pointer; }
.chat-launch svg { width: 18px; height: 18px; flex: none; }
.chat-launch.on, .topbar .chat-launch.btn.small.on { background: var(--by-gummy-mint); color: var(--by-text-on-mint); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 110, 80, .25); }
.chat-badge { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; background: var(--by-gummy-coral); color: #2b0007;
  font: 800 11px/1 var(--chat-font); font-style: normal; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--by-bg), inset 0 1px 0 rgba(255, 255, 255, .5); animation: by-jelly var(--by-dur-gummy) var(--by-ease-out); }
.chat-badge[hidden] { display: none; }
.chat-launch.on-site.floating { position: fixed; z-index: var(--by-z-nav, 200); right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--chat-dock-bottom));
  height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 26px; background: var(--by-glass-lite), var(--by-glass-solid); color: var(--chat-text);
  font-weight: 700; font-size: 15px; box-shadow: var(--by-glass-inner), 0 0 0 1px var(--by-line-strong), var(--by-shadow-2); transition: transform var(--by-dur-gummy) var(--by-ease-spring), filter var(--by-dur-fast); }
.chat-launch.on-site.floating:hover { filter: brightness(1.2); }
.chat-launch.on-site.floating:active { transform: scale(.94, .9); transition-duration: var(--by-dur-instant); }
.chat-launch.on-site.floating.on { background: var(--by-gummy-mint); color: var(--by-text-on-mint); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 110, 80, .25), var(--by-shadow-2); }
.chat-launch.on-site svg { width: 22px; height: 22px; }
.chat-launch.in-game.floating { position: fixed; z-index: 46; top: 8px; right: 120px; }
:root:has(dialog[open]) .chat-launch.on-site.floating { display: none; }
@media (max-width: 767px) {
  .chat-launch.in-game .chat-launch-label { display: none; }
  .chat-launch.on-site.floating { width: 52px; padding: 0; justify-content: center; }
  .chat-launch.on-site .chat-launch-label { display: none; }
  .chat-launch.on-site.floating.on { display: none; }   /* the open sheet has its own close button */
}

/* ---------- panel ---------- */
.chat-panel { position: fixed; z-index: var(--chat-z); display: flex; flex-direction: column; overflow: hidden;
  width: var(--chat-width); right: 16px; top: 60px; height: min(460px, calc(100dvh - 76px));
  background: var(--chat-glass); color: var(--chat-text); border: 1px solid var(--chat-line); border-radius: var(--chat-radius);
  -webkit-backdrop-filter: blur(var(--by-blur-lg, 20px)) saturate(var(--by-saturate, 160%)); backdrop-filter: blur(var(--by-blur-lg, 20px)) saturate(var(--by-saturate, 160%));
  box-shadow: var(--by-glass-inner), var(--chat-shadow); font: 15px/1.4 var(--chat-font); text-align: left; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .chat-panel { background: var(--chat-bg); } }
@media (prefers-reduced-transparency: reduce) { .chat-panel { background: var(--chat-bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.chat-panel[hidden] { display: none; }
.chat-panel.on-site { top: auto; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 64px + var(--chat-dock-bottom)); height: min(600px, calc(100dvh - 160px - var(--chat-dock-bottom))); }
.chat-panel button { font: inherit; color: inherit; }
.chat-panel :focus-visible { outline: 3px solid var(--by-focus, #6cc7ff); outline-offset: 2px; }

.chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 12px; border-bottom: 1px solid var(--chat-line); flex: none; }
.chat-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--by-bg-deep, #07080f) 70%, transparent); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--chat-line); }
.chat-tabs.single { background: none; padding: 0; box-shadow: none; }
.chat-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; border: 0; background: none; padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--chat-muted); }
.chat-tab.on { color: var(--chat-text); background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 8px -2px rgba(0, 0, 0, .4); }
/* the i-dot: a gold blip above the channel you are in */
.chat-tabs:not(.single) .chat-tab.on::before { content: ""; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--by-coin, #ffc94d); box-shadow: 0 0 8px var(--by-coin, #ffc94d); }
.chat-tabs.single .chat-tab { padding: 0 4px; cursor: default; background: none; box-shadow: none; color: var(--chat-text); font: 400 19px/1.2 var(--by-font-display, var(--chat-font)); }
.chat-tab[hidden] { display: none; }
.chat-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; background: var(--by-gummy-coral); color: #2b0007; font: 800 11px/1 var(--chat-font); font-style: normal; }
.chat-count[hidden] { display: none; }
.chat-online { flex: 1; font-size: 12px; font-weight: 500; color: var(--chat-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.chat-online:not(:empty)::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--chat-good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-good) 22%, transparent); margin-right: 8px; vertical-align: 0; }
.chat-iconbtn { border: 0; background: var(--chat-surface); box-shadow: inset 0 0 0 1px var(--chat-line); border-radius: 50%; height: 36px; min-width: 36px; padding: 0; cursor: pointer; display: inline-grid; place-items: center; transition: transform var(--by-dur-gummy) var(--by-ease-spring); }
.chat-iconbtn:hover { background: var(--chat-surface-2); }
.chat-iconbtn:active { transform: scale(.94, .9); transition-duration: var(--by-dur-instant); }
.chat-iconbtn svg { width: 18px; height: 18px; }
.chat-reports-btn { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 0 12px; }
.chat-reports-btn[hidden] { display: none; }

.chat-status { flex: none; padding: 5px 12px; font-size: 12px; font-weight: 500; text-align: center; background: var(--chat-surface); color: var(--chat-muted); }
.chat-status[hidden] { display: none; }

.chat-body { position: relative; flex: 1; min-height: 0; display: flex; }
.chat-list { list-style: none; margin: 0; padding: 12px 12px 8px; flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
/* empty chat: waving Blip, one line */
.chat-empty { margin: auto; padding: 16px; color: var(--chat-muted); text-align: center; font-size: 14px; max-width: 30ch; }
.chat-empty::before { content: ""; display: block; width: 64px; height: 68px; margin: 0 auto 10px; background: url(/assets/brand/blip-waving.svg) center / contain no-repeat; }
.chat-panel.reports .chat-empty::before { background-image: url(/assets/brand/blip-thinking.svg); }
.chat-empty ~ .chat-empty::before, .chat-report ~ .chat-empty::before { display: none; }

.chat-msg { display: flex; align-items: flex-end; gap: 8px; position: relative; }
.chat-av { width: 32px; height: 32px; border-radius: 50%; flex: none; object-fit: cover; background: var(--by-raised, #20264a); box-shadow: 0 0 0 1px var(--chat-line); }
.chat-bubble { min-width: 0; max-width: calc(100% - 84px); padding: 8px 13px 9px; border-radius: 20px 20px 20px 6px; background: var(--by-glass-lite); box-shadow: var(--by-glass-inner), 0 0 0 1px var(--chat-line); }
.chat-panel[data-ch="team"] .chat-msg:not(.own) .chat-bubble { background: var(--chat-team); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px var(--chat-team-line); }
.chat-meta { display: flex; align-items: baseline; gap: 8px; }
.chat-name { border: 0; background: none; padding: 0; font-weight: 700; font-size: 12px; color: var(--chat-muted); cursor: pointer; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-panel[data-ch="team"] .chat-name { color: var(--by-social-text, #b69cff); }
.chat-name:hover:not(:disabled) { text-decoration: underline; color: var(--chat-text); }
.chat-name:disabled, .chat-panel[data-ch="team"] .chat-name:disabled { cursor: default; color: var(--by-success-text, #5ff2c0); }
.chat-time { font-size: 11px; color: var(--chat-muted); font-variant-numeric: tabular-nums; }
.chat-text { margin: 2px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-rx { display: flex; flex-wrap: wrap; gap: 4px; }
.chat-rx:not(:empty) { margin-top: 6px; }
.chat-rx-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px 0 4px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--by-text, #fff) 8%, transparent); box-shadow: inset 0 0 0 1px var(--chat-line); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; transition: transform var(--by-dur-gummy) var(--by-ease-spring); }
.chat-rx-chip:active { transform: scale(.92, .88); transition-duration: var(--by-dur-instant); }
.chat-rx-chip.mine { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--by-owned, #5ff2c0) 60%, transparent); background: var(--chat-own); }
.chat-rx-chip img { width: 20px; height: 22px; object-fit: contain; }
.chat-more { align-self: center; border: 0; background: none; width: 36px; height: 36px; border-radius: 50%; color: var(--chat-muted); cursor: pointer; opacity: 0; display: grid; place-items: center; flex: none; }
.chat-more svg { width: 20px; height: 20px; }
.chat-msg:hover .chat-more, .chat-more:focus-visible { opacity: 1; }
.chat-more:hover { background: var(--chat-surface); color: var(--chat-text); }
@media (hover: none) { .chat-more { opacity: .75; } }

.chat-msg.own { flex-direction: row-reverse; }
.chat-msg.own .chat-bubble { border-radius: 20px 20px 6px 20px; background: var(--chat-own); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px var(--chat-own-line); }
.chat-msg.own .chat-meta { flex-direction: row-reverse; }
.chat-msg.own .chat-rx { justify-content: flex-end; }
.chat-msg.sys { justify-content: center; }
.chat-sys { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--chat-muted); background: color-mix(in srgb, var(--by-text, #fff) 6%, transparent); padding: 4px 12px 4px 6px; border-radius: 999px; text-align: center; }
.chat-sys::before { content: ""; width: 20px; height: 22px; flex: none; background: url(/assets/brand/blip-happy.svg) center / contain no-repeat; }

.chat-jump { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); border: 0; border-radius: 999px; min-height: 36px; padding: 0 16px; font-weight: 700; font-size: 13px;
  background: var(--by-gummy-gold); color: var(--chat-accent-ink) !important; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .65), 0 3px 0 var(--by-cta-edge, #c98a12), var(--by-shadow-2); cursor: pointer; }
.chat-jump[hidden] { display: none; }

.chat-rules { flex: none; margin: 0; padding: 4px 14px 2px; font-size: 11px; color: var(--chat-muted); }
.chat-notice { flex: none; margin: 4px 10px 0; padding: 8px 12px 8px 44px; min-height: 40px; display: flex; align-items: center; border-radius: 16px; font-size: 13px; font-weight: 500; color: var(--chat-text);
  background: url(/assets/brand/blip-sad.svg) 10px center / 26px auto no-repeat, color-mix(in srgb, var(--chat-bad) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chat-bad) 40%, transparent); }
.chat-notice[data-kind="ok"] { background: url(/assets/brand/blip-happy.svg) 10px center / 26px auto no-repeat, color-mix(in srgb, var(--chat-good) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chat-good) 38%, transparent); }
.chat-notice[hidden] { display: none; }

.chat-form { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px; position: relative; }
.chat-form[hidden] { display: none; }
.chat-input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--by-line, rgba(169, 176, 208, .16)); color: var(--chat-text); font: inherit; font-size: 16px;
  background: color-mix(in srgb, var(--by-bg-deep, #07080f) 55%, transparent); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .28), inset 0 -1px 0 rgba(255, 255, 255, .05); }
.chat-input::placeholder { color: var(--by-text-faint, #7c84ad); }
.chat-panel .chat-input:focus { outline: none; border-color: var(--by-focus, #6cc7ff); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .28), 0 0 0 4px color-mix(in srgb, var(--by-focus, #6cc7ff) 25%, transparent); }
.chat-counter { position: absolute; right: 96px; font-size: 11px; color: var(--chat-muted); pointer-events: none; font-variant-numeric: tabular-nums; }
.chat-send, .chat-gate-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--by-gummy-gold); color: var(--chat-accent-ink) !important; font-weight: 700 !important; font-size: 15px; cursor: pointer; text-decoration: none;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .65), inset 0 -3px 0 rgba(170, 95, 0, .35), 0 3px 0 var(--by-cta-edge, #c98a12); transition: transform var(--by-dur-gummy) var(--by-ease-spring); }
.chat-send:active, .chat-gate-btn:active { transform: scale(.96, .92) translateY(2px); transition-duration: var(--by-dur-instant); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 1px 0 var(--by-cta-edge, #c98a12); }
.chat-gate { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 10px 12px 14px; font-size: 14px; color: var(--chat-muted); text-align: center; border-top: 1px solid var(--chat-line); }
.chat-gate[hidden] { display: none; }
.chat-gate-note { width: 100%; font-size: 12px; }

/* popover: reactions, player menu, report reasons (solid: it sits inside the glass panel, and glass is never nested) */
.chat-pop { position: absolute; z-index: 2; min-width: 210px; max-width: calc(100% - 16px); padding: 6px; border-radius: 18px; background: var(--chat-bg); border: 1px solid var(--by-line-strong, rgba(169, 176, 208, .28)); box-shadow: var(--by-shadow-2); display: flex; flex-direction: column; gap: 2px; }
.chat-pop[hidden] { display: none; }
.chat-pop-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 12px; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--chat-text); text-decoration: none; }
.chat-pop-item:hover, .chat-pop-item:focus-visible { background: var(--chat-surface-2); outline: none; }
.chat-pop-item.chat-danger { color: var(--by-danger-text, #ff6b7d); }
.chat-pop-rx { display: flex; gap: 2px; padding: 2px 2px 6px; border-bottom: 1px solid var(--chat-line); margin-bottom: 4px; }
.chat-pop-expr { border: 0; background: none; padding: 4px; border-radius: 12px; cursor: pointer; line-height: 0; transition: transform var(--by-dur-gummy) var(--by-ease-spring); }
.chat-pop-expr:hover, .chat-pop-expr:focus-visible { background: var(--chat-surface-2); outline: none; transform: translateY(-2px) scale(1.12); }
.chat-pop-expr:active { transform: scale(.9, .84); transition-duration: var(--by-dur-instant); }
.chat-pop-expr.mine { background: var(--chat-own); box-shadow: inset 0 0 0 1.5px var(--chat-own-line); }
.chat-pop-expr img { width: 32px; height: 36px; object-fit: contain; }
.chat-pop-title { margin: 6px 12px 2px; font-size: 12px; font-weight: 700; color: var(--chat-muted); text-transform: uppercase; letter-spacing: .08em; }
.chat-pop-note { margin: 0 12px 6px; font-size: 12px; color: var(--chat-muted); max-width: 260px; }
.chat-pop-person { display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px; border-bottom: 1px solid var(--chat-line); margin-bottom: 4px; font-weight: 700; }
.chat-pop-person img { border-radius: 50%; }
.chat-pop-lv { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--chat-muted); }

/* moderator reports queue */
.chat-report { background: var(--by-glass-lite); box-shadow: inset 0 0 0 1px var(--chat-line); border-radius: var(--chat-radius-sm); padding: 10px 12px; }
.chat-report p { margin: 2px 0; }
.chat-report-head { font-size: 11px; font-weight: 700; color: var(--chat-muted); text-transform: uppercase; letter-spacing: .08em; }
.chat-report-text { font-weight: 600; overflow-wrap: anywhere; }
.chat-report-by { font-size: 12px; color: var(--chat-muted); }
.chat-report-ctx { font-size: 12px; color: var(--chat-muted); margin: 4px 0; }
.chat-report-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chat-report-btns .chat-pop-item { width: auto; background: var(--chat-surface-2); padding: 7px 12px; font-size: 13px; font-weight: 600; border-radius: 999px; }
.chat-panel.reports .chat-form, .chat-panel.reports .chat-rules { display: none; }

/* ---------- in games ---------- */
/* compact, tucked under the top bar, and see-through enough that the HUD under it stays readable */
.chat-panel.in-game { width: min(var(--chat-width), 34vw); min-width: 300px; right: calc(12px + env(safe-area-inset-right)); top: calc(52px + env(safe-area-inset-top)); height: min(420px, calc(100dvh - 68px)); }
.chat-panel.in-game .chat-rules { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .chat-panel.in-game { top: calc(44px + env(safe-area-inset-top)); height: calc(100dvh - 52px - var(--chat-kb)); width: min(340px, 46vw); min-width: 0; border-radius: var(--by-r-lg, 22px); }
  .chat-panel.in-game .chat-head { padding: 6px 8px 6px 10px; }
  .chat-panel.in-game .chat-list { padding: 8px 10px 4px; }
}

/* ---------- phones: bottom sheet ---------- */
@media (max-width: 767px) and (orientation: portrait), (max-width: 520px) {
  .chat-panel, .chat-panel.on-site, .chat-panel.in-game { left: 0; right: 0; top: auto; bottom: var(--chat-kb); width: auto; min-width: 0;
    height: min(74dvh, calc(100dvh - var(--chat-kb) - 48px)); border-radius: var(--by-r-2xl, 36px) var(--by-r-2xl, 36px) 0 0; border-bottom: 0;
    padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
    -webkit-backdrop-filter: blur(var(--by-blur-phone, 10px)) saturate(140%); backdrop-filter: blur(var(--by-blur-phone, 10px)) saturate(140%); }
  .chat-panel.in-game { height: min(56dvh, calc(100dvh - var(--chat-kb) - 60px)); }   /* leaves the top of the game and its HUD in view */
  .chat-head::before { content: ''; position: absolute; left: 50%; top: 7px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: rgba(255, 255, 255, .34); }
  .chat-head { position: relative; padding: 20px 12px 10px 16px; }
  .chat-iconbtn { height: 44px; min-width: 44px; }
  .chat-tab { min-height: 36px; }
  .chat-form { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .chat-input { height: 48px; border-radius: 24px; }   /* 16 px text stops iOS from zooming into the field */
  .chat-send { min-height: 48px; }
  .chat-gate { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .chat-pop-item { padding: 12px 14px; }
  .chat-more { width: 44px; height: 44px; }
  .chat-rx-chip { height: 32px; }
}
/* transform only: an opacity animation would cut the panel's glass off from what is behind it */
@media (prefers-reduced-motion: no-preference) {
  .chat-panel:not([hidden]) { animation: chat-in var(--by-dur-gummy, .5s) var(--by-ease-gummy, ease-out); }
  @keyframes chat-in { from { transform: translateY(14px) scale(.96); } to { transform: none; } }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) and (orientation: portrait), (prefers-reduced-motion: no-preference) and (max-width: 520px) {
  .chat-panel:not([hidden]) { animation: by-sheet-in var(--by-dur-sheet, .46s) var(--by-ease-spring, ease-out); }
}
@media (prefers-reduced-motion: reduce) { .chat-badge { animation: none; } }