/* The chat (ADR-097..101), one component for two pages: the hub's, and T2W's
   (loaded there by the nav the hub splices in). Everything hangs off .hc (the
   panel), .hc-fx (a poke), .hc-toast (a pop-up) and .hc-view (a photo, whole),
   and brings its own colours -- nothing leans on either page's stylesheet, and
   nothing here reaches outside. Opaque on purpose: no glass, so nothing
   re-blurs when a sticker jumps (ADR-091). The motion is a phone's. */

.hc, .hc-fx, .hc-toast, .hc-view {
  --hc-bg: #111114; --hc-el: #1b1b1f; --hc-el2: #242429; --hc-line: rgba(255, 255, 255, .07); --hc-text: #f5f5f7; --hc-muted: #98989f;
  --hc-blue: #0a84ff; --hc-theirs: #26262b; --hc-amber: #ffd60a; --hc-red: #ff453a; --hc-green: #30d158;
  --hc-ios: cubic-bezier(.32, .72, 0, 1); --hc-spring: cubic-bezier(.34, 1.4, .4, 1);
  font: 15px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  color: var(--hc-text); -webkit-font-smoothing: antialiased; letter-spacing: normal; text-transform: none; text-align: left;
}
.hc *, .hc *::before, .hc *::after, .hc-fx *, .hc-toast *, .hc-view * { box-sizing: border-box; }
/* both pages dress their buttons and fields; in here every one starts bare */
.hc button, .hc-fx button, .hc-toast button, .hc-view button {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit;
  line-height: inherit; min-width: 0; min-height: 0; height: auto; width: auto; cursor: pointer; opacity: 1; transform: none;
  transition: none; text-align: inherit; -webkit-tap-highlight-color: transparent; outline: none; }
.hc button:disabled { opacity: 1; cursor: default; }
.hc button:focus-visible, .hc input:focus-visible, .hc textarea:focus-visible, .hc-fx button:focus-visible {
  outline: 2px solid rgba(10, 132, 255, .8); outline-offset: 2px; }
.hc input, .hc textarea { margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit;
  min-width: 0; flex: none; outline: none; padding: 0; width: auto; height: auto; }
.hc img { max-width: none; border: 0; }
/* `hidden` wins over every class here that sets a display (the Done button keeps its place) */
.hc [hidden]:not(.hc-text-btn), .hc-fx [hidden], .hc-toast [hidden] { display: none !important; }
.hc h3, .hc h4, .hc p { margin: 0; font-weight: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
.hc-i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* the panel: a window out of the chat bubble (ui/nav.html, bottom right) on a desktop -- it grows out of the
   bubble and goes back into it, and rides up with it over a docked player -- the whole screen on a phone */
.hc { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(84px + var(--hc-lift, 0px) + env(safe-area-inset-bottom)); z-index: 1000;
  width: min(420px, calc(100vw - 32px)); height: min(720px, calc(100dvh - 160px - var(--hc-lift, 0px) - env(safe-area-inset-bottom)));
  overflow: hidden; background: var(--hc-bg); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 28px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 34px 90px rgba(0, 0, 0, .7);
  transform-origin: calc(100% - 28px) calc(100% + 40px); animation: hc-open .5s var(--hc-ios); }
.hc[hidden] { display: none; }
.hc.closing { animation: hc-shut .24s ease forwards; }
@keyframes hc-open { from { opacity: 0; transform: scale(.7) translateY(24px) } }
@keyframes hc-shut { to { opacity: 0; transform: scale(.85) translateY(16px) } }
@media (max-width: 640px), (max-height: 560px) {
  .hc { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; animation-name: hc-up; }
  .hc.closing { animation-name: hc-down; }
  @keyframes hc-up { from { transform: translateY(100%) } }
  @keyframes hc-down { to { transform: translateY(100%) } }
}
html.hc-lock, html.hc-lock body { overflow: hidden !important; }

/* pages push and pop like a phone's */
.hc .hc-page { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--hc-bg);
  transform: translateX(104%); visibility: hidden; transition: transform .5s var(--hc-ios), filter .5s var(--hc-ios), visibility 0s .5s; }
.hc .hc-page.on { transform: none; visibility: visible; transition: transform .5s var(--hc-ios), filter .5s var(--hc-ios), visibility 0s; }
.hc .hc-page.left { transform: translateX(-26%); visibility: visible; filter: brightness(.5); transition: transform .5s var(--hc-ios), filter .5s var(--hc-ios), visibility 0s; }
.hc .hc-head { flex: none; display: flex; align-items: center; gap: 6px; min-height: 60px; padding: 10px 12px; border-bottom: 1px solid var(--hc-line); }
.hc .hc-head.big { padding: 18px 14px 8px 22px; border-bottom: 0; }
.hc .hc-title { flex: 1; min-width: 0; font-size: 30px; font-weight: 750; letter-spacing: -.025em; }
.hc .hc-ptitle { flex: 1; min-width: 0; text-align: center; font-size: 16px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc .hc-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.hc .hc-scroll, .hc .hc-msgs, .hc .hc-tray { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }

/* round buttons: one size, the icon in the middle, a press that gives */
.hc .hc-btn { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--hc-text);
  background: rgba(255, 255, 255, .08); transition: transform .3s var(--hc-spring), background .2s, color .2s; }
.hc .hc-btn:hover { background: rgba(255, 255, 255, .14); }
.hc .hc-btn:active { transform: scale(.88); }
.hc .hc-btn.plain { background: none; }
.hc .hc-btn.plain:hover { background: rgba(255, 255, 255, .08); }
.hc .hc-btn.back { color: var(--hc-blue); background: none; }
.hc .hc-btn.back .hc-i { width: 24px; height: 24px; stroke-width: 2.4; }
.hc .hc-btn.poke { color: var(--hc-amber); background: rgba(255, 214, 10, .14); }
.hc .hc-btn.poke:hover { background: rgba(255, 214, 10, .22); }
.hc .hc-text-btn { flex: none; padding: 8px 10px; border-radius: 10px; color: var(--hc-blue); font-size: 16px; font-weight: 650; }
.hc .hc-text-btn:disabled { color: var(--hc-muted); }
.hc .hc-text-btn[hidden] { display: block; visibility: hidden; }

/* faces: a photo, an emoji on a colour, or an initial; a channel's is squared */
.hc .hc-av, .hc-toast .hc-av, .hc-fx .hc-av { --s: 40px; position: relative; flex: none; display: grid; place-items: center; width: var(--s); height: var(--s);
  border-radius: 50%; background: #3a3a40; color: #fff; font-weight: 650; font-size: calc(var(--s) * .42); line-height: 1; user-select: none; }
.hc .hc-av img, .hc-toast .hc-av img, .hc-fx .hc-av img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.hc .hc-av.emoji, .hc-toast .hc-av.emoji, .hc-fx .hc-av.emoji { font-size: calc(var(--s) * .55); }
.hc .hc-av.ch { border-radius: 30%; font-size: calc(var(--s) * .5); }
.hc .hc-av.ghost { visibility: hidden; --s: 28px; }
.hc .hc-on { position: absolute; right: 0; bottom: 0; width: calc(var(--s) * .28); height: calc(var(--s) * .28); min-width: 10px; min-height: 10px;
  border-radius: 50%; background: var(--hc-green); box-shadow: 0 0 0 2.5px var(--hc-bg); }

/* the list */
.hc .hc-me { width: calc(100% - 24px); margin: 4px 12px 8px; display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  border-radius: 20px; background: var(--hc-el); text-align: left; transition: transform .3s var(--hc-spring), background .2s; }
.hc .hc-me:hover { background: var(--hc-el2); }
.hc .hc-me:active { transform: scale(.98); }
.hc .hc-me-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hc .hc-me-t strong { font-size: 17px; font-weight: 650; }
.hc .hc-me-t span { font-size: 13px; color: var(--hc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc .hc-chev { flex: none; color: var(--hc-muted); }
.hc .hc-chev .hc-i { width: 18px; height: 18px; }
.hc .hc-bellrow { width: calc(100% - 24px); margin: 0 12px 6px; display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border-radius: 16px; background: var(--hc-el); transition: background .2s; }
.hc .hc-bellrow:hover { background: var(--hc-el2); }
.hc .hc-bellrow .hc-bi { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, #ff453a, #ff9f0a); color: #fff; }
.hc .hc-bellrow .hc-bi .hc-i { width: 17px; height: 17px; }
.hc .hc-bell-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; }
.hc .hc-bell-t b { font-size: 16px; font-weight: 600; }
.hc .hc-bell-t span { color: var(--hc-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc .hc-sec { display: flex; align-items: center; justify-content: space-between; margin: 16px 22px 6px; color: var(--hc-muted);
  font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.hc .hc-sec .hc-add { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(10, 132, 255, .14);
  color: var(--hc-blue); font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.hc .hc-sec .hc-add .hc-i { width: 14px; height: 14px; stroke-width: 2.6; }
.hc .hc-list { padding: 0 8px; }
.hc .hc-item { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 16px; border-radius: 16px;
  text-align: left; transition: background .2s; }
.hc .hc-item:hover { background: rgba(255, 255, 255, .045); }
.hc .hc-item:active { background: rgba(255, 255, 255, .08); }
.hc .hc-item + .hc-item::before { content: ""; position: absolute; left: 76px; right: 10px; top: 0; border-top: 1px solid var(--hc-line); }
.hc .hc-dot { position: absolute; left: 4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--hc-blue);
  transform: scale(0); transition: transform .35s var(--hc-spring); }
.hc .hc-item.unread .hc-dot { transform: scale(1); }
.hc .hc-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hc .hc-item-top { display: flex; align-items: baseline; gap: 8px; }
.hc .hc-item-name { flex: 1; min-width: 0; font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc .hc-item-when { flex: none; color: var(--hc-muted); font-size: 12px; }
.hc .hc-item-last { color: var(--hc-muted); font-size: 14px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hc .hc-item.unread .hc-item-last { color: #d1d1d6; }
.hc .hc-item-last.typing { color: var(--hc-blue); font-style: italic; }
.hc .hc-count { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--hc-blue); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; animation: hc-pop .35s var(--hc-spring); }
.hc .hc-count.red { background: var(--hc-red); }
/* a muted chat: a grey count, a grey dot, a struck bell by its name */
.hc .hc-count.quiet { background: rgba(255, 255, 255, .18); color: #d1d1d6; }
.hc .hc-item.muted .hc-dot { background: var(--hc-muted); }
.hc .hc-muted { display: inline-flex; margin-left: 5px; vertical-align: -2px; color: var(--hc-muted); }
.hc .hc-muted .hc-i { width: 14px; height: 14px; }
.hc .hc-draft { color: #ff6961; font-style: normal; font-weight: 600; }
.hc .hc-empty { color: var(--hc-muted); font-size: 13px; padding: 14px 22px; }

/* a room */
.hc .hc-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border-radius: 14px; text-align: left; transition: background .2s; }
.hc .hc-who:hover { background: rgba(255, 255, 255, .05); }
.hc .hc-who-t { min-width: 0; display: flex; flex-direction: column; }
.hc .hc-who-t strong { font-size: 16px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc .hc-who-sub { color: var(--hc-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc .hc-msgs { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 14px 8px; display: flex; flex-direction: column; overscroll-behavior: contain; }
.hc .hc-older { align-self: center; margin: 4px 0 10px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .07); font-size: 13px; }
.hc .hc-hello { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--hc-muted); font-size: 14px; padding: 20px; }
.hc .hc-hello strong { color: var(--hc-text); font-size: 18px; font-weight: 650; }
.hc .hc-when { align-self: center; margin: 14px 0 6px; font-size: 11px; font-weight: 600; color: var(--hc-muted); }
.hc .hc-new { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; color: #ff6961; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hc .hc-new::before, .hc .hc-new::after { content: ""; flex: 1; border-top: 1px solid rgba(255, 105, 97, .4); }
.hc .msg { position: relative; display: flex; flex-direction: column; align-items: flex-start; margin-top: 2px; transition: transform .3s var(--hc-ios); }
.hc .msg.first { margin-top: 8px; }
.hc .msg.mine { align-items: flex-end; }
.hc .msg.reacted { margin-top: 16px; }
.hc .msg.in { animation: hc-msg-in .42s var(--hc-ios) both; transform-origin: 0 100%; }
.hc .msg.mine.in { transform-origin: 100% 100%; }
@keyframes hc-msg-in { from { opacity: 0; transform: translateY(16px) scale(.9) } }
.hc .msg.flash .b { animation: hc-flash 1s ease; }
@keyframes hc-flash { 30% { filter: brightness(1.8) } }
.hc .msg-name { margin: 0 0 3px 50px; font-size: 12px; font-weight: 650; }
/* the line is the room's width, so a bubble's 78% is the room's -- not its own (which wrapped a short line early) */
.hc .msg-line { display: flex; align-items: flex-end; gap: 8px; width: 100%; }
.hc .msg.mine .msg-line { justify-content: flex-end; }
.hc .msg-wrap { position: relative; min-width: 0; max-width: min(78%, 340px); display: flex; flex-direction: column; }
.hc .msg.mine .msg-wrap { align-items: flex-end; }
.hc .msg-meta { margin: 3px 6px 0; font-size: 11px; color: var(--hc-muted); }
.hc .msg-meta.receipt { font-weight: 600; }
/* what you sent, before the server has it: there at once, a shade lighter; if it did not go, a way to try again */
.hc .msg.tmp .b { opacity: .72; }
.hc .msg-meta.failed { display: flex; align-items: center; gap: 5px; color: #ff6961; font-weight: 600; }
.hc .msg-meta.failed .hc-i { width: 13px; height: 13px; stroke-width: 2.4; }
/* swipe a bubble right to reply: the arrow grows in from the edge */
.hc .msg .b { touch-action: pan-y; }
.hc .hc-swipe { position: absolute; left: -36px; top: 50%; margin-top: -14px; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: rgba(255, 255, 255, .14); opacity: 0; transition: background .2s; }
.hc .hc-swipe.go { background: var(--hc-blue); }
.hc .hc-swipe .hc-i { width: 15px; height: 15px; }
/* @names: blue in their words, yours marked; a bubble that names you glows amber */
.hc .hc-at { font-weight: 700; }
.hc .msg:not(.mine) .hc-at { color: #64d2ff; }
.hc .hc-at.me { padding: 0 3px; border-radius: 5px; background: rgba(255, 214, 10, .2); color: #ffe26b !important; }
.hc .b.text.mentioned { --hc-theirs: #3a3320; }
.hc .b { position: relative; }
.hc .b.text { padding: 8px 13px; border-radius: 20px; background: var(--hc-theirs); line-height: 1.36; font-size: 15.5px;
  white-space: pre-wrap; overflow-wrap: anywhere; cursor: default; }
.hc .msg.mine .b.text { background: var(--hc-blue); color: #fff; }
.hc .msg.mine:not(.first) .b.text { border-top-right-radius: 6px; }
.hc .msg.mine:not(.last) .b.text { border-bottom-right-radius: 6px; }
.hc .msg:not(.mine):not(.first) .b.text { border-top-left-radius: 6px; }
.hc .msg:not(.mine):not(.last) .b.text { border-bottom-left-radius: 6px; }
/* the tail, iMessage's trick: a curve of the bubble's colour, carved by one of the panel's
   (the carving stays inside the room: .hc-msgs never scrolls sideways) */
.hc .msg.last .b.text::before, .hc .msg.last .b.text::after { content: ""; position: absolute; bottom: 0; height: 20px; }
.hc .msg.last.mine .b.text::before { right: -7px; width: 20px; background: var(--hc-blue); border-bottom-left-radius: 16px 14px; }
.hc .msg.last.mine .b.text::after { right: -14px; width: 14px; background: var(--hc-bg); border-bottom-left-radius: 10px; }
.hc .msg.last:not(.mine) .b.text::before { left: -7px; width: 20px; background: var(--hc-theirs); border-bottom-right-radius: 16px 14px; }
.hc .msg.last:not(.mine) .b.text::after { left: -14px; width: 14px; background: var(--hc-bg); border-bottom-right-radius: 10px; }
.hc .b.text.big { padding: 0 2px; background: none !important; font-size: 44px; line-height: 1.15; }
.hc .b.text.big::before, .hc .b.text.big::after { display: none; }
.hc .b.text a { color: inherit; text-decoration: underline; }
.hc .hc-emo { display: inline-block; width: 1.35em; height: 1.35em; margin: -.2em .05em; vertical-align: middle; object-fit: contain; }
.hc .b.text.big .hc-emo { width: 1.1em; height: 1.1em; margin: 0 .03em; }
.hc .hc-quote { display: flex; flex-direction: column; gap: 1px; width: 100%; margin: 0 0 6px; padding: 6px 10px; border-left: 3px solid rgba(255, 255, 255, .55);
  border-radius: 8px; background: rgba(0, 0, 0, .18); text-align: left; font-size: 13px; }
.hc .hc-quote b { font-size: 12px; font-weight: 700; }
.hc .hc-quote span { opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc .b.gone { padding: 7px 13px; border-radius: 20px; border: 1px dashed rgba(255, 255, 255, .18); color: var(--hc-muted); font-size: 14px; font-style: italic; }
.hc .b.card { display: flex; gap: 12px; width: 280px; max-width: 100%; padding: 8px; border-radius: 18px; background: var(--hc-el); border: 1px solid var(--hc-line);
  color: var(--hc-text); text-decoration: none; transition: transform .3s var(--hc-spring); }
.hc .b.card:active { transform: scale(.97); }
.hc .b.card img { width: 70px; height: 105px; object-fit: cover; border-radius: 10px; flex: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); }
.hc .card-t { display: flex; flex-direction: column; gap: 3px; justify-content: center; min-width: 0; padding-right: 4px; }
.hc .card-t strong { font-size: 15px; line-height: 1.25; font-weight: 650; }
.hc .card-sub { color: var(--hc-muted); font-size: 13px; }
.hc .card-go { margin-top: 6px; color: var(--hc-blue); font-size: 13px; font-weight: 650; }
.hc .b.photo { display: block; overflow: hidden; border-radius: 18px; background: var(--hc-el); cursor: zoom-in; }
.hc .b.photo img { display: block; width: 240px; max-width: 100%; max-height: 320px; object-fit: cover; }
.hc .msg.poke { align-items: center; margin: 12px 0; }
.hc .msg.poke .hc-pk { display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: rgba(255, 214, 10, .12);
  color: #ffe26b; font-size: 13px; font-weight: 650; }
.hc .msg.poke .hc-pk i { font-style: normal; font-size: 18px; display: inline-block; }
.hc .msg.poke.in .hc-pk { animation: hc-poke-in .7s var(--hc-spring) both; }
.hc .msg.poke.in .hc-pk i { animation: hc-tap .45s ease-in-out .5s 3; }
@keyframes hc-poke-in { 0% { transform: scale(.4) rotate(-10deg); opacity: 0 } 60% { transform: scale(1.12) rotate(4deg) } 100% { transform: none } }
@keyframes hc-tap { 50% { transform: translateX(6px) scale(.9) } }
.hc .tapb { position: absolute; top: -15px; right: -10px; z-index: 1; padding: 3px 8px; border-radius: 999px; background: #2c2c32;
  border: 2px solid var(--hc-bg); font-size: 13px; line-height: 1.2; animation: hc-pop .35s var(--hc-spring); white-space: nowrap; }
.hc .msg.mine .tapb { right: auto; left: -10px; }
.hc .tapb.me { background: #0a3d73; }
.hc .b.dots { display: flex; gap: 4px; padding: 12px 14px; }
.hc .b.dots i { width: 8px; height: 8px; border-radius: 50%; background: #8e8e93; animation: hc-dot 1.2s ease-in-out infinite; }
.hc .b.dots i:nth-child(2) { animation-delay: .15s } .hc .b.dots i:nth-child(3) { animation-delay: .3s }
@keyframes hc-dot { 0%, 60%, 100% { transform: none; opacity: .5 } 30% { transform: translateY(-4px); opacity: 1 } }
.hc .hc-jump { position: absolute; right: 16px; bottom: 80px; z-index: 3; display: flex; align-items: center; gap: 4px; height: 36px; min-width: 36px;
  padding: 0 10px; border-radius: 18px; background: #2c2c32; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); font-size: 13px; font-weight: 700;
  justify-content: center; animation: hc-pop .3s var(--hc-spring); }
.hc .hc-jump[hidden] { display: none; }
.hc .hc-jump span:empty { display: none; }
.hc .hc-jump .hc-i { width: 18px; height: 18px; }

/* stickers: big emoji, words in colour, or the house's own pictures; each moves once when it
   arrives, and again when tapped */
.hc .b.st { display: inline-block; padding: 0 2px; cursor: pointer; user-select: none; line-height: 1.1; }
.hc .b.st.emoji { font-size: 72px; }
.hc .b.st.pic img { display: block; max-width: 170px; max-height: 170px; object-fit: contain; }
.hc .b.st.pic img[src*="/her-"] { width: 130px; height: 130px; }        /* her (T2W ADR-138): an SVG without a size of its own */
.hc .st-words, .hc-fx .st-words { display: inline-block; padding: 12px 18px; border-radius: 18px; font-size: 18px; font-weight: 850; letter-spacing: .02em;
  color: #fff; rotate: -2deg; white-space: nowrap; box-shadow: 0 12px 28px rgba(0, 0, 0, .35); }
.st-words.sunset { background: linear-gradient(135deg, #ff9f0a, #ff375f); }
.st-words.ocean { background: linear-gradient(135deg, #0a84ff, #40c8e0); }
.st-words.lime { background: linear-gradient(135deg, #30d158, #a3e635); color: #0b2a12; }
.st-words.grape { background: linear-gradient(135deg, #bf5af2, #5e5ce6); }
.st-words.fire { background: linear-gradient(135deg, #ff453a, #ff9f0a); }
.st-words.mono { background: #f5f5f7; color: #1c1c1e; }
.st-words.gold { background: linear-gradient(135deg, #ffd60a, #ff9f0a); color: #3a2400; }
.st-words.candy { background: linear-gradient(135deg, #ff375f, #bf5af2 60%, #0a84ff); }
.st-words .ch { display: inline-block; white-space: pre; }
.a-bounce { animation: st-bounce .9s var(--hc-spring) 1; }
.a-wobble { animation: st-wobble .8s ease 1; }
.a-pulse { animation: st-pulse .8s ease 1; }
.a-pop { animation: st-pop .6s var(--hc-spring) 1; }
.a-spin { animation: st-spin .8s ease 1; }
.a-shake { animation: st-shake .6s ease 1; }
.a-float { animation: st-float 1.4s ease 1; }
.a-zoom { animation: st-zoom .7s var(--hc-ios) 1; }
.a-run { animation: st-run .9s cubic-bezier(.2, .9, .3, 1.2) 1; }
.a-hush { animation: st-hush 1.1s ease 1; }
.a-flicker { animation: st-flicker 1.2s steps(1) 1; }
.a-drift { animation: st-drift 1.8s ease 1; }
.a-wave .ch { animation: st-wave .8s ease calc(var(--i) * 45ms) 2; }
@keyframes st-bounce { 0% { transform: translateY(40px) scale(.3) } 60% { transform: translateY(-14px) scale(1.1) } 100% { transform: none } }
@keyframes st-wobble { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-14deg) } 50% { transform: rotate(12deg) } 75% { transform: rotate(-6deg) } }
@keyframes st-pulse { 0%, 100% { transform: scale(1) } 30% { transform: scale(1.35) } 60% { transform: scale(.92) } }
@keyframes st-pop { from { transform: scale(0) } to { transform: scale(1) } }
@keyframes st-spin { from { transform: rotate(-360deg) scale(.4) } to { transform: none } }
@keyframes st-shake { 0%, 100% { transform: translateX(0) } 20%, 60% { transform: translateX(-9px) } 40%, 80% { transform: translateX(9px) } }
@keyframes st-float { 0% { transform: translateY(26px); opacity: 0 } 100% { transform: none; opacity: 1 } }
@keyframes st-zoom { 0% { transform: scale(2.6); opacity: 0; filter: blur(8px) } 100% { transform: none; opacity: 1; filter: none } }
/* SNACK RUN comes in at a sprint, leaning, and skids to a stop */
@keyframes st-run { 0% { transform: translateX(-160%) skewX(-18deg) } 65% { transform: translateX(10%) skewX(12deg) } 82% { transform: translateX(-3%) skewX(-4deg) } 100% { transform: none } }
/* SHH pulls itself in: loud and wide, then quiet */
@keyframes st-hush { 0% { transform: scale(1.35); letter-spacing: .5em; opacity: 0; filter: blur(4px) } 45% { opacity: 1; filter: none }
  70% { transform: scale(.94); letter-spacing: -.02em } 100% { transform: none; letter-spacing: .02em } }
/* PAUSE freezes like a stuck screen: it blinks and tears before it holds */
@keyframes st-flicker { 0% { opacity: 0 } 10% { opacity: 1; transform: translateX(-4px); text-shadow: 3px 0 #ff375f, -3px 0 #40c8e0 }
  20% { opacity: .25 } 30% { opacity: 1; transform: translateX(3px) } 45% { opacity: .5; text-shadow: -2px 0 #ff375f, 2px 0 #40c8e0 }
  55% { opacity: 1; transform: none; text-shadow: none } 70% { opacity: .7 } 80% { opacity: 1 } }
/* GOOD NIGHT nods off: it drifts down, sways, settles */
@keyframes st-drift { 0% { transform: translateY(-30px) rotate(-8deg); opacity: 0 } 35% { transform: translateY(4px) rotate(4deg); opacity: 1 }
  60% { transform: translateY(-3px) rotate(-3deg) } 100% { transform: none } }
@keyframes st-wave { 0%, 100% { transform: none } 40% { transform: translateY(-9px) } }

/* hold a bubble: the room dims, the bubble lifts, the reactions spring above it */
.hc .hc-menu { position: absolute; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0); transition: background .25s; }
.hc .hc-menu.on { background: rgba(0, 0, 0, .64); }
.hc .hc-menu.off { background: rgba(0, 0, 0, 0); pointer-events: none; }
.hc .hc-menu .lifted { position: absolute; margin: 0; max-width: none; transition: transform .35s var(--hc-spring); }
.hc .hc-menu.on .lifted { transform: scale(1.04); }
.hc .hc-menu.off .lifted, .hc .hc-menu.off .hc-tb, .hc .hc-menu.off .hc-acts { opacity: 0; transition: opacity .15s; }
.hc .hc-tb { position: absolute; display: flex; gap: 2px; padding: 5px 6px; border-radius: 999px; background: #2c2c32; box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
  transform-origin: 50% 100%; animation: hc-tb-in .4s var(--hc-spring) both; }
@keyframes hc-tb-in { from { opacity: 0; transform: scale(.6) translateY(10px) } }
.hc .hc-tb button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 24px; line-height: 1;
  animation: hc-pop .45s var(--hc-spring) both; transition: transform .2s var(--hc-spring), background .2s; }
.hc .hc-tb button:hover { transform: scale(1.25); }
.hc .hc-tb button.on { background: var(--hc-blue); }
.hc .hc-acts { position: absolute; min-width: 220px; overflow: hidden; border-radius: 16px; background: var(--hc-el2); box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
  transform-origin: 50% 0; animation: hc-tb-in .4s var(--hc-ios) both; }
.hc .hc-acts button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 16px; font-size: 15px; text-align: left; }
.hc .hc-acts button + button { border-top: 1px solid rgba(255, 255, 255, .08); }
.hc .hc-acts button:hover { background: rgba(255, 255, 255, .06); }
.hc .hc-acts .hc-i { width: 18px; height: 18px; opacity: .85; }
.hc .hc-acts .danger { color: var(--hc-red); }
.hc .hc-acts .danger.sure { background: rgba(255, 69, 58, .14); font-weight: 650; }

/* writing: @ offers the people here, :xx the house's emoji */
.hc .hc-sugg { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; }
.hc .hc-sg { display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 3px 12px 3px 4px; border-radius: 999px; background: var(--hc-el2);
  font-size: 14px; font-weight: 600; animation: hc-pop .3s var(--hc-spring) both; transition: transform .25s var(--hc-spring), background .2s; }
.hc .hc-sg:hover { background: #303036; }
.hc .hc-sg:active { transform: scale(.94); }
.hc .hc-sg img { width: 24px; height: 24px; object-fit: contain; }
.hc .hc-sg:nth-child(2) { animation-delay: .03s } .hc .hc-sg:nth-child(3) { animation-delay: .06s } .hc .hc-sg:nth-child(4) { animation-delay: .09s }
.hc .hc-bar { flex: none; display: flex; align-items: center; gap: 10px; margin: 0 12px; padding: 8px 10px 8px 12px; border-radius: 14px 14px 0 0;
  background: var(--hc-el); border-left: 3px solid var(--hc-blue); animation: hc-bar-in .3s var(--hc-ios); }
.hc .hc-bar[hidden] { display: none; }
@keyframes hc-bar-in { from { opacity: 0; transform: translateY(10px) } }
.hc .hc-bar-t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.hc .hc-bar-t b { color: var(--hc-blue); font-size: 12px; font-weight: 700; }
.hc .hc-bar-t span { color: var(--hc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc .hc-bar .hc-btn { width: 26px; height: 26px; }
.hc .hc-bar .hc-btn .hc-i { width: 14px; height: 14px; }
.hc .hc-form { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); }
.hc .hc-form > .hc-btn { margin-bottom: 1px; }
.hc .hc-plus.on { transform: rotate(45deg); background: rgba(255, 255, 255, .18); }
.hc .hc-plus.busy { opacity: .45; animation: hc-spin 1s linear infinite; }
@keyframes hc-spin { to { transform: rotate(360deg) } }
.hc .hc-field { flex: 1; min-width: 0; display: flex; align-items: flex-end; border: 1px solid rgba(255, 255, 255, .16); border-radius: 20px; background: var(--hc-el);
  transition: border-color .2s; }
.hc .hc-field:focus-within { border-color: rgba(255, 255, 255, .3); }
.hc .hc-field textarea { flex: 1; min-width: 0; resize: none; max-height: 120px; overflow-y: hidden; padding: 8px 4px 8px 14px; font-size: 16px; line-height: 1.3;
  white-space: pre-wrap; }
.hc .hc-field textarea::placeholder { color: var(--hc-muted); }
/* her while you type (T2W ADR-138): the box's own letters are see-through, the mirror behind it draws them */
.hc .hc-typed { position: relative; flex: 1; min-width: 0; display: flex; }
.hc .hc-typed textarea { color: transparent; caret-color: var(--hc-text); scrollbar-width: none; }
.hc .hc-typed textarea::selection { color: transparent; background: rgba(10, 132, 255, .35); }
.hc .hc-mirror { position: absolute; inset: 0; overflow: hidden; padding: 8px 4px 8px 14px; font-size: 16px; line-height: 1.3;
  white-space: pre-wrap; overflow-wrap: break-word; color: var(--hc-text); pointer-events: none; }
.hc .hc-slot { position: relative; color: transparent; }
.hc .hc-slot img { position: absolute; left: 50%; top: 50%; width: 1.35em; height: 1.35em; translate: -50% -50%; }
.hc .hc-field textarea:focus-visible { outline: none; }                /* the field's rim says it */
.hc .hc-field .hc-btn { width: 34px; height: 34px; margin: 1px; color: var(--hc-muted); }
.hc .hc-field .hc-btn:hover { color: var(--hc-text); }
.hc .hc-send { background: var(--hc-blue); color: #fff; transition: transform .35s var(--hc-spring), background .2s, color .2s; }
.hc .hc-send:hover { background: #2a95ff; }
.hc .hc-send .hc-i { stroke-width: 2.6; }
.hc .hc-send:disabled { background: rgba(255, 255, 255, .1); color: var(--hc-muted); transform: scale(.88); }
.hc .hc-send.go { animation: hc-go .45s var(--hc-spring); }
@keyframes hc-go { 40% { transform: translateY(-6px) scale(1.1) } }

/* the tray: the apps, the picker (stickers, GIFs, emoji), a film */
.hc .hc-tray { flex: none; max-height: min(44vh, 320px); overflow-y: auto; overflow-x: hidden; padding: 12px; border-top: 1px solid var(--hc-line); background: #151518; }
.hc .hc-tray[hidden] { display: none; }
.hc .hc-tray.in { animation: hc-tray-in .38s var(--hc-ios); }
@keyframes hc-tray-in { from { opacity: 0; transform: translateY(20px) } }
.hc .hc-apps { display: flex; justify-content: space-around; gap: 8px; padding: 4px 0; }
.hc .hc-app { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 12px; animation: hc-pop .45s var(--hc-spring) both; }
.hc .hc-app span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; color: #fff; transition: transform .3s var(--hc-spring); }
.hc .hc-app span .hc-i { width: 26px; height: 26px; stroke-width: 1.9; }
.hc .hc-app:active span { transform: scale(.88); }
.hc .hc-app.c1 span { background: linear-gradient(135deg, #ff9f0a, #ff375f); }
.hc .hc-app.c2 span { background: linear-gradient(135deg, #bf5af2, #5e5ce6); }
.hc .hc-app.c3 span { background: linear-gradient(135deg, #5e5ce6, #0a84ff); }
.hc .hc-app.c4 span { background: linear-gradient(135deg, #ffd60a, #ff9f0a); color: #3a2400; }
.hc .hc-app:nth-child(2) { animation-delay: .04s } .hc .hc-app:nth-child(3) { animation-delay: .08s } .hc .hc-app:nth-child(4) { animation-delay: .12s }
.hc .hc-seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0 auto 12px; max-width: 320px; padding: 3px; border-radius: 10px;
  background: rgba(255, 255, 255, .08); }
.hc .hc-seg-pill { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 3)); border-radius: 8px; background: #48484e;
  transform: translateX(calc(var(--x, 0) * 100%)); transition: transform .35s var(--hc-ios); }
.hc .hc-seg button { position: relative; font-size: 13px; font-weight: 650; padding: 6px; text-align: center; color: var(--hc-muted); transition: color .2s; }
.hc .hc-seg button.on { color: var(--hc-text); }
.hc .hc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.hc .hc-grid.wide { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.hc .hc-tile { position: relative; display: grid; place-items: center; min-height: 62px; padding: 6px; border-radius: 16px; background: var(--hc-el);
  overflow: hidden; animation: hc-pop .4s var(--hc-spring) both; transition: transform .25s var(--hc-spring), background .2s; }
.hc .hc-tile:hover { transform: scale(1.06); background: var(--hc-el2); }
.hc .hc-tile:active { transform: scale(.9); }
.hc .hc-tile.emoji { font-size: 34px; line-height: 1; }
.hc .hc-tile.words { grid-column: span 2; }
.hc .hc-tile .st-words { font-size: 10px; padding: 7px 9px; border-radius: 10px; box-shadow: none; rotate: 0deg; }
.hc .hc-tile img { max-width: 100%; max-height: 72px; object-fit: contain; }
.hc .hc-tile img[src*="/her-"] { width: 64px; height: 64px; }
.hc .hc-tile.gif { padding: 0; aspect-ratio: 1; }
.hc .hc-tile.gif img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.hc .hc-tile.make { color: var(--hc-blue); background: rgba(10, 132, 255, .1); font-size: 11px; font-weight: 700; gap: 2px; align-content: center; }
.hc .hc-tile.make .hc-i { width: 22px; height: 22px; margin: 0 auto; }
.hc .hc-emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 2px; }
.hc .hc-emojis button { display: grid; place-items: center; height: 40px; border-radius: 10px; font-size: 25px; line-height: 1; transition: transform .2s var(--hc-spring), background .2s; }
.hc .hc-emojis button:hover { background: rgba(255, 255, 255, .08); transform: scale(1.15); }
.hc .hc-emojis img { width: 28px; height: 28px; object-fit: contain; }
.hc .hc-emojis.her img { width: 32px; height: 32px; }
.hc .hc-tb button img { width: 30px; height: 30px; object-fit: contain; pointer-events: none; }   /* her, in the reaction bar (T2W ADR-138) */
.hc .tapb img { width: 1.25em; height: 1.25em; vertical-align: -.3em; }
.hc .hc-emojis .hc-add-emoji { color: var(--hc-blue); background: rgba(10, 132, 255, .12); }
.hc .hc-emojis .hc-add-emoji .hc-i { width: 20px; height: 20px; stroke-width: 2.4; }
.hc .hc-sub { margin: 12px 2px 6px; color: var(--hc-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hc .hc-now { width: 100%; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 10px 12px; border-radius: 14px; background: var(--hc-el); font-size: 14px; overflow: hidden; }
.hc .hc-now strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.hc .hc-now i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--hc-red); box-shadow: 0 0 0 4px rgba(255, 69, 58, .2); }
.hc .hc-find { width: 100%; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .08); font-size: 15px; }
.hc .hc-hits { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.hc .hc-hit { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 12px; text-align: left; }
.hc .hc-hit:hover { background: rgba(255, 255, 255, .06); }
.hc .hc-hit img { width: 38px; height: 57px; object-fit: cover; border-radius: 7px; flex: none; }
.hc .hc-hit-t { display: flex; flex-direction: column; min-width: 0; }
.hc .hc-hit-t span { color: var(--hc-muted); font-size: 12px; }

/* pages of settings: profiles, a channel, making a sticker or an emoji */
.hc .hc-pbody { padding: 0 18px 30px; }
.hc .hc-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 0 8px; text-align: center; }
.hc .hc-hero-face .hc-av { box-shadow: 0 16px 40px rgba(0, 0, 0, .5); animation: hc-hero-in .5s var(--hc-spring); }
@keyframes hc-hero-in { from { transform: scale(.7); opacity: 0 } }
.hc .hc-hero-face.busy { opacity: .5; }
.hc .hc-hero-name { font-size: 24px; font-weight: 700; margin-top: 6px; }
.hc .hc-hero-sub { color: var(--hc-muted); font-size: 14px; min-height: 18px; }
.hc .hc-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
/* pills: one height, one press, one way of being off */
.hc .hc-pill { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); font-size: 14px; font-weight: 650; white-space: nowrap; transition: transform .3s var(--hc-spring), background .2s, opacity .2s; }
.hc .hc-pill:hover { background: rgba(255, 255, 255, .15); }
.hc .hc-pill:active { transform: scale(.94); }
.hc .hc-pill:disabled { opacity: .5; transform: none; }
.hc .hc-pill .hc-i { width: 16px; height: 16px; }
.hc .hc-pill.blue { background: var(--hc-blue); color: #fff; }
.hc .hc-pill.blue:hover { background: #2a95ff; }
.hc .hc-pill.amber { background: rgba(255, 214, 10, .16); color: var(--hc-amber); }
.hc .hc-pill.amber:hover { background: rgba(255, 214, 10, .24); }
.hc .hc-pill.red { background: rgba(255, 69, 58, .1); color: #ff6961; }
.hc .hc-pill.red:hover, .hc .hc-pill.red.sure { background: rgba(255, 69, 58, .2); }
.hc .hc-pill.small { min-height: 32px; padding: 0 12px; font-size: 13px; }
.hc .hc-pill.small .hc-i { width: 14px; height: 14px; }
.hc .hc-pill[hidden] { display: none; }
.hc .hc-block { margin-top: 20px; }
.hc .hc-block h4 { margin: 0 0 8px 4px; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--hc-muted); }
.hc .hc-card { padding: 10px; border-radius: 16px; background: var(--hc-el); }
.hc .hc-emo-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.hc .hc-emo-pick button { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font-size: 24px; line-height: 1; transition: transform .25s var(--hc-spring), background .2s; }
.hc .hc-emo-pick button:hover { transform: scale(1.12); }
.hc .hc-emo-pick button.on { background: rgba(10, 132, 255, .3); box-shadow: inset 0 0 0 2px var(--hc-blue); }
.hc .hc-swatches { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; }
.hc .hc-swatches button { width: 32px; height: 32px; border-radius: 50%; transition: transform .3s var(--hc-spring), box-shadow .2s; }
.hc .hc-swatches button.on { box-shadow: 0 0 0 3px var(--hc-el), 0 0 0 5px #fff; transform: scale(1.08); }
.hc .hc-swatches.looks button { width: 54px; height: 32px; border-radius: 10px; }
.hc .hc-input { width: 100%; padding: 12px 14px; border-radius: 14px; background: var(--hc-el); font-size: 16px; }
.hc .hc-input::placeholder { color: var(--hc-muted); }
.hc .hc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hc .hc-chips button { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .07);
  font-size: 13px; transition: background .2s, transform .25s var(--hc-spring); }
.hc .hc-chips button:hover { background: rgba(255, 255, 255, .12); }
.hc .hc-chips button:active { transform: scale(.94); }
.hc .hc-chips button.on { background: var(--hc-blue); color: #fff; }
.hc .hc-link { margin-top: 10px; padding: 4px; color: #ff6961; font-size: 14px; }
.hc .hc-note { margin-top: 22px; color: var(--hc-muted); font-size: 12px; text-align: center; }
/* your own password (T2W ADR-147) */
.hc .hc-pw { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.hc .hc-pw .hc-pill { margin-top: 6px; min-height: 46px; font-size: 16px; }
.hc .hc-pw-lock { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--hc-el2); color: var(--hc-text);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5); animation: hc-hero-in .5s var(--hc-spring); }
.hc .hc-pw-lock .hc-i { width: 32px; height: 32px; }
.hc .hc-err { padding: 10px 12px; border-radius: 12px; background: rgba(255, 69, 58, .12); color: #ff6961; font-size: 14px; }
.hc .hc-pw-done { margin-top: 10px; color: var(--hc-green); }
.hc .hc-people { display: flex; flex-direction: column; padding-top: 8px; }
.hc .hc-person { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 14px; text-align: left; transition: background .2s; }
.hc .hc-person:hover { background: rgba(255, 255, 255, .05); }
.hc .hc-person-t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hc .hc-person-t b { font-weight: 650; }
.hc .hc-person-t span { color: var(--hc-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc .hc-check { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25);
  color: transparent; transition: background .2s, border-color .2s, color .2s; }
.hc .hc-check .hc-i { width: 14px; height: 14px; stroke-width: 3; }
.hc .hc-person.on .hc-check { background: var(--hc-blue); border-color: var(--hc-blue); color: #fff; }
.hc .hc-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; background: var(--hc-el); text-align: left; }
.hc .hc-switch i { position: relative; flex: none; width: 50px; height: 30px; border-radius: 15px; background: rgba(255, 255, 255, .16); transition: background .25s; }
.hc .hc-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .3s var(--hc-spring); }
.hc .hc-switch.on i { background: var(--hc-green); }
.hc .hc-switch.on i::after { transform: translateX(20px); }
.hc .hc-stage { display: grid; place-items: center; min-height: 150px; margin-top: 8px; border-radius: 20px; overflow: hidden;
  background: repeating-conic-gradient(#1b1b1f 0 25%, #232327 0 50%) 0 0 / 22px 22px; }
.hc .hc-stage img { max-width: 160px; max-height: 160px; object-fit: contain; }
.hc .hc-stage.small img { width: 64px; height: 64px; }
.hc .hc-hint { margin-top: 8px; color: var(--hc-muted); font-size: 13px; text-align: center; }
.hc .hc-hint.left { margin: 0 4px; text-align: left; }
/* the notifications: the server's problems (a dot by how bad), then yours, then what you get */
.hc .hc-probs { padding: 4px 12px; }
.hc .hc-prob { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.hc .hc-prob + .hc-prob { border-top: 1px solid var(--hc-line); }
.hc .hc-prob > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--hc-blue); }
.hc .hc-prob.warn > i { background: #ff9f0a; }
.hc .hc-prob.down > i { background: var(--hc-red); box-shadow: 0 0 0 4px rgba(255, 69, 58, .18); }
.hc .hc-prob .hc-n-t { line-height: 1.35; }
.hc .hc-person-t span.hc-n-t { color: var(--hc-text); font-size: 14px; white-space: normal; }
.hc .hc-h4row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.hc .hc-h4row h4 { margin: 0 0 0 4px; }
.hc .hc-clear { min-height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .09); color: #d1d1d6;
  font-size: 13px; font-weight: 650; transition: background .2s, transform .25s var(--hc-spring); }
.hc .hc-clear:hover { background: rgba(255, 255, 255, .15); }
.hc a.hc-clear { display: inline-flex; align-items: center; text-decoration: none; }
.hc .hc-clear:active { transform: scale(.92); }
.hc .hc-people.going { animation: hc-clear-out .3s var(--hc-ios) forwards; }
@keyframes hc-clear-out { to { opacity: 0; transform: translateX(-28px); } }
.hc .hc-kinds { padding: 0; overflow: hidden; }
.hc .hc-kinds .hc-switch { border-radius: 0; }
.hc .hc-kinds .hc-switch + .hc-switch { border-top: 1px solid var(--hc-line); }
.hc .hc-notice { width: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 12px 10px; border-radius: 14px; text-align: left; transition: background .2s; }
.hc .hc-notice:hover { background: rgba(255, 255, 255, .05); }
.hc .hc-notice + .hc-notice { border-top: 1px solid var(--hc-line); border-radius: 0; }
.hc .hc-notice i { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: transparent; }
.hc .hc-notice.new i { background: var(--hc-blue); }
.hc .hc-notice.new .hc-n-t { font-weight: 650; }
.hc .hc-n-src { color: var(--hc-muted); font-size: 12px; }
.hc .hc-pop { position: absolute; z-index: 30; display: flex; flex-direction: column; min-width: 180px; overflow: hidden; border-radius: 14px; background: var(--hc-el2);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6); animation: hc-tb-in .3s var(--hc-ios) both; }
.hc .hc-pop button { padding: 12px 16px; font-size: 15px; text-align: left; }
.hc .hc-pop button:hover { background: rgba(255, 255, 255, .06); }
.hc .hc-pop .danger { color: var(--hc-red); }

/* a message for a room you are not in: a banner from the top */
/* a pop-up comes out of the chat bubble; with the chat open, from the top (it would cover the typing) */
.hc-toast { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(84px + var(--hc-lift, 0px) + env(safe-area-inset-bottom)); z-index: 1050;
  display: flex; align-items: center; gap: 12px; max-width: min(380px, calc(100vw - 32px));
  padding: 10px 12px 10px 10px; border-radius: 20px; background: #1c1c21; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6); cursor: pointer; transform-origin: calc(100% - 28px) calc(100% + 40px);
  transform: translateY(14px) scale(.9); opacity: 0; transition: transform .5s var(--hc-spring), opacity .25s; }
.hc-toast.on { transform: none; opacity: 1; }
.hc-toast.top { right: auto; bottom: auto; top: 64px; left: 50%; max-width: min(460px, calc(100vw - 24px)); transform-origin: 50% 0;
  transform: translate(-50%, -24px) scale(.96); }
.hc-toast.top.on { transform: translate(-50%, 0); }
.hc-toast .hc-toast-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hc-toast .hc-toast-t b { font-weight: 650; }
.hc-toast .hc-toast-t span { color: #d1d1d6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* a poke: you cannot miss it -- the hand comes in, taps the middle of the screen, the page jolts */
.hc-fx { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; pointer-events: none; background: rgba(0, 0, 0, 0);
  animation: hc-fx-dim 3.6s ease forwards; }
@keyframes hc-fx-dim { 0% { background: rgba(0, 0, 0, 0) } 12%, 80% { background: rgba(0, 0, 0, .45) } 100% { background: rgba(0, 0, 0, 0) } }
.hc-fx .hc-hand { position: absolute; left: 50%; top: 42%; font-size: 150px; line-height: 1; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .6));
  animation: hc-hand 1.5s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes hc-hand { 0% { transform: translate(-190%, -50%) rotate(-25deg) scale(.6); opacity: 0 }
  35% { transform: translate(-72%, -50%) rotate(0) scale(1); opacity: 1 } 45% { transform: translate(-50%, -50%) scale(.82) }
  55% { transform: translate(-64%, -50%) scale(1.02) } 63% { transform: translate(-50%, -50%) scale(.84) }
  74% { transform: translate(-62%, -50%) scale(1) } 100% { transform: translate(-62%, -50%) scale(1); opacity: 1 } }
.hc-fx .hc-ring { position: absolute; left: 50%; top: 42%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 4px solid var(--hc-amber); opacity: 0; animation: hc-ring 1s ease-out .6s 2; }
.hc-fx .hc-ring.two { animation-delay: .95s; }
@keyframes hc-ring { 0% { transform: scale(.4); opacity: 1 } 100% { transform: scale(9); opacity: 0 } }
.hc-fx .hc-fx-card { position: absolute; left: 50%; top: 62%; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 20px 16px;
  min-width: 260px; border-radius: 24px; background: #1c1c21; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
  transform: translate(-50%, 30px) scale(.9); opacity: 0; pointer-events: auto; animation: hc-card-in .6s var(--hc-spring) .55s forwards; }
@keyframes hc-card-in { to { transform: translate(-50%, 0); opacity: 1 } }
.hc-fx .hc-fx-card b { font-size: 19px; font-weight: 750; }
.hc-fx .hc-fx-acts { display: flex; gap: 8px; }
.hc-fx .hc-fx-acts button { padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 15px; font-weight: 650; }
.hc-fx .hc-fx-acts button.go { background: var(--hc-amber); color: #2a1d00; }
.hc-fx .hc-fx-sub { max-width: 280px; color: #d1d1d6; font-size: 14px; text-align: center; }
/* watch night (T2W ADR-133): the same, in the live red -- popcorn drops in instead of a hand */
.hc-fx.night .hc-ring { border-color: var(--hc-red); }
.hc-fx.night .hc-hand { font-size: 132px; animation-name: hc-drop; }
@keyframes hc-drop { 0% { transform: translate(-50%, -190%) rotate(-18deg) scale(.6); opacity: 0 }
  40% { transform: translate(-50%, -50%) rotate(6deg) scale(1.08); opacity: 1 } 55% { transform: translate(-50%, -44%) scale(1.1, .88) }
  70%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1 } }
.hc-fx.night .hc-fx-acts button.go { background: var(--hc-red); color: #fff; }
.hc .hc-night:not(:disabled) i { background: var(--hc-red); }
.hc .hc-night:not(:disabled) .hc-n-t { font-weight: 650; }
.hc .hc-night:disabled { cursor: default; }
.hc-fx.bye { animation: hc-fx-out .35s ease forwards; }
@keyframes hc-fx-out { to { opacity: 0 } }
/* the page jolts, the pop-up does not: a transform on the root (or body) makes it the box every fixed thing sits in,
   and on a long page (T2W's) the card dropped off the bottom of the screen mid-jolt */
html.hc-jolt body > :not(.hc-fx, #hubchat-btn) { animation: hc-jolt .55s ease .55s 2; }
/* translate and rotate, never transform: what places itself with a transform (the pill, the buddy) stays put */
@keyframes hc-jolt { 0%, 100% { translate: none; rotate: none } 15% { translate: -10px 3px; rotate: -.6deg } 30% { translate: 9px -3px; rotate: .5deg }
  45% { translate: -7px 2px; rotate: 0deg } 60% { translate: 5px -1px } 75% { translate: -2px 1px } }
/* your own poke goes: a small hand flies to their face */
.hc .hc-fly { position: absolute; z-index: 25; font-size: 26px; pointer-events: none; animation: hc-fly .7s cubic-bezier(.3, .7, .3, 1) forwards; }
@keyframes hc-fly { 0% { transform: translate(0, 0) scale(.6); opacity: 0 } 20% { opacity: 1 } 100% { transform: translate(var(--dx), var(--dy)) scale(1.3) rotate(-10deg); opacity: 0 } }
.hc .hc-av.jiggle, .hc-toast .hc-av.jiggle { animation: st-shake .6s ease 2; }

/* a photo, whole */
.hc-view { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; background: rgba(0, 0, 0, 0); cursor: zoom-out; transition: background .35s; }
.hc-view.on { background: rgba(0, 0, 0, .94); }
.hc-view img { max-width: 94vw; max-height: 88vh; border-radius: 12px; transform-origin: 0 0; transition: transform .42s cubic-bezier(.32, .72, 0, 1); }

@keyframes hc-pop { from { opacity: 0; transform: scale(.5) } }
@media (hover: none) { .hc .b { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }
@media (prefers-reduced-motion: reduce) {
  .hc, .hc *, .hc-fx, .hc-fx *, .hc-toast, .hc-view img, html.hc-jolt body > * { animation: none !important; transition: none !important; }
}

/* T2W ADR-141: who is here -- a strip of its own between the messages and the box (in the list, what was said
   above covered it), open while someone else has this chat open: their faces up from behind its bottom edge, a
   slow bob, back down when they go, and who it is beside them. */
.hc .hc-peek { flex: none; display: flex; align-items: flex-end; gap: 8px; height: 0; padding: 0 16px; overflow: hidden; transition: height .3s var(--hc-ios); }
.hc [data-p="room"].peeking .hc-peek { height: 30px; }
.hc .hc-peekers { display: flex; gap: 4px; }
.hc .hc-peeker { display: block; transform: translateY(5px); animation: hc-peek-in .7s var(--hc-spring) backwards, hc-peek-bob 3.2s ease-in-out .7s infinite;
  transition: transform .4s ease, opacity .4s ease; }
.hc .hc-peeker .hc-av { box-shadow: 0 0 0 2px var(--hc-bg); }
.hc .hc-peeker.out { animation: none; transform: translateY(110%); opacity: 0; }
@keyframes hc-peek-in { from { transform: translateY(110%); } }
@keyframes hc-peek-bob { 50% { transform: translateY(3px); } }
.hc .hc-peek-note { align-self: center; padding-bottom: 2px; font-size: 12px; font-weight: 600; color: var(--hc-muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; opacity: 0; transition: opacity .3s ease .15s; }
.hc [data-p="room"].peeking .hc-peek-note { opacity: 1; }
/* Seen: their faces before the words, small */
.hc .msg-meta.receipt { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.hc .hc-seen { display: inline-flex; }
.hc .hc-seen .hc-av + .hc-av { margin-left: -5px; }
.hc .hc-seen .hc-av { box-shadow: 0 0 0 1.5px var(--hc-bg); }
.hc .msg-meta.receipt.seen { color: var(--hc-text, #f5f5f7); }
.hc .hc-who-sub.on { color: #30d158; }                                   /* Active now */
/* any colour: the last circle, a rainbow -- with the colour picked in its middle */
.hc .hc-swatches .hc-any { position: relative; display: block; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle, var(--c, transparent) 0 45%, transparent 47%),
              conic-gradient(#ff453a, #ff9f0a, #ffd60a, #30d158, #40c8e0, #0a84ff, #bf5af2, #ff375f, #ff453a);
  transition: transform .3s var(--hc-spring), box-shadow .2s; }
.hc .hc-swatches .hc-any.on { box-shadow: 0 0 0 3px var(--hc-el), 0 0 0 5px #fff; transform: scale(1.08); }
.hc .hc-swatches .hc-any input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .hc .hc-peeker { animation: none; transition: none; } }

/* the second step for outside (T2W ADR-160): the code to scan, a link for this phone, the key */
.hc .hc-qr { width: 200px; margin: 8px auto 0; border-radius: 16px; overflow: hidden; background: #fff; }
.hc .hc-qr:empty { height: 200px; background: rgba(255, 255, 255, .06); }
.hc .hc-qr svg { display: block; width: 100%; height: auto; }
.hc .hc-qr-link { display: block; text-align: center; color: var(--hc-blue, #0a84ff); font-size: 14px; }
.hc .hc-qr-key { text-align: center; font: 500 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em;
  color: var(--hc-muted); user-select: all; }