:root {
  color-scheme: light;
  --bg: #f5f7f6;
  --panel: #ffffff;
  --panel-soft: #eef4f1;
  --ink: #10201a;
  --muted: #60736b;
  --line: #dce7e2;
  --brand: #0b8063;
  --brand-strong: #004d40;
  --brand-deep: #00382f;
  --brand-soft: #e0f2f1;
  --chat-bg: #f2f4f3;
  --message-in: #ffffff;
  --message-out: #e1f5fe;
  --message-text: #111b21;
  --message-meta: #667781;
  --message-panel: #f5f7f6;
  --quote-bg: rgba(0, 77, 64, 0.07);
  --gold: #ffbf00;
  --danger: #b42318;
  --shadow: 0 22px 70px rgba(0, 77, 64, 0.12);
  --soft-shadow: 0 12px 34px rgba(0, 77, 64, 0.08);
  --radius: 12px;
  --lumina-surface: #f8f9fa;
  --lumina-surface-lowest: #ffffff;
  --lumina-surface-low: #f3f4f5;
  --lumina-surface-container: #edeeef;
  --lumina-surface-high: #e7e8e9;
  --lumina-primary: #006c49;
  --lumina-success: #10b981;
  --lumina-secondary-container: #94f1d6;
  --lumina-on-secondary-container: #00705b;
  --lumina-text: #111827;
  --lumina-muted: #6b7280;
  --lumina-border: #e5e7eb;
  --lumina-deep: #133d33;
}

/* v439: rail tab icons must not depend on remote Material Symbols font. */
.rail-icon[data-rail-icon],
.chat-view .rail-nav .rail-icon[data-rail-icon],
.chat-view .rail-nav #profileQuickBtn .rail-icon[data-rail-icon],
.profile-bottom-nav button .rail-icon[data-rail-icon],
#profileBottomNav.profile-bottom-nav.rail-nav > .rail-button > .rail-icon[data-rail-icon] {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
  font-family: system-ui, sans-serif !important;
  font-size: 0 !important;
  font-weight: 400 !important;
  line-height: 0 !important;
  text-indent: -999px !important;
  white-space: nowrap !important;
  font-variation-settings: normal !important;
}

.rail-icon[data-rail-icon]::before,
.chat-view .rail-nav .rail-icon[data-rail-icon]::before,
.profile-bottom-nav button .rail-icon[data-rail-icon]::before {
  content: "" !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  background: currentColor !important;
  -webkit-mask: var(--rail-icon-mask) center / contain no-repeat !important;
  mask: var(--rail-icon-mask) center / contain no-repeat !important;
}

.rail-icon[data-rail-icon="chat"] {
  --rail-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4.5h16v11.8H9.3L4 20.2V4.5Zm2 2v9.75l2.65-1.95H18V6.5H6Z'/%3E%3C/svg%3E");
}

.rail-icon[data-rail-icon="contacts"] {
  --rail-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3.5h14v17H5v-17Zm2 2v13h10v-13H7Zm5 2.1a2.35 2.35 0 1 1 0 4.7 2.35 2.35 0 0 1 0-4.7Zm-4.1 8.7c.55-2.1 2.05-3.15 4.1-3.15s3.55 1.05 4.1 3.15H7.9Z'/%3E%3C/svg%3E");
}

.rail-icon[data-rail-icon="apps"] {
  --rail-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm6 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm6 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4ZM6 10a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm6 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm6 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4ZM6 15a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm6 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm6 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z'/%3E%3C/svg%3E");
}

.rail-icon[data-rail-icon="person"] {
  --rail-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 4.2a4.1 4.1 0 1 1 0 8.2 4.1 4.1 0 0 1 0-8.2Zm0 10.2c4.2 0 7.1 2.05 7.1 5.05v1.05H4.9v-1.05c0-3 2.9-5.05 7.1-5.05Zm0 2c-2.45 0-4.3.75-4.9 2.1h9.8c-.6-1.35-2.45-2.1-4.9-2.1Z'/%3E%3C/svg%3E");
}

.rail-icon[data-rail-icon="star"] {
  --rail-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 3 2.75 5.65 6.25.9-4.52 4.4 1.07 6.2L12 17.25l-5.55 2.9 1.07-6.2L3 9.55l6.25-.9L12 3Zm0 4.55-1.45 2.95-3.25.47 2.35 2.3-.55 3.23L12 14.98l2.9 1.52-.55-3.23 2.35-2.3-3.25-.47L12 7.55Z'/%3E%3C/svg%3E");
}

.rail-icon[data-rail-icon="edit-note"] {
  --rail-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h11v2H6v12h12v-9h2v11H4V4Zm4 4h6v2H8V8Zm0 4h5v2H8v-2Zm9.35-8.2 2.85 2.85-7.9 7.9-3.15.55.55-3.15 7.65-7.65Z'/%3E%3C/svg%3E");
}

.rail-icon[data-rail-icon="bookmarks"] {
  --rail-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 3.5h12v17l-6-3.6-6 3.6v-17Zm2 2v11.45l4-2.4 4 2.4V5.5H8Z'/%3E%3C/svg%3E");
}

.rail-icon[data-rail-icon="lock"] {
  --rail-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10V8.2a5 5 0 0 1 10 0V10h2v10H5V10h2Zm2 0h6V8.2a3 3 0 0 0-6 0V10Zm-2 2v6h10v-6H7Z'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(0, 77, 64, 0.08), transparent 38%),
    linear-gradient(315deg, rgba(255, 191, 0, 0.11), transparent 34%),
    var(--bg);
  color: var(--ink);
  font-family:
    "Microsoft YaHei",
    "PingFang SC",
    "Segoe UI",
    system-ui,
    sans-serif;
  overscroll-behavior-x: none;
  -webkit-text-size-adjust: 100%;
}

html,
body,
.app-shell,
.auth-view,
.chat-view {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

button.is-loading {
  cursor: progress;
  pointer-events: none;
}

button.is-loading::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 6px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  vertical-align: -0.14em;
  animation: button-loading-spin 0.72s linear infinite;
}

button.icon-button.is-loading::before,
button.rail-button.is-loading::before {
  margin-right: 0;
}

@keyframes button-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.hidden {
  display: none !important;
}

.app-shell {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

body.is-booting .auth-view,
body.is-booting .chat-view {
  visibility: hidden;
}

.startup-mask {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: calc(24px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));
  background:
    linear-gradient(135deg, rgba(12, 124, 102, 0.12), transparent 42%),
    linear-gradient(315deg, rgba(209, 141, 47, 0.12), transparent 36%),
    var(--bg);
}

.startup-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(280px, 88vw);
  padding: 26px 22px;
  border: 1px solid rgba(12, 124, 102, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
  text-align: center;
}

.startup-logo {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: var(--brand-soft);
}

.startup-logo img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.startup-card strong {
  color: var(--ink);
  font-size: 20px;
}

.startup-card span {
  color: var(--muted);
  font-size: 14px;
}

.startup-spinner {
  width: 24px;
  height: 24px;
  margin-top: 4px;
  border: 3px solid rgba(12, 124, 102, 0.14);
  border-top-color: var(--brand);
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}

.conversation-loading-state {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 24px;
}

.conversation-loading-card {
  width: min(280px, 82vw);
  box-shadow: 0 12px 34px rgba(12, 24, 20, 0.08);
}

.auth-view {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(340px, 440px);
  gap: 40px;
  align-items: start;
  max-width: 1160px;
  height: 100%;
  min-height: 0;
  overflow: auto;
  margin: 0 auto;
  padding: 40px 24px;
}

.auth-visual {
  position: relative;
  min-height: 520px;
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(140deg, rgba(7, 95, 77, 0.92), rgba(19, 32, 28, 0.96)),
    radial-gradient(circle at 74% 18%, rgba(209, 141, 47, 0.45), transparent 36%);
  box-shadow: var(--shadow);
}

.auth-visual::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent);
}

.cipher-card {
  position: absolute;
  left: 10%;
  top: 20%;
  display: flex;
  align-items: center;
  width: min(420px, 80%);
  gap: 22px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
}

.cipher-mark {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  background: #f6fffb;
  color: var(--brand-strong);
  border-radius: 8px;
  font-size: 36px;
  font-weight: 800;
}

.cipher-lines {
  display: grid;
  gap: 12px;
  flex: 1;
}

.cipher-lines span {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
}

.cipher-lines span:nth-child(2) {
  width: 76%;
}

.cipher-lines span:nth-child(3) {
  width: 54%;
  background: rgba(209, 141, 47, 0.88);
}

.signal-grid {
  position: absolute;
  right: 9%;
  bottom: 14%;
  display: grid;
  grid-template-columns: repeat(3, 64px);
  gap: 10px;
}

.signal-grid span {
  display: grid;
  place-items: center;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.86);
  font-family: Consolas, monospace;
  background: rgba(255, 255, 255, 0.08);
}

.auth-panel {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
}

.brand-row,
.rail-brand,
.user-strip,
.chat-head,
.list-head {
  display: flex;
  align-items: center;
}

.brand-row {
  gap: 14px;
  margin-bottom: 24px;
}

.brand-logo,
.avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
}

.brand-logo.small {
  width: 36px;
  height: 36px;
}

.brand-logo img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
}

.avatar {
  background: #e4f3ef;
  color: var(--brand-strong);
}

.avatar.is-bot {
  background: #10251f;
  color: #d9fdd3;
}

.avatar.is-abnormal {
  background: #fff1f0;
  color: var(--danger);
  border: 1px solid rgba(180, 35, 24, 0.22);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar.is-default-avatar {
  overflow: hidden;
  background: #effaf6;
  color: transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 108, 73, 0.05);
}

.avatar.is-default-avatar img {
  display: block;
  border-radius: inherit;
}

.avatar.is-group-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar.mini {
  width: 28px;
  height: 28px;
  font-size: 13px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.brand-row h1 {
  font-size: 28px;
  line-height: 1.2;
}

.brand-row p,
.chat-head p,
.list-head p,
.user-strip p,
.conversation-copy small,
.message-meta,
.panel-label,
.conversation-meta span,
.conversation-meta small {
  color: var(--muted);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.auth-tab {
  border: 0;
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--muted);
  background: transparent;
}

.auth-tab.active {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 4px 20px rgba(23, 32, 27, 0.08);
}

.auth-form,
.modal-panel form {
  display: none;
  gap: 15px;
}

.auth-form.active,
.modal-panel form,
.unlock-row {
  display: grid;
}

.password-login-fields {
  display: grid;
  gap: 15px;
}

.qr-login-panel {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 8px 0 2px;
  text-align: center;
}

.qr-login-code {
  display: grid;
  place-items: center;
  width: 224px;
  height: 224px;
  border: 1px solid rgba(0, 77, 64, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0, 77, 64, 0.08);
}

.qr-login-code img {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: contain;
}

.qr-login-panel strong {
  color: var(--ink);
  font-size: 18px;
}

.qr-login-panel span {
  color: var(--muted);
  font-size: 13px;
}

.qr-login-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}

@media (max-width: 760px), (pointer: coarse) {
  #qrLoginStartBtn {
    display: none !important;
  }
}

.profile-version,
.security-version {
  margin: 12px 0 8px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

#noteReaderBody,
#noteReaderBody * {
  -webkit-user-select: text !important;
  user-select: text !important;
}

.app-version {
  margin-top: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  opacity: 0.78;
}

label,
.form-field {
  display: grid;
  gap: 7px;
}

label span,
.form-field > span,
.form-label {
  color: var(--muted);
  font-size: 13px;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: 0;
  background: #fff;
  color: var(--ink);
}

input,
select {
  height: 44px;
  padding: 0 13px;
}

textarea {
  min-height: 44px;
  max-height: 130px;
  padding: 11px 12px;
  resize: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(12, 124, 102, 0.12);
}

.primary-button,
.ghost-button,
.icon-button,
.rail-button {
  border: 0;
  border-radius: 8px;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.primary-button {
  min-height: 44px;
  padding: 0 18px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
}

.primary-button:hover,
.rail-button.active,
.icon-button:hover {
  background: var(--brand-strong);
  color: #fff;
}

.primary-button.compact {
  min-height: 40px;
  white-space: nowrap;
}

.ghost-button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.ghost-button:hover {
  border-color: var(--brand);
  color: var(--brand-strong);
}

.ghost-button.danger {
  color: var(--danger);
}

.ghost-button.danger:hover {
  border-color: var(--danger);
  background: #fff6f4;
  color: var(--danger);
}

.icon-button,
.rail-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: #ecf3ef;
  color: var(--brand-strong);
  font-weight: 800;
}

.chat-view {
  display: grid;
  grid-template-columns: 76px minmax(260px, 340px) minmax(0, 1fr) minmax(250px, 300px);
  gap: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--panel);
}

.rail {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
  overflow: hidden;
  padding: 18px 12px;
  background: #12211c;
  color: #fff;
}

.rail-brand {
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
}

.rail-nav,
.rail-bottom {
  display: grid;
  justify-content: center;
  gap: 10px;
}

.rail-nav {
  align-content: start;
  padding-top: 42px;
}

.rail-button.is-secure {
  background: rgba(0, 168, 132, 0.28);
  color: #dff8ef;
}

.rail-button.is-locked {
  background: rgba(209, 141, 47, 0.9);
  color: #12211c;
}

.list-panel,
.detail-panel {
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: var(--panel-soft);
}

.list-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  min-height: 0;
}

.list-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 18px 14px;
}

.list-title-copy {
  display: none;
}

.list-head-logo {
  position: absolute;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(232, 248, 242, 0.92);
  box-shadow: 0 8px 20px rgba(17, 27, 33, 0.06);
  transform: translateX(-50%);
  pointer-events: none;
}

.list-head-logo img {
  width: 30px;
  height: 30px;
}

.list-head h2,
.chat-head h2,
.user-strip h2 {
  font-size: 20px;
}

.head-actions {
  position: relative;
  display: flex;
  gap: 8px;
  margin-left: auto;
  z-index: 2;
}

.list-create-trigger.active {
  background: var(--brand-strong);
  color: #fff;
}

.list-create-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 35;
  display: grid;
  gap: 10px;
  width: 226px;
  padding: 8px;
  border: 1px solid rgba(12, 124, 102, 0.16);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(17, 27, 33, 0.16);
}

.list-create-menu::before {
  position: absolute;
  top: -6px;
  right: 14px;
  width: 12px;
  height: 12px;
  border-left: 1px solid rgba(12, 124, 102, 0.16);
  border-top: 1px solid rgba(12, 124, 102, 0.16);
  background: #fff;
  content: "";
  transform: rotate(45deg);
}

.list-create-menu-section {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.list-create-menu-section + .list-create-menu-section {
  padding-top: 8px;
  border-top: 1px solid rgba(17, 27, 33, 0.08);
}

.list-create-menu-section p {
  margin: 0;
  padding: 0 8px 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.list-create-menu button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.list-create-menu button:hover {
  background: var(--brand-soft);
}

.list-create-menu strong {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 15px;
  font-weight: 900;
}

.list-create-menu span {
  overflow: hidden;
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-box {
  padding: 0 18px 14px;
}

.application-notice-panel {
  display: grid;
  gap: 8px;
  padding: 0 18px 12px;
}

.new-user-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0 18px 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 168, 132, 0.16);
  border-radius: 8px;
  background: rgba(223, 243, 237, 0.72);
}

.new-user-guide div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.new-user-guide strong {
  color: var(--brand-strong);
  font-size: 13px;
}

.new-user-guide span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.application-notice-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.application-notice-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(12, 124, 102, 0.16);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  text-align: left;
  box-shadow: 0 8px 24px rgba(17, 27, 33, 0.06);
}

.application-notice-card:hover {
  border-color: rgba(12, 124, 102, 0.36);
  box-shadow: 0 12px 30px rgba(17, 27, 33, 0.1);
}

.application-notice-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-weight: 900;
}

.application-notice-card.group .application-notice-icon {
  background: #fff2dc;
  color: #9a5f10;
}

.application-notice-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.application-notice-copy strong,
.application-notice-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.application-notice-copy small {
  color: var(--muted);
  font-size: 12px;
}

.application-notice-badge {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.conversation-list {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 4px 10px 16px;
}

.conversation-context-menu {
  position: fixed;
  z-index: 80;
  display: grid;
  gap: 4px;
  width: 188px;
  padding: 8px;
  border: 1px solid rgba(12, 124, 102, 0.16);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(17, 27, 33, 0.16);
}

.conversation-context-menu button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.conversation-context-menu button:hover {
  background: var(--brand-soft);
}

.conversation-context-menu button.danger:hover {
  background: #fff1f0;
}

.conversation-context-menu strong {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 14px;
  font-weight: 900;
}

.conversation-context-menu .danger strong {
  background: #fff1f0;
  color: var(--danger);
}

.conversation-context-menu span {
  overflow: hidden;
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.directory-section {
  margin-bottom: 10px;
}

.directory-tag-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 4px);
  min-height: 44px;
  margin: 2px 2px 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: #f1f3f4;
  color: var(--ink);
  text-align: left;
}

.directory-tag-entry:hover {
  background: #eceff1;
  box-shadow: none;
}

.directory-tag-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.directory-tag-main strong {
  color: #24312d;
  font-size: 14px;
  font-weight: 900;
}

.directory-tag-main small {
  color: #7a8690;
  font-size: 12px;
  font-weight: 650;
}

.directory-tag-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(0, 77, 64, 0.08);
  color: var(--brand-strong);
  font-family: "Material Symbols Outlined";
  font-size: 18px;
  font-weight: 600;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 20;
}

.directory-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 4px);
  min-height: 38px;
  margin: 2px 2px 6px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: #f1f3f4;
  color: var(--ink);
  text-align: left;
}

.directory-section-head:hover {
  background: #eceff1;
  box-shadow: none;
}

.directory-section-title {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  line-height: 1;
}

.directory-section-title strong {
  overflow: hidden;
  color: #24312d;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.directory-section-title small {
  flex: 0 0 auto;
  color: #7a8690;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.directory-section-side {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.directory-section-caret {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: #52605a;
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 20;
}

.directory-section-body {
  display: grid;
  gap: 3px;
}

.directory-item {
  margin-bottom: 3px;
}

.directory-item .conversation-side {
  min-width: 76px;
}

.directory-empty {
  margin: 2px 2px 8px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  font-size: 13px;
}

.conversation-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  gap: 10px;
  min-height: 68px;
  margin-bottom: 6px;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
}

.conversation-item:hover,
.conversation-item.active {
  background: #fff;
  box-shadow: 0 8px 30px rgba(23, 32, 27, 0.08);
}

.conversation-avatar-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
}

.conversation-avatar-wrap > .avatar {
  grid-area: 1 / 1;
}

.notebook-avatar {
  background: linear-gradient(145deg, #0f8d74, #11c28f);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(17, 194, 143, 0.22);
}

.conversation-security-icon {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid #f8faf7;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(23, 32, 27, 0.16);
}

.conversation-security-icon svg {
  display: block;
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.conversation-security-icon.is-locked {
  background: #10251f;
}

.conversation-security-icon.is-bot-badge {
  background: #0b7d63;
  color: #fff;
}

.conversation-security-icon.is-unlocked,
.conversation-security-icon.is-encrypted {
  background: var(--brand);
}

.conversation-security-icon.is-temporary {
  background: #d18d2f;
}

.conversation-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.conversation-copy strong,
.conversation-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-time {
  align-self: start;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}

.conversation-last-login {
  color: #667781;
  font-size: 11px;
  line-height: 1.25;
}

.conversation-side {
  display: grid;
  justify-items: end;
  align-self: stretch;
  gap: 5px;
  min-width: 42px;
}

.conversation-item.has-unread {
  background: #fff;
}

.conversation-item.has-unread .conversation-copy strong {
  color: var(--ink);
  font-weight: 900;
}

.conversation-item.has-unread .conversation-copy small {
  color: #2d3a34;
  font-weight: 700;
}

.conversation-unread-text {
  margin-right: 5px;
  color: #e53935;
  font-weight: 900;
}

.conversation-item.has-unread .conversation-time {
  color: #e53935;
  font-weight: 800;
}

.unread-badge {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.list-version {
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  opacity: 0.7;
}

.list-panel > .list-version {
  display: none;
}

.conversation-list .list-version-inline {
  display: block;
  padding: 14px 12px 18px;
  pointer-events: none;
}

.conversation-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.conversation-flags em,
.conversation-draft {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
}

.conversation-flags em {
  padding: 2px 6px;
  background: #e7f5ef;
  color: var(--brand-strong);
}

.conversation-draft {
  margin-right: 5px;
  color: #d18d2f;
}

.icon-button.has-unread,
.rail-button.has-unread {
  position: relative;
}

.icon-button.has-unread::after,
.rail-button.has-unread::after {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--message-panel);
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  content: attr(data-unread);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.list-empty,
.empty-state {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 180px;
  padding: 20px;
  color: var(--muted);
  text-align: center;
}

.start-steps {
  display: grid;
  gap: 6px;
  margin: 4px 0 8px;
  padding: 0;
  list-style: none;
}

.start-steps li {
  position: relative;
  padding-left: 22px;
  color: var(--message-meta);
  font-size: 14px;
  text-align: left;
}

.start-steps li::before {
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  content: counter(list-item);
}

.empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.chat-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--chat-bg);
}

.chat-head {
  position: relative;
  gap: 12px;
  min-height: 78px;
  padding: 16px 22px;
  border-bottom: 1px solid #d1d7db;
  background: var(--message-panel);
}

.chat-title-area {
  min-width: 0;
  flex: 1;
  cursor: default;
}

.chat-title-area h2,
.chat-title-area p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.chat-actions #voiceCallBtn,
.chat-actions #videoCallBtn,
.chat-actions #notifyBtn {
  display: none !important;
}

.chat-more-button {
  display: none;
}

.chat-more-button:not(.hidden) {
  display: grid;
  flex: 0 0 auto;
}

.chat-more-button.active {
  background: rgba(0, 168, 132, 0.12);
  color: var(--brand-strong);
}

.chat-more-menu {
  position: absolute;
  top: calc(100% - 8px);
  right: 18px;
  z-index: 35;
  display: grid;
  width: min(230px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid rgba(17, 27, 33, 0.1);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(17, 27, 33, 0.18);
}

.chat-more-menu button {
  display: grid;
  gap: 2px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(17, 27, 33, 0.08);
  padding: 11px 13px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.chat-more-menu button:last-child {
  border-bottom: 0;
}

.chat-more-menu button:hover,
.chat-more-menu button:focus-visible {
  background: #f4f8f6;
}

.chat-more-menu strong {
  font-size: 14px;
}

.chat-more-menu span {
  color: var(--muted);
  font-size: 12px;
}

.chat-more-menu .danger strong {
  color: var(--danger);
}

.sound-test-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ghost-button.compact {
  min-height: 34px;
  padding-inline: 12px;
  white-space: nowrap;
}

.messages {
  min-height: 0;
  overflow: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 22px;
  background-color: var(--chat-bg);
  background-image:
    linear-gradient(30deg, rgba(17, 27, 33, 0.025) 12%, transparent 12.5%, transparent 87%, rgba(17, 27, 33, 0.025) 87.5%),
    linear-gradient(150deg, rgba(17, 27, 33, 0.025) 12%, transparent 12.5%, transparent 87%, rgba(17, 27, 33, 0.025) 87.5%);
  background-size: 34px 34px;
}

.unread-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 10px 0 16px;
  color: #008069;
  font-size: 12px;
  font-weight: 900;
}

.unread-divider::before,
.unread-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0, 128, 105, 0.22);
}

.unread-divider span {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 168, 132, 0.12);
}

.message-history-loader {
  display: flex;
  justify-content: center;
  margin: 0 0 14px;
}

.message-history-loader button {
  border: 1px solid rgba(17, 27, 33, 0.08);
  border-radius: 999px;
  padding: 7px 14px;
  color: #54656f;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 1px 2px rgba(17, 27, 33, 0.06);
  cursor: pointer;
}

.message-history-loader button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  margin: 0 0 12px;
  -webkit-touch-callout: none;
}

.message.mine {
  align-items: flex-end;
  margin-left: auto;
}

.message-content-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: fit-content;
  max-width: min(78%, 680px);
  min-width: 0;
}

.message.mine .message-content-row {
  flex-direction: row-reverse;
  align-self: flex-end;
}

.message:not(.mine) .message-content-row {
  align-self: flex-start;
}

.message-stack {
  display: grid;
  justify-items: start;
  max-width: calc(100% - 36px);
  min-width: 0;
}

.message.mine .message-stack {
  justify-items: end;
}

.message-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 8px;
  background: #e4f3ef;
  color: var(--brand-strong);
  font-size: 13px;
  font-weight: 900;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(17, 27, 33, 0.08);
}

.message-avatar.is-bot {
  background: #10251f;
  color: #d9fdd3;
}

.message-avatar.is-abnormal {
  background: #fff1f0;
  color: var(--danger);
  border: 1px solid rgba(180, 35, 24, 0.22);
}

.message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-avatar[data-message-sender],
.message-sender-name {
  cursor: pointer;
}

.message-sender-name {
  justify-self: start;
  margin: 0 0 2px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--message-meta);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.message-sender-name:hover {
  color: var(--brand-strong);
}

.message-content-row .message-bubble,
.message-content-row .message-meta,
.message-content-row .message-reactions {
  max-width: 100%;
}

.message-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  align-self: flex-start;
  width: fit-content;
  gap: 7px;
  row-gap: 2px;
  max-width: min(70%, 620px);
  min-width: 0;
  margin: 3px 6px 0;
  color: var(--message-meta);
  font-size: 11px;
  opacity: 1;
}

.message.mine .message-meta {
  align-self: flex-end;
  justify-content: flex-end;
}

.message-time-only {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.message-edited {
  color: var(--message-meta);
}

.message-action-strip {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  max-width: 100%;
}

.message:hover .message-action-strip,
.message:focus-within .message-action-strip,
.message.actions-open .message-action-strip,
.message.selected .message-action-strip,
.message.local-failed .message-action-strip {
  display: inline-flex;
}

.message.mine .message-meta,
.message.local-sending .message-meta,
.message.local-failed .message-meta {
  opacity: 1;
}

.message.local-failed .message-bubble {
  outline: 1px solid rgba(180, 35, 24, 0.32);
}

.message-reply-button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--message-meta);
  cursor: pointer;
  font: inherit;
}

.message-reply-button:hover {
  color: var(--brand-strong);
}

.message-recall-button {
  color: #b42318;
}

.message-delete-button {
  color: #b42318;
}

.message-reply-button.is-favorite {
  color: var(--gold);
  font-weight: 800;
}

.forwarded-mark {
  display: block;
  margin-bottom: 2px;
  color: var(--message-meta);
  font-size: 11px;
  font-style: italic;
}

.multi-select-bar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px;
  border: 1px solid rgba(17, 27, 33, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 16px rgba(17, 27, 33, 0.08);
}

.multi-select-bar span {
  margin-right: auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.multi-select-close {
  width: 34px;
  height: 34px;
  font-size: 20px;
  font-weight: 900;
}

.message-select-button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0 6px 4px;
  border: 1px solid rgba(17, 27, 33, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--brand-strong);
  font-size: 13px;
  font-weight: 900;
}

.message.mine .message-select-button {
  align-self: flex-end;
}

.message.selecting,
.message.mine.selecting {
  align-items: flex-start;
}

.message.selecting .message-select-button,
.message.mine.selecting .message-select-button {
  align-self: flex-start;
  margin-left: 0;
  margin-right: 8px;
}

.message.selected .message-bubble {
  outline: 2px solid rgba(12, 124, 102, 0.32);
  outline-offset: 2px;
}

.message-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: min(70%, 620px);
  margin: 3px 6px 0;
}

.message.mine .message-reactions {
  align-self: flex-end;
  justify-content: flex-end;
}

.message-reactions button {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid rgba(17, 27, 33, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #3b4a54;
  font-size: 12px;
}

.message-reactions button.active {
  border-color: rgba(12, 124, 102, 0.36);
  background: #e7f5ef;
  color: var(--brand-strong);
}

.recalled-message {
  color: var(--message-meta);
  font-size: 13px;
  font-style: italic;
}

.message-bubble.is-recalled {
  background: rgba(255, 255, 255, 0.72);
  color: var(--message-meta);
}

.message.mine .message-bubble.is-recalled {
  background: rgba(217, 253, 211, 0.68);
}

.message-status {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--message-meta);
  font: inherit;
  white-space: nowrap;
}

.message-status.sending::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 999px;
  vertical-align: -1px;
  animation: spin 0.8s linear infinite;
}

.message-status.failed {
  color: var(--danger);
  cursor: pointer;
  font-weight: 800;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* v236 quick lock entry and desktop composer aligned with the mobile row. */

.chat-lock-button.is-locked {
  background: var(--lumina-primary, var(--brand-strong)) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(0, 128, 105, 0.18);
}

.global-lock-button {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 260;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 16px;
  background: #ffffff;
  color: #24483e;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
  cursor: pointer;
}

@media (min-width: 761px) {
  .composer {
    grid-template-columns: minmax(220px, 1fr) auto auto auto !important;
    grid-template-areas:
      "reply reply reply reply"
      "clip clip clip clip"
      "input burn emoji action"
      "panel panel panel panel" !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    background: #f7f7f7 !important;
  }

  .composer textarea,
  .voice-hold-button {
    grid-area: input !important;
  }

  .composer textarea {
    width: 100% !important;
    min-height: 40px !important;
    max-height: 96px !important;
    padding: 9px 40px 9px 13px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  .voice-hold-button {
    width: 100% !important;
    min-height: 40px !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .composer #voiceRecordBtn {
    grid-area: input !important;
    justify-self: end !important;
    z-index: 2 !important;
    display: grid !important;
    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    margin-right: 6px !important;
    border: 0 !important;
    background-color: transparent !important;
    background-image: url("./ui-voice.png?v=144") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 25px 25px !important;
    font-size: 0 !important;
  }

  .composer #voiceRecordBtn.active {
    background-image: url("./ui-keyboard.png?v=144") !important;
  }

  .text-burn-toggle,
  .voice-burn-toggle {
    grid-area: burn !important;
    min-width: 50px !important;
    min-height: 40px !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .composer #emojiToggle {
    grid-area: emoji !important;
    display: grid !important;
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    background: transparent url("./ui-emoji.png?v=144") center / 30px 30px no-repeat !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  .composer #moreToggle {
    grid-area: action !important;
    display: grid !important;
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111 !important;
    font-size: 31px !important;
    font-weight: 300 !important;
  }

  .composer.has-message-text #moreToggle {
    display: none !important;
  }

  .composer #sendMessageBtn {
    grid-area: action !important;
    display: none !important;
    min-width: 60px !important;
    min-height: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: #58c866 !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }

  .composer.has-message-text #sendMessageBtn:not(.hidden) {
    display: inline-grid !important;
  }
}

/* v254: the header lock controls the current conversation content lock. */
@media (max-width: 760px) {
  .chat-view.is-chat-open .chat-head {
    grid-template-columns: 40px minmax(0, 1fr) 38px 38px !important;
    grid-template-areas: "back title lock more" !important;
    column-gap: 2px;
  }

  .chat-view.is-chat-open .chat-lock-button:not(.hidden) {
    grid-area: lock;
    display: grid !important;
    place-items: center;
    justify-self: end;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    font-size: 21px;
    background: rgba(236, 243, 239, 0.92) !important;
  }

  .chat-view.is-chat-open .chat-more-button:not(.hidden) {
    grid-area: more;
  }
}

/* v238 terminal override: mobile top row and left quick lock. */

/* v242: pixel-align the mobile search input and create button. */
@media (max-width: 760px) {
  .chat-view:not(.is-chat-open) .list-panel,
  .chat-view .list-panel {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    column-gap: 14px !important;
    padding-top: calc(10px + env(safe-area-inset-top)) !important;
  }

  .chat-view:not(.is-chat-open) .search-box,
  .chat-view .search-box,
  .chat-view:not(.is-chat-open) .list-head,
  .chat-view .list-head,
  .chat-view:not(.is-chat-open) .head-actions,
  .chat-view .head-actions,
  .chat-view:not(.is-chat-open) .list-create-trigger,
  .chat-view .list-create-trigger {
    box-sizing: border-box !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
  }

  .chat-view:not(.is-chat-open) .list-head,
  .chat-view .list-head {
    top: auto !important;
    align-self: start !important;
    justify-self: stretch !important;
    justify-items: stretch !important;
  }

  .chat-view:not(.is-chat-open) .head-actions,
  .chat-view .head-actions {
    align-self: start !important;
    justify-self: stretch !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  .chat-view:not(.is-chat-open) .list-create-trigger,
  .chat-view .list-create-trigger {
    position: static !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 44px !important;
  }
}

/* v239 terminal override: exact mobile search/+ alignment. */

/* v241 final override: keep mobile search and + in the same grid row. */

/* v241: mobile list header is one real row, so search and + stay aligned. */

/* v239 align mobile search and plus button as one clean row. */
@media (max-width: 760px) {
  .chat-view:not(.is-chat-open) .list-head,
  .chat-view .list-head {
    top: calc(10px + env(safe-area-inset-top)) !important;
    right: calc(16px + env(safe-area-inset-right)) !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
  }

  .chat-view:not(.is-chat-open) .list-create-trigger,
  .chat-view .list-create-trigger {
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 22px !important;
    transform: none !important;
  }
}

/* v238 final mobile list header: no logo, search and plus on one row. */
@media (max-width: 760px) {

  .chat-view:not(.is-chat-open) .search-box,
  .chat-view .search-box {
    grid-row: 1 !important;
    padding: calc(10px + env(safe-area-inset-top)) calc(70px + env(safe-area-inset-right)) 14px calc(16px + env(safe-area-inset-left)) !important;
    z-index: 30 !important;
  }
}

/* v237 move version to the desktop rail and move the quick lock to the lower-left. */
.rail-version {
  display: none;
}

@media (min-width: 761px) {

  .rail-version {
    grid-row: 4;
    display: block;
    justify-self: center;
    max-width: 58px;
    margin-top: 4px;
    color: rgba(60, 74, 66, 0.58);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }

  .global-lock-button {
    right: auto !important;
    left: calc(14px + env(safe-area-inset-left)) !important;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }
}

/* Mobile polish pass: cleaner chat list and navigation. */
@media (max-width: 760px) {
  body {
    background: #f6faf8;
  }

  .chat-view:not(.is-chat-open) {
    grid-template-rows: 58px minmax(0, 1fr) calc(66px + env(safe-area-inset-bottom)) !important;
    background:
      radial-gradient(circle at 28px 18px, rgba(16, 185, 129, 0.08), transparent 25px),
      linear-gradient(180deg, #f8fcfa 0%, #f5f8f7 100%);
  }

  .chat-view:not(.is-chat-open) .rail {
    grid-template-rows: 58px minmax(0, 1fr) calc(66px + env(safe-area-inset-bottom));
    pointer-events: none;
  }

  .chat-view:not(.is-chat-open) .rail-nav,
  .chat-view:not(.is-chat-open) .rail-bottom {
    pointer-events: auto;
    height: calc(66px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -8px 26px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(14px);
  }

  .chat-view:not(.is-chat-open) .rail-nav {
    width: 50%;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom)) 12px;
  }

  .chat-view:not(.is-chat-open) .rail-bottom {
    width: 50%;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom)) 0;
  }

  .chat-view:not(.is-chat-open) .rail-button {
    min-width: 54px;
    height: 50px;
    border-radius: 15px;
    color: #43524b;
    font-size: 17px;
    font-weight: 800;
  }

  .chat-view:not(.is-chat-open) .rail-button::after {
    font-size: 10px;
    line-height: 13px;
    font-weight: 700;
  }

  .chat-view:not(.is-chat-open) .rail-button.active {
    background: #91efd7;
    color: #063d2f;
    box-shadow: inset 0 0 0 1px rgba(0, 108, 73, 0.05);
  }

  .chat-view:not(.is-chat-open) .list-panel {
    grid-row: 1 / 3;
    display: grid;
    grid-template-rows: 58px auto minmax(0, 1fr) auto;
    background: transparent;
    overflow: hidden;
  }

  .chat-view:not(.is-chat-open) .list-head {
    position: sticky;
    top: 0;
    inset: auto;
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: calc(8px + env(safe-area-inset-top)) 16px 7px;
    border-bottom: 0;
    background: rgba(248, 252, 250, 0.92);
    box-shadow: none;
    backdrop-filter: blur(16px);
  }

  .chat-view:not(.is-chat-open) .list-title-copy h2 {
    color: #007a58;
    font-size: 20px;
    line-height: 28px;
    font-weight: 850;
  }

  .chat-view:not(.is-chat-open) .head-actions {
    margin-left: auto;
  }

  .chat-view:not(.is-chat-open) .list-create-trigger {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.08);
    color: #007a58;
    font-size: 18px;
    font-weight: 900;
  }

  .chat-view:not(.is-chat-open) .list-create-trigger.active,
  .chat-view:not(.is-chat-open) .list-create-trigger:hover {
    background: #91efd7;
    color: #063d2f;
  }

  .chat-view:not(.is-chat-open) .search-box {
    padding: 10px 16px 8px;
  }

  .chat-view:not(.is-chat-open) .search-box input {
    height: 42px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.94);
    color: #15231d;
    font-size: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.035);
  }

  .chat-view:not(.is-chat-open) .conversation-list {
    display: block;
    min-height: 0;
    padding: 3px 12px 12px;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .chat-view:not(.is-chat-open) .conversation-list::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .chat-view:not(.is-chat-open) .conversation-item {
    grid-template-columns: 42px minmax(0, 1fr) minmax(42px, auto);
    gap: 10px;
    min-height: 64px;
    margin: 0 0 4px;
    padding: 8px 8px;
    border-radius: 16px;
    background: transparent;
    box-shadow: none;
  }

  .chat-view:not(.is-chat-open) .conversation-item.active,
  .chat-view:not(.is-chat-open) .conversation-item:hover,
  .chat-view:not(.is-chat-open) .conversation-item.has-unread {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.055);
  }

  .chat-view:not(.is-chat-open) .conversation-item.active {
    outline: 0;
    box-shadow:
      inset 3px 0 0 #10b981,
      0 8px 24px rgba(15, 23, 42, 0.055);
  }

  .chat-view:not(.is-chat-open) .conversation-avatar-wrap,
  .chat-view:not(.is-chat-open) .conversation-avatar-wrap > .avatar {
    width: 42px;
    height: 42px;
  }

  .chat-view:not(.is-chat-open) .conversation-avatar-wrap > .avatar {
    background:
      linear-gradient(145deg, rgba(148, 241, 214, 0.95), rgba(90, 224, 188, 0.78));
    color: #006c49;
    font-size: 15px;
    font-weight: 850;
    box-shadow: inset 0 0 0 1px rgba(0, 108, 73, 0.04);
  }

  .chat-view:not(.is-chat-open) .conversation-security-icon {
    right: -4px;
    bottom: -4px;
    width: 18px;
    height: 18px;
    border-width: 2px;
    font-size: 10px;
  }

  .chat-view:not(.is-chat-open) .conversation-copy {
    gap: 2px;
  }

  .chat-view:not(.is-chat-open) .conversation-copy strong {
    color: #111827;
    font-size: 15.5px;
    line-height: 21px;
    font-weight: 800;
  }

  .chat-view:not(.is-chat-open) .conversation-copy small {
    color: #667085;
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
  }

  .chat-view:not(.is-chat-open) .conversation-unread-text {
    color: #ef4444;
    font-size: 12px;
    font-weight: 800;
  }

  .chat-view:not(.is-chat-open) .conversation-side {
    gap: 6px;
    min-width: 42px;
    padding-top: 2px;
  }

  .chat-view:not(.is-chat-open) .conversation-time {
    color: #667085;
    font-size: 11px;
    line-height: 14px;
    font-weight: 650;
  }

  .chat-view:not(.is-chat-open) .conversation-item.has-unread .conversation-time {
    color: #ef4444;
  }

  .chat-view:not(.is-chat-open) .unread-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    font-size: 10px;
    box-shadow: 0 5px 12px rgba(239, 68, 68, 0.22);
  }

  .chat-view:not(.is-chat-open) .conversation-flags {
    margin-top: 1px;
  }

  .chat-view:not(.is-chat-open) .conversation-flags em,
  .chat-view:not(.is-chat-open) .conversation-draft {
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.1);
    color: #007a58;
    font-size: 10px;
    line-height: 15px;
    font-weight: 800;
  }

  .chat-view:not(.is-chat-open) .conversation-list .list-version-inline {
    padding: 12px 12px calc(84px + env(safe-area-inset-bottom));
    color: #98a2b3;
    font-size: 11px;
    font-weight: 700;
  }

  .chat-view:not(.is-chat-open) .list-empty {
    margin: 20px 16px;
    border: 1px dashed rgba(16, 185, 129, 0.25);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.68);
    color: #667085;
  }
}

.message-bubble {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  width: auto;
  min-width: 0;
  min-height: 0;
  height: auto;
  max-width: min(70%, 620px);
  padding: 5px 9px 6px;
  border: 0;
  border-radius: 7.5px;
  background: var(--message-in);
  color: var(--message-text);
  font-size: 14.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: normal;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

.message-bubble.is-text {
  display: inline-flex;
  align-items: center;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: fit-content !important;
  padding: 6px 11px !important;
  line-height: 1.35;
}

.message-text-content {
  display: block;
  margin: 0;
  padding: 0;
  white-space: pre-wrap;
}

.message.mine .message-bubble {
  align-self: flex-end;
  border-color: transparent;
  background: var(--message-out);
  color: var(--message-text);
}

.message-bubble.encrypted {
  border-style: dashed;
}

.message-quote,
.composer-reply {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border-left: 3px solid var(--brand);
  border-radius: 8px;
  background: var(--quote-bg);
  color: var(--message-text);
  white-space: normal;
}

.message-quote {
  margin-top: 6px;
  padding: 4px 7px;
  border-left: 0;
  border-radius: 4px;
  background: rgba(11, 20, 26, 0.08);
  color: #57656d;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  text-align: left;
}

.message-quote:hover {
  background: rgba(11, 20, 26, 0.13);
}

.message-quote span,
.composer-reply strong,
.composer-reply small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-quote span,
.composer-reply small {
  color: var(--message-meta);
  font-size: 13px;
}

.message-quote span {
  font-size: 12px;
}

.message-bubble.has-attachment,
.message-bubble.has-stream,
.message-bubble.has-secret,
.message-bubble.has-special {
  box-sizing: border-box;
  display: grid;
  gap: 8px;
  width: max-content;
  min-width: 0;
  max-width: min(360px, 70vw);
}

.message.mine .message-bubble.has-attachment,
.message.mine .message-bubble.has-stream,
.message.mine .message-bubble.has-secret,
.message.mine .message-bubble.has-special {
  background: var(--message-out);
  color: var(--message-text);
}

.burn-badge {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  margin-top: 2px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 241, 240, 0.9);
  color: #b42318;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.message.mine .burn-badge {
  justify-self: end;
}

.burn-badge.is-counting {
  background: #ffe5df;
  color: #a32012;
}

.burn-badge.is-burned {
  background: #e7f5ef;
  color: var(--brand-strong);
}

.burn-badge.is-waiting {
  background: rgba(240, 242, 245, 0.88);
  color: var(--message-meta);
}

.message-caption {
  color: inherit;
  white-space: pre-wrap;
}

.message-media {
  display: block;
  max-width: min(360px, 100%);
  max-height: 280px;
  border-radius: 8px;
  background: #0f1714;
  object-fit: contain;
}

.message-media-button {
  display: block;
  max-width: 100%;
  border: 0;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  cursor: zoom-in;
}

.message-media-button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.image-collection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  width: min(280px, 68vw);
}

.image-collection-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(220px, 62vw);
}

.image-collection-grid.four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(240px, 64vw);
}

.image-collection-item {
  display: block;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(239, 244, 242, 0.9);
}

.image-collection-item .message-media-button,
.image-collection-item .message-media,
.image-collection-item .secure-attachment,
.image-collection-item .secure-image-tile {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: inherit;
}

.image-collection-item .message-media {
  object-fit: cover;
}

.message-bubble.has-image-collection,
.message-bubble.encrypted.has-image-collection {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.image-collection-grid.image-collection-fan {
  position: relative;
  display: block;
  width: min(300px, 72vw);
  height: 168px;
  padding: 16px 22px 22px;
  overflow: visible;
}

.image-collection-grid.image-collection-fan.two {
  width: min(220px, 62vw);
  height: 138px;
}

.image-collection-grid.image-collection-fan.four {
  width: min(260px, 68vw);
  height: 154px;
}

.image-collection-fan .image-collection-item {
  position: absolute;
  top: 20px;
  left: 50%;
  width: 118px;
  height: 118px;
  border: 0 !important;
  border-radius: 12px;
  outline: 0 !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.18);
  transform:
    translateX(calc(-50% + var(--fan-x, 0px)))
    translateY(var(--fan-y, 0px))
    rotate(var(--fan-rot, 0deg));
  transform-origin: 50% 88%;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  z-index: var(--fan-z, 1);
}

.image-collection-fan .image-collection-item:hover,
.image-collection-fan .image-collection-item:focus-within {
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.22);
  transform:
    translateX(calc(-50% + var(--fan-x, 0px)))
    translateY(calc(var(--fan-y, 0px) - 6px))
    rotate(var(--fan-rot, 0deg));
}

.image-collection-fan .image-collection-item .message-media-button,
.image-collection-fan .image-collection-item .message-media,
.image-collection-fan .image-collection-item .secure-attachment,
.image-collection-fan .image-collection-item .secure-image-tile {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.image-collection-fan .image-collection-item .message-media {
  object-fit: contain;
  background: #fff;
}

.image-collection-fan .image-collection-item .message-media-button {
  background: #fff;
}

.image-collection-count-badge {
  position: absolute;
  right: 16px;
  bottom: 8px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

@media (max-width: 760px) {
  .image-collection-grid.image-collection-fan {
    width: min(280px, 76vw);
    height: 156px;
    padding: 14px 18px 22px;
  }

  .image-collection-fan .image-collection-item {
    top: 18px;
    width: 108px;
    height: 108px;
  }
}

.secure-attachment-compact {
  display: block;
}

.secure-image-tile {
  display: grid;
  place-items: center;
  gap: 2px;
  border: 0;
  padding: 0;
  background: rgba(230, 245, 240, 0.94);
  color: var(--brand-strong);
  cursor: pointer;
}

.secure-image-tile span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
}

.secure-image-tile small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}

.message-bubble.has-voice {
  display: block;
  gap: 0;
  padding: 0;
  max-width: min(240px, 70vw);
}

.message-bubble.has-voice .burn-badge {
  margin: 0 10px 8px;
}

.voice-card {
  position: relative;
  width: var(--voice-width, 128px);
  max-width: min(220px, 62vw);
}

.voice-message {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  border: 0;
  border-radius: 7.5px;
  background: transparent;
  color: #20312a;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.message.mine .voice-message {
  flex-direction: row-reverse;
  color: #173b29;
}

.voice-message:focus-visible {
  outline: 2px solid rgba(0, 168, 132, 0.32);
  outline-offset: -2px;
}

.voice-icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(0, 168, 132, 0.14);
}

.voice-icon::before {
  position: absolute;
  top: 5px;
  left: 7px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
  content: "";
}

.voice-message.playing .voice-icon::before {
  top: 5px;
  left: 5px;
  width: 7px;
  height: 8px;
  border: 0;
  border-right: 2px solid currentColor;
  border-left: 2px solid currentColor;
}

.voice-wave {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 3px;
  min-width: 24px;
}

.message.mine .voice-wave {
  justify-content: flex-end;
}

.voice-wave span {
  display: block;
  width: 3px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.42;
}

.voice-wave span:nth-child(2) {
  height: 13px;
  opacity: 0.55;
}

.voice-wave span:nth-child(3) {
  height: 18px;
  opacity: 0.68;
}

.voice-message.playing .voice-wave span {
  animation: voice-wave 0.9s ease-in-out infinite;
}

.voice-message.playing .voice-wave span:nth-child(2) {
  animation-delay: 0.12s;
}

.voice-message.playing .voice-wave span:nth-child(3) {
  animation-delay: 0.24s;
}

.voice-duration {
  flex: 0 0 auto;
  min-width: 28px;
  color: rgba(32, 49, 42, 0.78);
  font-size: 12px;
  text-align: right;
}

.message.mine .voice-duration {
  color: rgba(23, 59, 41, 0.72);
  text-align: left;
}

.voice-burn-badge {
  display: block;
  margin: -2px 10px 8px;
  color: rgba(180, 35, 24, 0.78);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.message.mine .voice-burn-badge {
  text-align: right;
}

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

@keyframes voice-wave {
  0%,
  100% {
    transform: scaleY(0.72);
  }

  50% {
    transform: scaleY(1.18);
  }
}

.file-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.message-bubble > .file-card,
.message-bubble .secure-file-card {
  min-width: min(240px, 72vw);
  max-width: min(360px, 78vw);
  padding: 10px;
  border: 1px solid rgba(0, 121, 107, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.file-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(0, 168, 132, 0.13);
  color: var(--brand-strong);
  font-weight: 800;
}

.file-copy {
  display: grid;
  min-width: 0;
}

.file-copy strong,
.file-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-copy small {
  color: var(--message-meta);
}

.upload-progress-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: min(230px, 72vw);
  max-width: min(340px, 72vw);
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
}

.message.mine .upload-progress-card {
  background: rgba(255, 255, 255, 0.82);
}

.upload-progress-card.failed {
  background: rgba(255, 244, 244, 0.95);
}

.upload-progress-track {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.12);
}

.upload-progress-track span {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: inherit;
  background: var(--primary);
  transition: width 0.18s ease;
}

.upload-progress-card.failed .upload-progress-track span {
  background: #d93025;
}

.secure-attachment {
  width: min(280px, 100%);
  min-width: 0;
  max-width: 100%;
}

.secure-file-card {
  width: 100%;
  min-width: 0;
  grid-template-columns: 38px minmax(0, 1fr) minmax(54px, auto);
  gap: 8px;
}

.secure-file-card .ghost-button {
  justify-self: end;
  min-width: 54px;
  min-height: 32px;
  padding-inline: 10px;
}

.secret-card {
  display: grid;
  gap: 10px;
}

.secret-card-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.secret-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #00a884;
  color: #fff;
  font-weight: 800;
}

.secret-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.secret-copy strong,
.secret-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.secret-copy small {
  color: var(--message-meta);
}

.secret-unlock-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.secret-unlock-form input:invalid {
  box-shadow: none;
}

.secret-unlocked {
  padding-top: 2px;
  white-space: pre-wrap;
}

.special-card,
.poll-card,
.receipt-card,
.solitaire-card {
  display: grid;
  gap: 10px;
  width: max-content;
  min-width: 0;
  max-width: min(340px, 68vw);
}

.special-note {
  color: var(--message-meta);
  font-size: 13px;
}

.solitaire-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.solitaire-head span {
  color: var(--message-meta);
  font-size: 12px;
  font-weight: 800;
}

.solitaire-card h3 {
  font-size: 15px;
  line-height: 1.45;
}

.solitaire-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.solitaire-entry {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
}

.solitaire-entry > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(0, 168, 132, 0.12);
  color: #008069;
  font-size: 12px;
  font-weight: 900;
}

.solitaire-entry div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.solitaire-entry strong {
  font-size: 13px;
}

.solitaire-entry p {
  white-space: pre-wrap;
}

.solitaire-empty {
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--message-meta);
  font-size: 13px;
}

.solitaire-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.solitaire-form textarea {
  min-height: 38px;
  max-height: 82px;
  border-color: rgba(134, 150, 160, 0.28);
  border-radius: 8px;
}

.poll-option-list {
  display: grid;
  gap: 8px;
}

.poll-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(134, 150, 160, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--message-text);
  text-align: left;
  cursor: pointer;
}

.poll-option:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.poll-option.picked {
  border-color: #00a884;
  background: rgba(0, 168, 132, 0.12);
}

.receipt-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.read-count {
  color: var(--message-meta);
  font-size: 13px;
}

.mention {
  color: #027eb5;
  font-weight: 800;
}

.composer {
  position: relative;
  z-index: 12;
  display: grid;
  grid-template-columns: 40px 40px minmax(180px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
  padding: 10px 16px 12px;
  border-top: 1px solid #d1d7db;
  background: var(--message-panel);
  overflow: visible;
}

.composer textarea {
  min-height: 42px;
  border-color: transparent;
  border-radius: 8px;
  background: #fff;
  color: var(--message-text);
  box-shadow: none;
}

.composer textarea:focus {
  border-color: transparent;
  box-shadow: none;
}

.voice-hold-button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #111b21;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(17, 27, 33, 0.08);
  cursor: pointer;
  user-select: none;
  touch-action: none;
}

.voice-hold-button:hover {
  background: #f7f8fa;
}

.voice-hold-button.pressing {
  background: #dfe4e8;
  color: #111b21;
  box-shadow: inset 0 0 0 1px rgba(17, 27, 33, 0.12);
}

.voice-hold-button.cancel {
  background: #fff1f0;
  color: #b42318;
  box-shadow: inset 0 0 0 1px rgba(180, 35, 24, 0.22);
}

.voice-burn-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 58px;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 8px;
  background: #fff;
  color: #54656f;
  font-size: 13px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(17, 27, 33, 0.08);
  cursor: pointer;
  user-select: none;
}

.voice-burn-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--danger);
}

.voice-burn-toggle:has(input:checked) {
  background: #fff1f0;
  color: var(--danger);
}

.voice-burn-toggle.is-on {
  background: #fff1f0;
  color: var(--danger);
}

.composer .text-burn-toggle,
.composer .voice-burn-toggle {
  position: relative;
  display: inline-grid;
  grid-template-columns: 14px auto;
  align-items: center;
  justify-content: center;
  column-gap: 5px;
}

.composer .text-burn-toggle::before,
.composer .voice-burn-toggle::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 1.5px solid #8a949d;
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}

.composer .text-burn-toggle.is-on::before,
.composer .voice-burn-toggle.is-on::before {
  border-color: var(--brand);
  background: radial-gradient(circle at center, var(--brand) 0 42%, transparent 46%) #fff;
}

.composer .text-burn-toggle:has(input:checked)::before,
.composer .voice-burn-toggle:has(input:checked)::before {
  border-color: var(--brand);
  background: radial-gradient(circle at center, var(--brand) 0 42%, transparent 46%) #fff;
}

.composer .text-burn-toggle input,
.composer .voice-burn-toggle input {
  position: absolute;
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  max-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.composer .text-burn-toggle span,
.composer .voice-burn-toggle span {
  display: block;
  min-width: 0;
  line-height: 1;
  white-space: nowrap;
}

.text-burn-toggle {
  min-width: 52px;
}

.composer.is-voice-mode {
  grid-template-columns: 40px 40px minmax(160px, 1fr) auto;
}

.voice-record-tip {
  position: absolute;
  right: max(16px, 12%);
  bottom: calc(100% + 12px);
  display: grid;
  gap: 3px;
  min-width: 180px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(17, 27, 33, 0.9);
  color: #fff;
  text-align: center;
  box-shadow: 0 18px 36px rgba(17, 27, 33, 0.22);
  pointer-events: none;
}

.voice-record-tip::after {
  position: absolute;
  right: 34px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: inherit;
  transform: rotate(45deg);
  content: "";
}

.voice-record-tip strong,
.voice-record-tip span {
  position: relative;
  z-index: 1;
}

.voice-record-tip strong {
  font-size: 14px;
}

.voice-record-tip span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
}

.voice-record-tip.cancel {
  background: rgba(180, 35, 24, 0.92);
}

.composer .icon-button {
  background: transparent;
  color: #54656f;
}

.composer .icon-button:hover {
  background: rgba(84, 101, 111, 0.08);
  color: #111b21;
}

.composer #voiceRecordBtn {
  display: none;
}

.composer .primary-button {
  background: #00a884;
}

.composer .primary-button:hover {
  background: #008069;
}

.more-toggle {
  display: grid;
}

.composer-reply {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  background: #fff;
}

.clipboard-preview {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(17, 27, 33, 0.08);
}

.clipboard-preview-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.clipboard-preview-copy strong,
.clipboard-preview-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clipboard-preview-copy strong {
  color: var(--message-text);
  font-size: 13px;
}

.clipboard-preview-copy span {
  color: var(--message-meta);
  font-size: 12px;
}

.clipboard-preview-list {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(360px, 48vw);
  overflow-x: auto;
  scrollbar-width: none;
}

.clipboard-preview-list::-webkit-scrollbar {
  display: none;
}

.clipboard-preview-item {
  position: relative;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 8px;
  background: #e7f5ef;
}

.clipboard-preview-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.clipboard-preview-item small {
  position: absolute;
  right: 4px;
  bottom: 4px;
  max-width: calc(100% - 8px);
  overflow: hidden;
  border-radius: 999px;
  padding: 2px 5px;
  background: rgba(17, 27, 33, 0.7);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clipboard-preview-item .icon-button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  min-height: 0;
  border-radius: 999px;
  background: rgba(17, 27, 33, 0.72);
  color: #fff;
  font-size: 16px;
  line-height: 1;
}

.clipboard-edit-button {
  position: absolute;
  left: 4px;
  bottom: 4px;
  max-width: calc(100% - 8px);
  border: 0;
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(0, 121, 107, 0.86);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.composer.is-disabled {
  pointer-events: none;
  filter: grayscale(0.3);
}

.icon-button.active,
.icon-button.recording {
  background: var(--brand);
  color: #fff;
}

.icon-button.recording {
  box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.12);
}

.quick-action-panel {
  position: absolute;
  left: 16px;
  bottom: calc(100% + 8px);
  z-index: 30;
  display: block;
  width: min(420px, calc(100% - 32px));
  padding: 10px;
  border: 1px solid #d1d7db;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 40px rgba(11, 20, 26, 0.18);
}

.quick-action-pages {
  position: relative;
  min-height: 104px;
  overflow: hidden;
}

.quick-action-page {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 8px;
  width: 100%;
  transition:
    transform 0.24s ease,
    opacity 0.2s ease,
    visibility 0.2s ease;
  will-change: transform, opacity;
}

.quick-action-page[data-quick-page-panel="2"] {
  position: absolute;
  inset: 0;
}

.quick-action-panel[data-page="1"] .quick-action-page[data-quick-page-panel="1"],
.quick-action-panel[data-page="2"] .quick-action-page[data-quick-page-panel="2"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  visibility: visible;
}

.quick-action-panel[data-page="1"] .quick-action-page[data-quick-page-panel="2"] {
  opacity: 0;
  pointer-events: none;
  transform: translateX(24px);
  visibility: hidden;
}

.quick-action-panel[data-page="2"] .quick-action-page[data-quick-page-panel="1"] {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-24px);
  visibility: hidden;
}

.quick-action-page > button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  padding: 7px 9px;
  background: #f0f2f5;
  color: #111b21;
  text-align: left;
}

.quick-action-page > button:hover {
  background: rgba(0, 168, 132, 0.12);
}

.quick-action-page > button.active {
  background: #fff1f0;
}

.quick-action-page > button:disabled {
  opacity: 0.48;
}

.quick-action-page > button strong {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #00a884;
  color: #fff;
  font-size: 14px;
}

.quick-action-page > button.recording strong {
  background: var(--danger);
}

.quick-action-page > button.active strong {
  background: var(--danger);
}

.quick-action-page > button span {
  min-width: 0;
  overflow: hidden;
  color: #3b4a54;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-action-page > .quick-option-check {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 6px;
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  padding: 7px 9px;
  background: #f0f2f5;
  color: #111b21;
  text-align: left;
  cursor: pointer;
  user-select: none;
}

.quick-action-page > .quick-option-check:hover,
.quick-action-page > .quick-option-check.is-active {
  background: rgba(0, 168, 132, 0.12);
}

.quick-action-page > .quick-option-check.is-disabled {
  opacity: 0.48;
  pointer-events: none;
}

.quick-option-main {
  display: grid;
  grid-template-columns: 18px 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.quick-option-main input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
}

.quick-option-main strong {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #00a884;
  color: #fff;
  font-size: 14px;
}

.quick-option-main em {
  min-width: 0;
  overflow: hidden;
  color: #3b4a54;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-secret-code-input {
  width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(17, 27, 33, 0.12);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
}

.composer-mode-badge {
  position: relative;
  grid-area: input;
  align-self: center;
  justify-self: start;
  margin-left: 10px;
  z-index: 4;
  display: inline-grid;
  place-items: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 8px;
  background: rgba(0, 168, 132, 0.12);
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
}

.quick-action-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 18px;
  margin-top: 8px;
}

.quick-action-dots button {
  width: 7px;
  height: 7px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #dedede;
  transition:
    background-color 0.18s ease,
    transform 0.18s ease;
}

.quick-action-dots button.active {
  background: #757575;
  transform: scale(1.08);
}

.primary-button.danger {
  background: var(--danger);
}

.emoji-picker {
  position: absolute;
  left: 18px;
  bottom: 76px;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(7, 38px);
  gap: 6px;
  max-height: min(320px, calc(100vh - 180px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px;
  border: 1px solid #d1d7db;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(11, 20, 26, 0.16);
  -webkit-overflow-scrolling: touch;
}

.mention-picker {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: calc(100% - 8px);
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow: auto;
  padding: 8px;
  border: 1px solid #d1d7db;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(11, 20, 26, 0.16);
  z-index: 30;
}

.mention-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  width: 100%;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.mention-option.active,
.mention-option:hover {
  border-color: transparent;
  background: #f0f2f5;
}

.mention-option span:last-child {
  display: grid;
  min-width: 0;
}

.mention-option strong,
.mention-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-option small {
  color: var(--message-meta);
}

.emoji-picker button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 8px;
  background: #f0f2f5;
  font-size: 20px;
}

.emoji-picker button:hover {
  background: rgba(0, 168, 132, 0.12);
}

.lock-panel {
  position: fixed;
  inset: 0 !important;
  z-index: 5000;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
  background: rgba(248, 250, 247, 0.98);
  backdrop-filter: blur(16px);
  text-align: center;
}

.chat-view.is-list-locked .list-panel,
.chat-view.is-list-locked .chat-head,
.chat-view.is-list-locked .messages,
.chat-view.is-list-locked .composer,
.chat-view.is-list-locked .detail-panel {
  visibility: hidden;
}

.chat-view.is-group-content-locked .composer {
  display: none !important;
}

.lock-symbol {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 16px;
  background: #0b2019;
  color: #fff;
  filter: drop-shadow(0 14px 24px rgba(3, 82, 64, 0.16));
}

.lock-screen-icon {
  position: relative;
  display: block;
  width: 34px;
  height: 28px;
  border: 4px solid currentColor;
  border-radius: 9px;
}

.lock-screen-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -23px;
  width: 20px;
  height: 19px;
  border: 4px solid currentColor;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  transform: translateX(-50%);
}

.lock-screen-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 7px 0 currentColor;
  transform: translate(-50%, -55%);
}

.clear-chat-button svg {
  width: 18px;
  height: 18px;
}

.message-lock-state {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  min-height: 100%;
  padding: 32px 18px;
  text-align: center;
}

.message-lock-state h3,
.message-lock-state p {
  margin: 0;
}

.message-lock-state p {
  max-width: 420px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.call-panel {
  position: absolute;
  inset: 78px 0 73px;
  z-index: 18;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(10, 19, 16, 0.62);
  backdrop-filter: blur(12px);
}

.call-window {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(420px, calc(100% - 12px));
  min-height: 330px;
  padding: 32px 22px 28px;
  border-radius: 12px;
  background: linear-gradient(180deg, #10201b 0%, #07110e 100%);
  color: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26);
}

.call-copy {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.call-copy strong {
  font-size: 22px;
  line-height: 1.25;
}

.call-copy span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

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

.call-end-button {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d92d20;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(217, 45, 32, 0.34);
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.call-end-button:hover {
  transform: translateY(-1px);
  background: #b42318;
  box-shadow: 0 16px 34px rgba(180, 35, 24, 0.38);
}

.call-end-button:active {
  transform: translateY(0) scale(0.96);
}

.call-answer-button,
.call-reject-button {
  min-width: 76px;
  height: 56px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.call-answer-button {
  background: #12b76a;
}

.call-reject-button {
  background: var(--danger);
}

.remote-video {
  width: 100%;
  max-height: 54vh;
  border-radius: 8px;
  background: #07110d;
  object-fit: contain;
}

.local-video {
  position: absolute;
  right: 18px;
  bottom: 74px;
  width: min(160px, 28%);
  aspect-ratio: 4 / 3;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: #07110d;
  object-fit: cover;
}

.unlock-row {
  grid-template-columns: minmax(190px, 280px) auto;
  gap: 10px;
}

.detail-panel {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 18px;
  border-right: 0;
  border-left: 1px solid var(--line);
}

.user-strip {
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.user-strip > div:not(.avatar) {
  min-width: 0;
}

.user-strip h2,
.user-strip p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-last-login {
  color: var(--muted);
  font-size: 12px;
}

.user-edit-button {
  flex: 0 0 auto;
  margin-left: auto;
}

.status-block,
.detail-block {
  display: grid;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.status-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
}

.status-row strong {
  color: var(--ink);
}

.status-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.security-hub-panel {
  width: min(390px, 100%);
}

.security-hub-card {
  margin-top: 14px;
  background: var(--panel-soft);
}

.security-hub-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#securityModal .modal-panel {
  width: min(760px, 100%);
}

.security-locks-panel {
  display: grid;
  gap: 12px;
}

.security-lock-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 4px;
  border: 1px solid rgba(17, 27, 33, 0.08);
  border-radius: 10px;
  background: #eef4f1;
}

.security-lock-tabs button {
  display: grid;
  gap: 2px;
  min-height: 42px;
  min-width: 0;
  border: 0;
  border-radius: 8px;
  padding: 6px 8px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.security-lock-tabs button small {
  overflow: hidden;
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.security-lock-tabs button.active {
  background: #fff;
  color: var(--brand-strong);
  box-shadow: 0 1px 4px rgba(17, 27, 33, 0.08);
}

.security-lock-tab-panels {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.security-lock-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.security-lock-card[hidden] {
  display: none;
}

.security-lock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.security-lock-head strong {
  color: var(--ink);
  font-size: 15px;
}

.security-lock-head small,
.security-lock-hint,
.security-lock-empty {
  color: var(--muted);
  font-size: 12px;
}

.security-lock-password,
.security-random-count {
  display: grid;
  gap: 7px;
}

.security-primary-lock-card {
  gap: 14px;
}

.security-primary-note {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(0, 168, 132, 0.14);
  border-radius: 12px;
  background: rgba(0, 168, 132, 0.06);
}

.security-primary-note strong {
  color: var(--brand-strong);
  font-size: 14px;
}

.security-primary-note span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.security-random-count {
  grid-template-columns: minmax(0, 1fr) 96px;
  align-items: center;
}

.security-random-count span {
  color: var(--muted);
  font-size: 13px;
}

.security-target-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 210px;
  overflow: auto;
  padding: 2px;
}

.security-tag-block {
  display: grid;
  gap: 7px;
}

.security-selection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.security-selection-count {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 168, 132, 0.1);
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
  white-space: nowrap;
}

.security-tag-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.security-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  max-width: 100%;
  padding: 3px 5px 3px 9px;
  border: 1px solid rgba(17, 27, 33, 0.12);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.security-tag-pick {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.security-tag-pick span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.security-tag-edit {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 77, 64, 0.08);
  color: var(--brand-strong);
  font-family: "Material Symbols Outlined";
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 18;
}

.security-tag-edit:hover {
  background: rgba(0, 168, 132, 0.16);
}

.security-tag-chip.is-active {
  border-color: rgba(0, 168, 132, 0.36);
  background: rgba(0, 168, 132, 0.12);
  color: var(--brand-deep);
}

.security-tag-chip.is-active .security-tag-pick {
  color: #006b57;
}

.security-tag-chip.is-partial {
  border-color: rgba(29, 78, 216, 0.34);
  background: rgba(59, 130, 246, 0.1);
}

.security-tag-chip.is-partial .security-tag-pick {
  color: #1d4f8c;
}

.security-tag-pick:disabled {
  cursor: default;
  opacity: 0.52;
}

.security-target-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(17, 27, 33, 0.08);
  border-radius: 8px;
  background: #fff;
}

.security-target-option.is-selected {
  border-color: rgba(0, 168, 132, 0.38);
  background: rgba(0, 168, 132, 0.1);
  box-shadow: inset 0 0 0 1px rgba(0, 168, 132, 0.08);
}

.security-target-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

.security-target-option span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.security-target-option strong,
.security-target-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.security-target-option strong {
  color: var(--ink);
  font-size: 13px;
}

.security-target-option small {
  color: var(--muted);
  font-size: 12px;
}

.security-target-option:has(input:disabled) {
  opacity: 0.54;
}

.security-auto-send {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(17, 27, 33, 0.08);
}

.security-auto-message {
  display: grid;
  gap: 7px;
}

.security-auto-message textarea {
  min-height: 74px;
  resize: vertical;
}

.security-auto-contact-list {
  max-height: 160px;
}

.conversation-meta {
  display: grid;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.meta-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.meta-head-button {
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.meta-head-button:hover {
  background: transparent;
  box-shadow: none;
}

.conversation-meta .meta-head .avatar,
.conversation-meta .meta-head .avatar img {
  border-radius: 10px !important;
}

.meta-head strong,
.meta-head small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.meta-chip-grid span,
.meta-section {
  min-width: 0;
  border: 1px solid rgba(17, 27, 33, 0.07);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.66);
}

.meta-chip-grid span {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
}

.meta-chip-grid strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-section {
  display: grid;
  gap: 8px;
  max-width: 100%;
  overflow-x: hidden;
  padding: 10px;
}

.meta-section p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.meta-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
}

.meta-section-head strong {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.announcement-read {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.announcement-published {
  display: block;
  margin-top: -2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.read-members {
  color: var(--muted);
  line-height: 1.5;
}

.group-log-list {
  display: grid;
  gap: 7px;
  max-height: 220px;
  overflow: auto;
}

.group-log-row {
  display: grid;
  gap: 3px;
  padding: 8px;
  border-radius: 8px;
  background: var(--panel-soft);
}

.group-log-row strong {
  color: var(--ink);
  font-size: 13px;
}

.group-log-row small,
.group-log-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.4;
}

.meta-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.meta-tag-list span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #e7f5ef;
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 700;
}

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

.meta-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border-radius: 8px;
  background: var(--panel-soft);
}

.meta-tabs button {
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}

.meta-tabs button.active {
  background: #fff;
  color: var(--brand-strong);
  box-shadow: 0 1px 4px rgba(17, 27, 33, 0.08);
}

.meta-tab-panel {
  display: none;
  gap: 10px;
}

.meta-tab-panel.active {
  display: grid;
}

.meta-member-list {
  display: grid;
  gap: 6px;
  max-height: 260px;
  min-width: 0;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.meta-member {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
}

.meta-member-copy {
  display: grid;
  min-width: 0;
}

.meta-member-copy strong,
.meta-member-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-member em,
.role-badge {
  min-width: 0;
  max-width: 56px;
  overflow: hidden;
  color: var(--brand-strong);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-history-list {
  display: grid;
  gap: 7px;
}

.call-history-row {
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 8px;
  background: var(--panel-soft);
}

.call-history-row strong {
  font-size: 13px;
}

.call-history-row small {
  color: var(--muted);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: hidden;
  background: rgba(18, 33, 28, 0.46);
}

.modal-panel {
  width: min(440px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: 20px;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.request-panel,
.device-list,
.forward-list,
.invite-result {
  display: grid;
  gap: 10px;
}

.request-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.request-list,
.device-list {
  display: grid;
  gap: 8px;
}

.request-row,
.device-row,
.forward-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(17, 27, 33, 0.08);
  border-radius: 8px;
  background: var(--panel-soft);
}

.request-row.is-resolved {
  background: rgba(18, 184, 134, 0.06);
}

.request-row span,
.device-row span,
.forward-option span:last-child {
  display: grid;
  min-width: 0;
}

.request-row strong,
.device-row strong,
.forward-option strong,
.request-row small,
.device-row small,
.forward-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.request-row small,
.device-row small,
.forward-option small {
  color: var(--muted);
  font-size: 12px;
}

.request-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.request-actions .ghost-button.is-loading {
  min-width: 72px;
}

.request-status {
  display: inline-grid;
  min-height: 28px;
  place-items: center;
  padding: 0 10px;
  border: 1px solid rgba(0, 128, 96, 0.18);
  border-radius: 999px;
  background: rgba(0, 128, 96, 0.09);
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.request-status.rejected,
.request-status.cancelled {
  border-color: rgba(224, 49, 49, 0.18);
  background: rgba(224, 49, 49, 0.08);
  color: #c92a2a;
}

.device-row {
  grid-template-columns: minmax(0, 1fr);
}

.device-row.is-current strong {
  color: var(--brand-strong);
}

.forward-list {
  max-height: 340px;
  overflow: auto;
}

.forward-mode-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.forward-mode-fields label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(0, 108, 73, 0.16);
  border-radius: 12px;
  background: #f7fbfa;
}

.forward-mode-fields small {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.forward-option {
  grid-template-columns: auto auto minmax(0, 1fr);
  cursor: pointer;
}

.forward-bundle-card {
  display: grid;
  gap: 7px;
  box-sizing: border-box;
  width: min(300px, 72vw);
  max-width: 100%;
  padding: 12px 14px 10px;
  border: 1px solid rgba(0, 121, 107, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  color: #111827;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.forward-bundle-card > strong,
.forward-bundle-card > small,
.forward-bundle-preview span,
.forward-bundle-footer {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forward-bundle-card > strong {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.forward-bundle-card > small {
  color: #667085;
  font-size: 12px;
}

.message:not(.mine) .forward-bundle-card > small {
  color: #667085;
}

.forward-bundle-preview {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.45;
}

.message:not(.mine) .forward-bundle-preview {
  background: transparent;
}

.forward-bundle-footer {
  margin-top: 3px;
  padding-top: 8px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  color: #98a2b3;
  font-size: 12px;
}

.forward-bundle-body {
  display: block;
  max-height: min(620px, calc(100vh - 160px));
  overflow: auto;
  padding: 12px 18px 28px;
  background: #f7f7f7;
}

.forward-bundle-transcript {
  display: grid;
  gap: 0;
}

.forward-bundle-message-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 0 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.forward-bundle-message-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.forward-bundle-message-main header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: auto;
  margin: 0;
  padding: 0;
}

.forward-bundle-message-main strong {
  min-width: 0;
  overflow: hidden;
  color: #667085;
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forward-bundle-message-main time {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.forward-bundle-message-content {
  min-width: 0;
}

.forward-bundle-message-main p,
.forward-bundle-message-content p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #111827;
  line-height: 1.55;
}

.forward-bundle-voice-card {
  display: inline-grid;
  gap: 4px;
  max-width: 100%;
}

.forward-bundle-voice-card .voice-card {
  width: min(calc(var(--voice-width, 128px) + 44px), 228px);
  max-width: min(228px, 62vw);
  grid-template-columns: minmax(104px, min(var(--voice-width, 128px), 184px)) 38px;
  gap: 6px;
}

.forward-bundle-voice-card .voice-message {
  min-height: 34px;
  padding: 7px 10px;
}

.forward-bundle-voice-card .voice-speed-button {
  right: 6px;
}

.forward-bundle-voice-missing {
  color: var(--muted);
  font-size: 12px;
}

.forward-bundle-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
}

.reaction-modal-panel form {
  gap: 10px;
}

.reaction-modal-panel input {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

.reaction-counter {
  display: block;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.reaction-modal-actions {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
}

.app-prompt-panel form {
  gap: 10px;
}

.app-prompt-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.invite-result {
  margin-top: 14px;
  justify-items: center;
  padding: 12px;
  border: 1px solid rgba(12, 124, 102, 0.18);
  border-radius: 8px;
  background: #f4fbf8;
}

.invite-result img {
  width: 180px;
  height: 180px;
  border-radius: 8px;
  background: #fff;
}

.invite-result input {
  width: 100%;
  text-align: center;
}


.temp-invite-result strong {
  color: var(--brand-strong);
  font-size: 14px;
}

.temp-invite-panel {
  width: min(460px, 100%);
}

.temp-invite-summary {
  display: grid;
  gap: 5px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(12, 124, 102, 0.16);
  border-radius: 8px;
  background: #f4fbf8;
}

.temp-invite-summary strong {
  font-size: 18px;
}

.temp-invite-summary span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.temp-invite-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.wide-modal {
  width: min(620px, 100%);
}

.history-modal-panel {
  display: grid;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
  width: min(760px, 100%);
  overflow: hidden;
}

.history-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.history-search-form input,
.history-filter-row input,
.history-filter-row select {
  height: 38px;
}

.history-search-form .primary-button {
  min-width: 76px;
  min-height: 38px;
  padding-inline: 16px;
}

.favorite-scope-tabs,
.history-filter-tabs {
  display: flex;
  gap: 7px;
  margin-bottom: 8px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.favorite-scope-tabs::-webkit-scrollbar,
.history-filter-tabs::-webkit-scrollbar {
  display: none;
}

.favorite-scope-tabs button,
.history-filter-tabs button {
  flex: 0 0 auto;
  min-height: 34px;
  min-width: 58px;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f7f8f8;
  color: #3b4a54;
  font-weight: 800;
  cursor: pointer;
}

.favorite-scope-tabs button.active,
.history-filter-tabs button.active {
  border-color: var(--brand);
  background: #e7f5ef;
  color: var(--brand-strong);
}

.history-filter-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid rgba(17, 27, 33, 0.07);
  border-radius: 8px;
  background: #f7f8f8;
}

.history-filter-row label {
  gap: 4px;
}

.history-filter-row label span {
  font-size: 12px;
}

.history-filter-row .ghost-button {
  align-self: end;
  min-width: 68px;
  min-height: 34px;
  padding-inline: 12px;
  background: #fff;
  font-size: 13px;
}

.history-summary {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
}

.history-result-list {
  display: grid;
  gap: 8px;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding-right: 2px;
}

.history-result-list > span {
  padding: 16px;
  border-radius: 8px;
  background: #f7f8f8;
  color: var(--muted);
  text-align: center;
}

.history-result {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  width: 100%;
  padding: 12px 6px;
  border: 0;
  border-bottom: 1px solid rgba(17, 27, 33, 0.08);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.history-result + .history-result {
  border-top-color: rgba(17, 27, 33, 0.04);
}

.history-result:hover {
  background: rgba(244, 251, 248, 0.8);
}

.history-date-divider {
  position: sticky;
  top: 0;
  z-index: 1;
  justify-self: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(240, 242, 245, 0.95);
  color: #54656f;
  font-size: 12px;
}

.history-thumb {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #e7f5ef;
  color: var(--brand-strong);
  font-size: 13px;
  font-weight: 900;
  overflow: hidden;
}

.history-result-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

.history-thumb.media {
  background: #eef1f2;
}

.history-thumb img,
.history-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-result-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.history-result-head,
.history-result-body {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.history-result-head {
  justify-content: space-between;
}

.history-result-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-result small {
  color: var(--muted);
  white-space: nowrap;
}

.history-result-body em {
  flex: 0 0 auto;
  color: var(--brand-strong);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.history-result-time {
  align-self: start;
  justify-self: end;
  color: #8a939b;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}

.history-result-preview {
  display: block;
  min-width: 0;
}

.history-result-preview > span:first-child,
.history-result-full {
  color: #111827;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.history-result-preview > span:first-child {
  display: block;
  overflow: visible;
  white-space: pre-wrap;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}

.history-result-full {
  display: none;
  white-space: pre-wrap;
}

.history-result.is-expanded .history-result-preview > span:first-child,
.history-result.is-expanded .history-result-more {
  display: none;
}

.history-result.is-expanded .history-result-full {
  display: inline;
}

.history-result-more {
  display: inline;
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand-strong);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.history-result p {
  margin: 0;
  min-width: 0;
  color: #3b4a54;
  font-size: 13px;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: anywhere;
}

.history-voice-card {
  display: inline-flex;
  max-width: 100%;
}

.history-voice-card .voice-card {
  width: min(calc(var(--voice-width, 128px) + 44px), 228px);
  max-width: min(228px, 62vw);
  grid-template-columns: minmax(104px, min(var(--voice-width, 128px), 184px)) 38px;
  gap: 6px;
  border-radius: 10px;
  background: #f4faf7;
  box-shadow: inset 0 0 0 1px rgba(0, 168, 132, 0.08);
}

.history-voice-card .voice-message {
  min-height: 34px;
  padding: 7px 10px;
}

.history-voice-card .voice-speed-button {
  right: 6px;
}

.history-result-list:has(.history-gallery-item) {
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  align-content: start;
  gap: 10px;
}

.history-result-list:has(.history-gallery-item) .history-date-divider {
  grid-column: 1 / -1;
}

.history-gallery-item {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.history-gallery-preview {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--brand-strong);
  font-weight: 900;
}

.history-gallery-preview img,
.history-gallery-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-gallery-preview em {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(17, 27, 33, 0.68);
  color: #fff;
  font-size: 11px;
  font-style: normal;
}

.history-gallery-preview.link {
  align-content: center;
  justify-items: start;
  padding: 10px;
}

.history-gallery-preview.link em {
  position: static;
  margin-bottom: 8px;
  background: var(--brand);
}

.history-gallery-preview.link small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-weight: 700;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.history-gallery-item > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.history-gallery-item strong,
.history-gallery-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-load-more {
  width: 100%;
  margin-top: 12px;
}

.message-highlight .message-bubble {
  outline: 2px solid rgba(0, 168, 132, 0.34);
  outline-offset: 2px;
}

.modal-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.close-modal {
  background: #f4f2ed;
  color: var(--ink);
}

.switch-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.compact-switch {
  padding: 8px 0;
}

.switch-row input {
  width: 22px;
  height: 22px;
  accent-color: var(--brand);
}

.switch-row.is-disabled {
  opacity: 0.55;
}

.switch-row strong,
.switch-row small {
  display: block;
}

.switch-row small {
  margin-top: 4px;
  color: var(--muted);
}

.contact-last-login {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 13px;
}

.member-list {
  display: grid;
  gap: 8px;
  max-height: 240px;
  overflow: auto;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.manage-member-list {
  max-height: 280px;
}

.manage-member-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 8px;
  border-radius: 8px;
}

.manage-member-row:hover {
  background: var(--panel-soft);
}

.member-copy {
  display: grid;
  min-width: 0;
}

.member-copy strong,
.member-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-copy small {
  color: var(--muted);
}

.member-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-left: 37px;
}

.member-option {
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px;
  border-radius: 8px;
}

.member-option:hover {
  background: var(--panel-soft);
}

.member-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

.member-option small,
.member-empty {
  color: var(--muted);
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.settings-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.group-settings-form {
  gap: 12px;
}

.group-settings-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(17, 27, 33, 0.08);
  border-radius: 8px;
  background: var(--panel-soft);
}

.group-settings-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
}

.group-settings-tabs button.active {
  background: #fff;
  color: var(--brand-strong);
  box-shadow: 0 6px 16px rgba(17, 27, 33, 0.08);
}

.group-settings-layout {
  display: grid;
  gap: 12px;
}

.settings-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.settings-section h3 {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
}

.settings-section textarea {
  min-height: 72px;
  resize: vertical;
}

.group-settings-panel {
  display: none;
}

.group-settings-panel.active {
  display: grid;
}

.feature-guide-list {
  display: grid;
  gap: 10px;
}

.feature-guide-list span,
.crypto-info-list span {
  display: grid;
  gap: 4px;
  padding: 11px;
  border: 1px solid rgba(17, 27, 33, 0.08);
  border-radius: 8px;
  background: var(--panel-soft);
}

.feature-guide-list strong,
.crypto-info-list strong {
  color: var(--ink);
  font-size: 14px;
}

.feature-guide-list small,
.crypto-info-list small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.guide-tip-panel {
  width: min(430px, 100%);
}

.guide-tip-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.crypto-info-list {
  display: grid;
  gap: 9px;
}

.secret-manage-form {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
}

.secret-manage-list,
.burn-details-list {
  display: grid;
  gap: 8px;
}

.secret-manage-item,
.burn-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.burn-detail-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.burn-detail-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.burn-detail-row.is-done em {
  color: var(--brand-strong);
}

.secret-manage-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.secret-manage-copy strong,
.secret-manage-copy small,
.burn-detail-row strong,
.burn-detail-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.secret-manage-copy small,
.burn-detail-row small {
  color: var(--muted);
}

.secret-manage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.sticky-actions {
  position: sticky;
  bottom: -20px;
  margin: 0 -4px -4px;
  padding: 12px 4px 4px;
  background: linear-gradient(to top, #fff 72%, rgba(255, 255, 255, 0));
  justify-content: flex-end;
}

.help-text,
.form-help {
  color: var(--muted);
  line-height: 1.5;
}

.form-help {
  font-size: 12px;
}

.inline-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.link-button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 800;
}

.link-button:hover {
  color: var(--brand);
}

.safe-link {
  display: inline;
  color: var(--brand-strong);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.safe-link:hover,
.safe-link:focus-visible {
  color: var(--brand);
}

.safe-link:focus-visible {
  outline: 2px solid rgba(0, 168, 132, 0.28);
  outline-offset: 2px;
  border-radius: 4px;
}

.bot-test-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.bot-test-result {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.bot-test-result.is-loading {
  color: var(--brand-strong);
}

.bot-test-result.is-success {
  color: var(--brand);
  font-weight: 700;
}

.bot-test-result.is-error {
  color: var(--danger);
  font-weight: 700;
}

.inline-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 8px;
}

.image-preview-modal {
  padding: calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  background: rgba(7, 14, 12, 0.72);
}

.image-preview-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1120px, calc(100vw - 32px));
  max-height: min(88dvh, 900px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
}

.image-preview-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(13, 25, 22, 0.62);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.image-preview-panel h2 {
  margin: 0;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-preview-body {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  background: transparent;
  cursor: zoom-in;
  touch-action: none;
}

.image-preview-body img {
  display: block;
  max-width: 100%;
  max-height: calc(88dvh - 78px);
  border-radius: 12px;
  object-fit: contain;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.36);
}

.image-preview-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(10, 20, 18, 0.62);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  transform: translateY(-50%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.image-preview-nav:disabled {
  opacity: 0.32;
}

.image-preview-prev {
  left: 16px;
}

.image-preview-next {
  right: 16px;
}

.image-preview-counter {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(10, 20, 18, 0.58);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 700;
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.image-preview-body.is-zoomed {
  cursor: grab;
}

.image-preview-body.is-dragging {
  cursor: grabbing;
}

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

#profileModal .modal-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
}

#profileModal .modal-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding-inline: 8px;
  font-size: 14px;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
  white-space: normal;
}

.inline-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.contact-tag-tools {
  display: grid;
  gap: 8px;
}

.contact-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(17, 27, 33, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.contact-account-row span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.contact-account-row strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.tag-manage-list {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-height: min(56dvh, 520px);
  overflow: auto;
  padding-right: 2px;
}

.contact-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid rgba(17, 27, 33, 0.12);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.contact-tag-chip { cursor: pointer; }

.contact-tag-chip.is-active {
  border-color: rgba(0, 168, 132, 0.36);
  background: rgba(0, 168, 132, 0.12);
  color: var(--brand-deep);
}

.tag-manage-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(17, 27, 33, 0.1);
  border-radius: 8px;
  background: var(--panel-soft);
}

.tag-manage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tag-manage-toggle {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.tag-manage-toggle > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.tag-manage-caret {
  display: grid;
  place-items: center;
  width: 18px;
  color: var(--brand-strong);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.tag-manage-toggle strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-manage-toggle small,
.tag-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.tag-manage-head .icon-button {
  width: 24px;
  height: 24px;
  min-height: 24px;
  border-radius: 50%;
}

.tag-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.tag-contact-option {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(17, 27, 33, 0.08);
  border-radius: 8px;
  background: #fff;
}

.tag-contact-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

.tag-contact-option span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.tag-contact-option strong,
.tag-contact-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-contact-option strong {
  color: var(--ink);
  font-size: 13px;
}

.tag-contact-option small {
  color: var(--muted);
  font-size: 12px;
}

.contact-info-actions {
  justify-content: center;
}

.locked-meta {
  display: grid;
  gap: 8px;
}

.scrambled {
  font-family: Consolas, monospace;
  letter-spacing: 0;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30000;
  max-width: min(360px, calc(100vw - 36px));
  padding: 12px 14px;
  border-radius: 8px;
  background: #12211c;
  color: #fff;
  box-shadow: var(--shadow);
}

.toast.error {
  background: var(--danger);
}

@media (max-width: 1100px) {
  .chat-view {
    grid-template-columns: 72px minmax(230px, 320px) minmax(0, 1fr);
  }

  .detail-panel {
    display: none;
  }
}

@media (max-width: 820px) {
  .auth-view {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .auth-visual {
    min-height: 260px;
  }

  .signal-grid {
    grid-template-columns: repeat(3, 52px);
  }

  .chat-view {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: 42vh 58vh;
  }

  .rail {
    grid-row: 1 / 3;
    padding-inline: 8px;
  }

  .rail-button,
  .icon-button {
    width: 38px;
    height: 38px;
  }

  .list-panel {
    min-height: 0;
  }

  .chat-panel {
    grid-column: 2;
    min-height: 0;
  }

  .message {
    max-width: 100%;
  }

  .message-bubble,
  .message-meta {
    max-width: min(88%, 620px);
  }
}

@media (max-width: 560px) {
  .auth-view {
    min-height: 100%;
    align-content: start;
    padding: clamp(58px, 13vh, 128px) 16px 24px;
  }

  .auth-visual {
    display: none;
  }

  .auth-panel {
    padding: 20px;
  }

  .chat-view {
    grid-template-columns: 1fr;
    grid-template-rows: 64px 35vh minmax(0, calc(65vh - 64px));
  }

  .rail {
    grid-row: 1;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr;
    align-items: center;
    padding: 8px 10px;
  }

  .rail-brand,
  .rail-nav,
  .rail-bottom {
    display: flex;
    align-items: center;
    padding: 0;
  }

  .rail-nav {
    justify-content: center;
  }

  .list-panel,
  .chat-panel {
    grid-column: 1;
  }

  .list-panel {
    grid-row: 2;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .chat-panel {
    grid-row: 3;
  }

  .list-head {
    padding-top: 12px;
  }

  .chat-head {
    min-height: 64px;
    padding: 10px 14px;
  }

  .chat-head .ghost-button {
    min-height: 32px;
    padding-inline: 10px;
  }

  .messages {
    padding: 14px;
  }

  .composer {
    grid-template-columns: 38px 38px minmax(120px, 1fr) auto;
  }

  .settings-grid,
  .group-settings-layout,
  .secret-manage-form,
  .inline-row,
  .security-target-list {
    grid-template-columns: 1fr;
  }

  .tag-contact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .tag-contact-option {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 5px;
    padding: 6px;
  }

  .tag-contact-option .avatar {
    display: none;
  }

  .tag-contact-option input {
    width: 15px;
    height: 15px;
  }

  .tag-contact-option strong {
    font-size: 11px;
  }

  .tag-contact-option small {
    font-size: 10px;
  }

  .security-random-count {
    grid-template-columns: 1fr;
  }

  .unlock-row {
    grid-template-columns: 1fr;
  }

  .lock-panel {
    inset: 64px 0 114px;
  }

  .call-panel {
    inset: 64px 0 114px;
    padding: 12px;
  }

  .call-window {
    min-height: 300px;
    padding: 28px 18px 24px;
  }

  .call-end-button {
    width: 64px;
    height: 64px;
    font-size: 14px;
  }

  .local-video {
    right: 12px;
    bottom: 68px;
    width: 120px;
  }
}

.mobile-back {
  display: none;
}

@media (max-width: 760px) {
  .chat-view {
    grid-template-columns: 1fr !important;
    grid-template-rows: 56px minmax(0, 1fr) calc(62px + env(safe-area-inset-bottom)) !important;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    overflow: hidden;
  }

  .rail {
    grid-column: 1;
    grid-row: 1 / -1 !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 56px minmax(0, 1fr) calc(62px + env(safe-area-inset-bottom));
    align-items: stretch;
    min-height: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    pointer-events: none;
    z-index: 25;
  }

  .rail-brand,
  .rail-nav,
  .rail-bottom {
    display: flex;
    align-items: center;
    padding: 0;
    pointer-events: auto;
  }

  .rail-brand {
    grid-column: 1 / -1;
    grid-row: 1;
    flex-direction: row;
    justify-content: center;
    gap: 0;
    background: #f8faf7;
  }

  .rail-nav,
  .rail-bottom {
    background: #12211c;
  }

  .rail-brand span {
    display: none;
  }

  .rail-nav {
    grid-column: 1;
    grid-row: 3;
    justify-content: flex-start;
    gap: 8px;
    padding: 9px 6px calc(9px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
  }

  .rail-bottom {
    grid-column: 2;
    grid-row: 3;
    justify-content: end;
    gap: 8px;
    padding: 9px calc(14px + env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) 6px;
  }

  .rail-brand .brand-logo.small {
    width: 38px;
    height: 38px;
    background: #eef6f1;
    box-shadow: 0 6px 18px rgba(17, 27, 33, 0.06);
  }

  .rail-button,
  .icon-button {
    width: 36px;
    height: 36px;
  }

  .detail-panel {
    display: none;
  }

  .list-panel,
  .chat-panel {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    overflow: hidden;
    border-right: 0;
  }

  .chat-view:not(.is-chat-open) .chat-panel {
    display: none;
  }

  .chat-view.is-chat-open .list-panel {
    display: none;
  }

  .chat-view.is-chat-open .chat-panel {
    display: grid;
  }

  .mobile-back:not(.hidden) {
    display: grid;
    flex: 0 0 auto;
    font-size: 24px;
    line-height: 1;
  }

  .list-head {
    min-height: 0;
    padding: 0;
  }

  .head-actions {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
    z-index: 42;
  }

  .list-create-menu {
    top: calc(100% + 10px);
    right: 0;
    width: min(226px, calc(100vw - 24px));
  }

  .new-user-guide {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .list-head h2,
  .chat-head h2 {
    font-size: 17px;
  }

  .head-actions {
    gap: 6px;
  }

  .search-box {
    padding: 0 12px 10px;
  }

  .application-notice-panel {
    padding: 0 12px 10px;
  }

  .conversation-list {
    padding: 4px 8px 12px;
  }

  .conversation-item {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    min-height: 62px;
    padding: 8px;
  }

  .conversation-avatar-wrap {
    width: 40px;
    height: 40px;
  }

  .conversation-security-icon {
    right: -5px;
    bottom: -5px;
    width: 19px;
    height: 19px;
    font-size: 10px;
  }

  .chat-head {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: auto;
    padding: 8px 10px;
  }

  .chat-more-button:not(.hidden) {
    display: grid;
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
  }

  .chat-head .avatar {
    width: 38px;
    height: 38px;
  }

  .chat-title-area h2 {
    font-size: 16px;
  }

  .chat-title-area p {
    font-size: 12px;
  }

  .chat-actions {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    gap: 6px;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 2px 2px 0;
    scrollbar-width: none;
  }

  .chat-actions::-webkit-scrollbar {
    display: none;
  }

  .chat-head .ghost-button.compact {
    min-height: 30px;
    padding-inline: 8px;
    flex: 0 0 auto;
    font-size: 12px;
  }

  .messages {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding: 10px calc(16px + env(safe-area-inset-right)) 8px calc(14px + env(safe-area-inset-left));
  }

  .message {
    max-width: 100%;
    margin-bottom: 10px;
  }

  .message-content-row {
    gap: 6px;
    max-width: calc(100% - 18px);
  }

  .message.mine .message-content-row {
    max-width: calc(100% - 24px);
    padding-right: 2px;
    box-sizing: border-box;
  }

  .message-avatar {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: 12px;
  }

  .message.mine {
    margin-right: 7px;
  }

  .message:not(.mine) {
    margin-left: 7px;
  }

  .message-meta {
    gap: 6px;
    max-width: min(82%, calc(100% - 24px));
    opacity: 1;
    font-size: 10px;
    line-height: 1.45;
  }

  .message-bubble {
    max-width: min(82%, calc(100% - 24px));
    font-size: 14px;
  }

  .message-reactions {
    max-width: min(82%, calc(100% - 24px));
  }

  .multi-select-bar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .multi-select-bar span {
    flex: 1 0 100%;
  }

  .message-bubble.has-attachment,
  .message-bubble.has-stream,
  .message-bubble.has-secret,
  .message-bubble.has-special {
    max-width: min(300px, calc(100vw - 96px));
  }

  .message.mine .message-bubble.has-attachment,
  .message.mine .message-bubble.has-stream,
  .message.mine .message-bubble.has-secret,
  .message.mine .message-bubble.has-special {
    max-width: min(300px, calc(100vw - 108px));
  }

  .message-bubble.has-attachment .message-media,
  .message-bubble.has-attachment .message-media-button {
    max-width: 100%;
  }

  .secure-file-card {
    grid-template-columns: 36px minmax(0, 1fr) minmax(50px, auto);
    gap: 7px;
  }

  .secure-file-card .ghost-button {
    min-width: 50px;
    padding-inline: 8px;
  }

  .special-card,
  .poll-card,
  .receipt-card,
  .solitaire-card {
    max-width: min(300px, calc(100% - 24px));
  }

  .composer {
    grid-template-columns: 34px 34px minmax(0, 1fr) auto auto !important;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    padding: 8px calc(8px + env(safe-area-inset-right)) 8px calc(8px + env(safe-area-inset-left));
  }

  .composer.is-voice-mode {
    grid-template-columns: 34px 34px minmax(0, 1fr) auto !important;
  }

  .more-toggle {
    display: grid;
  }

  #attachToggle,
  #secretToggle,
  #specialToggle {
    display: none;
  }

  .composer .icon-button {
    width: 34px;
    height: 34px;
  }

  .composer textarea {
    min-width: 0;
    min-height: 38px;
    padding: 9px 10px;
    font-size: 14px;
  }

  .composer-mode-badge {
    margin-left: 9px;
    height: 22px;
    width: 22px;
    min-width: 22px;
    padding: 0;
    border-radius: 7px;
    font-size: 11px;
  }

  .composer.has-composer-option textarea {
    padding-left: 38px !important;
  }

  .voice-hold-button {
    min-height: 38px;
    border-radius: 18px;
    font-size: 14px;
  }

  .voice-burn-toggle {
    min-width: 44px;
    min-height: 38px;
    padding: 0 8px;
    border-radius: 18px;
  }

  .text-burn-toggle {
    min-width: 42px;
  }

  .group-settings-tabs {
    gap: 4px;
  }

  .group-settings-tabs button {
    min-height: 32px;
    font-size: 13px;
  }

  .voice-record-tip {
    right: 16px;
    left: 16px;
    bottom: calc(100% + 10px);
    min-width: 0;
  }

  .composer .primary-button {
    grid-column: auto !important;
    min-height: 38px;
    padding-inline: 12px;
  }

  .composer-reply {
    grid-column: 1 / -1;
  }

  .clipboard-preview {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 7px 8px;
  }

  .clipboard-preview-list {
    max-width: 100%;
  }

  .clipboard-preview-item {
    width: 56px;
    height: 56px;
  }

  .quick-action-panel {
    right: 8px;
    left: 8px;
    bottom: calc(100% + 8px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: auto;
  }

  .emoji-picker,
  .mention-picker {
    right: 8px;
    left: 8px;
    bottom: calc(100% - 4px);
  }

  .emoji-picker {
    grid-template-columns: repeat(5, 34px);
  }

  .modal-panel,
  .wide-modal {
    width: min(100%, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
    padding: 16px;
  }

  #profileModal .modal-actions {
    gap: 6px;
  }

  #profileModal .modal-actions button {
    min-height: 38px;
    padding-inline: 4px;
    font-size: clamp(12px, 3.5vw, 14px);
  }

  #securityHubModal .security-hub-actions button {
    font-size: 13px;
  }

  .settings-grid,
  .group-settings-layout,
  .secret-manage-form,
  .inline-row {
    grid-template-columns: 1fr;
  }

  .lock-panel,
  .call-panel {
    inset: 58px 0 56px;
  }
}

@media (max-width: 420px) {
  .composer {
    grid-template-columns: 34px 34px minmax(0, 1fr) auto auto !important;
  }

  .composer.is-voice-mode {
    grid-template-columns: 34px 34px minmax(0, 1fr) auto !important;
  }

  .composer textarea {
    grid-column: auto;
    grid-row: auto;
  }

  .composer .primary-button {
    grid-column: auto !important;
    grid-row: auto;
    min-width: 52px;
  }

  .lock-panel,
  .call-panel {
    inset: 58px 0 98px;
  }
}

@media (max-width: 620px) {
  .history-modal-panel {
    width: min(100%, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
    padding: 14px;
  }

  .history-modal-panel header {
    margin-bottom: 10px;
  }

  .history-search-form {
    grid-template-columns: minmax(0, 1fr) 64px;
    gap: 6px;
    margin-bottom: 7px;
  }

  .history-search-form input,
  .history-filter-row input,
  .history-filter-row select {
    height: 36px;
    padding-inline: 10px;
  }

  .history-search-form .primary-button {
    min-width: 0;
    min-height: 36px;
    padding-inline: 8px;
  }

  .favorite-scope-tabs,
  .history-filter-tabs {
    gap: 6px;
    margin-bottom: 7px;
  }

  .favorite-scope-tabs button,
  .history-filter-tabs button {
    min-height: 32px;
    min-width: 50px;
    padding: 5px 11px;
    font-size: 13px;
  }

  .history-filter-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    margin-bottom: 7px;
    padding: 7px;
  }

  .history-filter-row label span {
    display: none;
  }

  .history-filter-row .ghost-button {
    min-width: 58px;
    min-height: 34px;
    padding-inline: 10px;
    font-size: 13px;
  }

  .history-summary {
    margin-bottom: 6px;
    font-size: 12px;
  }

  .history-result {
    min-height: 54px;
    padding: 9px 10px;
  }
}

@media (max-width: 760px) {

  .chat-view.is-chat-open .rail {
    display: none;
  }

  .chat-view.is-chat-open .chat-panel {
    grid-row: 1;
  }

  .chat-view.is-chat-open .chat-head {
    grid-template-columns: 34px 34px minmax(0, 1fr) 34px;
    min-height: 54px;
    padding: calc(6px + env(safe-area-inset-top)) 8px 6px;
    box-shadow: 0 1px 0 rgba(17, 27, 33, 0.08);
  }

  .chat-view.is-chat-open .chat-head .avatar {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  .chat-view.is-chat-open .chat-title-area {
    flex: 1 1 auto;
    min-width: 48px;
  }

  .chat-view.is-chat-open .chat-more-button:not(.hidden) {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: transparent;
    color: #54656f;
    font-size: 22px;
  }

  .chat-view.is-chat-open .chat-more-menu {
    top: calc(100% - 2px);
    right: calc(8px + env(safe-area-inset-right));
  }

  .chat-view.is-chat-open .chat-actions {
    grid-column: 1 / -1;
    width: 100%;
    flex: 0 1 auto;
    max-width: none;
    justify-content: flex-start;
    padding: 2px 0 0;
  }

  .chat-view.is-chat-open .chat-actions .icon-button {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(0, 168, 132, 0.1);
    color: #008069;
  }

  .chat-view.is-chat-open .chat-actions #notifyBtn {
    display: none !important;
  }

  .chat-view.is-chat-open .chat-actions .ghost-button.compact {
    display: none !important;
  }

  .chat-view.is-chat-open .mobile-back:not(.hidden) {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: transparent;
    color: #54656f;
  }

  .chat-view.is-chat-open .messages {
    overflow-x: hidden;
    padding: 10px calc(18px + env(safe-area-inset-right)) 8px calc(14px + env(safe-area-inset-left));
  }

  .chat-view.is-chat-open .message {
    max-width: 100%;
  }

  .chat-view.is-chat-open .message-content-row {
    max-width: calc(100% - 18px);
  }

  .chat-view.is-chat-open .message.mine .message-content-row {
    max-width: calc(100% - 24px);
    padding-right: 2px;
    box-sizing: border-box;
  }

  .chat-view.is-chat-open .message.mine {
    margin-right: 7px;
  }

  .chat-view.is-chat-open .message:not(.mine) {
    margin-left: 7px;
  }

  .chat-view.is-chat-open .composer {
    border-top: 0;
    padding: 7px calc(8px + env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
    background: rgba(240, 242, 245, 0.96);
    box-shadow: 0 -8px 24px rgba(17, 27, 33, 0.08);
  }

  .chat-view.is-chat-open .composer textarea {
    border-radius: 18px;
  }

  .chat-view.is-chat-open .composer .icon-button {
    border-radius: 999px;
  }

  .chat-view.is-chat-open .composer .primary-button {
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(0, 128, 105, 0.2);
  }

  .chat-view.is-chat-open .lock-panel,
  .chat-view.is-chat-open .call-panel {
    inset: 54px 0 56px;
  }
}

@media (max-width: 420px) {
  .chat-view.is-chat-open .chat-actions {
    max-width: none;
  }

  .chat-view.is-chat-open .composer {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  .chat-view.is-chat-open .lock-panel,
  .chat-view.is-chat-open .call-panel {
    inset: 54px 0 98px;
  }
}

.chat-panel > .lock-panel {
  inset: 0 !important;
  z-index: 5000;
  min-height: 100dvh;
  padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
}

@media (max-width: 760px) {
  .chat-view.is-chat-open .chat-panel > .lock-panel {
    inset: 0 !important;
    padding: calc(28px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 760px) {
  .chat-view.is-chat-open .composer {
    display: grid !important;
    grid-template-columns: minmax(132px, 1fr) auto auto auto !important;
    grid-template-areas:
      "reply reply reply reply"
      "clip clip clip clip"
      "input burn emoji action"
      "panel panel panel panel" !important;
    align-items: center;
    gap: 7px;
    padding: 8px calc(10px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
    border-top: 1px solid rgba(17, 27, 33, 0.08);
    background: #f7f7f7;
    box-shadow: none;
  }

  .chat-view.is-chat-open .composer-reply,
  .chat-view.is-chat-open .clipboard-preview {
    width: 100%;
  }

  .chat-view.is-chat-open .composer-reply {
    grid-area: reply;
  }

  .chat-view.is-chat-open .clipboard-preview {
    grid-area: clip;
  }

  .chat-view.is-chat-open .composer #voiceRecordBtn {
    grid-area: input;
    justify-self: end;
    align-self: center;
    z-index: 2;
    display: grid;
    width: 30px;
    height: 30px;
    min-height: 30px;
    margin-right: 5px;
    border: 0;
    border-radius: 999px;
    background-color: transparent;
    background-image: url("./ui-voice.png?v=144");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25px 25px;
    color: #111;
    font-size: 0;
  }

  .chat-view.is-chat-open .composer #voiceRecordBtn::before {
    content: none;
  }

  .chat-view.is-chat-open .composer #voiceRecordBtn.active {
    border: 0;
    background-image: url("./ui-keyboard.png?v=144");
    background-size: 25px 25px;
    font-size: 0;
  }

  .chat-view.is-chat-open .composer #voiceRecordBtn.active::before {
    content: none;
  }

  .chat-view.is-chat-open .composer textarea {
    grid-area: input;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    max-height: 96px;
    padding: 9px 38px 9px 12px;
    border: 0;
    border-radius: 3px;
    background-color: #fff;
    background-image: none;
    color: #111;
    font-size: 16px;
    line-height: 1.35;
    box-shadow: none;
  }

  .chat-view.is-chat-open .composer.has-message-text textarea {
    padding-right: 38px;
    background-image: none;
  }

  .chat-view.is-chat-open .voice-hold-button {
    grid-area: input;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding-right: 38px;
    border-radius: 3px;
    background: #fff;
    color: #111;
    box-shadow: none;
  }

  .chat-view.is-chat-open .text-burn-toggle,
  .chat-view.is-chat-open .voice-burn-toggle {
    grid-area: burn;
    min-width: 50px;
    min-height: 40px;
    padding: 0 7px;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-size: 14px;
    line-height: 1;
    box-shadow: none;
  }

  .chat-view.is-chat-open .text-burn-toggle input,
  .chat-view.is-chat-open .voice-burn-toggle input {
    width: 14px;
    height: 14px;
  }

  .chat-view.is-chat-open .text-burn-toggle.is-on,
  .chat-view.is-chat-open .voice-burn-toggle.is-on {
    background: #fff1f0;
    color: var(--danger);
  }

  .chat-view.is-chat-open .composer #emojiToggle,
  .chat-view.is-chat-open .composer #moreToggle {
    width: 34px;
    height: 34px;
    min-height: 34px;
    border-radius: 999px;
    background: transparent;
    color: #111;
    font-size: 28px;
    line-height: 1;
  }

  .chat-view.is-chat-open .composer #emojiToggle {
    grid-area: emoji;
    border: 0;
    background-image: url("./ui-emoji.png?v=144");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px 30px;
    color: transparent;
    font-size: 0;
  }

  .chat-view.is-chat-open .composer #moreToggle {
    grid-area: action;
    display: grid;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 31px;
    font-weight: 300;
  }

  .chat-view.is-chat-open .composer #moreToggle.active {
    background: transparent;
    color: #111;
  }

  .chat-view.is-chat-open .composer.has-message-text #moreToggle {
    display: none;
  }

  .chat-view.is-chat-open .composer #sendMessageBtn {
    grid-area: action;
    display: none;
    place-items: center;
    min-width: 60px;
    min-height: 40px;
    height: 40px;
    padding: 0 13px;
    border: 0;
    border-radius: 5px;
    background: #58c866;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
  }

  .chat-view.is-chat-open .composer.has-message-text #sendMessageBtn:not(.hidden) {
    display: inline-grid;
  }

  .chat-view.is-chat-open .composer #sendMessageBtn:hover,
  .chat-view.is-chat-open .composer #sendMessageBtn:focus-visible {
    background: #4fc15e;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  }

  .chat-view.is-chat-open .composer #sendMessageBtn:active {
    background: #48b857;
  }

  .chat-view.is-chat-open .quick-action-panel {
    position: static;
    grid-area: panel;
    display: block;
    width: auto;
    min-height: 282px;
    margin: 8px calc(-10px - env(safe-area-inset-right)) calc(-8px - env(safe-area-inset-bottom)) calc(-10px - env(safe-area-inset-left));
    padding: 28px calc(16px + env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
    border: 0;
    border-top: 1px solid rgba(17, 27, 33, 0.08);
    border-radius: 0;
    background: #f7f7f7;
    box-shadow: none;
  }

  .chat-view.is-chat-open .quick-action-panel.is-single-page {
    min-height: 0;
  }

  .chat-view.is-chat-open .quick-action-panel.hidden {
    display: none !important;
  }

  .chat-view.is-chat-open .quick-action-pages {
    min-height: 194px;
  }

  .chat-view.is-chat-open .quick-action-page {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-content: start;
    gap: 22px 10px;
    min-height: 194px;
    transition:
      transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
      opacity 0.2s ease,
      visibility 0.2s ease;
  }

  .chat-view.is-chat-open .quick-action-panel[data-page="1"] .quick-action-page[data-quick-page-panel="2"] {
    transform: translateX(100%);
  }

  .chat-view.is-chat-open .quick-action-panel[data-page="2"] .quick-action-page[data-quick-page-panel="1"] {
    transform: translateX(-100%);
  }

  .chat-view.is-chat-open .quick-action-page > button {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    min-height: 86px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
  }

  .chat-view.is-chat-open .quick-action-page > button:hover {
    background: transparent;
  }

  .chat-view.is-chat-open .quick-action-page > button strong {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: #fff;
    color: #111;
    font-size: 20px;
    font-weight: 900;
    box-shadow: 0 1px 1px rgba(17, 27, 33, 0.04);
  }

  .chat-view.is-chat-open .quick-action-page > button.active strong {
    background: #fff1f0;
    color: var(--danger);
    box-shadow: inset 0 0 0 1px rgba(180, 35, 24, 0.24);
  }

  .chat-view.is-chat-open .quick-action-page > button span {
    max-width: 74px;
    color: #666;
    font-size: 13px;
    font-weight: 500;
    white-space: normal;
  }

  .chat-view.is-chat-open .quick-action-page > .quick-option-check {
    display: grid;
    justify-items: center;
    gap: 8px;
    min-height: 86px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
  }

  .chat-view.is-chat-open .quick-action-page > .quick-option-check:hover,
  .chat-view.is-chat-open .quick-action-page > .quick-option-check.is-active {
    background: transparent;
  }

  .chat-view.is-chat-open .quick-option-main {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 6px;
  }

  .chat-view.is-chat-open .quick-option-main input {
    position: absolute;
    width: 18px;
    height: 18px;
    margin: 0 0 0 44px;
  }

  .chat-view.is-chat-open .quick-option-main strong {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: #fff;
    color: #111;
    font-size: 20px;
    font-weight: 900;
    box-shadow: 0 1px 1px rgba(17, 27, 33, 0.04);
  }

  .chat-view.is-chat-open .quick-option-check.is-active .quick-option-main strong {
    background: #e6fff6;
    color: var(--brand);
    box-shadow: inset 0 0 0 1px rgba(0, 168, 132, 0.28);
  }

  .chat-view.is-chat-open .quick-option-main em {
    max-width: 74px;
    color: #666;
    font-size: 13px;
    font-weight: 500;
    white-space: normal;
  }

  .chat-view.is-chat-open .quick-secret-code-input {
    width: min(86px, 100%);
    min-height: 28px;
    padding: 4px 8px;
    font-size: 12px;
    text-align: center;
  }

  .chat-view.is-chat-open .quick-action-dots {
    min-height: 14px;
    margin-top: 12px;
    padding-top: 0;
  }

  .chat-view.is-chat-open .quick-action-dots button {
    width: 7px;
    height: 7px;
  }

  .chat-view.is-chat-open .emoji-picker {
    right: 10px;
    left: 10px;
    bottom: calc(100% + 6px);
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-radius: 12px;
  }
}

@media (max-width: 380px) {
  .chat-view.is-chat-open .composer {
    gap: 6px;
    padding-right: calc(8px + env(safe-area-inset-right));
    padding-left: calc(8px + env(safe-area-inset-left));
  }

  .chat-view.is-chat-open .composer #voiceRecordBtn,
  .chat-view.is-chat-open .composer #emojiToggle,
  .chat-view.is-chat-open .composer #moreToggle {
    width: 32px;
    height: 32px;
    min-height: 32px;
  }

  .chat-view.is-chat-open .composer #voiceRecordBtn {
    width: 28px;
    height: 28px;
    min-height: 28px;
    background-size: 23px 23px;
  }

  .chat-view.is-chat-open .composer #emojiToggle {
    background-size: 28px 28px;
  }

  .chat-view.is-chat-open .text-burn-toggle,
  .chat-view.is-chat-open .voice-burn-toggle {
    min-width: 46px;
    padding-inline: 4px;
  }

  .chat-view.is-chat-open .secure-file-card {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .chat-view.is-chat-open .secure-file-card .ghost-button {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .chat-view.is-chat-open .composer #sendMessageBtn {
    min-width: 58px;
    padding-inline: 12px;
  }
}

/* Stitch MCP theme refresh */
.startup-card,
.auth-panel,
.modal-panel,
.status-block,
.detail-block,
.settings-section,
.settings-card,
.security-lock-card,
.request-row,
.device-row,
.forward-option,
.history-result,
.application-notice-card,
.conversation-context-menu,
.list-create-menu,
.emoji-picker,
.mention-picker,
.quick-action-panel {
  border-color: rgba(0, 77, 64, 0.12);
  border-radius: var(--radius);
  box-shadow: var(--soft-shadow);
}

.auth-visual {
  border-radius: 24px;
  background:
    radial-gradient(circle at 74% 18%, rgba(255, 191, 0, 0.34), transparent 28%),
    linear-gradient(145deg, #004d40, #06372f 62%, #022820);
}

.cipher-card,
.cipher-mark,
.auth-tabs,
.auth-tab,
.brand-logo,
.avatar,
.icon-button,
.rail-button,
.primary-button,
.ghost-button,
input,
textarea,
select {
  border-radius: var(--radius);
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(0, 77, 64, 0.42);
  box-shadow: 0 0 0 4px rgba(0, 77, 64, 0.11);
}

.primary-button {
  background: var(--brand);
  box-shadow: 0 8px 18px rgba(0, 77, 64, 0.16);
}

.primary-button:hover,
.rail-button.active,
.icon-button:hover {
  background: var(--brand-strong);
}

.ghost-button {
  border-color: rgba(0, 77, 64, 0.14);
  background: rgba(255, 255, 255, 0.92);
}

.ghost-button:hover {
  border-color: rgba(0, 77, 64, 0.32);
  background: #fafffd;
}

.chat-view {
  background: var(--bg);
}

.rail {
  background: var(--brand-strong);
}

.rail-button {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.82);
}

.rail-button.active {
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand-strong);
}

.rail-button.is-secure {
  background: rgba(224, 242, 241, 0.18);
  color: #ecfffb;
}

.rail-button.is-locked {
  background: var(--gold);
  color: var(--brand-deep);
}

.list-panel,
.detail-panel {
  background: var(--bg);
}

.list-head,
.chat-head {
  background: #f8fbf9;
  border-color: rgba(0, 77, 64, 0.1);
}

.chat-head {
  box-shadow: none;
}

.search-box input {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(0, 77, 64, 0.13);
  box-shadow: 0 1px 0 rgba(0, 77, 64, 0.03);
}

.list-create-trigger,
.head-actions .icon-button {
  background: #e7f3f1;
  color: var(--brand-strong);
}

.list-create-trigger.active,
.head-actions .icon-button.active {
  background: var(--brand-strong);
  color: #fff;
}

.list-create-menu,
.conversation-context-menu {
  background: rgba(255, 255, 255, 0.98);
}

.list-create-menu button:hover,
.conversation-context-menu button:hover,
.mention-option.active,
.mention-option:hover {
  background: var(--brand-soft);
}

.list-create-menu strong,
.conversation-context-menu strong,
.application-notice-icon,
.conversation-flags em,
.new-user-guide {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.conversation-list {
  padding-inline: 12px;
}

.conversation-item {
  min-height: 70px;
  border-radius: 16px;
  transition:
    background 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.conversation-item:hover,
.conversation-item.active,
.conversation-item.has-unread {
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 77, 64, 0.08);
}

.conversation-item.active {
  background: #ffffff;
  outline: 1px solid rgba(0, 77, 64, 0.08);
}

.conversation-avatar-wrap > .avatar,
.avatar,
.message-avatar {
  background: #e0f2f1;
  color: var(--brand-strong);
}

.conversation-security-icon {
  border-color: var(--bg);
}

.conversation-security-icon.is-locked,
.conversation-security-icon.is-temporary {
  background: var(--brand-deep);
}

.conversation-security-icon.is-unlocked,
.conversation-security-icon.is-encrypted {
  background: var(--brand);
  color: #fff;
}

.chat-panel {
  background: var(--chat-bg);
}

.messages {
  background-color: var(--chat-bg);
  background-image:
    radial-gradient(circle at 12px 12px, rgba(0, 77, 64, 0.025) 0 2px, transparent 2px),
    linear-gradient(135deg, rgba(0, 77, 64, 0.018), transparent 42%);
  background-size: 28px 28px, 100% 100%;
}

.conversation-loading-card {
  background: rgba(255, 255, 255, 0.96);
}

.message-content-row {
  max-width: min(78%, 720px);
}

.message-bubble {
  border-radius: 12px;
  background: var(--message-in);
  box-shadow:
    0 1px 1px rgba(0, 77, 64, 0.08),
    0 8px 20px rgba(0, 77, 64, 0.045);
}

.message-bubble.is-text {
  min-height: 34px !important;
  padding: 7px 12px !important;
}

.message.mine .message-bubble,
.message.mine .message-bubble.has-attachment,
.message.mine .message-bubble.has-secret,
.message.mine .message-bubble.has-special {
  background: var(--message-out);
}

.message.mine .message-bubble.is-recalled {
  background: rgba(225, 245, 254, 0.76);
}

.message-avatar.is-bot,
.avatar.is-bot {
  background: var(--brand-deep);
  color: #e0f2f1;
}

.message-meta {
  color: #72837b;
}

.message-action-strip {
  background: rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  padding: 1px 6px;
}

.message-quote,
.composer-reply,
.clipboard-preview {
  border-color: rgba(0, 77, 64, 0.2);
  background: rgba(0, 77, 64, 0.065);
}

.mention {
  color: #00796b;
}

.composer {
  border-top-color: rgba(0, 77, 64, 0.1);
  background: #f8fbf9;
}

.composer textarea,
.voice-hold-button,
.voice-burn-toggle,
.composer-reply,
.clipboard-preview {
  border-color: transparent;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 77, 64, 0.08);
}

.composer .icon-button {
  color: var(--brand-strong);
}

.composer .icon-button:hover,
.composer .icon-button.active,
.icon-button.active,
.icon-button.recording {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.composer .primary-button,
.composer .primary-button:hover {
  background: var(--brand);
}

.voice-burn-toggle:has(input:checked),
.voice-burn-toggle.is-on,
.text-burn-toggle.is-on {
  background: #fff7e0;
  color: #9a6500;
}

.quick-action-panel {
  border-color: rgba(0, 77, 64, 0.12);
  background: rgba(255, 255, 255, 0.98);
}

.quick-action-page > button {
  background: #f7faf8;
  border-radius: 14px;
}

.quick-action-page > button:hover {
  background: var(--brand-soft);
}

.quick-action-page > button strong {
  background: var(--brand-strong);
}

.quick-action-page > button.active strong,
.quick-action-page > button.recording strong {
  background: var(--gold);
  color: var(--brand-deep);
}

.quick-action-dots button.active {
  background: var(--brand-strong);
}

.detail-panel {
  border-left-color: rgba(0, 77, 64, 0.1);
}

.status-block,
.detail-block,
.meta-chip-grid span,
.meta-section {
  background: rgba(255, 255, 255, 0.86);
}

.meta-tab-list,
.group-settings-tabs,
.security-lock-tabs {
  border-color: rgba(0, 77, 64, 0.1);
  background: var(--panel-soft);
  border-radius: 14px;
}

.meta-tab-list button.active,
.group-settings-tabs button.active,
.security-lock-tabs button.active,
.auth-tab.active,
.favorite-scope-tabs button.active,
.history-filter-tabs button.active {
  background: #fff;
  color: var(--brand-strong);
  box-shadow: 0 6px 18px rgba(0, 77, 64, 0.08);
}

.settings-section,
.settings-card,
.security-lock-card {
  background: rgba(255, 255, 255, 0.9);
}

.modal {
  background: rgba(5, 35, 30, 0.42);
  backdrop-filter: blur(8px);
}

.modal-panel {
  background: rgba(255, 255, 255, 0.97);
}

.close-modal {
  background: #f2f6f4;
  color: var(--brand-strong);
}

.image-preview-panel {
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(0, 77, 64, 0.2);
}

@media (max-width: 760px) {
  .rail {
    background: transparent;
  }

  .rail-brand {
    background: #edf5f2;
  }

  .rail-nav,
  .rail-bottom {
    background: #fff;
    border-top: 1px solid rgba(0, 77, 64, 0.1);
  }

  .rail-button {
    background: transparent;
    color: #53635d;
    box-shadow: none;
  }

  .rail-button.active {
    background: var(--brand-soft);
    color: var(--brand-strong);
  }

  .rail-brand .brand-logo.small {
    background: #e0f2f1;
  }

  .chat-view.is-chat-open .chat-head {
    background: #f8fbf9;
    box-shadow: none;
  }

  .chat-view.is-chat-open .messages {
    background-color: var(--chat-bg);
  }

  .chat-view.is-chat-open .composer {
    background: #f8fbf9;
    border-top-color: rgba(0, 77, 64, 0.1);
  }

  .chat-view.is-chat-open .composer textarea,
  .chat-view.is-chat-open .voice-hold-button {
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(0, 77, 64, 0.08);
  }

  .chat-view.is-chat-open .text-burn-toggle,
  .chat-view.is-chat-open .voice-burn-toggle {
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(0, 77, 64, 0.08);
  }

  .chat-view.is-chat-open .composer #sendMessageBtn {
    border-radius: 8px;
    background: var(--brand);
    box-shadow: 0 8px 18px rgba(0, 77, 64, 0.18);
  }

  .chat-view.is-chat-open .composer #sendMessageBtn:hover,
  .chat-view.is-chat-open .composer #sendMessageBtn:focus-visible {
    background: var(--brand-strong);
  }

  .chat-view.is-chat-open .quick-action-panel {
    background: #f8fbf9;
  }

  .chat-view.is-chat-open .quick-action-page > button strong {
    border-radius: 16px;
    background: #fff;
    color: var(--brand-deep);
    box-shadow: 0 4px 14px rgba(0, 77, 64, 0.07);
  }

  .chat-view.is-chat-open .quick-action-page > button.active strong {
    background: #fff7e0;
    color: #9a6500;
  }

  .chat-view.is-chat-open .quick-action-dots button.active {
    background: var(--brand-strong);
  }
}

.profile-panel {
  width: min(430px, 100%);
  display: grid;
  gap: 20px;
  background: #f8faf9;
}

.profile-panel-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}

.profile-panel-head h2 {
  margin: 0;
  color: var(--brand-strong);
  font-size: 17px;
  font-weight: 900;
}

.profile-title-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 12px;
}

.profile-hero-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 24px 18px;
  border: 1px solid rgba(0, 77, 64, 0.1);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 77, 64, 0.055);
  text-align: center;
}

.profile-qr-entry {
  position: absolute;
  top: 22px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(12, 124, 102, 0.12);
  border-radius: 12px;
  background: rgba(12, 124, 102, 0.08);
  color: var(--brand-strong);
  font-size: 25px;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(0, 77, 64, 0.08);
}

.profile-qr-entry:active {
  transform: translateY(1px);
}

.profile-hero-avatar-wrap {
  position: relative;
  width: 86px;
  height: 86px;
}

.profile-hero-avatar {
  width: 86px;
  height: 86px;
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 77, 64, 0.16);
  font-size: 26px;
}

.profile-hero-edit {
  position: absolute;
  right: -2px;
  bottom: 4px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(0, 77, 64, 0.18);
}

.profile-avatar-picker-panel {
  width: min(430px, 100%);
}

.profile-qr-panel {
  width: min(390px, calc(100vw - 32px));
}

.profile-qr-body {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 8px 0 4px;
}

.profile-qr-user {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f4fbf8;
  color: var(--text);
}

.profile-qr-user span {
  display: grid;
  gap: 2px;
  text-align: left;
}

.profile-qr-user small {
  color: var(--muted);
}

.profile-qr-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex: 0 0 48px;
}

#profileQrImage {
  width: 240px;
  height: 240px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0, 77, 64, 0.08);
}

.profile-qr-body p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.profile-avatar-choice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.profile-avatar-choice {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 4px;
  background: #f4f7f6;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 77, 64, 0.06);
}

.profile-avatar-choice:hover,
.profile-avatar-choice.active {
  border-color: var(--brand);
  background: rgba(0, 168, 132, 0.1);
}

.profile-avatar-choice.active::after {
  content: "check";
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-family: "Material Symbols Outlined";
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(0, 77, 64, 0.18);
  font-variation-settings: "FILL" 0, "wght" 700, "GRAD" 0, "opsz" 18;
}

.profile-avatar-choice img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}

@media (max-width: 480px) {
  .profile-avatar-choice-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.profile-hero-card > strong {
  color: #071d19;
  font-size: 21px;
  font-weight: 900;
}

.profile-hero-card > span {
  color: var(--muted);
  font-size: 14px;
}

.profile-hero-card > em {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

#profileForm {
  display: grid;
  gap: 18px;
}

.profile-settings-card {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(0, 77, 64, 0.1);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 77, 64, 0.05);
}

.profile-settings-card h3 {
  margin: 0;
  padding: 11px 18px;
  background: #eef1f0;
  color: #65756f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.6px;
}

.profile-field-row,
.profile-switch-row,
.profile-menu-row {
  min-height: 54px;
  padding: 12px 18px;
  border-top: 1px solid rgba(0, 77, 64, 0.09);
}

.profile-field-row:first-of-type,
.profile-switch-row:first-of-type,
.profile-menu-row:first-of-type {
  border-top: 0;
}

.profile-field-row span {
  color: var(--brand-strong);
  font-weight: 800;
}

.profile-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  text-align: left;
}

.profile-menu-row strong {
  color: #75837d;
  font-size: 24px;
  font-weight: 500;
}

#profileModal .modal-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

@media (max-width: 760px) {
  #profileModal {
    align-items: stretch;
    place-items: stretch;
    padding: 0;
    background: #f5f7f6;
    backdrop-filter: none;
  }

  #profileModal .profile-panel {
    width: 100%;
    max-width: none;
    max-height: 100dvh;
    min-height: 100dvh;
    padding: calc(18px + env(safe-area-inset-top)) 18px calc(84px + env(safe-area-inset-bottom));
    border-radius: 0;
    background: #f5f7f6;
    box-shadow: none;
  }

  .profile-panel-head {
    min-height: 44px;
  }

  .profile-panel-head .close-modal {
    background: transparent;
    font-size: 20px;
  }

  .profile-hero-card {
    padding: 24px 16px;
    border-radius: 12px;
  }

  .profile-settings-card {
    border-radius: 12px;
  }

  #profileModal .modal-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* Lumina Chat Stitch source project: projects/6065387027695028396 */
body {
  background: var(--lumina-surface);
  color: var(--lumina-text);
  font-family:
    "PingFang SC",
    "Microsoft YaHei",
    system-ui,
    sans-serif;
}

h1,
h2,
h3,
.brand-row h1,
.chat-head h2,
.list-head h2,
.user-strip h2,
.profile-panel-head h2,
.profile-hero-card > strong {
  font-family:
    "PingFang SC",
    "Microsoft YaHei",
    system-ui,
    sans-serif;
  letter-spacing: 0;
}

:root {
  --bg: var(--lumina-surface);
  --panel: var(--lumina-surface-lowest);
  --panel-soft: var(--lumina-surface-low);
  --ink: var(--lumina-text);
  --muted: var(--lumina-muted);
  --line: var(--lumina-border);
  --brand: var(--lumina-success);
  --brand-strong: var(--lumina-primary);
  --brand-deep: var(--lumina-deep);
  --brand-soft: rgba(148, 241, 214, 0.58);
  --chat-bg: var(--lumina-surface);
  --message-in: var(--lumina-surface-lowest);
  --message-out: var(--lumina-success);
  --message-text: var(--lumina-text);
  --message-meta: var(--lumina-muted);
  --message-panel: rgba(248, 249, 250, 0.9);
  --quote-bg: rgba(255, 255, 255, 0.22);
  --gold: #c69956;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  --soft-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  --radius: 16px;
}

.material-symbol,
.profile-title-icon,
.profile-hero-edit,
.chat-more-button,
.mobile-back {
  font-family: "Material Symbols Outlined", sans-serif;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.auth-panel,
.startup-card,
.modal-panel,
.status-block,
.detail-block,
.settings-section,
.settings-card,
.security-lock-card,
.profile-hero-card,
.profile-settings-card,
.application-notice-card,
.conversation-context-menu,
.list-create-menu,
.emoji-picker,
.mention-picker,
.quick-action-panel {
  border-color: var(--lumina-border);
  border-radius: 16px;
  background: var(--lumina-surface-lowest);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.primary-button,
.composer .primary-button,
.composer .primary-button:hover {
  background: var(--lumina-success);
  color: #fff;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.2);
}

.primary-button:hover {
  background: var(--lumina-primary);
}

.ghost-button,
input,
textarea,
select {
  border-color: var(--lumina-border);
  background: var(--lumina-surface-lowest);
  color: var(--lumina-text);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--lumina-success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.rail {
  background: var(--lumina-surface-lowest);
  color: var(--lumina-text);
  border-right: 1px solid var(--lumina-border);
}

.rail-button {
  background: transparent;
  color: #3c4a42;
}

.rail-button.active,
.rail-button:hover,
.icon-button:hover {
  background: var(--lumina-secondary-container);
  color: var(--lumina-on-secondary-container);
}

.rail-button.is-secure {
  background: rgba(16, 185, 129, 0.14);
  color: var(--lumina-primary);
}

.rail-button.is-locked {
  background: #ffddb1;
  color: #614002;
}

.list-panel,
.detail-panel,
.chat-view {
  background: var(--lumina-surface);
}

.list-head,
.chat-head {
  border-color: var(--lumina-border);
  background: rgba(248, 249, 250, 0.86);
  backdrop-filter: blur(10px);
}

.conversation-item {
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
}

.conversation-item:hover,
.conversation-item.active,
.conversation-item.has-unread {
  background: var(--lumina-surface-low);
  box-shadow: none;
}

.conversation-item.active {
  outline: 0;
  box-shadow: inset 3px 0 0 var(--lumina-success);
}

.avatar,
.message-avatar,
.conversation-avatar-wrap > .avatar {
  border-radius: 999px;
  background: var(--lumina-secondary-container);
  color: var(--lumina-on-secondary-container);
}

.conversation-copy strong,
.chat-title-area h2,
.profile-hero-card > strong {
  color: var(--lumina-text);
}

.conversation-copy small,
.conversation-time,
.conversation-last-login,
.profile-hero-card > span,
.profile-last-login {
  color: var(--lumina-muted);
}

.messages {
  background: var(--lumina-surface);
  background-image: none;
}

.message-bubble {
  border-radius: 18px;
  background: var(--lumina-surface-lowest);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.47;
}

.message:not(.mine) .message-bubble {
  border-bottom-left-radius: 4px;
}

.message.mine .message-bubble,
.message.mine .message-bubble.has-attachment,
.message.mine .message-bubble.has-secret,
.message.mine .message-bubble.has-special {
  background: var(--lumina-success);
  color: #fff;
}

.message.mine .message-bubble .message-quote,
.message.mine .message-bubble .message-quote span,
.message.mine .message-bubble .message-caption,
.message.mine .message-bubble .message-text-content,
.message.mine .message-status,
.message.mine .message-edited,
.message.mine .message-meta {
  color: rgba(255, 255, 255, 0.88);
}

.message.mine .message-bubble {
  border-bottom-right-radius: 4px;
}

.message.mine .message-bubble.is-recalled {
  background: rgba(16, 185, 129, 0.22);
  color: var(--lumina-primary);
}

.message-meta,
.message-time-only {
  color: var(--lumina-muted);
  font-size: 11px;
}

.message-action-strip {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--lumina-border);
}

.message-quote,
.composer-reply {
  border-left-color: var(--lumina-success);
  background: rgba(255, 255, 255, 0.28);
}

.mention {
  color: var(--lumina-primary);
}

.composer {
  border-top: 1px solid var(--lumina-border);
  background: rgba(248, 249, 250, 0.92);
  backdrop-filter: blur(10px);
}

.composer textarea,
.voice-hold-button,
.voice-burn-toggle,
.composer-reply,
.clipboard-preview {
  border: 1px solid var(--lumina-border);
  background: var(--lumina-surface-lowest);
  box-shadow: none;
}

.composer .icon-button {
  color: var(--lumina-muted);
}

.composer .icon-button:hover,
.composer .icon-button.active,
.icon-button.active,
.icon-button.recording {
  background: var(--lumina-surface-high);
  color: var(--lumina-primary);
}

.quick-action-panel {
  background: rgba(255, 255, 255, 0.98);
}

.quick-action-page > button {
  background: var(--lumina-surface-low);
  border-radius: 16px;
}

.quick-action-page > button strong {
  background: var(--lumina-success);
  color: #fff;
}

.quick-action-page > button span {
  color: var(--lumina-muted);
}

.detail-panel {
  background: var(--lumina-surface);
}

.status-block,
.detail-block,
.meta-chip-grid span,
.meta-section {
  background: var(--lumina-surface-lowest);
}

.profile-panel {
  background: var(--lumina-surface);
}

.profile-panel-head h2 {
  color: var(--lumina-primary);
}

.profile-title-icon {
  background: transparent;
  color: var(--lumina-primary);
  font-size: 0;
}

.profile-title-icon::before {
  content: "account_circle";
  font-size: 24px;
}

.profile-hero-avatar {
  border-radius: 999px;
}

.profile-hero-edit {
  font-size: 0;
}

.profile-hero-edit::before {
  content: "edit";
  font-size: 20px;
}

.profile-hero-edit:disabled {
  cursor: wait;
  opacity: 0.68;
}

.profile-hero-card > em {
  background: rgba(16, 185, 129, 0.12);
  color: var(--lumina-primary);
}

.profile-settings-card h3 {
  background: var(--lumina-surface-container);
  color: var(--lumina-muted);
  font-family: system-ui, sans-serif;
  letter-spacing: 0.05em;
}

.profile-field-row,
.profile-switch-row,
.profile-menu-row {
  border-top-color: var(--lumina-border);
}

.profile-menu-row strong {
  color: var(--lumina-muted);
}

@media (max-width: 760px) {
  .chat-view {
    grid-template-rows: 64px minmax(0, 1fr) calc(80px + env(safe-area-inset-bottom)) !important;
    background: var(--lumina-surface);
  }

  .rail {
    grid-template-columns: 1fr;
    grid-template-rows: 64px minmax(0, 1fr) calc(80px + env(safe-area-inset-bottom));
    background: transparent !important;
    border-right: 0;
    z-index: 38;
  }

  .rail-brand {
    grid-row: 1;
    grid-column: 1;
    justify-content: flex-start;
    padding: 0 16px;
    background: transparent;
    border: 0;
  }

  .rail-brand .brand-logo.small {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--lumina-surface-high);
    box-shadow: none;
  }

  .list-head {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 40;
    display: flex;
    min-height: 64px;
    padding: calc(8px + env(safe-area-inset-top)) 16px 8px 68px;
    border-bottom: 0;
    background: rgba(248, 249, 250, 0.84);
    backdrop-filter: blur(12px);
  }

  .list-title-copy {
    display: grid;
    gap: 0;
  }

  .list-title-copy p {
    display: none;
  }

  .list-title-copy h2 {
    color: var(--lumina-primary);
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
  }

  .head-actions {
    position: static;
    margin-left: auto;
    z-index: auto;
  }

  .list-create-trigger,
  .head-actions .icon-button {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: transparent;
    color: var(--lumina-primary);
  }

  .list-create-trigger:hover,
  .list-create-trigger.active {
    background: var(--lumina-surface-high);
    color: var(--lumina-primary);
  }

  .list-create-menu {
    top: calc(100% + 8px);
    right: 12px;
  }

  .list-panel,
  .chat-panel {
    grid-row: 2;
    background: var(--lumina-surface);
  }

  .search-box {
    padding: 14px 16px 10px;
  }

  .search-box input {
    height: 48px;
    border: 0;
    border-radius: 16px;
    background: var(--lumina-surface-low);
    padding-left: 16px;
  }

  .conversation-list {
    padding: 4px 16px 18px;
  }

  .conversation-item {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    min-height: 72px;
    margin: 0;
    padding: 12px 8px;
    border-radius: 16px;
    background: transparent;
  }

  .conversation-item:hover,
  .conversation-item.active,
  .conversation-item.has-unread {
    background: var(--lumina-surface-low);
  }

  .conversation-avatar-wrap,
  .conversation-avatar-wrap > .avatar {
    width: 48px;
    height: 48px;
  }

  .conversation-copy strong {
    font-size: 16px;
    line-height: 22px;
  }

  .conversation-copy small {
    font-size: 14px;
    line-height: 20px;
  }

  .conversation-time {
    color: var(--lumina-muted);
    font-size: 11px;
    font-weight: 600;
  }

  .rail-nav,
  .rail-bottom {
    grid-row: 3;
    background: var(--lumina-surface-lowest);
    border-top: 1px solid var(--lumina-border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.04);
  }

  .rail-nav {
    grid-column: 1;
    justify-content: flex-start;
    width: 50%;
    gap: 0;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom)) 12px;
  }

  .rail-bottom {
    grid-column: 1;
    justify-self: end;
    width: 50%;
    justify-content: flex-end;
    gap: 0;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) 0;
    pointer-events: none;
  }

  .rail-bottom .rail-button {
    pointer-events: auto;
  }

  .rail-button {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: auto;
    min-width: 66px;
    height: 54px;
    border-radius: 12px;
    background: transparent;
    color: #3c4a42;
    font-size: 21px;
    line-height: 1;
    font-weight: 700;
  }

  .rail-button::after {
    color: inherit;
    font-family: "PingFang SC", system-ui, sans-serif;
    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
  }

  .rail-button[data-view="chats"]::after {
    content: "聊天";
  }

  .rail-button[data-view="directory"]::after {
    content: "通讯录";
  }

  #profileQuickBtn::after {
    content: "个人中心";
  }

  #openSecurityBtn::after {
    content: "隐私";
  }

  .rail-button.active {
    background: var(--lumina-secondary-container);
    color: var(--lumina-on-secondary-container);
  }

  .chat-view.is-chat-open {
    grid-template-rows: minmax(0, 1fr) !important;
  }

  .chat-view.is-chat-open .chat-head {
    min-height: 64px;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
    background: rgba(248, 249, 250, 0.84);
    backdrop-filter: blur(12px);
    border-bottom: 0;
  }

  .chat-view.is-chat-open .mobile-back:not(.hidden),
  .chat-view.is-chat-open .chat-more-button:not(.hidden) {
    background: transparent;
    color: #3c4a42;
  }

  .chat-view.is-chat-open .chat-head .avatar {
    width: 40px;
    height: 40px;
  }

  .chat-view.is-chat-open .chat-title-area h2 {
    color: var(--lumina-text);
    font-size: 20px;
    line-height: 28px;
  }

  .chat-view.is-chat-open .messages {
    background: var(--lumina-surface);
    padding: 14px 16px 10px;
  }

  .chat-view.is-chat-open .message-bubble {
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.47;
  }

  .chat-view.is-chat-open .message:not(.mine) .message-bubble {
    border-bottom-left-radius: 4px;
  }

  .chat-view.is-chat-open .message.mine .message-bubble {
    border-bottom-right-radius: 4px;
  }

  .chat-view.is-chat-open .composer {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--lumina-border);
    background: rgba(248, 249, 250, 0.92);
    backdrop-filter: blur(12px);
  }

  .chat-view.is-chat-open .composer textarea,
  .chat-view.is-chat-open .voice-hold-button {
    min-height: 44px;
    border-radius: 16px;
    border: 1px solid var(--lumina-border);
    background: var(--lumina-surface-lowest);
    font-size: 15px;
    line-height: 22px;
  }

  .chat-view.is-chat-open .composer #sendMessageBtn {
    min-width: 48px;
    height: 44px;
    min-height: 44px;
    border-radius: 999px;
    background: var(--lumina-success);
  }

  .chat-view.is-chat-open .composer #emojiToggle,
  .chat-view.is-chat-open .composer #moreToggle,
  .chat-view.is-chat-open .composer #voiceRecordBtn {
    color: var(--lumina-muted);
  }

  #profileModal {
    background: var(--lumina-surface);
  }

  #profileModal .profile-panel {
    padding: calc(18px + env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom));
  }

  .profile-panel-head {
    min-height: 46px;
  }

  .profile-panel-head h2 {
    font-size: 20px;
    line-height: 28px;
  }

  .profile-hero-card {
    padding: 24px 18px;
  }

  .profile-hero-avatar-wrap,
  .profile-hero-avatar {
    width: 96px;
    height: 96px;
  }

  .profile-settings-card h3 {
    padding: 11px 18px;
  }

  .profile-field-row,
  .profile-switch-row,
  .profile-menu-row {
    min-height: 56px;
    padding: 13px 18px;
  }
}

.profile-bottom-nav {
  display: none;
}

@media (max-width: 760px) {
  .profile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 125;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: calc(80px + env(safe-area-inset-bottom));
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--lumina-border);
    background: var(--lumina-surface-lowest);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.04);
  }

  .profile-bottom-nav button {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-width: 88px;
    min-height: 54px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #3c4a42;
  }

  .profile-bottom-nav button.active {
    background: var(--lumina-secondary-container);
    color: var(--lumina-on-secondary-container);
  }

  .profile-bottom-nav span {
    font-family: "Material Symbols Outlined";
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
  }

  .profile-bottom-nav button.active span {
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
  }

  .profile-bottom-nav strong {
    font-family: "PingFang SC", system-ui, sans-serif;
    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
  }
}

/* v192 main navigation: Chats / Contacts / Profile only. */
.rail {
  grid-template-rows: auto 1fr;
}

.rail-bottom {
  display: none !important;
}

.rail-nav {
  align-content: start;
}

.rail-button {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  gap: 3px;
  width: 52px;
  height: 52px;
  padding: 5px 4px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
}

.rail-button::after {
  content: none !important;
}

.rail-icon {
  font-family: "Material Symbols Outlined";
  font-size: 23px;
  line-height: 1;
  font-weight: 400;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.rail-button strong {
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: 10px;
  line-height: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-button.active .rail-icon {
  font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24;
}

#profileModal #openSecurityBtn.is-secure span::after,
#profileModal #openSecurityBtn.is-locked span::after {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 20px;
  margin-left: 8px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

#profileModal #openSecurityBtn.is-secure span::after {
  content: "已启用";
  background: rgba(16, 185, 129, 0.12);
  color: #007a58;
}

#profileModal #openSecurityBtn.is-locked span::after {
  content: "已上锁";
  background: #ffedd5;
  color: #9a3412;
}

@media (max-width: 760px) {
  .chat-view:not(.is-chat-open) {
    grid-template-rows: minmax(0, 1fr) calc(70px + env(safe-area-inset-bottom)) !important;
  }

  .chat-view:not(.is-chat-open) .rail {
    grid-row: 1 / 3;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) calc(70px + env(safe-area-inset-bottom));
    padding: 0;
    pointer-events: none;
  }

  .chat-view:not(.is-chat-open) .rail-brand {
    display: none;
  }

  .chat-view:not(.is-chat-open) .rail-nav {
    grid-row: 2;
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    justify-content: stretch;
    width: 100%;
    height: calc(70px + env(safe-area-inset-bottom));
    gap: 0;
    padding: 6px 18px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -8px 26px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(14px);
    pointer-events: auto;
  }

  .chat-view:not(.is-chat-open) .rail-button {
    display: grid;
    grid-template-rows: auto auto;
    justify-items: center;
    align-content: center;
    gap: 3px;
    width: min(88px, 100%);
    height: 56px;
    min-width: 0;
    margin: 0 auto;
    border-radius: 17px;
    background: transparent;
    color: #43524b;
    font-size: 0;
  }

  .chat-view:not(.is-chat-open) .rail-button.active {
    background: #91efd7;
    color: #063d2f;
    box-shadow: inset 0 0 0 1px rgba(0, 108, 73, 0.04);
  }

  .chat-view:not(.is-chat-open) .rail-icon {
    font-size: 24px;
  }

  .chat-view:not(.is-chat-open) .rail-button strong {
    display: block;
    font-size: 11px;
    line-height: 15px;
    font-weight: 800;
  }

  .chat-view:not(.is-chat-open) .list-panel {
    grid-row: 1;
    padding-bottom: 0;
  }

  .chat-view:not(.is-chat-open) .conversation-list .list-version-inline {
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }

  #profileModal #openSecurityBtn::after {
    content: none !important;
  }
}

/* Keep Profile page bottom tabs visually identical to the main mobile tabs. */
@media (max-width: 760px) {
  #profileModal .profile-panel {
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }

  .profile-bottom-nav {
    height: calc(70px + env(safe-area-inset-bottom));
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -8px 26px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(14px);
  }

  .profile-bottom-nav button {
    align-content: center;
    gap: 3px;
    width: min(88px, 100%);
    min-width: 0;
    height: 56px;
    min-height: 0;
    margin: 0 auto;
    border-radius: 17px;
    color: #43524b;
  }

  .profile-bottom-nav button.active {
    background: #91efd7;
    color: #063d2f;
    box-shadow: inset 0 0 0 1px rgba(0, 108, 73, 0.04);
  }

  .profile-bottom-nav span {
    font-size: 24px;
  }

  .profile-bottom-nav strong {
    font-size: 11px;
    line-height: 15px;
    font-weight: 800;
  }
}

/* v200 profile page refinement: edit the name in the hero and compact menu rows. */
.profile-name-input {
  width: min(220px, 100%);
  height: 34px;
  margin: 0;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--lumina-text);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 21px;
  font-weight: 900;
  line-height: 28px;
  text-align: center;
  box-shadow: none;
}

.profile-name-input:hover {
  background: rgba(15, 23, 42, 0.035);
}

.profile-name-input:focus {
  border-color: rgba(16, 185, 129, 0.38);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.11);
  outline: 0;
}

.profile-menu-row {
  min-height: 48px;
  padding: 10px 18px;
  color: #1f2a25;
  font-size: 14px;
  font-weight: 650;
}

.profile-menu-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-menu-row strong {
  width: 22px;
  color: #7b8790;
  font-size: 19px;
  line-height: 1;
  text-align: right;
}

.profile-switch-row {
  min-height: 52px;
}

.profile-switch-row span strong {
  font-size: 13px;
  font-weight: 750;
}

.profile-switch-row span small {
  font-size: 11px;
  line-height: 16px;
}

@media (max-width: 760px) {
  .profile-name-input {
    height: 32px;
    font-size: 20px;
    line-height: 26px;
  }

  .profile-menu-row {
    min-height: 46px;
    padding: 10px 18px;
    font-size: 14px;
  }
}

/* v201 WeChat-like mobile chat header and message avatars. */
@media (max-width: 760px) {
  .chat-view.is-chat-open .chat-head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    grid-template-areas: "back title more";
    grid-auto-rows: 40px;
    align-items: center;
    min-height: 54px;
    padding: calc(6px + env(safe-area-inset-top)) 10px 6px;
    background: rgba(248, 249, 250, 0.96);
    box-shadow: 0 1px 0 rgba(17, 27, 33, 0.08);
  }

  .chat-view.is-chat-open #chatAvatar {
    display: none !important;
  }

  .chat-view.is-chat-open .mobile-back:not(.hidden) {
    grid-area: back;
    justify-self: start;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    font-size: 24px;
  }

  .chat-view.is-chat-open .chat-title-area {
    grid-area: title;
    justify-self: center;
    width: 100%;
    min-width: 0;
    pointer-events: none;
    text-align: center;
  }

  .chat-view.is-chat-open .chat-title-area h2 {
    color: #111827;
    font-size: 17px;
    line-height: 24px;
    font-weight: 850;
    text-align: center;
  }

  .chat-view.is-chat-open .chat-title-area p {
    display: none;
  }

  .chat-view.is-chat-open .chat-more-button:not(.hidden) {
    grid-area: more;
    justify-self: end;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    font-size: 22px;
  }

  .chat-view.is-chat-open .chat-actions {
    display: none !important;
  }

  .chat-view.is-chat-open .message-content-row {
    gap: 9px;
    max-width: calc(100% - 10px);
  }

  .chat-view.is-chat-open .message-stack {
    max-width: calc(100% - 44px);
  }

  .chat-view.is-chat-open .message-avatar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-top: 0;
    border-radius: 9px;
    font-size: 14px;
    box-shadow: 0 1px 2px rgba(17, 27, 33, 0.1);
  }

  .chat-view.is-chat-open .message-avatar img {
    border-radius: inherit;
  }
}

/* v202 two-line conversation rows without the selected left stripe. */
.conversation-item.active,
.chat-view:not(.is-chat-open) .conversation-item.active {
  outline: 0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.055) !important;
}

.conversation-main-line,
.conversation-sub-line {
  display: flex;
  align-items: center;
  min-width: 0;
}

.conversation-main-line {
  justify-content: space-between;
  gap: 10px;
}

.conversation-main-line strong {
  min-width: 0;
}

.conversation-main-line .conversation-time {
  flex: 0 0 auto;
}

.conversation-sub-line {
  gap: 5px;
  overflow: hidden;
}

.conversation-sub-line small {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 4px;
}

.conversation-subtitle-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-sub-line .conversation-unread-text,
.conversation-sub-line .conversation-draft,
.conversation-sub-line .conversation-flags {
  flex: 0 0 auto;
}

.conversation-sub-line .conversation-flags {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 4px;
  max-width: 45%;
  margin-top: 0;
  overflow: hidden;
}

.conversation-sub-line .conversation-flags em {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .chat-view:not(.is-chat-open) .conversation-item.active {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.055) !important;
  }

  .chat-view:not(.is-chat-open) .conversation-item {
    min-height: 62px;
  }

  .chat-view:not(.is-chat-open) .conversation-copy {
    gap: 1px;
  }

  .chat-view:not(.is-chat-open) .conversation-sub-line .conversation-flags {
    max-width: 42%;
  }
}

/* v206 list pages use centered logo instead of top-left text. */
.list-head .list-title-copy {
  display: none !important;
}

.list-head .list-head-logo {
  display: grid !important;
}

@media (max-width: 760px) {
  .chat-view:not(.is-chat-open) .list-head {
    justify-content: center;
  }

  .chat-view:not(.is-chat-open) .list-head .head-actions {
    margin-left: auto;
  }

  .chat-view:not(.is-chat-open) .list-head-logo {
    width: 38px;
    height: 38px;
    border-radius: 13px;
  }

  .chat-view:not(.is-chat-open) .list-head-logo img {
    width: 29px;
    height: 29px;
  }
}

/* v207 chat and directory avatars use rounded squares. */
.conversation-avatar-wrap,
.conversation-avatar-wrap > .avatar,
.conversation-avatar-wrap > .avatar img,
.message-avatar,
.message-avatar img {
  border-radius: 10px !important;
}

.chat-view.is-chat-open .message-avatar,
.chat-view.is-chat-open .message-avatar img {
  border-radius: 9px !important;
}

/* v209 desktop rail always shows Chats / Contacts / Profile vertically. */
@media (min-width: 761px) {
  .chat-view .rail {
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden;
  }

  .chat-view .rail-nav {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: 52px !important;
    grid-template-rows: repeat(3, 52px) !important;
    justify-content: center !important;
    justify-items: center !important;
    align-content: start !important;
    width: auto !important;
    height: auto !important;
    gap: 10px !important;
    padding: 42px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .chat-view .rail-nav .rail-button,
  .chat-view .rail-nav #profileQuickBtn {
    display: grid !important;
    grid-template-rows: auto auto !important;
    justify-items: center !important;
    align-content: center !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 5px 4px !important;
    border-radius: 15px !important;
    background: rgba(10, 40, 32, 0.06) !important;
    color: #23443a !important;
    font-size: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .chat-view .rail-nav .rail-button:hover,
  .chat-view .rail-nav #profileQuickBtn:hover {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #006c49 !important;
  }

  .chat-view .rail-nav .rail-button.active,
  .chat-view .rail-nav #profileQuickBtn.active {
    background: #91efd7 !important;
    color: #063d2f !important;
  }

  .chat-view .rail-nav .rail-button::after {
    content: none !important;
  }

  .chat-view .rail-nav .rail-icon {
    display: block !important;
    color: inherit !important;
    font-size: 23px !important;
    line-height: 1 !important;
  }

  .chat-view .rail-nav .rail-button strong {
    display: block !important;
    color: inherit !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 10px !important;
    line-height: 13px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* v212 keep the + menu above chat/list content on desktop and mobile. */
.chat-view .list-head {
  z-index: 140 !important;
}

.chat-view .head-actions {
  z-index: 150 !important;
}

.chat-view .list-create-menu {
  z-index: 151 !important;
}

/* v214 keep the top-right chat menu above message bubbles. */
.chat-view .chat-head {
  position: relative !important;
  z-index: 220 !important;
  overflow: visible !important;
}

.chat-view .chat-more-menu {
  z-index: 230 !important;
}

.chat-view .messages {
  position: relative;
  z-index: 1;
}

/* v215 reserve the desktop message action row to avoid hover layout jumps. */
@media (hover: hover) and (pointer: fine) {
  .message-action-strip {
    display: inline-flex !important;
    min-height: 16px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.12s ease;
  }

  .message:hover .message-action-strip,
  .message:focus-within .message-action-strip,
  .message.actions-open .message-action-strip,
  .message.selected .message-action-strip,
  .message.local-failed .message-action-strip {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
}

/* v216 keep modal sheets above every chat/header layer on desktop and mobile. */
.modal {
  z-index: 1000 !important;
  isolation: isolate;
}

#tagManageModal {
  z-index: 10030 !important;
}

.modal-panel {
  position: relative;
  z-index: 1;
}

/* v217 pin settings-style modals to a stable top position across tabs. */
:where(
  #accountModal,
  #botModal,
  #clearChatModal,
  #contactInfoModal,
  #groupInviteModal,
  #groupMemberModal,
  #groupSettingsModal,
  #secretManageModal,
  #securityHubModal,
  #soundSettingsModal,
  #tagManageModal,
  #wallpaperModal
) {
  --settings-modal-top: clamp(64px, 12dvh, 118px);
  align-items: start !important;
  justify-items: center !important;
  place-items: start center !important;
  overflow: auto !important;
  padding-top: var(--settings-modal-top) !important;
  padding-bottom: 20px !important;
}

:where(
  #accountModal,
  #botModal,
  #clearChatModal,
  #contactInfoModal,
  #groupInviteModal,
  #groupMemberModal,
  #groupSettingsModal,
  #secretManageModal,
  #securityHubModal,
  #soundSettingsModal,
  #tagManageModal,
  #wallpaperModal
) .modal-panel {
  max-height: calc(100dvh - var(--settings-modal-top) - 20px);
}

@media (max-width: 760px) {
  :where(
    #accountModal,
    #botModal,
    #clearChatModal,
    #contactInfoModal,
    #groupInviteModal,
    #groupMemberModal,
    #groupSettingsModal,
    #secretManageModal,
    #securityHubModal,
    #soundSettingsModal,
    #tagManageModal,
    #wallpaperModal
  ) {
    --settings-modal-top: calc(env(safe-area-inset-top) + 12px);
    padding-inline: 10px !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 12px) !important;
  }

  :where(
    #accountModal,
    #botModal,
    #clearChatModal,
    #contactInfoModal,
    #groupInviteModal,
    #groupMemberModal,
    #groupSettingsModal,
    #secretManageModal,
    #securityHubModal,
    #soundSettingsModal,
    #tagManageModal,
    #wallpaperModal
  ) .modal-panel {
    max-height: calc(100dvh - var(--settings-modal-top) - env(safe-area-inset-bottom) - 12px);
  }
}

/* v218 use rounded-square avatars in the desktop chat header too. */
#chatAvatar,
#chatAvatar img {
  border-radius: 10px !important;
}

/* v290 unify modal sheets: stable top position, shared chrome, inner scrolling. */
.modal:not(.image-preview-modal) {
  --unified-modal-top: clamp(64px, 10dvh, 118px);
  display: grid;
  align-items: start !important;
  justify-items: center !important;
  place-items: start center !important;
  padding: var(--unified-modal-top) 20px 20px !important;
  overflow: auto !important;
  background: rgba(5, 35, 30, 0.42);
  backdrop-filter: blur(8px);
}

.modal:not(.image-preview-modal) > .modal-panel {
  width: min(440px, calc(100vw - 40px));
  max-height: calc(100dvh - var(--unified-modal-top) - 20px);
  overflow: auto;
  border: 1px solid rgba(0, 77, 64, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 24px 70px rgba(0, 77, 64, 0.18);
}

.modal:not(.image-preview-modal) > .modal-panel.wide-modal,
#securityModal.modal > .modal-panel,
#historyModal.modal > .history-modal-panel {
  width: min(760px, calc(100vw - 40px));
}

.modal:not(.image-preview-modal) > .modal-panel.compact-modal,
#guideTipModal.modal > .guide-tip-panel,
#cryptoInfoModal.modal > .guide-tip-panel,
#securityHubModal.modal > .security-hub-panel,
#profileAvatarModal.modal > .profile-avatar-picker-panel,
#tempInviteModal.modal > .temp-invite-panel {
  width: min(430px, calc(100vw - 40px));
}

#profileModal.modal > .profile-panel {
  width: min(430px, calc(100vw - 40px));
}

.modal:not(.image-preview-modal) > .modal-panel > header,
.modal:not(.image-preview-modal) .profile-panel-head {
  min-height: 44px;
  margin: -4px 0 14px;
  padding: 0;
}

.modal:not(.image-preview-modal) > .modal-panel > header h2,
.modal:not(.image-preview-modal) .profile-panel-head h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 900;
}

.modal:not(.image-preview-modal) .close-modal {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 14px;
  background: #f1f6f4;
  color: var(--brand-strong);
}

@media (max-width: 760px) {
  .modal:not(.image-preview-modal):not(#profileModal) {
    --unified-modal-top: calc(env(safe-area-inset-top) + 12px);
    padding-inline: 10px !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 12px) !important;
  }

  .modal:not(.image-preview-modal):not(#profileModal) > .modal-panel {
    width: min(100%, calc(100vw - 20px));
    max-height: calc(100dvh - var(--unified-modal-top) - env(safe-area-inset-bottom) - 12px);
    padding: 16px;
    border-radius: 18px;
  }

  .modal:not(.image-preview-modal):not(#profileModal) > .modal-panel.wide-modal,
  #securityModal.modal > .modal-panel,
  #historyModal.modal > .history-modal-panel {
    width: min(100%, calc(100vw - 20px));
  }

  #profileModal {
    align-items: stretch !important;
    justify-items: stretch !important;
    place-items: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #profileModal.modal > .profile-panel {
    width: 100%;
    max-width: none;
    max-height: 100dvh;
    min-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
}

#chatAvatar {
  overflow: hidden;
}

/* v219 desktop rail and list header cleanup; mobile keeps its current layout. */
@media (min-width: 761px) {
  .chat-view .rail {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .chat-view .rail-nav {
    grid-row: 2;
    grid-template-rows: 52px 52px minmax(0, 1fr) !important;
    height: 100% !important;
    gap: 18px !important;
    padding: 42px 0 0 !important;
  }

  .chat-view .rail-nav #profileQuickBtn .rail-icon {
    font-size: 0 !important;
  }

  .chat-view .rail-nav #profileQuickBtn .rail-icon::before {
    content: "settings";
    font-family: "Material Symbols Outlined";
    font-size: 23px;
    line-height: 1;
    font-weight: 400;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
  }

  .chat-view .rail-nav #profileQuickBtn strong {
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .chat-view .rail-nav #profileQuickBtn strong::after {
    content: "设置";
    display: block;
    overflow: hidden;
    max-width: 100%;
    color: inherit;
    font-size: 10px;
    line-height: 13px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chat-view .search-box {
    grid-row: 1;
  }

  .chat-view .new-user-guide {
    grid-row: 2;
  }

  .chat-view .application-notice-panel {
    grid-row: 3;
  }

  .chat-view .conversation-list {
    grid-row: 4;
  }

  .chat-view .list-version {
    grid-row: 5;
  }

  .chat-view .list-head {
    position: absolute !important;
    inset: 18px 18px auto auto;
    min-height: 40px;
    padding: 0 !important;
    border: 0;
    background: transparent !important;
    backdrop-filter: none !important;
  }

  .chat-view .list-head-logo {
    display: none !important;
  }

  .chat-view .head-actions {
    margin-left: 0 !important;
  }

  .chat-view .search-box {
    padding: 18px 62px 14px 18px !important;
  }

  .chat-view .search-box input {
    height: 44px;
  }
}

/* v221 selectable chat wallpapers. */
.wallpaper-panel {
  width: min(620px, 100%);
}

.wallpaper-help {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.wallpaper-option {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.wallpaper-option:hover,
.wallpaper-option.active {
  border-color: var(--brand);
  background: #f6fffb;
}

.wallpaper-option.active {
  box-shadow: inset 0 0 0 2px rgba(0, 128, 105, 0.12);
}

.wallpaper-preview {
  display: block;
  width: 86px;
  height: 62px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 12px;
  background-color: #f2f4f3;
  background-size: 22px 22px, 100% 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.48);
}

.wallpaper-option-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.wallpaper-option-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallpaper-option-copy small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

[data-wallpaper-preview="classic"],
body[data-chat-wallpaper="classic"] .messages {
  background-color: #f2f4f3 !important;
  background-image:
    linear-gradient(30deg, rgba(17, 27, 33, 0.026) 12%, transparent 12.5%, transparent 87%, rgba(17, 27, 33, 0.026) 87.5%),
    linear-gradient(150deg, rgba(17, 27, 33, 0.026) 12%, transparent 12.5%, transparent 87%, rgba(17, 27, 33, 0.026) 87.5%) !important;
}

[data-wallpaper-preview="jade"],
body[data-chat-wallpaper="jade"] .messages {
  background-color: #edf9f4 !important;
  background-image:
    radial-gradient(circle at 16px 14px, rgba(16, 185, 129, 0.08) 0 2px, transparent 2.5px),
    linear-gradient(135deg, rgba(0, 128, 105, 0.055), rgba(255, 255, 255, 0.48)) !important;
}

[data-wallpaper-preview="paper"],
body[data-chat-wallpaper="paper"] .messages {
  background-color: #f7f2e8 !important;
  background-image:
    linear-gradient(0deg, rgba(92, 70, 38, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 70, 38, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 70% 10%, rgba(255, 255, 255, 0.58), transparent 28%) !important;
}

[data-wallpaper-preview="mist"],
body[data-chat-wallpaper="mist"] .messages {
  background-color: #eef6fb !important;
  background-image:
    radial-gradient(circle at 18% 18%, rgba(76, 154, 194, 0.12), transparent 32%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.68), rgba(214, 231, 242, 0.5)) !important;
}

[data-wallpaper-preview="sand"],
body[data-chat-wallpaper="sand"] .messages {
  background-color: #f5efe4 !important;
  background-image:
    radial-gradient(circle at 14px 14px, rgba(180, 134, 66, 0.07) 0 2px, transparent 2.4px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.54), rgba(230, 206, 171, 0.24)) !important;
}

[data-wallpaper-preview="mesh"],
body[data-chat-wallpaper="mesh"] .messages {
  background-color: #eef7f5 !important;
  background-image:
    linear-gradient(90deg, rgba(0, 77, 64, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 77, 64, 0.04) 1px, transparent 1px),
    linear-gradient(135deg, rgba(16, 185, 129, 0.08), transparent 52%) !important;
}

body[data-chat-wallpaper="paper"] .messages,
body[data-chat-wallpaper="mesh"] .messages {
  background-size: 28px 28px, 28px 28px, 100% 100% !important;
}

body[data-chat-wallpaper="jade"] .messages,
body[data-chat-wallpaper="sand"] .messages {
  background-size: 30px 30px, 100% 100% !important;
}

body[data-chat-wallpaper="mist"] .messages {
  background-size: 100% 100%, 100% 100% !important;
}

@media (max-width: 620px) {
  .wallpaper-grid {
    grid-template-columns: 1fr;
  }

  .wallpaper-option {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .wallpaper-preview {
    width: 78px;
    height: 56px;
  }
}

/* v222 icon-only navigation and cleaner group side panel. */
.rail-button {
  grid-template-rows: 1fr !important;
  gap: 0 !important;
}

.rail-button strong,
.rail-button::after,
.chat-view .rail-nav #profileQuickBtn strong,
.chat-view .rail-nav #profileQuickBtn strong::after,
.profile-bottom-nav strong {
  display: none !important;
  content: none !important;
}

.profile-bottom-nav button {
  grid-template-rows: 1fr !important;
}

.chat-actions #groupSettingsBtn,
.chat-actions #addGroupMemberBtn {
  display: none !important;
}

.group-member-manage-entry {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.group-member-manage-entry span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.group-member-manage-entry strong {
  color: var(--ink);
  font-size: 14px;
}

.group-member-manage-entry small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* v223 navigation selected state: icon-only, no filled background. */
.rail-button,
.chat-view .rail-nav .rail-button,
.chat-view .rail-nav #profileQuickBtn,
.profile-bottom-nav button {
  background: transparent !important;
  box-shadow: none !important;
}

.rail-button:hover,
.rail-button.active,
.chat-view .rail-nav .rail-button:hover,
.chat-view .rail-nav .rail-button.active,
.chat-view .rail-nav #profileQuickBtn:hover,
.chat-view .rail-nav #profileQuickBtn.active,
.chat-view:not(.is-chat-open) .rail-button.active,
.profile-bottom-nav button:hover,
.profile-bottom-nav button.active {
  background: transparent !important;
  color: #3c4a42 !important;
  box-shadow: none !important;
}

.rail-button strong,
.chat-view .rail-nav .rail-button strong,
.chat-view:not(.is-chat-open) .rail-button strong,
.profile-bottom-nav strong {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.rail-button[data-view="chats"]::after,
.rail-button[data-view="directory"]::after,
#profileQuickBtn::after {
  display: none !important;
  content: "" !important;
}

.rail-button.active .rail-icon,
.rail-button:hover .rail-icon,
.chat-view .rail-nav .rail-button.active .rail-icon,
.chat-view .rail-nav .rail-button:hover .rail-icon,
.chat-view:not(.is-chat-open) .rail-button.active .rail-icon,
.profile-bottom-nav button.active span,
.profile-bottom-nav button:hover span {
  color: var(--lumina-primary) !important;
}

/* v224 keep side/bottom navigation as pure icons. */
.rail-nav .rail-button,
.rail-nav #profileQuickBtn,
.profile-bottom-nav button {
  background: transparent !important;
  box-shadow: none !important;
}

.rail-nav .rail-button:hover,
.rail-nav .rail-button.active,
.rail-nav #profileQuickBtn:hover,
.rail-nav #profileQuickBtn.active,
.profile-bottom-nav button:hover,
.profile-bottom-nav button.active {
  background: transparent !important;
  color: #3c4a42 !important;
  box-shadow: none !important;
}

.rail-nav .rail-button strong,
.rail-nav #profileQuickBtn strong,
.profile-bottom-nav strong {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.rail-nav .rail-button[data-view="chats"]::after,
.rail-nav .rail-button[data-view="directory"]::after,
.rail-nav #profileQuickBtn::after,
.rail-nav #profileQuickBtn strong::after,
.profile-bottom-nav strong::after {
  display: none !important;
  content: "" !important;
}

.rail-nav .rail-button .rail-icon,
.rail-nav #profileQuickBtn .rail-icon,
.profile-bottom-nav button span {
  color: #3c4a42 !important;
}

.rail-nav .rail-button:hover .rail-icon,
.rail-nav .rail-button.active .rail-icon,
.rail-nav #profileQuickBtn:hover .rail-icon,
.rail-nav #profileQuickBtn.active .rail-icon,
.profile-bottom-nav button:hover span,
.profile-bottom-nav button.active span {
  color: var(--lumina-primary) !important;
}

/* v225 profile and quick menus polish. */
.user-edit-button {
  display: none !important;
}

.user-strip .avatar,
.user-strip h2,
.user-strip p {
  cursor: pointer;
}

.user-strip .avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 77, 64, 0.12);
}

.profile-hero-avatar-wrap {
  display: grid !important;
  place-items: center !important;
  width: 98px !important;
  height: 98px !important;
}

.profile-hero-avatar {
  width: 88px !important;
  height: 88px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 0 !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16) !important;
  font-size: 26px !important;
}

.profile-hero-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit !important;
  object-fit: cover;
}

.profile-hero-edit {
  right: 0 !important;
  bottom: 4px !important;
}

.profile-bottom-nav button {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.profile-bottom-nav button span {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 1 !important;
}

/* v226 remove mobile tap highlight and align own message time to the right. */
.rail-button,
.rail-button *,
.profile-bottom-nav button,
.profile-bottom-nav button *,
.list-create-trigger {
  -webkit-tap-highlight-color: transparent !important;
}

.profile-bottom-nav button,
.profile-bottom-nav button:hover,
.profile-bottom-nav button:active,
.profile-bottom-nav button:focus,
.profile-bottom-nav button:focus-visible,
.profile-bottom-nav button.active,
.rail-button,
.rail-button:hover,
.rail-button:active,
.rail-button:focus,
.rail-button:focus-visible,
.rail-button.active {
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.profile-bottom-nav button::selection,
.rail-button::selection {
  background: transparent !important;
}

.message.mine .message-meta {
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-direction: row-reverse !important;
  justify-content: flex-start !important;
  margin-right: 0 !important;
  text-align: right !important;
}

.message.mine .message-time-only {
  margin-left: auto !important;
  margin-right: 0 !important;
}

.message.mine .message-action-strip {
  justify-content: flex-end !important;
}

/* v227 profile center cleanup. */
.profile-title-icon,
.profile-hero-card > em {
  display: none !important;
}

.profile-panel-head {
  grid-template-columns: 40px minmax(0, 1fr) 40px !important;
}

.profile-panel-head h2 {
  grid-column: 2 !important;
  justify-self: center !important;
  text-align: center !important;
}

.profile-panel-head .close-modal {
  grid-column: 3 !important;
  justify-self: end !important;
}

.profile-field-row textarea {
  width: 100%;
}

.profile-wallpaper-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 10px !important;
  min-height: 48px !important;
}

.profile-wallpaper-row .profile-menu-copy {
  color: #1f2a25 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

.profile-wallpaper-row > strong {
  width: auto !important;
  min-width: 14px !important;
  font-size: 17px !important;
}

.profile-wallpaper-trailing {
  display: inline-grid !important;
  place-items: center !important;
  overflow: visible !important;
}

.profile-wallpaper-preview {
  display: block;
  width: 38px;
  height: 24px;
  border: 1px solid rgba(0, 77, 64, 0.12);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 5px 12px rgba(15, 23, 42, 0.08);
}

/* v228 message width and abnormal-avatar badges. */
.message-bubble.is-text {
  display: inline-block !important;
  width: max-content !important;
  max-width: min(76vw, 620px) !important;
}

.message-bubble.is-text .message-text-content {
  display: inline !important;
  white-space: pre-wrap;
}

@media (max-width: 760px) {
  .chat-view.is-chat-open .message-bubble.is-text {
    max-width: min(78vw, calc(100vw - 92px)) !important;
  }

  .chat-view.is-chat-open .message.mine .message-bubble.is-text {
    max-width: min(78vw, calc(100vw - 96px)) !important;
  }
}

.avatar.is-abnormal,
.message-avatar.is-abnormal {
  position: relative;
  overflow: visible !important;
  border: 0 !important;
  background: #e4f3ef;
  color: var(--brand-strong);
}

.avatar.is-abnormal::after,
.message-avatar.is-abnormal::after {
  content: "!";
  position: absolute;
  right: -4px;
  bottom: -4px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #f04438;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 3px 8px rgba(180, 35, 24, 0.24);
}

.message-avatar.is-abnormal::after {
  right: -3px;
  bottom: -3px;
  width: 12px;
  height: 12px;
  font-size: 9px;
  border-width: 1.5px;
}

.avatar.is-abnormal img,
.message-avatar.is-abnormal img {
  border-radius: inherit;
}

/* v230 quick edit controls for group info in the right panel. */
.meta-edit-button {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.11);
  color: var(--lumina-primary);
  cursor: pointer;
  font-family: "Material Symbols Outlined";
  font-size: 17px;
  line-height: 1;
  font-weight: 400;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.meta-edit-button:hover {
  background: rgba(16, 185, 129, 0.18);
  color: #006c49;
}

#groupQuickEditContent {
  min-height: 120px;
  resize: vertical;
}

/* v229 keep first-use guide and conversation list in separate layers. */
.new-user-guide {
  position: relative !important;
  z-index: 12 !important;
  isolation: isolate;
  background: #fff !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
}

.conversation-list {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  .chat-view:not(.is-chat-open) .list-panel,
  .chat-view .list-panel {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  }

  .chat-view:not(.is-chat-open) .search-box,
  .chat-view .search-box {
    position: relative;
    z-index: 16;
    grid-row: 1 !important;
  }

  .chat-view:not(.is-chat-open) .new-user-guide,
  .chat-view .new-user-guide {
    grid-row: 2 !important;
    margin: 0 18px 14px !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    color: var(--lumina-text) !important;
  }

  .chat-view:not(.is-chat-open) .new-user-guide span,
  .chat-view .new-user-guide span {
    color: var(--lumina-muted) !important;
  }

  .chat-view:not(.is-chat-open) .application-notice-panel,
  .chat-view .application-notice-panel {
    grid-row: 3 !important;
    position: relative;
    z-index: 10;
  }

  .chat-view:not(.is-chat-open) .conversation-list,
  .chat-view .conversation-list {
    grid-row: 4 !important;
    z-index: 1;
    padding-top: 2px !important;
  }

  .chat-view:not(.is-chat-open) .list-version,
  .chat-view .list-version {
    grid-row: 5 !important;
  }
}

/* v236 final quick-lock and desktop composer overrides. */
.rail-brand span {
  display: none !important;
}

.chat-lock-button,
.global-lock-button {
  font-family: "Material Symbols Outlined";
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 24;
}

.chat-lock-button {
  background: rgba(236, 243, 239, 0.92) !important;
  color: #24483e !important;
}

.chat-lock-button.is-secure {
  color: var(--lumina-primary, var(--brand-strong)) !important;
}

.chat-head .avatar {
  cursor: pointer;
}

.global-lock-button {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 260;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: #24483e;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
  cursor: pointer;
}

.global-lock-button.hidden {
  display: none !important;
}

.global-lock-button.is-secure {
  background: var(--lumina-primary, #10b981);
  color: #fff;
}

@media (min-width: 761px) {
  .chat-view.is-chat-open .composer,
  .composer {
    display: grid !important;
    grid-template-columns: minmax(240px, 1fr) auto auto auto !important;
    grid-template-areas:
      "reply reply reply reply"
      "clip clip clip clip"
      "input burn emoji action"
      "panel panel panel panel" !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    border-top: 1px solid var(--lumina-border);
    background: rgba(248, 249, 250, 0.94) !important;
    backdrop-filter: blur(10px);
  }

  .composer-reply {
    grid-area: reply !important;
  }

  .clipboard-preview {
    grid-area: clip !important;
  }

  .chat-view.is-chat-open .composer textarea,
  .composer textarea,
  .voice-hold-button {
    grid-area: input !important;
    width: 100% !important;
    min-height: 40px !important;
    max-height: 96px !important;
    padding: 9px 42px 9px 13px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: 15px !important;
    line-height: 22px !important;
    box-shadow: none !important;
  }

  .voice-hold-button {
    display: inline-grid;
    place-items: center;
  }

  .chat-view.is-chat-open .composer #voiceRecordBtn,
  .composer #voiceRecordBtn {
    grid-area: input !important;
    justify-self: end !important;
    z-index: 2 !important;
    display: grid !important;
    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    margin-right: 6px !important;
    border: 0 !important;
    background-color: transparent !important;
    background-image: url("./ui-voice.png?v=144") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 25px 25px !important;
    color: transparent !important;
    font-size: 0 !important;
    box-shadow: none !important;
  }

  .chat-view.is-chat-open .composer #voiceRecordBtn.active,
  .composer #voiceRecordBtn.active {
    background-image: url("./ui-keyboard.png?v=144") !important;
  }

  .text-burn-toggle,
  .voice-burn-toggle {
    grid-area: burn !important;
    min-width: 50px !important;
    min-height: 40px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .chat-view.is-chat-open .composer #emojiToggle,
  .composer #emojiToggle {
    grid-area: emoji !important;
    display: grid !important;
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    background: transparent url("./ui-emoji.png?v=144") center / 30px 30px no-repeat !important;
    color: transparent !important;
    font-size: 0 !important;
    box-shadow: none !important;
  }

  .chat-view.is-chat-open .composer #moreToggle,
  .composer #moreToggle {
    grid-area: action !important;
    display: grid !important;
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111 !important;
    font-size: 31px !important;
    font-weight: 300 !important;
    box-shadow: none !important;
  }

  .chat-view.is-chat-open .composer.has-message-text #moreToggle,
  .composer.has-message-text #moreToggle {
    display: none !important;
  }

  .chat-view.is-chat-open .composer #sendMessageBtn,
  .composer #sendMessageBtn {
    grid-area: action !important;
    display: none !important;
    min-width: 60px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: #58c866 !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
  }

  .chat-view.is-chat-open .composer.has-message-text #sendMessageBtn:not(.hidden),
  .composer.has-message-text #sendMessageBtn:not(.hidden) {
    display: inline-grid !important;
    place-items: center !important;
  }

  .quick-action-panel {
    grid-area: panel !important;
  }
}

@media (max-width: 760px) {
  .global-lock-button {
    right: calc(16px + env(safe-area-inset-right));
    bottom: calc(92px + env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .chat-view.is-chat-open .global-lock-button {
    bottom: calc(78px + env(safe-area-inset-bottom));
  }
}

/* v238 terminal override: mobile top row and left quick lock. */
@media (max-width: 760px) {

  .chat-view:not(.is-chat-open) .list-head,
  .chat-view .list-head {
    position: absolute !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
    right: calc(16px + env(safe-area-inset-right)) !important;
    left: auto !important;
    z-index: 160 !important;
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .chat-view:not(.is-chat-open) .head-actions,
  .chat-view .head-actions {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
  }

  .chat-view:not(.is-chat-open) .list-create-trigger,
  .chat-view .list-create-trigger {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 16px !important;
  }

  .chat-view:not(.is-chat-open) .search-box,
  .chat-view .search-box {
    grid-row: 1 !important;
    z-index: 30 !important;
    padding: calc(10px + env(safe-area-inset-top)) calc(70px + env(safe-area-inset-right)) 14px calc(16px + env(safe-area-inset-left)) !important;
  }

  .chat-view:not(.is-chat-open) .search-box input,
  .chat-view .search-box input {
    height: 44px !important;
  }

  .chat-view:not(.is-chat-open) .new-user-guide,
  .chat-view .new-user-guide {
    grid-row: 2 !important;
  }

  .chat-view:not(.is-chat-open) .application-notice-panel,
  .chat-view .application-notice-panel {
    grid-row: 3 !important;
  }

  .chat-view:not(.is-chat-open) .conversation-list,
  .chat-view .conversation-list {
    grid-row: 4 !important;
  }
}

@media (min-width: 761px) {
  .chat-view .rail-nav {
    grid-template-rows: 52px 52px minmax(0, 1fr) auto !important;
  }

  .chat-view .rail-nav #profileQuickBtn {
    grid-row: 3;
    align-self: end;
  }

  .rail-version {
    grid-row: 4;
    display: block !important;
    justify-self: center;
    max-width: 58px;
    margin-top: 4px;
    color: rgba(60, 74, 66, 0.58);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }

  .global-lock-button {
    right: auto !important;
    left: calc(14px + env(safe-area-inset-left)) !important;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }
}
/* v239 terminal override: exact mobile search/+ alignment. */
@media (max-width: 760px) {
  .chat-view:not(.is-chat-open) .list-head,
  .chat-view .list-head {
    top: calc(10px + env(safe-area-inset-top)) !important;
    right: calc(16px + env(safe-area-inset-right)) !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    overflow: visible !important;
  }

  .chat-view:not(.is-chat-open) .head-actions,
  .chat-view .head-actions {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
  }

  .chat-view:not(.is-chat-open) .list-create-trigger,
  .chat-view .list-create-trigger {
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
    line-height: 1 !important;
    font-size: 22px !important;
    transform: none !important;
  }

  .chat-view:not(.is-chat-open) .search-box,
  .chat-view .search-box {
    padding: calc(10px + env(safe-area-inset-top)) calc(88px + env(safe-area-inset-right)) 14px calc(16px + env(safe-area-inset-left)) !important;
  }

  .chat-view:not(.is-chat-open) .search-box input,
  .chat-view .search-box input {
    display: block !important;
    box-sizing: border-box !important;
    height: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
  }
}

/* v241 terminal override: keep mobile search and + in the same grid row. */
@media (max-width: 760px) {
  .chat-view:not(.is-chat-open) .list-panel,
  .chat-view .list-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
    align-items: start !important;
    padding: calc(10px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left)) !important;
  }

  .chat-view:not(.is-chat-open) .search-box,
  .chat-view .search-box {
    grid-row: 1 !important;
    grid-column: 1 !important;
    z-index: 30 !important;
    align-self: start !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .chat-view:not(.is-chat-open) .search-box input,
  .chat-view .search-box input {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
  }

  .chat-view:not(.is-chat-open) .list-head,
  .chat-view .list-head {
    position: relative !important;
    inset: auto !important;
    grid-row: 1 !important;
    grid-column: 2 !important;
    z-index: 160 !important;
    display: grid !important;
    place-items: center !important;
    align-self: start !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
  }

  .chat-view:not(.is-chat-open) .head-actions,
  .chat-view .head-actions {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .chat-view:not(.is-chat-open) .list-create-trigger,
  .chat-view .list-create-trigger {
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px !important;
    line-height: 1 !important;
    font-size: 22px !important;
    transform: none !important;
  }

  .chat-view:not(.is-chat-open) .list-create-menu,
  .chat-view .list-create-menu {
    top: 50px !important;
    right: 0 !important;
  }

  .rail-version,
  .list-version,
  .list-version-inline {
    display: none !important;
  }

  .global-lock-button,
  .chat-view.is-chat-open .global-lock-button {
    right: auto !important;
    left: calc(16px + env(safe-area-inset-left)) !important;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }
}

/* v242 terminal override: pixel-align mobile search and +. */
@media (max-width: 760px) {
  .chat-view:not(.is-chat-open) .list-panel,
  .chat-view .list-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    column-gap: 14px !important;
    row-gap: 10px !important;
    align-items: start !important;
    padding: calc(10px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left)) !important;
  }

  .chat-view:not(.is-chat-open) .search-box,
  .chat-view .search-box {
    grid-row: 1 !important;
    grid-column: 1 !important;
    align-self: start !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .chat-view:not(.is-chat-open) .search-box input,
  .chat-view .search-box input {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 44px !important;
  }

  .chat-view:not(.is-chat-open) .list-head,
  .chat-view .list-head {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    grid-row: 1 !important;
    grid-column: 2 !important;
    align-self: start !important;
    justify-self: stretch !important;
    display: grid !important;
    place-items: stretch !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .chat-view:not(.is-chat-open) .head-actions,
  .chat-view .head-actions {
    display: grid !important;
    place-items: stretch !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  .chat-view:not(.is-chat-open) .list-create-trigger,
  .chat-view .list-create-trigger {
    position: static !important;
    display: grid !important;
    place-items: center !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    line-height: 44px !important;
    font-size: 22px !important;
    transform: none !important;
  }

  .chat-view:not(.is-chat-open) .list-title-copy,
  .chat-view .list-title-copy,
  .chat-view:not(.is-chat-open) .list-head-logo,
  .chat-view .list-head-logo {
    display: none !important;
  }
}

/* v244 terminal nudge: settle the mobile + button on the search field centerline. */
@media (max-width: 760px) {
  .chat-view:not(.is-chat-open) .list-head,
  .chat-view .list-head {
    top: -6px !important;
    transform: translateY(-6px) !important;
  }

  .chat-view:not(.is-chat-open) .list-create-menu,
  .chat-view .list-create-menu {
    top: 56px !important;
  }
}

/* v245: place the global list lock beside the + button and match chat lock styling. */
.head-actions .global-lock-button {
  position: static !important;
  inset: auto !important;
  display: grid;
  place-items: center;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: rgba(236, 243, 239, 0.92) !important;
  color: #24483e !important;
  box-shadow: none !important;
  transform: none !important;
}

.head-actions .global-lock-button.is-secure {
  background: rgba(236, 243, 239, 0.92) !important;
  color: var(--lumina-primary, var(--brand-strong)) !important;
}

.head-actions .global-lock-button.hidden {
  display: none !important;
}

@media (max-width: 760px) {
  .chat-view:not(.is-chat-open) .list-panel,
  .chat-view .list-panel {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .chat-view:not(.is-chat-open) .list-head,
  .chat-view .list-head {
    top: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 44px !important;
    max-height: 44px !important;
    transform: none !important;
  }

  .chat-view:not(.is-chat-open) .head-actions,
  .chat-view .head-actions {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 44px !important;
    align-items: start !important;
    justify-content: end !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
  }

  .chat-view:not(.is-chat-open) .head-actions .global-lock-button,
  .chat-view .head-actions .global-lock-button,
  .chat-view:not(.is-chat-open) .list-create-trigger,
  .chat-view .list-create-trigger {
    align-self: start !important;
    justify-self: end !important;
  }

  .chat-view:not(.is-chat-open) .list-create-menu,
  .chat-view .list-create-menu {
    top: 50px !important;
  }
}

/* v246: search, lock and + share one toolbar row, so vertical centering is guaranteed. */
.list-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  height: 44px;
}

.list-toolbar .search-box {
  min-width: 0;
  height: 44px;
  padding: 0 !important;
  margin: 0 !important;
}

.list-toolbar .search-box input {
  display: block;
  width: 100%;
  height: 44px;
  min-height: 44px;
  line-height: 44px;
}

.list-toolbar .head-actions {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 44px;
  align-items: center;
  gap: 8px;
  width: auto;
  height: 44px;
  margin: 0;
  padding: 0;
}

.list-toolbar .global-lock-button,
.list-toolbar .list-create-trigger {
  align-self: center !important;
  justify-self: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

@media (min-width: 761px) {
  .chat-view .list-panel {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  }

  .chat-view .list-head {
    position: relative !important;
    inset: auto !important;
    grid-row: 1 !important;
    display: block !important;
    min-height: 0 !important;
    padding: 18px !important;
    border: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    transform: none !important;
  }

  .chat-view .list-head-logo,
  .chat-view .list-title-copy {
    display: none !important;
  }

  .chat-view .new-user-guide {
    grid-row: 2 !important;
  }

  .chat-view .application-notice-panel {
    grid-row: 3 !important;
  }

  .chat-view .list-version {
    grid-row: 5 !important;
  }
}

@media (max-width: 760px) {
  .chat-view:not(.is-chat-open) .list-panel,
  .chat-view .list-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    row-gap: 10px !important;
    padding: calc(10px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left)) !important;
  }

  .chat-view:not(.is-chat-open) .list-head,
  .chat-view .list-head {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    grid-row: 1 !important;
    grid-column: 1 / -1 !important;
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .chat-view:not(.is-chat-open) .list-toolbar,
  .chat-view .list-toolbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    height: 44px !important;
  }

  .chat-view:not(.is-chat-open) .list-toolbar .search-box,
  .chat-view .list-toolbar .search-box {
    grid-row: auto !important;
    grid-column: auto !important;
    align-self: center !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
  }

  .chat-view:not(.is-chat-open) .list-toolbar .head-actions,
  .chat-view .list-toolbar .head-actions {
    align-self: center !important;
    justify-self: end !important;
    align-items: center !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  .chat-view:not(.is-chat-open) .list-create-menu,
  .chat-view .list-create-menu {
    top: 52px !important;
    right: 0 !important;
  }

  .chat-view:not(.is-chat-open) .new-user-guide,
  .chat-view .new-user-guide {
    grid-row: 2 !important;
    grid-column: 1 / -1 !important;
  }

  .chat-view:not(.is-chat-open) .application-notice-panel,
  .chat-view .application-notice-panel {
    grid-row: 3 !important;
    grid-column: 1 / -1 !important;
  }

  .chat-view:not(.is-chat-open) .conversation-list,
  .chat-view .conversation-list {
    grid-row: 4 !important;
    grid-column: 1 / -1 !important;
  }
}

/* v248: final mobile toolbar alignment override. Search, lock and + use one 44px row. */
@media (max-width: 760px) {
  .chat-view:not(.is-chat-open) .list-toolbar,
  .chat-view .list-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .chat-view:not(.is-chat-open) .list-toolbar .search-box,
  .chat-view .list-toolbar .search-box,
  .chat-view:not(.is-chat-open) .list-toolbar .head-actions,
  .chat-view .list-toolbar .head-actions {
    align-self: center !important;
    display: grid !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
  }

  .chat-view:not(.is-chat-open) .list-toolbar .search-box {
    justify-self: stretch !important;
  }

  .chat-view .list-toolbar .search-box {
    justify-self: stretch !important;
  }

  .chat-view:not(.is-chat-open) .list-toolbar .head-actions,
  .chat-view .list-toolbar .head-actions {
    grid-auto-flow: column !important;
    grid-auto-columns: 44px !important;
    justify-self: end !important;
    justify-content: end !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
  }

  .chat-view:not(.is-chat-open) .list-toolbar .search-box input,
  .chat-view .list-toolbar .search-box input,
  .chat-view:not(.is-chat-open) .list-toolbar .global-lock-button,
  .chat-view .list-toolbar .global-lock-button,
  .chat-view:not(.is-chat-open) .list-toolbar .list-create-trigger,
  .chat-view .list-toolbar .list-create-trigger {
    align-self: center !important;
    justify-self: center !important;
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
  }

  .chat-view:not(.is-chat-open) .list-toolbar .search-box input,
  .chat-view .list-toolbar .search-box input {
    width: 100% !important;
    line-height: 44px !important;
  }

  .chat-view:not(.is-chat-open) .list-toolbar .global-lock-button,
  .chat-view .list-toolbar .global-lock-button,
  .chat-view:not(.is-chat-open) .list-toolbar .list-create-trigger,
  .chat-view .list-toolbar .list-create-trigger {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    border-radius: 16px !important;
  }
}

/* v249: add a desktop rail list-lock shortcut above Settings. */
.rail-lock-button.hidden {
  display: none !important;
}

@media (min-width: 761px) {
  .chat-view .rail-nav {
    grid-template-rows: 52px 52px minmax(0, 1fr) 52px 52px auto !important;
  }

  .chat-view .rail-nav #railLockBtn {
    grid-row: 4 !important;
    align-self: end !important;
  }

  .chat-view .rail-nav #profileQuickBtn {
    grid-row: 5 !important;
    align-self: end !important;
  }

  .chat-view .rail-nav .rail-version {
    grid-row: 6 !important;
    align-self: start !important;
  }

  .chat-view .rail-nav #railLockBtn .rail-icon {
    color: inherit !important;
  }

  .chat-view .rail-nav #railLockBtn.is-secure .rail-icon {
    color: var(--lumina-primary) !important;
    font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24 !important;
  }
}

@media (max-width: 760px) {
  .chat-view:not(.is-chat-open) .rail-nav #railFavoritesBtn {
    display: none !important;
  }

  .chat-view .rail-nav #railLockBtn {
    display: none !important;
  }
}

/* v250: when mobile chat is open, never let the conversation list panel leak below the composer. */
@media (max-width: 760px) {
  .chat-view.is-chat-open {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  .chat-view.is-chat-open .rail,
  .chat-view.is-chat-open .list-panel,
  .chat-view.is-chat-open .detail-panel {
    display: none !important;
  }

  .chat-view.is-chat-open .chat-panel {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 / -1 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  .chat-view.is-chat-open .messages {
    min-height: 0 !important;
  }
}

/* v254: current-conversation content lock in the chat header, including mobile. */
.chat-lock-button.is-locked {
  background: var(--lumina-primary, var(--brand-strong)) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(0, 128, 105, 0.18) !important;
}

@media (max-width: 760px) {
  .chat-view.is-chat-open .chat-head {
    grid-template-columns: 40px minmax(0, 1fr) 38px 38px !important;
    grid-template-areas: "back title lock more" !important;
    column-gap: 2px !important;
  }

.chat-view.is-chat-open .chat-lock-button:not(.hidden) {
    grid-area: lock !important;
    display: grid !important;
    place-items: center !important;
    justify-self: end !important;
    align-self: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-size: 21px !important;
    line-height: 1 !important;
    background: rgba(236, 243, 239, 0.92) !important;
  }

  .chat-view.is-chat-open .chat-lock-button.is-locked {
    background: var(--lumina-primary, var(--brand-strong)) !important;
  }

  .chat-view.is-chat-open .chat-more-button:not(.hidden) {
    grid-area: more !important;
  }
}

/* v263: restore list scrolling for chats and directory after toolbar layout changes. */
.list-panel {
  min-height: 0 !important;
  overflow: hidden !important;
}

.conversation-list {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

@media (min-width: 761px) {
  .chat-view .list-panel {
    height: 100% !important;
    max-height: 100% !important;
  }

  .chat-view .conversation-list {
    grid-row: 4 !important;
  }
}

@media (max-width: 760px) {
  .chat-view:not(.is-chat-open) {
    overflow: hidden !important;
  }

  .chat-view:not(.is-chat-open) .list-panel {
    grid-column: 1 / -1 !important;
    grid-row: 1 / 2 !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    grid-template-rows: 44px auto auto minmax(0, 1fr) !important;
  }

  .chat-view:not(.is-chat-open) .conversation-list {
    grid-row: 4 !important;
    grid-column: 1 / -1 !important;
    align-self: stretch !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  }
}

/* v264: tighter row time alignment and group-avatar controls. */
.conversation-main-line .conversation-time {
  margin-left: auto;
  min-width: 46px;
  text-align: right;
}

.conversation-item .conversation-copy {
  min-width: 0;
}

.group-avatar-setting {
  align-items: center;
}

/* v292: omit empty side cells; rows without unread badges let the date align to the card edge. */
.conversation-item.is-side-empty {
  grid-template-columns: 48px minmax(0, 1fr) !important;
}

.conversation-item.is-side-empty .conversation-main-line .conversation-time {
  margin-left: auto !important;
  padding-right: 0 !important;
  text-align: right !important;
}

@media (max-width: 760px) {
  .chat-view:not(.is-chat-open) .conversation-item.is-side-empty,
  .chat-view .conversation-item.is-side-empty {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }
}

/* v294: message actions use mobile long press and desktop right click, not hover/click. */
@media (hover: hover) and (pointer: fine) {
  .message:hover .message-action-strip,
  .message:focus-within .message-action-strip {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  .message.actions-open .message-action-strip,
  .message.selected .message-action-strip,
  .message.local-failed .message-action-strip {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }
}

/* v294: bot avatars and notebook polish. */
.bot-avatar-setting {
  align-items: center;
}

.bot-avatar-preview.avatar {
  position: relative;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  overflow: visible;
  box-shadow: 0 10px 24px rgba(0, 121, 107, 0.14);
}

.avatar.is-bot,
.message-avatar.is-bot {
  position: relative;
  overflow: visible;
}

.avatar.is-bot::before,
.message-avatar.is-bot::before {
  content: "机";
  position: absolute;
  right: -4px;
  bottom: -4px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #0b7d63;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(0, 121, 107, 0.24);
}

.message-avatar.is-bot::before {
  width: 13px;
  height: 13px;
  right: -3px;
  bottom: -3px;
  border-width: 1.5px;
  font-size: 8px;
}

.notebook-panel {
  width: min(560px, calc(100vw - 32px));
}

.notebook-form {
  display: grid;
  gap: 12px;
}

.notebook-form textarea {
  width: 100%;
  min-height: 360px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(#fffef7 0 0) padding-box,
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(0, 121, 107, 0.08) 31px 32px);
  color: var(--text);
  font-size: 15px;
  line-height: 32px;
  outline: none;
}

.notebook-form textarea:focus {
  border-color: rgba(0, 168, 132, 0.46);
  box-shadow: 0 0 0 3px rgba(0, 168, 132, 0.1);
}

.notebook-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.notebook-footer small {
  color: var(--muted);
  font-size: 12px;
}

/* v296: compact list header with searchable second row, device status and message font preference. */
.chat-view .list-head,
.chat-view:not(.is-chat-open) .list-head {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  gap: 10px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 18px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.list-head .list-title-copy,
.list-head .list-head-logo {
  display: none !important;
}

.list-head-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 100%;
}

.list-brand-title {
  color: var(--brand-strong);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

.list-head-main .head-actions {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 45;
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: 44px;
  align-items: center !important;
  justify-content: end;
  gap: 8px !important;
  width: auto !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.list-search-toggle,
.list-head-main .global-lock-button,
.list-head-main .list-create-trigger {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: rgba(236, 243, 239, 0.92) !important;
  color: #24483e !important;
  box-shadow: none !important;
  line-height: 1 !important;
  transform: none !important;
}

.list-search-toggle {
  font-family: "Material Symbols Outlined";
  font-size: 22px;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 24;
}

.list-search-toggle.active,
.list-head-main .global-lock-button.is-secure,
.list-head-main .list-create-trigger.active {
  color: var(--brand-strong) !important;
  background: #e8f8f2 !important;
}

.list-search-row {
  display: none;
  width: 100%;
}

.chat-view.is-list-search-open .list-search-row {
  display: block;
}

.list-search-row .search-box {
  width: 100%;
  height: 46px;
  margin: 0 !important;
  padding: 0 !important;
}

.list-search-row .search-box input {
  width: 100%;
  height: 46px !important;
  min-height: 46px !important;
  line-height: 46px !important;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
}

.multi-login-status {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid rgba(0, 121, 107, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #4f625c;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
}

.multi-login-status.hidden {
  display: none !important;
}

.multi-login-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

.multi-login-status small {
  margin-left: auto;
  color: #7a8690;
  font-size: 11px;
  font-weight: 700;
}

.message-bubble,
.message-bubble .message-text-content,
.message-bubble .secure-file-card,
.message-bubble .special-card {
  font-size: var(--chat-message-font-size, 15px);
}

.profile-message-font-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.message-font-control {
  display: inline-grid;
  grid-template-columns: 112px 42px;
  align-items: center;
  gap: 10px;
}

.message-font-control input[type="range"] {
  width: 112px;
  accent-color: var(--brand);
}

.message-font-control em {
  color: #667781;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

@media (max-width: 760px) {
  .chat-view:not(.is-chat-open) .list-panel,
  .chat-view .list-panel {
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  }

  .chat-view .list-head,
  .chat-view:not(.is-chat-open) .list-head {
    padding: calc(8px + env(safe-area-inset-top)) 0 0 !important;
  }

  .list-head-main {
    min-height: 42px;
  }

  .list-brand-title {
    font-size: 19px;
  }

  .list-head-main .head-actions {
    grid-auto-columns: 40px !important;
    gap: 8px !important;
    height: 40px !important;
  }

  .list-search-toggle,
  .list-head-main .global-lock-button,
  .list-head-main .list-create-trigger {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border-radius: 14px !important;
  }

  .list-search-row .search-box {
    height: 44px;
  }

  .list-search-row .search-box input {
    height: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
  }

  .multi-login-status {
    border-radius: 14px;
    font-size: 11px;
  }
}

/* v297: tighten the list top area and make device status actionable. */
.chat-view .list-head,
.chat-view:not(.is-chat-open) .list-head {
  gap: 7px !important;
  padding: 10px 10px 4px !important;
}

.list-head-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
}

.list-brand-title {
  grid-column: 1;
  justify-self: center;
}

.list-head-main .head-actions {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  grid-column: 1;
  justify-self: end !important;
}

.list-search-row {
  box-sizing: border-box;
  padding: 0;
}

.multi-login-status {
  justify-self: center;
  cursor: pointer;
  appearance: none;
  max-width: 100%;
}

.multi-login-status:hover,
.multi-login-status:focus-visible {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 121, 107, 0.08);
}

.device-status-panel {
  width: min(560px, calc(100vw - 28px));
}

.device-status-list {
  display: grid;
  gap: 10px;
  max-height: min(56vh, 520px);
  overflow: auto;
  padding-right: 2px;
}

.device-status-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(0, 121, 107, 0.1);
  border-radius: 14px;
  background: #fff;
}

.device-status-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e8f8f2;
  color: var(--brand-strong);
  font-size: 13px;
  font-weight: 900;
}

.device-status-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.device-status-copy strong,
.device-status-copy span,
.device-status-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-status-copy strong {
  color: var(--ink);
  font-size: 14px;
}

.device-status-copy span {
  color: #36443f;
  font-size: 12px;
  font-weight: 750;
}

.device-status-copy small,
.device-status-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

@media (max-width: 760px) {
  .chat-view:not(.is-chat-open) .list-panel,
  .chat-view .list-panel {
    row-gap: 6px !important;
    padding-top: calc(2px + env(safe-area-inset-top)) !important;
  }

  .list-head-main {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 40px;
  }

  .list-head-main .head-actions {
    gap: 7px !important;
  }

  .list-search-row .search-box,
  .list-search-row .search-box input {
    height: 42px !important;
    min-height: 42px !important;
    line-height: 42px !important;
  }

  .multi-login-status {
    min-height: 26px;
    padding: 5px 9px;
  }

  .device-status-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .device-status-row .ghost-button,
  .device-status-row em {
    grid-column: 2;
    justify-self: start;
  }
}

/* v299: keep the brand title centered while search/lock/create stay on the far right of the same row. */
.chat-view .list-head,
.chat-view:not(.is-chat-open) .list-head {
  box-sizing: border-box !important;
  width: 100% !important;
  justify-self: stretch !important;
}

.chat-view .list-head-main,
.chat-view:not(.is-chat-open) .list-head-main {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
}

.chat-view .list-brand-title,
.chat-view:not(.is-chat-open) .list-brand-title {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: center !important;
}

.chat-view .list-head-main .head-actions,
.chat-view:not(.is-chat-open) .list-head-main .head-actions {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: end !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 44px !important;
  align-items: center !important;
  justify-content: end !important;
  justify-items: center !important;
  gap: 8px !important;
  width: auto !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.chat-view .list-search-row,
.chat-view:not(.is-chat-open) .list-search-row {
  width: 100% !important;
  justify-self: stretch !important;
}

@media (max-width: 760px) {
  .chat-view .list-head,
  .chat-view:not(.is-chat-open) .list-head {
    padding: 0 10px 2px !important;
  }

  .chat-view .list-head-main .head-actions,
  .chat-view:not(.is-chat-open) .list-head-main .head-actions {
    grid-auto-columns: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    gap: 7px !important;
  }
}

/* v300: search is always visible; lock/+ stay in the title row, and status/search match list card width. */
.chat-view .list-search-toggle,
.chat-view:not(.is-chat-open) .list-search-toggle {
  display: none !important;
}

.chat-view .list-search-row,
.chat-view:not(.is-chat-open) .list-search-row,
.chat-view.is-list-search-open .list-search-row {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.chat-view .list-search-row .search-box,
.chat-view:not(.is-chat-open) .list-search-row .search-box {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.chat-view .multi-login-status,
.chat-view:not(.is-chat-open) .multi-login-status {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 36px !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
  justify-content: center !important;
  padding: 9px 12px !important;
  border-radius: 16px !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.chat-view .multi-login-status small,
.chat-view:not(.is-chat-open) .multi-login-status small {
  font-size: 12px !important;
}

.chat-view .list-head-main .head-actions,
.chat-view:not(.is-chat-open) .list-head-main .head-actions {
  grid-auto-columns: 44px !important;
}

@media (max-width: 760px) {
  .chat-view .list-head,
  .chat-view:not(.is-chat-open) .list-head {
    gap: 8px !important;
    padding: 0 10px 3px !important;
  }

  .chat-view .list-head-main,
  .chat-view:not(.is-chat-open) .list-head-main {
    min-height: 40px !important;
  }

  .chat-view .list-head-main .head-actions,
  .chat-view:not(.is-chat-open) .list-head-main .head-actions {
    grid-auto-columns: 40px !important;
  }

  .chat-view .multi-login-status,
  .chat-view:not(.is-chat-open) .multi-login-status {
    min-height: 34px !important;
    padding: 8px 11px !important;
    font-size: 12.5px !important;
  }
}

/* v301: match the compact mobile list header spacing from the target mockup. */
.chat-view .list-panel,
.chat-view:not(.is-chat-open) .list-panel {
  row-gap: 3px !important;
}

.chat-view .list-head,
.chat-view:not(.is-chat-open) .list-head {
  padding: 10px 10px 3px !important;
}

.chat-view .list-search-row .search-box,
.chat-view:not(.is-chat-open) .list-search-row .search-box,
.chat-view .list-search-row .search-box input,
.chat-view:not(.is-chat-open) .list-search-row .search-box input {
  border-radius: 12px !important;
}

.chat-view .multi-login-status,
.chat-view:not(.is-chat-open) .multi-login-status {
  border-radius: 8px !important;
}

@media (max-width: 760px) {
  .chat-view .list-panel,
  .chat-view:not(.is-chat-open) .list-panel {
    row-gap: 3px !important;
  }

  .chat-view .list-head,
  .chat-view:not(.is-chat-open) .list-head {
    padding: 10px 10px 3px !important;
  }
}

/* v303: search and device status extend to the same visual width as conversation cards. */
.chat-view .list-search-row,
.chat-view:not(.is-chat-open) .list-search-row,
.chat-view .multi-login-status,
.chat-view:not(.is-chat-open) .multi-login-status {
  width: calc(100% + 20px) !important;
  max-width: calc(100% + 20px) !important;
  margin-left: -10px !important;
  margin-right: -10px !important;
}

.chat-view .list-search-row .search-box,
.chat-view:not(.is-chat-open) .list-search-row .search-box,
.chat-view .list-search-row .search-box input,
.chat-view:not(.is-chat-open) .list-search-row .search-box input {
  width: 100% !important;
  max-width: 100% !important;
}

/* v304: mobile search/status width is tied to the conversation card width, not the title row width. */
@media (max-width: 760px) {
  .chat-view .list-search-row,
  .chat-view:not(.is-chat-open) .list-search-row,
  .chat-view .multi-login-status,
  .chat-view:not(.is-chat-open) .multi-login-status {
    width: calc(100dvw - 48px) !important;
    max-width: calc(100dvw - 48px) !important;
    margin-left: 50% !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
  }
}

/* v306: desktop list header aligns title/actions and uses the same width as conversation cards. */
@media (min-width: 761px) {
  .chat-view .list-panel {
    row-gap: 3px !important;
  }

  .chat-view .list-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 44px 46px auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px 3px !important;
  }

  .chat-view .list-head-main {
    display: grid !important;
    grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr) !important;
    align-items: center !important;
    justify-items: stretch !important;
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
  }

  .chat-view .list-brand-title {
    grid-column: 2 !important;
    align-self: center !important;
    justify-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 44px !important;
    line-height: 1 !important;
  }

  .chat-view .list-head-main .head-actions {
    grid-column: 3 !important;
    align-self: center !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .chat-view .list-head-main .global-lock-button {
    display: none !important;
  }

  .chat-view .list-head-main .list-create-trigger {
    align-self: center !important;
    justify-self: center !important;
  }

  .chat-view .list-search-row,
  .chat-view .multi-login-status {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
  }

  .chat-view .list-search-row .search-box,
  .chat-view .list-search-row .search-box input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .chat-view .conversation-list {
    padding-inline: 12px !important;
  }

  .chat-view .conversation-item {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* v307: desktop list header/search/status share the same side gutters as list cards. */
@media (min-width: 761px) {
  .chat-view .list-panel {
    --desktop-list-card-gutter: 24px;
  }

  .chat-view .list-head {
    padding: 10px var(--desktop-list-card-gutter) 3px !important;
  }

  .chat-view .conversation-list {
    padding-inline: var(--desktop-list-card-gutter) !important;
  }

  .chat-view .list-search-row,
  .chat-view .multi-login-status,
  .chat-view .conversation-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* v308: force desktop list header controls to the same visual card gutter in both list states. */
@media (min-width: 761px) {
  .chat-view .list-panel,
  .chat-view:not(.is-chat-open) .list-panel {
    --desktop-list-card-gutter: 20px;
  }

  .chat-view .list-head,
  .chat-view:not(.is-chat-open) .list-head {
    padding: 10px var(--desktop-list-card-gutter) 3px !important;
  }

  .chat-view .list-search-row,
  .chat-view:not(.is-chat-open) .list-search-row,
  .chat-view .multi-login-status,
  .chat-view:not(.is-chat-open) .multi-login-status {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
  }

  .chat-view .list-search-row .search-box,
  .chat-view:not(.is-chat-open) .list-search-row .search-box,
  .chat-view .list-search-row .search-box input,
  .chat-view:not(.is-chat-open) .list-search-row .search-box input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .chat-view .conversation-list,
  .chat-view:not(.is-chat-open) .conversation-list {
    padding-inline: var(--desktop-list-card-gutter) !important;
  }

  .chat-view .conversation-item,
  .chat-view:not(.is-chat-open) .conversation-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* v310: compact composer type marker and stable quick-option layout. */
.quick-secret-code-input.hidden {
  display: none !important;
}

.composer-mode-badge {
  position: relative !important;
  grid-area: input !important;
  align-self: center !important;
  justify-self: start !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  margin-left: 10px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: rgba(0, 168, 132, 0.14) !important;
  color: var(--brand) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

.composer.has-composer-option textarea {
  padding-left: 42px !important;
}

@media (max-width: 760px) {
  .chat-view.is-chat-open .composer-mode-badge {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    margin-left: 9px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
  }

  .chat-view.is-chat-open .composer.has-composer-option textarea {
    padding-left: 38px !important;
  }

  .chat-view.is-chat-open .quick-action-page > .quick-option-check {
    min-height: 86px !important;
  }

  .chat-view.is-chat-open .quick-secret-option:not(.is-active) {
    align-content: start !important;
  }
}

/* v311: burn-after-read text messages keep content and burn status on separate lines. */
.message-bubble.has-burn-badge.is-text {
  display: inline-grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 3px !important;
  width: max-content !important;
  max-width: min(76vw, 620px) !important;
  align-items: start !important;
}

.message-bubble.has-burn-badge.is-text .message-text-content {
  display: block !important;
  min-width: 0 !important;
  white-space: pre-wrap !important;
}

.message-bubble.has-burn-badge.is-text .burn-badge {
  display: inline-flex !important;
  margin-top: 1px !important;
}

.message.mine .message-bubble.has-burn-badge.is-text .burn-badge {
  justify-self: end !important;
}

@media (max-width: 760px) {
  .chat-view.is-chat-open .message-bubble.has-burn-badge.is-text {
    max-width: min(78vw, calc(100vw - 96px)) !important;
  }
}

/* keep password/burn quick actions stable after checkbox selection. */
@media (max-width: 760px) {
  .chat-view.is-chat-open .quick-action-panel {
    min-height: 322px !important;
  }

  .chat-view.is-chat-open .quick-action-panel.is-single-page {
    min-height: 232px !important;
  }

  .chat-view.is-chat-open .quick-action-pages {
    min-height: 232px !important;
    overflow: visible !important;
  }

  .chat-view.is-chat-open .quick-action-page {
    grid-auto-rows: minmax(86px, auto) !important;
    min-height: 232px !important;
    overflow: visible !important;
  }

  .chat-view.is-chat-open .quick-action-page > .quick-option-check {
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .chat-view.is-chat-open .quick-secret-option.is-active {
    min-height: 116px !important;
    align-content: start !important;
  }

  .chat-view.is-chat-open .quick-secret-code-input {
    margin-top: -1px !important;
  }

  .chat-view.is-chat-open .quick-secret-code-input.hidden {
    display: none !important;
  }
}

/* v315: old mobile Safari overflow guards for chat/composer layouts. */
html,
body,
#app,
.auth-screen,
.chat-view {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body {
  position: relative;
}

.chat-view,
.rail,
.list-panel,
.chat-panel,
.detail-panel,
.list-head,
.list-toolbar,
.list-search-row,
.search-box,
.conversation-list,
.conversation-item,
.conversation-copy,
.conversation-main-line,
.conversation-sub-line,
.chat-head,
.chat-title-area,
.messages,
.message,
.message-stack,
.message-content-row,
.message-bubble,
.message-meta,
.composer,
.composer-reply,
.clipboard-preview,
.quick-action-panel,
.quick-action-pages,
.quick-action-page {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.messages,
.conversation-list,
.list-panel,
.chat-panel,
.detail-panel {
  overflow-x: hidden !important;
}

.message-bubble,
.message-text-content,
.conversation-copy strong,
.conversation-copy small,
.composer-reply,
.secure-file-card,
.special-card,
.poll-card,
.receipt-card,
.solitaire-card {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

.message-bubble img,
.message-bubble video,
.message-bubble canvas,
.message-media,
.message-media-button,
.secure-file-card {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.composer {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.composer > * {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.composer textarea,
#messageText,
.voice-hold-button {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  resize: none !important;
  white-space: pre-wrap !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  box-sizing: border-box !important;
}

.composer .icon-button,
.composer .primary-button,
.text-burn-toggle,
.voice-burn-toggle {
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

@media (min-width: 761px) {
  .chat-view.is-chat-open .composer,
  .composer {
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
  }
}

@media (max-width: 760px) {
  body,
  .chat-view {
    max-width: 100vw !important;
  }

  .chat-view.is-chat-open .chat-panel {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .chat-view.is-chat-open .messages {
    width: 100% !important;
    max-width: 100vw !important;
  }

  .chat-view.is-chat-open .composer {
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    gap: 7px !important;
  }

  .chat-view.is-chat-open .composer #sendMessageBtn {
    min-width: 56px !important;
    padding-inline: 10px !important;
  }

  .chat-view.is-chat-open .text-burn-toggle,
  .chat-view.is-chat-open .voice-burn-toggle {
    min-width: 48px !important;
    padding-inline: 6px !important;
  }

  .chat-view.is-chat-open .composer #emojiToggle,
  .chat-view.is-chat-open .composer #moreToggle {
    width: 32px !important;
    min-width: 32px !important;
  }
}

@media (max-width: 340px) {
  .chat-view.is-chat-open .composer {
    gap: 5px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .chat-view.is-chat-open .text-burn-toggle,
  .chat-view.is-chat-open .voice-burn-toggle {
    min-width: 42px !important;
    padding-inline: 4px !important;
    font-size: 12px !important;
  }

  .chat-view.is-chat-open .composer #sendMessageBtn {
    min-width: 50px !important;
    padding-inline: 8px !important;
    font-size: 14px !important;
  }
}

/* v316: keep composer popovers and modals above selectable chat wallpapers. */
.chat-panel {
  isolation: isolate;
}

.chat-view .messages {
  position: relative !important;
  z-index: 1 !important;
}

.chat-view .composer {
  position: relative !important;
  z-index: 320 !important;
  overflow: visible !important;
}

.quick-action-panel,
.emoji-panel,
.mention-panel,
.conversation-context-menu,
.chat-more-menu,
.list-create-menu {
  z-index: 420 !important;
}

.modal {
  z-index: 10000 !important;
}

.modal-panel,
.history-modal-panel,
.profile-panel {
  position: relative;
  z-index: 10001 !important;
}

.image-preview-modal {
  z-index: 10020 !important;
}

.image-preview-modal.has-active-image-editor {
  pointer-events: none !important;
  z-index: 10010 !important;
}

#imageEditModal {
  z-index: 10040 !important;
}

#imageEditModal .image-edit-panel {
  position: relative !important;
  z-index: 10041 !important;
}

/* v320: group video stream lives above the message list, not as a chat message. */
.chat-panel {
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}


/* Legacy video stream cards for older stream messages. */
.stream-card {
  display: grid;
  gap: 10px;
  width: min(520px, 72vw);
  max-width: 100%;
}

.stream-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.stream-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-weight: 900;
}

.stream-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.stream-copy strong {
  overflow: hidden;
  color: var(--message-text);
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stream-copy small,
.stream-note,
.stream-hint {
  color: var(--message-meta);
  font-size: 12px;
  line-height: 1.45;
}

.stream-player {
  width: 100%;
  max-height: 340px;
  border-radius: 10px;
  background: #0b1512;
}

.stream-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.stream-actions a {
  flex: 0 0 auto;
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.stream-card-error {
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
}

@media (max-width: 760px) {
  .stream-card {
    width: min(300px, calc(100vw - 108px));
  }

  .message.theirs .stream-card {
    width: min(300px, calc(100vw - 96px));
  }

  .stream-player {
    max-height: 260px;
  }

  .stream-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Reserve text space only when a composer type badge is actually visible. */
.composer-mode-badge.hidden {
  display: none !important;
}

.composer-mode-badge:not(.hidden) {
  display: inline-grid !important;
  place-items: center !important;
  margin-left: 12px !important;
}

.composer.has-composer-option #messageText,
#messageText.has-mode-badge {
  padding-left: 54px !important;
}

@media (max-width: 760px) {
  .chat-view.is-chat-open .composer-mode-badge {
    margin-left: 10px !important;
  }

  .chat-view.is-chat-open .composer.has-composer-option #messageText,
  .chat-view.is-chat-open #messageText.has-mode-badge {
    padding-left: 48px !important;
  }
}

/* Harden old iOS Safari against accidental horizontal page scrolling. */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  position: relative;
}

body {
  touch-action: pan-y;
  -webkit-text-size-adjust: 100%;
}

#app,
.app-shell,
.chat-view,
.list-panel,
.chat-panel,
.detail-panel,
.messages,
.composer,
.list-head,
.conversation-list,
.conversation-item,
.message,
.message-row,
.message-content,
.message-bubble {
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

.chat-view,
.chat-panel,
.messages,
.composer,
.list-panel {
  overflow-x: hidden !important;
}

.message-bubble,
.message-text,
.message-text-canvas,
.file-message,
.secret-message,
.quote-preview,
.message-reply-preview {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.message-bubble img,
.message-bubble video,
.message-bubble canvas {
  max-width: 100% !important;
}

.message-action-strip {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.message-action-strip .message-reply-button {
  flex: 0 0 auto !important;
}

@media (max-width: 760px), (hover: none), (pointer: coarse) {
  .chat-view.is-chat-open,
  .chat-view.is-chat-open .chat-panel,
  .chat-view.is-chat-open .messages,
  .chat-view.is-chat-open .composer {
    width: 100% !important;
    max-width: 100vw !important;
  }

  .message {
    position: relative !important;
  }

  .message-action-strip {
    display: none !important;
    position: absolute !important;
    left: 50% !important;
    bottom: calc(100% + 6px) !important;
    z-index: 380 !important;
    transform: translateX(-50%) !important;
    max-width: calc(100vw - 32px) !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 14px 34px rgba(17, 24, 39, 0.16) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .message.actions-open .message-action-strip,
  .message.selected .message-action-strip,
  .message.local-failed .message-action-strip {
    display: inline-flex !important;
    align-items: center !important;
  }

  .message-action-strip .message-reply-button {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
}

/* v320: keep the input bar pinned below messages even when a top stream exists. */
.chat-panel {
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  height: 100% !important;
  max-height: 100% !important;
}

.chat-panel > #chatHead {
  grid-row: 1 !important;
}

.chat-panel > #conversationStreamPanel {
  grid-row: 2 !important;
}

.chat-panel > #messageList {
  grid-row: 3 !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: stretch !important;
}

.chat-panel > #messageForm {
  grid-row: 4 !important;
  align-self: end !important;
}

.chat-view:not(.is-list-locked):not(.is-group-content-locked) .chat-panel > #messageForm {
  display: grid !important;
}

@media (max-width: 760px) {
  .chat-view.is-chat-open .chat-panel {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}

/* v324: final polish for secure-message controls, avatars, and older mobile layout engines. */
.message-content-row {
  max-width: min(82%, 720px) !important;
}

.message-stack {
  max-width: calc(100% - 46px) !important;
}

.message-avatar {
  flex-basis: 34px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
}

.message-avatar img {
  border-radius: inherit !important;
}

.message-avatar.is-bot::before {
  right: -3px !important;
  bottom: -3px !important;
}

.clear-chat-button,
.chat-lock-button,
.list-head-main .global-lock-button,
.list-head-main .list-create-trigger {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

.clear-chat-button svg {
  width: 22px !important;
  height: 22px !important;
}

.chat-lock-button,
.global-lock-button,
.list-create-trigger {
  font-size: 22px !important;
  line-height: 1 !important;
}

.composer-mode-badge.hidden,
.composer:not(.has-composer-option) .composer-mode-badge {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.composer.has-composer-option .composer-mode-badge:not(.hidden) {
  display: inline-grid !important;
  place-items: center !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.composer:not(.has-composer-option) #messageText,
#messageText:not(.has-mode-badge) {
  padding-left: 14px !important;
}

.composer.has-composer-option #messageText.has-mode-badge {
  padding-left: 54px !important;
}

@media (min-width: 761px) {
  .message-action-strip {
    min-height: 20px !important;
  }
}

@media (max-width: 760px) {
  .message-content-row {
    max-width: min(86%, calc(100vw - 34px)) !important;
  }

  .message-stack {
    max-width: calc(100% - 44px) !important;
  }

  .chat-view.is-chat-open .message-avatar {
    flex-basis: 34px !important;
    width: 34px !important;
    height: 34px !important;
  }

  .chat-view.is-chat-open .composer.has-composer-option #messageText.has-mode-badge {
    padding-left: 48px !important;
  }

  .chat-view.is-chat-open .composer:not(.has-composer-option) #messageText,
  .chat-view.is-chat-open #messageText:not(.has-mode-badge) {
    padding-left: 14px !important;
  }

  .chat-view .list-head-main .global-lock-button,
  .chat-view .list-head-main .list-create-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
  }
}

@media (min-width: 761px) {
  .chat-view.is-chat-open .composer #moreToggle,
  .composer #moreToggle {
    margin-bottom: 7px !important;
  }
}

.lock-symbol {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.lock-screen-icon {
  position: relative !important;
  display: block !important;
  width: 34px !important;
  height: 46px !important;
  border: 0 !important;
}

.lock-screen-icon::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  width: 20px !important;
  height: 18px !important;
  border: 4px solid currentColor !important;
  border-bottom: 0 !important;
  border-radius: 18px 18px 0 0 !important;
  transform: translateX(-50%) !important;
}

.lock-screen-icon::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: 34px !important;
  height: 28px !important;
  border: 4px solid currentColor !important;
  border-radius: 9px !important;
  background:
    radial-gradient(circle at 50% 40%, currentColor 0 3px, transparent 4px),
    linear-gradient(currentColor, currentColor) 50% 68% / 4px 8px no-repeat !important;
  box-shadow: none !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box !important;
}

@supports (-webkit-touch-callout: none) {
  html,
  body,
  #app,
  .app-shell,
  .chat-view {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .chat-panel,
  .messages,
  .composer,
  .composer-field,
  #messageText,
  .list-panel,
  .detail-panel {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .message,
  .message-content-row,
  .message-stack,
  .message-bubble {
    min-width: 0 !important;
  }
}

.note-message-card {
  display: grid;
  gap: 8px;
  min-width: min(280px, 72vw);
  max-width: min(520px, 78vw);
  padding: 12px;
  border: 1px solid rgba(0, 121, 107, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.note-message-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #047857;
  font-size: 13px;
  font-weight: 800;
}

.note-message-head span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #dff8f1;
}

.note-message-card h3 {
  margin: 0;
  color: #111827;
  font-size: 16px;
  line-height: 1.35;
}

.note-message-content {
  color: #1f2937;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.note-message-files {
  display: grid;
  gap: 8px;
}

.note-message-file .secure-attachment,
.note-message-file .file-card,
.note-message-file .message-media-button {
  max-width: 100%;
}

.note-message-preview {
  min-width: min(240px, 74vw);
  max-width: min(360px, 78vw);
}

.note-message-preview-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.note-message-thumb {
  width: 74px;
  height: 58px;
  overflow: hidden;
  border-radius: 10px;
  background: #eef2f7;
}

.note-message-thumb .secure-attachment,
.note-message-thumb .file-card,
.note-message-thumb .message-media-button,
.note-message-thumb .message-media {
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 10px;
}

.note-message-thumb .file-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  justify-content: center;
}

.note-message-thumb .file-copy,
.note-message-thumb .ghost-button {
  display: none;
}

.note-message-preview-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.note-message-preview-copy h3,
.note-message-preview-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.note-message-preview-copy small {
  color: #6b7280;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.note-message-open {
  justify-self: stretch;
  margin-top: 2px;
}


/* v331: keep mobile profile preference controls inside their rows. */
.profile-message-font-row,
.profile-retention-row {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  column-gap: 14px !important;
  align-items: center !important;
}

.profile-message-font-row .profile-menu-copy,
.profile-retention-row .profile-menu-copy {
  min-width: max-content;
  overflow: visible;
}

.profile-message-font-row .message-font-control {
  justify-self: end;
  width: min(220px, 100%);
  min-width: 0;
  overflow: visible !important;
  grid-template-columns: minmax(78px, 1fr) max-content;
}

.profile-message-font-row .message-font-control input[type="range"] {
  width: 100%;
  min-width: 0;
}

.profile-message-font-row .message-font-control em {
  min-width: max-content;
  white-space: nowrap;
}

.profile-retention-row .compact-select {
  justify-self: end;
  width: min(180px, 100%);
  min-width: 0;
}

@media (max-width: 760px) {
  .profile-message-font-row .message-font-control {
    width: min(206px, 100%);
    gap: 8px;
    grid-template-columns: minmax(70px, 1fr) max-content;
  }

  .profile-retention-row {
    grid-template-columns: max-content minmax(144px, 1fr) !important;
  }

  .profile-retention-row .compact-select {
    width: 100%;
  }
}

/* Keep the desktop version at the absolute bottom and notes inside mobile profile. */
@media (min-width: 761px) {
  .chat-view .rail {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    min-height: 0 !important;
  }

  .chat-view .rail-nav {
    grid-row: 2 !important;
    display: grid !important;
    grid-template-rows: 52px 52px 52px 52px minmax(0, 1fr) 52px 52px !important;
    align-content: stretch !important;
    min-height: 0 !important;
  }

  .chat-view .rail-nav [data-view="chats"] {
    grid-row: 1 !important;
  }

  .chat-view .rail-nav [data-view="directory"] {
    grid-row: 2 !important;
  }

  .chat-view .rail-nav #railFavoritesBtn {
    grid-row: 3 !important;
  }

  .chat-view .rail-nav #railNotesBtn {
    grid-row: 4 !important;
  }

  .chat-view .rail-nav #railLockBtn {
    grid-row: 6 !important;
    align-self: end !important;
  }

  .chat-view .rail-nav #profileQuickBtn {
    grid-row: 7 !important;
    align-self: end !important;
  }

  .chat-view .rail .rail-version {
    grid-row: 3 !important;
    display: block !important;
    justify-self: center !important;
    align-self: end !important;
    max-width: 58px !important;
    margin: 10px 0 0 !important;
    color: rgba(60, 74, 66, 0.58) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    box-shadow: none !important;
  }
}

/* v332: profile preference rows must stay readable on narrow mobile screens. */
#profileModal .profile-message-font-row,
#profileModal .profile-retention-row {
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 10px !important;
}

#profileModal .profile-message-font-row .profile-menu-copy,
#profileModal .profile-retention-row .profile-menu-copy {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

#profileModal .profile-message-font-row .message-font-control {
  justify-self: end !important;
  width: min(218px, 100%) !important;
  min-width: 0 !important;
  grid-template-columns: minmax(66px, 1fr) max-content !important;
  gap: 8px !important;
}

#profileModal .profile-message-font-row .message-font-control em {
  min-width: 96px !important;
  max-width: none !important;
  overflow: visible !important;
  text-align: right !important;
  white-space: nowrap !important;
}

#profileModal .profile-retention-row .compact-select {
  justify-self: end !important;
  width: 146px !important;
  max-width: 100% !important;
}

@media (max-width: 420px) {
  #profileModal .profile-message-font-row,
  #profileModal .profile-retention-row {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #profileModal .profile-message-font-row .message-font-control {
    width: min(202px, 100%) !important;
    grid-template-columns: minmax(56px, 1fr) max-content !important;
    gap: 7px !important;
  }

  #profileModal .profile-message-font-row .message-font-control em {
    min-width: 92px !important;
    font-size: 11px !important;
  }

  #profileModal .profile-retention-row .compact-select {
    width: 134px !important;
  }
}

@media (max-width: 760px) {
  .chat-view .rail-version,
  .chat-view .rail-nav #railNotesBtn,
  .chat-view .rail-nav #railFavoritesBtn {
    display: none !important;
  }
}

/* Mobile feature tab polish and spaced plugin cards. */
.feature-entry {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 74px;
  padding: 11px 12px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 36px rgba(17, 24, 39, 0.06);
  color: var(--ink);
  text-align: left;
  margin: 0 0 12px;
  position: relative;
}

.feature-entry:last-child {
  margin-bottom: 0;
}

.feature-entry:hover,
.feature-entry:focus-visible {
  background: #fff;
  box-shadow: 0 16px 40px rgba(0, 121, 107, 0.12);
  outline: none;
}

.feature-entry-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: rgba(0, 168, 132, 0.12);
  color: var(--lumina-primary);
  font-family: "Material Symbols Outlined";
  font-size: 25px;
  font-weight: normal;
  line-height: 1;
  font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24;
}

.feature-entry-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.feature-entry-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feature-entry-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 761px) {
  .chat-view .rail-nav [data-view="features"] {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .chat-view .rail-nav {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-items: center !important;
    justify-content: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    padding: 6px calc(12px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 -10px 28px rgba(17, 24, 39, 0.06) !important;
  }

  .chat-view .rail-nav [data-view="chats"],
  .chat-view .rail-nav [data-view="directory"],
  .chat-view .rail-nav [data-view="features"],
  .chat-view .rail-nav #profileQuickBtn {
    display: grid !important;
    place-items: center !important;
    width: 52px !important;
    height: 50px !important;
    min-width: 52px !important;
    min-height: 50px !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: #3c4a42 !important;
    box-shadow: none !important;
  }

  .chat-view .rail-nav [data-view="chats"].active,
  .chat-view .rail-nav [data-view="directory"].active,
  .chat-view .rail-nav [data-view="features"].active,
  .chat-view .rail-nav #profileQuickBtn.active {
    color: var(--lumina-primary) !important;
  }

  .chat-view .rail-nav #railFavoritesBtn,
  .chat-view .rail-nav #railNotesBtn,
  .chat-view .rail-nav #railBookmarksBtn,
  .chat-view .rail-nav #railLockBtn {
    display: none !important;
  }

  .feature-entry {
    min-height: 72px;
    margin-bottom: 12px;
    border-radius: 16px;
  }

  .profile-bottom-nav {
    justify-content: space-around !important;
    gap: 0 !important;
  }

  .profile-bottom-nav button {
    flex: 0 0 52px !important;
    width: 52px !important;
    min-width: 0 !important;
    max-width: 52px !important;
  }
}

/* v343: Auto-register client modules and precache split security files. */
@supports (-webkit-touch-callout: none) {
  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  .chat-view,
  .list-panel,
  .chat-main,
  .messages,
  .composer {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

.rail-nav .rail-button,
.rail-nav #profileQuickBtn,
.profile-bottom-nav button {
  position: relative !important;
}

.rail-nav .rail-button.has-unread::before,
.profile-bottom-nav button.has-unread::before {
  content: attr(data-unread) !important;
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  z-index: 2 !important;
  display: grid !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #ef4444 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.96) !important;
}

.messages {
  padding: 16px 12px 12px !important;
}

.message-content-row {
  max-width: min(calc(100% - 84px), 760px) !important;
}

.message.mine .message-content-row,
.message:not(.mine) .message-content-row {
  max-width: min(calc(100% - 84px), 760px) !important;
}

.message-stack {
  max-width: 100% !important;
}

.message-content-row .message-bubble,
.message-content-row .message-bubble.is-text,
.message-content-row .message-bubble.has-attachment,
.message-content-row .message-bubble.has-stream,
.message-content-row .message-bubble.has-secret,
.message-content-row .message-bubble.has-special,
.message-content-row .message-bubble.has-voice {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.message-bubble.is-text {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
}

.message-text-content {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.voice-card {
  display: grid;
  grid-template-columns: minmax(0, var(--voice-width, 128px)) auto;
  align-items: center;
  gap: 5px;
  width: auto;
  max-width: min(268px, 72vw);
}

.voice-message {
  min-width: 0;
}

.voice-speed-button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 128, 105, 0.11);
  color: #047857;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.message.mine .voice-speed-button {
  background: rgba(5, 75, 54, 0.1);
  color: #0f5132;
}

.note-message-head {
  min-height: 22px;
}

@media (max-width: 760px) {
  .chat-view.is-chat-open .messages {
    padding: 8px calc(8px + env(safe-area-inset-right)) 8px calc(8px + env(safe-area-inset-left)) !important;
  }

  .chat-view.is-chat-open .message.mine,
  .chat-view.is-chat-open .message:not(.mine) {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .chat-view.is-chat-open .message-content-row,
  .chat-view.is-chat-open .message.mine .message-content-row,
  .chat-view.is-chat-open .message:not(.mine) .message-content-row {
    max-width: calc(100% - 48px) !important;
  }

  .chat-view.is-chat-open .message-bubble.is-text,
  .chat-view.is-chat-open .message.mine .message-bubble.is-text {
    max-width: 100% !important;
  }

  .chat-view.is-chat-open .voice-card {
    max-width: min(250px, calc(100vw - 112px));
  }
}

/* v344: safer action placement, media controls, and mobile nav alignment. */
.contact-info-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.contact-info-actions #contactDeleteBtn {
  order: 1;
}

.contact-info-actions #contactBlockBtn {
  order: 2;
  margin-right: auto;
}

.contact-info-actions #contactHistoryBtn {
  order: 3;
}

.contact-info-actions .primary-button {
  order: 4;
}

.feature-lock-settings {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.feature-lock-settings .switch-row {
  margin: 0;
}

.feature-lock-modal-panel {
  width: min(430px, calc(100vw - 32px)) !important;
}

.feature-lock-body {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 28px 20px 24px;
  text-align: center;
}

.feature-lock-body h3 {
  margin: 0;
  color: #111827;
  font-size: 18px;
  font-weight: 800;
}

.feature-lock-body p {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
}

.feature-lock-body .unlock-row {
  width: min(320px, 100%);
}

.feature-lock-body .ghost-button {
  min-width: 90px;
}


.voice-hold-button,
.voice-hold-button * {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  touch-action: none !important;
}

@media (max-width: 760px) {
  .profile-bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 0 !important;
  }

  .profile-bottom-nav button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 50px !important;
    min-width: 52px !important;
    min-height: 50px !important;
    max-width: 52px !important;
    padding: 0 !important;
    transform: none !important;
  }

  .profile-bottom-nav button span {
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 1 !important;
  }
}

/* v345: prevent voice press selection and keep mobile tabs perfectly stable. */
.voice-hold-button,
.voice-hold-button *,
.voice-hold-button::before,
.voice-hold-button::after {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-drag: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  touch-action: none !important;
}

.voice-hold-button:focus,
.voice-hold-button:focus-visible,
.voice-hold-button:active {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.voice-hold-button::selection,
.voice-hold-button *::selection {
  background: transparent !important;
  color: inherit !important;
}

@media (max-width: 760px) {
  .chat-view .rail-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-items: center !important;
  }

  .chat-view .rail-nav [data-view="chats"],
  .chat-view .rail-nav [data-view="directory"],
  .chat-view .rail-nav [data-view="features"],
  .chat-view .rail-nav #profileQuickBtn,
  .profile-bottom-nav button {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 50px !important;
    min-width: 52px !important;
    min-height: 50px !important;
    max-width: 52px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #3c4a42 !important;
    line-height: 1 !important;
    transform: none !important;
  }

  .chat-view .rail-nav [data-view="chats"].active,
  .chat-view .rail-nav [data-view="directory"].active,
  .chat-view .rail-nav [data-view="features"].active,
  .chat-view .rail-nav #profileQuickBtn.active,
  .profile-bottom-nav button.active {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .chat-view .rail-nav .rail-icon,
  .profile-bottom-nav button span {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Material Symbols Outlined" !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24 !important;
    transform: none !important;
  }

  .chat-view .rail-nav [data-view="chats"].active .rail-icon,
  .chat-view .rail-nav [data-view="directory"].active .rail-icon,
  .chat-view .rail-nav [data-view="features"].active .rail-icon,
  .chat-view .rail-nav #profileQuickBtn.active .rail-icon,
  .profile-bottom-nav button.active span {
    color: var(--lumina-primary) !important;
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24 !important;
  }
}

/* v347: stable feature/profile nav and flat article note editor window. */
@media (max-width: 760px) {
  .chat-view .rail-nav,
  .chat-view:not(.is-chat-open) .rail-nav,
  .chat-view.is-chat-open .rail-nav {
    box-sizing: border-box !important;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom)) !important;
    gap: 0 !important;
  }

  .chat-view .rail-nav [data-view="chats"],
  .chat-view .rail-nav [data-view="directory"],
  .chat-view .rail-nav [data-view="features"],
  .chat-view .rail-nav #profileQuickBtn {
    padding: 0 !important;
  }
}

/* v351: make the profile modal bottom nav use the exact mobile rail grid. */
@media (max-width: 760px) {
  .chat-view .rail-nav {
    align-content: center !important;
  }

  #profileBottomNav.profile-bottom-nav.rail-nav {
    box-sizing: border-box !important;
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-items: center !important;
    align-content: center !important;
    justify-content: stretch !important;
    gap: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(70px + env(safe-area-inset-bottom)) !important;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom)) !important;
  }

  #profileBottomNav.profile-bottom-nav.rail-nav > .rail-button {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-content: center !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 52px !important;
    height: 50px !important;
    min-width: 52px !important;
    min-height: 50px !important;
    max-width: 52px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #profileBottomNav.profile-bottom-nav.rail-nav > .rail-button > .rail-icon {
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* v352: stable chat selection, WeChat-like media cards, mobile list actions, and switch controls. */
.message-bubble.has-media-card {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  gap: 6px !important;
}

.message.mine .message-bubble.has-media-card,
.message:not(.mine) .message-bubble.has-media-card {
  background: transparent !important;
  box-shadow: none !important;
}

.message-bubble.has-media-card .message-caption {
  width: fit-content;
  max-width: 100%;
  margin-top: 4px;
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--message-in);
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.1);
}

.message.mine .message-bubble.has-media-card .message-caption {
  margin-left: auto;
  background: var(--message-out);
}

.message.mine .message-bubble.has-media-card {
  justify-self: end !important;
}

.message:not(.mine) .message-bubble.has-media-card {
  justify-self: start !important;
}

.message-bubble.has-media-card .message-media-button,
.message-bubble.has-media-card .message-media {
  width: fit-content;
  max-width: min(360px, 100%) !important;
}

.message-bubble.has-media-card .message-media-button {
  display: grid !important;
  justify-items: inherit;
}

@media (max-width: 760px) {
  .chat-view:not(.is-chat-open) .list-head-main .head-actions,
  .chat-view .list-head-main .head-actions {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 40px !important;
    align-items: center !important;
    justify-content: end !important;
    gap: 10px !important;
    min-width: 90px !important;
    height: 40px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .chat-view:not(.is-chat-open) .list-head-main .global-lock-button:not(.hidden),
  .chat-view:not(.is-chat-open) .list-head-main .list-create-trigger:not(.hidden),
  .chat-view .list-head-main .global-lock-button:not(.hidden),
  .chat-view .list-head-main .list-create-trigger:not(.hidden) {
    display: grid !important;
    place-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

.switch-row input[type="checkbox"] {
  position: relative !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 46px !important;
  height: 26px !important;
  min-width: 46px !important;
  min-height: 26px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #dce5e1 !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08) !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease, box-shadow 0.18s ease !important;
}

.switch-row input[type="checkbox"]::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18) !important;
  transition: transform 0.18s ease !important;
}

.switch-row input[type="checkbox"]:checked {
  background: var(--brand) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 128, 96, 0.12) !important;
}

.switch-row input[type="checkbox"]:checked::after {
  transform: translateX(20px) !important;
}

.switch-row input[type="checkbox"]:disabled {
  cursor: not-allowed !important;
  opacity: 0.55 !important;
}

/* v355: stable profile switches and full-width mobile profile nav. */
.profile-switch-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.switch-row input.switch-native[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.switch-row input.switch-native[type="checkbox"]::after {
  content: none !important;
}

.switch-control {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #dce5e1;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.switch-control::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
  transition: transform 0.18s ease;
}

.switch-row input.switch-native[type="checkbox"]:checked + .switch-control {
  background: var(--brand);
  box-shadow: inset 0 0 0 1px rgba(0, 128, 96, 0.12);
}

.switch-row input.switch-native[type="checkbox"]:checked + .switch-control::after {
  transform: translateX(20px);
}

.switch-row input.switch-native[type="checkbox"]:focus-visible + .switch-control {
  outline: 2px solid rgba(0, 128, 96, 0.26);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  #profileModal.modal {
    overflow: hidden !important;
  }

  #profileModal.modal > .profile-panel {
    padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  }

  #profileForm {
    padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
  }

  #profileBottomNav.profile-bottom-nav.rail-nav {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    width: 100vw !important;
    width: 100dvw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: calc(70px + env(safe-area-inset-bottom)) !important;
    min-height: calc(70px + env(safe-area-inset-bottom)) !important;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 -10px 26px rgba(15, 23, 42, 0.08) !important;
    transform: none !important;
    z-index: 23000 !important;
  }

  #profileBottomNav.profile-bottom-nav.rail-nav > .rail-button {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    grid-column: auto !important;
    width: 52px !important;
    height: 50px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 52px !important;
  }

  #profileBottomNav.profile-bottom-nav.rail-nav > .rail-button > .rail-icon {
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 1 !important;
  }
}

/* v359: keep image/video/note cards next to the sender avatar instead of stretching the row. */
.message-content-row.has-media-card-row {
  box-sizing: border-box !important;
  width: -webkit-fit-content !important;
  width: fit-content !important;
  max-width: min(calc(100% - 52px), 420px) !important;
}

.message-content-row.has-media-card-row .message-stack,
.message-content-row.has-media-card-row .message-bubble.has-media-card {
  box-sizing: border-box !important;
  width: -webkit-fit-content !important;
  width: fit-content !important;
  max-width: min(360px, calc(100vw - 96px)) !important;
}

.message.mine .message-content-row.has-media-card-row {
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.message:not(.mine) .message-content-row.has-media-card-row {
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.message-content-row.has-media-card-row .message-media-button,
.message-content-row.has-media-card-row .message-media {
  width: auto !important;
  max-width: min(360px, calc(100vw - 96px)) !important;
}

@media (max-width: 760px) {
  .chat-view.is-chat-open .message-content-row.has-media-card-row {
    max-width: calc(100vw - 72px) !important;
  }

  .chat-view.is-chat-open .message-content-row.has-media-card-row .message-stack,
  .chat-view.is-chat-open .message-content-row.has-media-card-row .message-bubble.has-media-card,
  .chat-view.is-chat-open .message-content-row.has-media-card-row .message-media-button,
  .chat-view.is-chat-open .message-content-row.has-media-card-row .message-media {
    max-width: calc(100vw - 96px) !important;
  }
}

/* v360: match history modal chrome with notes, keep mobile iOS history modal fixed, and fold long text messages. */
#historyModal.modal {
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}

#historyModal.modal > .history-modal-panel {
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#historyModal.modal .history-modal-panel > header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 0 22px !important;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08) !important;
  background: #fff !important;
}

#historyModal.modal .history-modal-panel > header h2 {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

#historyModal.modal .history-modal-panel > header .close-modal {
  justify-self: end !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 14px !important;
}

#historyModal .history-search-form,
#historyModal .favorite-scope-tabs,
#historyModal .history-filter-tabs,
#historyModal .history-filter-row,
#historyModal .history-summary,
#historyModal .history-result-list,
#historyModal .history-load-more {
  box-sizing: border-box !important;
  margin-left: 22px !important;
  margin-right: 22px !important;
}

#historyModal .history-result-list {
  min-height: 0 !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}


.message-bubble.has-folded-text {
  position: relative !important;
  display: grid !important;
  gap: 0 !important;
}

.message-bubble.has-folded-text::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2.05em;
  left: 0;
  z-index: 1;
  height: 3.6em;
  border-radius: 0 0 7.5px 7.5px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--message-in) 82%);
  pointer-events: none;
}

.message.mine .message-bubble.has-folded-text::after {
  background: linear-gradient(to bottom, rgba(217, 253, 211, 0), var(--message-out) 82%);
}

.message-text-content.is-collapsed {
  display: -webkit-box !important;
  max-height: calc(1.52em * 10) !important;
  padding-bottom: 0.35em !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
}

.message-text-more {
  position: relative;
  z-index: 2;
  justify-self: start;
  width: fit-content;
  margin: 2px 0 0;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--brand-strong);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.message.mine .message-text-more {
  justify-self: end;
  color: #075e54;
}

@media (max-width: 760px) {
  #historyModal.modal {
    align-items: start !important;
    justify-items: center !important;
    place-items: start center !important;
    padding: calc(env(safe-area-inset-top) + 10px) 10px calc(env(safe-area-inset-bottom) + 10px) !important;
    overflow: hidden !important;
  }

  #historyModal.modal > .history-modal-panel {
    width: min(100%, calc(100vw - 20px)) !important;
    height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px) !important;
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px) !important;
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px) !important;
    border-radius: 18px !important;
  }

  #historyModal.modal .history-modal-panel > header {
    min-height: 58px !important;
    padding: 0 16px !important;
  }

  #historyModal.modal .history-modal-panel > header h2 {
    font-size: 20px !important;
  }

  #historyModal .history-search-form,
  #historyModal .favorite-scope-tabs,
  #historyModal .history-filter-tabs,
  #historyModal .history-filter-row,
  #historyModal .history-summary,
  #historyModal .history-result-list,
  #historyModal .history-load-more {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
}

/* v400: stable avatar crops, contact avatar preview, and folded-message fade. */
.avatar,
.message-avatar,
.conversation-avatar-wrap,
.conversation-avatar-wrap > .avatar,
#chatAvatar,
#profileAvatar,
#profileModalAvatar,
#contactInfoAvatar {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.avatar img,
.message-avatar img,
.conversation-avatar-wrap img,
#chatAvatar img,
#profileAvatar img,
#profileModalAvatar img,
#contactInfoAvatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

.conversation-avatar-wrap,
.conversation-avatar-wrap > .avatar {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
}

.conversation-item .conversation-avatar-wrap,
.conversation-item .conversation-avatar-wrap > .avatar {
  align-self: center !important;
  justify-self: start !important;
  contain: paint;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
}

.conversation-item .conversation-avatar-wrap img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

.message-avatar {
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
}

.avatar.mini {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
}

.request-row .avatar.mini,
.tag-contact-option .avatar,
.manage-member-row .avatar,
.member-option .avatar,
.meta-member .avatar,
.read-member .avatar {
  align-self: center !important;
  justify-self: start !important;
  contain: paint;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
}

.request-row .avatar.mini img,
.tag-contact-option .avatar img,
.manage-member-row .avatar img,
.member-option .avatar img,
.meta-member .avatar img,
.read-member .avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

.contact-profile-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(0, 121, 107, 0.1);
  border-radius: 16px;
  background: rgba(236, 243, 239, 0.72);
}

.contact-profile-avatar {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  aspect-ratio: 1 / 1 !important;
  border: 0;
  border-radius: 14px !important;
  cursor: default;
  font-size: 26px;
  font-weight: 900;
}

.contact-profile-avatar.is-clickable {
  cursor: zoom-in;
}

.contact-profile-avatar:disabled {
  opacity: 1;
}

.contact-profile-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 0 2px;
}

.contact-profile-copy strong {
  overflow: hidden;
  color: #111827;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-profile-copy small {
  overflow: hidden;
  color: #667781;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .contact-profile-card {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .contact-profile-avatar {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    font-size: 24px;
  }
}

/* v361: show an explicit loading state before voice playback starts or while buffering. */
.voice-loading[hidden] {
  display: none !important;
}

/* v363: make the chat-history modal use the same fixed chrome as other dialogs. */
#historyModal.modal {
  --history-modal-gap: 22px;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}

#historyModal.modal > .history-modal-panel {
  display: grid !important;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto !important;
  width: min(720px, calc(100vw - 40px)) !important;
  height: min(620px, calc(100dvh - 40px)) !important;
  max-height: calc(100dvh - 40px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: #fff !important;
}

#historyModal.modal .history-modal-head {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px !important;
  align-items: center !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0 16px 0 var(--history-modal-gap) !important;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08) !important;
  background: #fff !important;
}

#historyModal.modal .history-modal-head h2 {
  justify-self: start !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: #111827 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

#historyModal.modal .history-modal-head .close-modal {
  justify-self: end !important;
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: #f1f6f4 !important;
  color: var(--brand-strong) !important;
}

#historyModal .history-search-form,
#historyModal .favorite-scope-tabs,
#historyModal .history-filter-tabs,
#historyModal .history-filter-row,
#historyModal .history-summary,
#historyModal .history-result-list,
#historyModal .history-load-more {
  box-sizing: border-box !important;
  margin-left: var(--history-modal-gap) !important;
  margin-right: var(--history-modal-gap) !important;
}

#historyModal .history-search-form {
  margin-top: 14px !important;
}

#historyModal .history-result-list {
  min-height: 0 !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

@media (max-width: 760px) {
  #historyModal.modal {
    --history-modal-gap: 18px;
    align-items: start !important;
    justify-items: center !important;
    place-items: start center !important;
    padding: calc(env(safe-area-inset-top) + 10px) 10px calc(env(safe-area-inset-bottom) + 10px) !important;
    overflow: hidden !important;
  }

  #historyModal.modal > .history-modal-panel {
    width: min(100%, calc(100vw - 20px)) !important;
    height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px) !important;
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px) !important;
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px) !important;
    border-radius: 14px !important;
  }

  #historyModal.modal .history-modal-head {
    min-height: 56px !important;
    padding: 0 12px 0 var(--history-modal-gap) !important;
  }

  #historyModal.modal .history-modal-head h2 {
    font-size: 20px !important;
  }

  #historyModal.modal .history-modal-head .close-modal {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }
}

.voice-message.loading .voice-duration {
  display: none !important;
}

.voice-message.loading .voice-loading {
  display: inline-flex !important;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  color: rgba(32, 49, 42, 0.78);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.message.mine .voice-message.loading .voice-loading {
  color: rgba(23, 59, 41, 0.72);
}

.voice-loading-spinner {
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 999px;
  opacity: 0.85;
  animation: voice-loading-spin 0.72s linear infinite;
}

.voice-message.loading .voice-wave span {
  animation: voice-wave 0.9s ease-in-out infinite;
}

@keyframes voice-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/* v365: align merged-forward transcript reader with history/favorites modal chrome. */
#forwardBundleModal.modal {
  --history-modal-gap: 24px;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}

#forwardBundleModal.modal > .note-reader-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: min(720px, calc(100vw - 40px)) !important;
  height: min(620px, calc(100dvh - 40px)) !important;
  max-height: calc(100dvh - 40px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: #fff !important;
}

#forwardBundleModal.modal .history-modal-head {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px !important;
  align-items: center !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0 18px 0 var(--history-modal-gap) !important;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08) !important;
  background: #fff !important;
}

#forwardBundleModal.modal .history-modal-head h2 {
  justify-self: start !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: #111827 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

#forwardBundleModal.modal .history-modal-head .close-modal {
  justify-self: end !important;
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: #f1f6f4 !important;
  color: var(--brand-strong) !important;
}

#forwardBundleModal.modal .forward-bundle-body {
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 18px 24px 28px !important;
}

@media (max-width: 760px) {
  #forwardBundleModal.modal {
    --history-modal-gap: 18px;
    align-items: start !important;
    justify-items: center !important;
    place-items: start center !important;
    padding: calc(env(safe-area-inset-top) + 10px) 10px calc(env(safe-area-inset-bottom) + 10px) !important;
    overflow: hidden !important;
  }

  #forwardBundleModal.modal > .note-reader-panel {
    width: min(100%, calc(100vw - 20px)) !important;
    height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px) !important;
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px) !important;
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px) !important;
    border-radius: 14px !important;
  }

  #forwardBundleModal.modal .history-modal-head {
    min-height: 56px !important;
    padding-left: var(--history-modal-gap) !important;
    padding-right: 12px !important;
  }

  #forwardBundleModal.modal .history-modal-head h2 {
    font-size: 20px !important;
  }

  #forwardBundleModal.modal .history-modal-head .close-modal {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  #forwardBundleModal.modal .forward-bundle-body {
    padding: 18px 18px 24px !important;
  }
}

/* v363: final chat-history modal chrome guard, kept after later voice styles. */
#historyModal.modal {
  --history-modal-gap: 24px;
}

#historyModal.modal .history-modal-head {
  padding-left: var(--history-modal-gap) !important;
  padding-right: 18px !important;
}

@media (max-width: 760px) {
  #historyModal.modal {
    --history-modal-gap: 18px;
  }

  #historyModal.modal .history-modal-head {
    padding-left: var(--history-modal-gap) !important;
    padding-right: 12px !important;
  }
}

/* v367: final overrides for favorites/history height and media preview actions. */
#historyModal.modal > .history-modal-panel {
  grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr) auto !important;
}

#historyModal .history-summary {
  display: block !important;
  align-self: start !important;
  min-height: 0 !important;
  height: auto !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  padding: 0 !important;
  line-height: 1.35 !important;
}

#historyModal .history-result-list {
  align-self: stretch !important;
  min-height: 0 !important;
  height: auto !important;
}

.message-content-row.has-media-card-row .message-meta {
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.message-content-row.has-media-card-row .message-action-strip {
  max-width: 100% !important;
}

.image-preview-panel header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.image-preview-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.image-preview-actions .ghost-button {
  min-height: 34px;
  padding: 7px 14px;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* v368: keep media message action bars visible when an image is long-pressed or right-clicked. */
.message-content-row.has-media-card-row,
.message-content-row.has-media-card-row .message-stack {
  overflow: visible !important;
}

.message-content-row.has-media-card-row .message-stack {
  min-width: min(280px, calc(100vw - 96px)) !important;
}

.message-content-row.has-media-card-row .message-meta {
  min-width: min(280px, calc(100vw - 96px)) !important;
  overflow: visible !important;
}

.message-content-row.has-media-card-row .message-action-strip {
  min-width: min(260px, calc(100vw - 112px)) !important;
  max-width: min(360px, calc(100vw - 96px)) !important;
}

@media (max-width: 760px), (hover: none), (pointer: coarse) {
  .message-content-row.has-media-card-row .message-action-strip {
    min-width: max-content !important;
    max-width: calc(100vw - 32px) !important;
  }
}


/* v393: iOS safe-area spacing, centered mobile chat title, and richer emoji panel. */
@media (max-width: 760px) {
  .chat-view.is-chat-open,
  .chat-view.is-chat-open .chat-panel {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
  }

  .chat-view.is-chat-open .chat-panel {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  }

  .chat-view.is-chat-open .chat-head {
    position: relative !important;
    display: block !important;
    min-height: 58px !important;
    min-height: calc(58px + constant(safe-area-inset-top)) !important;
    min-height: calc(58px + env(safe-area-inset-top)) !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(17, 24, 39, 0.06) !important;
    background: rgba(248, 249, 250, 0.94) !important;
    box-shadow: none !important;
    isolation: isolate !important;
  }

  .chat-view.is-chat-open #chatAvatar,
  .chat-view.is-chat-open .chat-actions {
    display: none !important;
  }

  .chat-view.is-chat-open .mobile-back:not(.hidden) {
    position: absolute !important;
    top: 10px !important;
    top: calc(10px + constant(safe-area-inset-top)) !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
    left: 10px !important;
    left: calc(10px + constant(safe-area-inset-left)) !important;
    left: calc(10px + env(safe-area-inset-left)) !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .chat-view.is-chat-open .chat-title-area {
    position: absolute !important;
    top: 10px !important;
    top: calc(10px + constant(safe-area-inset-top)) !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    height: 38px !important;
    min-width: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    text-align: center !important;
    transform: none !important;
  }

  .chat-view.is-chat-open .chat-title-area h2 {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: min(220px, calc(100% - 196px)) !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--lumina-text, #111827) !important;
    font-size: 17px !important;
    font-weight: 850 !important;
    line-height: 22px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .chat-view.is-chat-open .chat-title-area p {
    display: none !important;
  }

  .chat-view.is-chat-open button,
  .chat-view.is-chat-open button *,
  .chat-view.is-chat-open .icon-button,
  .chat-view.is-chat-open .icon-button *,
  .chat-view.is-chat-open .mobile-back,
  .chat-view.is-chat-open .chat-lock-button,
  .chat-view.is-chat-open .chat-more-button,
  .chat-view.is-chat-open .composer-mode-badge,
  .chat-view.is-chat-open .quick-option-check,
  .chat-view.is-chat-open .quick-option-check *:not(input),
  .chat-view.is-chat-open .voice-speed-button,
  .rail-nav button,
  .rail-nav button *,
  .profile-bottom-nav button,
  .profile-bottom-nav button * {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  .chat-view.is-chat-open .chat-lock-button:not(.hidden) {
    position: absolute !important;
    top: 10px !important;
    top: calc(10px + constant(safe-area-inset-top)) !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
    right: 58px !important;
    right: calc(58px + constant(safe-area-inset-right)) !important;
    right: calc(58px + env(safe-area-inset-right)) !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 24px !important;
    line-height: 1 !important;
    text-align: center !important;
    -webkit-box-align: center;
    -webkit-box-pack: center;
  }

  .chat-view.is-chat-open .chat-more-button:not(.hidden) {
    position: absolute !important;
    top: 10px !important;
    top: calc(10px + constant(safe-area-inset-top)) !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
    right: 10px !important;
    right: calc(10px + constant(safe-area-inset-right)) !important;
    right: calc(10px + env(safe-area-inset-right)) !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .chat-view.is-chat-open .messages {
    padding-bottom: 10px !important;
  }

  .chat-view.is-chat-open .composer {
    padding: 10px 12px 28px 12px !important;
    padding:
      10px
      calc(12px + constant(safe-area-inset-right))
      calc(28px + constant(safe-area-inset-bottom))
      calc(12px + constant(safe-area-inset-left)) !important;
    padding:
      10px
      calc(12px + env(safe-area-inset-right))
      calc(28px + env(safe-area-inset-bottom))
      calc(12px + env(safe-area-inset-left)) !important;
    background: rgba(248, 249, 250, 0.96) !important;
  }

  .chat-view.is-chat-open .composer #emojiToggle,
  .chat-view.is-chat-open .composer #moreToggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  .chat-view.is-chat-open .composer #moreToggle {
    color: #5f6368 !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    text-align: center !important;
  }

  .chat-view.is-chat-open .emoji-picker {
    right: 12px !important;
    right: calc(12px + constant(safe-area-inset-right)) !important;
    right: calc(12px + env(safe-area-inset-right)) !important;
    bottom: 94px !important;
    bottom: calc(94px + constant(safe-area-inset-bottom)) !important;
    bottom: calc(94px + env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    left: calc(12px + constant(safe-area-inset-left)) !important;
    left: calc(12px + env(safe-area-inset-left)) !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: center !important;
    justify-items: center !important;
    max-height: 288px !important;
    max-height: min(288px, 46dvh) !important;
    padding: 10px !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .chat-view.is-chat-open .emoji-picker button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    font-size: 22px !important;
    line-height: 1 !important;
    text-align: center !important;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  }

  .chat-view.is-chat-open .voice-card {
    grid-template-columns: minmax(96px, var(--voice-width, 128px)) 38px !important;
    gap: 6px !important;
    max-width: calc(100vw - 104px) !important;
    max-width: min(276px, calc(100vw - 104px)) !important;
  }

  .chat-view.is-chat-open .voice-speed-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    font-size: 12px !important;
    font-variant-numeric: tabular-nums;
  }
}

/* v393: DOM-built icons for list-header lock and create actions. */
.list-head-main .global-lock-button,
.list-head-main .list-create-trigger {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: rgba(236, 243, 239, 0.92) !important;
  background-image: none !important;
  color: #24483e !important;
  box-shadow: none !important;
  overflow: visible !important;
  text-indent: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.list-head-main .global-lock-button.hidden,
.list-head-main .list-create-trigger.hidden {
  display: none !important;
}

.list-head-main .global-lock-button::before,
.list-head-main .global-lock-button::after,
.list-head-main .list-create-trigger::before,
.list-head-main .list-create-trigger::after,
#globalLockBtn.global-lock-button::before,
#globalLockBtn.global-lock-button::after,
#listCreateMenuBtn.list-create-trigger::before,
#listCreateMenuBtn.list-create-trigger::after {
  display: none !important;
  content: none !important;
}

.list-head-main .head-glyph,
#globalLockBtn .head-glyph,
#listCreateMenuBtn .head-glyph {
  position: relative !important;
  display: block !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  color: #24483e !important;
  text-indent: 0 !important;
  pointer-events: none !important;
  transform: none !important;
  box-sizing: border-box !important;
}

.list-head-main .head-lock-glyph {
  overflow: visible !important;
}

.list-head-main .head-lock-shackle,
.list-head-main .head-lock-body,
.list-head-main .head-lock-keyhole,
.list-head-main .head-plus-line {
  position: absolute !important;
  display: block !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
}

.list-head-main .head-lock-shackle {
  left: 6px !important;
  top: 2px !important;
  width: 12px !important;
  height: 10px !important;
  border: 2px solid #24483e !important;
  border-bottom: 0 !important;
  border-radius: 9px 9px 0 0 !important;
  background: transparent !important;
}

.list-head-main .head-lock-body {
  left: 4px !important;
  top: 10px !important;
  width: 16px !important;
  height: 13px !important;
  border-radius: 4px !important;
  background: #24483e !important;
}

.list-head-main .head-lock-keyhole {
  left: 50% !important;
  top: 4px !important;
  width: 3px !important;
  height: 6px !important;
  border-radius: 3px !important;
  background: #ecf3ef !important;
  transform: translateX(-50%) !important;
}

.list-head-main .head-plus-line {
  left: 50% !important;
  top: 50% !important;
  width: 16px !important;
  height: 3px !important;
  border-radius: 3px !important;
  background: #24483e !important;
  transform: translate(-50%, -50%) !important;
}

.list-head-main .head-plus-line-y {
  transform: translate(-50%, -50%) rotate(90deg) !important;
}

.list-head-main .global-lock-button.is-secure,
.list-head-main .list-create-trigger.active {
  background-color: #e8f8f2 !important;
  color: var(--brand-strong) !important;
}

@media (max-width: 760px) {
  .chat-view .list-head,
  .chat-view:not(.is-chat-open) .list-head {
    padding-top: 10px !important;
    padding-right: calc(12px + constant(safe-area-inset-right)) !important;
    padding-right: calc(12px + env(safe-area-inset-right)) !important;
    padding-left: calc(12px + constant(safe-area-inset-left)) !important;
    padding-left: calc(12px + env(safe-area-inset-left)) !important;
  }

  .chat-view .list-head-main .head-actions,
  .chat-view:not(.is-chat-open) .list-head-main .head-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .chat-view .list-head-main .global-lock-button:not(.hidden),
  .chat-view:not(.is-chat-open) .list-head-main .global-lock-button:not(.hidden),
  .chat-view .list-head-main .list-create-trigger,
  .chat-view:not(.is-chat-open) .list-head-main .list-create-trigger {
    display: inline-flex !important;
  }
}

#globalLockBtn.global-lock-button:not(.hidden),
#listCreateMenuBtn.list-create-trigger:not(.hidden),
.chat-view .list-head-main #globalLockBtn.global-lock-button:not(.hidden),
.chat-view .list-head-main #listCreateMenuBtn.list-create-trigger:not(.hidden),
.chat-view:not(.is-chat-open) .list-head-main #globalLockBtn.global-lock-button:not(.hidden),
.chat-view:not(.is-chat-open) .list-head-main #listCreateMenuBtn.list-create-trigger:not(.hidden) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  text-indent: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* v393: legacy WebView header layout fallback, independent of CSS grid. */
.chat-view .list-head-main,
.chat-view:not(.is-chat-open) .list-head-main {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 104px 0 44px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.chat-view .list-brand-title,
.chat-view:not(.is-chat-open) .list-brand-title {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  max-width: calc(100% - 116px) !important;
  height: auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--brand-strong) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) !important;
}

.chat-view .list-head-main .head-actions,
.chat-view:not(.is-chat-open) .list-head-main .head-actions {
  position: absolute !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 100% !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 0 0 -108px !important;
  padding: 0 !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-50%) !important;
}

/* v400: anchor list header actions to the viewport on legacy iOS.
   Some older WebViews resolve the title row wider than the screen; fixed
   positioning keeps lock/+ visible instead of following that oversized row. */
@media (max-width: 760px) {
  .chat-view.is-list-open .list-head-main .head-actions,
  .chat-view:not(.is-chat-open) .list-head-main .head-actions {
    position: fixed !important;
    top: calc(14px + constant(safe-area-inset-top)) !important;
    top: calc(14px + env(safe-area-inset-top)) !important;
    right: calc(24px + constant(safe-area-inset-right)) !important;
    right: calc(24px + env(safe-area-inset-right)) !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 2147483000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .chat-view.is-list-open .list-head-main .global-lock-button:not(.hidden),
  .chat-view.is-list-open .list-head-main .list-create-trigger,
  .chat-view:not(.is-chat-open) .list-head-main .global-lock-button:not(.hidden),
  .chat-view:not(.is-chat-open) .list-head-main .list-create-trigger {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    border-radius: 14px !important;
  }

  .chat-view.is-list-open .list-head-main .head-glyph,
  .chat-view:not(.is-chat-open) .list-head-main .head-glyph {
    transform: scale(0.9) !important;
    transform-origin: center !important;
  }
}

/* v400: disable native mobile context menus outside editable fields. */
@media (pointer: coarse) {
  html.zh-cn-ui body,
  html.zh-cn-ui button,
  html.zh-cn-ui .conversation-item,
  html.zh-cn-ui .message,
  html.zh-cn-ui .message *,
  html.zh-cn-ui .avatar,
  html.zh-cn-ui .quick-action-panel,
  html.zh-cn-ui .quick-action-panel *:not(input),
  html.zh-cn-ui .rail-nav,
  html.zh-cn-ui .rail-nav *,
  html.zh-cn-ui .profile-bottom-nav,
  html.zh-cn-ui .profile-bottom-nav * {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-drag: none !important;
  }

  html.zh-cn-ui input,
  html.zh-cn-ui textarea,
  html.zh-cn-ui [contenteditable="true"],
  html.zh-cn-ui [data-allow-native-context-menu] {
    -webkit-touch-callout: default !important;
    -webkit-user-select: text !important;
    user-select: text !important;
  }
}

/* v404: keep history/favorites rows inside the mobile dialog and show an explicit all-date state. */
#historyModal .history-date-field {
  position: relative !important;
  min-width: 0 !important;
}

#historyModal .history-date-field input[type="date"] {
  width: 100% !important;
  min-width: 0 !important;
  padding-right: 38px !important;
}

#historyModal .history-date-field:not(.has-value) input[type="date"] {
  color: transparent !important;
}

#historyModal .history-date-field:not(.has-value) input[type="date"]::-webkit-datetime-edit,
#historyModal .history-date-field:not(.has-value) input[type="date"]::-webkit-datetime-edit-fields-wrapper,
#historyModal .history-date-field:not(.has-value) input[type="date"]::-webkit-datetime-edit-text,
#historyModal .history-date-field:not(.has-value) input[type="date"]::-webkit-datetime-edit-month-field,
#historyModal .history-date-field:not(.has-value) input[type="date"]::-webkit-datetime-edit-day-field,
#historyModal .history-date-field:not(.has-value) input[type="date"]::-webkit-datetime-edit-year-field {
  color: transparent !important;
}

#historyModal .history-date-display {
  position: absolute !important;
  right: 38px !important;
  bottom: 0 !important;
  left: 12px !important;
  display: flex !important;
  align-items: center !important;
  height: 38px !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

#historyModal .history-date-field.has-value .history-date-display {
  display: none !important;
}

.history-result-preview > span:first-child {
  display: block !important;
  overflow: visible !important;
  white-space: pre-wrap !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

#historyModal .history-result {
  grid-template-columns: minmax(0, 36px) minmax(0, 1fr) minmax(0, 48px) !important;
  box-sizing: border-box !important;
  gap: 8px !important;
  max-width: 100% !important;
  overflow: visible !important;
}

#historyModal .history-result-copy,
#historyModal .history-result-head,
#historyModal .history-result-body,
#historyModal .history-result-preview {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

#historyModal .history-result-body {
  align-items: flex-start !important;
}

#historyModal .history-thumb {
  flex: 0 0 34px !important;
}

#historyModal .history-result-preview {
  flex: 1 1 auto !important;
}

#historyModal .history-result-preview > span:first-child,
#historyModal .history-result-full {
  display: block !important;
  max-width: 100% !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

#historyModal .history-result-time {
  max-width: 48px !important;
  overflow: hidden !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 620px) {
  #historyModal .history-date-display {
    height: 36px !important;
  }

  #historyModal .history-result {
    grid-template-columns: minmax(0, 36px) minmax(0, 1fr) minmax(0, 44px) !important;
    padding: 9px 6px !important;
  }

  #historyModal .history-result-time {
    max-width: 44px !important;
  }
}

/* v406: keep the mobile chat header pinned without fixing the whole panel on iOS keyboard focus. */
@media (max-width: 760px) {
  .chat-view.is-chat-open {
    height: var(--chat-viewport-height, 100dvh) !important;
    min-height: var(--chat-viewport-height, 100dvh) !important;
    max-height: var(--chat-viewport-height, 100dvh) !important;
    overflow: hidden !important;
  }

  .chat-view.is-chat-open .chat-panel {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    width: 100% !important;
    height: var(--chat-viewport-height, 100dvh) !important;
    min-height: var(--chat-viewport-height, 100dvh) !important;
    max-height: var(--chat-viewport-height, 100dvh) !important;
    overflow: hidden !important;
  }

  .chat-view.is-chat-open .chat-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 260 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transform: translateZ(0);
  }

  .chat-view.is-chat-open .messages {
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* v405: prevent iOS long-press browser selection on message UI; editable fields keep native text selection. */
@media (pointer: coarse) {
  .chat-view.is-chat-open .message,
  .chat-view.is-chat-open .message *,
  .chat-view.is-chat-open .message-text-content,
  .chat-view.is-chat-open .message-bubble,
  .chat-view.is-chat-open .message-action-strip,
  .chat-view.is-chat-open .forward-bundle-card,
  .chat-view.is-chat-open [data-voice-message] {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  .chat-view.is-chat-open input,
  .chat-view.is-chat-open textarea,
  .chat-view.is-chat-open [contenteditable="true"],
  .chat-view.is-chat-open [data-allow-native-context-menu] {
    -webkit-touch-callout: default !important;
    -webkit-user-select: text !important;
    user-select: text !important;
  }
}

/* v408: keep locked chat content in the message row when stream rows are absent. */
.chat-panel > #conversationStreamPanel.hidden {
  display: none !important;
}

.chat-view.is-chat-open .chat-panel {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

.chat-view.is-chat-open .chat-panel > #messageList {
  grid-row: 2 !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: stretch !important;
}

.chat-view.is-chat-open .chat-panel > #messageForm {
  grid-row: 3 !important;
}


.chat-view.is-group-content-locked .messages {
  position: relative !important;
  display: block !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.chat-view.is-group-content-locked .message-lock-state {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-content: center !important;
  justify-items: center !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 24px 18px !important;
  box-sizing: border-box !important;
}

/* v462: when the mobile keyboard opens, the message list and composer move as one panel. */
@media (max-width: 760px), (hover: none), (pointer: coarse) {
  .chat-view.is-chat-open {
    height: var(--chat-viewport-height, 100dvh) !important;
    min-height: var(--chat-viewport-height, 100dvh) !important;
    max-height: var(--chat-viewport-height, 100dvh) !important;
    overflow: hidden !important;
  }

  .chat-view.is-chat-open .chat-panel {
    height: var(--chat-viewport-height, 100dvh) !important;
    min-height: var(--chat-viewport-height, 100dvh) !important;
    max-height: var(--chat-viewport-height, 100dvh) !important;
    overflow: hidden !important;
  }

  .chat-view.is-chat-open .chat-panel > #messageList {
    min-height: 0 !important;
    overflow-y: auto !important;
    scroll-padding-bottom: calc(var(--chat-composer-height, 78px) + 16px) !important;
  }
}

/* v415: profile sound controls, square avatars, media tools, and stable voice composer. */
.profile-name-edit-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 260px);
  min-height: 34px;
  cursor: text;
}

.profile-name-edit-row .profile-name-input {
  width: min(var(--profile-name-width, 92px), 210px);
  min-width: 0;
  text-align: center;
}

.profile-name-edit-icon {
  position: absolute;
  top: 50%;
  left: calc(50% + (min(var(--profile-name-width, 92px), 210px) / 2) + 4px);
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
  font-family: "Material Symbols Outlined";
  font-size: 17px;
  font-weight: 600;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 20;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
}

.avatar-size-lock,
.avatar,
.message-avatar,
.conversation-avatar-wrap,
.conversation-avatar-wrap > .avatar,
.contact-profile-avatar,
.history-result-avatar,
.forward-bundle-avatar {
  box-sizing: border-box !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.avatar-size-lock img,
.avatar > img,
.message-avatar > img,
.conversation-avatar-wrap img,
.contact-profile-avatar > img,
.history-result-avatar > img,
.forward-bundle-avatar > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
}

.message-video-card,
.forward-bundle-image-card,
.forward-bundle-video-card {
  display: grid;
  gap: 8px;
  max-width: min(320px, 72vw);
}

.forward-bundle-image-card {
  display: inline-grid;
  justify-items: start;
  background: transparent;
}

.message-video-card .message-media,
.forward-bundle-image-card .message-media-button,
.forward-bundle-image-card .message-media,
.forward-bundle-video-card .message-media {
  width: 100%;
  border-radius: 12px;
}

.forward-bundle-image-card .message-media-button {
  display: block;
  width: fit-content;
  max-width: min(320px, 72vw);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.forward-bundle-image-card .message-media {
  display: block;
  width: auto;
  height: auto;
  max-width: min(320px, 72vw);
  max-height: min(420px, 60vh);
  object-fit: contain;
  background: transparent;
}

.message-video-card .message-media,
.forward-bundle-video-card .message-media {
  background: #0f172a;
}

.message-video-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding-top: 2px;
}

.message-video-forward,
.message-video-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 28px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.07);
  color: rgba(17, 24, 39, 0.78);
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 28px;
  text-decoration: none;
}

.message-video-save {
  background: rgba(0, 121, 107, 0.1);
  color: #00796b;
}

.message-video-forward:hover,
.message-video-save:hover {
  border: 0;
  background: rgba(0, 121, 107, 0.14);
  color: #00695c;
}

.contact-card-message {
  display: grid;
  gap: 8px;
  width: min(292px, 72vw);
  max-width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  padding: 10px;
  background: #fff;
  color: #111827;
  text-align: left;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  touch-action: manipulation;
}

.contact-card-message:hover {
  border-color: rgba(0, 121, 107, 0.24);
  background: #f8fffb;
}

.contact-card-main {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.contact-card-add-button {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
  background: #16c08a;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.contact-card-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
}

.contact-card-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.contact-card-copy small {
  color: #0b7d63;
  font-size: 11px;
  font-weight: 800;
}

.contact-card-copy strong,
.contact-card-copy em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-card-copy strong {
  color: #111827;
  font-size: 15px;
  font-style: normal;
}

.contact-card-copy em,
.contact-card-arrow {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.contact-recommend-button {
  justify-self: start;
  margin-top: -4px;
}

.contact-info-form.is-readonly-profile #contactDeleteBtn,
.contact-info-form.is-readonly-profile #contactBlockBtn,
.contact-info-form.is-readonly-profile button[type="submit"] {
  display: none !important;
}

.contact-info-form.is-readonly-profile #contactAddBtn:not(.hidden) {
  display: inline-flex !important;
}

.invite-card-message {
  display: grid;
  gap: 10px;
  width: min(288px, 72vw);
  max-width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  color: #111827;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.invite-card-copy {
  display: grid;
  gap: 3px;
}

.invite-card-copy small {
  color: #0b7d63;
  font-size: 11px;
  font-weight: 800;
}

.invite-card-copy strong {
  font-size: 15px;
}

.invite-card-copy em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.invite-card-qr {
  justify-self: center;
  width: min(176px, 52vw);
  height: min(176px, 52vw);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #fff;
  object-fit: contain;
}

.invite-card-qr-button {
  display: grid;
  place-items: center;
  justify-self: center;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
}

.invite-card-link {
  display: flex;
  justify-content: center;
  width: 100%;
  border: 0;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0, 121, 107, 0.08);
  color: #00796b;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.image-preview-actions {
  flex-wrap: wrap;
}

/* v463: full-screen WeChat-like image viewer with floating actions. */
.modal.image-preview-modal {
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
  background: #000 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.image-preview-modal .image-preview-panel {
  position: relative !important;
  display: block !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  color: #fff !important;
  box-shadow: none !important;
}

.image-preview-modal .image-preview-panel header {
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.image-preview-modal .image-preview-panel h2 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.image-preview-modal .image-preview-close {
  position: absolute !important;
  top: calc(14px + env(safe-area-inset-top)) !important;
  right: calc(14px + env(safe-area-inset-right)) !important;
  z-index: 10 !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(38, 38, 38, 0.62) !important;
  color: #fff !important;
  font-size: 28px !important;
  line-height: 1 !important;
  pointer-events: auto !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

.image-preview-modal .image-preview-actions {
  position: absolute !important;
  right: calc(18px + env(safe-area-inset-right)) !important;
  bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  z-index: 10 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  max-width: min(320px, calc(100vw - 36px)) !important;
  pointer-events: auto !important;
}

.image-preview-modal .image-preview-actions .image-preview-action {
  --image-preview-action-icon: none;
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(48, 48, 48, 0.66) !important;
  color: #fff !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

.image-preview-modal .image-preview-actions .image-preview-action::before {
  content: "" !important;
  display: block !important;
  width: 25px !important;
  height: 25px !important;
  background: currentColor !important;
  -webkit-mask: var(--image-preview-action-icon) center / contain no-repeat !important;
  mask: var(--image-preview-action-icon) center / contain no-repeat !important;
}

.image-preview-modal .image-preview-actions .image-preview-action.hidden {
  display: none !important;
}

#imagePreviewForwardBtn {
  --image-preview-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 4 21 11l-7 7v-4.2c-4.2.15-7.1 1.55-9 4.2.7-4.8 3.45-8.35 9-9.45V4Z'/%3E%3C/svg%3E");
}

#imagePreviewSaveBtn {
  --image-preview-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 4h2v8.2l3.2-3.2 1.4 1.4-5.6 5.6-5.6-5.6L7.8 9l3.2 3.2V4Zm-6 14h14v2H5v-2Z'/%3E%3C/svg%3E");
}

#imagePreviewScanBtn {
  --image-preview-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h6v6H4V4Zm2 2v2h2V6H6Zm8-2h6v6h-6V4Zm2 2v2h2V6h-2ZM4 14h6v6H4v-6Zm2 2v2h2v-2H6Zm8-2h2v2h-2v-2Zm4 0h2v2h-2v-2Zm-4 4h2v2h-2v-2Zm4 0h2v2h-2v-2Z'/%3E%3C/svg%3E");
}

#imagePreviewEditBtn {
  --image-preview-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m5 16.9 9.8-9.8 2.1 2.1-9.8 9.8H5v-2.1Zm11.2-11.2 1.4-1.4a1 1 0 0 1 1.4 0l.7.7a1 1 0 0 1 0 1.4l-1.4 1.4-2.1-2.1Z'/%3E%3C/svg%3E");
}

.image-preview-modal .image-preview-body {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}

.image-preview-modal .image-preview-body img {
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  box-shadow: none !important;
}

.image-preview-modal .image-preview-counter {
  bottom: calc(22px + env(safe-area-inset-bottom)) !important;
}

.image-edit-modal {
  align-items: center;
  justify-content: center;
}

.image-edit-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(920px, calc(100vw - 24px));
  height: min(760px, calc(100vh - 32px));
  border-radius: 18px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.image-edit-panel header,
.image-edit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.image-edit-actions {
  justify-content: flex-end;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  border-bottom: 0;
}

.image-edit-stage {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 12px;
  background: #0f172a;
  overflow: auto;
}

#imageEditCanvas {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  background: #ffffff;
  touch-action: none;
  cursor: crosshair;
}

@media (max-width: 760px) {
  .chat-view.is-chat-open .composer.is-voice-mode {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 38px 38px 38px !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .chat-view.is-chat-open .composer.is-voice-mode #voiceRecordBtn {
    grid-column: 3 !important;
  }

  .chat-view.is-chat-open .composer.is-voice-mode .voice-burn-toggle:not(.hidden) {
    grid-column: 1 !important;
    justify-self: stretch !important;
    width: 46px !important;
    min-width: 46px !important;
    padding-inline: 4px !important;
  }

  .chat-view.is-chat-open .composer.is-voice-mode .voice-hold-button:not(.hidden) {
    grid-column: 2 !important;
    justify-self: stretch !important;
    width: 100% !important;
  }

  .chat-view.is-chat-open .composer.is-voice-mode #emojiToggle {
    grid-column: 4 !important;
  }

  .chat-view.is-chat-open .composer.is-voice-mode #moreToggle {
    grid-column: 5 !important;
  }

  .chat-view.is-chat-open .composer.is-voice-mode #messageText,
  .chat-view.is-chat-open .composer.is-voice-mode #sendMessageBtn,
  .chat-view.is-chat-open .composer.is-voice-mode .text-burn-toggle {
    display: none !important;
  }
}

/* v416: avatar-badge-safe keeps bot/abnormal badges outside the cropped image. */
.avatar-badge-safe,
.avatar.is-bot,
.avatar.is-abnormal,
.message-avatar.is-bot,
.message-avatar.is-abnormal,
.conversation-avatar-wrap {
  overflow: visible !important;
}

.conversation-item .conversation-avatar-wrap,
.conversation-avatar-wrap {
  contain: layout !important;
}

.avatar.is-bot > img,
.avatar.is-abnormal > img,
.message-avatar.is-bot > img,
.message-avatar.is-abnormal > img,
.conversation-avatar-wrap > .avatar > img {
  border-radius: inherit !important;
}

/* v419: draw bot badges above avatar images so rounded image corners do not cut them. */
.avatar.is-bot,
.message-avatar.is-bot,
.conversation-avatar-wrap {
  isolation: isolate !important;
}

.avatar.is-bot::before,
.message-avatar.is-bot::before {
  content: none !important;
  display: none !important;
}

.avatar.is-bot > img,
.message-avatar.is-bot > img {
  position: relative !important;
  z-index: 1 !important;
}

.avatar.is-bot::after,
.message-avatar.is-bot::after {
  content: "机" !important;
  position: absolute !important;
  right: -5px !important;
  bottom: -5px !important;
  z-index: 30 !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  background: #0b7d63 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 4px 10px rgba(0, 121, 107, 0.24) !important;
  pointer-events: none !important;
}

.conversation-avatar-wrap > .avatar.is-bot::after {
  content: none !important;
  display: none !important;
}

.conversation-avatar-wrap > .conversation-security-icon.is-bot-badge {
  z-index: 40 !important;
  border-color: #fff !important;
  background: #0b7d63 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

.message-avatar.is-bot::after {
  right: -4px !important;
  bottom: -4px !important;
  width: 14px !important;
  height: 14px !important;
  border-width: 1.5px !important;
  font-size: 8px !important;
}

/* v417: keep the friend profile avatar image exactly square inside its card. */
.contact-profile-card {
  grid-template-columns: 58px minmax(0, 1fr) !important;
}

#contactInfoAvatar.contact-profile-avatar,
.contact-profile-avatar#contactInfoAvatar {
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  flex: 0 0 58px !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 14px !important;
}

#contactInfoAvatar.contact-profile-avatar > img,
.contact-profile-avatar#contactInfoAvatar > img {
  display: block !important;
  box-sizing: border-box !important;
  flex: 0 0 58px !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}


.bookmark-message-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: min(260px, 72vw);
  max-width: min(420px, 82vw);
  padding: 12px;
  border: 1px solid rgba(0, 121, 107, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.bookmark-message-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: rgba(0, 168, 132, 0.12);
  color: var(--lumina-primary, #00796b);
  font-family: "Material Symbols Outlined";
  font-size: 23px;
  font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24;
}

.bookmark-message-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.bookmark-message-copy strong,
.bookmark-message-copy small,
.bookmark-message-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
}

.bookmark-message-copy strong {
  color: var(--ink, #111827);
  font-size: 15px;
  font-weight: 850;
  white-space: nowrap;
}

.bookmark-message-copy small {
  color: var(--lumina-primary, #00796b);
  font-size: 13px;
  white-space: nowrap;
}

.bookmark-message-copy em {
  display: -webkit-box;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* v420: keep the voice keyboard switch inside the hold-to-talk button. */
@media (max-width: 760px) {
  .chat-view.is-chat-open .composer.is-voice-mode {
    position: relative !important;
    grid-template-columns: 46px minmax(0, 1fr) 38px 38px 38px !important;
    gap: 8px !important;
  }

  .chat-view.is-chat-open .composer.is-voice-mode #voiceRecordBtn {
    position: absolute !important;
    left: auto !important;
    right: calc(12px + 38px + 8px + 38px + 8px + env(safe-area-inset-right, 0px)) !important;
    top: 3px !important;
    z-index: 6 !important;
    grid-column: auto !important;
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 2px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("./ui-keyboard.png?v=144") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 25px 25px !important;
    color: var(--brand-strong, #00796b) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  .chat-view.is-chat-open .composer.is-voice-mode #voiceRecordBtn::before {
    content: none !important;
    display: none !important;
  }

  .chat-view.is-chat-open .composer.is-voice-mode .voice-hold-button:not(.hidden) {
    position: relative !important;
    grid-column: 2 / 4 !important;
    padding-right: 46px !important;
  }
}

/* v434: pin the voice burn toggle on iOS and let hold-to-talk fill the row. */
@media (max-width: 760px) {
  .chat-view.is-chat-open .composer.is-voice-mode {
    grid-template-columns: minmax(0, 1fr) 38px 38px !important;
    padding-left: calc(62px + env(safe-area-inset-left, 0px)) !important;
  }

  .chat-view.is-chat-open .composer.is-voice-mode .voice-burn-toggle:not(.hidden) {
    position: absolute !important;
    left: calc(12px + env(safe-area-inset-left, 0px)) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 4px !important;
  }

  .chat-view.is-chat-open .composer.is-voice-mode .voice-hold-button:not(.hidden) {
    grid-column: 1 / 2 !important;
    width: 100% !important;
    justify-self: stretch !important;
  }

  .chat-view.is-chat-open .composer.is-voice-mode #emojiToggle {
    grid-column: 2 !important;
  }

  .chat-view.is-chat-open .composer.is-voice-mode #moreToggle {
    grid-column: 3 !important;
  }
}

/* v435: keep voice burn as its own left-side column outside the hold button. */
@media (max-width: 760px) {
  .chat-view.is-chat-open .composer.is-voice-mode {
    grid-template-columns: 46px minmax(0, 1fr) 38px 38px !important;
    padding-left: calc(12px + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(12px + env(safe-area-inset-right, 0px)) !important;
  }

  .chat-view.is-chat-open .composer.is-voice-mode .voice-burn-toggle:not(.hidden) {
    position: static !important;
    grid-column: 1 !important;
    align-self: center !important;
    justify-self: stretch !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
  }

  .chat-view.is-chat-open .composer.is-voice-mode .voice-hold-button:not(.hidden) {
    grid-column: 2 !important;
    width: 100% !important;
    justify-self: stretch !important;
    padding-right: 46px !important;
  }

  .chat-view.is-chat-open .composer.is-voice-mode #voiceRecordBtn {
    right: calc(12px + env(safe-area-inset-right, 0px) + 38px + 8px + 38px + 8px) !important;
  }

  .chat-view.is-chat-open .composer.is-voice-mode #emojiToggle {
    grid-column: 3 !important;
  }

  .chat-view.is-chat-open .composer.is-voice-mode #moreToggle {
    grid-column: 4 !important;
  }
}

/* v450: keep legacy iOS form controls from stretching these compact buttons. */
@media (max-width: 760px) {
  .chat-view.is-chat-open .composer.is-voice-mode .voice-burn-toggle:not(.hidden) {
    display: inline-grid !important;
    grid-template-columns: 14px 18px !important;
    place-items: center !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 4px !important;
    box-sizing: border-box !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 5px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  .chat-view.is-chat-open .composer.is-voice-mode .voice-burn-toggle input {
    position: absolute !important;
    width: 1px !important;
    min-width: 1px !important;
    max-width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    max-height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .chat-view.is-chat-open .composer.is-voice-mode .voice-burn-toggle span {
    display: block !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: inherit !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  .profile-hero-card .profile-qr-entry {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    box-sizing: border-box !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: rgba(12, 124, 102, 0.08) !important;
    color: var(--brand-strong) !important;
    font-family: "Material Symbols Outlined" !important;
    font-size: 24px !important;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24 !important;
    line-height: 1 !important;
    text-align: center !important;
  }
}

/* v451: keep the desktop login visual from stretching into an ultra-wide banner. */
@media (min-width: 821px) {
  .auth-view {
    width: min(100%, 1240px) !important;
    max-width: 1240px !important;
    grid-template-columns: minmax(0, 720px) minmax(340px, 440px) !important;
    justify-content: center !important;
    align-items: start !important;
    gap: clamp(32px, 4vw, 64px) !important;
    padding-top: clamp(72px, 12vh, 132px) !important;
  }

  .auth-visual {
    width: 100% !important;
    max-width: 720px !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    justify-self: end !important;
  }

  .cipher-card {
    left: clamp(56px, 10%, 84px) !important;
    top: clamp(72px, 20%, 112px) !important;
    width: min(420px, calc(100% - 112px)) !important;
  }

  .signal-grid {
    right: clamp(52px, 9%, 76px) !important;
    bottom: clamp(48px, 14%, 72px) !important;
  }
}

/* v467: image collections must show full thumbnails, overriding generic media-card sizing. */
.message-content-row.has-media-card-row .message-bubble.has-image-collection,
.message-content-row.has-media-card-row .message-bubble.encrypted.has-image-collection {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.message-content-row.has-media-card-row .message-bubble.has-image-collection .image-collection-fan .image-collection-item,
.message-content-row.has-media-card-row .message-bubble.has-image-collection .image-collection-fan .secure-attachment,
.message-content-row.has-media-card-row .message-bubble.has-image-collection .image-collection-fan .secure-image-tile,
.message-content-row.has-media-card-row .message-bubble.has-image-collection .image-collection-fan .message-media-button,
.message-content-row.has-media-card-row .message-bubble.has-image-collection .image-collection-fan .message-media {
  box-sizing: border-box !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.message-content-row.has-media-card-row .message-bubble.has-image-collection .image-collection-fan .message-media-button,
.message-content-row.has-media-card-row .message-bubble.has-image-collection .image-collection-fan .secure-attachment,
.message-content-row.has-media-card-row .message-bubble.has-image-collection .image-collection-fan .secure-image-tile {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}

.message-content-row.has-media-card-row .message-bubble.has-image-collection .image-collection-fan .message-media {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff !important;
}