:root {
  --primary: #4854e8;
  --primary-dark: #3944d6;
  --primary-soft: #eef0ff;
  --primary-glow: rgba(72, 84, 232, 0.22);
  --ink: #17192f;
  --muted: #8e93a6;
  --muted-2: #b8bcc9;
  --surface: #ffffff;
  --canvas: #f6f7fb;
  --line: #eceef5;
  --success: #25c55a;
  --danger: #f04f5f;
  --warning: #f3a83b;
  --shadow: 0 20px 65px rgba(30, 34, 73, 0.14);
  --soft-shadow: 0 8px 28px rgba(38, 42, 80, 0.08);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --header-height: 72px;
  --nav-height: 78px;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; min-height: 100%; margin: 0; }
html { height: 100%; overflow: hidden; background: #eef0f7; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  max-width: 100vw;
  min-height: 100dvh;
  overflow: hidden;
  color: var(--ink);
  background: linear-gradient(150deg, #f5f6fb 0%, #ebeefa 100%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}
html.is-screenshot-protected.is-screenshot-protection-obscured body::after {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  content: "\1F512";
  place-items: center;
  color: var(--primary);
  background: var(--canvas);
  font-size: 42px;
}
.i18n-loader { display: none; }
html.i18n-pending .i18n-loader,
html.i18n-updating .i18n-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--canvas);
}
html.i18n-pending .i18n-loader span,
html.i18n-updating .i18n-loader span {
  width: 34px;
  height: 34px;
  border: 3px solid #dfe2ff;
  border-block-start-color: var(--primary);
  border-radius: 50%;
  animation: localeLoader .8s linear infinite;
}
html.i18n-pending .site-backdrop,
html.i18n-pending .app-shell,
html.i18n-pending .modal-layer,
html.i18n-pending .confirm-layer,
html.i18n-pending .toast-region,
html.i18n-pending .call-layer,
html.i18n-updating .site-backdrop,
html.i18n-updating .app-shell,
html.i18n-updating .modal-layer,
html.i18n-updating .confirm-layer,
html.i18n-updating .toast-region,
html.i18n-updating .call-layer { visibility: hidden !important; }
@keyframes localeLoader { to { transform: rotate(360deg); } }
button, input, textarea { color: inherit; font: inherit; }
button { border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(72, 84, 232, .25); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .55; }
input, textarea { border: 0; outline: 0; }
[hidden] { display: none !important; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.site-backdrop { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 999px; filter: blur(2px); opacity: .55; }
.orb-one { width: 420px; height: 420px; inset-block-start: -170px; inset-inline-start: -120px; background: radial-gradient(circle, #dfe2ff 0%, rgba(223,226,255,0) 70%); }
.orb-two { width: 520px; height: 520px; inset-block-end: -220px; inset-inline-end: -150px; background: radial-gradient(circle, #d9f4ef 0%, rgba(217,244,239,0) 70%); }

.app-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  height: min(940px, calc(100dvh - 32px));
  min-height: 620px;
  margin: 16px auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: var(--radius-xl);
  background: var(--canvas);
  box-shadow: var(--shadow);
}

.ghost-button, .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
}
.icon-button { width: 42px; height: 42px; border-radius: 13px; color: var(--ink); transition: background .2s, color .2s, transform .2s; }
.icon-button:hover { color: var(--primary); background: var(--primary-soft); }
.icon-button:active { transform: scale(.94); }
.primary-button, .secondary-button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
  border-radius: 17px;
  font-weight: 700;
  transition: transform .18s, box-shadow .18s, background .18s;
}
.primary-button { color: #fff; background: linear-gradient(135deg, #5260ee, #3e48dc); box-shadow: 0 12px 24px rgba(72,84,232,.22); }
.primary-button:hover { box-shadow: 0 15px 30px rgba(72,84,232,.3); transform: translateY(-1px); }
.primary-button:active { box-shadow: 0 6px 14px rgba(72,84,232,.2); transform: translateY(1px); }
.primary-button.compact, .secondary-button.compact { min-height: 46px; border-radius: 14px; }
.secondary-button { color: var(--ink); background: #f0f1f6; box-shadow: none; }
.secondary-button:hover { background: #e8eaf1; }

/* Authentication */
.auth-view { height: 100%; overflow: auto; background: linear-gradient(180deg, #f8f9ff 0%, #fff 46%, #fff 100%); scrollbar-width: none; }
.auth-view::-webkit-scrollbar { display: none; }
.auth-topbar { display: flex; align-items: center; justify-content: space-between; padding: max(24px, env(safe-area-inset-top)) 30px 0; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-size: 20px; font-weight: 800; letter-spacing: -.4px; text-decoration: none; }
.brand-mark { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #5965f0, #3f49dd); box-shadow: 0 8px 18px var(--primary-glow); }
.brand-mark svg { width: 23px; height: 23px; stroke-width: 1.7; }
.language-trigger { gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid #e8eaf3; border-radius: 13px; color: #6d7287; background: rgba(255,255,255,.75); font-size: 13px; font-weight: 650; }
.language-trigger svg { width: 18px; height: 18px; color: var(--primary); }
.language-trigger #auth-language-label { display: inline-flex; min-width: 0; align-items: center; gap: 7px; }
.language-trigger #auth-language-label > span { overflow: hidden; max-width: 110px; text-overflow: ellipsis; white-space: nowrap; }
.current-language-flag { display: block; flex: 0 0 22px; width: 22px; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid rgba(18,23,48,.1); border-radius: 4px; box-shadow: 0 1px 2px rgba(18,23,48,.08); }
.auth-content { width: min(100%, 430px); margin: 0 auto; padding: 32px 22px 50px; }
.auth-hero { position: relative; width: 124px; height: 98px; margin: 0 auto 16px; }
.hero-bubble { position: absolute; display: grid; place-items: center; color: #fff; box-shadow: 0 18px 35px rgba(72,84,232,.25); }
.bubble-large { width: 76px; height: 70px; inset: 2px auto auto 10px; border-radius: 26px 26px 26px 9px; background: linear-gradient(145deg, #5c68ef, #3f48db); transform: rotate(-4deg); }
.bubble-large svg { width: 38px; height: 38px; }
.bubble-small { width: 51px; height: 45px; inset: 43px 7px auto auto; grid-auto-flow: column; gap: 4px; border: 5px solid #f8f9ff; border-radius: 18px 18px 7px 18px; background: #26c99a; box-shadow: 0 12px 24px rgba(38,201,154,.22); }
.bubble-small span { width: 4px; height: 4px; border-radius: 50%; background: #fff; }
.auth-panel { animation: panelIn .35s ease both; }
@keyframes panelIn { from { transform: translateY(8px); } to { transform: none; } }
.auth-heading { margin-block-end: 34px; text-align: center; }
.eyebrow { display: inline-block; margin-block-end: 7px; color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.auth-heading h1 { margin: 0; color: #3443dd; font-size: clamp(30px, 7vw, 38px); line-height: 1.2; letter-spacing: -.8px; }
.auth-heading p { margin: 12px 0 0; color: var(--muted); font-size: 15px; }
.auth-form { display: grid; gap: 15px; }
.auth-field { display: grid; gap: 6px; }
.input-field { display: flex; min-height: 62px; align-items: center; gap: 14px; padding: 0 17px; border: 1.5px solid transparent; border-radius: 19px; background: #fff; box-shadow: var(--soft-shadow); transition: border .2s, box-shadow .2s; }
.input-field:focus-within { border-color: #606bf0; box-shadow: 0 10px 30px rgba(72,84,232,.12); }
.auth-field.has-error .input-field { border-color: var(--danger); box-shadow: 0 8px 24px rgba(255, 80, 94, .12); }
.field-error { margin: 0 9px; color: var(--danger); font-size: 12px; line-height: 1.35; }
.auth-form .login-error { margin: 0 9px; color: var(--danger); font-size: 12px; font-weight: 650; line-height: 1.35; }
.auth-form .login-error[hidden] { display: none; }
.input-field > svg { flex: 0 0 auto; color: var(--primary); }
.input-field input { width: 100%; min-width: 0; padding: 17px 0; background: transparent; font-size: 17px; }
.input-field input::placeholder { color: #9296a5; }
.remembered-account-picker { position: relative; z-index: 3; }
.remembered-account-toggle { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 11px; color: #8f94a6; background: transparent; }
.remembered-account-toggle:hover { color: var(--primary); background: var(--primary-soft); }
.remembered-account-toggle svg { width: 19px; height: 19px; transform: rotate(90deg); transition: transform .18s; }
.remembered-account-toggle[aria-expanded="true"] svg { transform: rotate(-90deg); }
.remembered-account-menu { position: absolute; inset-block-start: calc(100% + 8px); inset-inline: 0; z-index: 20; display: grid; max-height: 224px; gap: 3px; overflow-y: auto; padding: 7px; border: 1px solid #e7e9f2; border-radius: 17px; background: #fff; box-shadow: 0 18px 40px rgba(31,36,72,.16); }
.remembered-account-option { display: flex; width: 100%; min-width: 0; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 12px; color: var(--ink); background: transparent; text-align: start; }
.remembered-account-option:hover, .remembered-account-option:focus-visible { background: var(--primary-soft); color: var(--primary); }
.remembered-account-option svg { width: 19px; height: 19px; flex: 0 0 19px; }
.remembered-account-option span { overflow: hidden; font-size: 15px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.password-toggle { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: #8f94a6; background: transparent; }
.password-toggle:hover { color: var(--primary); background: var(--primary-soft); }
.password-toggle svg { width: 20px; height: 20px; }
.forgot-password-row { display: flex; justify-content: flex-end; margin-block-start: -8px; }
.forgot-password-row button { padding: 3px 5px; color: var(--primary); background: transparent; font-size: 13px; font-weight: 750; }
.forgot-password-row button:hover { text-decoration: underline; }
.privacy-consent { display: flex; align-items: flex-start; gap: 9px; padding: 1px 5px 0; color: #777c8f; font-size: 13px; line-height: 1.55; }
.privacy-consent input { width: 18px; height: 18px; flex: 0 0 18px; margin: 1px 0 0; accent-color: var(--primary); cursor: pointer; }
.privacy-consent-copy { min-width: 0; }
.privacy-consent-copy label { cursor: pointer; }
.privacy-consent-copy a { color: var(--primary); font-weight: 700; text-decoration: none; }
.privacy-consent-copy a:hover { text-decoration: underline; }
.auth-form .primary-button { width: 100%; margin-block-start: 5px; }
.auth-switch { margin: 24px 0 0; color: #777c8f; text-align: center; }
.auth-switch button { padding: 4px 7px; color: var(--primary); background: transparent; font-weight: 750; }

/* Main application */
.main-view { position: relative; display: grid; width: 100%; min-width: 0; height: 100%; grid-template-rows: var(--header-height) minmax(0, 1fr) var(--nav-height); overflow: hidden; background: var(--canvas); }
.privacy-calculator { position: relative; width: 100%; height: 100%; min-height: 0; padding: max(12px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); overflow: hidden; background: #f4f4f4; color: #111; font-family: "Segoe UI", system-ui, sans-serif; user-select: none; }
.calculator-header { display: flex; height: 52px; align-items: center; gap: 16px; padding-inline: 8px; font-size: 23px; }
.calculator-header strong { font-size: 24px; font-weight: 700; }
.calculator-header-spacer { flex: 1; }
.calculator-icon-button { width: 38px; height: 38px; padding: 0; border: 0; background: transparent; color: #222; font-size: 25px; line-height: 1; }
.calculator-history { display: grid; width: 38px; height: 38px; place-items: center; font-size: 30px; transform: rotate(20deg); }
.calculator-display { display: flex; height: min(20dvh, 172px); min-height: 110px; align-items: flex-end; justify-content: flex-end; overflow: hidden; padding: 10px 18px 24px; font-size: clamp(46px, 10vw, 72px); font-weight: 400; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.calculator-memory { display: grid; height: 42px; grid-template-columns: repeat(6, 1fr); align-items: center; color: #333; font-size: 15px; text-align: center; }
.calculator-memory span:nth-child(-n+2), .calculator-memory span:last-child { color: #999; }
.calculator-keypad { display: grid; height: calc(100% - min(20dvh, 172px) - 94px); min-height: 390px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 4px; }
.calculator-keypad button { min-width: 0; min-height: 0; border: 1px solid #ddd; border-radius: 5px; background: #fafafa; color: #171717; box-shadow: 0 1px 2px rgba(0,0,0,.12); font: inherit; font-size: clamp(18px, 4vw, 27px); }
.calculator-keypad button:nth-child(n+9):not(:nth-child(4n)), .calculator-keypad button:nth-child(22) { background: #fff; font-weight: 600; }
.calculator-keypad button:active { background: #e8e8e8; }
.calculator-keypad .calculator-equals { border-color: #0867a8; background: #0867a8; color: #fff; font-size: 31px; }
.calculator-keypad .calculator-equals:active { background: #07598f; }
.calculator-keypad.is-verifying { pointer-events: none; opacity: .86; }
.main-view.is-subpage { grid-template-rows: var(--header-height) 1fr; }
.main-view.is-subpage .bottom-nav { display: none; }
.app-header { z-index: 5; display: grid; grid-template-columns: 96px minmax(0,1fr) 96px; align-items: center; padding: max(8px, env(safe-area-inset-top)) 13px 4px; border-block-end: 1px solid rgba(235,237,244,.7); background: rgba(255,255,255,.9); backdrop-filter: blur(16px); }
.header-title-wrap { min-width: 0; text-align: center; }
.header-title-wrap h1 { overflow: hidden; margin: 0; font-size: 21px; font-weight: 750; letter-spacing: -.35px; text-overflow: ellipsis; white-space: nowrap; }
.chat-header-copy-name { display: inline-flex; max-width: 100%; align-items: center; justify-content: center; padding: 0 2px; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; font: inherit; letter-spacing: inherit; }
.chat-header-copy-name:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.chat-header-title-identity { display: inline-flex; max-width: 100%; align-items: center; justify-content: center; gap: 6px; vertical-align: top; }
.chat-header-title-identity > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.chat-header-title-identity .user-identity-badge { flex: 0 0 auto; }
.header-subtitle { display: block; overflow: hidden; margin-block-start: 1px; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.header-subtitle.is-activity { color: var(--primary); font-weight: 700; }
.header-side { display: flex; min-width: 0; align-items: center; }
.header-actions { justify-content: flex-end; }
.chat-info-avatar-button { padding: 1px; }
.chat-info-avatar-button:hover { background: transparent; }
.header-start { justify-content: flex-start; gap: 4px; }
.chat-header-unread-badge { flex: 0 0 auto; pointer-events: none; }
.page-content { position: relative; width: 100%; min-width: 0; min-height: 0; overflow: hidden; }
.content-scroll { height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d7d9e4 transparent; }
.content-inner { padding: 16px 14px 28px; }
.chat-folder-bar { display: flex; min-width: 0; align-items: flex-start; gap: 8px; margin: -2px 0 13px; }
.chat-folder-tabs { display: flex; min-width: 0; flex: 1 1 auto; gap: 8px; overflow-x: auto; padding: 2px 1px 5px; overscroll-behavior-x: contain; scrollbar-width: thin; touch-action: pan-x pan-y; cursor: grab; }
.chat-folder-tabs.is-dragging { cursor: grabbing; user-select: none; }
.chat-folder-tab { display: inline-flex; flex: 0 0 auto; min-height: 38px; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid #e6e8f1; border-radius: 14px; color: var(--muted); background: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.chat-folder-tab svg { width: 17px; height: 17px; }
.chat-folder-tab:hover { border-color: #cdd2f7; background: #fafaff; }
.chat-folder-tab.is-active { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.chat-folder-manage { flex: 0 0 38px; width: 38px; justify-content: center; padding-inline: 9px; color: var(--primary); }
.bottom-nav { z-index: 8; display: grid; grid-template-columns: repeat(4, 1fr); padding: 7px 8px max(7px, env(safe-area-inset-bottom)); border-block-start: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(16px); }
.nav-item { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 14px; color: #7b8092; background: transparent; font-size: 11px; transition: color .2s, background .2s; }
.nav-item svg { width: 25px; height: 25px; stroke-width: 1.75; }
.nav-item.is-active { color: var(--primary); font-weight: 700; }
.nav-item.is-active::before { position: absolute; width: 42px; height: 32px; inset-block-start: 3px; z-index: -1; border-radius: 13px; background: var(--primary-soft); content: ""; }
.nav-notice { position: absolute; display: grid; min-width: 18px; height: 18px; inset-block-start: 0; inset-inline-start: calc(50% + 7px); z-index: 2; place-items: center; padding: 0 4px; border: 2px solid #fff; border-radius: 999px; color: #fff; background: var(--danger); box-shadow: 0 3px 8px rgba(240,79,95,.28); font-size: 9px; font-style: normal; font-weight: 800; line-height: 1; pointer-events: none; }

.search-box { display: flex; height: 48px; align-items: center; gap: 10px; margin-block-end: 13px; padding: 0 14px; border: 1px solid #ebedf4; border-radius: 15px; color: var(--muted); background: #fff; box-shadow: 0 5px 18px rgba(40,45,80,.04); }
.search-box svg { width: 20px; height: 20px; }
.search-box input { width: 100%; min-width: 0; background: transparent; }
.search-box input::placeholder { color: #a1a5b4; }
.add-friend-page { height: 100%; overflow: hidden; background: var(--canvas); }
.add-friend-searchbar { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-block-end: 1px solid var(--line); background: #fff; }
.add-friend-searchbox { display: flex; min-width: 0; height: 46px; flex: 1; align-items: center; gap: 9px; padding: 0 14px; border: 1px solid #eceef4; border-radius: 18px; color: #adb1bf; background: #f7f7fa; transition: border .2s, background .2s, box-shadow .2s; }
.add-friend-searchbox:focus-within { border-color: #7882f3; background: #fff; box-shadow: 0 0 0 3px rgba(82,96,238,.12); }
.add-friend-searchbox svg { flex: 0 0 19px; width: 19px; height: 19px; }
.add-friend-searchbox input { min-width: 0; width: 100%; background: transparent; font-size: 15px; }
.add-friend-searchbox input::placeholder { color: #969aaa; }
.add-friend-cancel { flex: 0 0 auto; padding: 9px 2px; color: var(--ink); background: transparent; font-size: 14px; }
.add-friend-results { height: calc(100% - 75px); overflow-x: hidden; overflow-y: auto; padding: 14px; overscroll-behavior: contain; }
.add-friend-result-list { overflow: hidden; border: 1px solid #eef0f5; border-radius: 20px; background: #fff; box-shadow: 0 8px 25px rgba(37,41,74,.045); }
.add-friend-result { display: flex; min-height: 80px; align-items: center; gap: 13px; padding: 13px 14px; }
.add-friend-result + .add-friend-result { border-block-start: 1px solid #f0f1f6; }
.add-friend-result > .primary-button, .add-friend-result > .secondary-button { flex: 0 0 auto; }
.add-friend-empty { display: grid; justify-items: center; gap: 8px; padding: 80px 24px; color: var(--muted); text-align: center; }
.add-friend-empty > svg { width: 38px; height: 38px; margin-block-end: 5px; color: #b0b4c2; }
.add-friend-empty strong { color: var(--ink); font-size: 17px; }
.add-friend-empty span { font-size: 13px; }
.friend-search-loading { display: grid; min-height: 150px; place-items: center; }
.friend-search-loading span { width: 30px; height: 30px; border: 3px solid #e5e7f1; border-block-start-color: var(--primary); border-radius: 50%; animation: avatarUploadSpin .7s linear infinite; }
.section-caption { display: flex; align-items: center; justify-content: space-between; margin: 7px 5px 9px; color: #72778a; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.section-caption span:last-child { color: var(--muted-2); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.message-search-caption { margin-block-start: 20px; }
.message-search-result { align-items: flex-start; }
.message-search-result .avatar { margin-block-start: 2px; }
.message-search-preview span { white-space: normal; }
.message-search-preview mark { border-radius: 3px; color: var(--primary); background: var(--primary-soft); font-weight: 800; }
.message-search-time { flex: 0 0 auto; margin-block-start: 3px; color: var(--muted-2); font-size: 11px; white-space: nowrap; }
.message-search-more { display: block; width: auto; min-height: 38px; margin: 12px auto 0; padding-inline: 18px; }
.message-search-loading { min-height: 56px; }
.list-card { overflow: hidden; border: 1px solid #eef0f5; border-radius: 20px; background: var(--surface); box-shadow: 0 8px 25px rgba(37,41,74,.045); }
.conversation-row, .contact-row, .group-row { position: relative; display: flex; width: 100%; min-height: 78px; align-items: center; gap: 13px; padding: 12px 14px; color: inherit; background: transparent; text-align: start; transition: background .18s; }
.conversation-row + .conversation-row, .contact-row + .contact-row, .group-row + .group-row { border-block-start: 1px solid #f0f1f6; }
.conversation-row:hover, .contact-row:hover, .group-row:hover { background: #fafaff; }
.pin-indicator { display: inline-flex; flex: 0 0 auto; align-items: center; color: #8f97ae; }
.pin-indicator svg { width: 15px; height: 15px; }
.avatar { position: relative; display: grid; flex: 0 0 52px; width: 52px; height: 52px; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #e17f88, #a74455); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); font-size: 21px; font-weight: 700; text-transform: uppercase; }
.avatar.blue { background: linear-gradient(145deg, #6c85ef, #4359c9); }
.avatar.gold { background: linear-gradient(145deg, #dfca75, #9d8731); }
.avatar.green { background: linear-gradient(145deg, #43d5aa, #1a9979); }
.avatar.purple { background: linear-gradient(145deg, #a578ef, #6843bd); }
.avatar.small { flex-basis: 39px; width: 39px; height: 39px; border-radius: 50%; font-size: 15px; }
.avatar.saved-messages-avatar { color: #fff; background: linear-gradient(145deg, #6d74ff, #4050e8); }
.avatar.saved-messages-avatar svg { width: 47%; height: 47%; fill: currentColor; stroke: currentColor; }
.avatar-image { position: absolute; display: block; width: 100%; height: 100%; min-width: 0; max-width: 100%; min-height: 0; max-height: 100%; inset: 0; border-radius: inherit; object-fit: cover; object-position: center; }
.presence { position: absolute; width: 14px; height: 14px; inset-inline-end: -2px; inset-block-end: -1px; border: 2.5px solid #fff; border-radius: 50%; background: var(--success); }
.group-avatar { display: grid; grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; padding: 0; place-items: stretch; isolation: isolate; background: #fff; box-shadow: inset 0 0 0 1px rgba(63,76,156,.12); }
.group-avatar-member { position: relative; display: grid; min-width: 0; min-height: 0; overflow: hidden; place-items: center; color: #fff; background: linear-gradient(145deg, #6c85ef, #4359c9); font-size: clamp(8px, .44em, 14px); font-weight: 800; line-height: 1; }
.group-avatar-member.green { background: linear-gradient(145deg, #43d5aa, #1a9979); }
.group-avatar-member.purple { background: linear-gradient(145deg, #a578ef, #6843bd); }
.group-avatar-member.gold { background: linear-gradient(145deg, #dfca75, #9d8731); }
.group-avatar-member b { font: inherit; }
.group-avatar-member-image { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; object-position: center; }
.group-avatar.member-count-1 { grid-template: 1fr / 1fr; }
.group-avatar.member-count-1 .group-avatar-member { font-size: .78em; }
.group-avatar.member-count-2 { grid-template: 1fr / repeat(2, minmax(0, 1fr)); }
.group-avatar.member-count-2 .group-avatar-member { font-size: .58em; }
.group-avatar.member-count-3 .group-avatar-member:first-child { grid-row: 1 / -1; }
.group-avatar.has-image { display: grid; overflow: hidden; padding: 0; background: #edf0ff; }
.row-main { min-width: 0; flex: 1; }
.row-title-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.row-title-identity { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 6px; overflow: hidden; }
.row-title-identity .row-title { min-width: 0; }
.row-title { overflow: hidden; font-size: 16px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.user-identity-badge { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; vertical-align: middle; }
.enterprise-verified-badge { display: block; width: 17px; height: 17px; object-fit: contain; }
.vip-level-badge { min-width: 30px; height: 17px; padding: 0 6px; border-radius: 8.5px; color: #fff; background: linear-gradient(135deg, #f3ad3d, #ed6c52); box-shadow: 0 1px 3px rgba(211,112,36,.22); font-size: 9px; font-weight: 850; letter-spacing: .15px; line-height: 17px; }
.row-time { flex: 0 0 auto; color: #afb2bf; font-size: 11px; font-weight: 500; }
.row-preview { display: flex; min-width: 0; align-items: center; gap: 5px; margin-block-start: 5px; color: #9095a7; font-size: 13px; }
.row-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-preview-label { color: var(--danger); font-weight: 750; }
.mute-indicator { display: grid; flex: 0 0 17px; width: 17px; place-items: center; color: #a1a6b4; }
.mute-indicator svg { width: 15px; height: 15px; }
.row-meta { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.mention-list-indicator { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); font-size: 13px; font-style: normal; font-weight: 800; }
.unread-badge { display: grid; min-width: 20px; height: 20px; place-items: center; padding: 0 6px; border-radius: 10px; color: #fff; background: var(--danger); font-size: 10px; font-style: normal; font-weight: 700; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; color: var(--success); font-size: 11px; font-weight: 650; }
.status-pill::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.chevron { flex: 0 0 auto; color: #b5b8c4; }
.chevron svg { width: 18px; height: 18px; }
.friend-request-row { display: flex; min-height: 82px; align-items: center; gap: 12px; padding: 12px 14px; }
.friend-request-row + .friend-request-row { border-block-start: 1px solid #f0f1f6; }
.request-list { margin-block-end: 18px; }
.request-actions { display: flex; flex: 0 1 auto; max-width: 48%; min-width: 0; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.primary-button.mini, .secondary-button.mini { width: auto; min-height: 34px; padding: 0 11px; border-radius: 11px; font-size: 11px; }
.search-add { display: grid; min-width: 30px; place-items: center; color: var(--primary); font-size: 11px; font-weight: 700; }
.search-add svg { width: 21px; height: 21px; }
button:disabled { cursor: not-allowed; opacity: .58; }

.empty-state { display: flex; height: 100%; min-height: 390px; flex-direction: column; align-items: center; justify-content: center; padding: 40px 28px 90px; text-align: center; }
.empty-illustration { display: grid; width: 86px; height: 86px; place-items: center; margin-block-end: 23px; border: 1px solid #e8eaf2; border-radius: 28px; color: #9298a7; background: linear-gradient(145deg, #fff, #eef0f3); box-shadow: 0 16px 30px rgba(45,50,80,.1); }
.empty-illustration svg { width: 40px; height: 40px; }
.empty-state h2 { margin: 0; font-size: 21px; }
.empty-state p { max-width: 330px; margin: 10px 0 24px; color: var(--muted); font-size: 14px; }
.empty-state .primary-button { min-height: 48px; border-radius: 16px; }

/* Profile */
.profile-wrap { width: 100%; padding: 18px 14px 28px; }
.profile-card { display: flex; width: 100%; min-width: 0; align-items: center; gap: 15px; padding: 20px 17px; border: 1px solid #edf0f6; border-radius: 23px; background: #fff; box-shadow: var(--soft-shadow); text-align: start; }
.profile-avatar { position: relative; flex: 0 0 76px; width: 76px; height: 76px; border-radius: 50%; font-size: 31px; }
.profile-avatar-wrap { position: relative; display: block; flex: 0 0 76px; width: 76px; height: 76px; }
.profile-avatar-button { flex: 0 0 76px; padding: 0; border-radius: 50%; background: transparent; }
.camera-dot { position: absolute; display: grid; width: 25px; height: 25px; inset-inline-end: -4px; inset-block-end: -4px; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; background: var(--primary); }
.camera-dot svg { width: 12px; height: 12px; }
.profile-info { display: grid; min-width: 0; flex: 1; justify-items: start; }
.profile-name-line { display: flex; min-width: 0; max-width: 100%; align-items: center; gap: 8px; padding: 0; background: transparent; text-align: start; }
.profile-name { min-width: 0; overflow: hidden; margin: 0; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy-field, .profile-signature { display: flex; min-width: 0; max-width: 100%; align-items: center; gap: 5px; margin-block-start: 4px; padding: 1px 3px; border-radius: 6px; color: var(--muted); background: transparent; font-size: 13px; text-align: start; }
.profile-copy-field span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-signature { display: -webkit-box; width: 100%; overflow: hidden; line-height: 1.45; overflow-wrap: anywhere; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.profile-copy-field svg { width: 13px; height: 13px; flex: 0 0 13px; opacity: .7; }
.profile-copy-field:hover, .profile-copy-field:focus-visible { color: var(--primary); background: var(--primary-soft); }
.profile-card-actions { display: flex; width: 38px; height: 76px; flex: 0 0 38px; align-items: center; justify-content: space-between; flex-direction: column; }
.profile-qr-button { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; padding: 0; border-radius: 11px; color: var(--primary); background: var(--primary-soft); }
.profile-qr-button:hover, .profile-qr-button:focus-visible { color: #fff; background: var(--primary); }
.profile-qr-button svg { width: 20px; height: 20px; }
.profile-chevron-button { display: grid; width: 32px; height: 42px; flex: 0 0 32px; place-items: center; padding: 0; border-radius: 10px; background: transparent; }
.profile-card-actions .profile-chevron-button { height: 28px; flex-basis: 28px; }
.profile-chevron-button:hover { color: var(--primary); background: var(--primary-soft); }
.menu-card { overflow: hidden; margin-block-start: 15px; border: 1px solid #edf0f6; border-radius: 20px; background: #fff; box-shadow: 0 7px 22px rgba(35,39,72,.04); }
.menu-item { display: flex; width: 100%; min-height: 58px; align-items: center; gap: 13px; padding: 0 16px; background: transparent; text-align: start; }
.menu-item + .menu-item { border-block-start: 1px solid #f0f1f5; }
.menu-icon { display: grid; flex: 0 0 35px; width: 35px; height: 35px; place-items: center; border-radius: 11px; color: var(--primary); background: var(--primary-soft); }
.menu-icon svg { width: 19px; height: 19px; }
.menu-label { min-width: 0; flex: 1; font-weight: 650; }
.menu-value { overflow: hidden; max-width: 40%; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.menu-language-value { display: inline-flex; align-items: center; gap: 7px; }
.menu-language-value > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-button { display: flex; width: 100%; min-height: 56px; align-items: center; justify-content: center; gap: 9px; margin-block-start: 17px; border: 1px solid rgba(240,79,95,.16); border-radius: 18px; color: var(--danger); background: #fff7f8; font-weight: 750; }
.logout-button svg { width: 20px; height: 20px; }
.avatar-editor { display: flex; align-items: center; gap: 16px; margin-block-end: 20px; padding: 15px; border: 1px solid #e6e9fa; border-radius: 20px; background: #f7f8ff; }
.avatar-editor-button { position: relative; display: block; flex: 0 0 76px; width: 76px; height: 76px; padding: 0; border-radius: 50%; background: transparent; }
.avatar-editor-button .camera-dot { inset-inline-end: -4px; inset-block-end: -4px; }
.avatar-editor-button.is-uploading .avatar { opacity: .42; }
.avatar-editor-button.is-uploading::after { position: absolute; width: 27px; height: 27px; inset: 0; margin: auto; border: 3px solid rgba(255,255,255,.55); border-block-start-color: #fff; border-radius: 50%; content: ""; animation: avatarUploadSpin .7s linear infinite; }
.avatar-editor-copy { display: grid; min-width: 0; flex: 1; gap: 5px; text-align: start; }
.avatar-editor-copy strong { color: var(--ink); font-size: 15px; }
.avatar-editor-copy small { color: var(--muted); font-size: 11px; line-height: 1.5; }
@keyframes avatarUploadSpin { to { transform: rotate(1turn); } }

/* Conversation */
.main-view.is-chat { grid-template-rows: var(--header-height) 1fr; }
.main-view.is-chat .bottom-nav { display: none; }
.chat-screen { position: relative; display: grid; width: 100%; min-width: 0; height: 100%; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; background: #f2f3f8; }
.chat-screen.has-translation-bar { grid-template-rows: auto minmax(0, 1fr) auto; }
.chat-screen.has-pinned-message { grid-template-rows: auto minmax(0, 1fr) auto; }
.chat-screen.has-translation-bar.has-pinned-message { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.chat-drop-overlay { position: absolute; z-index: 20; display: grid; inset: 12px; place-content: center; justify-items: center; gap: 11px; border: 2px dashed rgba(78,91,235,.72); border-radius: 24px; color: var(--primary); background: rgba(247,248,255,.94); box-shadow: 0 14px 34px rgba(47,55,112,.14); text-align: center; pointer-events: none; backdrop-filter: blur(8px); }
.chat-drop-overlay[hidden] { display: none; }
.chat-drop-overlay span { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 19px; background: var(--primary-soft); }
.chat-drop-overlay svg { width: 29px; height: 29px; }
.chat-drop-overlay strong { max-width: min(80%, 360px); font-size: 16px; line-height: 1.45; }
.chat-translation-bar { display: flex; width: 100%; min-width: 0; min-height: 50px; align-items: center; gap: 8px; border-block-start: 1px solid #eef0f5; border-block-end: 1px solid #e4e7ef; color: var(--text); background: rgba(255,255,255,.97); text-align: start; }
.chat-translation-settings { display: flex; min-width: 0; min-height: 50px; flex: 1; align-items: center; gap: 10px; padding: 7px 2px 7px 15px; color: inherit; background: transparent; font: inherit; text-align: start; }
.chat-translation-settings:hover, .chat-translation-settings:focus-visible { background: #f8f9ff; }
.chat-translation-icon { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 10px; color: var(--muted); background: #f0f2f7; }
.chat-translation-bar.is-enabled .chat-translation-icon { color: var(--primary); background: var(--primary-soft); }
.chat-translation-icon svg { width: 18px; height: 18px; }
.chat-translation-copy { display: grid; min-width: 0; flex: 1; gap: 1px; }
.chat-translation-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.chat-translation-copy small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chat-translation-settings > i { display: grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; color: #a5aaba; }
.chat-translation-settings > i svg { width: 16px; height: 16px; }
.chat-translation-provider { position: relative; display: flex; width: min(42%, 188px); min-width: 96px; height: 36px; flex: 0 1 188px; align-items: center; gap: 4px; margin-inline-end: 12px; overflow: hidden; padding-block: 0; padding-inline: 10px 7px; border: 1px solid #dde1eb; border-radius: 11px; color: var(--text); background: #f5f6fb; }
.chat-translation-provider:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(78,91,235,.12); }
.chat-translation-provider.is-loading { cursor: wait; opacity: .58; }
.chat-translation-provider select { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.chat-translation-provider select:disabled { cursor: wait; }
.chat-translation-provider > span { min-width: 0; flex: 1; overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.chat-translation-provider > i { display: grid; width: 16px; height: 16px; flex: 0 0 16px; place-items: center; color: var(--muted); transform: rotate(90deg); }
.chat-translation-provider > i svg { width: 15px; height: 15px; }
.chat-pinned-message { display: flex; min-width: 0; min-height: 47px; align-items: center; gap: 6px; padding: 7px 8px 7px 15px; border-block-end: 1px solid #e1e4ee; color: var(--text); background: rgba(255,255,255,.98); box-shadow: 0 3px 12px rgba(32,38,75,.04); }
.chat-pinned-message-target { display: flex; min-width: 0; flex: 1; align-items: center; gap: 10px; padding: 0; border: 0; color: inherit; background: transparent; text-align: start; }
.chat-pinned-message-target:hover .chat-pinned-message-copy, .chat-pinned-message-target:focus-visible .chat-pinned-message-copy { opacity: .76; }
.chat-pinned-message-icon { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 9px; color: var(--primary); background: var(--primary-soft); }
.chat-pinned-message-icon svg { width: 17px; height: 17px; }
.chat-pinned-message-copy { display: grid; min-width: 0; flex: 1; gap: 2px; text-align: start; }
.chat-pinned-message-copy strong, .chat-pinned-message-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-pinned-message-copy strong { color: var(--primary); font-size: 11px; font-weight: 750; }
.chat-pinned-message-copy small { color: var(--muted); font-size: 12px; }
.chat-pinned-message-unpin { width: 32px; height: 32px; flex: 0 0 32px; color: var(--muted); }
.chat-pinned-message-unpin svg { width: 17px; height: 17px; transform: rotate(45deg); }
.messages-layer { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.messages-stream { width: 100%; height: 100%; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 18px 15px 22px; overscroll-behavior: contain; }
.mention-jump-button { position: absolute; z-index: 12; display: inline-flex; min-width: 48px; height: 48px; inset-inline-end: 14px; inset-block-end: 14px; align-items: center; justify-content: center; gap: 3px; padding: 0 11px; border: 1px solid rgba(78,91,235,.2); border-radius: 50%; color: #fff; background: var(--primary); box-shadow: 0 9px 24px rgba(49,60,187,.3); }
.mention-jump-button strong { font-size: 22px; line-height: 1; }
.mention-jump-button span { min-width: 12px; font-size: 10px; font-weight: 800; }
.mention-jump-button:disabled { cursor: wait; opacity: .58; }
.mention-jump-button.has-new-messages { inset-block-end: 74px; }
.new-message-jump-button { position: absolute; z-index: 12; display: grid; width: 48px; height: 48px; inset-inline-end: 14px; inset-block-end: 14px; place-items: center; padding: 0; border: 1px solid rgba(78,91,235,.16); border-radius: 50%; color: var(--primary); background: rgba(255,255,255,.98); box-shadow: 0 9px 24px rgba(32,38,75,.2); }
.new-message-jump-button:hover { background: #fff; transform: translateY(-1px); }
.new-message-jump-icon { display: grid; width: 25px; height: 25px; place-items: center; }
.new-message-jump-icon svg { width: 23px; height: 23px; transform: rotate(90deg); }
.new-message-jump-button i { position: absolute; display: grid; min-width: 22px; height: 22px; inset-block-start: -5px; inset-inline-end: -5px; place-items: center; padding: 0 5px; border: 2px solid #fff; border-radius: 11px; color: #fff; background: var(--danger); font-size: 10px; font-style: normal; font-weight: 800; line-height: 1; }
.date-divider { margin: 2px 0 18px; color: #a4a8b5; font-size: 11px; text-align: center; }
.load-earlier-button { display: block; margin: 0 auto 14px; padding: 7px 12px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 11px; font-weight: 700; }
.message-line { position: relative; display: flex; width: 100%; min-width: 0; align-items: flex-start; gap: 9px; margin-block-end: 16px; border-radius: 16px; transition: padding .16s ease, background .16s ease; }
.message-avatar-button { display: block; flex: 0 0 39px; width: 39px; height: 39px; padding: 0; border-radius: 50%; background: transparent; }
.message-avatar-button .avatar { width: 100%; height: 100%; }
.message-avatar-button:hover .avatar { filter: brightness(.96); }
.message-line.is-pinned-target, .system-message-line.is-pinned-target { border-radius: 16px; animation: pinnedMessageTarget 1.7s ease-out; }
@keyframes pinnedMessageTarget { 0%, 28% { background: rgba(78,91,235,.2); box-shadow: 0 0 0 5px rgba(78,91,235,.12); } 100% { background: transparent; box-shadow: none; } }
.message-line.mine { flex-direction: row-reverse; }
.system-message-line { display: flex; width: 100%; align-items: center; flex-direction: column; gap: 4px; margin-block-end: 16px; text-align: center; }
.system-message-pill { display: inline-block; max-width: min(88%, 430px); padding: 7px 13px; border-radius: 999px; color: #697087; background: rgba(221,224,234,.92); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.message-line.is-long-pressed .message-bubble { transform: scale(.98); filter: brightness(.97); }
.chat-screen.is-selecting-messages .message-line.is-selectable { padding-inline-start: 42px; cursor: pointer; user-select: none; }
.chat-screen.is-selecting-messages .message-line.is-selected { background: rgba(72,84,232,.12); }
.chat-screen.is-selecting-messages .message-line:not(.is-selectable) { opacity: .62; }
.message-select-indicator { position: absolute; z-index: 3; display: grid; width: 26px; height: 26px; inset-block-start: 12px; inset-inline-start: 5px; place-items: center; border: 2px solid #b4bacb; border-radius: 50%; color: transparent; background: #fff; box-shadow: 0 3px 10px rgba(24,30,54,.1); transition: border-color .16s ease, color .16s ease, background .16s ease; }
.message-select-indicator svg { width: 15px; height: 15px; }
.message-line.is-selected .message-select-indicator { border-color: var(--primary); color: #fff; background: var(--primary); }
.message-body { display: flex; min-width: 0; max-width: calc(100% - 48px); flex-direction: column; align-items: flex-start; }
.message-line.mine .message-body { align-items: flex-end; }
.message-reactions { display: flex; max-width: 100%; flex-wrap: wrap; gap: 5px; margin-block-start: 5px; }
.message-reaction-pill { display: inline-flex; min-width: 44px; height: 30px; align-items: center; justify-content: center; gap: 4px; padding: 3px 8px; border: 1px solid #dfe3ef; border-radius: 999px; color: #47506b; background: #fff; box-shadow: 0 3px 10px rgba(37,41,70,.06); font-size: 13px; }
.message-reaction-pill:hover, .message-reaction-pill:focus-visible { border-color: #aeb6f5; background: #f5f6ff; }
.message-reaction-pill.is-selected { border-color: var(--primary); color: var(--primary); background: #eef0ff; }
.message-reaction-emoji { font-size: 17px; line-height: 1; }
.message-reaction-avatars { display: inline-flex; align-items: center; }
.avatar.message-reaction-avatar { flex: 0 0 18px; width: 18px; height: 18px; margin-inline-start: -4px; border: 1.5px solid #fff; border-radius: 50%; box-shadow: none; font-size: 7px; }
.message-reaction-avatars .avatar:first-child { margin-inline-start: 0; }
.avatar.message-reaction-avatar .presence { display: none; }
.message-reaction-pill strong { min-width: 8px; font-size: 11px; font-weight: 800; }
.sender-name { margin: 0 4px 4px; color: #8f94a4; font-size: 10px; }
.message-bubble { position: relative; max-width: 100%; padding: 10px 13px; border: 1px solid #e9eaf0; border-radius: 5px 16px 16px 16px; background: #fff; box-shadow: 0 5px 16px rgba(37,41,70,.05); font-size: 14px; overflow-wrap: anywhere; white-space: pre-wrap; }
.message-selectable-text, .message-selectable-text * { cursor: text; -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.message-selectable-text a { cursor: pointer; }
.message-line.mine .message-selectable-text::selection,
.message-line.mine .message-selectable-text *::selection { color: #fff; background: #151a3f; }
.message-line:not(.mine) .message-selectable-text::selection,
.message-line:not(.mine) .message-selectable-text *::selection,
.system-message-line .message-selectable-text::selection,
.system-message-line .message-selectable-text *::selection { color: var(--text); background: rgba(74,87,238,.32); }
.chat-screen.is-selecting-messages .message-selectable-text,
.chat-screen.is-selecting-messages .message-selectable-text * { -webkit-user-select: none; user-select: none; }
.message-line.mine .message-bubble { border-color: var(--primary); border-radius: 16px 5px 16px 16px; color: #fff; background: linear-gradient(145deg, #5965ee, #424cdd); }
.message-line.is-mentioned:not(.mine) .message-bubble { border-color: rgba(78,91,235,.52); box-shadow: 0 0 0 2px rgba(78,91,235,.08), 0 5px 16px rgba(37,41,70,.05); }
.message-bubble.has-image { overflow: hidden; width: min(240px, 62vw); padding: 3px; border-radius: 16px; background: #fff; }
.message-bubble.has-image.has-multiple-images { width: min(330px, 72vw); }
.message-bubble.has-files { width: min(300px, 72vw); }
.message-bubble.has-videos { overflow: hidden; width: min(360px, 78vw); padding: 3px; }
.message-bubble.has-emoji, .message-line.mine .message-bubble.has-emoji { padding: 0; border-color: transparent; background: transparent; box-shadow: none; }
.message-bubble.has-sticker, .message-line.mine .message-bubble.has-sticker { padding: 0; border-color: transparent; background: transparent; box-shadow: none; }
.message-bubble.has-call { padding: 11px 14px; }
.message-bubble.has-contact { min-width: min(230px, 62vw); padding: 10px 12px; }
.message-bubble.has-location { width: min(270px, 70vw); overflow: hidden; padding: 3px; }
.message-translation { display: grid; min-width: min(190px, 44vw); gap: 8px; white-space: pre-wrap; }
.message-translation-primary, .message-translation-secondary { display: block; min-width: 0; }
.message-translation-primary { font-weight: 600; }
.message-translation-secondary { opacity: .82; }
.message-translation-divider { display: block; height: 1px; background: rgba(101,106,128,.18); }
.message-line.mine .message-translation-divider { background: rgba(255,255,255,.28); }
.message-translation-loading { display: block; min-height: 1.35em; opacity: .82; }
.translation-loading-dots { display: inline-block; width: 4ch; overflow: hidden; color: currentColor; font-style: normal; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.translation-loading-dots::before { display: block; width: 1ch; overflow: hidden; animation: translationLoadingDots 1.2s steps(3, end) infinite; content: "...."; }
@keyframes translationLoadingDots { from { width: 1ch; } to { width: 4ch; } }
.contact-message { display: flex; width: 100%; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; text-align: start; white-space: normal; cursor: pointer; }
.contact-message:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 10px; }
.contact-message:active { opacity: .82; }
.contact-message > span { display: grid; min-width: 0; flex: 1; gap: 2px; }
.contact-message strong, .contact-message small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-message small { opacity: .72; }
.contact-message > svg { flex: 0 0 18px; width: 18px; height: 18px; opacity: .75; }
.location-message { display: grid; width: 100%; overflow: hidden; padding: 0; border: 0; border-radius: 13px; color: var(--text); background: #fff; font: inherit; text-align: start; cursor: pointer; }
.location-message:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.location-message:active { opacity: .86; }
.location-message-preview, .location-confirmation-preview { position: relative; display: grid; min-height: 112px; place-items: center; overflow: hidden; color: #fff; background: radial-gradient(circle at center, rgba(255,255,255,.25) 0 16%, transparent 17% 31%, rgba(255,255,255,.18) 32% 33%, transparent 34%), linear-gradient(135deg, #65b8f4, #4965ed); }
.location-message-preview::before, .location-confirmation-preview::before { position: absolute; width: 130%; height: 1px; content: ""; background: rgba(255,255,255,.25); box-shadow: 0 -32px rgba(255,255,255,.18), 0 32px rgba(255,255,255,.18); transform: rotate(-18deg); }
.location-message-preview svg, .location-confirmation-preview svg { z-index: 1; width: 40px; height: 40px; fill: rgba(255,255,255,.18); stroke-width: 1.8; filter: drop-shadow(0 4px 8px rgba(20,40,110,.25)); }
.location-message-copy { display: grid; gap: 2px; padding: 10px 12px; }
.location-message-copy strong, .location-message-copy span, .location-message-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.location-message-copy span, .location-message-copy small { color: var(--muted); font-size: 12px; }
.location-picker-loading { display: grid; min-height: 220px; place-items: center; align-content: center; gap: 16px; color: var(--muted); text-align: center; }
.location-picker-loading svg { width: 46px; height: 46px; color: var(--primary); animation: locationPulse 1.1s ease-in-out infinite alternate; }
@keyframes locationPulse { to { transform: translateY(-5px); opacity: .58; } }
.location-confirmation { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; text-align: center; }
.location-confirmation-preview { min-height: 210px; }
.location-confirmation > strong { padding: 14px 16px 3px; font-size: 17px; }
.location-confirmation > span { padding-inline: 16px; color: var(--muted); }
.location-confirmation > small { padding: 3px 16px 14px; color: var(--muted); }
.modal-settings-button { display: inline-grid; width: 42px; height: 42px; place-items: center; padding: 0; font-size: 20px; font-weight: 800; letter-spacing: 1px; }
.contact-settings-list { margin-block-start: 4px; }
.share-contact-target-avatar { display: inline-grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: var(--primary); background: var(--primary-soft); }
.share-contact-target-avatar svg { width: 22px; height: 22px; }
.message-reply-preview { display: grid; min-width: 0; gap: 2px; margin: -3px -5px 8px; padding: 7px 9px; border: 0; border-inline-start: 3px solid var(--primary); border-radius: 8px; color: var(--text); background: #f2f4fb; font: inherit; text-align: start; white-space: normal; cursor: pointer; appearance: none; }
.message-reply-preview:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.message-line.mine .message-reply-preview { border-inline-start-color: rgba(255,255,255,.9); color: #fff; background: rgba(255,255,255,.14); }
.message-reply-preview strong { overflow: hidden; color: var(--primary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.message-line.mine .message-reply-preview strong { color: #fff; }
.message-reply-preview span { overflow: hidden; max-width: 230px; font-size: 11px; opacity: .76; text-overflow: ellipsis; white-space: nowrap; }
.message-bubble.has-image .message-reply-preview { margin: 3px 3px 6px; border-inline-start-color: var(--primary); color: var(--text); background: #f2f4fb; }
.message-bubble.has-image .message-reply-preview strong { color: var(--primary); }
.call-history-message { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.call-history-message svg { flex: 0 0 20px; width: 20px; height: 20px; }
.standalone-message-emoji { display: block; width: 72px; height: 72px; object-fit: contain; }
.talky-sticker { display: block; overflow: hidden; object-fit: contain; }
.talky-sticker canvas, .talky-sticker svg { display: block; width: 100% !important; height: 100% !important; }
.standalone-message-sticker { width: min(154px, 38vw); height: min(154px, 38vw); background: transparent; }
.message-bubble:not(.has-sticker) .standalone-message-sticker { width: min(132px, 33vw); height: min(132px, 33vw); }
.talky-sticker > i { display: grid; width: 100%; height: 100%; place-items: center; color: var(--muted); font-style: normal; letter-spacing: 2px; }
.talky-sticker.is-sticker-failed { display: grid; place-items: center; color: var(--muted); font-weight: 700; }
.inline-message-emoji { display: inline-block; width: 27px; height: 27px; margin: -5px 2px -7px; object-fit: contain; vertical-align: baseline; }
.message-link { color: var(--primary); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; overflow-wrap: anywhere; }
.message-line.mine .message-link { color: #fff; text-decoration-color: rgba(255,255,255,.78); }
.trusted-domain-badge { display: inline-flex; width: 17px; height: 17px; align-items: center; justify-content: center; margin-inline-end: 4px; vertical-align: -3px; }
.trusted-domain-badge img { display: block; width: 100%; height: 100%; object-fit: contain; }
.image-message-grid { display: grid; overflow: hidden; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; border-radius: 13px; }
.image-message-grid.count-1 { display: block; }
.image-message { display: block; min-width: 0; overflow: hidden; padding: 0; border-radius: 5px; color: inherit; background: #eef0f7; cursor: zoom-in; }
.image-message-grid.count-1 .image-message { border-radius: 13px; }
.image-message-grid:not(.count-1) .image-message { aspect-ratio: 1; }
.image-message-grid.count-3 .image-message:first-child,
.image-message-grid.count-5 .image-message:first-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.image-message img { display: block; width: 100%; height: 100%; max-height: 300px; object-fit: cover; }
.image-message-grid.count-1 img { height: auto; }
.attachment-caption { display: block; padding: 7px 9px; color: var(--text); white-space: pre-wrap; }
.image-viewer-layer { position: absolute; inset: 0; z-index: 95; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; color: #fff; background: rgba(5,7,14,.97); animation: imageViewerIn .18s ease both; }
@keyframes imageViewerIn { from { opacity: 0; } }
.image-viewer-toolbar { position: relative; z-index: 2; display: grid; min-height: 62px; grid-template-columns: 92px 1fr 92px; align-items: center; padding: max(7px, env(safe-area-inset-top)) 10px 7px; background: linear-gradient(rgba(0,0,0,.48), transparent); }
.image-viewer-toolbar strong { font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; }
.image-viewer-actions { display: flex; align-items: center; gap: 8px; }
.image-viewer-close, .image-viewer-forward, .image-viewer-save, .image-viewer-nav { display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.12); backdrop-filter: blur(10px); }
.image-viewer-close, .image-viewer-forward, .image-viewer-save { width: 42px; height: 42px; border-radius: 50%; }
.image-viewer-close svg { width: 23px; height: 23px; transform: rotate(45deg); }
.image-viewer-forward svg, .image-viewer-save svg { width: 21px; height: 21px; }
.image-viewer-save:disabled { cursor: wait; opacity: .5; }
.image-viewer-stage { position: relative; display: grid; min-height: 0; place-items: center; overflow: hidden; padding: 8px 10px; touch-action: pan-y; }
.image-viewer-image { position: relative; z-index: 1; display: block; max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0; transition: opacity .18s ease; user-select: none; -webkit-user-drag: none; }
.image-viewer-video { position: relative; z-index: 1; display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; background: #000; opacity: 0; transition: opacity .18s ease; }
.image-viewer-layer.is-loaded .image-viewer-image, .image-viewer-layer.is-loaded .image-viewer-video { opacity: 1; }
.video-viewer-layer .image-viewer-stage { padding: 0; touch-action: auto; }
.image-viewer-loading { position: absolute; width: 32px; height: 32px; border: 3px solid rgba(255,255,255,.22); border-block-start-color: #fff; border-radius: 50%; animation: mediaUploadSpin .8s linear infinite; }
.image-viewer-layer.is-loaded .image-viewer-loading { display: none; }
.image-viewer-nav { position: absolute; z-index: 2; width: 44px; height: 56px; inset-block-start: 50%; border-radius: 14px; transform: translateY(-50%); }
.image-viewer-nav.previous { inset-inline-start: 12px; }
.image-viewer-nav.next { inset-inline-end: 12px; }
.image-viewer-nav svg { width: 24px; height: 24px; }
.image-viewer-footer { position: relative; z-index: 2; display: grid; min-height: 56px; gap: 4px; padding: 10px 18px max(14px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.image-viewer-footer p { overflow: hidden; margin: 0; font-size: 13px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.file-message-list { display: grid; gap: 9px; }
.file-message { display: flex; min-width: min(230px, 58vw); align-items: center; gap: 10px; color: inherit; white-space: normal; }
.file-message + .file-message { padding-block-start: 9px; border-block-start: 1px solid rgba(128,132,150,.22); }
.file-message > svg { flex: 0 0 30px; width: 30px; height: 30px; }
.file-message span { display: grid; min-width: 0; gap: 3px; }
.file-message strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-message small { opacity: .7; }
.video-message { position: relative; display: grid; width: 100%; min-height: 150px; overflow: hidden; place-items: center; border-radius: 13px; color: #fff; background: #070a12; white-space: normal; }
.video-message video { position: relative; z-index: 1; display: block; width: 100%; min-height: 150px; max-height: min(440px, 62vh); aspect-ratio: auto 16 / 9; object-fit: contain; background: #070a12; -webkit-touch-callout: none; user-select: none; }
.video-message-open { position: absolute; z-index: 3; inset: 0; padding: 0; border: 0; color: #fff; background: transparent; cursor: pointer; -webkit-touch-callout: none; }
.video-message-open svg { position: absolute; width: 34px; height: 34px; inset-inline-end: 9px; inset-block-end: 9px; padding: 7px; border-radius: 10px; background: rgba(7,10,18,.62); filter: drop-shadow(0 2px 6px rgba(0,0,0,.32)); }
.video-message-open:focus-visible { outline: 3px solid rgba(255,255,255,.9); outline-offset: -4px; }
.video-message-loading { position: absolute; z-index: 0; width: 31px; height: 31px; border: 3px solid rgba(255,255,255,.24); border-block-start-color: #fff; border-radius: 50%; animation: mediaUploadSpin .8s linear infinite; }
.video-message.is-ready .video-message-loading, .video-message.has-error .video-message-loading { display: none; }
.video-message-fallback { display: none; min-width: 0; padding: 12px; color: #fff; }
.video-message.has-error { min-height: 74px; }
.video-message.has-error video { display: none; }
.video-message.has-error .video-message-open { display: none; }
.video-message.has-error .video-message-fallback { display: flex; }
.message-bubble.has-files .attachment-caption { margin-block-start: 9px; padding: 9px 0 0; border-block-start: 1px solid rgba(128,132,150,.22); color: inherit; }
.message-bubble.has-videos .attachment-caption { margin: 3px 7px 0; padding: 9px 0 6px; }
.audio-message { display: flex; min-width: min(190px, 48vw); align-items: center; gap: 10px; color: inherit; background: transparent; }
.audio-message > svg { flex: 0 0 25px; width: 25px; height: 25px; }
.audio-message > strong { margin-inline-start: auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.audio-wave { display: flex; height: 25px; align-items: center; gap: 3px; }
.audio-wave i { width: 3px; height: 9px; border-radius: 3px; background: currentColor; opacity: .62; }
.audio-wave i:nth-child(2), .audio-wave i:nth-child(4) { height: 17px; }
.audio-wave i:nth-child(3) { height: 23px; }
.audio-message.is-playing .audio-wave i { animation: audioWave .75s ease-in-out infinite alternate; }
.audio-message.is-playing .audio-wave i:nth-child(2) { animation-delay: -.2s; }
.audio-message.is-playing .audio-wave i:nth-child(3) { animation-delay: -.4s; }
@keyframes audioWave { to { transform: scaleY(.45); } }
.message-time { display: flex; margin: 4px 4px 0; color: #a6a9b5; font-size: 9px; }
.read-status { color: #8b90a0; }
.message-line.is-sending .read-status { opacity: .72; }
.message-line.is-failed .read-status { color: var(--danger); font-weight: 700; }
.message-line.is-failed .message-bubble { cursor: pointer; }
.chat-compose-wrap { width: 100%; min-width: 0; overflow: hidden; border-block-start: 1px solid #e5e7ef; background: rgba(255,255,255,.97); }
.mention-picker { display: grid; max-height: min(280px, 34dvh); overflow-y: auto; padding: 7px; border-block-end: 1px solid #e6e8f1; background: #fff; box-shadow: 0 -10px 28px rgba(28,35,76,.08); overscroll-behavior: contain; }
.mention-picker[hidden] { display: none; }
.mention-picker-item { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 12px; color: var(--text); background: transparent; text-align: start; }
.mention-picker-item.is-active, .mention-picker-item:hover, .mention-picker-item:focus-visible { background: var(--primary-soft); }
.mention-picker-item > span:last-child { display: grid; min-width: 0; gap: 2px; }
.mention-picker-item strong, .mention-picker-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-picker-item strong { font-size: 13px; }
.mention-picker-item small { color: var(--muted); font-size: 10px; }
.message-selection-toolbar { display: grid; min-height: 65px; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 11px max(7px, env(safe-area-inset-bottom)); border-block-start: 1px solid #e1e4ee; background: rgba(255,255,255,.98); box-shadow: 0 -8px 24px rgba(29,35,70,.06); }
.message-selection-toolbar > strong { overflow: hidden; color: var(--text); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.message-selection-cancel svg { transform: rotate(45deg); }
.message-selection-actions { display: flex; align-items: center; gap: 5px; }
.message-selection-toolbar .icon-button { width: 42px; height: 42px; color: var(--primary); }
.message-selection-toolbar .icon-button.danger { color: var(--danger); }
.message-selection-toolbar .icon-button:disabled { cursor: wait; opacity: .42; }
.chat-compose { display: flex; width: 100%; min-width: 0; align-items: flex-end; gap: 8px; padding: 10px 11px max(10px, env(safe-area-inset-bottom)); border-block-start: 1px solid #e5e7ef; background: rgba(255,255,255,.97); }
.chat-compose > * { min-width: 0; }
.chat-compose-wrap .chat-compose { border-block-start: 0; }
.chat-send-disabled { padding: 8px 14px; color: #d73849; background: #ffecee; border-block-end: 1px solid #ffd7dc; text-align: center; font-size: 12px; font-weight: 600; }
.chat-compose :disabled { cursor: not-allowed; opacity: .48; box-shadow: none; }
.chat-compose .message-input:disabled { color: var(--muted); background: #f1f2f6; }
.composer-reply { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 8px 13px; border-block-end: 1px solid #eceef4; background: #fff; }
.composer-reply-mark { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: var(--primary); background: var(--primary-soft); }
.composer-reply-mark svg { width: 18px; height: 18px; }
.composer-reply > span:nth-child(2) { display: grid; min-width: 0; flex: 1; gap: 2px; }
.composer-reply strong, .composer-reply small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-reply strong { color: var(--primary); font-size: 12px; }
.composer-reply small { color: var(--muted); font-size: 11px; }
.composer-reply .icon-button { flex: 0 0 34px; width: 34px; height: 34px; color: var(--muted); }
.composer-reply .icon-button svg { width: 18px; height: 18px; transform: rotate(45deg); }
.composer-edit { border-inline-start: 3px solid var(--primary); }
.composer-edit-mark { display: grid; flex: 0 0 40px; width: 40px; height: 44px; place-items: center; color: var(--primary); }
.composer-edit-mark svg { width: 21px; height: 21px; }
.chat-compose .icon-button { flex: 0 0 40px; width: 40px; height: 44px; color: #74798b; }
.voice-record-button { touch-action: none; user-select: none; -webkit-user-select: none; }
.voice-record-button.is-recording { color: #fff !important; background: var(--danger); animation: recordingPulse 1.1s ease-in-out infinite; }
.voice-record-button.is-cancelling { background: #d73849; animation: none; transform: scale(.94); }
@keyframes recordingPulse { 50% { box-shadow: 0 0 0 7px rgba(240,79,95,.12); } }
.voice-recording-strip { display: none; min-width: 0; min-height: 44px; flex: 1; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #ffd4da; border-radius: 15px; color: #d73849; background: #fff5f6; }
.chat-compose.is-voice-recording .voice-recording-strip { display: flex; }
.chat-compose.is-voice-recording .composer-input-stack,
.chat-compose.is-voice-recording .composer-emoji-button,
.chat-compose.is-voice-recording .composer-attachment-button,
.chat-compose.is-voice-recording .send-button { display: none; }
.voice-recording-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); animation: recordingDot 1s ease-in-out infinite; }
.voice-recording-strip > strong { flex: 0 0 auto; min-width: 38px; font-size: 13px; font-variant-numeric: tabular-nums; }
.voice-recording-hint { min-width: 0; margin-inline-start: auto; overflow: hidden; color: #8b91a3; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; transform: translateX(calc(var(--voice-slide-progress, 0) * 18px)); transition: color .12s ease, transform .08s linear; }
.voice-recording-strip.is-cancelling { border-color: #ff9ba7; color: #fff; background: var(--danger); }
.voice-recording-strip.is-cancelling .voice-recording-dot { background: #fff; }
.voice-recording-strip.is-cancelling .voice-recording-hint { color: #fff; transform: none; }
@keyframes recordingDot { 50% { opacity: .28; } }
.composer-input-stack { display: grid; min-width: 0; flex: 1; gap: 5px; }
.composer-translation-preview { display: grid; min-width: 0; min-height: 39px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #dfe3f6; border-radius: 14px; color: var(--text); background: #fbfbff; font-size: 13px; line-height: 1.35; }
.composer-translation-preview[hidden] { display: none; }
.composer-translation-preview small { max-width: 88px; overflow: hidden; color: var(--primary); font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.composer-translation-preview span { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.composer-translation-preview > i { display: none; }
.composer-translation-preview.is-loading > i { display: inline-block; }
.composer-translation-preview.is-failed { border-color: #ffd2d7; color: var(--danger); background: #fff8f9; }
.message-input-shell { position: relative; display: grid; width: 100%; min-width: 0; overflow: hidden; border-radius: 15px; background: #f7f8fb; }
.message-input { position: relative; z-index: 2; width: 100%; min-width: 0; min-height: 44px; max-height: 104px; flex: 1; resize: none; padding: 11px 13px; border: 1px solid #e6e8ef; border-radius: 15px; background: #f7f8fb; line-height: 20px; }
.message-input-emoji-preview { position: absolute; z-index: 1; inset: 0; overflow: hidden; padding: 11px 13px; border: 1px solid transparent; color: var(--text); font: inherit; line-height: 20px; overflow-wrap: anywhere; pointer-events: none; white-space: pre-wrap; }
.message-input-shell.has-emoji-preview .message-input { color: transparent; caret-color: var(--text); background: transparent; -webkit-text-fill-color: transparent; }
.message-input-shell.has-emoji-preview .message-input::selection { color: transparent; background: rgba(72,84,232,.2); -webkit-text-fill-color: transparent; }
.composer-input-emoji-image { display: inline-block; width: 22px; height: 22px; margin: -2px 1px -5px; object-fit: contain; vertical-align: baseline; }
.send-button { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border-radius: 14px; color: #fff; background: var(--primary); box-shadow: 0 7px 16px rgba(72,84,232,.24); }
.send-button svg { width: 21px; height: 21px; }
.composer-panel { max-height: min(340px, 42dvh); overflow-y: auto; padding: 13px 14px max(15px, env(safe-area-inset-bottom)); border-block-start: 1px solid #eceef4; background: #fff; overscroll-behavior: contain; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
.emoji-picker { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 11px; }
.emoji-category-tabs { position: sticky; z-index: 2; inset-block-start: -13px; display: flex; min-width: 0; overflow-x: auto; overflow-y: hidden; gap: 7px; margin: -13px -14px 0; padding: 9px 14px 8px; border-block-end: 1px solid #eceef4; background: rgba(255,255,255,.97); overscroll-behavior-inline: contain; touch-action: pan-y; cursor: grab; user-select: none; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.emoji-category-tabs::-webkit-scrollbar { display: none; }
.emoji-category-tabs.is-dragging { cursor: grabbing; }
.emoji-category-tab { display: grid; flex: 0 0 43px; width: 43px; height: 43px; overflow: hidden; place-items: center; padding: 4px; border: 1px solid transparent; border-radius: 13px; background: #f7f8fb; }
.emoji-category-tab.is-active { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 3px 10px rgba(72,84,232,.15); }
.emoji-category-image { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.emoji-category-content { min-height: 210px; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; }
.emoji-grid button { display: grid; overflow: hidden; aspect-ratio: 1; place-items: center; padding: 4px; border-radius: 12px; background: #f7f8fb; }
.emoji-grid button:hover { background: var(--primary-soft); }
.emoji-picker-image { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.sticker-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sticker-grid > button { display: grid; overflow: hidden; aspect-ratio: 1; place-items: center; padding: 2px; border-radius: 14px; background: #f7f8fb; }
.sticker-grid > button:hover { background: var(--primary-soft); }
.sticker-picker-art { width: 100%; height: 100%; pointer-events: none; }
.attachment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 110px)); gap: 14px; }
.attachment-grid.has-call-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.attachment-grid button { display: grid; justify-items: center; gap: 7px; padding: 12px; border-radius: 15px; color: #646a7d; background: #f7f8fb; font-size: 12px; font-weight: 650; }
.attachment-grid svg { width: 28px; height: 28px; color: var(--primary); }
.album-source-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.album-source-option { display: grid; min-width: 0; justify-items: center; gap: 10px; padding: 20px 10px; border: 1px solid #e7e9f2; border-radius: 18px; color: var(--ink); background: #f7f8fb; font-size: 14px; }
.album-source-option:hover, .album-source-option:focus-visible { border-color: var(--primary); background: var(--primary-soft); }
.album-source-icon { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 50%; color: var(--primary); background: #e9ebff; }
.album-source-icon svg { width: 27px; height: 27px; }
.album-camera { display: grid; min-height: 0; justify-items: center; }
.album-camera-preview { position: relative; width: min(100%, 430px); max-height: min(62dvh, 580px); aspect-ratio: 3 / 4; overflow: hidden; border-radius: 22px; background: #080b14; box-shadow: 0 14px 34px rgba(7,10,22,.2); }
.album-camera-preview video { display: block; width: 100%; height: 100%; object-fit: cover; background: #080b14; }
.album-camera-preview.is-front-camera video { transform: scaleX(-1); }
.album-camera-status { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; color: rgba(255,255,255,.88); background: #080b14; font-size: 13px; text-align: center; }
.album-camera-status[hidden] { display: none; }
.album-camera-status.is-error { color: #ffd7db; }
.album-camera-status svg { width: 34px; height: 34px; }
.album-camera-switch { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff; background: rgba(10,13,24,.58); box-shadow: 0 7px 20px rgba(0,0,0,.18); backdrop-filter: blur(9px); }
.album-camera-switch:hover, .album-camera-switch:focus-visible { background: rgba(72,84,232,.82); }
.album-camera-switch:disabled { cursor: wait; opacity: .55; }
.album-camera-switch svg, .album-camera-capture svg { width: 21px; height: 21px; }

/* Telegram 风格消息操作菜单。点击遮罩或完成操作后立即关闭。 */
.message-action-layer { position: absolute; inset: 0; z-index: 70; overflow: hidden; }
.message-action-scrim { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; background: rgba(15,20,32,.12); }
.message-action-menu { position: absolute; display: grid; width: min(240px, calc(100% - 20px)); overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; color: #f5f7fb; background: #17212b; box-shadow: 0 18px 46px rgba(4,8,18,.38); transform-origin: top left; animation: messageActionIn .16s ease both; }
.message-action-menu.opens-left { transform-origin: top right; }
.message-action-menu.opens-up { transform-origin: bottom left; }
.message-action-menu.opens-left.opens-up { transform-origin: bottom right; }
.message-action-reactions { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; padding: 8px 7px; border-block-end: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); }
.message-action-reactions button { display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border-radius: 50%; background: transparent; font-size: 21px; transition: transform .14s ease, background .14s ease; }
.message-action-reactions button:hover, .message-action-reactions button:focus-visible { background: rgba(255,255,255,.12); transform: scale(1.12); }
.message-action-reactions button.is-selected { background: rgba(103,116,255,.28); box-shadow: inset 0 0 0 1px rgba(161,170,255,.7); }
@keyframes messageActionIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.message-action-item { display: flex; width: 100%; min-height: 49px; align-items: center; gap: 13px; padding: 9px 15px; border-block-end: 1px solid rgba(255,255,255,.08); color: inherit; background: transparent; font-size: 14px; text-align: start; }
.message-action-item:last-child { border-block-end: 0; }
.message-action-item:hover, .message-action-item:focus-visible { background: rgba(255,255,255,.08); }
.message-action-item svg { flex: 0 0 22px; width: 22px; height: 22px; color: #dce3ec; }
.message-action-item.danger, .message-action-item.danger svg { color: #ff6b78; }
.forward-target-list { display: grid; gap: 9px; }
.forward-target { display: flex; width: 100%; min-width: 0; min-height: 64px; align-items: center; gap: 11px; padding: 9px 11px; border: 1px solid #eceef4; border-radius: 16px; color: var(--text); background: #fff; text-align: start; }
.forward-target:hover, .forward-target:focus-visible { border-color: #dce0ff; background: #f8f9ff; }
.forward-target > .forward-target-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.forward-target strong, .forward-target small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forward-target small { color: var(--muted); font-size: 11px; }
.forward-target > svg { flex: 0 0 18px; width: 18px; height: 18px; color: #a1a6b5; }

/* Modal and forms */
.modal-layer, .confirm-layer { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 18px; }
.modal-scrim { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(20,22,40,.42); backdrop-filter: blur(3px); }
.modal-layer.details-layer .modal-scrim { backdrop-filter: none; -webkit-backdrop-filter: none; }
.modal-card { position: relative; display: grid; width: min(100%, 480px); max-height: min(780px, calc(100dvh - 36px)); grid-template-rows: 64px minmax(0,1fr); overflow: hidden; border-radius: 26px; background: #fff; box-shadow: 0 30px 90px rgba(14,17,42,.28); animation: modalIn .25s ease both; }
.modal-card.has-footer { grid-template-rows: 64px minmax(0,1fr) auto; }
@keyframes modalIn { from { transform: translateY(16px) scale(.98); } to { transform: none; } }
.modal-header { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; padding: 8px 10px; border-block-end: 1px solid var(--line); }
.modal-header h2 { overflow: hidden; margin: 0; font-size: 18px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.modal-close { width: 42px; height: 42px; border-radius: 13px; color: #6e7385; }
.modal-close:hover { background: #f2f3f8; }
.modal-body { min-height: 0; overflow-y: auto; padding: 18px; }
.talky-qr-card { display: grid; justify-items: center; gap: 14px; padding: 10px 4px 8px; text-align: center; }
.talky-qr-name { max-width: 100%; overflow: hidden; color: var(--ink); font-size: 21px; text-overflow: ellipsis; white-space: nowrap; }
.talky-qr-code { display: grid; width: min(248px, 72vw); aspect-ratio: 1; place-items: center; overflow: hidden; padding: 10px; border: 1px solid #e7e9f2; border-radius: 22px; background: #fff; }
.talky-qr-code canvas, .talky-qr-code img { display: block; width: 100% !important; height: 100% !important; image-rendering: pixelated; }
.talky-qr-id { display: inline-flex; max-width: 100%; align-items: center; gap: 6px; padding: 4px 7px; border-radius: 8px; color: var(--ink); background: transparent; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.talky-qr-id span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.talky-qr-id svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--muted); }
.talky-qr-id:hover, .talky-qr-id:focus-visible { color: var(--primary); background: var(--primary-soft); }
.talky-qr-id:hover svg, .talky-qr-id:focus-visible svg { color: currentColor; }
.talky-qr-actions { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-block-start: 4px; }
.talky-qr-actions button { min-width: 0; min-height: 48px; gap: 7px; padding-inline: 10px; font-size: 13px; }
.talky-qr-actions button:disabled { cursor: wait; opacity: .68; }
.talky-qr-actions button svg { flex: 0 0 19px; width: 19px; height: 19px; }
.talky-qr-actions button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.talky-qr-scanner { display: grid; justify-items: stretch; gap: 14px; }
.talky-qr-reader { width: 100%; min-height: 260px; aspect-ratio: 1; overflow: hidden; border: 0 !important; border-radius: 21px; background: #111; }
.talky-qr-reader video { width: 100% !important; height: 100% !important; object-fit: cover; }
.talky-qr-reader img { max-width: 100%; }
.talky-qr-scanner-status { min-height: 20px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; text-align: center; }
.talky-qr-scanner-status.is-error { color: var(--danger); }
.talky-qr-scanner > .secondary-button { width: 100%; }
.modal-footer { display: flex; gap: 10px; padding: 13px 18px max(13px, env(safe-area-inset-bottom)); border-block-start: 1px solid var(--line); background: #fff; }
.modal-footer > * { flex: 1; }
.message-reaction-user-list { display: grid; gap: 8px; }
.message-reaction-user { display: flex; min-width: 0; align-items: center; gap: 11px; padding: 9px 10px; border: 1px solid #e7e9f2; border-radius: 16px; background: #fff; }
.message-reaction-user > span:not(.avatar) { display: grid; min-width: 0; flex: 1; gap: 2px; }
.message-reaction-user strong, .message-reaction-user small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-reaction-user strong { color: var(--ink); font-size: 14px; }
.message-reaction-user small { color: var(--muted); font-size: 11px; }
.message-reaction-user b { font-size: 22px; }
.modal-card.media-preview-modal { width: min(100%, 560px); max-height: min(820px, calc(100dvh - 36px)); }
.media-preview-modal .modal-body { padding: 16px 18px 18px; background: #f5f6fb; }
.media-preview-selection { display: grid; gap: 14px; }
.media-preview-summary { display: flex; min-width: 0; align-items: baseline; gap: 9px; padding-inline: 2px; }
.media-preview-summary strong { color: var(--ink); font-size: 14px; }
.media-preview-summary span { color: var(--primary); font-size: 12px; font-weight: 750; }
.media-preview-summary small { margin-inline-start: auto; color: var(--muted); font-size: 11px; }
.media-preview-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.media-preview-selection.count-1 .media-preview-grid,
.media-preview-selection.count-2 .media-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-preview-selection.count-1 .media-preview-item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.media-preview-item, .media-preview-add { position: relative; min-width: 0; aspect-ratio: 1; overflow: hidden; border-radius: 16px; background: #e9ebf3; }
.media-preview-item { margin: 0; box-shadow: 0 7px 20px rgba(27,31,61,.09); }
.media-preview-item img, .media-preview-item video { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-preview-item.is-video { background: #161a2c; }
.media-preview-video-mark { position: absolute; display: inline-flex; align-items: center; gap: 4px; inset-block-start: 8px; inset-inline-start: 8px; padding: 4px 7px; border-radius: 999px; color: #fff; background: rgba(18,22,42,.72); font-size: 10px; font-weight: 700; backdrop-filter: blur(8px); }
.media-preview-video-mark svg { width: 13px; height: 13px; }
.media-preview-remove { position: absolute; width: 32px; height: 32px; inset-block-start: 7px; inset-inline-end: 7px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; color: #fff; background: rgba(18,22,42,.72); box-shadow: 0 4px 12px rgba(5,8,25,.24); backdrop-filter: blur(8px); }
.media-preview-remove svg { width: 16px; height: 16px; }
.media-preview-add { display: grid; align-content: center; justify-items: center; gap: 7px; border: 2px dashed #cfd3df; color: var(--primary); background: #fff; font-size: 12px; font-weight: 700; }
.media-preview-add:hover, .media-preview-add:focus-visible { border-color: var(--primary); background: var(--primary-soft); }
.media-preview-add svg { width: 27px; height: 27px; }
.media-preview-file-list { position: relative; display: grid; gap: 9px; }
.media-preview-file, .media-preview-file-add { display: flex; min-width: 0; min-height: 64px; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 15px; background: #fff; box-shadow: 0 6px 18px rgba(27,31,61,.06); }
.media-preview-file-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--primary); background: var(--primary-soft); }
.media-preview-file-icon svg { width: 23px; height: 23px; }
.media-preview-file-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.media-preview-file-copy strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.media-preview-file-copy small { color: var(--muted); font-size: 11px; }
.media-preview-file-remove { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: var(--danger); background: #fff0f2; }
.media-preview-file-remove svg { width: 17px; height: 17px; }
.media-preview-file-add { justify-content: center; border: 2px dashed #cfd3df; color: var(--primary); background: rgba(255,255,255,.7); box-shadow: none; font-size: 12px; font-weight: 700; }
.media-preview-file-add svg { width: 22px; height: 22px; }
.media-preview-caption { width: 100%; min-height: 46px; max-height: 112px; resize: none; padding: 12px 14px; border: 1.5px solid #dfe2ec; border-radius: 15px; color: var(--text); background: #fff; line-height: 20px; }
.media-preview-caption:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(72,84,232,.1); }
.media-preview-uploading { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--primary); font-size: 12px; font-weight: 700; }
.media-preview-uploading::before { width: 17px; height: 17px; box-sizing: border-box; border: 2px solid rgba(72,84,232,.2); border-block-start-color: var(--primary); border-radius: 50%; content: ""; animation: mediaUploadSpin .8s linear infinite; }
.media-preview-selection.is-uploading .media-preview-grid::after,
.media-preview-selection.is-uploading .media-preview-file-list::after { position: absolute; inset: 0; border-radius: 16px; background: rgba(255,255,255,.52); content: ""; backdrop-filter: blur(1px); }
@keyframes mediaUploadSpin { to { transform: rotate(360deg); } }
.field-group { display: grid; gap: 7px; margin-block-end: 16px; }
.field-group > label { color: #676c7f; font-size: 12px; font-weight: 700; }
.text-input, .text-area { width: 100%; padding: 13px 14px; border: 1.5px solid #e7e9f0; border-radius: 14px; background: #f9f9fc; transition: border .2s, background .2s; }
.text-input:focus, .text-area:focus { border-color: var(--primary); background: #fff; }
.form-help { margin: 0 0 16px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.email-current { display: flex; align-items: center; gap: 12px; margin-block-end: 14px; padding: 13px 14px; border-radius: 14px; color: var(--primary); background: var(--primary-soft); }
.email-current > span:first-child { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #fff; }
.email-current svg { width: 20px; height: 20px; }
.email-current > span:last-child { display: grid; min-width: 0; gap: 3px; }
.email-current small { color: var(--muted); font-size: 11px; }
.email-current strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.email-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.email-code-row .secondary-button { min-width: 116px; padding-inline: 12px; white-space: nowrap; }
.privacy-lock-now-button { width: 100%; margin-block-end: 16px; }
.privacy-lock-now-button svg { width: 20px; height: 20px; }
.settings-page { display: flex; min-height: min(360px, calc(100dvh - 154px)); flex-direction: column; }
.settings-menu-card { overflow: hidden; border: 1px solid #e7e9f1; border-radius: 17px; background: #fff; }
.settings-menu-row { display: flex; width: 100%; min-height: 64px; align-items: center; gap: 13px; padding: 0 15px; background: #fff; text-align: start; }
.settings-menu-row + .settings-menu-row { border-block-start: 1px solid #eef0f5; }
.settings-menu-row:hover { background: #fafaff; }
.settings-menu-label { min-width: 0; flex: 1; font-weight: 700; }
.settings-toggle-row { cursor: pointer; }
.settings-toggle-row.is-disabled { cursor: default; opacity: .62; }
.settings-toggle-row.is-disabled:hover { background: #fff; }
.settings-menu-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.settings-menu-copy strong { font-weight: 700; }
.settings-menu-copy small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.settings-version { display: flex; justify-content: center; gap: 6px; margin: auto 0 0; padding: 28px 8px 2px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.4; text-align: center; }
.settings-version strong { color: inherit; font-weight: 700; }
.appearance-current-card { display: flex; align-items: center; gap: 14px; padding: 15px; border: 2px solid var(--primary); border-radius: 18px; background: var(--primary-soft); }
.appearance-preview { position: relative; display: block; flex: 0 0 58px; width: 58px; height: 58px; overflow: hidden; border-radius: 18px; background: linear-gradient(145deg,#6d74ff,#3e4ae9); box-shadow: 0 8px 18px rgba(74,87,238,.24); }
.appearance-preview span { position: absolute; border-radius: 50%; background: rgba(255,255,255,.28); }
.appearance-preview span:first-child { width: 36px; height: 36px; inset: 7px auto auto 7px; }
.appearance-preview span:last-child { width: 19px; height: 19px; inset: auto 7px 7px auto; background: #45caa1; }
.appearance-current-copy { display: grid; min-width: 0; flex: 1; gap: 4px; }
.appearance-current-copy strong { color: var(--ink); font-size: 15px; }
.appearance-current-copy small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.appearance-selected { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); }
.appearance-selected svg { width: 17px; height: 17px; }
.field-error { margin: -6px 0 12px; color: var(--danger); font-size: 12px; font-weight: 650; }
@media (max-width: 380px) { .email-code-row { grid-template-columns: 1fr; } .email-code-row .secondary-button { width: 100%; } }
.text-area { min-height: 96px; resize: vertical; }
.form-hint { margin: -7px 0 16px; color: var(--muted); font-size: 11px; }
.language-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.language-option { display: flex; min-width: 0; min-height: 50px; align-items: center; gap: 9px; padding: 8px 11px; border: 1.5px solid #e9ebf2; border-radius: 14px; background: #fff; text-align: start; }
.language-option:hover { background: #fafaff; }
.language-option.is-selected { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.language-code { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: #777c8e; background: #f0f1f5; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.language-option.is-selected .language-code { color: #fff; background: var(--primary); }
.language-flag { display: block; flex: 0 0 34px; width: 34px; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid rgba(18,23,48,.1); border-radius: 5px; background: #f0f1f5; box-shadow: 0 1px 3px rgba(18,23,48,.1); }
.language-option.is-selected .language-flag { border-color: rgba(79,92,246,.45); box-shadow: 0 0 0 3px rgba(79,92,246,.1); }
.language-name { overflow: hidden; flex: 1; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.language-option svg { display: none; width: 18px; height: 18px; }
.language-option.is-selected svg { display: block; }
.member-picker-search { position: relative; margin-bottom: 12px; }
.member-picker-search > span { position: absolute; z-index: 1; inset-inline-start: 14px; top: 50%; display: grid; width: 20px; height: 20px; place-items: center; color: var(--muted); pointer-events: none; transform: translateY(-50%); }
.member-picker-search > span svg { width: 19px; height: 19px; }
.member-picker-search .text-input { padding-inline-start: 44px; }
.member-picker { display: grid; gap: 8px; }
.member-option[hidden], .member-picker-empty[hidden] { display: none; }
.member-option { position: relative; display: flex; min-height: 58px; align-items: center; gap: 11px; padding: 8px 11px; border: 1px solid #eceef3; border-radius: 15px; background: #fff; cursor: pointer; }
.member-option input { position: absolute; opacity: 0; pointer-events: none; }
.member-check { display: grid; flex: 0 0 22px; width: 22px; height: 22px; place-items: center; border: 1.5px solid #d7dae5; border-radius: 7px; color: transparent; }
.member-option input:checked ~ .member-check { border-color: var(--primary); color: #fff; background: var(--primary); }
.member-check svg { width: 15px; height: 15px; }
.member-name { min-width: 0; flex: 1; font-size: 14px; font-weight: 650; }
.chat-folder-manager { display: grid; gap: 9px; }
.chat-folder-manage-row { display: flex; min-height: 62px; align-items: center; overflow: hidden; border: 1px solid #e9ebf2; border-radius: 16px; background: #fff; }
.chat-folder-manage-main { display: flex; min-width: 0; flex: 1; align-items: center; gap: 12px; padding: 10px 13px; background: transparent; text-align: start; }
.chat-folder-manage-main > svg { flex: 0 0 23px; width: 23px; height: 23px; color: var(--primary); }
.chat-folder-manage-main > span { display: grid; min-width: 0; gap: 3px; }
.chat-folder-manage-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-folder-manage-main small { color: var(--muted); font-size: 11px; }
.chat-folder-delete { flex: 0 0 46px; width: 46px; height: 46px; margin-inline-end: 5px; color: var(--danger); }
.chat-folder-create { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 8px; margin-top: 5px; }
.chat-folder-create svg { width: 18px; height: 18px; }
.chat-folder-conversation-picker { max-height: min(48vh, 430px); overflow-y: auto; padding-inline-end: 2px; }
.auto-delete-description { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.scheduled-message-page { display: grid; gap: 18px; padding: 20px 16px 36px; }
.scheduled-message-form { display: grid; gap: 18px; padding: 2px; }
.scheduled-message-page > .auto-delete-description { margin: 0; padding-inline: 2px; font-size: 14px; }
.scheduled-message-form .field-group { margin-block-end: 0; }
.scheduled-message-add { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 17px; }
.scheduled-message-add svg, .scheduled-message-delete svg, .scheduled-message-form .secondary-button svg { width: 18px; height: 18px; }
.scheduled-message-list { display: grid; gap: 14px; }
.scheduled-message-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 8px 24px rgba(28,34,67,.055); }
.scheduled-message-main { min-width: 0; border: 0; background: transparent; padding: 17px 16px; text-align: start; display: grid; gap: 9px; color: var(--text); }
.scheduled-message-main:hover, .scheduled-message-main:focus-visible { background: #fafaff; }
.scheduled-message-title { display: flex; align-items: center; gap: 9px 12px; flex-wrap: wrap; }
.scheduled-message-title strong { min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
.scheduled-message-title .status-pill.is-disabled { color: var(--muted); }
.scheduled-message-preview { display: -webkit-box; overflow: hidden; color: var(--text); line-height: 1.5; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.scheduled-message-meta { color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.scheduled-message-error { color: var(--danger); font-size: 12px; line-height: 1.4; }
.scheduled-message-delete { width: 56px; border: 0; border-inline-start: 1px solid var(--line); background: #fff; color: var(--danger); display: grid; place-items: center; }
.scheduled-message-delete:hover, .scheduled-message-delete:focus-visible { background: #fff3f5; }
.scheduled-weekdays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.scheduled-weekday { position: relative; cursor: pointer; }
.scheduled-weekday input { position: absolute; opacity: 0; pointer-events: none; }
.scheduled-weekday span { min-height: 44px; display: grid; place-items: center; padding: 5px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: var(--surface); font-size: 13px; text-align: center; }
.scheduled-weekday input:checked + span { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.auto-delete-option { min-height: 52px; }
.translation-settings-form { display: grid; gap: 2px; }
.translation-settings-form .translation-toggle { min-height: 56px; margin: 0 0 16px; padding-inline: 14px; border: 1px solid #e7e9f0; border-radius: 14px; }
.translation-settings-form .field-group { margin-block-end: 8px; }
.translation-settings-form select.text-input { appearance: auto; min-height: 48px; }
.translation-direction { justify-self: center; margin: 0 0 4px; color: var(--primary); font-size: 20px; font-weight: 800; }
.modal-card.details-modal { display: block; overflow-x: hidden; overflow-y: auto; animation: none; transform: none; overscroll-behavior: contain; }
.details-modal .modal-header { position: sticky; z-index: 3; width: 100%; height: 64px; min-height: 64px; inset-block-start: 0; background: #fff; }
.details-modal .modal-body { width: 100%; min-height: auto; overflow: visible; padding: 0; background: #f7f8fb; }
.details-modal .modal-footer { position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important; padding: 0 !important; border: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.details-page { min-height: 100%; padding-block-end: 28px; }
.detail-profile { display: flex; align-items: center; gap: 20px; padding: 28px 25px 34px; background: #fff; }
.avatar.detail-avatar { flex: 0 0 92px; width: 92px; height: 92px; border-radius: 50%; font-size: 38px; }
.detail-profile > div { min-width: 0; flex: 1; }
.detail-profile strong { display: block; overflow: hidden; margin-block-end: 8px; font-size: 21px; text-overflow: ellipsis; white-space: nowrap; }
.detail-name-line { display: flex; min-width: 0; align-items: center; gap: 7px; margin-block-end: 8px; }
.detail-profile .detail-name-line strong { min-width: 0; margin-block-end: 0; }
.detail-profile p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.detail-profile .detail-signature { display: -webkit-box; overflow: hidden; line-height: 1.45; overflow-wrap: anywhere; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.detail-copy-field { display: flex; min-width: 0; max-width: 100%; align-items: center; gap: 5px; margin-block-start: 4px; padding: 1px 3px; border-radius: 6px; color: var(--muted); background: transparent; font-size: 13px; text-align: start; }
.detail-copy-field span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-copy-field svg { width: 13px; height: 13px; flex: 0 0 13px; opacity: .7; }
.detail-copy-field:hover, .detail-copy-field:focus-visible { color: var(--primary); background: var(--primary-soft); }
.detail-list { margin-block-start: 14px; }
.detail-row { display: flex; width: 100%; min-height: 60px; align-items: center; gap: 12px; padding: 13px 22px; border-block-end: 1px solid #eef0f5; color: var(--text); background: #fff; text-align: start; }
.detail-row > span { min-width: 0; flex: 1; font-weight: 650; }
.detail-row > strong { overflow: hidden; max-width: 58%; color: var(--muted); font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.detail-row > i:not(.switch-control) { display: grid; flex: 0 0 20px; width: 20px; place-items: center; color: #a4a9b7; }
.detail-row > i:not(.switch-control) svg { width: 18px; height: 18px; }
.detail-row.danger > span { color: var(--danger); }
.detail-toggle { cursor: pointer; }
.detail-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.switch-control { position: relative; flex: 0 0 48px; width: 48px; height: 28px; border: 1px solid #d9dce5; border-radius: 999px; background: #eef0f4; transition: border-color .2s, background-color .2s; }
.switch-control::after { position: absolute; width: 24px; height: 24px; inset-block-start: 1px; inset-inline-start: 1px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(20,25,50,.2); content: ""; transition: inset-inline-start .2s; }
.detail-toggle input:checked + .switch-control { border-color: var(--primary); background: var(--primary); }
.detail-toggle input:checked + .switch-control::after { inset-inline-start: 21px; }
.detail-action-stack { display: grid; margin-block-start: 14px; background: #fff; }
.detail-primary-action, .detail-danger-action { min-height: 59px; border-block-end: 1px solid #eef0f5; background: #fff; font-size: 16px; font-weight: 750; }
.detail-primary-action { color: #385f98; }
.detail-danger-action { color: var(--danger); }
.group-detail-summary { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-block-end: 1px solid #eef0f5; background: #fff; }
.group-detail-avatar-button { position: relative; display: block; flex: 0 0 82px; width: 82px; height: 82px; padding: 0; border-radius: 50%; background: transparent; }
.group-detail-avatar-button.is-readonly { cursor: default; }
.avatar.detail-group-avatar { width: 82px; height: 82px; border-radius: 50%; font-size: 30px; }
.group-detail-avatar-button .camera-dot { width: 27px; height: 27px; inset-inline-end: -4px; inset-block-end: -4px; }
.group-detail-avatar-button.is-uploading .avatar { opacity: .42; }
.group-detail-avatar-button.is-uploading::after { position: absolute; width: 29px; height: 29px; inset: 0; margin: auto; border: 3px solid rgba(255,255,255,.55); border-block-start-color: #fff; border-radius: 50%; content: ""; animation: avatarUploadSpin .7s linear infinite; }
.group-detail-summary-copy { display: grid; min-width: 0; flex: 1; gap: 8px; }
.group-detail-summary-copy strong { overflow: hidden; color: var(--ink); font-size: 21px; text-overflow: ellipsis; white-space: nowrap; }
.group-detail-summary-copy span { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.group-public-id-copy { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 5px; padding: 2px 4px; border-radius: 6px; color: var(--muted); background: transparent; text-align: start; }
.group-public-id-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-public-id-copy svg { width: 13px; height: 13px; flex: 0 0 13px; opacity: .7; }
.group-public-id-copy:hover, .group-public-id-copy:focus-visible { color: var(--primary); background: var(--primary-soft); }
.detail-member-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px 8px; padding: 25px 18px 20px; background: #fff; }
.member-tile { display: grid; min-width: 0; justify-items: center; align-content: start; gap: 6px; padding: 0; border: 0; color: var(--text); background: transparent; text-align: center; }
.member-tile .avatar, .member-tool > span { width: 48px; height: 48px; }
.member-tile .avatar { border-radius: 50%; }
.member-tool > span { border-radius: 16px; }
.member-tile strong, .member-tile small { overflow: hidden; width: 100%; font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.member-tile small { color: var(--muted); }
.member-tool > span { display: grid; place-items: center; border: 1px dashed #cfd3df; color: #8d93a4; background: #fafbfc; }
.member-tool svg { width: 23px; height: 23px; }
.all-members-page { min-height: 100%; padding: 14px 16px 28px; }
.all-members-search { position: sticky; z-index: 2; inset-block-start: 0; }
.all-members-list { display: grid; gap: 9px; }
.all-members-item { display: grid; gap: 7px; cursor: default; }
.all-members-profile { display: flex; width: 100%; align-items: center; gap: 11px; padding: 0; border: 0; background: transparent; font: inherit; text-align: start; cursor: pointer; }
.group-member-status { display: grid; flex: 0 0 auto; justify-items: end; gap: 4px; }
.status-pill.is-muted { color: #f59e0b; }
.group-member-actions { display: flex; justify-content: flex-end; gap: 8px; padding-inline-start: 55px; }
.group-member-action { min-height: 30px; padding: 4px 12px; border: 1px solid #dfe3ee; border-radius: 9px; color: var(--primary); background: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.group-member-action.is-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, #fff); }
.group-member-action:disabled { opacity: .55; cursor: wait; }
.all-member-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.all-member-copy .member-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.all-member-copy small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.all-members-empty { display: grid; justify-items: center; gap: 10px; padding: 90px 24px; color: var(--muted); text-align: center; }
.all-members-empty svg { width: 36px; height: 36px; color: #b0b4c2; }
.form-hint.standalone { margin: 12px 0; text-align: center; }
.confirm-layer { z-index: 40; }
.confirm-card { position: relative; width: min(100%, 360px); padding: 27px 24px 23px; border-radius: 25px; background: #fff; box-shadow: 0 30px 90px rgba(14,17,42,.3); text-align: center; animation: modalIn .25s ease both; }
.confirm-icon { display: grid; width: 54px; height: 54px; margin: 0 auto 15px; place-items: center; border-radius: 18px; color: var(--danger); background: #fff0f2; }
.confirm-icon svg { width: 27px; height: 27px; }
.confirm-card h2 { margin: 0; font-size: 20px; }
.confirm-card p { margin: 9px 0 22px; color: var(--muted); font-size: 14px; }
.confirm-option { display: flex; margin: -3px 0 22px; padding: 13px 14px; align-items: center; gap: 11px; border: 1px solid #e6e8f0; border-radius: 15px; color: var(--text); background: #f7f8fc; text-align: start; cursor: pointer; }
.confirm-option[hidden] { display: none; }
.confirm-option input { width: 21px; height: 21px; flex: 0 0 21px; accent-color: var(--primary); }
.confirm-option span { min-width: 0; font-size: 14px; line-height: 1.4; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.toast-region { position: fixed; display: grid; width: min(calc(100% - 36px), 420px); inset-block-start: max(24px, env(safe-area-inset-top)); inset-inline: 18px; z-index: 60; gap: 9px; margin-inline: auto; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.25); border-radius: 15px; color: #fff; background: #1b1e34; box-shadow: 0 15px 36px rgba(20,23,48,.22); font-size: 13px; animation: toastIn .25s ease; }
.toast.success svg { color: #56e28a; }
.toast.error svg { color: #ff7a87; }
.toast svg { flex: 0 0 20px; width: 20px; height: 20px; }
@keyframes toastIn { from { opacity: 0; } to { opacity: 1; } }
html[dir="rtl"] .chevron, html[dir="rtl"] .modal-close svg { transform: scaleX(-1); }
html[dir="rtl"] .message-line { flex-direction: row-reverse; }
html[dir="rtl"] .message-line.mine { flex-direction: row; }

/* 一对一 WebRTC 语音/视频通话。 */
.call-layer { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(16,18,35,.72); backdrop-filter: blur(12px); }
.call-layer[hidden] { display: none; }
.call-card { position: relative; display: grid; width: min(calc(100% - 28px), 620px); height: min(calc(100dvh - 28px), 900px); grid-template-rows: minmax(0,1fr) auto auto; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 30px; color: #fff; background: radial-gradient(circle at 50% 20%, #4f5de1 0, #252a56 42%, #15182f 100%); box-shadow: 0 35px 110px rgba(4,7,24,.5); }
.call-minimize-button { position: absolute; inset-block-start: max(18px, env(safe-area-inset-top)); inset-inline-start: 18px; z-index: 7; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; color: #fff; background: rgba(9,12,31,.34); box-shadow: 0 10px 24px rgba(4,7,24,.2); backdrop-filter: blur(10px); }
.call-minimize-button:hover { background: rgba(255,255,255,.2); }
.call-minimize-button svg { width: 23px; height: 23px; }
.call-media-stage { position: relative; display: grid; min-height: 0; place-items: center; overflow: hidden; }
.call-peer-avatar { position: relative; z-index: 2; filter: drop-shadow(0 18px 32px rgba(5,8,30,.25)); }
.avatar.call-avatar { width: 126px; height: 126px; border: 4px solid rgba(255,255,255,.3); border-radius: 50%; font-size: 45px; }
.avatar.call-avatar .presence { display: none; }
.call-summary { position: relative; z-index: 3; padding: 8px 28px 18px; text-align: center; }
.call-summary h2 { overflow: hidden; margin: 0; font-size: 26px; text-overflow: ellipsis; white-space: nowrap; }
.call-summary p { min-height: 24px; margin: 8px 0 2px; color: rgba(255,255,255,.76); font-size: 15px; }
.call-duration { display: block; min-height: 21px; color: rgba(255,255,255,.88); font-variant-numeric: tabular-nums; }
.call-controls { position: relative; z-index: 3; display: flex; align-items: flex-start; justify-content: center; gap: clamp(12px, 4vw, 24px); min-height: 126px; padding: 15px 18px max(24px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, rgba(8,10,26,.38)); }
.call-control { display: inline-flex; width: 74px; flex-direction: column; align-items: center; gap: 8px; border: 0; color: rgba(255,255,255,.92); background: transparent; font-size: 11px; line-height: 1.25; cursor: pointer; }
.call-control svg { width: 58px; height: 58px; padding: 16px; border-radius: 50%; color: #fff; background: rgba(255,255,255,.16); stroke-width: 1.8; box-shadow: 0 10px 25px rgba(2,5,22,.18); transition: transform .18s, background .18s; }
.call-control:hover svg { background: rgba(255,255,255,.25); }
.call-control:active svg { transform: scale(.92); }
.call-control.is-active svg { background: #5865f2; }
.call-control.is-off svg { background: rgba(9,12,31,.52); }
.call-control.is-danger svg { background: #f0525e; }
.call-control.is-accept svg { background: #27c875; }
.call-video { object-fit: cover; background: #11152c; }
.call-video-primary { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.call-video-thumbnail { position: absolute; inset-block-start: max(18px, env(safe-area-inset-top)); inset-inline-end: 18px; z-index: 4; width: min(29%, 150px); padding: 0; aspect-ratio: 3 / 4; overflow: hidden; border: 2px solid rgba(255,255,255,.55); border-radius: 18px; background: #242a4d; box-shadow: 0 12px 30px rgba(5,7,23,.32); cursor: pointer; }
.call-video-thumbnail .call-video { display: block; width: 100%; height: 100%; }
.call-video-thumbnail:disabled { cursor: default; }
.call-video-thumbnail:focus-visible { outline: 3px solid rgba(255,255,255,.9); outline-offset: 3px; }
.call-local-video { transform: scaleX(-1); }
.call-layer.is-environment .call-local-video { transform: none; }
.call-layer.is-video .call-card { background: #11152c; }
.call-layer.is-video .call-media-stage { grid-row: 1 / 3; }
.call-layer.is-video .call-summary { position: absolute; inset-inline: 0; inset-block-end: 124px; background: linear-gradient(180deg, transparent, rgba(7,9,23,.7)); }
.call-layer.is-video .call-controls { position: absolute; inset-inline: 0; inset-block-end: 0; }
.call-layer.is-video.has-remote-video .call-peer-avatar { opacity: 0; pointer-events: none; }
.call-layer.is-minimized { display: block; padding: 0; background: transparent; pointer-events: none; backdrop-filter: none; }
.call-mini-card { position: absolute; inset-block-start: max(76px, calc(env(safe-area-inset-top) + 64px)); inset-inline-end: max(12px, env(safe-area-inset-right)); display: flex; width: min(calc(100vw - 24px), 300px); min-height: 82px; align-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 22px; color: #fff; background: linear-gradient(135deg, rgba(67,80,218,.98), rgba(22,27,61,.98)); box-shadow: 0 18px 45px rgba(8,12,37,.34); pointer-events: auto; backdrop-filter: blur(16px); }
.call-mini-restore { display: flex; min-width: 0; flex: 1; align-items: center; gap: 11px; padding: 11px 8px 11px 11px; color: inherit; background: transparent; text-align: start; }
.call-mini-media { position: relative; display: grid; width: 58px; height: 58px; flex: 0 0 58px; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-radius: 17px; background: rgba(255,255,255,.1); }
.call-mini-video, .call-mini-avatar { position: absolute; inset: 0; width: 100%; height: 100%; }
.call-mini-video { z-index: 2; object-fit: cover; background: #11152c; }
.call-mini-avatar { z-index: 3; display: grid; place-items: center; transition: opacity .15s; }
.call-layer.has-remote-video .call-mini-avatar { opacity: 0; pointer-events: none; }
.avatar.call-mini-avatar-image { width: 100%; height: 100%; border: 0; border-radius: 50%; font-size: 21px; }
.avatar.call-mini-avatar-image .presence { display: none; }
.call-mini-copy { display: grid; min-width: 0; flex: 1; gap: 2px; }
.call-mini-copy strong, .call-mini-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-mini-copy strong { font-size: 15px; }
.call-mini-copy span { color: rgba(255,255,255,.72); font-size: 12px; }
.call-mini-copy .call-duration { min-height: 16px; color: rgba(255,255,255,.9); font-size: 12px; font-variant-numeric: tabular-nums; }
.call-mini-end { display: grid; width: 44px; height: 44px; flex: 0 0 44px; margin-inline-end: 11px; place-items: center; border-radius: 50%; color: #fff; background: #f0525e; box-shadow: 0 8px 20px rgba(240,82,94,.28); }
.call-mini-end svg { width: 22px; height: 22px; }

@media (max-width: 600px), (max-width: 920px) and (max-height: 600px) and (orientation: landscape) {
  .app-header:has(.header-actions .icon-button:nth-child(3)) { grid-template-columns: 120px minmax(0, 1fr) 120px; }
  :root {
    --header-height: calc(64px + env(safe-area-inset-top));
    --nav-height: calc(70px + env(safe-area-inset-bottom));
  }
  .site-backdrop { display: none; }
  .app-shell { position: fixed; inset: 0; width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; min-height: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .app-header {
    grid-template-columns: 58px minmax(0, 1fr) 58px;
    padding-block-start: env(safe-area-inset-top);
    padding-block-end: 0;
    padding-inline-start: max(8px, env(safe-area-inset-left));
    padding-inline-end: max(8px, env(safe-area-inset-right));
  }
  .messages-stream {
    padding-inline-start: max(12px, env(safe-area-inset-left));
    padding-inline-end: max(12px, env(safe-area-inset-right));
  }
  .message-body { max-width: calc(100% - 48px); }
  .call-history-message { max-width: 100%; line-height: 1.35; white-space: normal; }
  .chat-compose {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px 36px 42px;
    gap: 4px;
    padding-block: 8px max(8px, env(safe-area-inset-bottom));
    padding-inline-start: max(6px, env(safe-area-inset-left));
    padding-inline-end: max(6px, env(safe-area-inset-right));
  }
  .chat-compose .icon-button { width: 36px; height: 42px; }
  .message-input { height: 42px; min-height: 42px; padding: 10px 12px; }
  .message-input-emoji-preview { padding: 10px 12px; }
  .send-button { width: 42px; height: 42px; }
  .composer-panel {
    max-height: min(300px, 38dvh);
    padding-inline-start: max(10px, env(safe-area-inset-left));
    padding-inline-end: max(10px, env(safe-area-inset-right));
    padding-block-end: max(18px, calc(env(safe-area-inset-bottom) + 8px));
  }
  .attachment-grid.has-call-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .attachment-grid.has-call-actions button { min-height: 78px; gap: 6px; padding: 9px 4px; line-height: 1.25; }
  .attachment-grid.has-call-actions svg { width: 25px; height: 25px; }
  .auth-topbar { padding-inline: 20px; }
  .auth-content { padding-inline: 24px; }
  .modal-layer { padding: 0; place-items: end center; }
  .modal-card { width: 100%; max-height: 91dvh; border-radius: 27px 27px 0 0; }
  .modal-card.media-preview-modal { width: 100%; max-height: 94dvh; }
  .media-preview-modal .modal-body { padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)); }
  .media-preview-grid,
  .media-preview-selection.count-2 .media-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-card.details-modal { height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .details-modal .modal-header { height: calc(64px + env(safe-area-inset-top)); min-height: calc(64px + env(safe-area-inset-top)); padding-block-start: calc(8px + env(safe-area-inset-top)); }
  .emoji-grid { grid-template-columns: repeat(8, 1fr); }
  .call-card { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .call-mini-card { inset-block-start: max(72px, calc(env(safe-area-inset-top) + 60px)); }
  .call-controls { gap: 4px; padding-inline: 6px; }
  .call-control { width: 58px; font-size: 10px; }
  .call-control svg { width: 48px; height: 48px; padding: 13px; }
}

@media (max-height: 760px) {
  .auth-content { padding-block-start: 14px; }
  .auth-hero { display: none; }
  .auth-heading { margin-block-end: 22px; }
  .auth-heading h1 { font-size: 29px; }
  .input-field { min-height: 56px; }
  .auth-form { gap: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  html.is-screenshot-protected body > * { visibility: hidden !important; }
  html.is-screenshot-protected body::after {
    position: fixed;
    inset: 0;
    display: grid;
    visibility: visible !important;
    content: "\1F512";
    place-items: center;
    color: #4854e8;
    background: #f6f7fb;
    font-size: 42px;
  }
}