*,
*::before,
*::after { box-sizing: border-box; }

@font-face {
  font-family: Pricedown;
  src: url("fonts/pricedown.otf?v=skinny3") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-stretch: ultra-condensed;
  font-display: swap;
}

:root {
  --sys-top: env(safe-area-inset-top, 0px);
  --sys-bottom: env(safe-area-inset-bottom, 0px);
  --app-head: 56px;
  --edge-pad: 1.5%;
  --side-col: calc(97% * 0.105);
  --nav-w: calc(var(--edge-pad) * 2 + var(--side-col));
  --nav-bg: hsl(0 0% 9%);
  --nav-border: hsl(0 55% 28% / 0.5);
  --nav-line: hsl(0 0% 15%);
  --nav-muted: hsl(0 0% 64%);
  --nav-item: hsl(0 0% 80%);
  --nav-primary: #f0883e;
  --nav-primary-soft: #f0883e26;
  --nav-primary-ring: #f0883e4d;
  --nav-primary-text: #f0883e;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  --msg-size: 15px;
  --name-size: 16px;
  --date-size: 16px;
  --nav-t: 1;
  --fg-shadow: 0 1px 2px #0006;
  --voice-play: 54px;
  --voice-wave: 36px;
  --voice-dur: 20px;
  --gif-size: 100px;
  --reply-size: 12px;
  --ava-size: 43px;
  --composer-ctrl-h: calc(1.35em + 20px);
}

:root,
html[data-theme="dark"],
body[data-theme="dark"],
.preview-skin[data-theme="dark"],
.live-mode[data-theme="dark"] {
  --bg: #141414;
  --fg: #f3f3f3;
  --muted: #8a8a8a;
  --scheme: dark;
  --fg-shadow: 0 1px 2px #0008;
}
html[data-theme="paper"],
body[data-theme="paper"],
.preview-skin[data-theme="paper"],
.live-mode[data-theme="paper"] {
  --bg: #f4f4f4;
  --fg: #1a1a1a;
  --muted: #5a5a5a;
  --scheme: light;
  --fg-shadow: 0 1px 0 #fff;
}
html[data-theme="slate"],
body[data-theme="slate"],
.preview-skin[data-theme="slate"],
.live-mode[data-theme="slate"] {
  --bg: #2c3138;
  --fg: #eef1f4;
  --muted: #9aa3ad;
  --scheme: dark;
  --fg-shadow: 0 1px 2px #0008;
}
html[data-theme="navy"],
body[data-theme="navy"],
.preview-skin[data-theme="navy"],
.live-mode[data-theme="navy"] {
  --bg: #1a2430;
  --fg: #e8eef4;
  --muted: #8b98a6;
  --scheme: dark;
  --fg-shadow: 0 1px 2px #0008;
}
html[data-theme="olive"],
body[data-theme="olive"],
.preview-skin[data-theme="olive"],
.live-mode[data-theme="olive"] {
  --bg: #2a2d24;
  --fg: #ece8dc;
  --muted: #9a957e;
  --scheme: dark;
  --fg-shadow: 0 1px 2px #0008;
}
html[data-theme="sepia"],
body[data-theme="sepia"],
.preview-skin[data-theme="sepia"],
.live-mode[data-theme="sepia"] {
  --bg: #f1e6d0;
  --fg: #3a2e1c;
  --muted: #6d5c42;
  --scheme: light;
  --fg-shadow: 0 1px 0 #fff8e8;
}
html[data-theme="charcoal"],
body[data-theme="charcoal"],
.preview-skin[data-theme="charcoal"],
.live-mode[data-theme="charcoal"] {
  --bg: #2e2e2e;
  --fg: #eeeeee;
  --muted: #9b9b9b;
  --scheme: dark;
  --fg-shadow: 0 1px 2px #0008;
}
html[data-theme="ivory"],
body[data-theme="ivory"],
.preview-skin[data-theme="ivory"],
.live-mode[data-theme="ivory"] {
  --bg: #f6f2e8;
  --fg: #2a261c;
  --muted: #6d675c;
  --scheme: light;
  --fg-shadow: 0 1px 0 #fff;
}
html[data-theme="steel"],
body[data-theme="steel"],
.preview-skin[data-theme="steel"],
.live-mode[data-theme="steel"] {
  --bg: #3a3f44;
  --fg: #eef1f3;
  --muted: #a8adb3;
  --scheme: dark;
  --fg-shadow: 0 1px 2px #0008;
}
html[data-theme="forest"],
body[data-theme="forest"],
.preview-skin[data-theme="forest"],
.live-mode[data-theme="forest"] {
  --bg: #1e2a22;
  --fg: #e6eee6;
  --muted: #8ea08e;
  --scheme: dark;
  --fg-shadow: 0 1px 2px #0008;
}
html[data-theme="sand"],
body[data-theme="sand"],
.preview-skin[data-theme="sand"],
.live-mode[data-theme="sand"] {
  --bg: #e8dfcf;
  --fg: #2c261c;
  --muted: #6d6456;
  --scheme: light;
  --fg-shadow: 0 1px 0 #fff8ee;
}
html[data-theme="wine"],
body[data-theme="wine"],
.preview-skin[data-theme="wine"],
.live-mode[data-theme="wine"] {
  --bg: #2a1e22;
  --fg: #f0e6e8;
  --muted: #a89096;
  --scheme: dark;
  --fg-shadow: 0 1px 2px #0008;
}
html[data-theme="sky"],
body[data-theme="sky"],
.preview-skin[data-theme="sky"],
.live-mode[data-theme="sky"] {
  --bg: #e6eef3;
  --fg: #1c2830;
  --muted: #5c6d78;
  --scheme: light;
  --fg-shadow: 0 1px 0 #fff;
}
html[data-theme="stone"],
body[data-theme="stone"],
.preview-skin[data-theme="stone"],
.live-mode[data-theme="stone"] {
  --bg: #d6d3ce;
  --fg: #2a2926;
  --muted: #65625c;
  --scheme: light;
  --fg-shadow: 0 1px 0 #eee;
}
html[data-theme="cream"],
body[data-theme="cream"],
.preview-skin[data-theme="cream"],
.live-mode[data-theme="cream"] {
  --bg: #faf6ee;
  --fg: #2d2a24;
  --muted: #6f6a60;
  --scheme: light;
  --fg-shadow: 0 1px 0 #fff;
}
html[data-theme="dusk"],
body[data-theme="dusk"],
.preview-skin[data-theme="dusk"],
.live-mode[data-theme="dusk"] {
  --bg: #22262e;
  --fg: #e4e7ec;
  --muted: #9298a3;
  --scheme: dark;
  --fg-shadow: 0 1px 2px #0008;
}
html[data-theme="moss"],
body[data-theme="moss"],
.preview-skin[data-theme="moss"],
.live-mode[data-theme="moss"] {
  --bg: #e4eae0;
  --fg: #243024;
  --muted: #5f6d5f;
  --scheme: light;
  --fg-shadow: 0 1px 0 #fff;
}
html[data-theme="pearl"],
body[data-theme="pearl"],
.preview-skin[data-theme="pearl"],
.live-mode[data-theme="pearl"] {
  --bg: #ececec;
  --fg: #222222;
  --muted: #666666;
  --scheme: light;
  --fg-shadow: 0 1px 0 #fff;
}
html[data-theme="fog"],
body[data-theme="fog"],
.preview-skin[data-theme="fog"],
.live-mode[data-theme="fog"] {
  --bg: #cfd4da;
  --fg: #1e2328;
  --muted: #556068;
  --scheme: light;
  --fg-shadow: 0 1px 0 #e8eaec;
}

:root,
html[data-theme],
body[data-theme],
.preview-skin[data-theme],
.live-mode[data-theme] {
  --line: color-mix(in srgb, var(--fg) 14%, var(--bg));
  --card: color-mix(in srgb, var(--fg) 7%, var(--bg));
  --card-line: var(--line);
  --input: var(--card);
  --input-line: var(--line);
  --accent: #f0883e;
  --ok: #3fb950;
  --bad: #f85149;
  --link: var(--fg);
  --thumb-hover: color-mix(in srgb, var(--fg) 22%, var(--bg));
}

html[data-theme="night"],
body[data-theme="night"],
.preview-skin[data-theme="night"],
.live-mode[data-theme="night"] {
  --scrollbar-width: 10px;
  --vh: 9.56px;
  --composer-text-size: 16px;
  --message-meta-height: 20px;
  --message-text-size: 16px;
  --color-primary: rgb(52.941% 45.49% 88.235%);
  --color-primary-opacity: rgb(51.373% 47.059% 85.882% / 0.11765);
  --color-primary-opacity-hover: rgb(51.373% 47.059% 85.882% / 0.25098);
  --color-primary-tint: rgb(52.941% 45.49% 88.235% / 0.10196);
  --color-primary-shade: rgb(48.235% 44.314% 77.647%);
  --color-primary-shade-rgb: 123,113,198;
  --color-background: rgb(12.941% 12.941% 12.941%);
  --color-background-compact-menu: rgb(12.941% 12.941% 12.941% / 0.86667);
  --color-web-app-browser: rgb(1.1765% 1.1765% 1.1765% / 0.56078);
  --color-background-compact-menu-reactions: rgb(12.941% 12.941% 12.941% / 0.86667);
  --color-background-compact-menu-hover: rgb(0% 0% 0% / 0.4);
  --color-background-secondary: rgb(5.8824% 5.8824% 5.8824%);
  --color-background-secondary-accent: rgb(9.8039% 9.8039% 9.8039%);
  --color-background-sidebar: rgb(5.8824% 5.8824% 5.8824%);
  --color-background-own: rgb(46.275% 41.569% 78.431%);
  --color-background-own-apple: rgb(46.275% 41.569% 78.431%);
  --color-background-selected: rgb(17.255% 17.255% 17.255%);
  --color-background-own-selected: rgb(39.608% 28.627% 83.137%);
  --color-chat-hover: rgb(17.255% 17.255% 17.255%);
  --color-chat-active: rgb(46.275% 41.569% 78.431%);
  --color-chat-active-greyed: rgb(57.255% 53.333% 82.745%);
  --color-item-hover: rgb(17.255% 17.255% 17.255%);
  --color-item-active: rgb(16.078% 16.078% 16.078%);
  --color-text: rgb(100% 100% 100%);
  --color-text-rgb: 255,255,255;
  --color-text-secondary: rgb(66.667% 66.667% 66.667%);
  --color-text-secondary-rgb: 170,170,170;
  --color-icon-secondary: rgb(66.667% 66.667% 66.667%);
  --color-text-secondary-apple: rgb(66.667% 66.667% 66.667%);
  --color-borders: rgb(18.824% 18.824% 18.824%);
  --color-borders-input: rgb(35.686% 35.686% 35.294%);
  --color-dividers: rgb(23.137% 23.137% 23.922%);
  --color-dividers-android: rgb(5.8824% 5.8824% 5.8824%);
  --color-links: rgb(52.941% 45.49% 88.235%);
  --color-gray: rgb(44.314% 45.882% 47.451%);
  --color-list-icon: rgb(63.529% 63.529% 63.529%);
  --color-default-shadow: rgb(6.2745% 6.2745% 6.2745% / 0.61176);
  --color-light-shadow: rgb(0% 0% 0% / 0.25098);
  --color-active: rgb(52.941% 45.49% 88.235%);
  --color-active-darker: rgb(48.235% 44.314% 77.647%);
  --color-green: rgb(0% 78.039% 24.314%);
  --color-green-darker: rgb(0% 65.49% 20.392%);
  --color-success: rgb(0% 78.039% 24.314%);
  --color-text-meta-colored: rgb(51.373% 47.059% 85.882%);
  --color-reply-hover: rgb(15.294% 15.294% 15.294%);
  --color-reply-active: rgb(18.039% 18.431% 18.431%);
  --color-reply-own-hover: rgb(52.941% 45.882% 85.49%);
  --color-reply-own-hover-apple: rgb(52.941% 45.882% 85.49%);
  --color-reply-own-active: rgb(56.863% 49.02% 91.765%);
  --color-reply-own-active-apple: rgb(56.863% 49.02% 91.765%);
  --color-accent-own: rgb(100% 100% 100%);
  --color-accent-own-rgb: 255,255,255;
  --color-message-meta-own: rgb(100% 100% 100% / 0.53333);
  --color-own-links: rgb(100% 100% 100%);
  --color-code: rgb(52.941% 45.49% 88.235%);
  --color-code-own: rgb(100% 100% 100%);
  --color-code-bg: rgb(0% 0% 0% / 0.50196);
  --color-code-own-bg: rgb(0% 0% 0% / 0.31373);
  --color-composer-button: rgb(66.667% 66.667% 66.667% / 0.8);
  --color-message-reaction: rgb(16.863% 16.471% 20.784%);
  --color-message-reaction-hover: rgb(20.392% 19.216% 27.843%);
  --color-message-reaction-own: rgb(40.392% 36.078% 68.627%);
  --color-message-reaction-hover-own: rgb(35.686% 32.157% 60.784%);
  --color-message-reaction-chosen-hover: rgb(47.059% 39.216% 86.667%);
  --color-message-reaction-chosen-hover-own: rgb(96.078% 96.078% 96.078%);
  --color-message-non-contact: rgb(66.667% 66.667% 66.667%);
  --color-voice-transcribe-button: rgb(16.471% 16.471% 23.529%);
  --color-voice-transcribe-button-own: rgb(51.373% 45.098% 82.745%);
  --color-topic-blue: rgb(43.529% 97.647% 94.118%);
  --color-topic-yellow: rgb(100% 83.922% 49.412%);
  --color-topic-violet: rgb(79.608% 52.549% 85.882%);
  --color-topic-green: rgb(55.686% 93.333% 59.608%);
  --color-topic-rose: rgb(100% 57.647% 69.804%);
  --color-topic-red: rgb(98.431% 43.529% 37.255%);
  --color-topic-grey: rgb(60% 60% 60%);
  --color-forum-unread-topic-hover: rgb(21.176% 21.176% 21.176%);
  --color-forum-hover-unread-topic-hover: rgb(24.706% 24.706% 24.706%);
  --color-chat-username: rgb(91.373% 93.333% 95.686%);
  --color-borders-read-story: rgb(45.098% 45.098% 45.098%);
  --color-background-menu-separator: rgb(100% 100% 100% / 0.10196);
  --color-hover-overlay: rgb(100% 100% 100% / 0.02353);
  --color-toast-background: rgb(0% 0% 0% / 0.8);
  --bg: var(--color-background);
  --fg: var(--color-text);
  --muted: var(--color-text-secondary);
  --scheme: dark;
  --line: var(--color-borders);
  --card: var(--color-background-secondary);
  --card-line: var(--color-borders);
  --input: var(--color-background-secondary);
  --input-line: var(--color-borders-input);
  --accent: var(--color-primary);
  --ok: var(--color-success);
  --link: var(--color-links);
}
html[data-theme="night"] .msg.mine .msg-bubble,
body[data-theme="night"] .msg.mine .msg-bubble,
.preview-skin[data-theme="night"] .msg.mine .msg-bubble {
  background: var(--color-background-own);
}

html[data-font="system"],
body[data-font="system"],
.preview-skin[data-font="system"],
.live-mode[data-font="system"] {
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

html[data-font="serif"],
body[data-font="serif"],
.preview-skin[data-font="serif"],
.live-mode[data-font="serif"] {
  --font: Georgia, "Times New Roman", "Noto Serif", serif, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji";
}

html[data-font="mono"],
body[data-font="mono"],
.preview-skin[data-font="mono"],
.live-mode[data-font="mono"] {
  --font: ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji";
}

html[data-font="rounded"],
body[data-font="rounded"],
.preview-skin[data-font="rounded"],
.live-mode[data-font="rounded"] {
  --font: Pricedown, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font, system-ui, sans-serif);
  font-size: 20px;
  font-weight: 400;
  font-stretch: normal;
  font-synthesis: none;
  letter-spacing: normal;
  -webkit-text-stroke: 0;
  paint-order: stroke fill;
  color-scheme: var(--scheme);
  touch-action: pan-y;
  text-shadow: var(--fg-shadow, none);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.28;
  background:
    radial-gradient(ellipse 90% 55% at 18% 8%, #3d3d44 0%, transparent 58%),
    radial-gradient(ellipse 75% 50% at 88% 28%, #323238 0%, transparent 52%),
    radial-gradient(ellipse 70% 45% at 48% 92%, #38383e 0%, transparent 56%);
  filter: blur(36px);
}

html[data-font="rounded"],
body[data-font="rounded"] {
  font-stretch: ultra-condensed;
  letter-spacing: 0.06em;
}

html.android {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.android body {
  padding-top: var(--sys-top, 0px);
  padding-bottom: var(--sys-bottom, var(--sys-top, 0px));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.android .msg .body,
html.android .msg .author,
html.android .msg .when,
html.android .voice-dur,
html.android .circle-video-dur {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.app-wallpaper {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.28;
}
html[data-wall="0"] .app-wallpaper { opacity: 0; background: none; }
html[data-wall="1"] .app-wallpaper {
  background-image: radial-gradient(circle, color-mix(in srgb, var(--fg) 22%, transparent) 1.15px, transparent 1.5px);
  background-size: 16px 16px;
}
html[data-wall="2"] .app-wallpaper {
  background-image:
    linear-gradient(color-mix(in srgb, var(--fg) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--fg) 14%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
}
html[data-wall="3"] .app-wallpaper {
  background-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent) 16%, transparent) 0 2px, transparent 2px 12px);
}
html[data-wall="4"] .app-wallpaper {
  background-image:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--fg) 16%, transparent) 1.4px, transparent 1.8px),
    radial-gradient(circle at 11px 19px, color-mix(in srgb, var(--accent) 18%, transparent) 1.4px, transparent 1.8px);
  background-size: 22px 38px;
}
html[data-wall="5"] .app-wallpaper {
  background-image:
    linear-gradient(color-mix(in srgb, var(--fg) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--fg) 12%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--accent) 18%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px, 12px 12px, 12px 12px;
}
html[data-wall="6"] .app-wallpaper {
  background-image: repeating-linear-gradient(0deg, transparent 0 9px, color-mix(in srgb, var(--fg) 10%, transparent) 9px 10px);
}
html[data-wall="7"] .app-wallpaper {
  background-image:
    linear-gradient(color-mix(in srgb, var(--fg) 18%, transparent) 2px, transparent 2px),
    linear-gradient(90deg, color-mix(in srgb, var(--fg) 18%, transparent) 2px, transparent 2px);
  background-size: 18px 18px;
  background-position: 8px 8px, 8px 8px;
}
html[data-wall="8"] .app-wallpaper {
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--fg) 14%, transparent) 0 8px, transparent 8px 16px);
}
html[data-wall="9"] .app-wallpaper {
  background-image:
    linear-gradient(30deg, color-mix(in srgb, var(--accent) 12%, transparent) 12%, transparent 12.5%),
    linear-gradient(150deg, color-mix(in srgb, var(--fg) 10%, transparent) 12%, transparent 12.5%),
    linear-gradient(90deg, color-mix(in srgb, var(--muted) 10%, transparent) 12%, transparent 12.5%);
  background-size: 40px 70px;
}

.page.app, .app-body { position: relative; z-index: 1; }

.nav-edit-veil {
  position: absolute;
  inset: 0;
  z-index: 18;
  background: rgb(0 0 0 / 0.38);
  pointer-events: none;
}
.nav-edit-veil[hidden] { display: none !important; }
body.nav-placing .nav-item {
  outline: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
}
body.nav-placing .nav-item.nav-drag {
  opacity: 0.55;
}
.nav-edit-done {
  position: fixed;
  right: 12px;
  bottom: calc(16px + var(--sys-bottom, 0px));
  z-index: 80;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 14px;
}
.nav-edit-done[hidden] { display: none !important; }

.presence-toasts {
  position: fixed;
  top: calc(6px + var(--sys-top, env(safe-area-inset-top, 0px)));
  left: 8px;
  right: 8px;
  z-index: 240;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.presence-toast {
  pointer-events: none;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  min-height: 0;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--card-line, var(--line));
  background: var(--card, var(--bg));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
  animation: presence-toast-in 0.38s cubic-bezier(0.22, 0.8, 0.28, 1) both;
}
.presence-toast.is-out {
  animation: presence-toast-out 0.32s ease-in forwards;
}
.presence-toast.user-row {
  cursor: default;
  border-bottom: 0;
}
.presence-toast .msg-ava {
  overflow: hidden;
  flex: 0 0 var(--ava-size, 43px);
  width: var(--ava-size, 43px);
  height: var(--ava-size, 43px);
}
.presence-toast .msg-ava:not(.no-photo) .msg-ava-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes presence-toast-in {
  from {
    transform: translateY(-120%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes presence-toast-out {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-120%);
    opacity: 0;
  }
}

.app-header {
  position: relative;
  flex: 0 0 var(--app-head, 56px);
  height: var(--app-head, 56px);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px var(--edge-pad, 1.5%) 6px 0;
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
}
.app-header-menu {
  width: var(--side-col);
  min-width: var(--side-col);
  height: var(--app-head, 56px);
  margin-left: var(--edge-pad, 1.5%);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
}
.app-header-menu svg {
  width: 29px;
  height: 29px;
  display: block;
}
.app-header .header-profile {
  width: var(--side-col, calc(97% * 0.105));
  height: var(--composer-ctrl-h, calc(1.35em + 20px));
  margin: 0 var(--edge-pad, 1.5%) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.chat-subhead {
  position: relative;
  flex: 0 0 36px;
  height: 36px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  z-index: 7;
}
.chat-find-btn {
  flex: 0 0 var(--side-col);
  width: var(--side-col);
  height: 34px;
  margin: 0 0 0 var(--edge-pad, 1.5%);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.chat-find-btn svg {
  width: 29px;
  height: 29px;
  display: block;
}
.chat-find-btn:hover,
.chat-subhead.is-find .chat-find-btn {
  color: #fff;
  background: transparent;
}
.chat-find-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 26px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--input-line, var(--line));
  border-radius: 8px;
  background: var(--input, var(--card));
  color: inherit;
  font: inherit;
  font-size: 13px;
}
.chat-find-input[hidden] { display: none !important; }
.chat-find-nav {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  z-index: 6;
}
.chat-find-nav[hidden] { display: none !important; }
.chat-find-nav-arrows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 28px;
  min-height: 28px;
}
.chat-find-arrow {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.chat-find-arrow:first-child {
  border-right: 1px solid var(--line);
}
.chat-find-arrow svg {
  width: 18px;
  height: 18px;
  display: block;
}
.chat-find-count {
  font-size: 12px;
  line-height: 1.25;
  padding: 2px 0 4px;
  font-variant-numeric: tabular-nums;
  color: var(--muted, #8b949e);
  text-align: center;
  white-space: nowrap;
}
.chat-files-btn {
  flex: 0 0 var(--side-col);
  width: var(--side-col);
  height: 36px;
  margin: 0 var(--edge-pad, 1.5%) 0 auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.chat-files-btn svg {
  width: 22px;
  height: 22px;
  display: block;
}
.chat-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.chat-media-overlay {
  position: absolute;
  inset: 0;
  z-index: 24;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: var(--bg);
  box-sizing: border-box;
  overflow: hidden;
}
.chat-media-overlay .chat-media-panel {
  pointer-events: auto;
}
.chat-media-overlay[hidden] { display: none !important; }
.chat-media-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 0;
  box-sizing: border-box;
}
.chat-media-head { display: none !important; }
.chat-media-filters {
  flex: 0 0 44px;
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--edge-pad, 1.5%) 0 0;
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
  background: var(--bg);
  position: relative;
  z-index: 2;
}
.chat-media-back {
  flex: 0 0 var(--side-col);
  width: var(--side-col);
  height: 44px;
  margin: 0 0 0 var(--edge-pad, 1.5%);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.chat-media-back svg {
  width: 29px;
  height: 29px;
  display: block;
}
.chat-media-filter {
  flex: 1 1 0;
  height: 44px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #fff;
  opacity: 0.55;
  cursor: pointer;
}
.chat-media-filter svg {
  width: 29px;
  height: 29px;
  display: block;
}
.chat-media-filter.is-on,
.chat-media-filter[aria-pressed="true"] {
  opacity: 1;
  color: var(--accent, #58a6ff);
}
.chat-media-search { display: none !important; }
.chat-media-item[data-kind="gif"],
.chat-media-item[data-kind="image"],
.chat-media-item[data-kind="video"] {
  overflow: hidden;
  isolation: isolate;
  contain: layout;
  clip-path: inset(0 round 8px);
}
.chat-media-item.is-voice,
.chat-media-item.is-doc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fff;
}
.chat-media-item.is-voice svg,
.chat-media-item.is-doc svg {
  width: 28px;
  height: 28px;
}
.chat-media-item-name {
  max-width: 92%;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-media-grid {
  --media-cols: 4;
  --media-gap: 8px;
  --media-pad: 8px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: repeat(var(--media-cols), minmax(0, 1fr));
  grid-auto-rows: min-content;
  justify-content: stretch;
  align-content: start;
  gap: var(--media-gap);
  padding: var(--media-pad);
  box-sizing: border-box;
}
.chat-media-item {
  position: relative;
  z-index: 0;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
  clip-path: inset(0 round 8px);
  border-radius: 8px;
  background: var(--input, #16325c);
  border: 1px solid var(--input-line, var(--card-line, var(--line)));
  color: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.chat-media-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #1a3f73;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(18px) saturate(1.15);
  transform: scale(1.08);
  transform-origin: center;
  opacity: 0.5;
  pointer-events: none;
}
.chat-media-item img,
.chat-media-item video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}
.chat-media-kind {
  position: absolute;
  z-index: 2;
  left: 4px;
  bottom: 4px;
  font-size: 10px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  text-transform: uppercase;
}
.chat-media-dl {
  position: absolute;
  z-index: 3;
  right: 4px;
  top: 4px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-media-dl svg {
  width: 14px;
  height: 14px;
}
.chat-media-empty {
  flex: 1 0 100%;
  text-align: center;
  color: var(--muted);
  padding: 24px 8px;
  font-size: 13px;
}
.chat-pos {
  display: none !important;
}
.chat-pos-hold {
  position: relative;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  z-index: 8;
  pointer-events: none;
}
.chat-scroll-pos {
  position: absolute;
  left: 50%;
  top: 6px;
  z-index: 8;
  transform: translateX(-50%);
  height: 26px;
  min-width: 26px;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid #d4552a;
  background: var(--bg);
  color: inherit;
  font-size: 11px;
  line-height: 24px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.chat-scroll-pos[hidden] { display: none !important; }
.chat-scroll-pos.is-on {
  animation: chatPosIn 0.16s ease;
}
@keyframes chatPosIn {
  from { opacity: 0; transform: translateX(-50%) scale(0.86); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}
.msg-seq { display: none; }
.msg.msg-find-hit .msg-bubble {
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.3);
}
.msg.msg-find-cur .msg-bubble {
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 1);
}

.header-clock {
  display: none !important;
}

.app-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  width: 100%;
}

.app-body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 15;
  background: #000;
  opacity: calc(0.28 * var(--nav-t, 1));
  pointer-events: none;
  transition: none;
}

button, input, textarea, select, option, label,
h1, h2, h3, h4, h5, h6, b, strong, th, td, a, p, span, li, div {
  font-family: inherit;
  font-weight: 400;
  font-synthesis: none;
  font-stretch: ultra-condensed;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--input-line) var(--bg);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--bg);
}

*::-webkit-scrollbar-thumb {
  background: var(--input-line);
  border: 2px solid var(--bg);
  border-radius: 8px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--thumb-hover);
}

*::-webkit-scrollbar-corner {
  background: var(--bg);
}

a { color: var(--link); text-decoration: none; }

.nav-edge {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 19;
  width: 16px;
}

.nav-drawer {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 20;
  width: var(--nav-w);
  flex: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-right: 1px solid var(--line);
  color: var(--fg);
  transform: translateX(0);
  transition: none;
  will-change: transform;
}

.nav-drawer-inner {
  position: relative;
  z-index: 10;
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 8px;
}

.nav-brand,
.header-profile {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: opacity 0.15s ease;
}

.header-profile:hover { opacity: 0.9; }

.header-ava {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  width: min(100%, var(--composer-ctrl-h, calc(1.35em + 20px)));
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--input);
  border: 1px solid var(--input-line);
  color: var(--muted);
}

.header-ava img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  display: block;
}

.header-ava img[hidden] { display: none; }

.header-ava .profile-guest {
  width: 30px;
  height: 30px;
}

.header-ava.has-photo .profile-guest { display: none; }

.nav-brand-mark svg,
.nav-ico svg {
  width: 20px;
  height: 20px;
  display: block;
}

.nav-ico svg { width: 29px; height: 29px; }

.nav-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  text-align: center;
}

.nav-level-label {
  margin-bottom: 4px;
  font-size: 0.7em;
  letter-spacing: 0.08em;
  color: var(--nav-muted);
}

.nav-level-value {
  font-size: 1.5rem;
  line-height: 1.1;
  font-weight: 700;
  font-stretch: normal;
}

.nav-rule {
  height: 1px;
  margin: 8px 12px;
  flex-shrink: 0;
  background: var(--line);
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-item {
  display: flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  border-left: 0;
  border-radius: 0;
  color: var(--muted);
  font-size: 14px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nav-item:hover {
  background: transparent;
  color: var(--nav-primary-text);
}

.nav-item.is-active {
  background: transparent;
  color: #f0883e;
}

.nav-item.is-active .nav-ico,
.nav-item.is-active {
  color: #f0883e;
}

.nav-ico {
  display: flex;
  width: 29px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.nav-foot {
  margin-top: auto;
  flex-shrink: 0;
  padding-bottom: var(--sys-bottom, var(--sys-top, env(safe-area-inset-bottom, 0px)));
}

.nav-foot .nav-list { padding-bottom: 0; }

.nav-foot .live-users {
  position: relative;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.nav-foot #active-count {
  position: absolute;
  right: 2px;
  bottom: 4px;
  font-size: 10px;
  line-height: 1;
  color: inherit;
}

body.nav-hidden {
  --nav-t: 0;
}

body.nav-hidden .nav-drawer {
  transform: translateX(-100%);
  width: var(--nav-w);
  flex-basis: var(--nav-w);
  min-width: var(--nav-w);
  overflow: visible;
  border-right-width: 1px;
  pointer-events: none;
}

body.nav-hidden .nav-edge {
  pointer-events: none;
}



body.nav-hidden .nav-stub {
  left: 0;
}

.app-bar { display: none !important; }

.nav-stub {
  position: absolute;
  inset: 0 0 0 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  background: var(--bg);
  color: var(--fg);
  overflow: auto;
}

.nav-stub[hidden] { display: none !important; }

.nav-stub h2 { margin: 0; font-size: 22px; }
.nav-stub p { margin: 0; color: var(--muted); }
.info-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 16px 16px calc(16px + var(--sys-bottom, env(safe-area-inset-bottom, 0px)));
  gap: 10px;
  overflow: auto;
}
.info-pane ol { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.info-pane li, .info-pane p { line-height: 1.4; word-break: break-word; }
#auto-text {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  box-sizing: border-box;
}

.members-pane {
  padding: 8px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.members-head {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.12em;
  color: var(--fg);
}
.members-empty { color: var(--muted); font-size: 14px; }
.members-create,
.nav-stub .members-create,
.settings .sheet-btn,
.settings #live-mode-btn,
.settings .live-mode-btn,
.lang-btn,
.hold-confirm {
  align-self: stretch;
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--input);
  color: #fff;
  border: 1px solid var(--input-line);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-stub .field,
.members-pane .field,
.settings .field {
  gap: 4px;
  margin: 0;
}
.nav-stub input:not([type="range"]):not([type="file"]),
.nav-stub textarea,
.members-pane input:not([type="range"]):not([type="file"]),
.members-pane textarea,
.settings input:not([type="range"]):not([type="file"]),
.settings textarea {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  box-sizing: border-box;
}
html.android .members-create,
html.android .lang-btn,
html.android .settings .sheet-btn,
html.android .settings #live-mode-btn,
html.android .hold-confirm {
  min-height: 44px;
}
#members-delete.hold-confirm {
  align-self: stretch;
  min-height: 40px;
}
.members-roster { display: flex; flex-direction: column; gap: 0; }

.pager {
  height: 100%;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: 0;
}

.track {
  display: flex;
  width: 300%;
  flex: 1 1 auto;
  min-height: 0;
  transform: translateX(-33.3333%);
  transition: none;
}

html.android .track {
  transition: none;
}

html.android .die.rolling {
  animation-duration: 0.32s;
}

.track.pane-personal {
  transform: translateX(0);
}

.track.pane-settings {
  transform: translateX(-66.6666%);
}

.track.dragging {
  transition: none;
}

.page {
  width: 33.3333%;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.app {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 6px;
  border-bottom: 1px solid var(--line);
}

.app-bar {
  display: none !important;
}

.header-left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--nav-w);
  min-width: var(--nav-w);
  gap: 0;
}

h1 { margin: 0; font-size: 18px; font-weight: 400; }

.live-users {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.live-users svg {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
}

#active-count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transform-origin: center;
  color: inherit;
}

#active-count.up {
  color: var(--ok);
  animation: count-pop 0.45s ease;
}

#active-count.down {
  color: var(--bad);
  animation: count-pop 0.45s ease;
}

@keyframes count-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.28); }
  100% { transform: scale(1); }
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.points-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2em;
  padding: 0 2px;
  border: 0;
  background: transparent;
  font-family: Pricedown, sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: #46c837;
  text-shadow:
    2px 2px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000;
}

.points-badge.hud-debt {
  color: #e03a3a;
}

.dice-banner {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--sys-top, 0px) + var(--app-head, 56px));
  z-index: 640;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  flex: 0 0 auto;
}

.dice-banner[hidden] {
  display: none;
}

.pager > .dice-play {
  flex: 0 0 auto;
  margin: 8px 12px;
}

.dice-stake-sheet {
  width: min(360px, calc(100% - 32px));
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

.dice-wheel-shell {
  position: relative;
  height: calc(5 * 40px);
  overflow: hidden;
}

.dice-wheel-window {
  position: absolute;
  left: 12px;
  right: 12px;
  top: calc(2 * 40px);
  height: 40px;
  border: 2px solid #ff8c00;
  border-radius: 10px;
  pointer-events: none;
  z-index: 2;
  box-sizing: border-box;
}

.dice-wheel {
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.dice-wheel::-webkit-scrollbar {
  display: none;
}

.dice-wheel-pad {
  height: calc(2 * 40px);
  flex-shrink: 0;
  pointer-events: none;
}

.dice-wheel-item {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  font-size: 22px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: #fff;
  user-select: none;
}

.dice-wheel-item[data-band="2"],
.dice-wheel-item[data-band="-2"] {
  opacity: 0.25;
}

.dice-wheel-item[data-band="1"],
.dice-wheel-item[data-band="-1"] {
  opacity: 0.75;
}

.dice-wheel-item[data-band="0"] {
  opacity: 1;
  color: #ff8c00;
}

.dice-send-req {
  width: 100%;
  min-height: 44px;
  font-size: 16px;
}

.dice-banner-text {
  min-width: 0;
  flex: 1;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dice-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.dice-btn {
  border: 1px solid var(--card-line);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  background: var(--input);
  color: inherit;
}

.dice-btn.ok {
  background: var(--ok);
  color: #fff;
  border-color: transparent;
}

.dice-btn.no {
  background: transparent;
  color: var(--bad);
  border-color: var(--bad);
}

.dice-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 12px 8px;
  padding: 12px;
  border: 1px solid var(--card-line);
  border-radius: 14px;
  background: var(--card);
}

.dice-play[hidden] {
  display: none;
}

body.in-call #dice-play:not([hidden]),
body.in-live-room #dice-play:not([hidden]) {
  position: fixed;
  z-index: 520;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: min(92vw, 380px);
  margin: 0;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}

body.in-call #dice-banner,
body.in-live-room #dice-banner {
  z-index: 540;
  top: calc(8px + var(--sys-top, env(safe-area-inset-top, 0px)));
}

.call-dice-pop {
  position: fixed;
  z-index: 530;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--input);
  color: #fff;
  border: 1px solid var(--input-line);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.call-dice-pop[hidden] { display: none; }

.dice-play-title {
  font-weight: 400;
  font-size: 14px;
  text-align: center;
}

.dice-play-meta {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  word-break: break-all;
}

.dice-seed {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 280px;
  font-size: 12px;
}
.dice-seed input {
  width: 100%;
  min-height: 36px;
}
.dice-lock {
  width: 100%;
  max-width: 280px;
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  word-break: break-all;
  user-select: text;
  cursor: pointer;
}
.copy-tip {
  position: fixed;
  z-index: 580;
  margin: 0;
  padding: 2px 6px;
  border-radius: 6px;
  background: #161618;
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  pointer-events: none;
  transform: translate(-50%, -130%);
}
.copy-tip[hidden] { display: none; }
.dice-lock[hidden] { display: none; }
.dice-fair {
  position: fixed;
  inset: 0;
  z-index: 560;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: calc(12px + var(--sys-top, env(safe-area-inset-top, 0px))) 12px calc(12px + var(--sys-bottom, env(safe-area-inset-bottom, 0px)));
  background: rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}
.dice-fair[hidden] { display: none; }
.dice-fair-card {
  width: min(100%, 420px);
  max-height: min(86dvh, 640px);
  overflow: auto;
  padding: 16px;
  border-radius: 16px;
  background: var(--card, var(--bg));
  color: var(--fg);
  box-sizing: border-box;
}
.dice-fair-verdict {
  margin: 0 0 12px;
  text-align: center;
  font-size: 18px;
  line-height: 1.3;
}
.dice-fair-verdict.is-ok { color: #3fb950; }
.dice-fair-verdict.is-bad { color: #f85149; }
.dice-fair-facts {
  margin: 0 0 12px;
  display: grid;
  gap: 8px;
}
.dice-fair-facts div { min-width: 0; }
.dice-fair-facts dt {
  font-size: 12px;
  color: var(--muted);
}
.dice-fair-facts dd {
  margin: 0;
  font-size: 14px;
  word-break: break-all;
}
.dice-fair-how {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
}
.dice-fair-row { margin: 0 0 10px; min-width: 0; }
.dice-fair-k { font-size: 12px; color: var(--muted); }
.dice-fair-v {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  word-break: break-all;
  cursor: pointer;
}
.dice-fair-note { margin: 0 0 10px; }

.dice-board {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  justify-content: center;
}

.dice-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.dice-slot-label {
  font-size: 11px;
  color: var(--muted);
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.die {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  background: linear-gradient(160deg, #fff7ea, #e8dcc8);
  box-shadow:
    inset 0 0 0 2px #c9b89a,
    0 8px 18px rgba(0, 0, 0, 0.28);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 9px;
  gap: 2px;
  transform-origin: center;
}

.die.rolling {
  animation: dice-tumble 0.14s linear infinite;
}

@keyframes dice-tumble {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(16deg) scale(1.08); }
  50% { transform: rotate(0deg) scale(0.96); }
  75% { transform: rotate(-16deg) scale(1.08); }
  100% { transform: rotate(0deg) scale(1); }
}

.die .pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1c1610;
  margin: auto;
  opacity: 0;
}

.die[data-n="1"] .p5,
.die[data-n="2"] .p1,
.die[data-n="2"] .p9,
.die[data-n="3"] .p1,
.die[data-n="3"] .p5,
.die[data-n="3"] .p9,
.die[data-n="4"] .p1,
.die[data-n="4"] .p3,
.die[data-n="4"] .p7,
.die[data-n="4"] .p9,
.die[data-n="5"] .p1,
.die[data-n="5"] .p3,
.die[data-n="5"] .p5,
.die[data-n="5"] .p7,
.die[data-n="5"] .p9,
.die[data-n="6"] .p1,
.die[data-n="6"] .p3,
.die[data-n="6"] .p4,
.die[data-n="6"] .p6,
.die[data-n="6"] .p7,
.die[data-n="6"] .p9 {
  opacity: 1;
}

.die[data-n="0"] {
  background: color-mix(in srgb, var(--input) 80%, #e8dcc8);
}

#dice-roll-btn {
  min-width: 140px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 8px;
}

.brand:hover { background: var(--input); }

.beer-logo {
  width: 26px;
  height: 26px;
  display: block;
  color: var(--accent, #d4a017);
}

header .brand .beer-logo { display: block; }

.brand-name {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.12em;
}

.hud-clock {
  font-family: Pricedown, sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.06em;
  -webkit-text-stroke: 0;
  color: #fff;
  text-shadow:
    2px 2px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000;
}

.updates-list {
  margin: 0;
  padding: 12px 20px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.4;
}

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: max(var(--sys-top, 0px), env(safe-area-inset-top, 0px)) 12px calc(84px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  overflow: auto;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
}

.auth-gate:not([hidden]) {
  display: flex !important;
  z-index: 5000 !important;
  pointer-events: auto !important;
}
body.authed .auth-gate,
.auth-gate[hidden],
.auth-gate[aria-hidden="true"] { display: none !important; pointer-events: none !important; }
body:has(#auth-gate:not([hidden])) .boot-gate {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
body:has(#auth-gate:not([hidden])) .pager,
body:has(#auth-gate:not([hidden])) .app-header,
body:has(#auth-gate:not([hidden])) .dice-banner {
  pointer-events: none !important;
  visibility: hidden !important;
}

.auth-session-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text, #e6edf3) 8%, transparent);
  color: var(--muted, #8b949e);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.boot-gate {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + var(--sys-top, env(safe-area-inset-top, 0px))) 24px calc(24px + var(--sys-bottom, env(safe-area-inset-bottom, 0px)));
  background: var(--bg);
}

.boot-gate[hidden],
.boot-gate[aria-hidden="true"] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
.version-gate { z-index: 4500; }

.mic-bar {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 36;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--panel, #161b22);
  border: 1px solid color-mix(in srgb, var(--text, #e6edf3) 14%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.mic-bar[hidden] { display: none; }
.mic-bar-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text, #e6edf3);
}
.mic-bar-actions {
  display: flex;
  gap: 8px;
}
.mic-allow-btn,
.mic-settings-btn {
  appearance: none;
  flex: 1;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-weight: 400;
  cursor: pointer;
}
.mic-allow-btn {
  color: #0d1117;
  background: #3fb950;
}
.mic-settings-btn {
  color: var(--text, #e6edf3);
  background: color-mix(in srgb, var(--text, #e6edf3) 12%, transparent);
}
.mic-settings-btn[hidden] { display: none; }
.voice-btn { touch-action: none; }

.boot-card {
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.boot-title {
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
}

.boot-track {
  height: 8px;
  border-radius: 99px;
  background: var(--input);
  border: 1px solid var(--input-line);
  overflow: hidden;
}

.boot-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.28s ease;
}

.boot-step {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.auth-lang-bar {
  width: min(560px, 100%);
  display: flex;
  justify-content: center;
  padding: 4px 0 8px;
}

.auth-lang {
  justify-content: center;
  gap: 4px;
}

.auth-lang .lang-btn {
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1.2;
  min-height: 0;
  border-radius: 6px;
}

.auth-sessions {
  margin-top: 12vh;
  background: var(--bg);
}
.auth-dock {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 5010;
  width: min(560px, calc(100% - 24px));
  transform: translateX(-50%);
  margin: 0;
  padding: 22px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--input);
  border: 1px solid var(--card-line);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}
.auth-online-count {
  position: absolute;
  top: 6px;
  right: 10px;
  margin: 0;
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
}
.ascii-hint {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: #d4552a;
}
.ascii-hint[hidden] { display: none !important; }
#pass-change-btn[hidden],
#pass-change-box[hidden],
#pass-sure[hidden] { display: none !important; }
#pass-sure.modal-bg.open {
  display: flex !important;
  z-index: 8000;
}
.pass-change-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.passkey-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.passkey-status {
  margin: 0;
  font-size: 14px;
}
.passkey-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.passkey-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--card-line);
  border-radius: 10px;
  font-size: 14px;
  min-width: 0;
}
.passkey-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.passkey-codes {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  word-break: break-word;
}
#auth-go-passkey[hidden],
#auth-recovery-box[hidden],
#auth-recovery-fields[hidden] { display: none !important; }
.auth-pick-wide {
  width: 100%;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
}
#auth-recovery-box:not([hidden]),
#auth-recovery-fields:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pass-sure-value {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.04em;
  word-break: break-all;
}
.auth-card {
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px 14px;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 14px;
}

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.auth-brand .beer-logo {
  width: 22px;
  height: 22px;
}

.auth-brand .brand-name {
  font-size: 14px;
}

.auth-choice {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.auth-choice[hidden] { display: none !important; }
#auth-home[hidden] { display: none !important; }

.auth-methods {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#auth-fast-box[hidden],
#auth-google-box[hidden],
#auth-phone-fields[hidden] { display: none !important; }
#auth-fast-box:not([hidden]),
#auth-google-box:not([hidden]) { display: flex; flex-direction: column; gap: 8px; }
#auth-phone-fields:not([hidden]) { display: flex; flex-direction: column; gap: 8px; }
.auth-subchoice {
  display: flex;
  gap: 8px;
}
.auth-sub {
  flex: 1;
  min-width: 0;
  padding: 8px 6px;
  background: var(--input);
  border: 1px solid var(--input-line);
  color: inherit;
  cursor: pointer;
  font-size: 13px;
}
.auth-sub.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.auth-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--card-line);
}
.pass-line {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}
.pass-line input {
  width: 100%;
  padding-right: 118px;
}
.pass-status {
  position: absolute;
  right: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 78px;
  pointer-events: none;
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pass-caps { color: #d4552a; white-space: nowrap; }
.pass-lang { color: #7ec8c3; }
.pass-eye {
  position: absolute;
  right: 2px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.pass-eye svg { width: 18px; height: 18px; display: block; }
.pass-eye.on { color: var(--accent); }
.auth-saved {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 0;
}
.auth-saved[hidden],
.auth-apk[hidden],
.auth-apk-go[hidden] { display: none !important; }

.auth-saved-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.auth-saved-label {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.auth-test-tag {
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #d4552a;
}
#auth-guest {
  position: relative;
}
#auth-guest .auth-test-tag {
  position: absolute;
  top: 5px;
  right: 8px;
  z-index: 1;
}

.auth-saved .user-row {
  border: 1px solid var(--input-line);
  background: var(--input);
}

.auth-apk {
  margin-top: 10px;
  padding: 8px 10px;
  border: 2px solid #c4523a;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.auth-apk.is-ok { border-color: #2f8f4e; }
.auth-apk.is-old { border-color: #c4523a; }

.auth-apk-title,
.auth-apk-msg {
  margin: 0;
  font-size: 13px;
}

.auth-apk-go {
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 10px;
  border: 0;
  background: #c4523a;
  color: #fff;
  cursor: pointer;
}

.auth-saved .auth-saved-btn {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: var(--ava-size, 43px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  text-align: left;
  background: var(--input);
  border: 1px solid var(--input-line);
  color: inherit;
  cursor: pointer;
}

.auth-saved .auth-saved-btn .msg-ava,
.auth-saved .auth-saved-btn .user-row-body,
.auth-saved .auth-saved-btn .last-active {
  align-self: center;
}

.auth-saved .auth-saved-btn .user-row-body,
.auth-saved .auth-saved-btn .user-row-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 0;
}

.auth-saved .auth-saved-btn .user-row-name {
  line-height: 1.2;
}

.auth-saved .auth-saved-btn .last-active {
  position: absolute;
  top: 5px;
  right: 8px;
  z-index: 1;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.03em;
  color: #d4552a;
}
.auth-saved .auth-saved-btn .last-active .tm,
.auth-saved .auth-saved-btn .last-active .d {
  color: #d4552a;
  font-size: 10px;
  font-weight: 400;
}
.auth-online .auth-saved-btn {
  cursor: default;
}
.auth-online .auth-saved-btn .last-active,
.auth-online .auth-saved-btn .last-active .tm {
  color: #46c837;
}
.auth-saved .auth-google-tag {
  color: #4285f4;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.auth-pick {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 10px;
  text-align: center;
  background: var(--input);
  border: 1px solid var(--input-line);
  color: inherit;
  cursor: pointer;
}

.auth-pick.on,
.auth-pick:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.auth-pane.open {
  animation: authDrop 0.22s ease;
}

@keyframes authDrop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.auth-pick-tag {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.auth-pick.on .auth-pick-tag { color: var(--accent); }

.auth-user-icon {
  width: 28px;
  height: 28px;
  display: block;
}

.auth-pick-title {
  font-size: 14px;
  font-weight: 400;
}

.auth-pick-hint {
  font-size: 10px;
  line-height: 1.25;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.auth-pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-pane[hidden] { display: none !important; }

.auth-pane .field { gap: 4px; }

.auth-pane input {
  padding: 10px 12px;
  font-size: 16px;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-user-select: text;
  user-select: text;
}
.auth-pane .pass-line input {
  padding-right: 118px;
}

.auth-primary {
  width: 100%;
}
.auth-google {
  margin-top: 0;
}
.auth-phone-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
}
.auth-phone-box[hidden],
.auth-phone-row[hidden],
#auth-phone-confirm[hidden],
#phone-pass-box[hidden],
#phone-note[hidden] { display: none !important; }
.auth-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}
.auth-phone-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.auth-phone-prefix {
  flex: 0 0 auto;
  font-size: 16px;
  letter-spacing: 0.02em;
  user-select: none;
}
.auth-phone-row input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
.auth-phone-tag {
  color: #46c837;
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.auth-fast-tag {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.live-mode-btn,
#live-mode-btn {
  width: 50%;
  min-height: 36px;
  padding: 8px 10px;
  font-size: 14px;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

.auth-alt {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-or {
  margin: 4px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-google-gsi {
  width: 100%;
  min-height: 44px;
  display: flex;
  justify-content: center;
}

.auth-google-gsi iframe {
  max-width: 100%;
}

.auth-google {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--input-line);
  border-radius: 8px;
  background: var(--input);
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 400;
}

.auth-google:hover {
  border-color: var(--accent);
}

.auth-google-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.auth-error {
  margin: 0;
  min-height: 1.3em;
  color: var(--bad);
  font-size: 13px;
}

.auth-error[hidden] {
  display: block !important;
  visibility: hidden;
}

#name[readonly] {
  opacity: 0.9;
}

.planet {
  display: none;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: default;
  pointer-events: none;
}

.planet svg {
  display: none;
}

.planet.online { color: #46c837; }
.planet.offline { color: #e03a3a; }
.planet.connecting { color: var(--muted); }

#log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  --log-pad-l: 1.5%;
  --log-pad-r: 1.5%;
  padding: 8px 1.5% 16px 1.5%;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g fill='none' stroke='%238ec8ff' stroke-width='1.5' opacity='0.28'><path d='M28 34c0-8 10-12 14-5 4-7 14-3 14 5 0 10-14 20-14 20S28 44 28 34z'/><rect x='150' y='22' width='32' height='20' rx='7'/><path d='M160 42l6 10 6-10'/><path d='M108 88l10 0-8 18 14 0-18 28 6-20-10 0 6-26z' fill='%238ec8ff' stroke='none'/><circle cx='48' cy='150' r='9'/><path d='M48 136v8M48 156v8M34 150h8M54 150h8'/><path d='M170 130c12 0 20 10 20 22 0 16-20 28-20 28s-20-12-20-28c0-12 8-22 20-22z'/><path d='M86 48h18M95 39v18'/><circle cx='180' cy='78' r='5'/></g></svg>");
  background-size: 220px 220px;
  background-repeat: repeat;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.msg {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: 2px;
}
.msg.msg-picked::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--log-pad-l, 10px));
  right: calc(-1 * var(--log-pad-r, 4%));
  z-index: 4;
  pointer-events: none;
  border-radius: 12px;
  border: 1px solid rgba(190, 220, 255, 0.28);
  background:
    linear-gradient(
      180deg,
      rgba(170, 210, 255, 0.42) 0%,
      rgba(56, 139, 253, 0.32) 42%,
      rgba(28, 82, 190, 0.22) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -10px 18px rgba(20, 50, 130, 0.2),
    0 6px 14px rgba(40, 100, 220, 0.22);
  animation: msg-pick-fade 0.7s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}
.msg.msg-picked .msg-ava,
.msg.msg-picked .msg-bubble {
  animation: msg-pick-shake 0.48s cubic-bezier(0.16, 0.84, 0.32, 1) both;
}
@keyframes msg-pick-fade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes msg-pick-shake {
  0% { transform: translateX(0); }
  10% { transform: translateX(-3px); }
  22% { transform: translateX(3px); }
  36% { transform: translateX(-2px); }
  52% { transform: translateX(1.4px); }
  70% { transform: translateX(-0.7px); }
  86% { transform: translateX(0.3px); }
  100% { transform: translateX(0); }
}
.msg.notify-flash .msg-bubble {
  box-shadow: 0 0 0 2px var(--accent, #58a6ff);
  animation: notify-flash 1.6s ease;
}
@keyframes notify-flash {
  0% { box-shadow: 0 0 0 3px var(--accent, #58a6ff); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.msg.mine {
  align-self: stretch;
  justify-content: flex-end;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}
.msg.theirs {
  align-self: stretch;
  justify-content: flex-start;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

.msg-bubble {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  max-width: calc(90% - var(--ava-size, 43px) - 6px);
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 10px 10px 10px 0;
  padding: 4px 6px;
}

.msg-core {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  width: max-content;
  max-width: 100%;
}

.msg-tail {
  position: absolute;
  left: -1px;
  bottom: 8px;
  width: 8px;
  height: 8px;
  background: var(--card);
  border-left: 1px solid var(--card-line);
  border-bottom: 1px solid var(--card-line);
  transform: translateX(-4px) rotate(45deg);
  pointer-events: none;
  z-index: 0;
}

.msg-ava {
  position: static;
  transform: none;
  flex: 0 0 var(--ava-size, 43px);
  width: var(--ava-size, 43px);
  height: var(--ava-size, 43px);
  min-width: var(--ava-size, 43px);
  max-width: var(--ava-size, 43px);
  min-height: var(--ava-size, 43px);
  max-height: var(--ava-size, 43px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--input);
  border: 1px solid var(--card-line);
  color: var(--muted);
  pointer-events: auto;
}

.msg-ava-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.msg-ava:not(.no-photo) .msg-ava-img {
  display: block;
}

.msg-ava-guest {
  width: 62%;
  height: 62%;
  display: none;
}

.msg-ava.no-photo .msg-ava-guest {
  display: block;
}

.msg.pending {
  opacity: 0.94;
}

.send-progress {
  margin-top: 4px;
  height: 3px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--fg) 14%, transparent);
  overflow: hidden;
  width: 0;
  min-width: 100%;
}

.send-progress > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.16s linear;
}

.msg .meta {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
  color: var(--muted);
  margin-bottom: 2px;
  width: 100%;
  max-width: 100%;
  flex-shrink: 0;
}

.msg .author {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--name-size, 16px);
  line-height: 1.2;
  text-align: left;
  margin-right: auto;
}

.msg .when {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: var(--date-size, 16px);
  line-height: 1.2;
}

.msg .body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: var(--msg-size, 15px);
  line-height: 1.35;
  width: 100%;
  max-width: 100%;
}

.msg .body.deleted {
  color: #555;
}

.me-tag { display: none; }

.msg.sys {
  align-self: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin: 6px 0;
  background: none;
  border: 0;
  padding: 0;
}

.msg.sys .sys-body {
  color: #e67e22;
  font-weight: 400;
  font-size: 13px;
  text-align: center;
  width: 100%;
  max-width: 36em;
  margin: 0 auto;
  line-height: 1.35;
}

.msg.sys.sys-note .sys-body {
  color: #ffffff;
  font-weight: 400;
  font-size: 11px;
}

.msg .quote {
  margin: 0 0 4px;
  padding: 3px 4px;
  border-left: 3px solid var(--accent);
  background: var(--input);
  border-radius: 0 6px 6px 0;
  font-size: var(--reply-size, 12px);
  color: var(--muted);
  max-width: 100%;
}

.msg .quote-author {
  display: block;
  font-weight: 400;
  color: var(--fg);
  margin-bottom: 2px;
}

.msg .quote-body {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.msg-enc {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
}
.msg-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  margin-top: 3px;
  width: 0;
  min-width: 100%;
  max-width: 100%;
}

.msg-reacts {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.msg-reacts::-webkit-scrollbar { display: none; }

.react-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--card-line);
  background: var(--input);
  color: inherit;
  font-size: 16px;
  line-height: 1.2;
  min-height: 24px;
  cursor: pointer;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.react-chip:hover,
.react-chip:active {
  border-color: var(--accent);
}

.react-chip .n {
  font-family: Pricedown, sans-serif;
  font-weight: 400;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.translated-tag {
  margin-left: auto;
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--card-line);
  background: var(--input);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

.reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 0;
  border-top: 1px solid var(--line);
}

.reply-bar[hidden] { display: none; }

.reply-bar-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reply-bar-label {
  font-size: 11px;
  font-weight: 400;
  color: var(--accent);
}

.reply-bar-text {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet-bg {
  align-items: flex-end;
}

.sheet {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 14px 14px 0 0;
}

#msg-menu.modal-bg {
  background: transparent;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  pointer-events: auto;
  z-index: 80;
}

#msg-menu .sheet {
  position: fixed;
  left: 8px;
  top: 8px;
  width: min(240px, calc(100vw - 16px));
  gap: 6px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(22, 24, 28, 0.92);
  border-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  max-height: min(70vh, calc(100dvh - 16px - env(safe-area-inset-bottom, 0px)));
  overflow-x: hidden;
  overflow-y: auto;
}

.sheet-btn {
  background: var(--input);
  border-color: var(--input-line);
  color: #fff;
  text-align: left;
}

#msg-menu .sheet-btn {
  font-size: 15px;
  line-height: 1.3;
  padding: 8px 10px;
}

#msg-menu .sheet-btn[hidden],
#msg-menu .react-pick[hidden] {
  display: none !important;
}

.sheet-cancel {
  text-align: center;
  margin-top: 4px;
}

.react-pick {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0 2px;
  margin: 0;
  background: transparent;
  scrollbar-width: thin;
}

#msg-menu .react-pick {
  width: 100%;
  max-width: 100%;
  background: transparent;
  border: 0;
}

.react-pick[hidden] { display: none; }

.emoji-btn {
  flex: 0 0 auto;
  min-width: 48px;
  font-size: 22px;
  background: var(--input);
  border-color: var(--input-line);
  padding: 10px 12px;
}

#msg-menu .emoji-btn {
  min-width: 42px;
  font-size: 27px;
  line-height: 1;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.06);
  border-color: transparent;
}

.voice-speed-row {
  flex-wrap: wrap;
}

.mem-group {
  margin: 0 0 16px;
}

.mem-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 4px 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #9aa0a6);
}

.composer-dock {
  margin: 0;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.voice-draft {
  --composer-ctrl-h: calc(1.35em + 20px);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 10.5% minmax(0, 1fr) 10.5% 10.5%;
  column-gap: 8px;
  align-items: stretch;
  width: 97%;
  max-width: 97%;
  min-width: 0;
  min-height: var(--composer-ctrl-h);
  height: var(--composer-ctrl-h);
  margin: 0 auto 8px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.voice-draft[hidden] {
  display: none !important;
}

.voice-draft .voice-play,
.voice-draft-send,
.voice-draft-cancel {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: #fff;
  flex: none;
  align-self: stretch;
  justify-self: stretch;
}

.voice-draft .voice-play {
  flex: none;
  width: 100%;
  min-width: 0;
  max-width: none;
  border-radius: 8px;
  overflow: hidden;
}

.voice-draft .voice-play svg {
  width: 86%;
  height: auto;
  max-width: 86%;
  max-height: calc(1.35em + 8px);
}

.voice-draft .voice-play .voice-ico-play {
  margin-left: 8%;
}

.voice-draft-send svg,
.voice-draft-cancel svg {
  width: 62%;
  height: 62%;
  max-width: 62%;
  max-height: 62%;
  display: block;
  flex-shrink: 0;
}

.voice-draft-cancel {
  background: color-mix(in srgb, var(--bad, #e03a3a) 62%, var(--accent));
  border-color: color-mix(in srgb, var(--bad, #e03a3a) 62%, var(--accent));
  font-size: 0;
  line-height: 0;
}

.voice-draft-wave {
  position: relative;
  min-width: 0;
  height: var(--composer-ctrl-h);
  background: var(--input);
  border: 1px solid var(--input-line);
  border-radius: 8px;
  overflow: hidden;
}

.voice-draft .voice-wave {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 100%;
}

.voice-draft .voice-dur {
  position: absolute;
  left: 8px;
  bottom: 3px;
  z-index: 2;
  min-width: 0;
  font-size: 10px;
  line-height: 1;
  color: var(--muted);
  pointer-events: none;
  text-align: left;
}

.voice-draft.is-live .voice-play,
.voice-draft.is-live .voice-draft-send {
  pointer-events: none;
  opacity: 0.45;
}

.composer-tools {
  display: none !important;
}

.composer-tools-off {
  --composer-ctrl-h: calc(1.35em + 20px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 8px;
  align-items: stretch;
  width: 97%;
  max-width: 97%;
  margin: 0 auto;
  padding: 0;
  height: var(--composer-ctrl-h);
  min-height: var(--composer-ctrl-h);
}

.composer-tool {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: var(--composer-ctrl-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--input-line);
  background: var(--input);
  color: var(--muted);
  pointer-events: auto;
}

.composer-tool.locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.composer-tool svg {
  width: 52%;
  height: auto;
  max-height: calc(1.35em + 8px);
}

.composer {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.composer-dock .composer {
  padding: 0;
  margin: 0;
  border: 0;
}

.cmd-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 14px 16px;
  max-height: 60vh;
  overflow: auto;
}

.cmd-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid var(--line);
}

.cmd-row code {
  font-size: 13px;
  font-weight: 400;
}

.cmd-row span {
  font-size: 12px;
  color: var(--muted);
}

.composer-shell {
  --composer-ctrl-h: calc(1.35em + 20px);
  display: grid;
  grid-template-columns: 10.5% minmax(0, 1fr) 10.5%;
  grid-template-areas: "gif text action";
  column-gap: 8px;
  align-items: end;
  width: 97%;
  max-width: 97%;
  min-width: 0;
  margin: 0 auto;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  pointer-events: none;
}

.composer-shell .gif-btn { grid-area: gif; }
.composer-shell .composer-text { grid-area: text; }
.composer-shell .send-btn,
.composer-shell .voice-btn { grid-area: action; position: relative; z-index: 2; }

input, textarea, button {
  border-radius: 8px;
  border: 1px solid var(--input-line);
  background: var(--input);
  color: inherit;
  padding: 10px 12px;
  font: inherit;
}

#text,
#dm-text,
.composer textarea {
  min-width: 0;
  width: 100%;
  min-height: var(--composer-ctrl-h, calc(1.35em + 20px));
  max-height: calc(1.35em * 7 + 20px);
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.composer textarea {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.composer textarea::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

button {
  background: var(--input);
  border-color: var(--input-line);
  color: #fff;
  cursor: pointer;
}

.icon-btn {
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-btn[hidden],
.dm-call-btn[hidden],
body.mem-open .dm-call-btn {
  display: none !important;
  pointer-events: none !important;
}

.icon-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

.send-btn,
.voice-btn {
  color: var(--fg);
  touch-action: none;
}

.voice-btn:active {
  transform: scale(0.94);
}
.voice-btn.rec,
.composer-shell .voice-btn.rec {
  background: var(--bad);
  border-color: var(--bad);
  color: #fff;
}

form.composer.recording textarea {
  opacity: 0.45;
}

.composer-shell .icon-btn {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--composer-ctrl-h);
  min-height: var(--composer-ctrl-h);
  max-height: var(--composer-ctrl-h);
  padding: 6px 4px;
  margin: 0;
  align-self: end;
  justify-self: stretch;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: #fff;
  pointer-events: auto;
}

.composer-shell .icon-btn svg {
  width: 86%;
  height: auto;
  max-width: 86%;
  max-height: calc(1.35em + 8px);
  flex-shrink: 0;
}

.voice-btn svg { pointer-events: none; }
.voice-btn .ico-cam { display: none; }
.voice-btn.mode-cam .ico-mic { display: none; }
.voice-btn.mode-cam .ico-cam { display: block; }

.composer-text {
  position: relative;
  display: flex;
  align-items: flex-end;
  align-self: end;
  min-width: 0;
  width: 100%;
  min-height: var(--composer-ctrl-h);
  pointer-events: auto;
}

.composer-shell textarea {
  display: block;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid var(--input-line);
  background: var(--input);
  border-radius: 8px;
  padding: 8px calc(var(--composer-ctrl-h) - 4px) 8px 8px;
  min-height: var(--composer-ctrl-h);
  line-height: 1.35;
  pointer-events: auto;
  vertical-align: bottom;
}

.attach-btn {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 1;
  box-sizing: border-box;
  width: calc(var(--composer-ctrl-h) - 10px);
  height: calc(var(--composer-ctrl-h) - 10px);
  min-width: 0;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none;
  color: var(--muted);
  cursor: pointer;
  pointer-events: auto;
}

.attach-btn svg {
  width: 86%;
  height: auto;
  max-width: 86%;
  max-height: calc(1.35em + 8px);
  display: block;
}

.attach-btn:hover,
.attach-btn:focus-visible {
  color: var(--fg);
}

.composer-shell .send-btn { display: none; }
.composer-shell .voice-btn { display: inline-flex; }
.composer.has-text .send-btn { display: inline-flex; }
.composer.has-text .voice-btn { display: none; }

.gif-btn {
  display: inline-flex;
  color: var(--fg);
}

.gif-sheet {
  --media-cols: 4;
  --media-gap: 8px;
  --media-pad: 8px;
  display: grid;
  grid-template-columns: repeat(var(--media-cols), minmax(0, 1fr));
  grid-auto-rows: min-content;
  justify-content: stretch;
  align-content: start;
  gap: var(--media-gap);
  padding: var(--media-pad);
  box-sizing: border-box;
  border-top: 1px solid var(--line);
  background: var(--card);
  flex: 0 0 62%;
  flex-shrink: 0;
  height: 62%;
  max-height: 62%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  overscroll-behavior: contain;
  -webkit-touch-callout: none;
  user-select: none;
}

.gif-sheet[hidden] {
  display: none !important;
}

.gif-pick {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 1px solid var(--input-line);
  background: var(--input);
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  contain: layout;
  clip-path: inset(0 round 8px);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-x pan-y;
  -webkit-appearance: none;
  appearance: none;
}

.gif-pick-in {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 8px;
  pointer-events: none;
}

.gif-pick img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}

.gif-pick.is-fav {
  border-color: #f0883e;
  box-shadow: inset 0 0 0 2px #f0883e;
}

.gif-pick.is-fav::after {
  content: "★";
  position: absolute;
  top: 3px;
  left: 4px;
  z-index: 2;
  font-size: 12px;
  line-height: 1;
  color: #f0883e;
  text-shadow: 0 0 2px #000;
  pointer-events: none;
}

.gif-pick.is-hold {
  border-color: #f0883e;
  box-shadow: inset 0 0 0 2px #f0883e, 0 0 0 2px #f0883e;
  z-index: 3;
}

.gif-fav-menu {
  position: fixed;
  z-index: 9999;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100vw - 16px);
  margin: 0;
  padding: 6px;
  border: 1px solid #f0883e;
  border-radius: 10px;
  background: #1c2128;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.gif-fav-menu[hidden] {
  display: none;
}

.gif-fav-act {
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.gif-fav-act:active {
  background: var(--input);
}

.msg-gif,
.msg-photo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 6px;
  margin-top: 2px;
}
.msg.has-gif .msg-bubble {
  width: 60%;
  max-width: 60%;
  padding: 6px;
}
.msg.has-gif .msg-core {
  width: 100%;
  max-width: 100%;
}
.msg.has-gif .msg-gif {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
  margin: 2px 0 0;
}

.msg.has-image {
  width: 100%;
  max-width: 100%;
}

.msg.has-image .msg-bubble {
  width: fit-content;
  max-width: 100%;
  padding: 6px;
}

.msg.has-image .msg-core {
  width: fit-content;
  min-width: min-content;
  max-width: 100%;
}

.msg.has-image .meta {
  width: 100%;
  max-width: 100%;
}

.msg.has-image .msg-photo {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(70vh, 520px);
  margin: 2px 0 0;
  object-fit: cover;
  object-position: center;
  background: transparent;
  display: block;
  cursor: zoom-in;
}

.photo-view {
  position: fixed;
  inset: 0;
  z-index: 90;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: #000;
  touch-action: none;
  overflow: hidden;
  overscroll-behavior: none;
}

#photo-view.photo-view,
#feed-view.photo-view,
#story-view.photo-view {
  inset: 0;
  padding: 0;
  margin: 0;
  width: auto;
  height: auto;
  background: #000;
  flex-direction: column;
}

.photo-view[hidden] { display: none; }

.photo-view-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: 72px;
  background: #000;
  color: #fff;
  z-index: 3;
}
.photo-view-top {
  padding-top: calc(var(--sys-top, env(safe-area-inset-top, 0px)) + 16px);
  padding-left: 6px;
  align-items: flex-end;
}
.photo-view-bottom {
  min-height: 0;
  margin: 0;
  padding: 0 0 var(--sys-bottom, env(safe-area-inset-bottom, 0px));
}
.photo-view-back {
  width: 52px;
  height: 52px;
  margin: 0 0 8px 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 42px;
  line-height: 1;
  cursor: pointer;
}
.photo-view-frame {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #000;
  box-shadow: none;
}

.photo-view-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}

#photo-view .photo-view-stage,
#feed-view .photo-view-stage,
#story-view .photo-view-stage {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
#feed-view .photo-view-stage img,
#feed-view .photo-view-stage video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.photo-view-fill {
  position: absolute;
  inset: -22%;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(28px) saturate(1.08);
  transform: scale(1.18);
  opacity: 0.42;
  pointer-events: none;
}
.photo-view-fill[hidden] { display: none !important; }

.photo-view-vid,
.photo-view-stage img {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  background: transparent;
}

.photo-view-meta {
  flex: 0 0 auto;
  max-height: 34%;
  overflow: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: #000;
  color: #eee;
  display: flex;
  flex-direction: column;
  gap: 0;
  -webkit-overflow-scrolling: touch;
}
.photo-view-onimg {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 2px #000;
}
.photo-view-onimg[hidden] { display: none !important; }
.photo-view-meta[hidden] { display: none !important; }
.photo-view-title,
.photo-view-price,
.photo-view-detail,
.photo-view-when {
  margin: 0;
  padding: 0;
}
.photo-view-title {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
}
.photo-view-price {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: #f0883e;
}
.photo-view-detail,
.photo-view-when {
  font-size: 13px;
  line-height: 1.25;
  color: #c9c9c9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cam-rec {
  position: fixed;
  inset: 0;
  z-index: 88;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

.cam-rec[hidden] {
  display: none !important;
  pointer-events: none !important;
}

.cam-rec-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(86vw, 86vh);
}

.cam-rec-ring {
  width: min(86vw, 72vh);
  height: min(86vw, 72vh);
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 0 0 9999px #000;
  background: #111;
}

.cam-rec.is-review .cam-rec-ring {
  box-shadow: none;
}

.cam-rec-ring video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.cam-rec.is-review .cam-rec-ring video {
  transform: none;
}

.cam-rec-seek {
  width: 100%;
  margin: 0;
  padding: 0;
  accent-color: #fff;
  touch-action: manipulation;
}

.cam-rec-seek[hidden],
.cam-rec-actions[hidden] {
  display: none !important;
}

.cam-rec-actions,
.cam-rec-record-bar {
  display: flex;
  gap: 16px;
  width: 100%;
  z-index: 1;
  justify-content: center;
  align-items: center;
}

.cam-rec-record-bar[hidden] {
  display: none !important;
}

.cam-rec-ctl {
  width: 56px;
  height: 56px;
  min-width: 56px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  background: color-mix(in srgb, #000 35%, transparent);
  color: #fff;
}

.cam-rec-ctl[hidden] {
  display: none !important;
}

.cam-rec-ctl svg {
  width: 26px;
  height: 26px;
  display: block;
}

.cam-rec-ctl.start { color: #e03131; border-color: #fff; }
.cam-rec-ctl.stop { background: #e03131; border-color: #e03131; color: #fff; }
.cam-rec-ctl.post { background: var(--accent); border-color: var(--accent); }
.cam-rec-ctl.close { color: #fff; }

.cam-rec-actions .members-create {
  flex: 1;
  min-height: 40px;
}

.msg.has-video {
  width: 100%;
  max-width: 100%;
}

.msg.has-video .msg-bubble {
  box-sizing: border-box;
  width: calc(var(--gif-size, 100px) * 1.3 + 12px);
  min-width: 0;
  max-width: calc(90% - var(--ava-size, 43px) - 6px);
  padding: 6px;
}
.msg.has-video .author {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.msg.has-video .msg-core {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.msg.has-video .meta {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.circle-video {
  --circle: var(--gif-size, 100px);
  display: block;
  position: relative;
  box-sizing: border-box;
  width: min(var(--circle), 100%);
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  padding: 0;
  margin: 2px 0 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #111;
  cursor: pointer;
  flex-shrink: 0;
}

.msg.has-video .circle-video,
.msg.has-video .circle-video-hold {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.msg.has-video .circle-video.is-playing-center,
.circle-video.is-playing-center {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
}
.circle-video.is-playing-center video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.circle-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}

.circle-video-hold {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: top;
}

.circle-video.is-playing-center {
  position: fixed;
  z-index: 240;
  margin: 0;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  transition:
    left 0.38s cubic-bezier(0.22, 0.82, 0.2, 1),
    top 0.38s cubic-bezier(0.22, 0.82, 0.2, 1),
    width 0.38s cubic-bezier(0.22, 0.82, 0.2, 1),
    height 0.38s cubic-bezier(0.22, 0.82, 0.2, 1);
}

.circle-video-dur {
  position: absolute;
  right: 10%;
  bottom: 12%;
  z-index: 1;
  padding: 1px 6px;
  border-radius: 8px;
  background: color-mix(in srgb, #000 55%, transparent);
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  pointer-events: none;
}

.dm-call-btn {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
}

.call-overlay {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sys-top, env(safe-area-inset-top, 0px)) 12px var(--sys-bottom, env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 92%, #000);
}

.call-overlay[hidden],
#call-overlay[hidden] {
  display: none !important;
  pointer-events: none !important;
}

.call-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px;
  width: min(88vw, 360px);
}

.call-avas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.call-ava {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  overflow: visible;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.12s ease;
}

.call-ava.is-talking {
  box-shadow:
    0 0 0 3px #f0a020,
    0 0 0 7px rgba(240, 136, 62, 0.45),
    0 0 22px 6px rgba(240, 160, 48, 0.7);
  animation: call-talk-glow 0.85s ease-in-out infinite;
}

@keyframes call-talk-glow {
  0%, 100% { box-shadow: 0 0 0 3px #f0a020, 0 0 0 6px rgba(240, 136, 62, 0.35), 0 0 16px 4px rgba(240, 160, 48, 0.55); }
  50% { box-shadow: 0 0 0 4px #ffb347, 0 0 0 9px rgba(240, 136, 62, 0.55), 0 0 28px 8px rgba(255, 176, 64, 0.8); }
}

.call-ava .msg-ava {
  --ava-size: 128px;
  flex: none;
  width: 100%;
  height: 100%;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: 100%;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
}

.call-ava .msg-ava,
.call-ava img,
.call-ava .msg-ava-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.call-name {
  font-size: 22px;
  font-weight: 400;
}

.call-status {
  color: var(--muted);
  font-size: 14px;
}

.call-mic-hint {
  max-width: 240px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.call-mic-hint[hidden] { display: none; }

.call-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.call-media-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.call-cam-btn {
  width: 52px;
  height: 52px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #161618;
  border: 1.5px solid #3a3a42;
  color: #d0d0d6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}
.call-cam-btn svg {
  width: 26px;
  height: 26px;
  display: block;
}
.call-cam-btn.on {
  color: #fff;
  background: #2a2214;
  border-color: #f0883e;
  box-shadow:
    0 0 0 1px #f0883e,
    0 0 16px #f0883e66,
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.call-ava-slot {
  position: relative;
  width: min(128px, 38vw);
  height: min(128px, 38vw);
  flex-shrink: 0;
}
.call-ava-slot .call-ava { width: 100%; height: 100%; }
#call-local {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  background: #000;
  z-index: 2;
}
#call-remote-video {
  width: 100%;
  max-height: 42vh;
  object-fit: contain;
  border-radius: 12px;
  background: #000;
}
#call-local[hidden],
#call-remote-video[hidden] { display: none; }

.call-overlay audio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.preview-gif {
  width: min(var(--gif-size, 100px), 100%);
  height: calc(min(var(--gif-size, 100px), 100%) * 0.7);
  max-width: 100%;
  background:
    repeating-conic-gradient(from 15deg, var(--accent) 0 12%, var(--input) 0 25%);
  position: relative;
}

.circle-video.preview-cam {
  background:
    radial-gradient(circle at 50% 36%, #e2c9b0 0 22%, #8d6a52 23% 34%, #2b2b2b 35% 100%);
}

.preview-gif::after {
  content: "GIF";
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--fg);
  font-size: 11px;
  font-weight: 400;
}

.composer textarea,
#dm-text {
  min-width: 0;
  width: 100%;
  min-height: calc(1.35em + 20px);
  max-height: calc(1.35em * 7 + 20px);
}

.msg .voice-msg {
  align-items: center;
  width: 100%;
  min-width: 196px;
  margin-top: 2px;
}
.msg .voice-play {
  align-self: center;
  margin-left: -6px;
}
.msg .voice-wave-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: var(--voice-wave, 36px);
  width: auto;
  min-width: 0;
  max-width: none;
  flex: 1 1 auto;
  padding: 0;
}
.msg .voice-wave {
  height: 100%;
  min-width: 72px;
  flex: 1 1 auto;
  touch-action: pan-y;
}
.msg .voice-wave-box .voice-dur {
  position: static;
  left: auto;
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  min-width: 2.6em;
  font-size: var(--voice-dur, 16px);
  line-height: 1;
  text-align: right;
}
.msg .voice-wave-knob {
  pointer-events: auto;
  cursor: grab;
  width: 14px;
  height: 14px;
  touch-action: none;
}
.msg .voice-wave-knob::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
}

.voice-msg {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 4px;
  margin-top: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.voice-play {
  box-sizing: border-box;
  flex: 0 0 var(--voice-play, 54px);
  width: var(--voice-play, 54px);
  height: var(--voice-play, 54px);
  min-width: var(--voice-play, 54px);
  max-width: var(--voice-play, 54px);
  min-height: var(--voice-play, 54px);
  max-height: var(--voice-play, 54px);
  margin: 0;
  padding: 0;
  align-self: flex-start;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.voice-play.on {
  background: transparent;
  border: 0;
  color: var(--fg);
}

.voice-play svg {
  width: 58%;
  height: 58%;
  display: block;
  flex-shrink: 0;
  transform: none;
}
.voice-play .voice-ico-play {
  margin-left: 0;
  transform: translateX(6%);
}

.voice-play.on .voice-ico-play {
  display: none;
}

.voice-play:not(.on) .voice-ico-pause {
  display: none;
}

.voice-wave-box {
  position: relative;
  flex: 1 1 auto;
  min-width: 88px;
  width: 140px;
  max-width: 220px;
  height: var(--voice-play, 54px);
  padding: 0 2px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.voice-wave {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 100%;
  touch-action: none;
  overflow: visible;
}

.voice-wave-box .voice-dur {
  position: absolute;
  left: 2px;
  bottom: 2px;
  z-index: 2;
  min-width: 0;
  font-size: calc(var(--voice-dur, 20px) * 0.5);
  line-height: 1;
  color: var(--muted);
  pointer-events: none;
  text-align: left;
  justify-content: flex-start;
}

.voice-wave-canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.preview-voice .voice-wave-knob {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
.preview-voice .voice-wave {
  border-radius: 8px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--accent) 0 3px,
      transparent 3px 8px
    );
  background-size: 100% 70%;
  background-repeat: no-repeat;
  background-position: center left;
}

.voice-wave-knob {
  position: absolute;
  top: 50%;
  left: 8px;
  width: 12px;
  height: 12px;
  margin: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fg) 22%, transparent);
  cursor: grab;
  touch-action: none;
  z-index: 1;
  pointer-events: none;
  will-change: left;
}

.voice-dur {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: var(--voice-dur, 20px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  min-width: 2.8em;
  text-align: right;
  flex: 0 0 auto;
  white-space: nowrap;
}

.voice-wave-box .voice-dur {
  display: block;
  flex: none;
  min-width: 0;
}

.preview-log .voice-msg {
  min-width: 0;
}

.back {
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border-color: transparent;
  color: var(--fg);
  font-size: 28px;
  line-height: 1;
}

.settings,
.personal {
  touch-action: pan-y;
  position: relative;
}

.personal #dm-chat > header,
.dm-chat-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 8px 10px 8px 6px;
  border-bottom: 1px solid var(--line);
}

.dm-head-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
  margin: 0;
  padding: 4px 8px 4px 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dm-head-card:active {
  background: var(--input);
}

.dm-chat-head .back {
  flex: 0 0 36px;
}

.personal #dm-chat > header h1,
.dm-chat-head .dm-name {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.dm-empty {
  padding: 24px 16px;
  color: var(--muted);
  text-align: center;
}

.dm-row.is-fav {
  order: -1;
  border-color: var(--nav-primary, #f0883e);
}
.dm-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dm-row:nth-child(odd) {
  background: color-mix(in srgb, var(--text) 5.5%, transparent);
}
.dm-row:nth-child(even) {
  background: color-mix(in srgb, var(--text) 1.5%, transparent);
}

.dm-ava {
  flex: 0 0 calc(var(--ava-size, 43px) * 1.22);
  width: calc(var(--ava-size, 43px) * 1.22);
  height: calc(var(--ava-size, 43px) * 1.22);
  min-width: calc(var(--ava-size, 43px) * 1.22);
  max-width: calc(var(--ava-size, 43px) * 1.22);
  min-height: calc(var(--ava-size, 43px) * 1.22);
  max-height: calc(var(--ava-size, 43px) * 1.22);
  border-radius: 50%;
  overflow: hidden;
  background: var(--input);
  align-self: center;
  aspect-ratio: 1 / 1;
}

.dm-ava img,
.dm-ava .msg-ava-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 50%;
}

.dm-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mem-counts {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0;
  flex: 0 0 auto;
  min-width: 1.5em;
  padding: 0 2px 0 8px;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}
.mem-counts .mem-on {
  color: #46c837;
}
.mem-counts .mem-slash,
.mem-counts .mem-all {
  color: #8a8a90;
}
.mem-counts[hidden] { display: none !important; }
.mem-last {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  color: #e03a3a;
}
.mem-last .tm,
.mem-last .d {
  color: #e03a3a;
}
.mem-last .d {
  font-size: 11px;
}

.dm-row:active {
  background: var(--input);
}

.dm-row-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  width: 100%;
  white-space: nowrap;
}

.dm-name {
  font-weight: 400;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-when {
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: 400;
}
.dm-when.st-on,
.dm-head-when.st-on,
.st-on {
  color: #46c837;
}
.dm-when.st-off,
.dm-head-when.st-off,
.st-off {
  color: #e03a3a;
}

.dm-preview {
  display: block;
  width: 100%;
  margin: 0;
  text-align: right;
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-chat-head .dm-preview,
#dm-head-preview {
  display: none;
}

.dm-unread {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--accent);
}

.dm-chat {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.dm-chat[hidden] { display: none; }

.peer-profile {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.peer-profile[hidden] { display: none; }

.peer-profile > header {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 0;
}

.peer-profile > header h1 {
  flex: 1;
  text-align: center;
  font-size: 16px;
}

.peer-profile-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 24px 32px;
}

.peer-profile-name {
  font-size: 20px;
  font-weight: 400;
  text-align: center;
}

.peer-profile-stats {
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.peer-profile-stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--input);
}

.peer-profile-stats dt {
  font-size: 12px;
  color: var(--muted);
}

.peer-profile-stats dd {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.peer-profile.is-mem .peer-profile-stats,
.peer-profile.is-mem .feed-box,
.peer-profile.is-mem .profile-bio,
.peer-profile.is-mem #peer-story-preview,
.peer-profile.is-mem #peer-social {
  display: none !important;
}

.peer-profile.is-mem #peer-mem-list {
  display: flex;
  margin-top: 18px;
}

#dm-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  --log-pad-l: 1.5%;
  --log-pad-r: 1.5%;
  padding: 8px 1.5% 16px 1.5%;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g fill='none' stroke='%238ec8ff' stroke-width='1.5' opacity='0.28'><path d='M28 34c0-8 10-12 14-5 4-7 14-3 14 5 0 10-14 20-14 20S28 44 28 34z'/><rect x='150' y='22' width='32' height='20' rx='7'/><path d='M160 42l6 10 6-10'/><path d='M108 88l10 0-8 18 14 0-18 28 6-20-10 0 6-26z' fill='%238ec8ff' stroke='none'/><circle cx='48' cy='150' r='9'/><path d='M48 136v8M48 156v8M34 150h8M54 150h8'/><path d='M170 130c12 0 20 10 20 22 0 16-20 28-20 28s-20-12-20-28c0-12 8-22 20-22z'/><path d='M86 48h18M95 39v18'/><circle cx='180' cy='78' r='5'/></g></svg>");
  background-size: 220px 220px;
  background-repeat: repeat;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#dm-text {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  max-height: 140px;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.profile-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 0;
}

.profile-pic {
  width: calc(var(--ava-size, 43px) * 2.55);
  height: calc(var(--ava-size, 43px) * 2.55);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--input);
  border: 1px solid var(--input-line);
  color: var(--muted);
  flex-shrink: 0;
}

.profile-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-pic img[hidden] {
  display: none;
}

.profile-guest {
  width: 54px;
  height: 54px;
}

.profile-pic.has-photo .profile-guest {
  display: none;
}

.profile-listening {
  display: block;
  margin: 8px 12px 4px;
  padding: 0;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.profile-id {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  max-width: 100%;
}
.profile-id[hidden] { display: none !important; }
.profile-id-ico { width: 18px; height: 18px; flex: 0 0 auto; }
.profile-link-btn {
  width: 28px;
  height: 28px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.profile-link-btn svg { width: 18px; height: 18px; display: block; }
.profile-link-btn[hidden], .profile-linked[hidden] { display: none !important; }
.profile-linked { color: #46c837; font-size: 12px; letter-spacing: 0.03em; }
#ava-crop-gif {
  width: min(86vw, 70vh, 420px);
  height: min(86vw, 70vh, 420px);
  object-fit: cover;
  border-radius: 50%;
  background: #1c1c1c;
}
#ava-crop-gif[hidden] { display: none !important; }
.profile-login {
  margin: 0;
  text-align: center;
  font-size: 16px;
  color: var(--fg);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.profile-bio {
  margin: 0;
  max-width: 100%;
  text-align: center;
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.profile-acts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.profile-account, .feed-empty {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.feed-empty[hidden], .photo-src[hidden] { display: none !important; }
#name-edit:not(.open),
#ava-crop:not(.open) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.name-edit.open {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: static;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  background: transparent;
}
.photo-src { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }
.photo-src-note { margin: 0; width: 100%; text-align: center; color: #d4552a; font-size: 13px; }
.ava-crop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
#ava-crop-canvas {
  width: min(86vw, 70vh, 420px);
  height: min(86vw, 70vh, 420px);
  max-width: 100%;
  touch-action: none;
  background: #1c1c1c;
  border: 1px solid #fff;
  position: relative;
  z-index: 1;
}
#ava-crop .account-actions {
  position: relative;
  z-index: 1;
}
#ava-crop.open {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  z-index: 9000;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.55);
  align-items: center;
  justify-content: center;
}

.profile-act {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  min-height: 56px;
  border-radius: 8px;
  background: var(--input);
  border: 1px solid var(--input-line);
  color: #fff;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
}

.profile-act svg {
  width: 22px;
  height: 22px;
  display: block;
}

.profile-act:disabled {
  opacity: 0.5;
  cursor: default;
}
.profile-act.on {
  border-color: var(--accent);
  color: var(--accent);
}

.feed-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
}
.feed-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.feed-form[hidden] { display: none !important; }
.feed-form-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 180px;
  background: #0a0a0a;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feed-form-stage .feed-draft {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feed-form-stage .feed-img,
.feed-form-stage .feed-vid {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
}
.feed-form-meta {
  flex: 0 0 auto;
  padding: 10px 12px 12px;
  background: #161616;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feed-form input,
.feed-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  color: #eee;
  padding: 6px 0;
  font: inherit;
}
.feed-form #feed-title {
  font-size: 15px;
  font-weight: 650;
}
.feed-form #feed-body {
  font-size: 13px;
  line-height: 1.4;
  color: #c9c9c9;
  resize: vertical;
  min-height: 3.2em;
}
.feed-tools {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
}
.feed-tools .profile-act { flex: 1; }
.feed-draft {
  width: 100%;
  font-size: 12px;
  color: var(--muted);
}
.feed-draft:empty { display: none; }
.feed-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.feed-post {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 8px 8px;
  border-radius: 8px;
  background: var(--input);
  border: 1px solid var(--input-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feed-title {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  width: 100%;
}
.feed-body {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  width: 100%;
}
.feed-when {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  width: 100%;
  font-size: 12px;
  color: var(--muted);
}
.feed-day { text-align: left; }
.feed-clock { text-align: right; margin-left: auto; font-variant-numeric: tabular-nums; }
.feed-img, .feed-vid {
  width: 100%;
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
  display: block;
  margin: 0;
  border-radius: 6px;
  background: #000;
}
.feed-vid-box { width: 100%; max-width: 100%; }
.feed-vid-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 6px 0 0;
}
.feed-vid-bar[hidden] { display: none !important; }
.feed-vid-play {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #1c1c1c;
  color: #fff;
  font-size: 14px;
  line-height: 36px;
  padding: 0;
}
.feed-vid-seek {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 28px;
  margin: 0;
  accent-color: #d4552a;
}
#feed-view .feed-vid-bar { padding: 6px 8px 8px; }
.feed-post .voice-msg,
.feed-draft .voice-msg,
.feed-preview .voice-msg {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.feed-post .voice-wave,
.feed-draft .voice-wave,
.feed-preview .voice-wave {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
}
.feed-del { display: none !important; }
.feed-preview { display: none !important; }
#feed-view.photo-view {
  z-index: 91;
  touch-action: pan-y;
}
#feed-view .photo-view-top {
  min-height: 44px;
  padding-top: var(--sys-top, env(safe-area-inset-top, 0px));
}
#feed-view .photo-view-back {
  width: 44px;
  height: 44px;
  margin: 0 0 0 2px;
  font-size: 32px;
}
#feed-view .photo-view-stage {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  background: #0a0a0a;
}
#feed-view .photo-view-frame {
  flex: 1 1 auto;
  height: auto;
  max-height: 60%;
  min-height: 0;
}
.feed-view-head {
  flex: 0 0 48px;
  height: 48px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  line-height: 1.1;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}
.feed-view-head[hidden] { display: none !important; }
#feed-view .photo-view-bottom {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#feed-view .photo-view-meta {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 12px 0;
  box-sizing: border-box;
}
#feed-view .photo-view-detail {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow: auto;
}
#feed-view .photo-view-when {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  margin-top: auto;
  padding: 8px 0 calc(var(--sys-bottom, env(safe-area-inset-bottom, 0px)) + 8px);
}
.feed-view-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
}
.feed-view-acts .profile-act {
  flex: 1 1 30%;
  min-width: 72px;
}
.feed-share-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  max-height: 160px;
  overflow: auto;
}
.feed-share-list[hidden] { display: none !important; }
.feed-share-opt {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: inherit;
  cursor: pointer;
}
.feed-share-card {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 4px 0 0;
  padding: 6px;
  border: 1px solid var(--card-line, var(--line));
  border-radius: 10px;
  background: var(--input);
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.feed-share-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  background: #111;
  flex: 0 0 56px;
}
.feed-share-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.feed-share-kicker {
  font-size: 11px;
  color: var(--muted);
}
.feed-share-title {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feed-post.feed-picked {
  outline: 2px solid rgba(88, 166, 255, 1);
  box-shadow: 0 0 0 4px rgba(88, 166, 255, 0.28);
  border-radius: 10px;
  animation: msg-pick-shake 0.48s cubic-bezier(0.16, 0.84, 0.32, 1) both;
}
#feed-view .photo-view-stage img,
#feed-view .photo-view-stage video {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: auto;
}
#feed-menu.modal-bg {
  background: transparent;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  pointer-events: auto;
  z-index: 80;
}
#feed-menu .sheet {
  position: fixed;
  left: 8px;
  top: 8px;
  width: min(200px, calc(100vw - 16px));
  gap: 6px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(22, 24, 28, 0.92);
  border-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
#feed-menu .sheet-btn {
  font-size: 50%;
  line-height: 1.3;
  padding: 6px 8px;
}

.profile-bio.is-empty {
  color: var(--muted);
}

.social-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

.social-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--input-line);
  border-radius: 10px;
  background: var(--input);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}

.social-btn.has-link {
  color: var(--ok);
}

.social-btn svg {
  width: 22px;
  height: 22px;
  display: block;
}

.yesno-row {
  display: flex;
  gap: 8px;
}

.yesno-row button {
  flex: 1;
}

#bio-input {
  width: 100%;
  resize: none;
  min-height: 72px;
}

.settings {
  touch-action: pan-y;
}

.settings button,
.settings .field,
.settings .lang-row,
.settings .section-title,
.settings header {
  touch-action: pan-y;
}

.settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings[data-pane="profile"] .settings-prefs,
.settings:not([data-pane="profile"]) .settings-profile {
  display: none;
}

.settings-profile,
.settings-prefs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--fg);
}

.sub-title {
  font-size: 12px;
  color: var(--muted);
}

.size-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.size-row input[type="range"] {
  flex: 1;
  padding: 0;
  border: none;
  background: transparent;
}

#msg-size-val {
  min-width: 2.4em;
  font-variant-numeric: tabular-nums;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.settings .field > span[data-i18n="language"],
.settings .field > span[data-i18n="silentMode"] {
  color: var(--muted);
  font-size: 14px;
}

.settings .field #name,
.settings .lang-btn {
  color: var(--fg);
}

.settings .members-head {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.12em;
  color: var(--fg);
}

.settings .sheet-btn,
.settings #live-mode-btn,
.settings .live-mode-btn {
  align-self: stretch;
  width: 100%;
  min-height: 40px;
  background: var(--input);
  color: #fff;
  border: 1px solid var(--input-line);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
}

.toggle-field {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.notify-enable-field {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.notify-enable-field[hidden] { display: none; }

.notify-enable-btn {
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
}

.toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hint {
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}

.switch {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  background: var(--input);
  border-color: var(--input-line);
}

.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--fg);
  transition: transform 0.18s ease;
}

.switch.on {
  background: var(--accent);
  border-color: var(--accent);
}

.switch.on .switch-knob {
  transform: translateX(20px);
}

.switch.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.lang-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lang-btn {
  flex: 1;
  background: var(--input);
  border-color: var(--input-line);
  text-transform: uppercase;
}

.lang-btn.on {
  background: var(--accent);
  border-color: var(--accent);
}

.modal-bg {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
}

.modal-bg.open { display: flex; }

.modal {
  width: min(380px, 100%);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 12px;
  overflow: hidden;
}

.modal header {
  padding: 12px 14px;
}

.modal h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.user-list {
  overflow: auto;
  padding: 4px 0 10px;
}
#readers-list.user-list {
  min-height: 0;
  max-height: min(70vh, 560px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#readers-list .users-rows {
  display: flex;
  flex-direction: column;
}
#readers-modal .modal {
  border: 0;
  box-shadow: none;
}
#readers-modal .modal header {
  display: none;
}
#readers-list .user-row {
  cursor: pointer;
  border: 0;
  border-top: 0;
  border-bottom: 0;
}

.user-row {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}

.user-empty {
  padding: 16px 14px;
  color: var(--muted);
  font-size: 13px;
}

.account-actions {
  display: flex;
  gap: 8px;
}

.account-actions .sheet-btn {
  flex: 1;
  text-align: center;
}

.notify-test-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notify-test-btn {
  text-align: left;
}

#users-modal.modal-bg {
  z-index: 86;
  align-items: flex-start;
  justify-content: flex-end;
  padding: calc(10px + var(--sys-top, env(safe-area-inset-top, 0px))) 10px 16px;
  background: rgba(0, 0, 0, 0.35);
}

.users-sheet {
  position: relative;
  width: min(420px, 100%);
  height: min(72vh, 560px);
  min-height: min(56vh, 420px);
  max-height: min(72vh, 560px);
  margin: 0;
  padding-top: 44px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

.users-count-bar {
  position: absolute;
  top: 6px;
  left: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  gap: 6px;
  pointer-events: auto;
}
.users-tab {
  flex: 1;
  min-height: 28px;
  padding: 4px 6px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--card-line);
  cursor: pointer;
}
.users-tab.on {
  color: #f0883e;
  border-color: #f0883e;
}

.users-sheet .user-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.users-rows {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.user-row {
  display: grid;
  grid-template-columns: var(--ava-size, 43px) minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  overflow: visible !important;
  -webkit-appearance: none;
  appearance: none;
}

.user-row .msg-ava {
  flex: 0 0 var(--ava-size, 43px);
  width: var(--ava-size, 43px);
  height: var(--ava-size, 43px);
}

.user-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-row-name {
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-row-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.admin-lv {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1;
}

.user-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 12px;
  overflow: visible;
}

.user-silent {
  display: inline-block;
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 400;
  color: var(--muted);
}

.st-silent,
.st-nsilent {
  color: var(--muted);
}

html.android .user-row {
  min-height: 62px;
  overflow: visible !important;
}
html.android .user-silent {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
}

.dm-head-when {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}

.dm-row-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.live-save-list {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.45;
}

.users-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13px;
}

.users-table th,
.users-table td {
  padding: 8px 10px;
  text-align: left;
  border-top: 1px solid var(--line);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-table th:nth-child(1),
.users-table td:nth-child(1) { width: 38%; }
.users-table th:nth-child(2),
.users-table td:nth-child(2) { width: 24%; }
.users-table th:nth-child(3),
.users-table td:nth-child(3) { width: 38%; }

.users-table thead th {
  border-top: 0;
}

.users-table tbody tr {
  touch-action: pan-y;
  user-select: none;
}

.users-table th {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  text-transform: lowercase;
}

.users-table .st-on { color: #46c837; }
.users-table .st-off { color: #e03a3a; }
.users-rows .user-row:nth-child(odd) {
  background: color-mix(in srgb, var(--text) 5.5%, transparent);
}
.users-rows .user-row:nth-child(even) {
  background: color-mix(in srgb, var(--text) 1.5%, transparent);
}

.users-sheet header { display: none; }

.last-active {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  white-space: nowrap;
}

.last-active .tm {
  font-size: 13px;
  font-weight: 400;
  color: inherit;
}

.last-active .d {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

.rename-body {
  padding: 4px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rename-sure { margin: 0; font-size: 14px; }
.rename-preview {
  margin: 0;
  font-weight: 400;
}

.hold-confirm {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: var(--input);
  border-color: var(--input-line);
  color: #fff;
}

.hold-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: #2ea043;
  pointer-events: none;
}

.hold-confirm.danger .hold-fill {
  background: #f85149;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rename-modal header {
  justify-content: flex-end;
}

.logout-sheet .rename-body {
  padding-top: 16px;
}

.user-stat-sheet {
  width: min(340px, 100%);
}

.user-stat-list {
  margin: 0;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.user-stat-list > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-stat-list dt {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  text-transform: lowercase;
}

.user-stat-list dd {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
}

.user-stat-list dd.st-on { color: #46c837; }
.user-stat-list dd.st-off { color: #e03a3a; }

.hold-label {
  position: relative;
  z-index: 1;
}

.preview-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.hold-confirm:disabled {
  opacity: 0.25;
  pointer-events: none;
}

.rename-status {
  margin: 0;
  font-size: 13px;
}

.rename-status.ok { color: var(--ok); }
.rename-status.bad { color: var(--bad); }

.mem-create-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.mem-create-form[hidden] { display: none !important; }
.mem-photo-preview {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.mem-photo-preview.has-photo { border-color: var(--ok, #3d9a4a); }
.mem-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mem-photo-preview.has-photo .profile-guest { display: none; }
.mem-photo-preview svg { width: 72px; height: 72px; }
.mem-name-status {
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 14px;
}
.mem-name-status.avail-ok { color: #3d9a4a; }
.mem-name-status.avail-bad { color: #e03a3a; }
#mem-name.avail-ok,
#rename-input.avail-ok {
  border-color: var(--ok);
  box-shadow: 0 0 0 1px var(--ok);
}

#mem-name.avail-bad,
#rename-input.avail-bad {
  border-color: var(--bad);
  box-shadow: 0 0 0 1px var(--bad);
}

.check-avail-btn {
  text-align: center;
}

.live-mode {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  touch-action: pan-y;
}

.live-mode[hidden] { display: none; }

.live-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.live-actions .sheet-btn,
.live-actions .auth-primary {
  flex: 1;
}

.live-top {
  flex: 0 0 auto;
  padding-top: var(--sys-top, env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.live-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

.live-stage.app > header {
  display: none !important;
}

.live-stage .preview-log {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  pointer-events: auto;
  padding: 8px 4% 12px 10px;
  gap: 8px;
}

.live-stage .composer {
  padding: 8px 0;
}

.live-stage .composer textarea {
  min-width: 0;
  width: 100%;
  min-height: calc(1.35em + 20px);
  max-height: calc(1.35em * 7 + 20px);
  resize: none;
}

.live-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-top: 0;
  padding: 6px 8px 4px;
  box-sizing: border-box;
}

.live-tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 6px 4px;
  background: var(--card);
  border: 1px solid var(--card-line);
  color: inherit;
  font-size: 11px;
  line-height: 1.15;
}

.live-tab.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.live-ico {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.live-panel {
  margin: 0;
  padding: 4px 0 6px;
  border-top: 1px solid var(--line);
}

.live-panel input[type="range"] {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  background: transparent;
}

#live-slider[hidden] {
  display: none;
}

.live-size-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 8px;
  max-height: 28vh;
  overflow-y: auto;
}

.live-size-panel[hidden] {
  display: none;
}

.live-size-panel .size-row {
  display: grid;
  grid-template-columns: 7.2em minmax(0, 1fr) 2.2em;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
}

.live-size-panel .size-row input[type="range"] {
  height: 18px;
}

.live-hint {
  margin: 2px 8px 0;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

.live-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 6px 7px calc(7px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.live-actions button,
.live-actions .sheet-btn,
.live-actions .auth-primary {
  flex: 1 1 50%;
  width: 50%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 8px;
  min-height: 34px;
  font-size: 17px;
  line-height: 1;
}

.preview-skin {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font, Pricedown, sans-serif);
  color-scheme: var(--scheme);
  border: 1px solid var(--card-line);
  border-radius: 10px;
  overflow: hidden;
  pointer-events: none;
}

.preview-app {
  display: flex;
  flex-direction: column;
  height: 220px;
}

.preview-skin header {
  display: none !important;
}

.preview-skin h1 {
  font-size: 13px;
  font-weight: 400;
}

.preview-log {
  flex: 1;
  overflow: hidden;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg);
}

.preview-composer {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.preview-input {
  flex: 1;
  min-height: 32px;
  border-radius: 8px;
  border: 1px solid var(--input-line);
  background: var(--input);
  color: var(--muted);
  font-size: 12px;
  padding: 6px 8px;
}

.preview-send {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent);
  border: 1px solid var(--accent);
}

.chat-stage > .typing-line {
  flex: 0 0 auto;
  z-index: 2;
}

.st-me {
  color: #ff8c00;
  font-size: 12px;
}

.typing-line,
.jump-line {
  flex: 0 0 auto;
  margin: 0;
  padding: 5px 16px;
  min-height: 22px;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.3;
  width: 100%;
  background: transparent;
  text-align: left;
}

.jump-line {
  border-bottom: 0;
  border-top: 1px solid var(--line);
  color: var(--link);
  font-style: normal;
  cursor: pointer;
}

.jump-bottom {
  --composer-ctrl-h: calc(1.35em + 20px);
  position: absolute;
  right: calc((100% - 97%) / 2);
  bottom: calc(8px + var(--composer-ctrl-h) + 8px + 4px);
  z-index: 6;
  width: calc(97% * 0.105);
  height: var(--composer-ctrl-h);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: #fff;
  box-shadow: none;
  cursor: pointer;
}

.jump-bottom svg {
  width: 62%;
  height: 62%;
  display: block;
}

.jump-bottom .jump-n {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #fff;
  color: var(--accent, #f0883e);
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
  text-align: center;
}

.jump-bottom .jump-n[hidden] { display: none; }

.jump-bottom[hidden] { display: none; }

.page.app.has-voice-draft #jump-bottom,
#dm-chat.has-voice-draft #dm-jump-bottom {
  bottom: calc(8px + var(--composer-ctrl-h) + 8px + var(--composer-ctrl-h) + 8px + 4px);
}

.typing-line[hidden],
.jump-line[hidden] { display: none; }

.unread-split {
  display: flex;
  align-self: stretch;
  width: 100%;
  align-items: center;
  gap: 10px;
  margin: 10px 0 8px;
  color: var(--link);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.unread-split::before,
.unread-split::after {
  content: "";
  flex: 1;
  height: 0;
  border-top: 1px solid var(--link);
  opacity: 0.7;
}

.live-room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--fg);
  cursor: pointer;
}
.live-room-count {
  font-variant-numeric: tabular-nums;
  color: var(--nav-primary-text);
}
.live-room-stage {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
  padding: calc(8px + var(--sys-top, env(safe-area-inset-top, 0px))) 8px calc(8px + var(--sys-bottom, env(safe-area-inset-bottom, 0px)));
}
.live-room-stage.call-overlay {
  align-items: stretch;
  justify-content: stretch;
}
.live-room-stage[hidden] { display: none; }
.live-room-top {
  flex: 0 0 70%;
  height: 70%;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.live-room-grid {
  display: grid;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}
.live-room-log {
  flex: 0 0 auto;
  max-height: 9.2em;
  overflow: hidden;
  padding: 4px 8px 6px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
}
.lr-log-line {
  margin: 0;
  font-size: 12px;
  line-height: 1.25;
  color: #f0883e;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lr-log-line[data-age="0"] { opacity: 1; }
.lr-log-line[data-age="1"] { opacity: 0.7; }
.lr-log-line[data-age="2"] { opacity: 0.5; }
.lr-log-line[data-age="3"] { opacity: 0.35; }
.lr-log-line[data-age="4"] { opacity: 0.22; }
.lr-log-line[data-age="5"] { opacity: 0.12; }
.lr-log-line[data-age="6"] { opacity: 0; }
.live-room-self {
  flex: 0 0 30%;
  height: 30%;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--line);
  padding: 6px 8px;
  box-sizing: border-box;
}
.live-room-grid[data-n="0"],
.live-room-grid[data-n="1"] { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.live-room-grid[data-n="2"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.live-room-grid[data-n="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.live-room-grid[data-n="3"] .live-room-tile:last-child { grid-column: 1 / -1; }
.live-room-grid[data-n="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.live-room-grid[data-n="5"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.live-room-grid[data-n="5"] .live-room-tile:nth-child(4) { grid-column: 1 / 2; }
.live-room-grid[data-n="5"] .live-room-tile:nth-child(5) { grid-column: 2 / 4; }
.live-room-grid[data-n="6"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.live-room-grid[data-n="7"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
.live-room-grid[data-n="7"] .live-room-tile:last-child { grid-column: 1 / -1; }
.live-room-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 0;
  padding: 8px;
  background: transparent;
}
.live-room-self .live-room-tile {
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 6px;
  padding: 4px 0;
}
.live-room-self .lr-face {
  width: min(12vh, 72px);
  height: min(12vh, 72px);
}
.live-room-self .lr-name {
  order: 2;
  text-align: center;
}
.live-room-self .lr-actions {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  order: 3;
}
.live-room-self .lr-top {
  flex-direction: row;
  justify-content: center;
  gap: 10px;
}
.live-room-self .lr-hang {
  min-width: 72px;
  background: #111;
  border-color: #000;
  color: #fff;
}
.live-room-self .call-cam-btn {
  background: #111;
  border-color: #000;
  color: #fff;
}
.live-room-self .call-cam-btn.on {
  color: #f0883e;
  border-color: #f0883e;
  background: #111;
}
.lr-face {
  position: relative;
  width: min(42vw, 128px);
  height: min(42vw, 128px);
  border-radius: 50%;
  overflow: visible;
  background: var(--card);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 transparent;
}
.lr-face.is-talking {
  box-shadow:
    0 0 0 3px #f0a020,
    0 0 0 7px rgba(240, 136, 62, 0.45),
    0 0 22px 6px rgba(240, 160, 48, 0.7);
  animation: call-talk-glow 0.85s ease-in-out infinite;
}
.live-room-tile.is-me .lr-face {
  box-shadow: 0 0 0 3px #e03a3a;
}
.lr-face .msg-ava {
  --ava-size: 100%;
  flex: none;
  width: 100%;
  height: 100%;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: 100%;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
}
.lr-face .msg-ava,
.lr-face img,
.lr-face .msg-ava-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.lr-me {
  color: #e03a3a;
  font-weight: 400;
}
.lr-face video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111;
}
.lr-face video[hidden] { display: none; }
.lr-audio {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.lr-name {
  font-size: 14px;
  color: var(--fg);
}
.lr-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.lr-top {
  display: flex;
  gap: 12px;
}
.live-room-controls { display: none; }
.profile-ava-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.story-preview {
  flex: 1;
  min-height: 36px;
  padding: 8px 10px;
  text-align: left;
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--nav-primary, #f0883e);
  border-radius: 10px;
}
.support-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
  width: 100%;
}
.support-card {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}
.support-card.is-open {
  border-color: #e05a32;
  background: color-mix(in srgb, #e05a32 16%, var(--card));
}
.support-card-head {
  display: grid;
  grid-template-columns: var(--ava-size, 43px) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  width: 100%;
}
.support-card-head .user-row-name { font-size: 14px; }
.support-card .support-when {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  width: 100%;
}
.support-card h3 { margin: 0; font-size: 14px; font-weight: 400; text-align: center; }
.support-card p { margin: 0; font-size: 13px; white-space: pre-wrap; }
.support-card .support-acts {
  display: flex;
  gap: 8px;
  width: 100%;
}
.support-card .support-acts .admin-box,
.support-card .support-acts button {
  flex: 1;
}
.support-card textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
  border-radius: 8px;
  background: var(--input);
  border: 1px solid var(--input-line);
  color: var(--fg);
  padding: 8px;
  font: inherit;
}
.news-list { display: flex; flex-direction: column; gap: 12px; }
.shop-pane { gap: 10px; }
.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
.shop-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
}
.shop-pic {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--input);
  cursor: zoom-in;
}
.shop-pic:disabled { cursor: default; }
.shop-img-fill {
  position: absolute;
  inset: -18%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(22px) saturate(1.05);
  transform: scale(1.12);
  opacity: 0.38;
  pointer-events: none;
}
.shop-img,
.shop-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 7%;
  box-sizing: border-box;
  display: block;
  z-index: 1;
}
.shop-ph {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}
.shop-foot {
  flex: 0 0 32px;
  height: 32px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.shop-price {
  font-size: 13px;
  line-height: 1;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}
.news-last {
  margin: 0 0 12px;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
.news-topline {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  overflow: hidden;
}
.news-author {
  position: static;
  font-size: 12px;
  line-height: 1.2;
  color: var(--muted);
  letter-spacing: 0.02em;
  flex: 0 0 auto;
  white-space: nowrap;
}
.news-topline .news-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0;
  min-width: 0;
  overflow: hidden;
}
.news-topline .news-tag {
  font-size: 10px;
  padding: 1px 5px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.news-card h3 {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 700;
}
.news-card h3 a {
  color: #f0883e;
  text-decoration: none;
}
.news-poster {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 2 / 1;
  height: auto;
  margin: 0 0 12px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--input);
  cursor: zoom-in;
  touch-action: manipulation;
}
.news-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.news-mark {
  display: inline;
  color: #f0883e;
  background: none;
  box-shadow: none;
  padding: 0;
  font-weight: 700;
}
.news-meta {
  margin: 32px 0 0 auto;
  font-size: 12px;
  line-height: 1.3;
  color: #c8c8c8;
  text-align: right;
  align-self: flex-end;
}
.news-body {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #f2f2f2;
  white-space: pre-wrap;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  width: 100%;
}
.news-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.news-tag {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.admin-pane .field { margin: 0; }
.admin-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
.admin-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 72px;
  padding: 10px 8px;
  border-radius: 10px;
  background: var(--input);
  border: 1px solid var(--input-line);
  color: #fff;
  font-size: 12px;
  text-align: center;
}
.admin-box svg {
  width: 22px;
  height: 22px;
  display: block;
}
.admin-box-form {
  gap: 8px;
  min-height: 88px;
}
.admin-box-form input {
  width: 100%;
  box-sizing: border-box;
  background: var(--card);
  border: 1px solid var(--card-line);
  color: var(--fg);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  text-align: center;
}
.admin-box-go {
  width: 100%;
  min-height: 32px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--card-line);
  color: #fff;
}
.admin-user-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.admin-user-actions[hidden] { display: none !important; }
#admin-users-list {
  max-height: 42vh;
  overflow-y: auto;
  width: 100%;
}
.admin-value-pop {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 92;
  width: min(280px, calc(100vw - 32px));
  padding: 14px;
  border-radius: 12px;
  background: rgba(22, 24, 28, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-value-pop[hidden] {
  display: none !important;
}
.admin-value-pop p {
  margin: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.35;
}
.admin-value-pop input {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  background: var(--input);
  border: 1px solid var(--input-line);
  color: var(--fg);
  font: inherit;
}
#user-pick-menu.modal-bg {
  background: transparent;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  pointer-events: auto;
  z-index: 80;
}
#user-pick-menu .sheet {
  position: fixed;
  left: 8px;
  top: 8px;
  width: min(220px, calc(100vw - 16px));
  gap: 6px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(22, 24, 28, 0.92);
  border-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
#user-pick-menu .sheet-btn {
  font-size: 50%;
  line-height: 1.3;
  padding: 6px 8px;
}
.user-row.is-picked {
  outline: 1px solid #f0883e;
  background: color-mix(in srgb, #f0883e 12%, transparent);
}
.users-pane {
  gap: 8px;
  height: 100%;
}
.users-pane .users-count-bar {
  position: static;
  top: auto;
  left: auto;
  right: auto;
}
.users-pane .user-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.yn-pop {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  padding: 12px;
  border-radius: 12px;
  background: rgba(22, 24, 28, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.yn-pop[hidden] {
  display: none !important;
}
.yn-pop p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
}
.yn-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.yn-btns button {
  min-height: 40px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--input);
  border: 1px solid var(--input-line);
}
#yn-yes { border-color: #46c837; color: #46c837; }
#yn-no { border-color: #e03a3a; color: #e03a3a; }
.notes-pane { position: relative; padding-bottom: 24px; gap: 8px; }
.notes-list { display: flex; flex-direction: column; gap: 8px; }
.notes-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  width: 100%;
}
.notes-form .voice-draft {
  width: 100%;
}
.admin-pane { gap: 8px; }
.admin-pane .members-create { min-height: 40px; }
#support-stub .members-pane { gap: 8px; }
#support-body { min-height: 72px; max-height: 160px; }
.rap-pane { gap: 8px; }
.settings-prefs { gap: 8px; }
.settings-prefs .account-actions { display: flex; flex-direction: column; gap: 8px; }
.support-list { display: flex; flex-direction: column; gap: 8px; }
.note-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.note-row[data-pri="low"] { background: #6b6b6b; color: #fff; border-color: transparent; }
.note-row[data-pri="mid"] { background: #f0883e; color: #1a1a1c; border-color: transparent; }
.note-row[data-pri="high"] { background: #c0392b; color: #fff; border-color: transparent; }
.note-row.is-done {
  background: #2f9e44 !important;
  color: #fff;
  border-color: transparent;
  padding-bottom: 22px;
}
.note-verified {
  position: absolute;
  right: 8px;
  bottom: 4px;
  width: 16px;
  height: 16px;
  color: #fff;
  pointer-events: none;
}
.note-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  user-select: none;
}
.note-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.18);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.note-row:not(.is-done):not([data-pri="low"]):not([data-pri="mid"]):not([data-pri="high"]) .note-chip {
  border-color: var(--line);
  background: var(--input);
}
.note-edit {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  transition: grid-template-rows 0.28s ease, opacity 0.2s ease;
}
.note-row.is-open .note-edit {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
}
.note-edit-inner {
  overflow: hidden;
  min-height: 0;
  padding-top: 2px;
}
.note-tools {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.note-done-lab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
  font-size: 12px;
  user-select: none;
}
.note-eu {
  display: flex;
  align-items: center;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.note-eu select {
  min-height: 32px;
  padding: 4px 4px;
  border-radius: 8px;
  border: 1px solid var(--input-line);
  background: var(--input);
  color: #fff;
}
.note-pri-pick {
  min-height: 32px;
  width: 100%;
  max-width: 160px;
  justify-self: center;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--input-line);
  background: var(--input);
  color: #fff;
  font-size: 12px;
}
.note-done {
  width: 22px;
  height: 22px;
  justify-self: end;
  accent-color: #2f9e44;
}
.live-room-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.live-room-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.live-room-block .live-room-empty {
  margin: 0;
  padding: 0 4px 2px 12px;
}
.live-room-block .live-room-inside {
  margin: 0;
}
.live-room-row.is-on {
  border-color: #f0883e;
  color: #f0883e;
}
.mem-leave {
  margin-left: auto;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 11px;
}
.mem-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mem-chief-pop {
  position: fixed;
  z-index: 560;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(22, 24, 28, 0.94);
  border: 1px solid var(--card-line);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.mem-chief-pop[hidden] { display: none; }
.mem-chief-pop button,
.mem-chief-pop select {
  min-height: 36px;
  text-align: left;
  background: var(--input);
  color: #fff;
  border: 1px solid var(--input-line);
  border-radius: 8px;
  padding: 6px 8px;
}
.notes-add {
  position: relative;
  right: auto;
  bottom: auto;
  align-self: center;
  margin: 28px auto 12px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: var(--nav-primary, #f0883e);
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}
.notes-add.is-rec { background: #c0392b; }
.rap-list { display: flex; flex-direction: column; gap: 8px; }
.rap-row { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
#story-view-video {
  width: min(100%, 100vh);
  height: min(100%, 100vw);
  object-fit: contain;
  background: #000;
}

.toast-stack {
  position: fixed;
  top: calc(10px + var(--sys-top, env(safe-area-inset-top, 0px)));
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(92vw, 420px);
  pointer-events: none;
}

.toast {
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--card-line);
  color: var(--fg);
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  animation: toast-in 0.28s ease, toast-out 0.32s ease 9.88s forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

form.composer.sending .send-btn {
  opacity: 0.45;
  pointer-events: none;
}

.db-app { max-width: none; }

.db-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.db-bar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.db-bar select {
  min-width: 160px;
  border-radius: 8px;
  border: 1px solid var(--input-line);
  background: var(--input);
  color: inherit;
  padding: 8px 10px;
  font: inherit;
}

.db-wrap {
  flex: 1;
  overflow: auto;
  padding: 0;
}

#grid {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
  font-size: 13px;
}

#grid th, #grid td {
  border-bottom: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
  white-space: nowrap;
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#grid th {
  position: sticky;
  top: 0;
  background: var(--input);
  color: var(--muted);
  font-weight: 400;
}

#grid .null { color: #5c6770; font-style: italic; }

html, body, .preview-skin, .live-mode {
  font-synthesis: none;
}

/* Desktop: same layout as Chrome device toolbar (Samsung Galaxy A55, 412×915).
   Skipped on already-narrow viewports (real phones / F12 device mode) and Android. */
@media (min-width: 540px) {
  html:not(.android) {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b0b0d;
    min-height: 100%;
  }
  html:not(.android) body {
    --phone-w: 412px;
    --phone-h: 915px;
    width: min(var(--phone-w), calc(100vw - 40px));
    height: min(var(--phone-h), calc(100dvh - 40px));
    max-width: calc((100dvh - 40px) * 412 / 915);
    margin: 0;
    padding-top: 22px;
    border-radius: 42px;
    overflow: hidden;
    transform: translateZ(0);
    box-shadow:
      inset 0 0 0 1px #2a2a2e,
      0 0 0 10px #141416,
      0 0 0 11px #3a3a40,
      0 28px 72px rgba(0, 0, 0, 0.58);
  }
  html:not(.android) body::after {
    content: "";
    position: absolute;
    top: 11px;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: #050506;
    box-shadow: inset 0 0 0 1.5px #2c2c32, 0 0 0 3px #161618;
    z-index: 400;
    pointer-events: none;
  }
}

.header-offline {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffb4b4;
  background: #5a1218;
  pointer-events: none;
  white-space: nowrap;
}
body.offline-mode .header-offline {
  display: block;
}
body.offline-mode .nav-drawer .nav-item:not([data-offline="ok"]) {
  display: none !important;
}
body.offline-mode .nav-drawer li:not(:has([data-offline="ok"])) {
  display: none !important;
}
body.offline-mode .page.app,
body.offline-mode #personal,
body.offline-mode #nav-stub,
body.offline-mode #members-pane,
body.offline-mode #news-stub,
body.offline-mode #shop-stub,
body.offline-mode #live-room-stub,
body.offline-mode #admin-stub,
body.offline-mode #support-stub,
body.offline-mode #users-stub,
body.offline-mode .composer,
body.offline-mode .composer-dock {
  pointer-events: none;
  opacity: 0.34;
}
body.offline-mode #notes-stub,
body.offline-mode #settings {
  pointer-events: auto;
  opacity: 1;
}
body.offline-mode #profile-photo-btn,
body.offline-mode #rename-btn {
  pointer-events: none;
  opacity: 0.4;
}
.server-down-gate .auth-btn {
  margin-top: 16px;
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .auth-pick:hover,
  .auth-saved .user-row:hover,
  .auth-saved-btn:hover,
  .auth-apk-go:hover,
  .dm-row:hover,
  .user-row:hover,
  .news-card:hover,
  .shop-card:hover,
  .note-row:hover,
  .nav-item:hover,
  .feed-share-card:hover,
  .members-create:hover,
  .sheet-btn:hover,
  .auth-primary:hover,
  button:hover,
  a:hover,
  [role="button"]:hover,
  summary:hover,
  .chat-media-item:hover,
  .chat-media-filter:hover,
  .chat-find-btn:hover,
  .chat-files-btn:hover,
  .chat-find-arrow:hover,
  .gif-btn:hover,
  .attach-btn:hover,
  .voice-btn:hover,
  .icon-btn:hover,
  .live-room-row:hover,
  .call-cam-btn:hover,
  .cam-rec-ctl:hover,
  .lang-btn:hover,
  .story-preview:hover,
  .feed-post:hover,
  .hold-confirm:hover {
    border-color: var(--hover-ink, #f0883e);
    box-shadow: inset 0 0 0 1px var(--hover-ink, #f0883e);
  }
  .nav-item:hover,
  .icon-btn:hover,
  .app-header-menu:hover,
  .chat-find-btn:hover,
  .chat-files-btn:hover,
  .chat-find-arrow:hover,
  .attach-btn:hover,
  .gif-btn:hover,
  .voice-btn:hover,
  .dm-call-btn:hover,
  .call-cam-btn:hover,
  .cam-rec-ctl:hover,
  .dice-fair-v:hover {
    border-color: transparent;
    box-shadow: none;
    background: transparent;
    color: #d4552a;
  }
}