@import url("/scrollbars.css?v=20260929site1");
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/nunito-500.ttf") format("truetype");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/nunito-600.ttf") format("truetype");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/nunito-700.ttf") format("truetype");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/nunito-800.ttf") format("truetype");
}

.shared-lists-dialog {
  width: min(44rem, calc(100% - 1.5rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.25rem;
  color: var(--text);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.shared-lists-dialog::backdrop { background: #00111bcc; }
.shared-lists-header, .shared-lists-toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.shared-lists-header { justify-content: space-between; position: sticky; top: 0; z-index: 2; background: var(--panel); padding-bottom: .5rem; }
.shared-lists-header h2 { margin: 0; }
.shared-lists-toolbar label { flex: 1; min-width: 9rem; }
.shared-lists-dialog input:not([type=checkbox]), .shared-lists-dialog select { width: 100%; min-width: 0; font-size: 1rem; }
.shared-lists-dialog select { color: var(--text); background: var(--panel-2); padding: .65rem; border: 1px solid var(--border); border-radius: 8px; }
.shared-list-form { display: flex; gap: .5rem; align-items: end; flex-wrap: wrap; margin: 1rem 0; }
.shared-list-form label { flex: 1 1 12rem; min-width: 0; margin: 0; }
.shared-list-form > button, .shared-list-form input { min-height: 3rem; }
.shared-lists-dialog label { display: flex; flex-direction: column; gap: .35rem; }
.shared-list-items { list-style: none; padding: 0; margin: .75rem 0; }
.shared-list-items li { display: flex; align-items: center; gap: .5rem; padding: .65rem 0; border-bottom: 1px solid var(--border); }
.shared-list-items li label { flex: 1; min-width: 0; flex-direction: row; align-items: center; overflow-wrap: anywhere; }
.shared-list-items input[type=checkbox] { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.shared-list-items button { min-height: 2.75rem; padding: .4rem .6rem; font-size: .85rem; }
.shared-list-items .is-checked { text-decoration: line-through; color: var(--muted); }
.shared-lists-network:not(:empty), .shared-lists-notice:not(:empty) { padding: .6rem; background: var(--panel-2); border-radius: 8px; }
.shared-list-confirm { border: 1px solid var(--accent); border-radius: 10px; padding: .75rem; margin-top: 1rem; }
.shared-list-confirm button { margin: .25rem; }
.shared-list-type { font-weight: 800; color: var(--accent); }
.shopping-catalog { margin: 1rem 0; padding: .85rem; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); }
.shopping-catalog h3, .shopping-recent h4 { margin: 0 0 .4rem; }
.shopping-catalog-tools { display: flex; flex-wrap: wrap; gap: .65rem; }
.shopping-catalog-tools label { flex: 1 1 10rem; min-width: 0; }
.shopping-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; max-height: 22rem; overflow-y: auto; padding: .2rem; margin: .5rem 0; }
.shopping-card { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .35rem; min-width: 0; min-height: 6rem; padding: .65rem .35rem; background: var(--panel); color: var(--text); border: 2px solid var(--border); border-radius: 12px; }
.shopping-card[aria-pressed=true] { border-color: #53c9af; background: #184641; }
.shopping-card:hover { border-color: var(--accent); }
.shopping-card:focus-visible { outline: 3px solid #7bdcc9; outline-offset: 1px; }
.shopping-card-icon { font-size: 1.9rem; line-height: 1.2; }
.shopping-card-name { font-size: .85rem; line-height: 1.25; overflow-wrap: anywhere; }
.shopping-card-state { position: absolute; right: .25rem; top: .15rem; font-size: .9rem; }
.shopping-recent { border-bottom: 1px solid var(--border); margin-bottom: .85rem; }
.chat-pin-mark { flex: none; font-size: .8rem; }
.ctx-menu-icon.chat-pin-icon-btn { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6m-5 0v7l-4 4v2h12v-2l-4-4V3m-2 13v6'/%3E%3C/svg%3E") center / contain no-repeat; }
.shopping-recent-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 14rem; }
.shopping-recent-item { position: relative; min-width: 0; display: flex; }
.shopping-recent-item > .shopping-card { width: 100%; padding-top: 2.8rem; }
.shopping-recent-item > .shopping-recent-remove { position: absolute; top: 2px; left: 2px; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); color: var(--text); font-size: 1.4rem; box-shadow: none; }
.shared-list-form .shopping-icon-field { flex: 0 0 auto; }
.shopping-icon-field button { min-height: 3rem; min-width: 3rem; margin: 0; font-size: 1.5rem; padding: .4rem; }
.shopping-item-emoji { flex: 0 0 auto; font-size: 1.35rem; }
.shopping-icon-picker { border: 1px solid var(--border); padding: .75rem; border-radius: 10px; }
.shopping-icon-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); max-height: 12rem; overflow-y: auto; gap: .3rem; margin-bottom: .5rem; }
.shopping-icon-choices button { min-height: 2.75rem; padding: .3rem; font-size: 1.5rem; background: var(--panel-2); }
@media (max-width: 600px) {
  .shopping-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shopping-catalog { padding: .55rem; }
}
@media (max-width: 400px) {
  .shared-lists-dialog { padding: .85rem; }
  .shared-list-items li { gap: .3rem; }
}

/* Planning spaces: quiet secondary actions, clear primary actions and flat tabs. */
:is(.event-dialog,.poll-dialog,.side-dialog,.event-guest) button {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .5rem .75rem;
  min-height: 44px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: none;
  transition: background-color .12s ease, border-color .12s ease;
}
:is(.event-dialog,.poll-dialog,.side-dialog,.event-guest) button:hover:not(:disabled) {
  background: var(--panel-2);
  border-color: var(--border);
  box-shadow: none;
  filter: none;
}
:is(.event-dialog,.poll-dialog,.side-dialog,.event-guest) button:active { transform: none; }
:is(.event-dialog,.poll-dialog,.side-dialog,.event-guest) button:disabled { opacity: .45; cursor: not-allowed; }
:is(.event-dialog,.poll-dialog,.side-dialog,.event-guest) button:is([type=submit],.planning-primary) {
  background: var(--accent-2);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
:is(.event-dialog,.poll-dialog,.side-dialog,.event-guest) button:is([type=submit],.planning-primary):hover:not(:disabled) { background: var(--accent-2); border-color: var(--text); }
.event-dialog .event-tabs { flex-wrap: nowrap; }
dialog:is(.event-dialog,.poll-dialog,.side-dialog) { border-color: var(--border); }
button:is(.event-card,.poll-card),.side-card.side-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: none;
  color: var(--text);
  font-weight: 400;
}
button:is(.event-card,.poll-card):hover:not(:disabled) { background: var(--panel-2); border-color: var(--muted); box-shadow: none; filter: none; }
:is(.event-dialog,.poll-dialog) > h2 { font-size: 1.25rem; margin: .25rem 0 1rem; }
:is(.event-dialog,.poll-dialog,.side-dialog,.event-guest) :is(h1,h2,h3,h4,h5,h6) { color: var(--accent-2); }
.event-dialog .event-message { border-color: var(--border); }
@media (prefers-reduced-motion: reduce) {
  :is(.event-dialog,.poll-dialog,.side-dialog,.event-guest) button { transition: none; }
}

:root {
  --bg: #0a1620;
  --bg-warm: #12202c;
  --panel: #142433;
  --panel-2: #1a3040;
  --text: #f0f6fa;
  --muted: #8fa9b8;
  --accent: #1a8fa8;
  --accent-hot: #e11d2e;
  --accent-deep: #002d50;
  --accent-2: #0b4f6c;
  --mine: #0b4f6c;
  --theirs: #243848;
  --theirs-2: #2c4558;
  --danger: #e11d2e;
  --border: #2a4558;
  --focus: #1a8fa8;
  --radius: 12px;
  --radius-sm: 10px;
  --shadow: 0 10px 28px #0006;
  --sidebar-width: 340px;
  --layout-gap: 0.55rem;
  --topbar-height: 4.75rem;
  --bottombar-height: 4.25rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  font-family: "Nunito", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  height: 100dvh;
  max-width: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}
html, body, .app, .thread, .sidebar, .modal-card {
  min-width: 0;
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 10000;
  padding: 0.65rem 1rem;
  background: var(--panel);
  color: var(--text);
  border-radius: 8px;
  font-weight: 700;
  transform: translateY(-200%);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
  outline: 3px solid #7bdcc9;
  outline-offset: 2px;
}

.muted { color: var(--muted); font-size: 0.85rem; }
.error { color: var(--danger); font-size: 0.9rem; margin: 0.35rem 0 0; }
.grow { flex: 1; min-width: 0; }

button {
  font-family: inherit;
  background: linear-gradient(135deg, #002d50 0%, #0b6f8f 48%, #1a8fa8 120%);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 0.65rem 1.15rem;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 4px 14px #002d5044;
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}
button:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 18px #002d5055;
}
button:active { transform: translateY(1px); }
button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.ghost {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text);
  box-shadow: none;
  border-radius: 999px;
  font-weight: 600;
}
.ghost:hover {
  filter: none;
  background: var(--panel-2);
  border-color: var(--accent);
  color: #fff;
  box-shadow: none;
}

input, textarea, select {
  font-family: inherit;
  background: var(--panel-2);
  border: 1.5px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  width: 100%;
  font-size: 16px; /* keep ≥16px — smaller fonts cause iOS focus zoom / clipped viewport */
  max-width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
input::placeholder,
textarea::placeholder {
  color: #7e93a1;
}
input:hover,
textarea:hover,
select:hover {
  border-color: #3d5a6a;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #2a9bb540;
  background: #203a48;
}

.group-description { margin: 1rem 0; }
.group-description textarea { width: 100%; min-width: 0; box-sizing: border-box; resize: vertical; }
.group-description [data-description-text] { white-space: pre-wrap; overflow-wrap: anywhere; }

label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #c5d4dc;
  margin: 0 0 0.85rem;
}

.pw-row {
  display: flex;
  gap: 0.45rem;
  align-items: stretch;
}
.pw-row input { flex: 1; width: auto; margin: 0; }
.pw-row .field-clear-wrap-grow {
  flex: 1 1 auto;
  min-width: 0;
}
.pw-row .field-clear-wrap-grow input {
  flex: none;
  width: 100%;
}
.field-clear-wrap {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}
.field-clear-wrap > input,
.field-clear-wrap > textarea {
  width: 100%;
  box-sizing: border-box;
  padding-right: 3rem;
}
.field-clear-wrap > textarea {
  padding-right: 3rem;
}
.field-clear-wrap > button.field-clear-btn {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  margin: 0;
  padding: 0;
  line-height: 1;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.field-clear-wrap > textarea ~ button.field-clear-btn {
  top: 0.55rem;
  transform: none;
}
.field-clear-btn::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.field-clear-wrap > button.field-clear-btn:hover,
.field-clear-wrap > button.field-clear-btn:focus-visible,
.field-clear-wrap > button.field-clear-btn:active {
  color: #ff8f9d;
  background: #ffffff14;
  outline: none;
  filter: none;
  box-shadow: none;
  transform: translateY(-50%);
}
.field-clear-wrap > textarea ~ button.field-clear-btn:hover,
.field-clear-wrap > textarea ~ button.field-clear-btn:focus-visible,
.field-clear-wrap > textarea ~ button.field-clear-btn:active {
  transform: none;
}
.field-clear-btn[hidden] {
  display: none !important;
}
.pw-toggle-btn,
.cam-scan-btn {
  flex: 0 0 auto;
  min-width: 48px;
  padding: 0 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--bg-warm);
  color: var(--text);
  border: 1.5px solid var(--border);
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: none;
}
.pw-toggle-btn {
  width: 48px;
  padding: 0;
  position: relative;
}
.pw-toggle-btn::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pw-toggle-btn.is-shown::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.8 21.8 0 0 1 5.06-5.94'/%3E%3Cpath d='M9.9 4.24A10.94 10.94 0 0 1 12 5c7 0 11 7 11 7a21.85 21.85 0 0 1-2.16 3.19'/%3E%3Cpath d='M14.12 14.12a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.8 21.8 0 0 1 5.06-5.94'/%3E%3Cpath d='M9.9 4.24A10.94 10.94 0 0 1 12 5c7 0 11 7 11 7a21.85 21.85 0 0 1-2.16 3.19'/%3E%3Cpath d='M14.12 14.12a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cam-scan-btn {
  width: 48px;
  padding: 0;
  position: relative;
}
.cam-scan-btn::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pw-toggle-btn:hover,
.cam-scan-btn:hover {
  filter: none;
  border-color: var(--accent);
  background: var(--panel-2);
  box-shadow: none;
}

.scan-overlay {
  position: fixed;
  inset: 0;
  background: #000c;
  display: none;
  place-items: center;
  z-index: 40;
  padding: 1rem;
}
.scan-overlay.is-open { display: grid; }
.scan-box { width: min(480px, 100%); text-align: center; }
.scan-view {
  position: relative;
  margin: 0.8rem 0;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}
#scan-video { width: 100%; max-height: 55dvh; display: block; }

.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1.5rem, env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, #2a8fad33, transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 30%, #0b4f6c28, transparent 50%),
    radial-gradient(ellipse 50% 35% at 0% 80%, #5eb8d418, transparent 45%),
    var(--bg);
}
.auth-shell {
  width: min(980px, 100%);
  margin: 0.5rem auto 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: stretch;
}
.auth-hero {
  display: none;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #d6dee4;
  box-shadow: var(--shadow);
  background: #fff;
  min-height: 0;
  align-self: stretch;
}
.auth-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 1.5rem 1.35rem 1.35rem;
  background: #fff;
}
.auth-hero-lockup {
  display: block;
  width: min(280px, 72%);
  height: auto;
  flex: 0 0 auto;
}
.auth-hero-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  flex: 0 1 auto;
  object-fit: contain;
  object-position: center bottom;
  background: #fff;
}
.auth-card {
  width: min(420px, 100%);
  justify-self: center;
  background: linear-gradient(180deg, #24363a 0%, var(--panel) 40%);
  padding: 1.35rem 1.35rem 1.5rem;
  border-radius: 20px;
  margin: 0;
  flex: 0 0 auto;
  border: 1px solid #35474b;
  box-shadow: var(--shadow);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: none;
}
.auth-card form button[type="submit"] {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.8rem 1rem;
  font-size: 1rem;
}
.auth-welcome {
  font-size: clamp(1.25rem, 4.8vw, 1.65rem);
  line-height: 1.25;
  text-align: center;
  margin: 0.5rem 0;
}
.auth-wordmark {
  display: block;
  width: min(260px, 90%);
  height: auto;
  margin: 0 auto 1rem;
  padding: 0.65rem 0.9rem;
  box-sizing: border-box;
  border-radius: 12px;
  background: #fff;
}
.auth-story {
  color: #123147;
  width: 100%;
  max-width: 390px;
}
.auth-story-label {
  color: #22675f;
  font-weight: 800;
  font-size: 0.85rem;
}
.auth-story h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.15;
  margin: 0.75rem 0;
}
.auth-story > p {
  color: #496474;
  line-height: 1.6;
}
.auth-benefits {
  display: grid;
  gap: 0.65rem;
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}
.auth-benefits li {
  padding: 0.7rem 0.85rem;
  background: #eff7f5;
  border-radius: 12px;
}
.auth-benefits strong, .auth-benefits span {
  display: block;
}
.auth-benefits span {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #496474;
}
.invite-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.65rem 0.8rem;
  margin: 0.5rem 0;
  border: 1px solid #63c7bb;
  border-radius: 10px;
  background: #123c3b;
  color: #e2fff7;
}
.invite-applied[hidden], #invite-code-field[hidden], .feature-loading[hidden] {
  display: none;
}
.feature-loading {
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 2rem);
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background: #123c3b;
  color: #e2fff7;
  box-shadow: var(--shadow);
  z-index: 200;
  pointer-events: none;
}
.auth-card .auth-form-actions {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.75rem;
  padding-top: 0.15rem;
}
.auth-card .auth-form-actions button[type="submit"] {
  margin-top: 0;
  font-weight: 800;
  min-height: 48px;
}
.auth-card .auth-form-actions .ghost {
  width: 100%;
  min-height: 44px;
}
.auth-card .auth-compact-hint {
  margin: 0 0 0.85rem;
}
.auth-card label {
  font-size: 0.92rem;
  font-weight: 700;
  color: #e8eef0;
  margin-bottom: 0.55rem;
}
.auth-card input,
.auth-card textarea,
.auth-card select {
  background: #f7f3ef;
  border: 1.5px solid #d5cdc4;
  color: #1a2224;
  font-weight: 600;
}
.auth-card input::placeholder,
.auth-card textarea::placeholder {
  color: #5c6a6e;
  opacity: 1;
  font-weight: 600;
  text-transform: capitalize;
}
.auth-card input:hover,
.auth-card textarea:hover,
.auth-card select:hover {
  border-color: #b8aea3;
  background: #fffaf6;
}
.auth-card input:focus,
.auth-card textarea:focus,
.auth-card select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #58999155;
  background: #fff;
  color: #121a1c;
}
.auth-card input:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus {
  -webkit-text-fill-color: #1a2224;
  box-shadow: 0 0 0 1000px #f7f3ef inset;
  transition: background-color 99999s ease-out;
}
.auth-card .pw-toggle-btn,
.auth-card .cam-scan-btn {
  border-color: #c9c0b6;
  color: #3a4548;
  background: #fff;
}
.auth-card .muted {
  color: #c5d0d3;
  font-size: 0.92rem;
  line-height: 1.45;
}
.auth-forgot-row {
  margin: -0.35rem 0 0.85rem;
  text-align: center;
}
.auth-card .linkish {
  background: none;
  border: none;
  padding: 0;
  color: #5eb8d4;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 650;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-card .linkish:hover {
  color: #9fe7f5;
}
.auth-ok {
  color: #d7f5e6;
  background: #163a2c;
  border: 1px solid #2f6b52;
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  font-size: 0.88rem;
  margin: 0 0 0.75rem;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  margin: 0;
  line-height: 0;
  max-width: 100%;
  padding: 0.18rem 0.4rem 0.16rem;
  border-radius: 7px;
  background: #f5f7fa;
  box-shadow: 0 1px 0 #ffffff22 inset;
}
.brand-mark-img {
  display: block;
  height: 0.82rem;
  width: auto;
  max-width: min(148px, 100%);
  object-fit: contain;
  object-position: left center;
}
.brand-lockup {
  display: block;
  width: min(280px, 78%);
  height: auto;
  margin: 0.15rem auto 0.55rem;
  border-radius: 14px;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.brand-lockup-sm {
  width: min(200px, 55%);
  padding: 0;
  margin-bottom: 0.85rem;
}
.brand-lockup-sm.brand-lockup-scene {
  width: min(280px, 72%);
  max-width: 100%;
}
.brand-tagline {
  text-align: center;
  margin: 0 0 1.1rem;
  line-height: 1.45;
  font-size: 1rem;
  font-weight: 600;
  color: #d7e2e5;
}
.brand-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex: 1;
  max-height: 100%;
}
.brand-row > div {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.05rem;
}
#me-name,
#me-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  line-height: 1.2;
}
#me-name {
  font-size: 0.95rem;
}
#me-email {
  font-size: 0.75rem;
}
.brand-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
  object-fit: cover;
  background: #f4f1ec;
  box-shadow: 0 2px 8px #0005;
  display: block;
}
.brand-icon[hidden],
.me-avatar-fallback[hidden] {
  display: none !important;
}
.me-avatar-fallback {
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: #7ed4e8;
  background: #1e5a6e;
  box-shadow: 0 2px 8px #0005;
  user-select: none;
}
.me-avatar-btn {
  padding: 2px;
  border: 0;
  background: transparent;
  border-radius: 14px;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 0;
}
.me-avatar-btn.has-status-glow {
  background: transparent;
  box-shadow: none;
  position: relative;
}
.me-avatar-btn.has-status-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 2px;
  background: linear-gradient(135deg, #ff1744 0%, #ff9100 50%, #ff1744 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.me-avatar-btn:not(.has-status-glow):hover .brand-icon,
.me-avatar-btn:not(.has-status-glow):focus-visible .brand-icon,
.me-avatar-btn:not(.has-status-glow):hover .me-avatar-fallback,
.me-avatar-btn:not(.has-status-glow):focus-visible .me-avatar-fallback {
  box-shadow: 0 0 0 2px #7ed4e888, 0 2px 8px #0005;
}
.me-avatar-btn:focus-visible {
  outline: none;
}
.me-avatar-btn.has-status-glow .brand-icon,
.me-avatar-btn.has-status-glow .me-avatar-fallback {
  box-shadow: none;
  position: relative;
  z-index: 1;
}
.thread-empty-inner {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 1.5rem;
  text-align: center;
}
@media (min-height: 700px) {
  .auth-screen {
    justify-content: safe center;
  }
}
@media (min-width: 900px) {
  .auth-shell {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: stretch;
    width: min(1040px, 100%);
    height: min(780px, calc(100dvh - 2.5rem));
    min-height: min(780px, calc(100dvh - 2.5rem));
    max-height: calc(100dvh - 2.5rem);
    margin: 0 auto;
  }
  .auth-hero,
  .auth-card {
    height: 100%;
    min-height: 0;
    max-height: none;
    margin: 0;
    align-self: stretch;
    border-radius: 22px;
    box-shadow: var(--shadow);
  }
  .auth-hero {
    display: block;
    position: relative;
    border: 1px solid #d6dee4;
    background: #fff;
    overflow: hidden;
  }
  .auth-card {
    border: 1px solid #35474b;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .auth-hero-inner {
    position: absolute;
    inset: 0;
    justify-content: safe center;
    overflow-y: auto;
    gap: 1.5rem;
    padding: 2rem 1.75rem 1.75rem;
  }
  .auth-hero-lockup {
    width: min(320px, 68%);
  }
  .auth-hero-img {
    width: 100%;
    max-height: 42%;
    object-fit: contain;
    object-position: center bottom;
    padding: 0;
  }
  .auth-card {
    width: 100%;
    justify-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    box-sizing: border-box;
    padding: 1.75rem 1.85rem 1.9rem;
  }
  .auth-card > * {
    flex-shrink: 0;
  }
  .auth-card .brand-lockup {
    margin-top: 0;
    margin-bottom: 0.55rem;
  }
  .auth-card .brand-tagline {
    margin-bottom: 1.15rem;
  }
  .auth-card form {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
  }
  .auth-card form[hidden] {
    display: none !important;
  }
  .brand-lockup {
    width: min(300px, 72%);
  }
}
.tabs {
  display: flex;
  gap: 0.35rem;
  margin: 1.1rem 0 1.15rem;
  padding: 0.3rem;
  background: var(--bg-warm);
  border-radius: 999px;
  border: 1px solid var(--border);
}
.tab {
  flex: 1;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  border-radius: 999px;
  padding: 0.55rem 0.7rem;
  font-weight: 700;
  font-size: 0.88rem;
}
.tab:hover {
  filter: none;
  background: #243844;
  color: var(--text);
  box-shadow: none;
}
.tab.active {
  background: linear-gradient(135deg, var(--accent-hot), #ff5e8a 70%);
  color: #fff;
  box-shadow: 0 3px 10px #ff7a4533;
}
.auth-tabs {
  background: #152226;
  border-color: #3d5256;
}
.auth-tabs .tab {
  min-height: 2.55rem;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: #b8c6ca;
  background: transparent;
  border: 1.5px solid transparent;
}
.auth-tabs .tab:hover {
  background: #2a3c40;
  color: #f3f7f8;
}
.auth-tabs .tab.active {
  background: linear-gradient(135deg, #0b6f8f 0%, #2a8fad 55%, #5eb8d4 140%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 12px #0b6f8f44;
}
.auth-tabs .tab:not(.active) {
  background: #24363a;
  border-color: #3f5559;
  color: #e2ebed;
}

.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  max-width: 100%;
  overflow: hidden;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}
.sidebar {
  grid-column: 1;
  grid-row: 1;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.thread {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
  background: #0e1a22;
}
.sidebar-tools {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-shrink: 0;
  flex-wrap: nowrap;
  box-sizing: border-box;
  height: calc(var(--bottombar-height) + var(--safe-bottom));
  min-height: calc(var(--bottombar-height) + var(--safe-bottom));
  max-height: calc(var(--bottombar-height) + var(--safe-bottom));
  padding: 0 0.85rem;
  padding-bottom: var(--safe-bottom);
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: var(--panel-2);
  z-index: 6;
  min-width: 0;
  overflow: hidden;
}
.sidebar-head,
.thread-head {
  display: flex;
  align-items: center;
  gap: var(--layout-gap);
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  max-height: var(--topbar-height);
  padding: 0 0.85rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.thread-head {
  flex-wrap: nowrap;
  overflow: visible;
}
.thread-heading {
  min-width: 0;
  overflow: visible;
}
.e2e-tip {
  display: none;
  position: fixed;
  z-index: 80;
  width: min(300px, calc(100vw - 1.5rem));
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  background: #0f2430f2;
  border: 1px solid var(--border);
  color: #e8f4f8;
  text-align: left;
  box-shadow: 0 10px 28px #0008;
  cursor: default;
  white-space: normal;
  pointer-events: none;
}
.e2e-tip.is-visible {
  display: block !important;
}
.e2e-tip strong {
  display: block;
  font-size: 0.82rem;
  margin-bottom: 0.35rem;
  color: #9fe7f5;
}
.e2e-tip span {
  display: block;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #c5d8e0;
  font-weight: 500;
}
.thread-heading strong,
.thread-heading .thread-title-btn,
.thread-heading .muted {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}
.thread-heading strong,
.thread-heading .thread-title-btn {
  font-size: 0.98rem;
}
.thread-title-btn {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  letter-spacing: normal;
  text-align: left;
  cursor: pointer;
  max-width: 100%;
  box-shadow: none;
  filter: none;
}
.thread-title-btn:hover,
.thread-title-btn:focus-visible {
  color: #7ed4e8;
  outline: none;
  background: transparent;
  box-shadow: none;
  filter: none;
}
.thread-title-btn:disabled {
  cursor: default;
  color: inherit;
  box-shadow: none;
  filter: none;
}
.thread-heading .muted {
  font-size: 0.78rem;
}
.presence-label.is-offline.has-last-seen {
  cursor: help;
  border-bottom: 1px dotted currentColor;
}
.presence-label.is-busy {
  color: var(--accent-hot);
}
.thread-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  flex-wrap: nowrap;
  max-width: min(58%, 440px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.sidebar-head .ghost:not(.icon-btn),
.thread-head .ghost:not(.icon-btn),
.thread-actions .ghost:not(.icon-btn) {
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
  white-space: nowrap;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.thread-actions .icon-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
}
.icon-btn {
  width: 40px;
  height: 40px;
  padding: 0 !important;
  display: grid;
  place-items: center;
  border-radius: 999px;
}
.icon-btn::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.e2e-lock-btn {
  color: #7ed4e8;
  cursor: help;
}
.e2e-lock-btn:hover,
.e2e-lock-btn:focus-visible,
.e2e-lock-btn.is-open {
  color: #b7eef7;
}
.e2e-lock-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
.more-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='5' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='19' r='1.8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='5' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='19' r='1.8'/%3E%3C/svg%3E");
}
.logout-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}
.invites-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E");
}
.add-member-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E");
}
.profile-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.status-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4l2.5 1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4l2.5 1.5'/%3E%3C/svg%3E");
}
.music-playlists-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
}
.support-icon-btn {
  width: auto;
  min-width: 40px;
  padding: 0 0.55rem !important;
  gap: 0.3rem;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.support-icon-btn::before {
  flex: 0 0 auto;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E");
}
.support-btn-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.admin-icon-btn {
  width: auto;
  min-width: 40px;
  padding: 0 0.55rem !important;
  gap: 0.3rem;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.admin-icon-btn::before {
  flex: 0 0 auto;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}
.admin-btn-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.admin-client-usage table {
  width: 100%;
  border-collapse: collapse;
  text-align: start;
  font-size: 0.92rem;
}
.admin-client-usage th, .admin-client-usage td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--border);
}
.admin-client-usage th { font-weight: 700; }
.admin-stat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.admin-stat-list li {
  display: flex;
  gap: 0.45rem;
  align-items: baseline;
  font-size: 0.92rem;
}
.admin-actions {
  margin-top: 0.65rem;
  flex-wrap: wrap;
}
.admin-user-list {
  margin-top: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: min(40vh, 320px);
  overflow: auto;
}
.admin-user-row {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.15rem;
  border-bottom: 1px solid var(--border);
}
.admin-user-row:last-child {
  border-bottom: 0;
}
.admin-user-meta {
  min-width: 0;
  flex: 1;
}
.admin-user-meta strong {
  display: block;
  word-break: break-word;
}
.admin-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}
.admin-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.12rem 0.4rem;
  border-radius: 6px;
  background: #e8f2f0;
  color: #1f4d45;
}
.admin-badge-env {
  background: #f3eee4;
  color: #6a4b1a;
}
.admin-user-actions {
  flex: 0 0 auto;
}
.admin-user-locked {
  font-size: 0.78rem;
  max-width: 8.5rem;
  text-align: right;
}
.ctx-menu-icon.report-icon-btn {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3v18h2v-7h9l-1.5-3.5L16 7H7V3H5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3v18h2v-7h9l-1.5-3.5L16 7H7V3H5z'/%3E%3C/svg%3E");
}
.report-panel .report-intro {
  margin: 0 0 0.75rem;
}
.report-reasons {
  border: 0;
  margin: 0 0 0.85rem;
  padding: 0;
}
.report-reasons legend {
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 0.45rem;
  padding: 0;
}
.report-reason-row {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  column-gap: 0.55rem;
  align-items: start;
  margin: 0.35rem 0;
  width: 100%;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}
.report-reason-row input[type="radio"] {
  width: 1.15rem !important;
  height: 1.15rem !important;
  min-width: 1.15rem !important;
  max-width: 1.15rem !important;
  margin: 0.15rem 0 0 !important;
  padding: 0 !important;
  flex: none;
  accent-color: var(--accent, #2a9d8f);
  box-shadow: none;
}
.modal-card .report-reason-row input[type="radio"] {
  width: 1.15rem !important;
  height: 1.15rem !important;
  min-width: 1.15rem !important;
  max-width: 1.15rem !important;
  margin: 0.15rem 0 0 !important;
}
.report-note {
  width: 100%;
  min-height: 4.5rem;
  margin-top: 0.35rem;
  resize: vertical;
  font: inherit;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface, #fff);
  color: inherit;
  box-sizing: border-box;
}
.peer-profile-actions {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.danger-text {
  color: #b42318 !important;
}
.voice-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='23'/%3E%3Cline x1='8' y1='23' x2='16' y2='23'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='23'/%3E%3Cline x1='8' y1='23' x2='16' y2='23'/%3E%3C/svg%3E");
}
.voice-icon-btn.is-recording {
  color: var(--danger, #e85d6f) !important;
  border-color: #e85d6f66 !important;
  background: #e85d6f22 !important;
}
.voice-icon-btn.is-recording::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3C/svg%3E");
}
.camera-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
}
.attach-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
}
.mute-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5L6 9H2v6h4l5 4V5z'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5L6 9H2v6h4l5 4V5z'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3C/svg%3E");
}
.mute-icon-btn.is-on::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5L6 9H2v6h4l5 4V5z'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5L6 9H2v6h4l5 4V5z'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E");
}
.archive-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'/%3E%3Crect x='1' y='3' width='22' height='5'/%3E%3Cline x1='10' y1='12' x2='14' y2='12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'/%3E%3Crect x='1' y='3' width='22' height='5'/%3E%3Cline x1='10' y1='12' x2='14' y2='12'/%3E%3C/svg%3E");
}
.block-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='4.93' y1='4.93' x2='19.07' y2='19.07'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='4.93' y1='4.93' x2='19.07' y2='19.07'/%3E%3C/svg%3E");
}
.mute-icon-btn.is-on,
.archive-icon-btn.is-on,
.block-icon-btn.is-on {
  color: var(--accent-hot);
  border-color: #e85d6f66;
}
.emoji-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E");
}
.giphy-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M8 8h3v8H9.5v-2.5H8.2a2 2 0 0 1 0-4H8zm5.5 0H16a2 2 0 0 1 0 4h-1.25V16H13.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M8 8h3v8H9.5v-2.5H8.2a2 2 0 0 1 0-4H8zm5.5 0H16a2 2 0 0 1 0 4h-1.25V16H13.5z'/%3E%3C/svg%3E");
}
.camera-overlay {
  position: fixed;
  inset: 0;
  background: #000c;
  display: none;
  place-items: center;
  z-index: 35;
  padding: max(0.75rem, var(--safe-top)) 0.75rem max(0.75rem, var(--safe-bottom));
  overflow: auto;
}
.camera-overlay.is-open { display: grid; }
.camera-box {
  width: min(640px, 100%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1rem;
  box-shadow: var(--shadow);
  min-width: 0;
}
.camera-view {
  position: relative;
  margin: 0.75rem 0;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 4 / 3;
  max-height: min(60dvh, 520px);
}
#camera-video,
#camera-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.camera-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}
.camera-actions button {
  flex: 1 1 auto;
  min-width: 6.5rem;
}
.voice-overlay {
  position: fixed;
  inset: 0;
  background: #000c;
  display: none;
  place-items: center;
  z-index: 35;
  padding: max(0.75rem, var(--safe-top)) 0.75rem max(0.75rem, var(--safe-bottom));
  overflow: auto;
}
.voice-overlay.is-open { display: grid; }
.voice-box {
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.15rem;
  box-shadow: var(--shadow);
  min-width: 0;
  display: grid;
  gap: 0.85rem;
}
#voice-preview {
  width: 100%;
  max-width: 100%;
}
.voice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}
.voice-actions button {
  flex: 1 1 auto;
  min-width: 6.5rem;
}

.status-overlay {
  position: fixed;
  inset: 0;
  background: #05080ccc;
  display: none;
  z-index: 40;
  padding: max(0.65rem, var(--safe-top)) 0.65rem max(0.85rem, var(--safe-bottom));
}
.status-overlay.is-open {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.status-top {
  display: grid;
  gap: 0.55rem;
  z-index: 2;
  min-width: 0;
}
.status-progress {
  display: flex;
  gap: 0.28rem;
}
.status-progress span {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: #ffffff33;
  overflow: hidden;
}
.status-progress span i {
  display: block;
  height: 100%;
  width: 0;
  background: #fff;
  border-radius: inherit;
}
.status-progress span.is-done i {
  width: 100%;
}
.status-progress span.is-active i {
  width: var(--status-progress, 0%);
  transition: width 0.05s linear;
}
.status-meta {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
  padding: 0 0.15rem;
}
.status-meta strong {
  color: #fff;
  font-size: 0.98rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-meta .muted {
  color: #c5d4dc;
  font-size: 0.82rem;
  flex-shrink: 0;
}
.status-top {
  grid-template-columns: 1fr auto auto;
  align-items: start;
}
.status-progress {
  grid-column: 1 / -1;
}
.status-meta {
  grid-column: 1;
}
.status-delete-btn {
  padding: 0.35rem 0.7rem !important;
  font-size: 0.82rem !important;
  min-height: 0;
}
.status-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
}
#status-image {
  max-width: min(100%, 720px);
  max-height: min(78dvh, 900px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  background: #000;
}
#status-caption {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: min(90%, 560px);
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  background: #000a;
  color: #fff;
  text-align: center;
  font-weight: 600;
  z-index: 1;
}
.status-stage:has(#status-viewers:not([hidden])) #status-caption {
  bottom: calc(0.75rem + min(38%, 220px) + 0.45rem);
}
#status-caption:empty {
  display: none;
}
.status-viewers {
  position: absolute;
  left: 50%;
  bottom: 0.75rem;
  transform: translateX(-50%);
  width: min(92%, 420px);
  max-height: min(38%, 220px);
  overflow: auto;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  background: #0a1218ee;
  border: 1px solid #ffffff22;
  color: #fff;
  z-index: 2;
}
.status-viewers-title {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  font-weight: 800;
}
.status-viewers-empty {
  margin: 0;
  color: #c5d4dc !important;
  font-size: 0.82rem;
}
.status-viewer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}
.status-viewer-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.86rem;
}
.status-viewer-name {
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-viewer-time {
  flex-shrink: 0;
  color: #c5d4dc !important;
  font-size: 0.75rem;
}
.status-hub-views {
  display: grid;
  gap: 0.55rem;
  margin: 0.15rem 0 0.35rem;
}
.status-hub-view-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
  padding: 0.45rem 0.55rem 0.55rem;
}
.status-hub-view-open {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin: 0;
  padding: 0.2rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  box-shadow: none;
  text-align: left;
  font: inherit;
  letter-spacing: normal;
  cursor: pointer;
}
.status-hub-view-open:hover,
.status-hub-view-open:focus-visible {
  background: #243844;
  filter: none;
  box-shadow: none;
  outline: none;
}
.status-hub-view-open img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: #111;
}
.status-hub-view-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.status-hub-view-copy strong {
  font-size: 0.92rem;
}
.status-hub-view-names {
  margin: 0.35rem 0 0 0.2rem;
  font-size: 0.82rem;
  line-height: 1.35;
}
.status-nav {
  position: absolute;
  top: 20%;
  bottom: 12%;
  width: 42%;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
}
.status-nav:hover,
.status-nav:active {
  filter: none;
  box-shadow: none;
  transform: none;
}
.status-prev { left: 0; }
.status-next { right: 0; }

.status-hub {
  display: grid;
  gap: 1rem;
}
.status-hub-mine,
.status-hub-list {
  display: grid;
  gap: 0.55rem;
}
.status-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  background: var(--panel-2);
  border: 1.5px solid var(--border);
  color: var(--text);
  box-shadow: none;
  border-radius: 14px;
  padding: 0.65rem 0.75rem;
  font-weight: 600;
}
.status-row:hover {
  filter: none;
  border-color: var(--accent);
  background: #243844;
  box-shadow: none;
}
.status-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, var(--accent-hot), #2a9bb5);
  flex-shrink: 0;
}
.status-ring.is-empty {
  background: var(--border);
}
.status-ring img,
.status-ring-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--panel-2);
  background: #1e5a6e;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #7ed4e8;
}
.status-row-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 0.1rem;
}
.status-row-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-card-media {
  width: min(720px, 100%);
}
.modal-card-media #modal-body,
.modal-card-media .modal-body {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 0.85rem;
}
.media-compose {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}
.media-compose-preview-slot {
  min-width: 0;
  background: #0c1820;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.media-compose-preview {
  display: block;
  width: 100%;
  max-height: min(52vh, 420px);
  object-fit: contain;
  background: #000;
}
.media-compose-audio {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem 1rem 1rem;
  min-width: 0;
}
.media-compose-audio-name {
  margin: 0;
  font-weight: 700;
  word-break: break-word;
}
.media-compose-audio-player {
  width: 100%;
  min-width: 0;
  height: 48px;
  min-height: 48px;
}
.media-compose-upload {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}
.media-compose-upload[hidden] {
  display: none !important;
}
.media-compose-upload-track {
  height: 0.55rem;
  border-radius: 999px;
  background: #0c1820;
  border: 1px solid var(--border);
  overflow: hidden;
}
.media-compose-upload-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2a9d8f, #7ec8dd);
  transition: width 0.15s ease-out;
}
.media-compose-upload-fill.is-indeterminate {
  width: 100% !important;
  opacity: 0.55;
  animation: media-compose-upload-pulse 1.1s ease-in-out infinite;
}
@keyframes media-compose-upload-pulse {
  0%,
  100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}
.media-compose-upload-label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted, #9bb0bd);
}
.media-compose-file-name {
  margin: 0;
  padding: 1rem;
}
.media-compose-pdf-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  padding: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--panel-2) 90%, transparent);
}
.media-compose-mode {
  margin: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
}
.media-compose-mode.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent, #2a9d8f) 55%, var(--border));
  background: color-mix(in srgb, var(--accent, #2a9d8f) 16%, transparent);
}
.media-compose-pdf-panel {
  min-width: 0;
}
.media-compose-pdf-frame,
.pdf-preview-frame {
  display: block;
  width: 100%;
  height: min(58vh, 480px);
  border: 0;
  background: #111;
}
.pdf-preview-frame-wrap {
  min-width: 0;
}
.pdf-preview-loading {
  margin: 0;
  padding: 1.25rem 0.85rem;
  text-align: center;
}
.pdf-preview-actions-line {
  margin: 0.55rem 0 0;
  text-align: center;
}
.pdf-preview-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 70%, #fff 30%);
  border: 1.5px solid color-mix(in srgb, var(--accent, #2a9d8f) 55%, var(--border));
  text-decoration: none;
}
.pdf-preview-download-btn:hover,
.pdf-preview-download-btn:focus-visible {
  color: #fff;
  background: color-mix(in srgb, var(--accent, #2a9d8f) 72%, #1a1a1a);
  border-color: var(--accent, #2a9d8f);
  filter: none;
}
.media-compose-pdf-hint,
.media-compose-pdf-name {
  margin: 0;
  padding: 0.65rem 0.85rem 0.85rem;
}
.modal-card-pdf {
  width: min(860px, 100%);
}
.file-pdf-card {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}
.file-pdf-name {
  font-weight: 700;
  word-break: break-word;
}
.file-pdf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.file-pdf-preview-btn,
.file-pdf-open-link {
  margin: 0;
  padding: 0.3rem 0.65rem;
  border-radius: 8px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
}
.file-pdf-open-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.media-compose-caption {
  display: grid;
  gap: 0.35rem;
  font-weight: 700;
  font-size: 0.92rem;
}
.media-compose-caption-label {
  font-weight: 700;
}
.media-compose-caption-field {
  position: relative;
  min-width: 0;
}
.media-compose-caption-clear,
.media-compose-caption-toggle {
  position: absolute;
  top: 0.35rem;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  cursor: pointer;
  z-index: 2;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.media-compose-caption-clear {
  right: 2.45rem;
}
.media-compose-caption-toggle {
  right: 0.15rem;
}
.media-compose-caption-clear[hidden] {
  display: none !important;
}
.media-compose-caption-clear::before,
.media-compose-caption-toggle::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 0 auto;
  background: currentColor;
}
.media-compose-caption-clear::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.media-compose-caption-toggle::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.media-compose-caption.is-expanded .media-compose-caption-toggle::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 14 10 14 10 20'/%3E%3Cpolyline points='20 10 14 10 14 4'/%3E%3Cline x1='14' y1='10' x2='21' y2='3'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 14 10 14 10 20'/%3E%3Cpolyline points='20 10 14 10 14 4'/%3E%3Cline x1='14' y1='10' x2='21' y2='3'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.media-compose-caption-clear:hover,
.media-compose-caption-clear:focus-visible,
.media-compose-caption-clear:active {
  color: #ff8f9d;
  background: #ffffff14;
  outline: none;
  box-shadow: none;
}
.media-compose-caption-toggle:hover,
.media-compose-caption-toggle:focus-visible,
.media-compose-caption-toggle:active {
  color: var(--text);
  background: #ffffff14;
  outline: none;
  box-shadow: none;
}
.media-compose-caption textarea {
  width: 100%;
  min-height: 3.2rem;
  max-height: 8rem;
  padding-right: 5rem;
  resize: vertical;
  font-weight: 500;
  transition: min-height 0.18s ease;
}
.media-compose-caption.is-expanded textarea {
  min-height: min(42vh, 16rem);
  max-height: min(55vh, 22rem);
}

.media-edit {
  display: grid;
  gap: 0.55rem;
}
.media-edit-stage-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: min(48vh, 380px);
  overflow: auto;
  background: #081018;
}
.media-edit-canvas {
  display: block;
  max-width: 100%;
  max-height: min(48vh, 380px);
  touch-action: none;
  cursor: crosshair;
}
.media-edit-toolbar {
  display: grid;
  gap: 0.45rem;
  padding: 0 0.15rem 0.35rem;
}
.media-edit-tools,
.media-edit-transform,
.media-edit-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.media-edit-filters {
  margin-top: 0.35rem;
  padding: 0.45rem 0.15rem 0.15rem;
  border-top: 1px solid var(--border);
}
.media-edit-tool,
.media-edit-transform button,
.media-edit-filter,
.media-edit-emoji-btn {
  margin: 0;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
}
.media-edit-tool.is-active,
.media-edit-filter.is-active {
  border-color: var(--accent);
  background: #1a3a48;
  color: #dff6ff;
}
.media-edit-transform button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.media-edit-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  align-items: center;
  font-size: 0.8rem;
  color: var(--muted);
}
.media-edit-opts > label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  line-height: 1.25;
  font-weight: 600;
  min-height: 1.75rem;
}
.media-edit-opt-label {
  flex: 0 0 auto;
  white-space: nowrap;
}
.media-edit-opts input[type="range"] {
  width: 8rem;
  height: 1.25rem;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--accent, #1a8fa8);
}
.media-edit-opt-val,
.media-edit-effect [data-effect-val] {
  flex: 0 0 auto;
  min-width: 2.4rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.25;
}
.media-edit-effect[hidden],
.media-edit-color[hidden] {
  display: none !important;
}
.media-edit-opts input[type="color"] {
  width: 2rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
}
.media-edit-emoji-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}
.media-edit-emoji-panel[hidden] {
  display: none !important;
}
.media-edit-blur-hint {
  margin: 0;
  font-size: 0.82rem;
}
.media-edit-blur-hint[hidden] {
  display: none !important;
}
.media-edit-emoji-btn {
  font-size: 1.15rem;
  padding: 0.25rem 0.4rem;
  line-height: 1.2;
}
@media (max-width: 600px) {
  .media-edit-stage-wrap,
  .media-edit-canvas {
    max-height: min(40vh, 280px);
  }
  .media-compose-preview {
    max-height: min(40vh, 280px);
  }
}

.status-compose {
  display: grid;
  gap: 0.75rem;
}
.status-compose-preview {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: 12px;
  background: #000;
  border: 1px solid var(--border);
}
.status-compose-preview:not([src]),
.status-compose-preview[hidden] {
  display: none;
}

.mfa-setup-box {
  display: grid;
  gap: 0.65rem;
  margin: 0.75rem 0;
  justify-items: start;
}
.mfa-qr {
  border-radius: 12px;
  background: #fff;
  padding: 0.5rem;
  max-width: 100%;
  height: auto;
}
.mfa-secret {
  display: block;
  word-break: break-all;
  font-size: 0.85rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
}
.mfa-recovery-box {
  position: relative;
  margin-top: 0.65rem;
}
.mfa-recovery {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 0.75rem 3rem 0.75rem 0.85rem;
  margin: 0;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
}
.mfa-recovery-copy {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 36px;
  height: 36px;
}
.copy-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
}
.copy-icon-btn.is-copied::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.copy-icon-btn.is-copied {
  color: #7ed4e8;
  border-color: var(--accent);
}
.mfa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.profile-panel {
  display: grid;
  gap: 0;
}
.profile-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.15rem 0 1rem;
  margin-bottom: 0.15rem;
  border-bottom: 1px solid var(--border);
}
.profile-hero-copy {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  flex: 1;
}
.profile-email {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  word-break: break-word;
}
.profile-handle {
  margin: 0.15rem 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted, #5a6a7a);
  word-break: break-word;
}
.profile-section-title.profile-subsection {
  margin-top: 0.85rem;
}
.profile-section {
  padding: 0.95rem 0 0.15rem;
  border-bottom: 1px solid var(--border);
}
.profile-section:last-child {
  border-bottom: 0;
  padding-bottom: 0.85rem;
}
.profile-danger-section .profile-section-title {
  color: #ff8f9d;
}
.delete-account-panel {
  display: grid;
  gap: 0.75rem;
}
.delete-account-list {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}
.delete-account-list li {
  margin: 0.2rem 0;
}
.form-error {
  margin: 0;
  color: #ff8f9d;
  font-weight: 700;
  font-size: 0.88rem;
}
.profile-section-title {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.feature-tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.12rem 0.4rem;
  border-radius: 6px;
  border: 1px solid #c9a22766;
  background: #c9a22722;
  color: #e8d48a;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.profile-field-label {
  display: grid;
  gap: 0.4rem;
  margin: 0.55rem 0 0;
  font-weight: 700;
  color: #e8eef0;
}
.profile-field-label select {
  width: 100%;
  max-width: 100%;
}
.profile-avatar-preview {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--panel-2);
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.profile-avatar-slot {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
}
.profile-avatar-slot .profile-avatar-preview,
.profile-avatar-slot .profile-avatar-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.profile-avatar-fallback {
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: 0.02em;
  color: #7ed4e8;
  background: #1e5a6e;
  border-radius: 50%;
  border: 2px solid var(--border);
  user-select: none;
}
.profile-avatar-preview[hidden],
.profile-avatar-fallback[hidden] {
  display: none !important;
}
.profile-photo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.profile-photo-actions button:not(.profile-avatar-remove) {
  min-height: 2.35rem;
}
.profile-avatar-remove {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  min-height: 2.35rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
}
.profile-avatar-remove::before {
  content: "";
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.profile-avatar-remove:hover,
.profile-avatar-remove:focus-visible {
  color: #ff8f9d;
  background: #ffffff14;
  border-color: #e85d6f66;
  outline: none;
  filter: none;
  box-shadow: none;
}
.profile-avatar-remove[hidden] {
  display: none !important;
}
.profile-hint {
  margin: 0.35rem 0 0;
  line-height: 1.45;
}
.profile-more-link {
  display: inline-block;
  margin: 0.45rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  cursor: pointer;
}
.profile-more-link:hover,
.profile-more-link:focus-visible {
  filter: brightness(1.1);
  outline: none;
}
.profile-more-details {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.15rem;
}
.profile-more-details[hidden] {
  display: none !important;
}
.profile-section .check-row {
  margin: 0.4rem 0 0;
  gap: 0.45rem;
  align-items: flex-start;
}
.profile-status {
  margin: 0.55rem 0 0;
  font-weight: 700;
}
.profile-section .mfa-actions {
  margin-top: 0.85rem;
  margin-bottom: 0.15rem;
}
.profile-section:last-child .mfa-actions {
  margin-bottom: 0.35rem;
}
.profile-perm-row {
  align-items: center;
  gap: 0.55rem 0.75rem;
}
.profile-perm-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.2;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  white-space: nowrap;
}
.profile-perm-status.is-on {
  color: #9fe7f5;
  border-color: var(--accent);
  background: #1a4a5c;
}
.profile-perm-status.is-off {
  color: #c9d5dc;
}
.profile-perm-status.is-blocked {
  color: #ffb4b4;
  border-color: #8a3a3a;
  background: #3a1c1c;
}
#alert-enable-btn.is-ready,
#media-enable-btn.is-ready {
  border-color: var(--accent);
  color: #9fe7f5;
}
.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--panel-2);
  display: block;
}
.chat-avatar-ring {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 0;
  box-sizing: border-box;
  background: transparent;
  position: relative;
  isolation: isolate;
}
button.chat-avatar-btn {
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  cursor: pointer;
  line-height: 0;
}
button.chat-avatar-btn:hover,
button.chat-avatar-btn:focus-visible,
button.chat-avatar-btn:active {
  filter: none;
  box-shadow: none;
  transform: none;
  outline: none;
}
button.chat-avatar-btn:focus-visible {
  box-shadow: 0 0 0 2px #7ed4e888;
}
.chat-avatar-ring .chat-avatar {
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 1;
}
.chat-avatar-ring.has-status-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, #ff1744 0%, #ff9100 50%, #ff1744 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}
.chat-avatar-ring.has-status-glow .chat-avatar {
  border: none;
  box-sizing: border-box;
}
.chat-avatar-fallback {
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #7ed4e8;
  background: #1e5a6e;
  font-size: 1rem;
}
.thread-avatar.is-clickable {
  cursor: pointer;
}
.thread-avatar.is-clickable:hover {
  outline: 2px solid #7ed4e866;
  outline-offset: 2px;
}
.chat-row .preview {
  /* unused */
}
.chat-list li .preview {
  margin-left: calc(44px + 0.55rem);
}
.thread-head .thread-avatar {
  order: 0;
}
.sidebar-actions {
  display: flex;
  gap: 0.45rem;
  padding: 0.7rem 0.85rem;
}
.new-compose-slider {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  width: 100%;
  min-height: 2.65rem;
  padding: 0.2rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--panel-2);
  box-sizing: border-box;
  overflow: hidden;
  user-select: none;
  touch-action: none;
}
.new-compose-side {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0.45rem 0.55rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.new-compose-side:hover,
.new-compose-side:focus-visible {
  color: #d7eef5;
  background: transparent;
  box-shadow: none;
  filter: none;
  outline: none;
}
.new-compose-side:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.new-compose-side[data-compose="chat"] {
  text-align: left;
  padding-left: 0.85rem;
}
.new-compose-side[data-compose="group"] {
  text-align: right;
  padding-right: 0.85rem;
}
.new-compose-slider.is-pull-chat .new-compose-side[data-compose="chat"],
.new-compose-slider.is-pull-group .new-compose-side[data-compose="group"] {
  color: #e8f8fc;
}
.new-compose-thumb {
  position: absolute;
  top: 0.2rem;
  bottom: 0.2rem;
  left: 50%;
  z-index: 2;
  width: min(42%, 7.5rem);
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #002d50 0%, #0b6f8f 48%, #1a8fa8 120%);
  box-shadow: 0 3px 10px #002d5044;
  transform: translateX(-50%);
  cursor: grab;
  touch-action: none;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s ease;
}
.new-compose-thumb:hover,
.new-compose-thumb:focus-visible {
  filter: brightness(1.06);
  outline: none;
  box-shadow: 0 4px 14px #002d5055;
}
.new-compose-thumb:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.new-compose-slider.is-dragging .new-compose-thumb {
  cursor: grabbing;
  transition: none;
  box-shadow: 0 5px 16px #002d5066;
}
.new-compose-thumb::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.15rem;
  height: 0.28rem;
  border-radius: 999px;
  background: #ffffffaa;
  transform: translate(-50%, -50%);
  box-shadow: -0.42rem 0 0 #ffffff66, 0.42rem 0 0 #ffffff66;
}
.chat-search-bar {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  margin: 0 0.85rem 0.7rem;
  padding: 0.22rem 0.22rem 0.22rem 0.55rem;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--panel-2);
  box-sizing: border-box;
}
.chat-search-input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  width: auto;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  padding: 0.45rem 0.35rem;
  font-size: 0.9rem;
  color: var(--text);
}
#shopping-search::-webkit-search-cancel-button,
#shopping-search::-webkit-search-decoration,
.chat-search-input::-webkit-search-cancel-button,
.chat-search-input::-webkit-search-decoration,
.ql-search-input::-webkit-search-cancel-button,
.ql-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.search-clear-btn {
  flex: 0 0 auto;
  align-self: center;
  width: 1.85rem;
  height: 1.85rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.search-clear-btn::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.search-clear-btn:hover,
.search-clear-btn:focus-visible {
  color: #ff8f9d;
  background: #ffffff14;
  filter: none;
  outline: none;
  box-shadow: none;
}
.ql-search-bar .search-clear-btn {
  color: var(--muted, #8aa0ad);
}
.ql-search-bar .search-clear-btn:hover,
.ql-search-bar .search-clear-btn:focus-visible {
  color: #ff8f9d;
  background: #e8eef2;
}
.search-clear-btn[hidden] {
  display: none !important;
}
.chat-search-input:hover,
.chat-search-input:focus {
  border: 0;
  box-shadow: none;
  background: transparent;
  outline: none;
}
.chat-search-btn {
  position: relative;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #002d50 0%, #0b6f8f 48%, #1a8fa8 120%);
  box-shadow: 0 3px 10px #002d5044;
  cursor: pointer;
  z-index: 1;
}
.chat-search-btn:hover,
.chat-search-btn:focus-visible {
  filter: brightness(1.06);
  box-shadow: 0 4px 14px #002d5055;
  outline: none;
}
.chat-search-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.chat-search-btn::before {
  content: "";
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0 auto;
  background: #e8f8fc;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center / contain no-repeat;
}
.chat-search-btn.is-bump {
  animation: chat-search-bump 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes chat-search-bump {
  0% { transform: translateX(0); }
  35% { transform: translateX(-0.85rem); }
  70% { transform: translateX(0.15rem); }
  100% { transform: translateX(0); }
}
.chat-search-bar.is-searching .chat-search-btn::before {
  opacity: 0.55;
}
.chat-list li.is-search-hit .chat-main strong {
  font-size: 0.92rem;
}
.chat-list li.is-search-hit .preview {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chat-list li.is-search-hit .search-hit-mark {
  color: #9fe7f5;
  font-weight: 800;
}
.chat-filters,
:is(.event-dialog,#events-launch-content) .event-tabs.chat-filters {
  display: flex;
  align-items: flex-end;
  gap: 0.15rem;
  padding: 0 0.85rem;
  margin: 0 0 0.15rem;
  border-bottom: 1px solid var(--border);
}
.chat-filter,
:is(.event-dialog,#events-launch-content) .event-tabs .chat-filter {
  position: relative;
  flex: 1;
  margin: 0 0 -1px;
  padding: 0.5rem 0.65rem 0.55rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  cursor: pointer;
  z-index: 0;
}
.chat-filter:hover,
:is(.event-dialog,#events-launch-content) .event-tabs .chat-filter:hover {
  color: #c5d8e0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  filter: none;
  transform: none;
}
.chat-filter:active,
:is(.event-dialog,#events-launch-content) .event-tabs .chat-filter:active {
  transform: none;
  filter: none;
}
.chat-filter:focus-visible,
:is(.event-dialog,#events-launch-content) .event-tabs .chat-filter:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.chat-filter.active,
:is(.event-dialog,#events-launch-content) .event-tabs .chat-filter.active {
  z-index: 1;
  color: #7ed4e8;
  background: var(--panel);
  border-color: var(--border);
  border-bottom-color: var(--panel);
  box-shadow: none;
  filter: none;
}
.chat-filter.active:hover,
:is(.event-dialog,#events-launch-content) .event-tabs .chat-filter.active:hover {
  color: #9fe7f5;
  background: var(--panel);
  border-color: var(--border);
  border-bottom-color: var(--panel);
}
:is(.event-dialog,#events-launch-content) .event-tabs.chat-filters { padding: 0; margin-bottom: 1rem; }
:is(.event-dialog,#events-launch-content) .event-tabs .chat-filter { flex: 1 1 auto; min-width: 0; }
.chat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.chat-list-empty {
  padding: 1.25rem 0.95rem;
  color: var(--muted);
  font-size: 0.88rem;
  cursor: default;
  border-bottom: none;
}
.chat-list-empty:hover {
  background: transparent;
}
.chat-mute-mark {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5L6 9H2v6h4l5 4V5z'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5L6 9H2v6h4l5 4V5z'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E") center / contain no-repeat;
}
.chat-birthday-mark {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background: #ffb454;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8'/%3E%3Cpath d='M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1'/%3E%3Cpath d='M2 21h20'/%3E%3Cpath d='M7 8v3'/%3E%3Cpath d='M12 8v3'/%3E%3Cpath d='M17 8v3'/%3E%3Cpath d='M7 4h.01'/%3E%3Cpath d='M12 4h.01'/%3E%3Cpath d='M17 4h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8'/%3E%3Cpath d='M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1'/%3E%3Cpath d='M2 21h20'/%3E%3Cpath d='M7 8v3'/%3E%3Cpath d='M12 8v3'/%3E%3Cpath d='M17 8v3'/%3E%3Cpath d='M7 4h.01'/%3E%3Cpath d='M12 4h.01'/%3E%3Cpath d='M17 4h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.chat-birthday-badge {
  position: absolute;
  right: -1px;
  bottom: -1px;
  z-index: 3;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #16364a;
  border: 1.5px solid #ffb454;
  box-shadow: 0 1px 3px #0008;
  pointer-events: none;
}
.chat-birthday-badge::before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  margin: 2.5px auto 0;
  background: #ffb454;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8'/%3E%3Cpath d='M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1'/%3E%3Cpath d='M2 21h20'/%3E%3Cpath d='M7 8v3'/%3E%3Cpath d='M12 8v3'/%3E%3Cpath d='M17 8v3'/%3E%3Cpath d='M7 4h.01'/%3E%3Cpath d='M12 4h.01'/%3E%3Cpath d='M17 4h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8'/%3E%3Cpath d='M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1'/%3E%3Cpath d='M2 21h20'/%3E%3Cpath d='M7 8v3'/%3E%3Cpath d='M12 8v3'/%3E%3Cpath d='M17 8v3'/%3E%3Cpath d='M7 4h.01'/%3E%3Cpath d='M12 4h.01'/%3E%3Cpath d='M17 4h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.chat-list li.is-birthday .chat-avatar-fallback {
  box-shadow: 0 0 0 2px #ffb45488;
}
.chat-list li.active .chat-birthday-mark,
.chat-list li:hover .chat-birthday-mark {
  background: #ffc878;
}
.profile-birthday-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.profile-birthday-row input[type="date"] {
  flex: 1 1 12rem;
  min-width: 0;
}
.profile-birthday-row .profile-avatar-remove {
  flex: 0 0 auto;
}
.profile-saved {
  font-size: 0.82rem;
  font-weight: 700;
  color: #6ecf9a;
  white-space: nowrap;
}
.profile-autosave {
  margin: 0 0 0.75rem;
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  background: #1e4a3a;
  color: #6ecf9a;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}
.profile-text-input {
  width: 100%;
}
.profile-display-name {
  margin: 0.15rem 0 0.35rem;
  font-weight: 800;
  font-size: 1.05rem;
}
.profile-name-grid {
  display: grid;
  gap: 0.65rem;
}
.profile-name-grid label {
  margin: 0;
}
@media (min-width: 560px) {
  .profile-name-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }
}
.peer-profile-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.peer-profile-hero {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.peer-profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--panel-2);
  flex-shrink: 0;
}
.peer-profile-avatar-fallback {
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 2rem;
  color: #7ed4e8;
  background: #1e5a6e;
}
.peer-profile-name {
  margin: 0;
  font-size: 1.2rem;
}
.peer-profile-age {
  margin: 0.2rem 0 0;
  font-weight: 700;
  color: #7ed4e8;
}
.peer-profile-meta {
  margin: 0.25rem 0 0;
}
.peer-profile-field {
  margin: 0;
}
.peer-profile-field strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
}
.peer-member-list {
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.group-members-actions {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
}
.group-members-actions .ghost {
  width: 100%;
  justify-content: center;
  border-radius: 10px;
  font-weight: 700;
}
.peer-member-list button {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
}
.peer-member-list button.is-self {
  opacity: 0.9;
  cursor: default;
}
.peer-member-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.peer-member-copy strong {
  font-size: 0.92rem;
  font-weight: 700;
}
.peer-member-status {
  font-size: 0.75rem;
  color: var(--muted);
}
.peer-member-list img,
.peer-member-fallback {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.peer-member-fallback {
  display: grid;
  place-items: center;
  background: #1e5a6e;
  color: #7ed4e8;
  font-weight: 800;
}
.chat-block-banner {
  padding: 0.55rem 0.85rem;
  background: #3a1f28;
  color: #ffb4be;
  font-size: 0.82rem;
  border-bottom: 1px solid #e85d6f44;
  flex-shrink: 0;
}
.composer.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}
.chat-list li {
  padding: 0.8rem 0.95rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s ease;
}
.chat-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}
.chat-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.4rem;
}
.chat-main strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-group-mark {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center / contain no-repeat;
}
.chat-list li.is-group .chat-avatar-fallback {
  background: #1a4a5c;
}
.chat-list li.active .chat-group-mark,
.chat-list li:hover .chat-group-mark {
  background: #9ec9d6;
}
.chat-del {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  display: grid;
  place-items: center;
  border-radius: 999px;
}
.chat-del::before {
  width: 16px;
  height: 16px;
}
.danger-btn {
  border-color: #e85d6f66 !important;
  color: #ff8a98 !important;
}
.danger-btn:hover {
  background: #e85d6f22 !important;
  border-color: var(--danger) !important;
  color: #fff !important;
}
.chat-list li.active,
.chat-list li:hover { background: #243844; }
.chat-list .preview {
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.badge {
  background: linear-gradient(135deg, var(--accent-hot), #ff5e8a);
  color: #fff;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  margin-left: 0.4rem;
}

.thread#thread-empty { display: grid; place-items: center; }
.messages-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.messages {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background-color: #0e1a22;
  background-repeat: repeat;
  background-size: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
/* Timeline items keep their content height, including in Safari's flex layout.
   The message list scrolls instead of squeezing bubbles around media or cards. */
.messages > * {
  flex-shrink: 0;
}
.message-history-button { align-self: center; flex: 0 0 auto; margin: .25rem 0 .75rem; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
.msg-jump {
  display: flex;
  position: absolute;
  right: 0.55rem;
  bottom: 0.7rem;
  z-index: 7;
  flex-direction: column;
  gap: 0.4rem;
  pointer-events: none;
}
.msg-jump-btn {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  border: 1px solid #2f4a5a;
  background: #1a3140e8;
  color: #e8f4f8;
  box-shadow: 0 4px 14px #0007;
  display: grid;
  place-items: center;
  letter-spacing: normal;
  opacity: 0.92;
}
.msg-jump-btn:hover,
.msg-jump-btn:focus-visible {
  filter: none;
  opacity: 1;
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 4px 14px #0007, 0 0 0 2px #2a9bb540;
}
.msg-jump-btn::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.msg-jump-top-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='17 11 12 6 7 11'/%3E%3Cpolyline points='17 18 12 13 7 18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='17 11 12 6 7 11'/%3E%3Cpolyline points='17 18 12 13 7 18'/%3E%3C/svg%3E");
}
.msg-jump-bottom-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 13 12 18 17 13'/%3E%3Cpolyline points='7 6 12 11 17 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 13 12 18 17 13'/%3E%3Cpolyline points='7 6 12 11 17 6'/%3E%3C/svg%3E");
}
.msg-jump-btn[hidden] {
  display: none !important;
}

.ptr-indicator {
  position: fixed;
  top: calc(var(--safe-top) + 10px);
  left: 50%;
  /* Transient refresh feedback stays above the persistent next-event tab (130). */
  z-index: 131;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem;
  border-radius: 12px;
  background: #1a3140f2;
  border: 1px solid #2f4a5a;
  box-shadow: var(--shadow);
  color: #e8f4f8;
  font-size: 0.82rem;
  font-weight: 700;
  pointer-events: none;
  opacity: 0;
  --ptr-progress: 0;
  transform: translate(-50%, -12px);
  transition: opacity 0.15s ease;
}
.ptr-indicator.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.ptr-indicator.is-refreshing {
  transform: translate(-50%, 0);
}
.ptr-indicator.is-armed .ptr-label {
  color: #7ed4e8;
}
.ptr-ring {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  transform: rotate(-90deg);
}
.ptr-ring-track,
.ptr-ring-fill {
  stroke-width: 3;
  stroke-linecap: round;
}
.ptr-ring-track {
  stroke: #7ed4e833;
}
.ptr-ring-fill {
  stroke: #7ed4e8;
  transition: stroke 0.15s ease;
}
.ptr-indicator.is-armed .ptr-ring-fill {
  stroke: var(--accent-hot);
}
.ptr-indicator.is-refreshing .ptr-ring {
  animation: ptr-spin 1.6s linear infinite;
}
.ptr-indicator.is-refreshing .ptr-ring-fill {
  stroke-dashoffset: 22 !important;
  stroke: #7ed4e8;
}
@keyframes ptr-spin {
  to {
    transform: rotate(270deg);
  }
}
.messages[data-chat-bg="midnight"],
.chat-bg-swatch[data-chat-bg="midnight"] {
  background-image:
    radial-gradient(ellipse 55% 35% at 78% 8%, #ff7a4514, transparent 55%),
    radial-gradient(ellipse 40% 28% at 12% 90%, #2a9bb518, transparent 50%),
    linear-gradient(180deg, #122029 0%, #0e1a22 55%, #0c171e 100%);
  background-size: auto, auto, auto;
  background-repeat: no-repeat;
}
.messages[data-chat-bg="lagoon"],
.chat-bg-swatch[data-chat-bg="lagoon"] {
  background-color: #0d2430;
  background-image:
    radial-gradient(circle at 20% 20%, #2a9bb522 0 2px, transparent 3px),
    radial-gradient(circle at 70% 40%, #7ed4e818 0 1.5px, transparent 2.5px),
    radial-gradient(ellipse 80% 50% at 50% 100%, #1e5a6e33, transparent 60%),
    repeating-linear-gradient(115deg, #2a9bb50c 0 2px, transparent 2px 14px);
  background-size: 48px 48px, 36px 36px, auto, auto;
}
.messages[data-chat-bg="coral-mist"],
.chat-bg-swatch[data-chat-bg="coral-mist"] {
  background-color: #1a1514;
  background-image:
    radial-gradient(ellipse 60% 40% at 85% 15%, #ff7a4528, transparent 55%),
    radial-gradient(ellipse 50% 35% at 10% 80%, #ff5e8a18, transparent 50%),
    radial-gradient(circle at 30% 40%, #ffb08a14 0 1.5px, transparent 2.5px),
    linear-gradient(165deg, #221816, #14101a 70%);
  background-size: auto, auto, 28px 28px, auto;
}
.messages[data-chat-bg="dunes"],
.chat-bg-swatch[data-chat-bg="dunes"] {
  background-color: #1a1712;
  background-image:
    repeating-linear-gradient(185deg, transparent 0 18px, #c4a57412 18px 19px, transparent 19px 36px),
    repeating-linear-gradient(12deg, transparent 0 22px, #ff7a450d 22px 23px, transparent 23px 44px),
    linear-gradient(180deg, #241e16, #15120f 60%, #1c1812);
}
.messages[data-chat-bg="rain"],
.chat-bg-swatch[data-chat-bg="rain"] {
  background-color: #101820;
  background-image:
    repeating-linear-gradient(122deg, transparent 0 10px, #8fa3b014 10px 11px, transparent 11px 22px),
    repeating-linear-gradient(122deg, transparent 0 16px, #2a9bb510 16px 17px, transparent 17px 32px),
    linear-gradient(180deg, #152430, #0e1a22);
}
.messages[data-chat-bg="stars"],
.chat-bg-swatch[data-chat-bg="stars"] {
  background-color: #0a1218;
  background-image:
    radial-gradient(circle at 12% 18%, #fff8 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 28%, #7ed4e866 0 1px, transparent 1.5px),
    radial-gradient(circle at 42% 72%, #ffb08a55 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 64%, #fff6 0 1.2px, transparent 2px),
    radial-gradient(circle at 24% 48%, #fff5 0 0.8px, transparent 1.4px),
    radial-gradient(ellipse 50% 40% at 70% 10%, #2a9bb515, transparent 55%),
    linear-gradient(180deg, #0c1520, #080e14);
  background-size: 90px 90px, 110px 110px, 70px 70px, 130px 130px, 50px 50px, auto, auto;
}
.messages[data-chat-bg="weave"],
.chat-bg-swatch[data-chat-bg="weave"] {
  background-color: #132028;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 11px, #2f465422 11px 12px),
    repeating-linear-gradient(90deg, transparent 0 11px, #2f465422 11px 12px),
    linear-gradient(160deg, #182833, #101a22);
}
.messages[data-chat-bg="paper"],
.chat-bg-swatch[data-chat-bg="paper"] {
  background-color: #152430;
  background-image:
    radial-gradient(#ffffff0a 0.7px, transparent 0.8px),
    radial-gradient(#00000018 0.7px, transparent 0.8px),
    linear-gradient(180deg, #1a2c38, #121f28);
  background-size: 6px 6px, 6px 6px, auto;
  background-position: 0 0, 3px 3px, 0 0;
}
.messages[data-chat-bg="aurora"],
.chat-bg-swatch[data-chat-bg="aurora"] {
  background:
    linear-gradient(118deg, transparent 12%, #52d6a826 29%, transparent 43%, #9275e82b 62%, transparent 78%),
    radial-gradient(ellipse at 60% 0%, #23405b, transparent 72%),
    #0a191f;
}
.messages[data-chat-bg="forest"],
.chat-bg-swatch[data-chat-bg="forest"] {
  background:
    radial-gradient(ellipse at 0% 0%, #4c805124 0 28%, transparent 29%) 0 0 / 94px 122px,
    radial-gradient(ellipse at 100% 100%, #66976b1c 0 28%, transparent 29%) 47px 61px / 94px 122px,
    linear-gradient(155deg, #142b23, #0c1b18);
}
.messages[data-chat-bg="twilight"],
.chat-bg-swatch[data-chat-bg="twilight"] {
  background:
    radial-gradient(ellipse at 80% 15%, #bd8de326, transparent 50%),
    radial-gradient(ellipse at 15% 85%, #ed9c7520, transparent 55%),
    linear-gradient(175deg, #28213d, #151a30 62%, #111823);
}
.messages[data-chat-bg="ocean"],
.chat-bg-swatch[data-chat-bg="ocean"] {
  background:
    repeating-radial-gradient(ellipse at 50% 140%, transparent 0 28px, #72c9df16 29px 30px, transparent 31px 52px),
    linear-gradient(175deg, #102f43, #0a1c30);
}
.messages[data-chat-bg="ember"],
.chat-bg-swatch[data-chat-bg="ember"] {
  background:
    radial-gradient(ellipse at 12% 100%, #f09a3830, transparent 65%),
    radial-gradient(ellipse at 95% 15%, #c45b3924, transparent 58%),
    repeating-linear-gradient(135deg, transparent 0 34px, #cf99730b 35px 36px),
    #241b18;
}
.messages[data-chat-bg="blossom"],
.chat-bg-swatch[data-chat-bg="blossom"] {
  background:
    radial-gradient(ellipse 4px 8px at 20% 30%, #e3a0b42b 85%, transparent 100%) 0 0 / 83px 101px,
    radial-gradient(ellipse 7px 3px at 70% 65%, #d49ec923 85%, transparent 100%) 0 0 / 109px 89px,
    linear-gradient(145deg, #30202c, #1e1826);
}
.messages[data-chat-bg="blueprint"],
.chat-bg-swatch[data-chat-bg="blueprint"] {
  background:
    linear-gradient(#72bce317 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(90deg, #72bce317 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(#72bce30b 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, #72bce30b 1px, transparent 1px) 0 0 / 16px 16px,
    #112638;
}
.messages[data-chat-bg="mosaic"],
.chat-bg-swatch[data-chat-bg="mosaic"] {
  background:
    conic-gradient(from 45deg, #90b9c20a 0deg 90deg, transparent 90deg 180deg, #75968e12 180deg 270deg, transparent 270deg) 0 0 / 72px 72px,
    linear-gradient(145deg, #243035, #142127);
}
.chat-bg-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.chat-bg-option {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
}
.chat-bg-option:hover {
  filter: none;
  box-shadow: none;
}
.chat-bg-swatch {
  height: 72px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background-color: #0e1a22;
}
.chat-bg-option.is-selected .chat-bg-swatch {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px #2a9bb540;
}
.chat-bg-option span {
  font-size: 0.88rem;
}
.chat-bg-option .muted {
  font-size: 0.78rem;
  font-weight: 600;
}
@media (min-width: 801px) {
  .chat-bg-picker {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .chat-bg-swatch {
    height: 88px;
  }
}
.bubble {
  max-width: min(72%, 560px);
  padding: 0.5rem 0.75rem;
  border-radius: 14px;
  line-height: 1.35;
  font-size: 0.95rem;
  position: relative;
}
.bubble.has-message-menu { padding-right: 2.75rem; }
.bubble .msg-menu-btn {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 1.4rem;
  border-color: transparent;
}
@media (max-width: 600px) {
  .bubble.has-message-menu { padding-right: 3.5rem; min-height: 52px; }
  .bubble .msg-menu-btn { width: 44px; height: 44px; }
}
.msg-row {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  align-self: flex-start;
  max-width: min(92%, 640px);
  min-width: 0;
}
.msg-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
}
.msg-row .bubble {
  align-self: stretch;
  max-width: 100%;
}
.msg-row .bubble.kind-voice,
.msg-row .bubble.kind-audio {
  width: min(480px, 100%);
  max-width: 100%;
  min-width: min(220px, 100%);
}
.msg-avatar-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin: 0 0 0.15rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: #243844;
  box-shadow: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.msg-avatar-btn img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  display: block;
}
.msg-avatar-fallback {
  font-size: 0.85rem;
  font-weight: 800;
  color: #d7e8ee;
  line-height: 1;
}
.msg-avatar-btn:hover,
.msg-avatar-btn:focus-visible {
  filter: brightness(1.08);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.msg-sender-name {
  font-size: 0.78rem;
  font-weight: 750;
  color: #9fe7f5;
  margin: 0 0 0.2rem 0.2rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bubble.mine {
  align-self: flex-end;
  background: linear-gradient(160deg, #1e5a6e, #184a5c);
  border: 1px solid #2a7a8e55;
  border-bottom-right-radius: 5px;
}
.bubble.theirs {
  align-self: flex-start;
  background: linear-gradient(160deg, var(--theirs-2), var(--theirs));
  border: 1px solid #ff7a4533;
  color: #fff4ee;
  border-bottom-left-radius: 5px;
}
.bubble.theirs .meta {
  color: #d2b8a8;
}
.bubble-link {
  color: #9fe7f5;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  word-break: break-word;
  cursor: pointer;
  -webkit-user-select: auto;
  user-select: auto;
  touch-action: manipulation;
}
.bubble.theirs .bubble-link {
  color: #ffe0c8;
}
.bubble-link:hover,
.bubble-link:focus-visible {
  filter: brightness(1.08);
  outline: none;
}
.link-preview-slot {
  min-height: 0;
}
.link-preview {
  display: block;
  margin: 0.4rem 0 0.15rem;
  border-radius: 10px;
  overflow: hidden;
  background: #0c1a24cc;
  border: 1px solid #ffffff18;
  text-decoration: none;
  color: inherit;
  max-width: 100%;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.bubble.mine .link-preview {
  background: #08303acc;
  border-color: #ffffff22;
}
.bubble.theirs .link-preview {
  background: #2a1a14cc;
  border-color: #ffffff14;
}
.link-preview.is-loading {
  padding: 0.65rem 0.75rem;
  cursor: default;
}
.link-preview-body {
  display: grid;
  gap: 0.2rem;
  padding: 0.55rem 0.65rem 0.6rem;
}
.link-preview-site {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 0;
}
.link-preview-site span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.link-preview-favicon {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  object-fit: cover;
  flex: 0 0 auto;
  background: #ffffff18;
}
.link-preview-favicon.is-fallback {
  display: inline-block;
  background: currentColor;
  opacity: 0.45;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.link-preview-title {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.link-preview-desc {
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.compose-link-preview {
  margin: 0 0.7rem 0.35rem;
  min-width: 0;
}
.compose-link-choice {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-2) 94%, transparent);
  overflow: hidden;
}
.compose-link-modes {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.compose-link-panel {
  padding: 0.55rem 0.7rem 0.65rem;
  padding-right: 2.2rem;
}
.compose-link-preview-body .link-preview {
  margin: 0;
}
.compose-link-title-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}
.compose-link-title-input {
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.55rem;
  border-radius: 9px;
  font-weight: 600;
}
.compose-link-url-line {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  word-break: break-all;
}
.compose-link-unavailable {
  margin: 0.25rem 0;
  font-size: 0.86rem;
}
.compose-link-choice > .compose-link-preview-dismiss {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 2;
}
.yt-embed {
  margin: 0.45rem 0 0.15rem;
  min-width: 0;
  max-width: 100%;
}
.yt-embed-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(52vh, 360px);
  border: 0;
  border-radius: 10px;
  background: #111;
}
.compose-yt-embed {
  margin: 0;
}
.compose-yt-embed .yt-embed-frame {
  max-height: min(40vh, 280px);
  border-radius: 8px;
}
.yt-embed-open {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent, #2a9d8f);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bubble.mine .yt-embed-open {
  color: inherit;
  opacity: 0.92;
}
.compose-link-choice > .compose-link-preview-dismiss {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 2;
}
.compose-rich-preview {
  margin: 0 0.7rem 0.35rem;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--accent, #2a9d8f) 55%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-2) 92%, var(--accent, #2a9d8f) 8%);
  overflow: hidden;
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}
.compose-expand-rich {
  margin: 0 0 0.65rem;
  flex: 0 1 auto;
  max-height: 42%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.compose-expand-rich[hidden] {
  display: none !important;
}
.compose-expand-rich .compose-rich-preview-body {
  max-height: none;
  flex: 1 1 auto;
}
.compose-rich-preview[hidden] {
  display: none !important;
}
.compose-rich-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}
.compose-rich-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.compose-rich-preview-actions .ghost {
  margin: 0;
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
}
.compose-rich-preview-body {
  max-height: min(42vh, 22rem);
  overflow: auto;
  padding: 0.55rem 0.7rem 0.7rem;
  -webkit-overflow-scrolling: touch;
}
.bubble-text .bubble-rich {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-weight: 500;
  line-height: 1.45;
}
.bubble-rich p,
.bubble-rich h1,
.bubble-rich h2,
.bubble-rich h3,
.bubble-rich h4 {
  margin: 0 0 0.55em;
}
.bubble-rich p:last-child,
.bubble-rich h1:last-child,
.bubble-rich h2:last-child,
.bubble-rich h3:last-child,
.bubble-rich h4:last-child {
  margin-bottom: 0;
}
.bubble-rich h1,
.bubble-rich h2,
.bubble-rich h3,
.bubble-rich h4 {
  font-size: 1em;
  font-weight: 800;
}
.bubble-rich ul,
.bubble-rich ol {
  margin: 0.35em 0 0.55em;
  padding-left: 1.25rem;
}
.bubble-rich li {
  margin: 0.15em 0;
}
.bubble-rich blockquote {
  margin: 0.4em 0;
  padding: 0.15em 0 0.15em 0.7em;
  border-left: 3px solid color-mix(in srgb, var(--accent, #2a9d8f) 70%, #888);
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
}
.bubble-rich code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  padding: 0.05em 0.3em;
  border-radius: 4px;
  background: color-mix(in srgb, #000 14%, transparent);
}
.bubble.mine .bubble-rich code {
  background: color-mix(in srgb, #000 22%, transparent);
}
.bubble-rich pre {
  margin: 0.4em 0;
  padding: 0.5em 0.65em;
  overflow-x: auto;
  border-radius: 8px;
  background: color-mix(in srgb, #000 14%, transparent);
  font-size: 0.86em;
}
.bubble-rich table {
  width: max-content;
  max-width: 100%;
  border-collapse: collapse;
  margin: 0.35em 0;
  font-size: 0.82em;
  line-height: 1.35;
}
.bubble-rich th,
.bubble-rich td {
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  padding: 0.28em 0.45em;
  vertical-align: top;
  text-align: left;
}
.bubble-rich th {
  font-weight: 800;
  background: color-mix(in srgb, var(--text) 10%, transparent);
}
.bubble.mine .bubble-rich th,
.bubble.mine .bubble-rich td {
  border-color: color-mix(in srgb, #fff 28%, transparent);
}
.bubble.mine .bubble-rich th {
  background: color-mix(in srgb, #000 18%, transparent);
}
.compose-link-preview[hidden] {
  display: none !important;
}
.compose-link-preview-card {
  position: relative;
}
.compose-link-preview-card .link-preview {
  margin: 0;
  padding-right: 2.2rem;
}
.compose-link-preview-dismiss {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 1.85rem;
  height: 1.85rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #0a1620cc;
  color: var(--muted);
  cursor: pointer;
  z-index: 2;
}
.compose-link-preview-dismiss::before {
  content: "";
  display: block;
  width: 0.85rem;
  height: 0.85rem;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.compose-link-preview-dismiss:hover,
.compose-link-preview-dismiss:focus-visible {
  color: var(--text);
  background: #ffffff22;
  outline: none;
}
.bubble.system { align-self: center; background: transparent; color: var(--muted); font-size: 0.8rem; }
.bubble.kind-voice,
.bubble.kind-audio {
  width: min(560px, 94%);
  max-width: min(560px, 94%);
  min-width: min(300px, 88%);
  padding: 0.65rem 0.85rem 0.55rem;
  overflow: visible;
}
.voice-msg {
  width: 100%;
  max-width: none;
  min-width: 0;
  overflow: visible;
}
.voice-msg.audio-msg {
  display: grid;
  gap: 0.45rem;
}
.audio-msg-name {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  word-break: break-word;
  line-height: 1.3;
}
.audio-player {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.audio-player-play {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #2a9d8f) 88%, #0b1c22);
  color: #fff;
  box-shadow: 0 1px 0 #0004;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.audio-player-play::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat;
  margin-left: 2px;
}
.audio-player-play.is-playing::before {
  margin-left: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6 5h4v14H6zm8 0h4v14h-4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6 5h4v14H6zm8 0h4v14h-4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.audio-player-play:hover,
.audio-player-play:focus-visible {
  filter: brightness(1.08);
  outline: none;
}
.bubble.mine .audio-player-play {
  background: color-mix(in srgb, #fff 88%, var(--accent, #2a9d8f));
  color: #14323c;
}
.audio-player-main {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  overflow: visible;
}
.audio-player-viz {
  display: block;
  width: 100%;
  height: 64px;
  margin: 0.1rem 0 0.05rem;
  border-radius: 10px;
  background: color-mix(in srgb, #06141a 72%, transparent);
  box-shadow: inset 0 0 0 1px #ffffff12;
  pointer-events: none;
}
.bubble.mine .audio-player-viz {
  background: color-mix(in srgb, #0a2030 55%, transparent);
  box-shadow: inset 0 0 0 1px #ffffff22;
}
.audio-player-seek {
  --audio-seek: 0%;
  --audio-seek-thumb: 14px;
  --audio-seek-track: 6px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 calc(var(--audio-seek-thumb) / 2);
  height: 1.35rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  box-sizing: border-box;
}
.audio-player-seek::-webkit-slider-runnable-track {
  height: var(--audio-seek-track);
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--accent, #2a9d8f) 0% var(--audio-seek, 0%),
    color-mix(in srgb, var(--muted) 35%, transparent) var(--audio-seek, 0%) 100%
  );
}
.audio-player-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--audio-seek-thumb);
  height: var(--audio-seek-thumb);
  margin-top: calc((var(--audio-seek-track) - var(--audio-seek-thumb)) / 2);
  border-radius: 999px;
  background: #fff;
  border: 0;
  box-shadow: 0 0 0 1px #0005;
}
.audio-player-seek::-moz-range-track {
  height: var(--audio-seek-track);
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 35%, transparent);
}
.audio-player-seek::-moz-range-progress {
  height: var(--audio-seek-track);
  border-radius: 999px;
  background: var(--accent, #2a9d8f);
}
.audio-player-seek::-moz-range-thumb {
  width: var(--audio-seek-thumb);
  height: var(--audio-seek-thumb);
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px #0005;
}
.bubble.mine .audio-player-seek::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    #fff 0% var(--audio-seek, 0%),
    color-mix(in srgb, #fff 28%, transparent) var(--audio-seek, 0%) 100%
  );
}
.bubble.mine .audio-player-seek::-moz-range-progress {
  background: #fff;
}
.audio-player-times {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  line-height: 1;
  min-width: 0;
}
.audio-player-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  min-width: 0;
}
.audio-player-footer .audio-player-times {
  flex: 1 1 auto;
  width: 100%;
}
.audio-player-vol {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
  /* Leave room so the thumb can sit on 0% and 100% without being clipped */
  padding: 0.15rem 0;
  overflow: visible;
}
.audio-player-vol:has(.audio-player-theater),
.audio-player-vol:has(.audio-player-detach) {
  grid-template-columns: auto auto auto minmax(0, 1fr);
}
.audio-player-vol:has(.audio-player-detach):not(:has(.audio-player-theater)) {
  grid-template-columns: auto auto minmax(0, 1fr);
}
.audio-player-detach,
.audio-player-theater {
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: none;
  flex-shrink: 0;
}
.audio-player-detach::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='8' height='8' rx='1'/%3E%3Cpath d='M13 7h4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='8' height='8' rx='1'/%3E%3Cpath d='M13 7h4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.audio-player-detach.is-on::before {
  /* Return to chat: arrow into a panel — distinct from fullscreen corners */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.audio-player-detach.is-on,
.audio-player-theater.is-on {
  color: var(--accent, #2a9d8f);
  background: color-mix(in srgb, var(--accent, #2a9d8f) 22%, transparent);
}
.audio-player-detach:hover,
.audio-player-detach:focus-visible,
.audio-player-theater:hover,
.audio-player-theater:focus-visible {
  color: var(--text);
  background: #ffffff18;
  outline: none;
}
.bubble.mine .audio-player-detach,
.bubble.mine .audio-player-theater {
  color: color-mix(in srgb, #fff 78%, transparent);
}
.bubble.mine .audio-player-detach.is-on,
.bubble.mine .audio-player-theater.is-on {
  color: #fff;
  background: #ffffff28;
}
.bubble.mine .audio-player-detach:hover,
.bubble.mine .audio-player-detach:focus-visible,
.bubble.mine .audio-player-theater:hover,
.bubble.mine .audio-player-theater:focus-visible {
  color: #fff;
  background: #ffffff22;
}
.audio-player-theater::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.audio-player-theater.is-on::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 14 10 14 10 20'/%3E%3Cpolyline points='20 10 14 10 14 4'/%3E%3Cline x1='10' y1='14' x2='3' y2='21'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 14 10 14 10 20'/%3E%3Cpolyline points='20 10 14 10 14 4'/%3E%3Cline x1='10' y1='14' x2='3' y2='21'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.audio-dock {
  position: fixed;
  z-index: 110;
  pointer-events: none;
}
.audio-dock.is-theater {
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
    max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  box-sizing: border-box;
  pointer-events: auto;
}
.audio-dock.is-float {
  inset: 0;
  pointer-events: none;
}
.audio-dock.is-float .audio-dock-shell {
  position: fixed;
  pointer-events: none;
}
.audio-dock-shell {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  max-width: calc(100vw - 1.25rem);
  pointer-events: none;
  isolation: isolate;
}
.audio-dock.is-theater .audio-dock-shell {
  max-width: min(1100px, 100%);
  width: auto;
  pointer-events: auto;
}
.audio-dock-shell:has(.audio-dock-queue:not([hidden])) .audio-dock-panel {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.audio-dock-backdrop {
  position: absolute;
  inset: 0;
  background: #030a0ecc;
  backdrop-filter: blur(10px);
  pointer-events: auto;
}
.audio-dock-panel {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  width: min(380px, calc(100vw - 1.25rem));
  display: grid;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem 0.8rem;
  border-radius: 16px;
  background: linear-gradient(165deg, #0c2430 0%, #06141a 55%, #0a1c24 100%);
  box-shadow: 0 14px 40px #0008, inset 0 0 0 1px #ffffff14;
  touch-action: none;
}
.audio-dock.is-theater .audio-dock-panel {
  width: min(920px, 100%);
  max-height: 100%;
  gap: 0.85rem;
  padding: 1rem 1.1rem 1.15rem;
  border-radius: 18px;
  touch-action: auto;
}
.audio-dock-panel.is-dragging {
  opacity: 0.96;
  box-shadow: 0 18px 48px #000a, inset 0 0 0 1px #ffffff22;
}
.audio-dock-panel.is-mini {
  width: min(300px, calc(100vw - 1.25rem));
  padding: 0.45rem 0.55rem;
  gap: 0;
}
.audio-dock-chrome {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  cursor: grab;
  user-select: none;
  position: relative;
  z-index: 4;
}
.audio-dock-chrome-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  position: relative;
}
.audio-dock-chrome-main[data-tip]:hover::after,
.audio-dock-chrome-main[data-tip]:focus-within::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.4rem);
  top: auto;
  z-index: 20;
  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  background: #0a1c24f2;
  border: 1px solid #ffffff28;
  box-shadow: 0 8px 22px #000a;
  color: #f2f7f8;
  font: 700 0.82rem/1.3 Nunito, system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  text-align: center;
}
.audio-dock.is-theater .audio-dock-chrome-main[data-tip]:hover::after,
.audio-dock.is-theater .audio-dock-chrome-main[data-tip]:focus-within::after {
  display: none;
}
.audio-dock-panel {
  overflow: visible;
}
.audio-dock-shell {
  overflow: visible;
}
.audio-dock-panel.is-dragging .audio-dock-chrome,
.audio-dock-panel.is-dragging .audio-dock-mini {
  cursor: grabbing;
}
.audio-dock.is-theater .audio-dock-chrome {
  cursor: default;
}
.audio-dock-grip {
  flex: 0 0 auto;
  width: 14px;
  height: 18px;
  opacity: 0.45;
  background: currentColor;
  color: #cfe3e8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Ccircle cx='5' cy='4' r='1.4'/%3E%3Ccircle cx='11' cy='4' r='1.4'/%3E%3Ccircle cx='5' cy='10' r='1.4'/%3E%3Ccircle cx='11' cy='10' r='1.4'/%3E%3Ccircle cx='5' cy='16' r='1.4'/%3E%3Ccircle cx='11' cy='16' r='1.4'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Ccircle cx='5' cy='4' r='1.4'/%3E%3Ccircle cx='11' cy='4' r='1.4'/%3E%3Ccircle cx='5' cy='10' r='1.4'/%3E%3Ccircle cx='11' cy='10' r='1.4'/%3E%3Ccircle cx='5' cy='16' r='1.4'/%3E%3Ccircle cx='11' cy='16' r='1.4'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.audio-dock.is-theater .audio-dock-grip {
  display: none;
}
.audio-dock-title,
.audio-dock-mini-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font: 700 0.92rem/1.3 Nunito, system-ui, sans-serif;
  color: #f2f7f8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audio-dock.is-theater .audio-dock-title {
  font-size: 1.05rem;
}
.audio-dock-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #ffffff14;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.audio-dock-btn:hover,
.audio-dock-btn:focus-visible {
  background: #ffffff28;
  outline: none;
}
.audio-dock-btn::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
}
.audio-dock-min::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.audio-dock-expand::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.audio-dock-theater::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.audio-dock-popout::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='14' height='14' rx='2'/%3E%3Cpath d='M14 3h7v7M21 3l-9 9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='14' height='14' rx='2'/%3E%3Cpath d='M14 3h7v7M21 3l-9 9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.audio-dock-popout.is-on::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M9 12h6m-3-3 3 3-3 3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M9 12h6m-3-3 3 3-3 3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.audio-dock-close::before {
  /* Same “return to chat” glyph as the in-player detach control when docked */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.audio-dock.is-theater .audio-dock-close::before {
  /* In theater, close exits fullscreen — keep the classic X */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.audio-player-window {
  min-width: 280px;
  min-height: 100vh;
  margin: 0;
  overflow: auto;
  background: #07161d;
}
.audio-dock.is-popout {
  position: fixed;
  inset: 0;
  display: grid;
  align-items: start;
  box-sizing: border-box;
  padding: 0.65rem;
  overflow: auto;
  pointer-events: auto;
  background: #07161d;
}
.audio-dock.is-popout .audio-dock-shell {
  position: static !important;
  inset: auto !important;
  width: 100%;
  max-width: none;
  margin: 0;
  pointer-events: auto;
}
.audio-dock.is-popout .audio-dock-panel {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  touch-action: auto;
}
.audio-dock.is-popout .audio-dock-chrome { cursor: default; }
.audio-dock.is-popout [data-dock-min],
.audio-dock.is-popout [data-dock-theater] { display: none; }
.audio-dock-mini {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  cursor: grab;
  user-select: none;
  position: relative;
}
.audio-dock-mini-title {
  position: relative;
}
.audio-dock-mini-title[data-tip]:hover::after,
.audio-dock-mini-title[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.35rem);
  z-index: 5;
  padding: 0.35rem 0.55rem;
  border-radius: 10px;
  background: #0a1c24ee;
  border: 1px solid #ffffff22;
  box-shadow: 0 8px 22px #0008;
  color: #f2f7f8;
  font: 700 0.78rem/1.3 Nunito, system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  text-align: center;
}
.audio-dock-mini-play {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #2a9d8f) 85%, #0a1c24);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.audio-dock-mini-play::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6 3 20 12 6 21' fill='black'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6 3 20 12 6 21' fill='black'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.audio-dock-mini-play.is-playing::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='3' width='5' height='18' fill='black'/%3E%3Crect x='14' y='3' width='5' height='18' fill='black'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='3' width='5' height='18' fill='black'/%3E%3Crect x='14' y='3' width='5' height='18' fill='black'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.audio-dock-slot {
  min-width: 0;
}
.audio-dock-placeholder {
  margin: 0.35rem 0 0;
  font: 600 0.82rem/1.35 Nunito, system-ui, sans-serif;
  opacity: 0.85;
}
.voice-msg.is-dock-away .audio-msg-name {
  opacity: 0.85;
}

/* —— Music playlists —— */
.playlist-manager-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  max-height: min(50vh, 420px);
  overflow: auto;
}
.playlist-manager-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-2, #0c2430) 88%, #fff 6%);
  box-shadow: inset 0 0 0 1px #ffffff12;
}
.playlist-manager-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 140px;
}
.playlist-manager-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.playlist-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0.65rem 0 0.4rem;
}
.playlist-track-list {
  max-height: min(48vh, 400px);
  overflow: auto;
  display: grid;
  gap: 0.35rem;
  margin-top: 0.35rem;
  padding-right: 0.15rem;
}
.playlist-track-row {
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.4rem 0.35rem;
  border-radius: 10px;
}
.playlist-track-row:hover {
  background: #ffffff0c;
}
.playlist-track-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.playlist-track-copy strong {
  font-size: 0.92rem;
  line-height: 1.3;
  word-break: break-word;
}
.playlist-dock {
  position: fixed;
  inset: 0;
  z-index: 112;
  pointer-events: none;
}
.playlist-dock-panel {
  position: fixed;
  z-index: 1;
  pointer-events: auto;
  width: min(360px, calc(100vw - 1.25rem));
  display: grid;
  gap: 0.55rem;
  padding: 0.7rem 0.8rem 0.85rem;
  border-radius: 16px;
  background: linear-gradient(165deg, #0c2430 0%, #06141a 55%, #0a1c24 100%);
  box-shadow: 0 14px 40px #0008, inset 0 0 0 1px #ffffff14;
  touch-action: none;
  color: #f2f7f8;
}
.playlist-dock-panel.is-dragging {
  opacity: 0.96;
}
.playlist-dock-chrome {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  min-width: 0;
  cursor: grab;
  user-select: none;
}
.playlist-dock-panel.is-dragging .playlist-dock-chrome {
  cursor: grabbing;
}
.playlist-dock-grip {
  flex: 0 0 auto;
  width: 14px;
  height: 18px;
  margin-top: 0.2rem;
  opacity: 0.45;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Ccircle cx='5' cy='4' r='1.4'/%3E%3Ccircle cx='11' cy='4' r='1.4'/%3E%3Ccircle cx='5' cy='10' r='1.4'/%3E%3Ccircle cx='11' cy='10' r='1.4'/%3E%3Ccircle cx='5' cy='16' r='1.4'/%3E%3Ccircle cx='11' cy='16' r='1.4'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Ccircle cx='5' cy='4' r='1.4'/%3E%3Ccircle cx='11' cy='4' r='1.4'/%3E%3Ccircle cx='5' cy='10' r='1.4'/%3E%3Ccircle cx='11' cy='10' r='1.4'/%3E%3Ccircle cx='5' cy='16' r='1.4'/%3E%3Ccircle cx='11' cy='16' r='1.4'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.playlist-dock-headings {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}
.playlist-dock-name,
.playlist-dock-title,
.playlist-dock-meta {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.playlist-dock-name {
  font: 700 0.78rem/1.25 Nunito, system-ui, sans-serif;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.playlist-dock-title {
  font: 700 1rem/1.3 Nunito, system-ui, sans-serif;
}
.playlist-dock-meta {
  font-size: 0.8rem;
}
.playlist-dock-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #ffffff14;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.playlist-dock-btn:hover,
.playlist-dock-btn:focus-visible {
  background: #ffffff28;
  outline: none;
}
.playlist-dock-btn::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
}
.playlist-dock-close::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.playlist-dock-prev::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='19 20 9 12 19 4 19 20'/%3E%3Cline x1='5' y1='19' x2='5' y2='5'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='19 20 9 12 19 4 19 20'/%3E%3Cline x1='5' y1='19' x2='5' y2='5'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.playlist-dock-next::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 4 15 12 5 20 5 4'/%3E%3Cline x1='19' y1='5' x2='19' y2='19'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 4 15 12 5 20 5 4'/%3E%3Cline x1='19' y1='5' x2='19' y2='19'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.playlist-dock-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.playlist-mode-btn {
  flex: 0 0 auto;
}
.playlist-mode-btn.is-on {
  color: #fff;
  background: color-mix(in srgb, var(--accent, #2a9d8f) 75%, #0a1c24);
}
.playlist-mode-btn.is-on:hover,
.playlist-mode-btn.is-on:focus-visible {
  background: color-mix(in srgb, var(--accent, #2a9d8f) 88%, #0a1c24);
}
.playlist-mode-sequential::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.playlist-mode-shuffle::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 3 21 3 21 8'/%3E%3Cline x1='4' y1='20' x2='21' y2='3'/%3E%3Cpolyline points='21 16 21 21 16 21'/%3E%3Cline x1='15' y1='15' x2='21' y2='21'/%3E%3Cline x1='4' y1='4' x2='9' y2='9'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 3 21 3 21 8'/%3E%3Cline x1='4' y1='20' x2='21' y2='3'/%3E%3Cpolyline points='21 16 21 21 16 21'/%3E%3Cline x1='15' y1='15' x2='21' y2='21'/%3E%3Cline x1='4' y1='4' x2='9' y2='9'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.playlist-mode-loop::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='17 1 21 5 17 9'/%3E%3Cpath d='M3 11V9a4 4 0 0 1 4-4h14'/%3E%3Cpolyline points='7 23 3 19 7 15'/%3E%3Cpath d='M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='17 1 21 5 17 9'/%3E%3Cpath d='M3 11V9a4 4 0 0 1 4-4h14'/%3E%3Cpolyline points='7 23 3 19 7 15'/%3E%3Cpath d='M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.playlist-dock-transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}
.playlist-dock-play {
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #2a9d8f) 88%, #0a1c24);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.playlist-dock-play::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6 3 20 12 6 21' fill='black'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6 3 20 12 6 21' fill='black'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.playlist-dock-play.is-playing::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='3' width='5' height='18' fill='black'/%3E%3Crect x='14' y='3' width='5' height='18' fill='black'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='3' width='5' height='18' fill='black'/%3E%3Crect x='14' y='3' width='5' height='18' fill='black'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.playlist-dock-progress {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.audio-dock-playlist {
  display: grid;
  gap: 0.4rem;
  padding: 0.15rem 0 0.25rem;
  border-top: 1px solid #ffffff12;
  margin-top: 0.1rem;
}
.audio-dock-playlist[hidden] {
  display: none !important;
}
.audio-dock-playlist-name,
.audio-dock-playlist-meta {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audio-dock-playlist-name {
  font: 700 0.75rem/1.25 Nunito, system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
  color: #cfe3e8;
}
.audio-dock-playlist-meta {
  font-size: 0.8rem;
  color: #9bb4bc;
}
.audio-dock-playlist-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.audio-dock-playlist-sep {
  width: 1px;
  height: 1.1rem;
  margin: 0 0.15rem;
  background: #ffffff22;
  flex: 0 0 auto;
}
.audio-dock-queue {
  --plq-tab-w: 1.85rem;
  --plq-panel-w: min(260px, calc(100vw - 5rem));
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 0 0 var(--plq-tab-w);
  width: var(--plq-tab-w);
  align-self: stretch;
  min-height: 0;
  pointer-events: none;
  overflow: visible;
}
.audio-dock-queue[hidden] {
  display: none !important;
}
.audio-dock-queue-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: var(--plq-panel-w);
  height: 100%;
  min-height: 100%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  transform: translateX(100%);
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.audio-dock-queue.is-open .audio-dock-queue-drawer {
  transform: translateX(0);
  pointer-events: auto;
}
.audio-dock-queue-toggle {
  position: relative;
  pointer-events: auto;
  flex: 0 0 var(--plq-tab-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: var(--plq-tab-w);
  min-height: 100%;
  margin: 0;
  padding: 0.7rem 0.2rem 0.85rem;
  border: 1px solid #ffffff22;
  border-right: 0;
  border-radius: 14px 0 0 14px;
  background: linear-gradient(180deg, #123040 0%, #0a1c24 100%);
  color: #7ec8dd;
  box-shadow: -4px 6px 18px #0006;
  cursor: pointer;
  z-index: 3;
}
.audio-dock-queue-bolt {
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.audio-dock-queue-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  user-select: none;
}
.audio-dock-queue-toggle:hover,
.audio-dock-queue-toggle:focus-visible,
.audio-dock-queue.is-open .audio-dock-queue-toggle {
  color: #cfe3e8;
  background: linear-gradient(180deg, #1a4558 0%, #0f2833 100%);
  border-color: #ffffff33;
  outline: none;
  box-shadow: -6px 8px 22px #0007;
}
.audio-dock-queue.is-open .audio-dock-queue-toggle {
  border-radius: 0;
  box-shadow: none;
}
.audio-dock-queue-panel {
  pointer-events: none;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.75rem 0.7rem 0.7rem;
  border: 1px solid #ffffff18;
  border-right: 0;
  border-radius: 14px 0 0 14px;
  background: linear-gradient(165deg, #0c2430 0%, #06141a 55%, #0a1c24 100%);
  color: #f2f7f8;
  box-shadow: -10px 0 28px #0007;
  overflow: hidden;
  box-sizing: border-box;
}
.audio-dock-queue.is-open .audio-dock-queue-panel {
  pointer-events: auto;
}
.audio-dock-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex: 0 0 auto;
}
.audio-dock-queue-head-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
}
.audio-dock-queue-title {
  font: 800 0.95rem/1.2 Nunito, system-ui, sans-serif;
  letter-spacing: 0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audio-dock-queue-close,
.audio-dock-queue-create,
.audio-dock-queue-edit,
.audio-dock-queue-library {
  width: 28px;
  height: 28px;
}
.audio-dock-queue-library.is-on {
  background: color-mix(in srgb, var(--accent, #2a9d8f) 75%, #0a1c24);
}
.audio-dock-queue-close::before {
  width: 12px;
  height: 12px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.audio-dock-queue-create::before {
  width: 13px;
  height: 13px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.audio-dock-queue-edit::before {
  width: 13px;
  height: 13px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.audio-dock-queue-library::before {
  width: 13px;
  height: 13px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.audio-dock-queue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.audio-dock-queue-empty {
  margin: 0.5rem 0.25rem;
  font-size: 0.85rem;
}
.audio-dock-queue-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem;
  align-items: stretch;
  min-width: 0;
}
.audio-dock-queue-item {
  width: 100%;
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.45rem;
  align-items: start;
  margin: 0;
  padding: 0.45rem 0.5rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.audio-dock-queue-item:hover,
.audio-dock-queue-item:focus-visible {
  background: #ffffff14;
  outline: none;
}
.audio-dock-queue-row.is-current .audio-dock-queue-item {
  background: color-mix(in srgb, var(--accent, #2a9d8f) 35%, #0a1c24);
}
.audio-dock-queue-idx {
  font: 700 0.72rem/1.4 Nunito, system-ui, sans-serif;
  opacity: 0.55;
  padding-top: 0.1rem;
}
.audio-dock-queue-row.is-current .audio-dock-queue-idx {
  opacity: 0.9;
  color: #7ec8dd;
}
.audio-dock-queue-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.audio-dock-queue-copy strong {
  font: 700 0.82rem/1.25 Nunito, system-ui, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audio-dock-queue-copy .muted {
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audio-dock-queue-del {
  width: 30px;
  height: 30px;
  align-self: center;
  opacity: 0.72;
}
.audio-dock-queue-del:hover,
.audio-dock-queue-del:focus-visible {
  opacity: 1;
  background: #ff5a5f33;
  color: #ffb4b6;
  outline: none;
}
.audio-dock-queue-del::before {
  width: 13px;
  height: 13px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.audio-dock.is-theater .audio-dock-queue {
  --plq-panel-w: min(300px, 32vw);
}

/* Center the complete player and side drawer together in theater mode. */
@media (min-width: 801px) {
  .audio-dock.is-theater .audio-dock-shell:has(.audio-dock-queue:not([hidden])) {
    padding-left: min(300px, 32vw);
    box-sizing: border-box;
  }
  .audio-dock.is-theater .audio-dock-panel {
    min-width: 0;
  }
}

/* Mobile: Tracks tab under the player, panel slides downward (side slide goes off-screen). */
@media (max-width: 800px) {
  .audio-dock-shell {
    flex-direction: column-reverse;
    align-items: stretch;
    max-width: calc(100vw - 1rem);
    overflow: visible;
  }
  .audio-dock-shell:has(.audio-dock-queue:not([hidden])) .audio-dock-panel {
    width: 100%;
    border-radius: 16px 16px 4px 4px;
  }
  .audio-dock.is-theater .audio-dock-shell:has(.audio-dock-queue:not([hidden])) .audio-dock-panel {
    border-radius: 18px 18px 4px 4px;
  }
  .audio-dock-queue {
    --plq-tab-h: 2rem;
    --plq-panel-h: min(42dvh, 340px);
    flex: 0 0 var(--plq-tab-h);
    width: 100%;
    height: var(--plq-tab-h);
    align-self: stretch;
    flex-direction: column;
  }
  .audio-dock.is-theater .audio-dock-queue {
    --plq-panel-w: 100%;
    --plq-panel-h: min(30dvh, 240px);
  }
  /* Theater on phones: pin to top so the downward Tracks panel stays on-screen. */
  .audio-dock.is-theater {
    place-items: start center;
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .audio-dock.is-theater .audio-dock-shell {
    width: min(100%, calc(100vw - 1rem));
    max-width: 100%;
    margin-top: 0.15rem;
  }
  .audio-dock.is-theater .audio-dock-panel {
    max-height: none;
  }
  .audio-player.is-theater .audio-player-viz {
    /* ~3/4 of prior mobile theater viz (was ~36vh / 280px) */
    height: min(27vh, 210px);
  }
  .audio-dock.is-theater:has(.audio-dock-queue.is-open) .audio-player-viz {
    height: min(20vh, 150px);
  }
  .audio-dock-queue-toggle {
    flex-direction: row;
    width: 100%;
    min-height: var(--plq-tab-h);
    height: var(--plq-tab-h);
    padding: 0.3rem 0.85rem;
    gap: 0.5rem;
    border: 1px solid #ffffff22;
    border-top: 0;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 6px 16px #0006;
  }
  .audio-dock-queue-label {
    writing-mode: horizontal-tb;
    transform: none;
    letter-spacing: 0.08em;
  }
  .audio-dock-queue-toggle:hover,
  .audio-dock-queue-toggle:focus-visible,
  .audio-dock-queue.is-open .audio-dock-queue-toggle {
    box-shadow: 0 8px 20px #0007;
  }
  .audio-dock-queue.is-open .audio-dock-queue-toggle {
    border-radius: 0;
    box-shadow: none;
  }
  .audio-dock-queue-drawer {
    top: 100%;
    bottom: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--plq-panel-h);
    min-height: 0;
    transform: translateY(-100%);
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .audio-dock-queue.is-open .audio-dock-queue-drawer {
    transform: translateY(0);
  }
  .audio-dock-queue-panel {
    height: 100%;
    min-height: 0;
    border: 1px solid #ffffff18;
    border-top: 0;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 12px 28px #0007;
  }
}

.audio-dock-pl-prev::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='19 20 9 12 19 4 19 20'/%3E%3Cline x1='5' y1='19' x2='5' y2='5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='19 20 9 12 19 4 19 20'/%3E%3Cline x1='5' y1='19' x2='5' y2='5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.audio-dock-pl-play::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6 3 20 12 6 21' fill='black'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6 3 20 12 6 21' fill='black'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.audio-dock-pl-play.is-playing::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='3' width='5' height='18' fill='black'/%3E%3Crect x='14' y='3' width='5' height='18' fill='black'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='3' width='5' height='18' fill='black'/%3E%3Crect x='14' y='3' width='5' height='18' fill='black'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.audio-dock-pl-next::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 4 15 12 5 20 5 4'/%3E%3Cline x1='19' y1='5' x2='19' y2='19'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 4 15 12 5 20 5 4'/%3E%3Cline x1='19' y1='5' x2='19' y2='19'/%3E%3C/svg%3E") center / contain no-repeat;
}
.audio-playlist-host {
  width: 100%;
  min-width: 0;
}
.audio-playlist-host .audio-msg-name {
  margin: 0 0 0.35rem;
  font: 700 0.9rem/1.3 Nunito, system-ui, sans-serif;
  color: #f2f7f8;
}
.audio-dock .audio-playlist-host .audio-msg-name {
  display: none;
}
.ctx-menu-icon.playlist-icon-btn {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Ccircle cx='4' cy='6' r='1.2' fill='black' stroke='none'/%3E%3Ccircle cx='4' cy='12' r='1.2' fill='black' stroke='none'/%3E%3Ccircle cx='4' cy='18' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Ccircle cx='4' cy='6' r='1.2' fill='black' stroke='none'/%3E%3Ccircle cx='4' cy='12' r='1.2' fill='black' stroke='none'/%3E%3Ccircle cx='4' cy='18' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E");
}
.audio-player.is-docked {
  width: 100%;
  grid-template-columns: 1fr;
}
.audio-player.is-docked .audio-player-play,
.audio-player.is-docked .audio-player-theater,
.audio-player.is-theater .audio-player-play,
.audio-player.is-theater .audio-player-theater {
  display: none !important;
}
.audio-player.is-theater {
  width: 100%;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: stretch;
}
.audio-player.is-theater .audio-player-main {
  gap: 0.55rem;
}
.audio-player.is-theater .audio-player-viz {
  height: min(42vh, 360px);
  margin: 0.15rem 0 0.2rem;
  border-radius: 14px;
  background: #040c12;
  box-shadow: inset 0 0 0 1px #ffffff18;
}
.audio-player.is-docked:not(.is-theater) .audio-player-viz {
  height: 72px;
}
.audio-player.is-theater .audio-player-seek {
  height: 1.6rem;
}
.audio-player.is-theater .audio-player-times {
  font-size: 0.95rem;
}
@media (max-width: 640px) {
  .audio-dock.is-theater .audio-dock-panel {
    padding: 0.85rem 0.8rem 1rem;
    border-radius: 14px;
  }
  .audio-player.is-theater {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .audio-player.is-theater .audio-player-main {
    width: 100%;
  }
  .audio-player.is-theater .audio-player-viz {
    height: min(27vh, 210px);
  }
  .audio-dock.is-theater:has(.audio-dock-queue.is-open) .audio-player-viz {
    height: min(18vh, 140px);
  }
}
/* Landscape phones have desktop-like width but very little usable height. */
@media (orientation: landscape) and (max-height: 600px) {
  .audio-dock.is-theater {
    place-items: start center;
    align-content: start;
    overflow-y: auto;
  }
  .audio-dock.is-theater .audio-dock-panel {
    max-height: calc(100dvh - max(0.75rem, env(safe-area-inset-top)) - max(0.75rem, env(safe-area-inset-bottom)) - 0.3rem);
    overflow-y: auto;
    gap: 0.3rem;
    padding: 0.5rem 0.75rem;
    touch-action: pan-y;
  }
  .audio-dock.is-theater .audio-player,
  .audio-dock.is-theater .audio-player-main {
    gap: 0.3rem;
  }
  .audio-dock.is-theater .audio-player-viz,
  .audio-dock.is-theater:has(.audio-dock-queue.is-open) .audio-player-viz {
    height: min(16dvh, 64px);
  }
  .audio-dock.is-theater .audio-player-seek {
    height: 1rem;
  }
}
@media (orientation: landscape) and (max-height: 600px) and (max-width: 800px) {
  .audio-dock.is-theater .audio-dock-queue.is-open {
    height: auto;
    flex-basis: auto;
  }
  .audio-dock.is-theater .audio-dock-queue.is-open .audio-dock-queue-drawer {
    position: relative;
    top: auto;
  }
}
.audio-player-mute {
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: none;
  flex-shrink: 0;
}
.audio-player-mute::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3C/svg%3E") center / contain no-repeat;
}
.audio-player-mute.is-muted::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E") center / contain no-repeat;
}
.audio-player-mute:hover,
.audio-player-mute:focus-visible {
  color: var(--text);
  background: #ffffff18;
  outline: none;
  filter: none;
}
.bubble.mine .audio-player-mute {
  color: color-mix(in srgb, #fff 78%, transparent);
}
.bubble.mine .audio-player-mute:hover,
.bubble.mine .audio-player-mute:focus-visible {
  color: #fff;
  background: #ffffff22;
}
.audio-player-volume {
  --audio-thumb: 18px;
  --audio-track: 8px;
  width: 100%;
  min-width: 0;
  margin: 0;
  /* Half-thumb side padding so 0% / 100% keep the thumb fully inside
     (otherwise overflow-x:hidden ancestors clip the ends and they feel unreachable). */
  padding: 0 calc(var(--audio-thumb) / 2);
  height: 28px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  box-sizing: border-box;
}
.audio-player-volume.is-muted {
  --audio-vol: 0%;
}
.audio-player-volume::-webkit-slider-runnable-track {
  height: var(--audio-track);
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--accent, #2a9d8f) 0% var(--audio-vol, 100%),
    color-mix(in srgb, var(--muted) 35%, transparent) var(--audio-vol, 100%) 100%
  );
}
.audio-player-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--audio-thumb);
  height: var(--audio-thumb);
  margin-top: calc((var(--audio-track) - var(--audio-thumb)) / 2);
  border-radius: 999px;
  background: #fff;
  border: 0;
  box-shadow: 0 0 0 1px #0005;
}
.audio-player-volume::-moz-range-track {
  height: var(--audio-track);
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 35%, transparent);
}
.audio-player-volume::-moz-range-progress {
  height: var(--audio-track);
  border-radius: 999px;
  background: var(--accent, #2a9d8f);
}
.audio-player-volume.is-muted::-moz-range-progress {
  background: transparent;
}
.audio-player-volume::-moz-range-thumb {
  width: var(--audio-thumb);
  height: var(--audio-thumb);
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px #0005;
}
.bubble.mine .audio-player-volume::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    #fff 0% var(--audio-vol, 100%),
    color-mix(in srgb, #fff 28%, transparent) var(--audio-vol, 100%) 100%
  );
}
.bubble.mine .audio-player-volume::-moz-range-progress {
  background: #fff;
}
.bubble.mine .audio-player-times {
  color: color-mix(in srgb, #fff 78%, transparent);
}
.voice-msg audio[hidden],
.voice-msg audio {
  display: none !important;
}
.msg-del-btn {
  position: static;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  margin-left: 0.25rem;
  font-size: 1.05rem !important;
  line-height: 1;
  border-radius: 999px;
  opacity: 0.75;
  color: #ffb4bc !important;
  border-color: transparent !important;
  background: transparent !important;
  flex-shrink: 0;
  vertical-align: middle;
}
.bubble.mine:hover .msg-del-btn,
.msg-del-btn:focus-visible {
  opacity: 1;
}
.msg-del-btn::before {
  width: 14px;
  height: 14px;
}
.trash-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
}
.leave-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}
.close-chat-icon-btn::before,
.ctx-menu-icon.close-chat-icon-btn {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}
.call-audio-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.wallpaper-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
}
.call-video-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='23 7 16 12 23 17 23 7'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='23 7 16 12 23 17 23 7'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'/%3E%3C/svg%3E");
}
.reply-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 17 4 12 9 7'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 17 4 12 9 7'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E");
}
.forward-icon-btn::before,
.ctx-menu-icon.forward-icon-btn {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 17 20 12 15 7'/%3E%3Cpath d='M4 18v-2a4 4 0 0 1 4-4h12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 17 20 12 15 7'/%3E%3Cpath d='M4 18v-2a4 4 0 0 1 4-4h12'/%3E%3C/svg%3E");
}
.reply-cancel-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}
.msg-reply-btn {
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  margin-left: 0.15rem;
  opacity: 0.7;
  border-color: transparent !important;
  background: transparent !important;
  color: inherit !important;
  flex-shrink: 0;
}
.msg-reply-btn::before {
  width: 14px;
  height: 14px;
}
.bubble:hover .msg-reply-btn,
.msg-reply-btn:focus-visible {
  opacity: 1;
}
.msg-forward-btn {
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  margin-left: 0.05rem;
  opacity: 0.7;
  border-color: transparent !important;
  background: transparent !important;
  color: inherit !important;
  flex-shrink: 0;
}
.msg-forward-btn::before {
  width: 14px;
  height: 14px;
}
.bubble:hover .msg-forward-btn,
.msg-forward-btn:focus-visible {
  opacity: 1;
}
.forwarded-mark {
  font-size: 0.72rem;
  font-style: italic;
  opacity: 0.75;
  margin: 0 0 0.25rem;
}
.msg-edit-btn {
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  margin-left: 0.05rem;
  opacity: 0.7;
  border-color: transparent !important;
  background: transparent !important;
  color: inherit !important;
  flex-shrink: 0;
}
.msg-edit-btn::before {
  width: 14px;
  height: 14px;
}
.bubble:hover .msg-edit-btn,
.msg-edit-btn:focus-visible {
  opacity: 1;
}

.edit-bar .reply-bar-main {
  border-left-color: var(--accent);
}
.edit-bar .reply-bar-main strong {
  color: #7ed4e8;
}
.meta-edited {
  font-style: italic;
  opacity: 0.85;
  margin-right: 0.2rem;
}
.reply-quote {
  display: grid;
  gap: 0.1rem;
  width: 100%;
  text-align: left;
  margin: 0 0 0.4rem;
  padding: 0.35rem 0.5rem;
  border: 0;
  border-left: 3px solid var(--accent-hot);
  border-radius: 8px;
  background: #0004;
  color: inherit;
  box-shadow: none;
  cursor: pointer;
  font: inherit;
}
.reply-quote strong {
  font-size: 0.75rem;
  color: #ffb08a;
}
.reply-quote span {
  font-size: 0.8rem;
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bubble.reply-flash,
.contact-intro-thread.reply-flash,
.contact-intro-card.reply-flash {
  outline: 2px solid var(--accent-hot);
  outline-offset: 2px;
}
.reply-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  background: var(--panel);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  min-width: 0;
}
.reply-bar[hidden] {
  display: none !important;
}
.reply-bar-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.1rem;
  border-left: 3px solid var(--accent-hot);
  padding-left: 0.55rem;
}
.reply-bar-main strong {
  font-size: 0.8rem;
  color: #ffb08a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reply-bar-main span {
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.check-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
  margin: 0.55rem 0;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
  cursor: pointer;
  width: 100%;
}
.check-row input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  min-width: 1.15rem;
  max-width: 1.15rem;
  margin: 0.2rem 0 0;
  padding: 0;
  flex: 0 0 1.15rem;
  border-radius: 4px;
  accent-color: var(--accent, #2a9d8f);
}
.modal-card .check-row input[type="checkbox"],
.profile-section .check-row input[type="checkbox"] {
  width: 1.15rem !important;
  height: 1.15rem !important;
  min-width: 1.15rem !important;
  max-width: 1.15rem !important;
  padding: 0 !important;
  margin: 0.2rem 0 0 !important;
  flex: 0 0 1.15rem;
  box-shadow: none;
}
.meta {
  font-size: 0.7rem;
  color: #aebac1;
  text-align: right;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.15rem;
  flex-wrap: wrap;
  min-width: 0;
}
.ticks { margin-left: 0.25rem; cursor: help; }
.ticks.read { color: #7ed4e8; }
.typing { padding: 0 1rem 0.3rem; color: var(--muted); font-size: 0.8rem; }
.composer-menu-backdrop {
  position: absolute;
  inset: 0;
  z-index: 8;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #0008;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.composer-menu-backdrop:hover,
.composer-menu-backdrop:active {
  filter: none;
  transform: none;
  box-shadow: none;
  background: #0008;
}
.emoji-panel {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr));
  gap: 0.2rem;
  padding: 0.55rem;
  margin: 0 0.6rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  max-height: min(180px, 28dvh);
  overflow: auto;
  flex-shrink: 0;
  min-width: 0;
  position: relative;
  z-index: 9;
}
.emoji-panel:not([hidden]),
.emoji-panel.is-open {
  display: grid;
}
.emoji-panel button {
  background: transparent;
  color: var(--text);
  border: 0;
  border-radius: 10px;
  padding: 0.35rem 0;
  font-size: 1.35rem;
  line-height: 1;
  min-height: 40px;
  box-shadow: none;
}
.emoji-panel button:hover {
  background: var(--panel-2);
  filter: none;
  box-shadow: none;
}
.giphy-panel {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem 0.65rem;
  margin: 0 0.6rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  max-height: min(280px, 40dvh);
  flex-shrink: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
  z-index: 9;
}
.giphy-panel:not([hidden]) {
  display: flex;
}
.giphy-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  min-width: 0;
}
.giphy-toolbar input {
  width: 100%;
  flex: none;
  min-width: 0;
  margin: 0;
  padding: 0.55rem 0.75rem;
  font-size: 16px;
}
.giphy-powered {
  align-self: flex-end;
  flex-shrink: 0;
  font-size: 0.7rem;
  line-height: 1.2;
  text-decoration: none;
  color: var(--muted);
  white-space: nowrap;
}
.giphy-powered:hover {
  color: #7ed4e8;
}
.giphy-results {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  flex: 1 1 auto;
  align-content: start;
  width: 100%;
}
.giphy-results button {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 0 !important;
  padding: 0 0 100% !important;
  margin: 0;
  border-radius: 10px !important;
  overflow: hidden;
  background: #0a1218 !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  color: inherit;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  transform: none !important;
  filter: none !important;
  min-height: 0;
  max-height: none;
  align-self: start;
}
.giphy-results button:hover,
.giphy-results button:active {
  filter: none !important;
  transform: none !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
  background: #0a1218 !important;
}
.giphy-results img, .giphy-results video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.giphy-empty,
.giphy-status {
  margin: 0.35rem 0 0;
  text-align: center;
  grid-column: 1 / -1;
}
@media (min-width: 801px) {
  .giphy-toolbar {
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
  }
  .giphy-toolbar input {
    flex: 1;
    font-size: 0.95rem;
  }
  .giphy-powered {
    align-self: center;
  }
  .giphy-results {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }
}
@media (max-width: 800px) {
  .giphy-panel {
    margin: 0;
    border-radius: 16px 16px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    max-height: min(42dvh, 320px);
    padding: 0.65rem 0.7rem calc(0.55rem + var(--safe-bottom));
  }
  .giphy-results {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem;
  }
  .giphy-results button {
    border-radius: 12px !important;
  }
}
.composer {
  display: flex;
  gap: 0.45rem;
  box-sizing: border-box;
  height: calc(var(--bottombar-height) + var(--safe-bottom));
  min-height: calc(var(--bottombar-height) + var(--safe-bottom));
  max-height: calc(var(--bottombar-height) + var(--safe-bottom));
  padding: 0 0.7rem;
  padding-bottom: var(--safe-bottom);
  border-top: 1px solid var(--border);
  background: var(--panel-2);
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
  position: relative;
  z-index: 9;
  max-width: 100%;
  overflow: hidden;
}
.composer .ghost {
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 1.15rem;
}
.compose-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
.composer textarea,
.compose-field textarea {
  resize: none;
  height: 2.5rem;
  min-height: 2.5rem;
  max-height: 2.5rem;
  border-radius: 18px;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  overflow-y: auto;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  padding-right: 5rem;
  line-height: 1.3;
}
.compose-clear-btn,
.compose-expand-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  cursor: pointer;
  z-index: 6;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.compose-clear-btn {
  right: 2.45rem;
}
.compose-expand-btn {
  right: 0.1rem;
}
.compose-clear-btn[hidden] {
  display: none !important;
}
.compose-clear-btn::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.compose-expand-btn::before,
.lists-expand-btn::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.compose-clear-btn:hover,
.compose-clear-btn:focus-visible,
.compose-clear-btn:active,
.compose-expand-btn:hover,
.compose-expand-btn:focus-visible,
.compose-expand-btn:active {
  color: var(--text);
  background: #ffffff14;
  filter: none;
  outline: none;
  box-shadow: none;
  transform: translateY(-50%);
}
.compose-clear-btn:hover,
.compose-clear-btn:focus-visible {
  color: #ff8f9d;
}
.compose-field textarea {
  padding-right: 5rem;
}
.chat-editor-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  max-height: 2.75rem !important;
  resize: none !important;
  overflow-y: hidden !important;
}
.chat-editor-expand-dialog[open] {
  position: fixed;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  box-sizing: border-box;
  margin: 0;
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel-2);
  color: var(--text);
  overflow: hidden;
}
.chat-editor-expand-dialog::backdrop { background: #071219cc; backdrop-filter: blur(2px); }
.chat-editor-expand-head,.chat-editor-expand-foot { display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex:0 0 auto; }
.chat-editor-expand-head .compose-collapse-btn { position:static;transform:none;margin:0; }
.chat-editor-expand-head .compose-collapse-btn:hover,.chat-editor-expand-head .compose-collapse-btn:focus-visible { transform:none; }
.chat-editor-expand-dialog > .field-clear-wrap { flex:1 1 auto;min-height:0;display:flex; }
.chat-editor-expand-input { flex:1 1 auto;width:100%;height:100%;min-width:0;min-height:0;box-sizing:border-box;resize:none;overflow:auto; }
.chat-editor-expand-foot { justify-content:flex-end; }
.compose-expand {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: block;
  padding: 0;
  margin: 0;
  background: #0a162066;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  /* Avoid iOS rubber-band / overscroll revealing clipped edges. */
  overscroll-behavior: none;
  touch-action: none;
}
.compose-expand[hidden] {
  display: none !important;
}
html.compose-expand-open,
html.compose-expand-open body {
  overflow: hidden;
  overscroll-behavior: none;
}
.compose-expand-card {
  position: absolute;
  left: 0;
  bottom: auto;
  top: auto;
  width: min(100%, 40rem);
  max-width: 100%;
  /* Height is set in JS to fill from safe-area top down to keyboard / compose toolbar. */
  height: auto;
  min-height: 8rem;
  max-height: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.75rem 0.8rem 0.8rem;
  border-radius: 16px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px #000a;
  overflow: hidden;
  transform: translateY(110%);
  opacity: 0;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease;
  will-change: transform, opacity;
  touch-action: manipulation;
}
.compose-expand .compose-text-expand {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.compose-expand.is-open .compose-expand-card {
  transform: translateY(0);
  opacity: 1;
}
@media (max-width: 800px) {
  .compose-expand-card {
    border-radius: 14px;
    padding: 0.65rem 0.7rem 0.7rem;
  }
}
.compose-expand-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 0 0 auto;
}
.compose-expand-head strong {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}
.compose-expand-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.compose-expand-clear-btn,
.compose-collapse-btn {
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #243844;
  color: var(--muted);
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
}
.compose-expand-clear-btn[hidden] {
  display: none !important;
}
.compose-expand-clear-btn {
  color: #e85d6f;
}
.compose-expand-clear-btn::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.compose-collapse-btn::before,
.lists-expand-btn[aria-pressed=true]::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 14 10 14 10 20'/%3E%3Cpolyline points='20 10 14 10 14 4'/%3E%3Cline x1='14' y1='10' x2='21' y2='3'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 14 10 14 10 20'/%3E%3Cpolyline points='20 10 14 10 14 4'/%3E%3Cline x1='14' y1='10' x2='21' y2='3'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.compose-expand-clear-btn:hover,
.compose-expand-clear-btn:focus-visible,
.compose-collapse-btn:hover,
.compose-collapse-btn:focus-visible {
  background: #2c4555;
  filter: none;
  outline: none;
  box-shadow: none;
}
.compose-text-expand {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 0.75rem 0.85rem;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 1.02rem;
  line-height: 1.45;
  resize: none;
  box-shadow: none;
  overflow: auto;
}
.compose-text-expand::placeholder {
  color: #7e93a1;
}
.compose-text-expand:hover,
.compose-text-expand:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px #2a9bb540;
  background: #203a48;
}

/* Opt-in white expand editor (Profile → Messages). */
html.compose-expand-white .compose-expand-card {
  background: #ffffff;
  color: #1a2b36;
  border-color: transparent;
}
html.compose-expand-white .compose-expand-head strong {
  color: #1a2b36;
}
html.compose-expand-white .compose-expand-clear-btn,
html.compose-expand-white .compose-collapse-btn {
  border-color: #d5dee4;
  background: #f4f8fa;
  color: #0b6f8f;
}
html.compose-expand-white .compose-expand-clear-btn {
  color: #b42336;
}
html.compose-expand-white .compose-expand-clear-btn:hover,
html.compose-expand-white .compose-expand-clear-btn:focus-visible,
html.compose-expand-white .compose-collapse-btn:hover,
html.compose-expand-white .compose-collapse-btn:focus-visible {
  background: #e8f2f6;
}
html.compose-expand-white .compose-text-expand {
  border-color: #d5dee4;
  background: #ffffff;
  color: #1a2b36;
}
html.compose-expand-white .compose-text-expand:hover,
html.compose-expand-white .compose-text-expand:focus {
  border-color: #9eb8c4;
  box-shadow: none;
  background: #ffffff;
}
.compose-expand-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  margin-top: 0.15rem;
}
.compose-expand-send-btn {
  margin: 0;
  border: none;
  border-radius: 999px;
  padding: 0 1.25rem;
  height: 2.45rem;
  min-width: 5.5rem;
  background: var(--accent, #1a8fa8);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 2px 8px #0a223940;
}
.compose-expand-send-btn:hover,
.compose-expand-send-btn:focus-visible {
  filter: brightness(1.08);
  outline: none;
}
.compose-expand-send-btn:active {
  transform: translateY(1px);
}
.composer button[type="submit"] {
  border-radius: 999px;
  padding: 0 1.1rem;
  height: 2.5rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bubble img, .bubble video { max-width: 100%; border-radius: 10px; display: block; }
.bubble audio { display: none; }

.modal {
  position: fixed;
  inset: 0;
  background: #0008;
  display: none;
  place-items: center;
  z-index: 140;
  padding:
    max(0.5rem, var(--safe-top))
    max(0.5rem, var(--safe-right))
    max(0.5rem, var(--safe-bottom))
    max(0.5rem, var(--safe-left));
  overflow: hidden;
  overscroll-behavior: contain;
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  max-height: 100dvh;
}
.ctx-menu {
  position: fixed;
  z-index: 88;
  min-width: 11rem;
  max-width: min(18rem, calc(100vw - 1rem));
  padding: 0.3rem;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 10px 28px #000a;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.ctx-menu.has-reactions {
  min-width: min(17.5rem, calc(100vw - 1rem));
  max-width: min(20rem, calc(100vw - 1rem));
}
.ctx-react-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.15rem;
  padding: 0.2rem 0.15rem 0.35rem;
  margin: 0 0 0.15rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.ctx-react-row.is-expanded {
  flex-wrap: wrap;
  justify-content: flex-start;
  max-height: min(40vh, 220px);
  overflow: auto;
}
.ctx-react-emoji,
.ctx-react-more {
  width: 2.05rem;
  height: 2.05rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: none;
}
.ctx-react-more {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--muted);
  background: #ffffff12;
}
.ctx-react-emoji:hover,
.ctx-react-emoji:focus-visible,
.ctx-react-more:hover,
.ctx-react-more:focus-visible {
  background: #ffffff18;
  outline: none;
}
.ctx-react-emoji.is-active {
  background: color-mix(in srgb, var(--accent, #2a9d8f) 35%, transparent);
}
.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0.35rem 0 0;
  max-width: 100%;
}
.msg-reaction-chip {
  margin: 0;
  padding: 0.12rem 0.4rem;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-2, #1c3340) 88%, transparent);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: none;
}
.msg-reaction-chip.is-mine {
  border-color: color-mix(in srgb, var(--accent, #2a9d8f) 55%, transparent);
  background: color-mix(in srgb, var(--accent, #2a9d8f) 22%, transparent);
}
.bubble.mine .msg-reaction-chip {
  background: #ffffff18;
  border-color: #ffffff33;
  color: #fff;
}
.bubble.mine .msg-reaction-chip.is-mine {
  background: #ffffff28;
  border-color: #ffffff66;
}
.chat-list li,
.bubble,
.bubble-text,
.chat-main,
.chat-list .preview {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.sidebar,
.sidebar-tools,
.chat-filters,
.thread-head,
.thread-actions {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.ctx-menu[hidden] {
  display: none !important;
}
.ctx-menu-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: left;
  letter-spacing: normal;
  box-shadow: none;
  cursor: pointer;
}
.ctx-menu-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.ctx-menu-icon::before {
  content: none !important;
}
.edit-icon-btn::before,
.ctx-menu-icon.edit-icon-btn {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E");
}
.ctx-menu-icon.open-chat-icon-btn {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
}
.ctx-menu-icon.profile-icon-btn {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.ctx-menu-icon.wallpaper-icon-btn {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
}
.ctx-menu-icon.mute-icon-btn {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5L6 9H2v6h4l5 4V5z'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5L6 9H2v6h4l5 4V5z'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3C/svg%3E");
}
.ctx-menu-icon.archive-icon-btn {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'/%3E%3Crect x='1' y='3' width='22' height='5'/%3E%3Cline x1='10' y1='12' x2='14' y2='12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'/%3E%3Crect x='1' y='3' width='22' height='5'/%3E%3Cline x1='10' y1='12' x2='14' y2='12'/%3E%3C/svg%3E");
}
.ctx-menu-icon.block-icon-btn {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='4.93' y1='4.93' x2='19.07' y2='19.07'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='4.93' y1='4.93' x2='19.07' y2='19.07'/%3E%3C/svg%3E");
}
.ctx-menu-icon.add-member-icon-btn {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E");
}
.ctx-menu-icon.members-icon-btn {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.ctx-menu-icon.trash-icon-btn {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
}
.ctx-menu-icon.leave-icon-btn {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}
.ctx-menu-label {
  flex: 1 1 auto;
  min-width: 0;
}
.ctx-menu-item:hover,
.ctx-menu-item:focus-visible {
  background: #243844;
  filter: none;
  box-shadow: none;
  outline: none;
}
.ctx-menu-item:disabled {
  opacity: 0.45;
  cursor: default;
}
.ctx-menu-item.is-danger {
  color: #f0a0a8;
}
.ctx-menu-item.is-danger:hover,
.ctx-menu-item.is-danger:focus-visible {
  background: #3a2228;
}
.msg-translate-tip {
  position: fixed;
  z-index: 89;
  max-width: min(22rem, calc(100vw - 1.25rem));
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
  box-shadow: 0 12px 28px #000a;
  color: var(--text);
  pointer-events: auto;
}
.msg-translate-tip[hidden] {
  display: none !important;
}
.msg-translate-tip .msg-translate-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg-translate-tip .msg-translate-note {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--muted, #9bb0bd);
}
.msg-translate-tip.is-loading .msg-translate-text,
.msg-translate-tip.is-error .msg-translate-text {
  color: var(--muted, #9bb0bd);
  font-style: italic;
}
.modal.is-open {
  display: grid;
  align-items: center;
  justify-items: center;
}
.modal-card {
  background: var(--panel);
  padding: 1rem 1rem 0.85rem;
  border-radius: 18px;
  width: min(420px, 100%);
  max-width: 100%;
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 1rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  margin: 0;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}
.modal-body,
#modal-body {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.modal-card h2 {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  flex: 0 0 auto;
}
.modal-card h2.modal-title-with-icon {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.modal-card h2.modal-title-with-icon::before {
  content: "";
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.modal-card h2.modal-title-invite::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E");
}
.modal-card h2.modal-title-status::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4l2.5 1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4l2.5 1.5'/%3E%3C/svg%3E");
}
.modal-card h2.modal-title-profile::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.modal-card h2.modal-title-support::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E");
}
.modal-card h2.modal-title-members::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.modal-card h2.modal-title-wallpaper::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
}
.modal-card h2.modal-title-group::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.65rem 0 0;
  flex: 0 0 auto;
  position: static;
  background: transparent;
  z-index: 1;
}
.confirm-message {
  margin: 0;
  line-height: 1.45;
  color: var(--text);
}
.support-form {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
}
.support-form label {
  display: grid;
  gap: 0.3rem;
  font-weight: 600;
  font-size: 0.88rem;
  min-width: 0;
}
.support-form input,
.support-form select,
.support-form textarea,
.modal-card input,
.modal-card select,
.modal-card textarea {
  font-family: inherit;
  font-weight: 500;
  font-size: 16px !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.support-form textarea {
  resize: vertical;
  min-height: 5rem;
  max-height: min(28dvh, 220px);
}
.support-intro,
.support-hint {
  margin: 0;
}
.support-file-list {
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.support-file-list[hidden] {
  display: none !important;
}
.support-file-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.45rem 0.55rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel-2);
}
.support-file-thumb {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 8px;
  object-fit: cover;
  background: var(--panel);
  border: 1px solid var(--border);
}
.support-file-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}
.support-file-name {
  font-size: 0.88rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.support-file-size {
  font-size: 0.75rem;
}
.support-file-remove {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
}
.support-file-remove::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.support-file-remove:hover,
.support-file-remove:focus-visible {
  color: #ff8f9d;
  background: #ffffff14;
  outline: none;
  filter: none;
  box-shadow: none;
}
.support-done-msg {
  margin: 0 0 0.5rem;
  line-height: 1.45;
  font-weight: 600;
}
.support-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
#modal-ok.is-danger-action {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  box-shadow: none;
}
#modal-ok.is-danger-action:hover,
#modal-ok.is-danger-action:focus-visible {
  filter: brightness(1.06);
}
.modal-card-wide {
  width: min(640px, 100%);
}
.modal-card-profile {
  width: min(520px, 100%);
}
.modal-card-profile #modal-body,
.modal-card-profile .modal-body {
  padding-right: 0.9rem;
  padding-bottom: 0.35rem;
  scrollbar-gutter: stable;
}
.modal-card-profile .profile-panel,
.modal-card-profile .peer-profile-panel {
  padding-right: 0.25rem;
}
.new-group-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 0.85rem 1rem;
  align-items: start;
  min-width: 0;
}
.new-group-name label,
.new-group-members-label {
  display: block;
  margin: 0 0 0.45rem;
}
.new-group-name input {
  width: 100%;
  margin-top: 0.35rem;
}
.new-group-members {
  min-width: 0;
}
.new-group-members .user-pick {
  max-height: min(280px, 45dvh);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.35rem 0.45rem;
  background: var(--panel-2);
}
.user-pick-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.35rem;
  border-radius: 8px;
  cursor: pointer;
  min-width: 0;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
}
.user-pick-check:hover {
  background: #243844;
}
.user-pick-check input {
  width: auto;
  margin: 0;
  flex-shrink: 0;
}
.user-pick-check span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
@media (max-width: 800px) {
  .new-group-form {
    grid-template-columns: 1fr;
  }
}
.user-pick { max-height: 240px; overflow: auto; }
.user-pick button {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0.3rem 0;
  background: var(--panel-2);
  color: var(--text);
  box-shadow: none;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
}
.user-pick button:hover {
  filter: none;
  border-color: var(--accent);
  background: #243844;
}
.invite-panel {
  display: grid;
  gap: 0.85rem;
}
.invite-block {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem 1.05rem 1.1rem;
  min-width: 0;
}
.invite-block-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.invite-block-num {
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: #7ed4e8;
  background: #1e5a6e;
  margin-top: 0.1rem;
}
.invite-block-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
}
.invite-block-hint {
  margin: 0.25rem 0 0;
  line-height: 1.45;
  font-size: 0.88rem;
}
.invite-or {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.85rem 0 0.65rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.invite-or::before,
.invite-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.invite-email-box {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.invite-email-box label {
  margin: 0;
}
.invite-email-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.85rem;
  flex-wrap: wrap;
}
#icode-toggle { margin-top: 0.4rem; }
.invite-email-actions button {
  flex: 1;
  min-width: 140px;
  min-height: 2.45rem;
}
.invite-pick-btn {
  width: 100%;
  margin: 0;
  padding: 0.85rem 1rem;
  font-size: 0.98rem;
  min-height: 2.55rem;
}
.invite-pick-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
}
.invite-picked {
  margin: 0.65rem 0 0;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
}
.invite-picked strong {
  display: block;
  margin-bottom: 0.15rem;
}
.invite-code-fields {
  display: grid;
  gap: 0.55rem;
}
.invite-code-fields label {
  margin: 0;
}
.invite-token {
  margin: 0.85rem 0 0;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92rem;
  word-break: break-all;
  color: #7ed4e8;
}
.invite-list {
  display: grid;
  gap: 0.5rem;
  max-height: min(220px, 30dvh);
  overflow: auto;
}
.invite-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  min-width: 0;
}
.invite-row-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}
.invite-row-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invite-row button {
  flex-shrink: 0;
}
.invite-revoke-btn {
  width: 2.35rem;
  height: 2.35rem;
  min-height: 2.35rem;
  padding: 0;
}
.check-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.close-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}
.contact-req-accept {
  color: #3d9b78;
  border-color: #3d9b7844;
  background: #3d9b7818;
}
.contact-request-actions .icon-btn {
  width: 2.2rem;
  height: 2.2rem;
  min-height: 2.2rem;
  padding: 0;
}
.invite-mail-status {
  margin-top: 0.85rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
}
.invite-mail-status > p:first-child {
  margin: 0 0 0.35rem;
  font-weight: 700;
}
.invite-options {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.invite-options-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0 0 0.15rem;
}
.invite-options-subtitle {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  line-height: 1.4;
}
.invite-info-btn {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  min-height: 1.35rem;
  margin: 0.1rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  touch-action: manipulation;
}
.invite-info-btn:hover,
.invite-info-btn:focus-visible {
  background: transparent;
  outline: none;
  filter: none;
  box-shadow: none;
  transform: none;
  color: var(--muted);
}
.invite-info-glyph {
  width: 0.95rem;
  height: 0.95rem;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}
.invite-legal-tip {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 5;
  width: min(18.5rem, calc(100vw - 3rem));
  max-width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0f1a22;
  color: #c5d4dc;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.invite-legal-tip[hidden] {
  display: none !important;
}
.invite-share-stack {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.65rem 0 0.35rem;
}
.invite-share-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.9rem;
  min-height: 2.75rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
}
.invite-share-btn:hover,
.invite-share-btn:focus-visible {
  background: #243844;
  border-color: var(--accent);
  outline: none;
  filter: none;
  box-shadow: none;
  transform: none;
}
.invite-share-btn:active {
  transform: none;
  filter: none;
}
.invite-share-icon {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  background: var(--accent);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.invite-share-icon-chat {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-12.4 7.5L3 20l1.1-5.4A8.5 8.5 0 1 1 21 11.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-12.4 7.5L3 20l1.1-5.4A8.5 8.5 0 1 1 21 11.5z'/%3E%3C/svg%3E");
}
.invite-share-icon-mail {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}
.invite-share-icon-copy {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
}
.invite-share-label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}
.invite-extra-tabs {
  margin-top: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
}
.invite-filters {
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.invite-tab-panel {
  border: none;
  border-radius: 0;
  background: var(--panel);
  padding: 0.75rem 0.85rem 0.85rem;
}
.invite-tab-panel[hidden] {
  display: none !important;
}
.invite-tab-panel.invite-block {
  margin: 0;
  border: none;
  border-radius: 0;
  background: var(--panel);
}
.invite-link-line {
  margin: 0.35rem 0 0;
  word-break: break-all;
  font-size: 0.82rem;
}
.invite-email-choices {
  margin-top: 0.55rem;
}
.contact-requests {
  margin: 0.35rem 0.7rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.contact-requests[hidden] {
  display: none !important;
}
.contact-requests-head {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0.2rem 0 0;
}
.contact-request-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel-2);
}
.contact-request-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.contact-request-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-request-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}
.contact-request-actions button {
  min-height: 2.2rem;
}

.call-overlay {
  position: fixed;
  inset: 0;
  background: #000c;
  display: none;
  place-items: center;
  z-index: 30;
  overflow: hidden;
}
.call-overlay.is-open {
  display: grid;
  /* Above persistent next-event tab (130) so call chrome stays usable. */
  z-index: 140;
}
/* Full call UI owns the screen — hide background next-event chrome. */
body:has(.call-overlay.is-open:not(.minimized):not([hidden])) .event-next-tab {
  display: none !important;
}
.call-overlay.is-open.minimized {
  background: transparent;
  place-items: start stretch;
  padding: 0;
  pointer-events: none;
  overflow: visible;
}
.call-overlay.is-open.minimized .call-box {
  pointer-events: auto;
  width: min(520px, calc(100% - 1rem));
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-align: left;
  background: #152833ee;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 0.55rem 0.7rem;
  box-shadow: 0 10px 28px #0008;
  backdrop-filter: blur(8px);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 35;
}
.call-overlay.is-open.minimized .call-box.is-dragging {
  cursor: grabbing;
  box-shadow: 0 14px 36px #000a;
}
.call-overlay.is-open.minimized .call-box button {
  touch-action: manipulation;
  cursor: pointer;
}
.call-overlay.is-open.minimized #call-status {
  flex: 1;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.call-overlay.is-open.minimized .video-stage {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
}
.call-overlay.is-open.minimized .video-stage.solo-local #local-video,
.call-overlay.is-open.minimized #remote-video {
  width: 64px;
  height: 64px;
  min-height: 0;
  max-height: none;
  border-radius: 0;
  object-fit: cover;
}
.call-overlay.is-open.minimized #local-video {
  width: 22px;
  height: 28px;
  right: 4px;
  bottom: 4px;
  border-width: 1px;
  border-radius: 5px;
}
.call-overlay.is-open.minimized .video-stage.solo-local #local-video {
  position: static;
  width: 64px;
  height: 64px;
}
.call-overlay.is-open.minimized #video-fs-btn {
  display: none !important;
}
.call-overlay.is-open.minimized .call-actions {
  margin: 0;
  gap: 0.4rem;
}
.call-overlay.is-open.minimized #hangup-btn {
  margin: 0;
  padding: 0.5rem 0.85rem;
  font-size: 0.82rem;
}
.call-box { text-align: center; position: relative; max-width: 100%; width: min(720px, 92vw); }
.call-e2e {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.45rem;
  max-width: min(420px, 92%);
  margin: 0 auto 0.75rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid #ffffff33;
  border-radius: 999px;
  background: #0b1a22cc;
  color: #d7eef5;
  cursor: help;
  text-align: left;
  box-shadow: 0 6px 18px #0006;
  backdrop-filter: blur(8px);
}
.call-e2e:hover,
.call-e2e:focus-visible,
.call-e2e.is-open {
  border-color: #7ed4e8aa;
  outline: none;
  background: #123040e6;
}
.call-e2e-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 0.12rem;
  background: #9fe7f5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.call-e2e-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.call-e2e-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
}
.call-e2e-detail {
  display: none;
  font-size: 0.7rem;
  line-height: 1.35;
  color: #b7cdd6;
  font-weight: 500;
  white-space: normal;
}
.call-e2e:hover .call-e2e-detail,
.call-e2e:focus-visible .call-e2e-detail,
.call-e2e.is-open .call-e2e-detail {
  display: block;
}
.call-e2e.is-open,
.call-e2e:hover,
.call-e2e:focus-visible {
  border-radius: 14px;
}
.call-e2e.call-e2e-float {
  position: absolute;
  top: 0.65rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  margin: 0;
}
.call-overlay.is-open.minimized .call-e2e {
  display: none;
}
.call-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.call-icon-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
}
.call-icon-btn::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
#call-chat-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
#call-mute-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='23'/%3E%3Cline x1='8' y1='23' x2='16' y2='23'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='23'/%3E%3Cline x1='8' y1='23' x2='16' y2='23'/%3E%3C/svg%3E");
}
#call-mute-btn.is-active {
  border-color: var(--accent-hot);
  color: var(--accent-hot);
  background: #ff7a4522;
}
#call-mute-btn.is-active::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3Cpath d='M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6'/%3E%3Cpath d='M17 16.95A7 7 0 0 1 5 12v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='23'/%3E%3Cline x1='8' y1='23' x2='16' y2='23'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3Cpath d='M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6'/%3E%3Cpath d='M17 16.95A7 7 0 0 1 5 12v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='23'/%3E%3Cline x1='8' y1='23' x2='16' y2='23'/%3E%3C/svg%3E");
}
#call-speaker-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3C/svg%3E");
}
#call-speaker-btn:not(.is-active)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
#call-speaker-btn.is-active {
  border-color: var(--accent);
  color: #9fe7f5;
  background: #1a4a5c;
}
.call-speaker-menu {
  position: fixed;
  z-index: 95;
  min-width: 11rem;
  max-width: min(18rem, calc(100vw - 1rem));
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 10px 28px #000a;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.call-speaker-menu[hidden] {
  display: none !important;
}
.call-speaker-opt {
  margin: 0;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  text-align: left;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.call-speaker-opt:hover,
.call-speaker-opt:focus-visible {
  background: var(--panel-2);
  outline: none;
}
.call-speaker-opt.is-active {
  color: #9fe7f5;
  background: #1a4a5c;
}
#call-video-toggle-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='23 7 16 12 23 17 23 7'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='23 7 16 12 23 17 23 7'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'/%3E%3C/svg%3E");
}
#call-share-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3C/svg%3E");
}
#call-captions-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M7 15h4'/%3E%3Cpath d='M13 15h4'/%3E%3Cpath d='M7 11h10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M7 15h4'/%3E%3Cpath d='M13 15h4'/%3E%3Cpath d='M7 11h10'/%3E%3C/svg%3E");
}
#call-captions-btn.is-active {
  border-color: var(--accent);
  color: #9fe7f5;
  background: #1a4a5c;
}
.call-captions {
  position: absolute;
  left: 0.65rem;
  right: 0.65rem;
  bottom: 0.65rem;
  z-index: 4;
  pointer-events: none;
  text-align: center;
}
.call-captions p {
  margin: 0;
  display: inline-block;
  max-width: 100%;
  padding: 0.45rem 0.75rem;
  border-radius: 10px;
  background: #0a1620cc;
  color: #f3f8fb;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.35;
  text-wrap: balance;
  box-shadow: 0 4px 14px #0007;
}
.call-captions p:empty {
  display: none;
}
.call-captions-audio {
  position: static;
  margin: 0.85rem auto 0;
  max-width: min(520px, 92vw);
}
.call-overlay.is-open.minimized .call-captions,
.call-overlay.is-open.minimized .call-captions-audio {
  display: none !important;
}
.video-stage.solo-local .call-captions {
  bottom: 0.85rem;
}
#call-share-btn.is-active {
  border-color: var(--accent-hot);
  color: var(--accent-hot);
  background: #ff7a4522;
}
#call-effects-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}
#call-effects-btn.is-active {
  border-color: var(--accent);
  color: #9fe7f5;
  background: #1a4a5c;
}
.call-effects-menu {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  margin: 0;
  width: min(560px, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overscroll-behavior: contain;
  overflow: auto;
  padding: 0.7rem 0.75rem 0.8rem;
  border-radius: 14px;
  background: #132833;
  border: 1px solid var(--border);
  box-shadow: 0 8px 22px #0007;
  text-align: left;
}
.call-effects-menu[hidden] {
  display: none !important;
}
.camera-effect-chooser {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}
.camera-effect-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.camera-effect-group-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.camera-effect-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}
.camera-effect-tools {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.camera-effect-scenes {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}
.camera-effect-scene-filters {
  padding: 0;
  margin: 0;
}
.camera-effect-bg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}
.camera-effect-bg-grid[data-ratio="4:3"] .call-effects-opt-thumb,
.camera-effect-bg-grid[data-ratio="4:3"] .call-effects-opt-upload {
  aspect-ratio: 4 / 3;
}
.camera-effect-bg-grid[data-ratio="16:9"] .call-effects-opt-thumb,
.camera-effect-bg-grid[data-ratio="16:9"] .call-effects-opt-upload {
  aspect-ratio: 16 / 9;
}
.call-effects-opt {
  margin: 0;
  width: 100%;
  min-height: 2.35rem;
  padding: 0.45rem 0.35rem;
  border-radius: 10px;
  background: #1a3040;
  border: 1px solid #2f4a5a;
  color: #e8f4f8;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: none;
  cursor: pointer;
}
.call-effects-opt[aria-checked="true"] {
  border-color: var(--accent);
  background: #1a4a5c;
  color: #9fe7f5;
}
.call-effects-opt-swatch {
  position: relative;
  min-height: 2.6rem;
  background: var(--swatch, #1a3040);
  color: #fff;
  text-shadow: 0 1px 2px #000a;
}
.call-effects-opt-swatch[data-effect="bg-navy"] {
  --swatch: #0a2239;
}
.call-effects-opt-swatch[data-effect="bg-teal"] {
  --swatch: #167d8e;
}
.call-effects-opt-swatch[aria-checked="true"] {
  box-shadow: inset 0 0 0 2px #9fe7f5aa;
  background: var(--swatch, #1a4a5c);
  color: #fff;
}
.call-effects-opt-thumb,
.call-effects-opt-upload {
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 0;
  height: auto;
  padding: 0;
  overflow: hidden;
  background: #0a1218;
  border-radius: 12px;
}
.call-effects-opt-thumb > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}
.call-effects-opt-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 0.35rem 0.4rem 0.3rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  text-align: left;
  background: linear-gradient(180deg, transparent 0%, #000c 100%);
  pointer-events: none;
}
.call-effects-opt-swatch .call-effects-opt-label {
  position: static;
  background: none;
  text-align: center;
  padding: 0;
  font-size: 0.84rem;
}
.call-effects-opt-thumb[aria-checked="true"],
.call-effects-opt-upload[aria-checked="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px #7ed4e888;
  background: #0a1218;
  color: #fff;
}
.call-effects-opt-upload {
  display: grid;
  place-items: center;
  gap: 0.15rem;
  background: #1a3040;
  color: #9fe7f5;
  border-style: dashed;
}
.call-effects-opt-upload .call-effects-opt-label {
  position: static;
  background: none;
  color: inherit;
  text-align: center;
  padding: 0;
  font-size: 0.78rem;
}
.call-effects-upload-plus {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: inherit;
}
.call-effects-bg-remove {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  z-index: 2;
  width: 1.55rem;
  height: 1.55rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #000a;
  color: #e8f4f8;
  cursor: pointer;
  box-shadow: none;
}
.call-effects-bg-remove::before {
  content: "";
  display: block;
  width: 0.85rem;
  height: 0.85rem;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.call-effects-opt.is-unsupported,
.call-effects-opt-upload.is-unsupported {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.35);
}
.call-effects-opt.is-unsupported[aria-checked="true"] {
  border-color: #2f4a5a;
  box-shadow: none;
}
.call-effects-unsup {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #f0b4a8;
  line-height: 1.15;
}
.call-effects-opt:not(.call-effects-opt-thumb):not(.call-effects-opt-swatch):not(.call-effects-opt-upload) .call-effects-unsup,
.call-effects-opt:not(.call-effects-opt-thumb):not(.call-effects-opt-swatch):not(.call-effects-opt-upload) > .call-effects-unsup {
  display: block;
}
.call-effects-unsup-badge {
  position: absolute;
  inset: auto 0.35rem 1.55rem 0.35rem;
  z-index: 2;
  padding: 0.15rem 0.3rem;
  border-radius: 6px;
  background: #000c;
  color: #f0b4a8;
  font-size: 0.62rem;
  font-weight: 800;
  text-align: center;
  pointer-events: none;
}
.call-effects-opt-upload.is-unsupported .call-effects-upload-plus {
  opacity: 0.5;
}
.call-overlay.is-open.minimized .call-effects-menu {
  display: none !important;
}
.camera-effect-preview {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.camera-effect-status {
  margin: 0;
  min-height: 1.35em;
}
.camera-effect-stage {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: min(48dvh, 400px);
  border-radius: 14px;
  overflow: hidden;
  background: #0a1218;
  border: 1px solid var(--border);
}
.camera-effect-stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  background: #000;
}
.camera-effect-stage video.no-mirror {
  transform: none;
}
.camera-effect-preview .camera-effect-chooser {
  padding: 0.7rem 0.75rem 0.8rem;
  border-radius: 14px;
  background: #132833;
  border: 1px solid var(--border);
}
.caption-preview {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.caption-preview-stage {
  min-height: 7.5rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: #0a1620;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  text-align: center;
}
.caption-preview-text {
  margin: 0;
  max-width: 36rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.45;
  color: #f3f8fb;
  text-wrap: balance;
}
#local-video.no-mirror {
  transform: none;
}
#call-expand-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M9 21H3v-6'/%3E%3Cpath d='M21 3l-7 7'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M9 21H3v-6'/%3E%3Cpath d='M21 3l-7 7'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/svg%3E");
}
#hangup-btn {
  background: var(--danger);
  background-image: none;
  color: white;
  box-shadow: 0 4px 14px #e85d6f44;
}
#accept-call-btn {
  margin-right: 0.4rem;
}
.video-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
}
#local-video {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: min(132px, 28vw);
  height: min(176px, 36vw);
  object-fit: cover;
  border-radius: 12px;
  background: #111;
  border: 2px solid #ffffffaa;
  box-shadow: 0 2px 10px #000a;
  transform: scaleX(-1);
  z-index: 3;
}
.video-stage.solo-local #remote-video {
  display: none !important;
}
.video-stage.solo-local #local-video {
  position: static;
  right: auto;
  bottom: auto;
  width: min(720px, 90vw);
  height: auto;
  min-height: 220px;
  max-height: 50dvh;
  border-radius: 14px;
  border: none;
  box-shadow: none;
  display: block;
  object-fit: cover;
}
.video-stage.max {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  height: 100svh;
  max-width: none;
  z-index: 60;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: #000;
}
.video-stage.max.solo-local #local-video {
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  border-radius: 0;
  object-fit: cover;
}
.video-stage.max #remote-video {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
}
.video-stage.max:not(.solo-local) #local-video {
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  width: min(160px, 30vw);
  height: min(214px, 40vw);
}
.call-overlay.is-open.is-video-max {
  overflow: visible;
  background: #000;
  z-index: 150;
  place-items: stretch;
}
.call-overlay.is-open.is-video-max .call-box {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  display: grid;
  place-items: center;
  position: relative;
}
.call-overlay.is-open.is-video-max #call-status,
.call-overlay.is-open.is-video-max .call-effects-menu,
.call-overlay.is-open.is-video-max .call-e2e:not(.call-e2e-float) {
  display: none !important;
}
/* Keep mute / flip / hangup reachable over the maximized feed. */
.call-overlay.is-open.is-video-max .call-actions {
  display: flex !important;
  position: absolute;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 70;
  margin: 0;
  padding: 0.45rem 0.65rem;
  border-radius: 18px;
  background: #111b21cc;
  border: 1px solid #ffffff22;
  box-shadow: 0 8px 24px #000a;
  backdrop-filter: blur(8px);
  max-width: calc(100% - 1rem);
}
.call-overlay.is-open.is-video-max .call-captions {
  bottom: max(5.5rem, calc(env(safe-area-inset-bottom, 0px) + 4.5rem));
}
.call-overlay.is-open.is-video-max .video-fs-btn {
  z-index: 70;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
}
#call-flip-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 19H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5'/%3E%3Cpath d='M13 5h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M18 2v4h-4'/%3E%3Cpath d='m22 2-4 4'/%3E%3Cpath d='M6 22v-4h4'/%3E%3Cpath d='m2 22 4-4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 19H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5'/%3E%3Cpath d='M13 5h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M18 2v4h-4'/%3E%3Cpath d='m22 2-4 4'/%3E%3Cpath d='M6 22v-4h4'/%3E%3Cpath d='m2 22 4-4'/%3E%3C/svg%3E");
}
#remote-video {
  width: min(720px, 90vw);
  min-height: 220px;
  max-height: 50dvh;
  background: #000;
  border-radius: 14px;
  display: block;
  object-fit: contain;
}
.video-fs-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  background: #111b21cc;
  color: #e9edef;
  border: 1px solid #ffffff33;
  box-shadow: 0 1px 4px #0008;
  z-index: 2;
}
.video-fs-btn::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin: 11px auto;
  border: 2px solid currentColor;
  border-radius: 3px;
}
.video-fs-btn.is-max::before {
  width: 12px;
  height: 12px;
  margin: 13px auto;
  box-shadow: 3px 3px 0 -1px #111b21cc, 3px 3px 0 0 currentColor;
  border-radius: 2px;
}
.video-fs-btn:hover { filter: brightness(1.15); }

.quick-launch {
  --ql-ink: #1a2b36;
  --ql-muted: #6b7f8c;
  --ql-line: #d5dee4;
  --ql-accent: #0b6f8f;
  --ql-panel: #f7fafc;
  --ql-card: #ffffff;
  --ql-tab-w: 1.85rem;
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 28;
  max-height: calc(100dvh - 2rem);
  transform: translateY(-50%);
  pointer-events: none;
}
.quick-launch[hidden] {
  display: none !important;
}
.quick-launch-drawer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  max-height: inherit;
  pointer-events: none;
  will-change: transform;
  transform: translateX(calc(100% - var(--ql-tab-w)));
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.quick-launch.is-open .quick-launch-drawer {
  transform: translateX(0);
}
.quick-launch-toggle {
  pointer-events: auto;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: var(--ql-tab-w);
  min-height: 6.6rem;
  margin: 0;
  padding: 0.7rem 0.2rem 0.85rem;
  border: 1px solid #c5d4dc;
  border-right: 0;
  border-radius: 14px 0 0 14px;
  background: #f4f8fa;
  color: var(--ql-accent);
  box-shadow: -4px 6px 18px #0006;
  cursor: pointer;
  z-index: 1;
}
.quick-launch-toggle::before {
  content: none;
}
.quick-launch-bolt {
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13 2 4.8 13.2c-.35.48-.01 1.15.58 1.15H11l-1 7.8 8.8-12.1c.37-.5.02-1.2-.58-1.2H13l0-6.85z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13 2 4.8 13.2c-.35.48-.01 1.15.58 1.15H11l-1 7.8 8.8-12.1c.37-.5.02-1.2-.58-1.2H13l0-6.85z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.quick-launch-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  user-select: none;
}
.quick-launch-toggle:hover,
.quick-launch-toggle:focus-visible {
  color: #085a74;
  background: #ffffff;
  border-color: #9eb8c4;
  filter: none;
  outline: none;
  box-shadow: -6px 8px 22px #0007;
}
.quick-launch.is-open .quick-launch-toggle[aria-expanded="true"] {
  color: #ffffff;
  background: var(--ql-accent);
  border-color: #085a74;
  filter: none;
  border-radius: 14px 0 0 14px;
  box-shadow: -2px 4px 14px #0004;
}
.quick-launch-toggle:focus-visible {
  outline: 2px solid var(--ql-accent);
  outline-offset: 2px;
}
.quick-launch-panel {
  --ql-ink: var(--text);
  --ql-muted: var(--muted);
  --ql-line: var(--border);
  --ql-accent: var(--accent-2);
  --ql-panel: var(--panel);
  --ql-card: var(--panel-2);
  pointer-events: none;
  flex: 0 0 auto;
  width: min(44rem, calc(100vw - 2.4rem));
  height: min(88dvh, 760px);
  max-height: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: .75rem;
  border: 1px solid var(--ql-line);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  background: var(--ql-panel);
  color: var(--ql-ink);
  box-shadow: -10px 0 28px #0007;
  overflow: hidden;
}
.quick-launch.is-open .quick-launch-panel {
  pointer-events: auto;
}
.quick-launch-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  flex: 0 0 auto;
}
.quick-launch-head-text {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
.quick-launch-title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ql-ink);
  line-height: 1.2;
}
.quick-launch-user {
  font-size: 0.8rem;
  color: var(--ql-muted);
  line-height: 1.3;
}
.quick-launch-close-btn {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ql-line);
  border-radius: 10px;
  background: var(--ql-card);
  color: var(--ql-ink);
  box-shadow: none;
  cursor: pointer;
}
.quick-launch-close-btn::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.quick-launch-close-btn:hover,
.quick-launch-close-btn:focus-visible {
  background: var(--ql-panel);
  filter: none;
  outline: none;
}
.ql-search-bar {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  flex: 0 0 auto;
  padding: 0.2rem 0.2rem 0.2rem 0.55rem;
  border-radius: 12px;
  border: 1.5px solid var(--ql-line);
  background: var(--ql-card);
}
.ql-search-input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  width: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0.45rem 0.25rem;
  font-size: 0.88rem;
  color: var(--ql-ink);
}
.ql-search-input::placeholder {
  color: var(--ql-muted);
}
.ql-search-input:hover,
.ql-search-input:focus {
  border: 0;
  box-shadow: none;
  background: transparent;
  outline: none;
}
.ql-search-go {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #002d50 0%, #0b6f8f 48%, #1a8fa8 120%);
  box-shadow: 0 3px 10px #002d5044;
}
.ql-search-go::before {
  content: "";
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  margin: 0 auto;
  background: #e8f8fc;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ql-search-go.is-bump {
  animation: chat-search-bump 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.ql-search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.ql-search-results li {
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--ql-line);
  border-radius: 10px;
  background: var(--ql-card);
  color: var(--ql-ink);
  cursor: pointer;
}
.ql-search-results li:hover,
.ql-search-results li:focus-visible {
  border-color: var(--ql-accent);
  background: var(--ql-panel);
  outline: none;
}
.ql-search-results .ql-hit-who {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.ql-search-results .ql-hit-snip {
  font-size: 0.78rem;
  color: var(--ql-muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ql-search-results .search-hit-mark {
  color: var(--ql-accent);
  font-weight: 800;
}
.ql-search-empty {
  padding: 0.75rem 0.35rem;
  color: var(--ql-muted);
  font-size: 0.85rem;
  text-align: center;
  border: 0 !important;
  background: transparent !important;
  cursor: default !important;
}
.quick-launch-search {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 0;
  flex: 1 1 auto;
}

.mobile-only { display: none !important; }
.desktop-only { display: initial; }

.back-icon-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}

/* —— Desktop layout (≥801px) —— */
@media (min-width: 801px) {
  html[data-layout="desktop"] .desktop-only,
  .desktop-only { display: initial; }

  .sidebar-head,
  .thread-head {
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    max-height: var(--topbar-height);
    padding: 0 0.85rem;
  }

  .thread-actions .ghost {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .composer {
    flex-wrap: nowrap;
    height: calc(var(--bottombar-height) + var(--safe-bottom));
    min-height: calc(var(--bottombar-height) + var(--safe-bottom));
    max-height: calc(var(--bottombar-height) + var(--safe-bottom));
  }

  .sidebar-tools {
    height: calc(var(--bottombar-height) + var(--safe-bottom));
    min-height: calc(var(--bottombar-height) + var(--safe-bottom));
    max-height: calc(var(--bottombar-height) + var(--safe-bottom));
  }

  .modal {
    padding: 1.5rem;
  }
  .modal-card {
    width: min(480px, 100%);
    padding: 1.75rem 1.9rem 1.5rem;
    border-radius: 22px;
    max-height: min(88dvh, 900px);
  }
  .modal-card h2 {
    margin-bottom: 1rem;
    font-size: 1.4rem;
    font-weight: 800;
  }
  .modal-card-wide {
    width: min(680px, 100%);
  }
  .modal-card-profile {
    width: min(560px, 100%);
  }
  .modal-card-profile #modal-body,
  .modal-card-profile .modal-body {
    padding-right: 1.1rem;
  }
  .modal-actions {
    margin-top: 1.25rem;
    gap: 0.65rem;
  }
  .modal-actions button {
    min-height: 2.55rem;
    padding-inline: 1.1rem;
    font-size: 0.98rem;
  }
  .profile-hero {
    gap: 1.35rem;
    padding-bottom: 1.25rem;
    margin-bottom: 0.25rem;
  }
  .profile-avatar-preview,
  .profile-avatar-slot {
    width: 120px;
    height: 120px;
  }
  .profile-avatar-fallback {
    font-size: 2.5rem;
  }
  .profile-email {
    font-size: 1.12rem;
  }
  .profile-section {
    padding: 1.15rem 0 0.25rem;
  }
  .profile-section-title {
    font-size: 0.82rem;
    margin-bottom: 0.55rem;
  }
  .profile-section .check-row {
    font-size: 1rem;
    gap: 0.5rem;
  }
  .profile-hint {
    font-size: 0.9rem;
  }
  .profile-photo-actions button:not(.profile-avatar-remove),
  .mfa-actions button {
    min-height: 2.55rem;
    padding-inline: 1rem;
    font-size: 0.95rem;
  }
  .profile-avatar-remove {
    width: 2.55rem;
    height: 2.55rem;
    min-height: 2.55rem;
  }
  .invite-panel {
    gap: 1rem;
  }
  .invite-block {
    padding: 1.15rem 1.2rem 1.25rem;
    border-radius: 18px;
  }
  .invite-tab-panel.invite-block {
    border-radius: 0;
    padding: 1.15rem 1.2rem 1.25rem;
  }
  .invite-block-title {
    font-size: 1.12rem;
  }
  .invite-block-hint {
    font-size: 0.92rem;
  }
  .invite-code-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
  }
  .invite-note-field {
    grid-column: 1 / -1;
  }
  .invite-pick-btn,
  .invite-email-actions button {
    min-height: 2.55rem;
    font-size: 0.95rem;
  }
  .invite-share-btn {
    min-height: 3rem;
    font-size: 1rem;
    padding: 0.8rem 1rem;
  }
  .invite-row {
    padding: 0.85rem 1rem;
  }
  .invite-list {
    max-height: min(260px, 34dvh);
  }
}

/* —— Mobile layout (≤800px) —— */
@media (max-width: 800px) {
  .mobile-only { display: grid !important; }
  .desktop-only { display: none !important; }

  /* Keep jump FABs off the right edge so they don't cover delete/reply on your bubbles. */
  .msg-jump {
    right: auto;
    left: 0.55rem;
  }

  .quick-launch {
    top: 50%;
    right: 0;
    --ql-tab-w: 1.7rem;
  }
  .quick-launch-toggle {
    min-height: 6.1rem;
    padding: 0.6rem 0.15rem 0.75rem;
  }

  .modal-card,
  .modal-card-wide,
  .modal-card-profile {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 1rem);
    border-radius: 16px;
  }
  .modal-actions button {
    min-height: 2.6rem;
  }
  .new-group-form {
    grid-template-columns: 1fr;
  }

  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
  }
  .sidebar {
    grid-column: 1;
    grid-row: 1;
    border-right: 0;
  }
  .thread {
    grid-column: 1;
    grid-row: 1 / -1;
  }
  .sidebar-tools {
    grid-column: 1;
    grid-row: 2;
    border-right: 0;
    justify-content: space-evenly;
    height: calc(var(--bottombar-height) + var(--safe-bottom));
    min-height: calc(var(--bottombar-height) + var(--safe-bottom));
    max-height: calc(var(--bottombar-height) + var(--safe-bottom));
    padding: 0 0.55rem;
    padding-bottom: var(--safe-bottom);
  }

  .app.chat-open .sidebar,
  .app.chat-open .sidebar-tools {
    display: none !important;
  }
  .app:not(.chat-open) #thread,
  .app:not(.chat-open) #thread-empty {
    display: none !important;
  }

  .thread-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
    height: auto;
    min-height: var(--topbar-height);
    max-height: none;
    padding: max(0.5rem, var(--safe-top)) 0.65rem 0.5rem;
    overflow: visible;
  }
  #back-btn {
    flex: 0 0 auto;
    order: 0;
  }
  .thread-head .thread-avatar {
    flex: 0 0 auto;
    order: 1;
    width: 36px;
    height: 36px;
    align-self: center;
  }
  .thread-heading {
    flex: 1 1 0;
    order: 2;
    min-width: 0;
  }
  .thread-actions {
    order: 3;
    flex: 1 0 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
    gap: 0.3rem 0.2rem;
    width: 100%;
    max-width: none;
    overflow: visible;
    justify-items: center;
    align-items: center;
    padding-top: 0.4rem;
    margin-top: 0.15rem;
    border-top: 1px solid var(--border);
  }
  .thread-actions .ghost:not(.icon-btn) {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .thread-actions .icon-btn {
    flex: none;
    width: 40px;
    height: 40px;
    min-width: 40px;
    margin: 0;
    justify-self: center;
  }
  .thread-actions .icon-btn[hidden] {
    display: none !important;
  }
  .sidebar-head {
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    max-height: var(--topbar-height);
    padding: 0 0.85rem;
  }

  .composer {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    grid-template-areas:
      "text text text text text text"
      "attach camera giphy emoji voice send";
    align-items: center;
    column-gap: 0.3rem;
    row-gap: 0.4rem;
    height: auto;
    min-height: calc(var(--bottombar-height) + var(--safe-bottom));
    max-height: none;
    padding: 0.45rem 0.55rem;
    padding-bottom: max(0.45rem, var(--safe-bottom));
    overflow: visible;
  }
  .composer textarea,
  .compose-field textarea {
    grid-area: unset;
    width: 100%;
    max-width: 100%;
    height: 2.5rem;
    min-height: 2.5rem;
    max-height: 2.5rem;
  }
  .compose-field {
    grid-area: text;
    width: 100%;
  }
  #attach-btn,
  #camera-btn,
  #giphy-btn,
  #emoji-btn,
  #voice-btn {
    justify-self: center;
  }
  #attach-btn { grid-area: attach; }
  #camera-btn { grid-area: camera; }
  #giphy-btn { grid-area: giphy; }
  #emoji-btn { grid-area: emoji; }
  #voice-btn { grid-area: voice; }
  .composer button[type="submit"] {
    grid-area: send;
    justify-self: stretch;
    padding: 0 0.85rem;
    height: 2.5rem;
    min-width: 4.25rem;
  }

  .sidebar-actions {
    flex-wrap: nowrap;
  }
  .new-compose-side {
    font-size: 0.78rem;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }
  .new-compose-thumb {
    width: min(46%, 6.75rem);
  }

  .chat-list .preview,
  .chat-main strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
  }

  .bubble {
    max-width: min(88%, 560px);
  }
  .bubble.kind-voice,
  .bubble.kind-audio {
    width: min(94vw, 100%);
    max-width: min(94%, 520px);
    min-width: min(280px, 90%);
  }
  .audio-player-play {
    width: 56px;
    height: 56px;
  }
  .voice-msg,
  .voice-msg audio {
    width: 100%;
    max-width: none;
  }

  .auth-card {
    width: min(420px, calc(100% - 0.5rem));
    padding: 1.1rem;
  }
  .brand-lockup {
    width: min(220px, 72vw);
  }
}

.ctx-menu-icon.lists-icon-btn {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m3%206%202%202%203-4M11%206h10M3%2013h4M11%2013h10M3%2020h4M11%2020h10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m3%206%202%202%203-4M11%206h10M3%2013h4M11%2013h10M3%2020h4M11%2020h10'/%3E%3C/svg%3E");
}

/* Shopping lists share the right-edge rail with Search. */
.quick-launch-tabs { display: flex; flex: 0 0 var(--ql-tab-w); flex-direction: column; gap: .4rem; width: var(--ql-tab-w); }
.quick-launch-tabs .quick-launch-toggle { min-height: clamp(4rem, 20dvh, 6.6rem); }
.shopping-launch-panel { overflow-y: auto; background: var(--panel); color: var(--text); }
.shopping-launch-panel > * { flex-shrink: 0; }
.shopping-launch-panel .quick-launch-close-btn { background-color: var(--panel-2); color: var(--text); }
.shared-lists-embedded { position: static; width: 100%; max-height: none; overflow: visible; margin: 0; padding: .35rem; border: 0; box-shadow: none; }
.shopping-pin-row, .chat-list li.shopping-pin-row { display: flex; align-items: center; gap: .4rem; padding: .5rem; border-bottom: 1px solid var(--border); background: var(--panel-2); border-radius: 9px; margin-bottom: .35rem; }
.shopping-pin-open { display: flex; align-items: center; gap: .55rem; flex: 1; min-width: 0; text-align: left; background: transparent; color: var(--text); padding: .35rem; border: 0; }
.shopping-pin-open > span:first-child { font-size: 1.4rem; }
.shopping-pin-open > span:last-child { min-width: 0; }
.shopping-pin-open strong, .shopping-pin-open small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shopping-pin-open small { color: var(--muted); }
.shopping-pin-remove { min-width: 2.75rem; min-height: 2.75rem; font-size: 1.3rem; }
.shopping-new-list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.shopping-new-list-tools select { flex: 1; min-width: 8rem; max-width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: .5rem; }
#shopping-pinned-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .4rem; }
#shopping-pinned-lists .shopping-pin-row { border: 2px solid var(--border); margin: 0; }
#shopping-pinned-lists .shopping-pin-row.is-expanded { border-color: #53c9af; }
.shared-lists-embedded .shared-lists-privacy { display: none; }
.shared-lists-embedded .shared-lists-header h2 { flex: 1 1 100%; overflow-wrap: anywhere; font-size: 1.1rem; }
.shared-lists-embedded .shared-lists-header { position: static; justify-content: flex-start; gap: .35rem; }
.shared-lists-embedded .shared-lists-header button { padding: .4rem .65rem; min-height: 2.75rem; }
.shopping-launch-panel:has(.shared-lists-embedded[open]) > .muted { display: none; }
#shopping-pinned-lists { display: flex; overflow-x: auto; padding-bottom: .25rem; }
#shopping-pinned-lists .shopping-pin-row { flex: 0 0 12rem; min-width: 0; }
.shopping-pin-open[aria-expanded=true]::after { content: '▾'; margin-left: auto; }
@media (max-width: 600px) {
  .shopping-launch-panel { gap: .5rem; padding: .55rem; }
  .shopping-new-list-tools { gap: .3rem; }
  .shopping-new-list-tools label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .shopping-new-list-tools select { flex: 1 1 100%; }
  .shopping-new-list-tools button { padding: .4rem .65rem; min-height: 2.75rem; }
}
#shopping-pinned-lists .shopping-pin-row { flex-basis: 14rem; }
#shopping-pinned-lists .shopping-pin-open > span:first-child { display: none; }
#shopping-pinned-lists .shopping-pin-open strong { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* Current purchases are separate from reusable recent/search suggestions. */
.shopping-current h3 { margin: 0; }
.shared-list-items.shopping-current-cards li.shopping-current-item { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); overflow: hidden; }
.shopping-current-cards .shopping-current-open { flex: 1; width: 100%; border: 0; border-radius: 0; min-height: 6rem; user-select: none; -webkit-touch-callout: none; }
.shopping-current-cards .shopping-item-emoji { font-size: 1.9rem; }
.shopping-current-controls { display: flex; border-top: 1px solid var(--border); }
.shopping-current-controls button { flex: 1; border: 0; border-radius: 0; background: var(--panel-2); color: var(--text); }
.shopping-current-controls button:last-child { flex: 0 0 2.5rem; font-size: 1.3rem; }
.shopping-current-cards .shopping-empty { grid-column: 1 / -1; border: 0; }
.shopping-card[data-in-list=true]:disabled { opacity: 1; cursor: default; }
.shopping-item-menu { position: fixed; margin: 0; padding: .4rem; width: min(15rem, calc(100vw - 1rem)); max-height: calc(100dvh - 1rem); overflow: auto; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.shopping-item-menu::backdrop { background: transparent; }
.shopping-item-menu button { display: block; width: 100%; min-height: 2.75rem; text-align: left; background: transparent; color: var(--text); border: 0; border-radius: 8px; padding: .6rem; }
.shopping-item-menu button:hover, .shopping-item-menu button:focus-visible { background: var(--panel-2); }
.shopping-item-details { width: min(32rem, calc(100% - 1.5rem)); }
.shopping-item-details h2 { overflow-wrap: anywhere; min-width: 0; }
.shopping-detail-picture { text-align: center; font-size: 5rem; line-height: 1.4; margin: .5rem 0; background: var(--panel-2); border-radius: 14px; }
.shopping-item-languages { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: .4rem .75rem; }
.shopping-item-languages dt { color: var(--muted); }
.shopping-item-languages dd { margin: 0; overflow-wrap: anywhere; }
.shopping-item-languages p { grid-column: 1 / -1; }
.shopping-item-details textarea { width: 100%; resize: vertical; min-height: 5rem; font: inherit; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: .6rem; }
.shopping-trip { position: fixed; inset: 0; margin: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; padding: max(.8rem, env(safe-area-inset-top)) max(.8rem, env(safe-area-inset-right)) max(.8rem, env(safe-area-inset-bottom)) max(.8rem, env(safe-area-inset-left)); border: 0; background: var(--bg); color: var(--text); overflow: hidden; }
.shopping-trip[open] { display: flex; flex-direction: column; gap: .5rem; }
.shopping-trip::backdrop { background: var(--bg); }
.shopping-trip-header { display: flex; justify-content: space-between; align-items: center; gap: .7rem; flex-shrink: 0; }
.shopping-trip-header h2 { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 1.2rem; }
.shopping-trip-header button { min-height: 2.75rem; flex-shrink: 0; }
.shopping-trip > p { margin: .2rem 0; flex-shrink: 0; }
.shopping-trip-items { flex: 1; min-height: 0; max-height: none; overflow: auto; align-content: start; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); grid-auto-rows: max-content; }
.shopping-trip-items .shopping-current-controls,
.shopping-trip-items .shopping-current-open > span { flex-shrink: 0; }
.shopping-trip-items .shopping-current-open { min-height: 8rem; }
.shopping-trip-items .shopping-item-emoji { font-size: 2.5rem; }
@media (max-width: 400px) {
 .shopping-trip-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .shopping-trip-header { flex-wrap: wrap; }
}

.shopping-recent-cards .shopping-card, .shopping-card[data-recent] { user-select: none; -webkit-touch-callout: none; }

/* Prevent native selection/callouts on every descendant of touch-menu cards. */
.shopping-card, .shopping-card *, .shopping-current-item, .shopping-current-item *, .shopping-item-menu, .shopping-item-menu * {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

.community-shopping-dialog { width: min(42rem, calc(100% - 1rem)); }
.community-shopping-dialog form, .community-shopping-dialog label { display: grid; gap: .5rem; }
.community-shopping-dialog form { gap: 1rem; }
.community-shopping-dialog input, .community-shopping-dialog textarea, .community-shopping-dialog select {
  width: 100%; min-width: 0; font: inherit; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px; padding: .6rem;
}
.community-item-list { display: grid; gap: .8rem; }
.community-item { border: 1px solid var(--border); border-radius: 12px; padding: .8rem; overflow-wrap: anywhere; }
.community-item h3 { margin-top: 0; }
.community-item p { white-space: pre-wrap; }
.community-item .shared-lists-toolbar { margin-top: .6rem; }

/* Keep the lists benefit visible on phones, where the desktop story is hidden. */
.auth-benefits .auth-benefit-lists { border-left: 3px solid #257d70; }
.auth-shopping-highlight { margin: 0 0 1rem; padding: .75rem .85rem; border: 1px solid var(--border); border-left: 3px solid #53c9af; border-radius: 12px; background: var(--panel-2); }
.auth-shopping-highlight strong { display: block; font-size: .95rem; }
.auth-shopping-highlight p { margin: .35rem 0 0; font-size: .85rem; line-height: 1.45; color: var(--muted); }
@media (min-width: 900px) { .auth-shopping-highlight { display: none; } }

.shopping-quantity-badge { display: inline-block; align-self: center; font-weight: 800; padding: .12rem .5rem; border-radius: 1rem; color: var(--text); background: var(--panel-2); }
.shopping-quantity-dialog { width: min(24rem, calc(100% - 1.5rem)); }
.shopping-quantity-dialog h2 { overflow-wrap: anywhere; min-width: 0; }
.shopping-quantity-dialog form, .shopping-quantity-dialog label { display: grid; gap: .65rem; }
.shopping-quantity-dialog input { width: 100%; min-width: 0; padding: .7rem; font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; }
.shopping-quantity-dialog select { width: 100%; min-width: 0; padding: .7rem; font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; }

.member-updates-launch { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; margin: .3rem .6rem; padding: .45rem .7rem; min-height: 2.4rem; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; text-align: left; }
.member-updates-launch[hidden] { display: none; }
#member-updates-badge { margin-left: auto; background: #0d778c; color: white; border-radius: 1rem; padding: .1rem .5rem; }
.member-updates-dialog { width: min(46rem, calc(100% - 1rem)); }
.member-updates-dialog h2, .member-updates-dialog h3 { overflow-wrap: anywhere; }
.shared-lists-dialog .member-updates-preference { display: flex; flex-direction: row; align-items: center; gap: .6rem; margin: .8rem 0; }
.member-updates-preference input { width: auto; flex-shrink: 0; }
.member-update-edition { border-top: 1px solid var(--border); margin-top: 1.2rem; padding-top: .5rem; }
.member-update-entry { margin: 1rem 0 1.5rem; }
.member-update-entry p { white-space: pre-wrap; line-height: 1.55; }
.member-update-entry figure { margin: .8rem 0; }
.member-update-entry img { display: block; max-width: 100%; max-height: 32rem; width: auto; height: auto; border: 1px solid var(--border); border-radius: 12px; }
.member-update-entry figcaption { margin-top: .35rem; color: var(--muted); font-size: .85rem; }

.group-picture-editor { border-bottom: 1px solid var(--border); padding-bottom: 1rem; margin-bottom: 1rem; }
.group-picture-editor h3 { overflow-wrap: anywhere; }
.group-picture-preview img,.group-picture-preview span { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.group-picture-preview span { display: grid; place-items: center; background: var(--panel-2); font-size: 2rem; }
.group-picture-preview [hidden],.group-icon-grid[hidden] { display: none; }
.group-picture-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.group-icon-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(4.5rem,1fr)); gap: .5rem; margin-top: .75rem; max-height: min(22rem,50dvh); overflow-y: scroll; scrollbar-gutter: stable; padding: .25rem; touch-action: pan-y; }
.group-icon-grid button { min-width: 0; min-height: 4.5rem; padding: .4rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; background: var(--panel-2); }
.group-icon-symbol { font-size: 1.7rem; font-family: 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; }
.group-icon-label { font-size: .75rem; line-height: 1.2; overflow-wrap: anywhere; }

.member-update-preview-notice { border-left: 3px solid #53c9af; padding: .6rem .8rem; background: var(--panel-2); }
.member-update-alert-preview { border: 1px solid var(--border); border-radius: 12px; padding: .8rem; margin: 1rem 0; }
.member-update-alert-preview h3 { margin-top: 0; }

.auth-updates-link a,
.auth-updates-link a:visited,
.invite-options a,
.invite-options a:visited {
  color: #8edcf0;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-updates-link a:hover,
.invite-options a:hover { color: #fff; }
.auth-updates-link a:focus-visible,
.invite-options a:focus-visible {
  outline: 2px solid #8edcf0;
  outline-offset: 4px;
  border-radius: 2px;
}
.auth-install { margin: 0 0 .75rem; }
.install-dialog { width: min(38rem,calc(100% - 1rem)); }
.install-dialog label { margin-top: 1rem; }
.install-dialog li { margin-bottom: .7rem; overflow-wrap: anywhere; }
.install-dialog p { overflow-wrap: anywhere; }
.install-dialog ol { padding-left: 1.4rem; }

.preferred-name-turquoise { color: #40e0d0; }
.preferred-name-underline { text-decoration-line: underline; text-underline-offset: .2em; text-decoration-thickness: 2px; }
.name-pronunciation-audio { display: block; width: 100%; max-width: 340px; margin: .7rem 0; }
.name-pronunciation-audio[hidden] { display: none; }

.startup-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  background: var(--bg);
  color: var(--text);
}
.startup-screen img { border-radius: 18px; }

.member-update-schedule { padding: .8rem; margin: 1rem 0; border: 1px solid var(--border); border-radius: 12px; }
.member-update-schedule label { display: block; margin-bottom: .75rem; }
.member-update-schedule input, .member-update-schedule select { display: block; width: 100%; min-width: 0; }

.lists-expand-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; }
.shared-lists-dialog.shared-lists-expanded {
  position: fixed; inset: 0; margin: 0; width: 100%; height: 100dvh;
  max-width: none; max-height: none; border: 0; border-radius: 0;
  padding: max(.8rem, env(safe-area-inset-top)) max(.8rem, env(safe-area-inset-right)) max(.8rem, env(safe-area-inset-bottom)) max(.8rem, env(safe-area-inset-left));
}
html:has(.shared-lists-expanded[open]), body:has(.shared-lists-expanded[open]) { overflow: hidden; }
#shared-lists-dialog > .shared-lists-header { justify-content: flex-start; }
#shared-lists-dialog > .shared-lists-header h2 { margin-right: auto; overflow-wrap: anywhere; }

#shopping-launch-panel > .quick-launch-head { align-items: center; gap: .5rem; }
#shopping-launch-panel > .quick-launch-head > strong { margin-right: auto; }
.shopping-launch-fullscreen { position: fixed; inset: 0; margin: 0; padding: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; border: 0; background: var(--panel); color: var(--text); }
.shopping-launch-fullscreen #shopping-launch-panel { width: 100%; height: 100%; max-height: none; pointer-events: auto; padding: max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left)); }
.shopping-launch-fullscreen .quick-launch-head { position: sticky; top: -.75rem; background: var(--panel); z-index: 3; padding: .4rem 0; }
.shopping-launch-fullscreen #shared-lists-expand { display: none; }
.shared-lists-expanded .shopping-cards,
.shopping-launch-fullscreen .shopping-cards { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); max-height: none; overflow: visible; }
.shopping-launch-fullscreen #shopping-pinned-lists { max-width: 100%; }
html:has(.shopping-launch-fullscreen[open]), body:has(.shopping-launch-fullscreen[open]) { overflow: hidden; }
@media (min-width: 850px) {
  .shopping-launch-fullscreen .shopping-workspace { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(0, 2.5fr); align-items: start; gap: .8rem; }
  .shopping-launch-fullscreen .shopping-workspace > * { grid-column: 1; min-width: 0; margin-top: 0; }
  .shopping-launch-fullscreen .shopping-workspace > .shopping-main-catalog { grid-column: 2; grid-row: 1 / span 7; }
  .shopping-launch-fullscreen .shopping-current-cards { max-height: 35dvh; overflow-y: auto; }
}

.call-effects-menu-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; position: sticky; top: -.7rem; z-index: 5; background: #132833; padding: .35rem 0; }
/* Shared sizing for the three admin feature switches, independent of form styles. */
label.admin-feature-toggle{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.6rem}
label.admin-feature-toggle > input[type="checkbox"]{box-sizing:border-box;width:1.2rem;height:1.2rem;min-width:1.2rem;min-height:1.2rem;max-width:1.2rem;max-height:1.2rem;flex:0 0 1.2rem;margin:0;padding:0;accent-color:var(--accent)}

/* Admin branding previews and replacement controls. */
.branding-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.branding-card { min-width: 0; padding: .75rem; border: 1px solid var(--border); border-radius: 10px; }
.branding-card h4 { margin: 0 0 .5rem; }
.branding-card > img { display: block; width: 100%; height: 8rem; object-fit: contain; margin-bottom: .75rem; background: var(--bg); border-radius: 6px; }
.branding-card input { min-width: 0; padding: .4rem; }
.branding-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.branding-actions button { min-height: 44px; }
.branding-card [role="status"] { overflow-wrap: anywhere; }
.event-template-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.event-template-row > button:first-child { flex: 1 1 12rem; min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: start; }
.event-template-row > button { min-height: 44px; }

#events-launch-panel > .quick-launch-head { align-items: center; }
#events-launch-panel > .quick-launch-head > strong { margin-right: auto; }
#events-launch-create { display: grid; place-items: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; padding: 0; font-size: 1.5rem; line-height: 1; }

.admin-tabs { flex-wrap: wrap; margin-bottom: 1rem; }
.admin-panel [role="tabpanel"] { min-width: 0; }
.admin-content-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.profile-tabs { flex-wrap: wrap; margin-bottom: 1rem; }
.profile-panel [role="tabpanel"] { min-width: 0; }
.profile-panel .profile-field-label { min-width: 0; grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; }
.profile-panel .profile-field-label select { min-width: 0; }
.profile-panel .profile-field-label select { overflow: hidden; text-overflow: ellipsis; }
/* Safari's native select can paint long option text outside its box. */
.profile-panel .profile-field-label select { appearance: none; -webkit-appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23899da8' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .65rem center; }
/* Settings windows keep the same top edge as their tab content changes. */
.modal:has(#modal-body > :is(.admin-panel, .profile-panel)) {
  align-items: start;
}

/* Text fields share the main composer's in-field expand control. */
.editor-expand-field { position:relative;display:block;width:100%;min-width:0; }
.editor-expand-field > textarea { padding-right:5rem; }
.editor-expand-field > .field-clear-btn { right:2.45rem; }
.editor-expand-field > .compose-expand-btn { top:50%;margin:0;padding:0;min-height:2.5rem; }
.editor-expand-field > .compose-expand-btn.compose-collapse-btn { position:absolute;right:.1rem;transform:translateY(-50%); }

/* The same edit, save, and delete symbols across feature controls. */
button[data-command-icon]::before { content:"";display:inline-block;vertical-align:middle;width:1rem;height:1rem;margin-inline-end:.45rem;background:currentColor;mask:var(--command-icon) center/contain no-repeat;-webkit-mask:var(--command-icon) center/contain no-repeat; }
button.action-icon-only { display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;min-width:2.5rem;min-height:2.5rem;padding:0; }
button.action-icon-only::before { margin:0; }
button.action-icon-only[hidden] { display:none; }
button[data-command-icon="edit"] { --command-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2020h9%27%2F%3E%3Cpath%20d%3D%27M16.5%203.5a2.12%202.12%200%200%201%203%203L7%2019l-4%201%201-4%2012.5-12.5z%27%2F%3E%3C%2Fsvg%3E"); }
button[data-command-icon="save"] { --command-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M19%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h12l4%204v12a2%202%200%200%201-2%202z%27%2F%3E%3Cpath%20d%3D%27M7%203v6h10V3M7%2021v-8h10v8%27%2F%3E%3C%2Fsvg%3E"); }
button[data-command-icon="delete"] { --command-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%273%206%205%206%2021%206%27%2F%3E%3Cpath%20d%3D%27M19%206v14a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V6m3%200V4a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2%27%2F%3E%3Cline%20x1%3D%2710%27%20y1%3D%2711%27%20x2%3D%2710%27%20y2%3D%2717%27%2F%3E%3Cline%20x1%3D%2714%27%20y1%3D%2711%27%20x2%3D%2714%27%20y2%3D%2717%27%2F%3E%3C%2Fsvg%3E"); }

.shopping-personal-tools{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0}
.shopping-personal-row{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;border-bottom:1px solid var(--border);padding:.5rem 0}
.shopping-personal-row .shopping-pin-open{flex:1 1 12rem}
.shopping-notice{color:var(--accent-2);font-size:.8rem}
.personal-shopping-dialog form{display:flex;flex-direction:column;gap:.7rem}
.personal-shopping-dialog .user-pick{max-height:40dvh}

/* Keep checkbox controls beside their labels in every form and dialog.
   Long labels wrap beside the control rather than placing it on its own row. */
label:has(> input[type="checkbox"]) {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  min-width: 0;
}
label:has(> input[type="checkbox"]) > input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  min-width: 1.2rem;
  flex: 0 0 1.2rem;
  margin: 0;
  padding: 0;
}

/* Mobile chat content leaves a dedicated strip for the persistent RHS tabs. */
@media (max-width: 800px) {
  body { --mobile-rail-width: 1.7rem; }
  .quick-launch { --ql-tab-w: var(--mobile-rail-width); right: var(--safe-right); }
  body:has(#quick-launch:not([hidden])) .app {
    padding-right: calc(var(--safe-right) + var(--mobile-rail-width) + .4rem);
  }
}

.chat-section-tabs .chat-filter { min-width:0; flex:1 1 auto; padding-inline:.3rem; white-space:nowrap; }
.chat-filter-lines { width:1rem;height:1rem;vertical-align:middle;margin-left:.3rem; }
#chat-filter-current { display:block;font-size:.65rem; }
#chat-filter-current[hidden] { display:none; }
.chat-section-tabs [aria-disabled="true"] { cursor:default; }
.chat-section-tabs [data-coming-soon]:is(:hover,:focus-visible)::after {
 content:attr(data-coming-soon);position:absolute;top:100%;right:0;z-index:40;
 padding:.45rem .6rem;border:1px solid var(--border);border-radius:6px;
 background:var(--panel-2);color:var(--text);white-space:nowrap;box-shadow:var(--shadow);
}
.chat-section-tabs .chat-filter:is(:hover,:focus-visible) { z-index:2; }
.chat-section-placeholder h3 { margin-top:0; }

/* Unreleased section names are visible only to admins. Keep the placeholder tabs. */
.chat-section-tabs [data-chat-section][aria-disabled="true"] > span { visibility:hidden; }

/* Let multiword section labels wrap at spaces on narrow screens. */
.chat-section-tabs [data-chat-section] { white-space:normal; min-width:min-content; }

.member-update-schedule .member-updates-preference { display:flex; align-items:center; gap:.5rem; }
.member-update-schedule .member-updates-preference input { width:auto; flex:0 0 auto; margin:0; }

.app-versions-dialog { overflow-wrap:anywhere; }
.app-versions-dialog select { width:100%; }
.app-versions-dialog li { margin:.6rem 0; }
.app-versions-dialog summary { cursor:pointer; }

/* List entry affordance stays visible on touch screens, without requiring hover. */
.shopping-pin-open { min-height:3.25rem; padding:.65rem .75rem; border:1px solid var(--accent); border-radius:8px; background:var(--panel); cursor:pointer; }
.shopping-pin-open > span.shopping-pin-copy { min-width:0; flex:1; font-size:.95rem; }
.shopping-pin-open .shopping-pin-copy strong { white-space:normal; overflow-wrap:anywhere; }
.shopping-pin-open .shopping-open-hint { margin-top:.2rem; color:var(--muted); font-size:.78rem; white-space:normal; }
.shopping-pin-open::after, .shopping-pin-open[aria-expanded=true]::after { content:''; display:block; flex:0 0 .45rem; width:.45rem; height:.45rem; margin-left:auto; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); }
.shopping-pin-open[aria-expanded=true]::after { transform:rotate(135deg); }
.shopping-pin-open:hover { background:var(--panel-2); }
.shopping-pin-open:focus-visible { outline:3px solid #7bdcc9; outline-offset:2px; }
/* Separate the list entries from the creation/settings controls above them. */
.shopping-personal-tools + .shopping-personal-row { border-top:1px solid var(--muted); margin-top:.8rem; padding-top:.8rem; }
#shopping-pinned-lists:not(:empty) { border-top:1px solid var(--muted); margin-top:.8rem; padding-top:.8rem; }

/* Keep the list name visible when owner controls share a pinned-list card. */
#shopping-pinned-lists .shopping-pin-row { display:grid; grid-template-columns:auto minmax(0,1fr); align-content:start; }
#shopping-pinned-lists .shopping-pin-open { grid-column:1 / -1; width:100%; }

/* Full-width calendar labels sit on the chat background, outside message bubbles. */
.chat-date-separator { display:flex; align-items:center; gap:10px; align-self:stretch; width:100%; flex:0 0 auto; margin:14px 0; color:var(--muted); font-size:12px; line-height:1.4; text-align:center; }
.chat-date-separator::before, .chat-date-separator::after { content:""; flex:1; min-width:8px; border-top:1px solid currentColor; opacity:.35; }
.chat-date-separator span { flex:0 1 auto; overflow-wrap:anywhere; }

.home-address-section fieldset {border:0; padding:0; margin:0; min-width:0;}
.home-address-section .profile-field-label {display:flex; flex-direction:column; gap:4px; margin-bottom:10px;}
.hub-home-area {overflow-wrap:anywhere; margin:8px 0;}

.community-topic-dialog {max-width:min(600px,calc(100vw - 24px)); overflow-wrap:anywhere;}
.community-topic-dialog fieldset {min-width:0; border:0; margin:0; padding:0;}
.community-topic-dialog label {display:flex; flex-direction:column; gap:6px; margin:12px 0;}
.community-topic-dialog input,.community-topic-dialog textarea {width:100%; min-width:0; box-sizing:border-box;}
.community-topic-body {white-space:pre-wrap; overflow-wrap:anywhere;}
.community-topic-card {width:100%; text-align:start; cursor:pointer; color:inherit;}
.community-topic-card span {white-space:pre-wrap;}
.community-topic-dialog h2 {color:inherit;}

.topic-toolbar-icon::before {display:none;}
.topic-toolbar-icon {flex:none;}

.community-topic-entry {display:flex; align-items:flex-start; gap:4px; min-width:0;}
.community-topic-entry .community-topic-card {flex:1; min-width:0;}
button.topic-toolbar-icon, button.topic-toolbar-icon:hover, button.topic-toolbar-icon:active {background:transparent; border-color:transparent; box-shadow:none; color:inherit;}
button.topic-toolbar-icon:focus-visible {outline:2px solid #7bdcc9; outline-offset:2px;}

.community-topic-card-wrap {position:relative; flex:1; min-width:0;}
.community-topic-card-wrap.has-topic-edit .community-topic-card {padding-right:52px;}
.topic-entry-edit, .topic-entry-delete {position:absolute; top:14px; right:5px;}
.community-topic-dialog.has-topic-delete > h2 {padding-right:44px;}
.community-topic-dialog > .topic-entry-delete {top:12px; right:12px;}

.app.topic-chat-open #thread, .app.topic-chat-open #thread-empty {display:none!important;}
.community-topic-thread {z-index:2;}
.community-topic-thread .thread-heading {flex:1; min-width:0;}
.community-topic-thread .thread-heading strong {white-space:normal; overflow-wrap:anywhere;}
.community-topic-history {flex:1; min-height:0; overflow:auto; padding:16px;}
.community-topic-post {display:flex; flex-direction:column; gap:8px; background:var(--panel); padding:16px; border-radius:12px; overflow-wrap:anywhere;}
.community-topic-post .community-topic-body {margin:0;}
@media(max-width:800px){
 .app.topic-chat-open .sidebar,.app.topic-chat-open .sidebar-tools {display:none!important;}
 .community-topic-thread {grid-column:1; grid-row:1 / -1;}
 .community-topic-thread .thread-head {flex-wrap:nowrap;}
 .community-topic-thread .thread-actions {flex-shrink:0;}
}
body:has(.app.topic-chat-open) #quick-launch {display:none!important;}
.community-topic-post h2 {margin:0; color:inherit; font-size:1.1rem;}
@media(max-width:800px){
 .community-topic-thread .thread-actions {display:flex; flex:0 0 auto; width:auto; max-width:none; margin:0; padding:0;}
 .community-topic-thread .thread-head > .back-icon-btn {flex:none;}
}

.community-topic-post {display:block;}
.community-topic-post .topic-author {display:block;}
.community-topic-post .topic-category-line {display:block; margin-top:4px; color:var(--muted); font-size:.8rem;}
.community-topic-post h2 {margin:1.2em 0; font-size:1.15rem; font-weight:800;}
.community-topic-post .community-topic-body {margin:0;}
.topic-photo,.topic-photo-preview {display:block; width:auto; max-width:min(500px,100%); height:auto; object-fit:contain; margin:1.2em 0; border-radius:8px;}
.topic-photo-preview[hidden] {display:none;}
.topic-reactions {display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:1.2em;}
.topic-reaction-count {font-size:.7rem; position:absolute; bottom:0; right:0;}
.topic-reactions .icon-btn,.side-toolbar .icon-btn {position:relative;}
.topic-entry-actions {display:flex; gap:10px; margin-top:1.2em; padding-top:1.2em; border-top:1px solid var(--border);}
.topic-answer {padding:16px; margin-top:16px; border-radius:12px; background:var(--panel); overflow-wrap:anywhere;}
.topic-answer time {display:block; color:var(--muted); font-size:.78rem; margin:4px 0 12px;}
.topic-answer p,.topic-notification-row {white-space:pre-wrap;}
.topic-answer-form {display:flex; flex-direction:column; gap:8px; margin-top:16px;}
.topic-answer-form textarea {width:100%; min-height:80px; resize:vertical; box-sizing:border-box;}
.topic-answer-form button {align-self:flex-end;}
.activity-comment-tools {display:flex;align-items:center;justify-content:flex-end;gap:8px;}
.activity-comment-form .camera-icon-btn::before {display:none;}
.activity-comment-previews {display:flex;flex-wrap:wrap;gap:8px;}
.activity-comment-preview {display:flex;flex-direction:column;gap:4px;width:104px;font-size:.8rem;color:var(--muted);}
.activity-comment-preview img {width:104px;height:104px;object-fit:cover;border-radius:8px;}
.activity-comment-preview .community-control {align-self:flex-start;}
.activity-comment-photos {display:flex;flex-wrap:wrap;gap:8px;margin:.5rem 0;}
.activity-comment-photos img {width:min(100%,160px);height:120px;object-fit:cover;border-radius:8px;background:var(--panel-2);}
.activity-comment-nominate-hint {margin:0;font-size:.85rem;}
.topic-emoji-picker {display:grid; grid-template-columns:repeat(auto-fit,minmax(40px,1fr)); gap:6px; margin:12px 0; max-width:360px;}
.topic-emoji-picker[hidden] {display:none;}
.topic-emoji-choice,.topic-reaction-chip {background:transparent; color:inherit; border-color:transparent;}
.topic-reaction-chip[aria-pressed=true],.topic-reactions [aria-pressed=true] {color:#40e0d0; font-weight:700;}
.topic-reaction-chip:focus-visible {outline:2px solid #7bdcc9; outline-offset:2px;}
.topic-notification-row {display:block; width:100%; text-align:start; margin:8px 0;}
.topic-notice {position:fixed; z-index:220; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:8px; align-items:center; max-width:calc(100vw - 24px); padding:12px; background:var(--panel); border:1px solid var(--border); border-radius:12px;}
.topic-notice > button:first-child {background:transparent; color:inherit; border:0; text-align:start;}
.topic-answer-notice {color:#7bdcc9;}
.topic-reactions .topic-toolbar-icon {display:inline-flex; align-items:center; justify-content:center; gap:6px; width:auto; min-width:40px; padding-inline:8px;}
.topic-reactions .topic-reaction-count {position:static; font-size:.85rem;}

.community-topic-card .topic-list-date {font-size:.8rem;}

.community-topic-card .topic-category-line {color:var(--muted);}

.community-topic-card {position:relative; padding-bottom:30px;}
.community-topic-card .topic-open-hint {position:absolute; right:10px; bottom:8px; width:16px; height:16px; margin:0; color:var(--muted); pointer-events:none;}

.topic-filter-active {color:var(--accent)!important;}
.topic-filter-current {color:var(--muted); overflow-wrap:anywhere;}
#ctx-menu [role=menuitemradio][aria-checked=true]::after {content:'✓'; margin-left:auto; padding-left:12px;}

.community-topic-card .topic-list-title, .community-topic-post h2, .community-topic-thread .thread-heading > strong {color:#40e0d0;}

.replay-animation { cursor: pointer; }
.replay-animation:focus-visible { outline: 2px solid var(--accent, #40e0d0); outline-offset: 3px; }
.community-event-facts {display:block;}
.community-event-facts p {margin:8px 0;}

/* Keep all Community event categories reachable on small screens. */
.ctx-menu:has(.community-event-category-choice) {max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;}
.ctx-menu .community-event-category-choice {flex-shrink:0;}

.community-event-audience-settings fieldset {display:grid;gap:12px;border:0;padding:0;min-width:0;}
.community-event-audience-settings input {max-width:100%;width:100%;box-sizing:border-box;}
.community-event-audience-settings .icon-btn {justify-self:start;}

.event-geography-credit {color:var(--accent);font-size:0.85rem;}

.community-event-gallery {width:100%;min-width:0;margin:10px 0;}
.community-event-gallery:focus-visible {outline:2px solid var(--accent);outline-offset:3px;}
.event-photo-stage {display:flex;width:100%;aspect-ratio:16/10;max-height:480px;align-items:center;justify-content:center;overflow:hidden;border-radius:10px;background:transparent;padding:0;}
.event-photo-stage img {display:block;width:100%;height:100%;object-fit:contain;}
button.event-photo-open {border:0;background:transparent;cursor:pointer;}
.event-photo-navigation {display:flex;align-items:center;justify-content:center;gap:12px;}
.event-photo-navigation .icon-btn,.event-photo-thumb-actions .icon-btn {min-width:44px;min-height:44px;}
.event-photo-counter {font-size:0.85rem;color:var(--muted);}
.event-photo-editor {min-width:0;}
.event-photo-thumbnails {display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;}
.event-photo-thumb {min-width:0;}
.event-photo-thumb img {display:block;width:100%;height:100px;object-fit:contain;border-radius:8px;}
.event-photo-thumb-actions {display:flex;gap:4px;}
.event-photo-thumb-actions [aria-pressed=true] {color:var(--accent);}

.community-event-photo-settings fieldset {display:grid;gap:12px;border:0;padding:0;min-width:0;}
.community-event-photo-settings input {max-width:100%;width:100%;box-sizing:border-box;}
.community-event-photo-settings .icon-btn {justify-self:start;}

/* A single personal identity before Community and Marketplace author names. */
.post-author { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; }
.post-author > img { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; object-fit: cover; }
.post-author > span { overflow-wrap: anywhere; min-width: 0; }
.post-author-link { cursor: pointer; text-decoration: none; color: inherit; font-weight: inherit; }
.post-author-link:hover > span { text-decoration: underline; }
.post-author-link:focus-visible { outline: 2px solid var(--accent, #1f8fbf); outline-offset: 2px; border-radius: .35rem; }
.profile-seller-reputation { margin-top: .5rem; }
.profile-seller-reputation .market-profile-panel { margin: 0; }
.profile-seller-reputation .market-profile-side { background: color-mix(in srgb, var(--panel, #0e1c24) 92%, white); }
.peer-seller-section .profile-seller-reputation { margin-top: .35rem; }
.market-item-body .post-author { font-size: .85rem; }
.profile-icon-picker { margin-top: .65rem; max-width: 100%; }
.profile-icon-picker summary { cursor: pointer; padding: .5rem 0; }
.profile-icon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 4px; max-width: 360px; margin-top: .5rem; }
.profile-icon-grid button { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 4px; background: transparent; border: 0; border-radius: 50%; }
.profile-icon-grid button[aria-pressed="true"] { outline: 2px solid var(--accent, #137b70); outline-offset: -2px; }
.profile-icon-grid button:focus-visible, .profile-use-photo:focus-visible { outline: 3px solid var(--accent, #137b70); outline-offset: 2px; }
.profile-icon-grid img { width: 36px; height: 36px; }
.profile-use-photo { margin-top: .5rem; background: transparent; }
.community-topic-post .topic-author.post-author { display: inline-flex; }
.profile-icon-picker, #profile-icon-options { min-width: 0; width: 100%; box-sizing: border-box; }
.profile-icon-grid { min-width: 0; width: 100%; box-sizing: border-box; }
.profile-photo-actions #profile-avatar-pick, .profile-photo-actions #profile-avatar-remove { background: transparent; border: 0; box-shadow: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; color: var(--text); }
.profile-photo-actions #profile-avatar-pick:focus-visible, .profile-photo-actions #profile-avatar-remove:focus-visible { outline: 3px solid var(--accent, #137b70); outline-offset: 2px; }

.community-group-cards {display:grid;gap:.8rem;}
.community-group-card {width:100%;text-align:start;white-space:normal;overflow-wrap:anywhere;}
.community-group-card p {white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.community-group-image {display:block;max-width:100%;width:100%;max-height:300px;object-fit:cover;border-radius:.65rem;margin-bottom:.6rem;}
.community-group-image[hidden] {display:none;}
.community-group-dialog {max-width:min(560px,calc(100vw - 24px));box-sizing:border-box;}
.community-group-dialog fieldset {border:0;padding:0;margin:0;min-width:0;}
.community-group-dialog input:not([type=checkbox]),.community-group-dialog textarea,.community-group-dialog select {max-width:100%;width:100%;box-sizing:border-box;}
.community-group-dialog .community-group-switch {display:flex;align-items:center;gap:.8rem;}
.community-group-switch input {width:44px;height:24px;flex:0 0 44px;accent-color:var(--accent);cursor:pointer;}
.community-group-dialog p,.community-group-details p {overflow-wrap:anywhere;}
.community-group-actions {display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0;}
.community-group-member {display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;padding:.65rem 0;border-bottom:1px solid var(--border);}
.community-group-compose {display:grid;gap:.5rem;margin-top:1rem;}
.community-group-compose textarea {width:100%;box-sizing:border-box;}
.community-group-compose button {justify-self:end;}
.community-group-details .thread-head {flex-wrap:wrap;}
.community-group-details .thread-head > strong {min-width:0;overflow-wrap:anywhere;flex:1;}
.community-group-dialog .topic-toolbar-icon,.community-group-details .topic-toolbar-icon {background:transparent;border:0;box-shadow:none;min-width:44px;min-height:44px;}
.community-group-dialog button:focus-visible,.community-group-details button:focus-visible {outline:3px solid var(--accent);outline-offset:2px;}
.community-group-dialog.event-dialog h2 {color:var(--text);}
.community-group-dialog.event-dialog button.topic-toolbar-icon,
.community-group-dialog.event-dialog button.topic-toolbar-icon:hover:not(:disabled) {background:transparent;border:0;box-shadow:none;color:var(--text);}
.community-group-dialog .camera-icon-btn::before {display:block;}
.community-group-dialog .community-group-switch {flex-direction:row;min-height:44px;}
.community-group-dialog .community-group-switch input[type=checkbox] {appearance:none;-webkit-appearance:none;position:relative;margin:0;border:1px solid var(--muted);border-radius:20px;background:var(--panel-2);width:44px;height:26px;min-width:44px;}
.community-group-dialog .community-group-switch input::after {content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--text);transition:transform .15s;}
.community-group-dialog .community-group-switch input:checked {background:#13877e;border-color:#6ed9ca;}
.community-group-dialog .community-group-switch input:checked::after {transform:translateX(18px);background:#fff;}
.community-group-dialog .community-group-switch input:focus-visible {outline:3px solid var(--text);outline-offset:3px;}
@media(prefers-reduced-motion:reduce){.community-group-dialog .community-group-switch input::after {transition:none;}}
/* Keep the persistent next-event drawer clear of the new group's header controls. */
.app.has-next-event .community-group-details {padding-top:var(--event-next-space,110px);box-sizing:border-box;}

.activity-filters {display:flex;gap:.65rem;flex-wrap:wrap;}
.activity-filters .event-field {flex:1 1 130px;min-width:0;margin:.4rem 0;}
.activity-filters select {width:100%;min-width:0;max-width:100%;box-sizing:border-box;}
.community-activity-details a, .community-event-details .activity-map a {color:var(--text);text-decoration:underline;text-underline-offset:.2em;overflow-wrap:anywhere;}
.community-activity-details a:focus-visible, .community-event-details .activity-map a:focus-visible {outline:3px solid var(--text);outline-offset:3px;}
.hub-community-tabs {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
.hub-tabs.hub-community-tabs .chat-filter {overflow-wrap:normal;word-break:normal;white-space:normal;}
.community-directory-toolbar {display:flex;align-items:center;gap:.4rem;margin:.6rem 0;}
.community-directory-toolbar .topic-toolbar-icon {width:44px;height:44px;min-width:44px;min-height:44px;padding:8px;}
.community-activity-details .community-topic-post {display:flex;flex-direction:column;align-items:flex-start;gap:.65rem;}
.community-activity-details .community-topic-post > h2 {margin:.3rem 0;}
.community-activity-details .community-topic-post > p {margin:0;}

/* Each wrapped Community tab row continues its baseline beside the active tab. */
.hub-tabs.hub-community-tabs {gap:0;align-items:stretch;border-bottom:0;}
.hub-tabs.hub-community-tabs .chat-filter {margin:0;border-bottom-color:var(--border);}
.hub-tabs.hub-community-tabs .chat-filter.active {border-bottom-color:var(--panel);}
@media (max-width: 400px) {
  .chat-section-tabs .chat-filter {font-size:0.72rem;padding:0.45rem 0.25rem 0.5rem;}
  .hub-tabs.hub-community-tabs .chat-filter {font-size:0.72rem;padding:0.45rem 0.3rem 0.5rem;}
}

/* Discussion-style controls throughout Community and Marketplace. */
.community-directory-toolbar {flex-wrap:wrap;}
.community-directory-toolbar .topic-filter-current {flex:1 1 100%;margin:0;}
button.community-control,button.community-control:hover,button.community-control:active,
.market-dialog button.community-control,.market-dialog button.community-control:hover {background:transparent;border-color:transparent;box-shadow:none;color:inherit;min-width:44px;min-height:44px;padding:8px;}
button.community-control:focus-visible {outline:2px solid #7bdcc9;outline-offset:2px;}
.community-filter-heading {padding:.55rem .75rem .25rem;font-size:.8rem;color:var(--muted);font-weight:700;}
#ctx-menu [role=group]+[role=group] {border-top:1px solid var(--border);margin-top:.35rem;}
#ctx-menu:has(> [role=group]) {max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;}
.community-activity-editor .compose-expand-btn,
body:has(.community-activity-editor[open]) .chat-editor-expand-dialog .compose-collapse-btn {
  background:transparent;border-color:transparent;box-shadow:none;min-width:44px;min-height:44px;
}
.community-activity-editor .activity-editor-header .camera-icon-btn::before {display:none;}
.community-activity-editor .compose-expand-btn:focus-visible,
body:has(.community-activity-editor[open]) .chat-editor-expand-dialog .compose-collapse-btn:focus-visible {
  outline:2px solid var(--text);outline-offset:-2px;
}
.activity-map {width:100%;min-width:0;display:flex;flex-direction:column;gap:.7rem;}
.activity-map h3,.activity-map p {margin:0;}
.activity-map-canvas {position:relative;width:100%;max-width:500px;}
.activity-map-canvas:empty {display:none;}
.activity-map iframe {display:block;width:100%;height:auto;aspect-ratio:5 / 3;box-sizing:border-box;border:1px solid var(--border);border-radius:10px;}
.activity-map-overlay {position:absolute;inset:0;width:100%;background:#11263033;color:white;border:0;border-radius:10px;text-shadow:0 1px 4px #000;}
.activity-map-lock {position:absolute;top:60px;left:8px;right:auto;background:var(--panel)!important;color:var(--text);min-height:44px;}
.activity-map-navigation summary {cursor:pointer;min-height:44px;display:list-item;padding:.65rem;}
.activity-map-links {display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;padding:.5rem;}
.activity-map-links a {padding:.5rem;min-height:44px;box-sizing:border-box;}
.activity-map-links small {flex-basis:100%;}
.activity-map select {width:100%;min-width:0;}
.activity-map button:focus-visible,.activity-map summary:focus-visible {outline:2px solid var(--text);outline-offset:2px;}
.activity-contact-info {margin:.5rem 0;display:grid;gap:.35rem;width:100%;}
.activity-contact-info dt {font-weight:700;}
.activity-contact-info dd {margin:0 0 .5rem;overflow-wrap:anywhere;}
.activity-opening-hours {white-space:pre-wrap;}

.activity-map-heading {display:flex;align-items:center;justify-content:space-between;gap:8px;}
.activity-map-canvas.is-expanded {max-width:none;}

/* Activity editing keeps actions above the independently scrolling fields. */
.community-activity-editor.event-dialog {padding:0;overflow:hidden;}
.community-activity-editor > form {display:flex;flex-direction:column;height:100%;max-height:inherit;min-height:0;}

.community-activity-editor .activity-editor-header {position:relative;flex:none;display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--panel);}
.activity-editor-header .group-editor-heading{flex:1;min-width:0;}
.activity-editor-header .community-group-actions {display:flex;flex-wrap:nowrap;flex:none;margin:0;}
.community-activity-editor.activity-entry-overlay {position:fixed;inset:auto;margin:0;max-width:none;max-height:none;box-sizing:border-box;}
.community-activity-editor>form{container-type:inline-size;}
.community-activity-editor>form>fieldset{padding:0 24px 24px;overflow:auto;min-height:0;flex:1;}
.community-activity-editor .group-editor-section>h2{font-size:.95rem;font-weight:650;color:#8eddeb;margin:0 0 16px;}
.community-activity-editor .event-field{margin:0;gap:8px;min-width:0;}
.community-activity-editor .event-field input:not([type=checkbox]),.community-activity-editor select{min-height:44px;}
.community-activity-editor textarea[name=description]{min-height:112px;}
.community-activity-editor .group-editor-photo-frame img{width:100%;height:100%;max-height:132px;object-fit:contain;border-radius:0;margin:0;}
.community-activity-editor .group-editor-status{flex:none;margin:0;padding:12px 24px;color:#ffb092;background:var(--panel-2);}
.activity-editor-hours{display:grid;gap:16px;margin-top:16px;min-width:0;}
.activity-editor-hours .muted{font-size:.82rem;line-height:1.5;margin:0;}
.community-activity-editor .group-editor-section .muted{font-size:.82rem;line-height:1.5;margin:12px 0 0;}

.community-topic-card .community-list-likes {display:flex;align-items:center;gap:5px;margin-top:8px;color:var(--muted);font-size:.8rem;}
.community-list-likes svg {flex:none;width:16px;height:16px;}

.admin-visibility-children {margin:0 0 12px 30px;padding-left:12px;border-left:1px solid var(--border);overflow-wrap:anywhere;}
.admin-visibility-children[hidden] {display:none;}

.activity-open-status {display:block;margin:6px 0;font-weight:600;color:var(--muted);}
.activity-open-status[data-status=open] {color:#65dda8;}
.activity-open-status[data-status=closed] {color:#ffb092;}

.activity-map-canvas button.activity-map-resize,.activity-map-canvas button.activity-map-resize:hover {position:absolute;top:8px;left:8px;z-index:1;background:var(--panel)!important;color:var(--text);border:0;border-radius:6px;min-width:44px;min-height:44px;}

.activity-metadata .activity-open-status {display:inline;margin:0;font-size:inherit;}

.community-activity-details .topic-reactions button.activity-like-button[aria-pressed=true],
.community-activity-card .community-list-likes.is-liked {color:#40e0d0;font-weight:700;}
.community-activity-details .activity-like-button[aria-pressed=true] svg,
.community-activity-card .community-list-likes.is-liked svg {fill:currentColor;}

.community-event-details .activity-like-button[aria-pressed=true],
.community-event-card .community-list-likes.is-liked {color:#40e0d0;font-weight:700;}
.community-event-details .activity-like-button[aria-pressed=true] svg,
.community-event-card .community-list-likes.is-liked svg {fill:currentColor;}

/* Community Event edits occupy the same chat area as their entry. */
.community-event-editor.event-dialog {position:fixed;inset:auto;margin:0;max-width:none;max-height:none;box-sizing:border-box;padding:0;overflow:hidden;}
.community-event-editor > form {display:flex;flex-direction:column;height:100%;min-height:0;container-type:inline-size;}
.community-event-editor > form > .community-event-editor-fields {padding:0 24px 24px;padding-inline-end:24px;border:0;margin:0;overflow:auto;scrollbar-gutter:stable;box-sizing:border-box;max-width:100%;min-height:0;min-width:0;flex:1;}
.community-event-editor-header {position:relative;flex:none;display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--panel);}
.community-event-editor-header .group-editor-heading{flex:1;min-width:0;}
.community-event-editor-header .community-group-actions {display:flex;flex:none;margin:0;}
.community-event-editor .community-event-editor-header button {background:transparent;border-color:transparent;box-shadow:none;color:var(--text);}
.community-event-editor .group-editor-section>h2{font-size:.95rem;font-weight:650;color:#8eddeb;margin:0 0 16px;}
.community-event-editor .event-field{margin:0;gap:8px;min-width:0;}
.community-event-editor .event-field input:not([type=checkbox]),.community-event-editor select{min-height:44px;}
.community-event-editor textarea[name=body],.community-event-editor textarea[name=openingHours]{min-height:112px;}
.community-event-editor .group-editor-status{flex:none;margin:0;padding:12px 24px;color:#ffb092;background:var(--panel-2);}
.community-event-editor .group-editor-section .muted{font-size:.82rem;line-height:1.5;margin:12px 0 0;}
.community-event-editor .event-photo-mount{margin-top:16px;min-width:0;}
.community-event-editor .event-photo-editor{margin:0;padding:0;border:0;}
.community-event-editor .event-photo-editor > h3{font-size:.9rem;font-weight:600;margin:0 0 8px;color:var(--text);}
.community-event-editor .group-editor-identity{margin-bottom:16px;}
.community-event-editor .event-check{display:flex;align-items:center;gap:10px;margin-top:16px;min-height:44px;}
.community-event-editor .event-geography-credit{display:inline-block;margin-top:8px;font-size:.8rem;}
@container(max-width:580px){
 .community-event-editor > form > .community-event-editor-fields{padding:0 16px 16px;}
}
@container(max-width:360px){
 .community-event-editor .community-event-editor-header{gap:8px;padding:10px 12px;}
}

/* Discussion create/edit opens in the chat area like Things to do. */
.community-topic-editor.topic-entry-overlay {position:fixed;inset:auto;margin:0;max-width:none;max-height:none;box-sizing:border-box;padding:0;overflow:hidden;}
.community-topic-editor > form {display:flex;flex-direction:column;height:100%;min-height:0;container-type:inline-size;}
.community-topic-editor > form > fieldset {padding:0 24px 24px;overflow:auto;min-height:0;flex:1;border:0;margin:0;}
.community-topic-editor .topic-editor-header {position:relative;flex:none;display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--panel);}
.topic-editor-header .group-editor-heading{flex:1;min-width:0;}
.topic-editor-header .community-group-actions {display:flex;flex-wrap:nowrap;flex:none;margin:0;}
.community-topic-editor .topic-editor-header button {background:transparent;border-color:transparent;box-shadow:none;color:var(--text);}
.community-topic-editor .topic-editor-header .camera-icon-btn::before {display:none;}
.community-topic-editor .group-editor-section>h2{font-size:.95rem;font-weight:650;color:#8eddeb;margin:0 0 16px;}
.community-topic-editor .event-field{margin:0;gap:8px;min-width:0;display:flex;flex-direction:column;}
.community-topic-editor .event-field input:not([type=checkbox]):not([type=file]),.community-topic-editor select{min-height:44px;}
.community-topic-editor textarea[name=body]{min-height:112px;}
.community-topic-editor .group-editor-status{flex:none;margin:0;padding:12px 24px;color:#ffb092;background:var(--panel-2);}
.community-topic-editor .group-editor-status:empty{display:none;}
.community-topic-editor .group-editor-section .muted,.community-topic-editor .group-editor-section > p{font-size:.82rem;line-height:1.5;margin:12px 0 0;}
.community-topic-editor .topic-category-field + .muted{margin:6px 0 0;}
.community-topic-editor .group-editor-photo-frame img{width:100%;height:100%;max-height:132px;object-fit:contain;border-radius:0;margin:0;}
.community-topic-editor .group-description-heading>.compose-expand-btn{position:static;transform:none;flex:0 0 44px;width:44px;height:44px;min-height:44px;margin:0;padding:0;background:transparent;border:0;box-shadow:none;color:var(--text);}
.community-topic-editor .group-description-heading>.compose-expand-btn:focus-visible{outline:2px solid var(--text);outline-offset:-3px;}
@container(max-width:580px){
 .community-topic-editor > form > fieldset{padding:0 16px 16px;}
 .community-topic-editor .group-editor-photo-frame img{max-height:84px;}
}
@container(max-width:360px){
 .community-topic-editor .topic-editor-header{gap:8px;padding:10px 12px;}
}

.event-dialog[data-community-event]:not(.community-event-editor) {scrollbar-gutter:stable;}
.event-dialog[data-community-event] .event-photo-editor {max-width:100%;box-sizing:border-box;overflow-wrap:anywhere;}
.event-dialog[data-community-event] .event-photo-thumbnails {grid-template-columns:repeat(auto-fill,minmax(min(120px,100%),1fr));}
.event-dialog[data-community-event] .event-photo-thumb > small {display:block;white-space:normal;overflow-wrap:anywhere;}

.activity-album {margin:24px 0;padding-top:16px;border-top:1px solid var(--border);min-width:0;}
.activity-album-tools,.activity-album-viewer-tools {display:flex;align-items:center;gap:8px;}
.activity-album-tools h3 {flex:1;margin:0;}
.activity-album-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:16px;}
.activity-album-photo {min-width:0;overflow-wrap:anywhere;}
button.activity-album-open {display:block;width:100%;padding:0;border:0;background:transparent;}
.activity-album-open img {display:block;width:100%;height:150px;object-fit:cover;border-radius:8px;}
.activity-album-photo .profile-author {margin-top:8px;}
.activity-album-open:focus-visible {outline:2px solid var(--text);outline-offset:3px;}
.activity-album-viewer {max-width:calc(100vw - 24px);}
.activity-album-viewer-tools {justify-content:flex-end;margin-bottom:12px;}
.activity-album-viewer > img {display:block;max-width:100%;max-height:65dvh;object-fit:contain;margin:auto;}
.activity-album-viewer > div:last-child {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;}
/* Event list photos sit above the full-width Discussion-style card. */
.community-event-cards > .community-topic-entry {flex-direction:column;gap:0;width:100%;box-sizing:border-box;}
.community-event-cards > .community-topic-entry > .community-topic-card-wrap {width:100%;flex:none;}
.community-event-cards .community-topic-card {width:100%;box-sizing:border-box;}
.community-event-cards .community-event-gallery {box-sizing:border-box;max-width:100%;}

.album-privacy-toggle {display:flex;align-items:center;gap:10px;margin:14px 0;cursor:pointer;}
.album-privacy-toggle input {width:20px;height:20px;flex:none;}
.photo-privacy-dialog {width:min(900px,calc(100vw - 24px));}
.photo-privacy-preview {display:block;width:100%;height:auto;touch-action:none;cursor:crosshair;border:1px solid var(--border);box-sizing:border-box;}
.photo-privacy-actions {display:flex;align-items:center;gap:8px;flex-wrap:wrap;position:sticky;top:0;background:var(--panel);z-index:1;padding:8px 0;}
.privacy-regions {display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;}
.photo-privacy-dialog fieldset {min-width:0;display:flex;flex-wrap:wrap;gap:10px;margin:12px 0;}
.photo-privacy-dialog fieldset .event-field {width:calc(50% - 10px);min-width:0;}
.photo-privacy-preview:focus-visible {outline:2px solid var(--text);outline-offset:2px;}

.photo-privacy-stage {position:relative;}
.photo-privacy-selection {position:absolute;pointer-events:none;box-sizing:border-box;border:2px dashed #fff;box-shadow:0 0 0 1px #142b38,inset 0 0 0 1px #142b38;background:rgba(64,224,208,.22);}
.photo-privacy-selection[hidden] {display:none;}

.profile-icon-grid {max-height:300px;overflow-y:auto;padding:4px;}
.profile-icon-grid button[hidden] {display:none;}
.community-avatar-toggle {display:flex!important;flex-direction:row!important;align-items:center;gap:10px;}
.community-avatar-toggle input {width:20px!important;flex:0 0 20px;}

.event-guest-edit .topic-toolbar-icon,.event-guest-table .topic-toolbar-icon {background:transparent!important;border-color:transparent!important;box-shadow:none!important;}
.event-guest-edit h2 {color:var(--text);}

.has-activity-actions {margin:.6rem 0;}
.has-activity-actions .community-activity-card {margin:0;padding-bottom:calc(.8rem + 48px);}
.activity-card-footer {position:absolute;left:calc(.8rem + 1px);right:10px;bottom:calc(.8rem + 1px);display:flex;align-items:center;gap:8px;height:40px;pointer-events:none;}
.activity-card-footer .community-list-likes {display:flex;align-items:center;gap:5px;flex:none;color:var(--muted);font-size:.8rem;}
.activity-card-footer .topic-open-hint {margin-left:auto;flex:none;width:16px;height:16px;color:var(--muted);}
.activity-list-actions {display:flex;gap:4px;pointer-events:auto;}
.activity-list-actions a {display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;background:transparent;border:0;color:var(--text);text-decoration:none;}
.activity-list-actions a:focus-visible {outline:2px solid var(--accent);outline-offset:2px;}

.profile-chat-modal {inset:auto;padding:0;background:var(--panel);max-width:none;max-height:none;}
.profile-chat-modal .modal-card {display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);gap:0;width:100%;height:100%;max-width:none;max-height:none;padding:0;border-radius:0;overflow:hidden;}
.profile-chat-modal #modal-title {grid-column:1;grid-row:1;align-self:center;margin:0;padding:14px 16px;font-size:1.05rem;}
.profile-chat-modal .modal-actions {grid-column:2;grid-row:1;margin:0;padding:8px;display:flex;align-items:center;}
.profile-chat-modal #modal-ok {order:-1;}
.profile-chat-modal .modal-actions button {background:transparent;border:0;box-shadow:none;color:var(--text);min-width:40px;min-height:40px;}
.profile-chat-modal #modal-body {grid-column:1 / -1;grid-row:2;min-height:0;overflow:auto;padding:16px;}

.activity-list-actions svg {width:16px;height:16px;}

/* Conversation creation is a labelled menu in the Chats-only RHS drawer. */
.new-launch-actions {display:flex;flex-direction:column;gap:.5rem;}
.new-launch-actions button {display:flex;align-items:center;gap:.6rem;text-align:left;min-height:44px;background:transparent;border-color:transparent;}
#new-launch-panel .quick-launch-head {align-items:center;justify-content:space-between;}
@media (max-height:700px) { .quick-launch-tabs .quick-launch-toggle {min-height:3.4rem;padding-block:.4rem;} }

/* Creation uses a warm surface to distinguish it from browsing tabs. */
:is(#new-launch-toggle,.new-launch-direct) {background:#f2d49a;color:#302313;border-color:#caa668;}
:is(#new-launch-toggle,.new-launch-direct):hover {background:#ffe3ad;color:#302313;}
.quick-launch.is-open #new-launch-toggle[aria-expanded="true"] {background:#8a4c08;color:#fff;border-color:#8a4c08;}
.new-launch-actions button {background:#f2d49a;color:#302313;border-color:transparent;border-radius:.6rem;padding:.75rem;}
.new-launch-actions button:hover {background:#ffe3ad;color:#302313;}
:is(#new-launch-toggle,.new-launch-direct):focus-visible,.new-launch-actions button:focus-visible {outline:3px solid var(--accent-2);outline-offset:3px;}

/* Leave breathing room above raised sidebar tabs without breaking their baselines. */
.sidebar > .chat-section-tabs {padding-top:6px;}
.sidebar .hub-tabs {padding-top:4px;}
.sidebar .hub-tabs.hub-community-tabs {row-gap:4px;}

.new-launch-direct {display:none;}
.new-launch-direct .chat-group-mark {width:18px;height:18px;background:currentColor;}
@media (min-width:801px) {
  #new-launch-toggle {display:none!important;}
  .new-launch-direct:not([hidden]) {display:flex;}
  .quick-launch-tabs:has(.new-launch-direct:not([hidden])) .quick-launch-toggle {min-height:clamp(3rem,13dvh,6.6rem);}
}
.community-group-website{color:var(--text);overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:.15em}
.community-group-website:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
.contact-intro-card{padding:.8rem;margin:.6rem 0;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);color:var(--text);overflow-wrap:anywhere;max-width:34rem;box-sizing:border-box}
.contact-intro-card p{white-space:pre-wrap;margin:.5rem 0}.contact-intro-actions{display:flex;flex-wrap:wrap;gap:.5rem}.contact-intro-actions button{min-height:44px}.contact-intro-card img{border-radius:50%;object-fit:cover}.contact-intro-thread{width:100%;padding:.4rem;box-sizing:border-box}
.notifications-launch-content{display:flex;flex-direction:column;gap:.35rem;padding:.25rem .15rem .75rem;overflow:auto;min-height:0}
.notifications-launch-content .contact-intro-card{max-width:none;margin:.35rem 0}
.event-invite-notification .event-chat-occasion{display:block;margin:.35rem 0 .15rem}
.contact-intro-heading{display:flex;align-items:center;gap:.65rem;min-width:0;}
.contact-intro-heading strong{flex:1;min-width:0;}
.contact-intro-heading img{flex:0 0 40px;width:40px;height:40px;}
.contact-intro-dismiss{flex:none;margin-left:auto;min-width:44px;min-height:44px;padding:8px;background:transparent;border-color:transparent;color:inherit}
.contact-intro-dismiss:hover,.contact-intro-dismiss:focus-visible{background:transparent;border-color:transparent}
.notifications-launch-badge{border-radius:1rem;background:#ffe59b;color:#302500;padding:.1rem .35rem;font-size:.75rem;line-height:1.2}
.notifications-launch-badge[hidden]{display:none}
.quick-launch.is-open #notifications-launch-toggle[aria-expanded="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
#notifications-launch-toggle{position:relative}

.community-stickies{margin:0 0 1rem;padding:.7rem;border:1px solid var(--border);border-radius:8px;background:var(--panel-2)}
.community-sticky-heading,.community-sticky-tools{display:flex;align-items:center;gap:.5rem}.community-sticky-heading{justify-content:space-between}
.community-sticky-post{display:flex;align-items:flex-start;gap:.5rem;border-top:1px solid var(--border);padding:.5rem 0}
.community-sticky-post details{flex:1;min-width:0}.community-sticky-post summary{cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.65rem 0;color:var(--text);font-weight:700}
.community-sticky-post p{white-space:pre-wrap;overflow-wrap:anywhere}.community-sticky-tools{flex-shrink:0}

/* Reserve a full action row, so fullscreen never covers text or neighbouring form actions. */
.editor-expand-field.community-editor-field{padding-top:44px;box-sizing:border-box;min-width:0}
.editor-expand-field.community-editor-field>.compose-expand-btn{top:0;right:0;transform:none;min-width:44px;min-height:44px;margin:0;background:transparent;border:0;box-shadow:none;color:var(--text)}
.editor-expand-field.community-editor-field>.compose-expand-btn:hover,.editor-expand-field.community-editor-field>.compose-expand-btn:focus-visible{transform:none;background:transparent}
.editor-expand-field.community-editor-field>.compose-expand-btn:focus-visible{outline:2px solid var(--text);outline-offset:-3px}
.editor-expand-field.community-editor-field>.field-clear-btn{top:calc(50% + 22px);right:.1rem}
.editor-expand-field.community-editor-field>textarea{padding-right:2.7rem}

.chat-editor-expand-dialog.community-fullscreen-editor{max-width:none}

.community-sticky-editor-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:nowrap;margin:.75rem 0}
.community-sticky-editor-actions>button.community-control{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;width:auto;white-space:nowrap}
.community-sticky-editor .field-clear-wrap>button.field-clear-btn{top:.2rem;right:.2rem;transform:none}
.community-sticky-editor .community-editor-field>button.field-clear-btn{top:calc(44px + .2rem)}

.event-dialog.community-sticky-editor .community-sticky-editor-actions>button.community-control,
.event-dialog.community-sticky-editor .community-sticky-editor-actions>button.community-control:is(:hover,:active,:focus-visible){background:transparent;border-color:transparent;box-shadow:none;filter:none}
.community-sticky-editor-actions>button.community-control>span{color:#8eddeb;font-weight:800}
.community-sticky-editor-actions>button.community-control:hover:not(:disabled)>span{text-decoration:underline}
.event-dialog.community-sticky-editor .community-sticky-editor-actions>button.community-control:focus-visible{outline:2px solid #8eddeb;outline-offset:2px}

.community-search-match{outline:2px solid #8eddeb;outline-offset:3px;border-radius:6px;}

body:has(.app.topic-chat-open .community-search-enabled) #quick-launch:not([hidden]){display:block!important;}

/* Mobile Community titles keep their own row; management controls sit below. */
@media(max-width:800px){
 .community-topic-thread .thread-head{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;column-gap:.5rem;row-gap:.25rem;}
 .community-topic-thread .thread-head>.back-icon-btn{grid-column:1;grid-row:1;min-width:44px;min-height:44px;}
 .community-topic-thread .thread-head>:is(.thread-heading,strong){grid-column:2;grid-row:1;min-width:0;width:100%;white-space:normal;overflow-wrap:anywhere;}
 .community-topic-thread .thread-head>.thread-actions{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.25rem;width:100%;border:0;margin:0;padding:0;}
 .community-topic-thread .thread-head>.thread-actions:empty{display:none;}
 .community-topic-thread .thread-actions .ghost:not(.icon-btn){width:auto;max-width:100%;white-space:normal;}
 .community-topic-thread .thread-actions button{min-width:44px;min-height:44px;}
}

.community-group-invitation-card{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;width:100%;max-width:520px;padding:1rem;margin:.75rem 0;text-align:left;white-space:normal;overflow-wrap:anywhere;border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--text);}

#app-update-refresh{position:static;flex:0 0 44px;margin-left:auto;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;border:0;background:transparent;color:#ffd166;box-shadow:none;}
#app-update-refresh[hidden]{display:none;}
#app-update-refresh svg{width:24px;height:24px;}
#app-update-refresh:focus-visible{outline:2px solid var(--accent-2);outline-offset:1px;}
#app-update-refresh::before{content:none;}
#app-update-refresh svg{flex:none;}

#groups-launch-content{display:flex;flex-direction:column;gap:.75rem;}
.pinned-community-group{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;border:1px solid #3d5969;border-left:3px solid #63bfd3;border-radius:10px;background:#203744;}
.pinned-community-group>button:first-child{flex:1;min-width:0;min-height:44px;text-align:left;white-space:normal;overflow-wrap:anywhere;background:transparent;border-color:transparent;padding:.5rem;font-weight:650;line-height:1.4;}
.pinned-community-group>button:last-child{flex:none;min-width:44px;min-height:44px;background:transparent;border:0;box-shadow:none;}
.pinned-community-group:focus-within{border-color:#8eddeb;}
/* Sent messages and their actions leave room for the closed RHS tab rail. */
body:has(#quick-launch:not([hidden])) #messages{padding-right:3rem;}
@media(max-width:800px){
 /* Mobile already reserves the rail outside the thread; add only a small gap. */
 body:has(#quick-launch:not([hidden])) #messages{padding-right:1.5rem;}
}
/* Published update editions are separate discussion threads. */
.update-threads-dialog{width:min(76rem,calc(100% - 1rem));height:min(94dvh,960px);max-height:94dvh;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column;gap:.4rem;}
.update-threads-dialog:not([open]){display:none}
.update-threads-dialog>.shared-lists-header{flex:none;margin:0}
.update-threads-dialog>.shared-lists-notice:empty{display:none}
.update-thread-settings{flex:none;font-size:.9rem}
.update-thread-settings summary{cursor:pointer;min-height:32px}
.update-thread-settings button{margin:.3rem}
.update-thread-layout{display:grid;grid-template-columns:minmax(14rem,28%) minmax(0,1fr);gap:1rem;flex:1;min-height:0;}
.update-thread-index{display:flex;flex-direction:column;gap:.5rem;min-height:0;min-width:0;overflow:auto;border-right:1px solid var(--border);padding-right:.8rem;}
.update-thread-filters{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;}
.update-thread-filters button{background:transparent;border:0;color:var(--text);min-height:44px;padding:.4rem .6rem;}
.update-thread-filters button[aria-pressed=true]{color:#8eddeb;text-decoration:underline;text-underline-offset:.35rem;}
.update-thread-list{display:flex;flex-direction:column;gap:.65rem;}
.update-thread-list .update-thread-row{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;box-sizing:border-box;width:100%;padding:.75rem;text-align:left;white-space:normal;overflow-wrap:anywhere;background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:10px;box-shadow:none;}
.update-thread-row[aria-current=true]{border-color:#8eddeb;background:#203744;}
.update-thread-row time,.update-thread-row .muted{font-size:.78rem;font-weight:400;}
.update-thread-new{background:#137c91;color:white;padding:.15rem .5rem;border-radius:1rem;font-size:.75rem;}
.update-thread-view{display:flex;flex-direction:column;min-height:0;min-width:0;}
.update-thread-heading{flex:none;border-bottom:1px solid var(--border);padding-bottom:.4rem;}
.update-thread-heading h3{margin:.35rem 0;}
.update-thread-heading time{font-size:.8rem;color:var(--muted);}
.update-thread-back{background:transparent;color:var(--text);border:0;box-shadow:none;min-height:44px;padding:.25rem;}
.update-thread-actions,.update-comment-actions{display:flex;align-items:center;gap:.5rem;}
.update-thread-actions .community-control,.update-comment-actions .community-control{min-width:44px;min-height:44px;background:transparent;border:0;box-shadow:none;}
.update-thread-actions [aria-pressed=true]{color:#8eddeb;}
.update-thread-history{flex:1;min-height:0;overflow:auto;padding:.5rem .5rem .5rem 0;overscroll-behavior:contain;}
.update-thread-publication{padding:.8rem 1rem;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;overflow-wrap:anywhere;}
.update-thread-publication .member-update-entry:first-child{margin-top:0;}
.update-thread-comments{display:flex;flex-direction:column;gap:.75rem;}
.update-comment{max-width:90%;padding:.65rem .8rem;border-radius:12px;background:#283c47;align-self:flex-start;overflow-wrap:anywhere;}
.update-comment.mine{align-self:flex-end;background:#184a5c;}
.update-comment header{display:flex;flex-wrap:wrap;gap:.4rem;align-items:baseline;}
.update-comment time{font-size:.75rem;color:var(--muted);}
.update-comment p{white-space:pre-wrap;margin:.5rem 0;}
.update-thread-composer{display:flex;align-items:flex-end;gap:.4rem;padding-top:.6rem;border-top:1px solid var(--border);flex:none;}
.update-thread-composer>.field-clear-wrap{flex:1 1 0;min-width:0;}
.update-thread-composer textarea{flex:1 1 0;width:100%;min-width:0;resize:vertical;max-height:25dvh;}
.update-thread-composer button{flex:none;min-width:44px;min-height:44px;background:transparent;color:var(--text);border:0;box-shadow:none;}
.update-thread-composer button[hidden],.update-thread-activity[hidden]{display:none;}
.update-thread-activity{flex:none;white-space:normal;}
.update-threads-dialog button:focus-visible{outline:2px solid #8eddeb;outline-offset:-2px;}
@media(max-width:700px){
 .update-threads-dialog{padding:.65rem;}
 .update-thread-layout{grid-template-columns:minmax(0,1fr);}
 .update-thread-index{border:0;padding:0;}
 .update-threads-dialog:not(.has-thread) .update-thread-view,.update-threads-dialog.has-thread .update-thread-index{display:none;}
 .update-threads-dialog.has-thread>.update-thread-settings{display:none;}
 .update-thread-heading h3{font-size:1rem;}
 .update-thread-publication{padding:.65rem;}
 .update-thread-composer{flex-wrap:nowrap;}
}

/* Existing Community groups edit over their chat-area view. */
.community-group-editor.event-dialog{padding:0;overflow:hidden;}
.community-group-editor.group-entry-overlay{position:fixed;inset:auto;margin:0;max-width:none;max-height:none;box-sizing:border-box;}
.community-group-editor>form{display:flex;flex-direction:column;height:100%;min-height:0;}
.community-group-editor>form>fieldset{padding:16px;overflow:auto;min-height:0;flex:1;}
.community-group-editor .group-editor-header{flex:none;display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--panel);}
.group-editor-header>strong{flex:1;min-width:0;overflow-wrap:anywhere;}
.group-editor-header .community-group-actions{display:flex;flex-wrap:nowrap;flex:none;margin:0;}

/* Group settings: compact identity/photo, followed by contact and access sections. */
.community-group-editor>form{container-type:inline-size;}
.community-group-editor .group-editor-heading{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.group-editor-heading strong{font-size:1.05rem;}
.group-editor-heading small{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.community-group-editor>form>fieldset{padding:0 24px 24px;}
.group-editor-section{padding:22px 0;min-width:0;}
.group-editor-section+.group-editor-section{border-top:1px solid var(--border);}
.community-group-editor .group-editor-section>h2{font-size:.95rem;font-weight:650;color:#8eddeb;margin:0 0 16px;}
.group-editor-overview{display:grid;grid-template-columns:minmax(0,1fr) 176px;gap:24px;align-items:start;margin-bottom:16px;}
.group-editor-identity{display:grid;gap:16px;min-width:0;}
.group-editor-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;}
.community-group-editor .event-field{margin:0;gap:8px;min-width:0;}
.community-group-editor .event-field input:not([type=checkbox]),.community-group-editor select{min-height:44px;}
.community-group-editor textarea[name=description]{min-height:112px;}
.group-editor-photo{min-width:0;}
.group-editor-photo-frame{aspect-ratio:4/3;display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.community-group-editor .group-editor-photo-frame img{width:100%;height:100%;max-height:132px;object-fit:contain;border-radius:0;margin:0;}
.group-editor-photo-empty{font-size:.8rem;color:var(--muted);padding:12px;text-align:center;}
.group-editor-photo-frame:has(img:not([hidden])) .group-editor-photo-empty{display:none;}
.group-editor-photo-caption{display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:.8rem;color:var(--muted);}
.group-editor-photo-caption button{flex:none;}
.community-group-editor .group-editor-privacy .community-group-switch{justify-content:space-between;gap:16px;}
.group-editor-privacy .muted{font-size:.82rem;line-height:1.5;margin:6px 0 16px;}
.group-editor-privacy .muted:last-child{margin-bottom:0;}
.group-editor-privacy>div{margin-top:16px;}
.community-group-editor .group-editor-status{flex:none;margin:0;padding:12px 24px;color:#ffb092;background:var(--panel-2);}
.group-editor-status:empty{display:none;}
@container(max-width:580px){
 .community-group-editor>form>fieldset,.community-activity-editor>form>fieldset{padding:0 16px 16px;}
 .group-editor-overview{grid-template-columns:minmax(0,1fr) 112px;gap:12px;}
 .community-group-editor .group-editor-photo-frame img,.community-activity-editor .group-editor-photo-frame img{max-height:84px;}
 .group-editor-columns{grid-template-columns:minmax(0,1fr);gap:20px;}
 .group-editor-section{padding:18px 0;}
}
@container(max-width:360px){
 .group-editor-overview{grid-template-columns:minmax(0,1fr);}
 .group-editor-photo{display:flex;align-items:center;gap:16px;width:100%;}
 .group-editor-photo-frame{flex:0 0 112px;}
 .group-editor-photo-caption{flex:1;gap:8px;}
 .group-editor-heading small{display:none;}
 .community-group-editor .group-editor-header,.community-activity-editor .activity-editor-header{gap:8px;padding:10px 12px;}
}

.group-description-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;}
.group-description-heading>span{min-width:0;}
.community-group-editor .group-description-heading>.compose-expand-btn,.community-activity-editor .group-description-heading>.compose-expand-btn,.community-event-editor .group-description-heading>.compose-expand-btn{position:static;transform:none;flex:0 0 44px;width:44px;height:44px;min-height:44px;margin:0;padding:0;background:transparent;border:0;box-shadow:none;color:var(--text);}
.community-group-editor .group-description-heading>.compose-expand-btn:focus-visible,.community-activity-editor .group-description-heading>.compose-expand-btn:focus-visible,.community-event-editor .group-description-heading>.compose-expand-btn:focus-visible{outline:2px solid var(--text);outline-offset:-3px;}
.group-editor-description .editor-expand-field.community-editor-field{padding-top:0;}
.group-editor-description .editor-expand-field.community-editor-field>.field-clear-btn{top:.2rem;right:.2rem;transform:none;}

.topic-answer-actions { display:inline-flex; align-items:center; gap:.25rem; margin-top:.35rem; }
.topic-answer-actions .community-control { background:transparent; border:0; box-shadow:none; }
.topic-reactions .community-control[aria-pressed="true"] { color:var(--accent,#137b70); }
.market-overall-rating { margin:0; font-weight:600; }

/* Recovery consequences belong before the irreversible action. */
.reset-warning { border-inline-start: 3px solid #efc16d; padding: .8rem 1rem; background: #203440; border-radius: .4rem; }
.reset-warning p { margin: .65rem 0 0; line-height: 1.5; }
#reset-form .reset-acknowledgement { display: flex; align-items: flex-start; gap: .65rem; line-height: 1.5; }
#reset-form .reset-acknowledgement input { width: 24px; height: 24px; flex: 0 0 24px; margin-top: .1rem; }
.auth-hero-inner:focus-visible { outline: 3px solid #218fa8; outline-offset: -4px; }

.member-indicators{display:inline-flex;align-items:center;flex-wrap:wrap;gap:5px;margin-inline-start:6px;font-size:.72rem;font-weight:normal;vertical-align:middle}.member-level{color:var(--muted,#8eabc0)}.member-badge{display:inline-block;color:var(--accent,#31bfd5);font-size:.95rem}.member-status-dialog{max-width:420px}.member-status-dialog .member-indicators{display:flex;margin:12px 0}.profile-contributions progress{width:100%;max-width:400px}.live-market-feed{list-style:none;padding:0}.live-market-card{padding:16px;border-bottom:1px solid var(--border,#354756);overflow-wrap:anywhere}.live-market-card img.market-photo{max-width:100%;max-height:240px;border-radius:8px}.live-market-editor label{display:block;margin:12px 0}.live-market-editor input,.live-market-editor select,.live-market-editor textarea{display:block;max-width:100%;width:100%;box-sizing:border-box}.live-market-editor{max-width:560px;width:calc(100% - 40px)}.live-market-editor header{display:flex;justify-content:space-between;align-items:center}.live-market-editor .photo-strip{display:flex;flex-wrap:wrap;gap:8px}.live-market-editor .photo-strip img{width:80px;height:80px;object-fit:cover}

/* Authored Community text remains keyboard accessible without changing its appearance. */
.community-translatable:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.msg-translate-tip { max-height:calc(100dvh - 1.25rem); overflow-y:auto; }

/* Photos retain their original media URL in the full-window viewer. */
.message-photo-open { display:block; padding:0; border:0; background:transparent; max-width:100%; cursor:zoom-in; }
.message-photo-open:focus-visible, .message-photo-close:focus-visible { outline:3px solid var(--accent, #57b9f3); outline-offset:3px; }
dialog.message-photo-viewer { position:fixed; inset:0; box-sizing:border-box; margin:0; padding:60px 12px 12px; width:100vw; height:100dvh; max-width:none; max-height:none; border:0; border-radius:0; background:#101318; color:white; overflow:hidden; }
.message-photo-viewer::backdrop { background:#101318; }
.message-photo-viewer > img { display:block; width:100%; height:100%; object-fit:contain; }
.message-photo-close { position:absolute; right:12px; top:8px; width:44px; height:44px; display:grid; place-items:center; border:0; background:transparent; color:inherit; cursor:pointer; }
.message-photo-expand { width:44px; height:44px; display:grid; place-items:center; color:inherit; }

/* Audio checks use the shared profile surface on every client. */
.audio-device-test{margin-top:1rem;min-width:0}.audio-device-test button{white-space:normal;min-height:44px}.audio-device-test>button{background:transparent;border-color:transparent;text-align:start}.audio-device-test button:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}.audio-device-test [hidden]{display:none!important}.audio-device-test>div{padding-top:.5rem}.audio-test-controls{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0}.audio-device-test label:has(meter){display:flex;flex-direction:column;gap:.4rem}.audio-device-test meter{display:block;width:100%;height:1.2rem}.audio-device-test select{max-width:100%;min-height:44px}.audio-device-test [role=status]{min-height:2.5em;overflow-wrap:anywhere}