/* Pulse workspace: layout and visual component layer.
   main.css retains established interaction states, media viewers and gestures. */
:root {
  --teal:#008b75; --teal-dark:#006657; --panel:#fff; --ink:#17272d;
  --muted:#657980; --line:#e3ebe8; --bubble-out:#dff5ea;
  --head-bg:#fff; --body-bg:#edf4f1; --bg:#edf5f2;
  --search-input-bg:#f6f9f8; --chat-row-hover:#f3f8f6; --chat-row-active:#e9f5f0;
  --composer-bg:#f9fcfb; --composer-input-bg:#fff;
  --profile-sheet-bg:#f5f8f7; --profile-row-border:#e7eeeb;
  --profile-label-color:#25383f; --profile-value-color:#657980;
  --empty-bg:#f0f6f3; --empty-title:#28463d;
  --shadow:0 1px 3px rgb(19 52 42 / 5%); --tick-read:#008b75;
  --chat-wallpaper:linear-gradient(125deg,#eef6f3,#e8f3ef);
  --side:296px; --rail:68px;
}
body[data-theme="dark"] {
  --teal:#32c7a7; --teal-dark:#72ddc5; --panel:#152923; --ink:#e4f0ea;
  --muted:#9aafa7; --line:#2b4038; --bubble-out:#1c4c3d; --bubble-in:#22382f;
  --head-bg:#152923; --body-bg:#0d1e18; --bg:#10231c;
  --search-input-bg:#20372d; --chat-row-hover:#20372d; --chat-row-active:#284b3d;
  --composer-bg:#152923; --composer-input-bg:#20372d;
  --profile-sheet-bg:#10231c; --profile-row-border:#2b4038;
  --profile-label-color:#e4f0ea; --profile-value-color:#9aafa7;
  --empty-bg:#10231c; --empty-title:#e4f0ea;
  --chat-wallpaper:linear-gradient(125deg,#10251d,#142c23);
}
button,input,textarea,select {font-family:inherit}
button {cursor:pointer}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible {outline:3px solid color-mix(in srgb,var(--teal) 55%,transparent);outline-offset:3px}
input:focus,textarea:focus,select:focus {border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 12%,transparent);outline:0}
.ui-icon {width:21px;height:21px;flex:none;fill:none!important;stroke:currentColor}
.btn {min-height:42px;border-radius:9px;font-size:14px;font-weight:600;box-shadow:none;padding:10px 18px}
.btn:not(.btn-secondary):not(.btn-danger) {background:var(--teal)}
.btn-secondary {background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.btn:hover {filter:brightness(.97)}
.icon-btn {border-radius:8px}
/* Authentication is a dedicated illustration-led surface, not a modal. */
#auth {--auth-green:#13845f;display:grid;grid-template-columns:minmax(0,1fr) 420px;align-items:stretch;place-items:stretch;inset:clamp(16px,4vh,40px) max(24px,calc((100vw - 1040px)/2));overflow:auto;background:var(--panel);border-radius:22px;box-shadow:0 16px 56px #174f4218;scrollbar-width:thin;scrollbar-color:#70a994 transparent}
.auth-story {min-height:0;position:relative;display:flex;flex-direction:column;padding:40px 36px;color:#fff;background:#064c36 url('../assets/auth-hero.png') center 53% / cover no-repeat;isolation:isolate}
.auth-story:before {content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#002d2bc9 0%,#003629a0 32%,transparent 50%,#002a25bf 100%)}
.story-brand {display:none}
.pulse-symbol {width:42px;height:42px;border:2px solid #3be2c3;border-radius:13px;display:grid;place-items:center;color:#76ffe1}
.pulse-symbol .ui-icon {width:29px;height:29px}
.story-copy h2 {font-size:clamp(30px,2.7vw,40px);line-height:1.12;letter-spacing:-1px;margin:16px 0 14px;font-weight:700}
.story-copy p {font-size:15px;line-height:1.6;color:#d0e9e2;margin:0;max-width:370px}
.story-benefits {margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);padding-top:24px;text-align:center;font-size:12px;line-height:1.5;color:#d9f4ed}
.story-benefits span+span {border-left:1px solid #4bbbb170}
.auth-card {align-self:center;justify-self:center;min-width:0;min-height:0;width:100%;max-width:420px;border-radius:0;box-shadow:none;padding:28px 32px;background:var(--panel);font-size:14px;line-height:1.5}
.auth-card .brand {text-transform:none;letter-spacing:-.3px;font-size:18px;color:var(--ink);font-weight:650;margin-bottom:22px}
.brand .logo {display:block;width:40px;height:40px;border-radius:0;background:none;filter:drop-shadow(0 4px 10px color-mix(in srgb,#0c9b74 30%,transparent))}
.brand .pulse-mark {display:none}
.auth-card h1 {font-size:28px;line-height:1.2;letter-spacing:-.6px;margin:0 0 8px;font-weight:650}
.auth-lead {font-size:14px;line-height:1.5;color:var(--muted);margin:0 0 18px}
.auth-card label {font-size:13px;font-weight:600;margin:12px 0 6px;display:block;color:var(--ink)}
.auth-card input:not([type=checkbox]) {height:44px;border:1px solid var(--line);border-radius:8px;background:var(--search-input-bg);font-size:14px;padding:0 13px}
.auth-card .password-input-wrap input {padding-right:44px}
.auth-card label.auth-remember {display:flex;font-size:12px;font-weight:400;align-items:center;gap:8px;margin:0;white-space:nowrap;color:var(--muted)}
.auth-options {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 4px;flex-wrap:wrap}
.auth-options:has(#rememberField.hidden):has(#forgotPasswordLinkWrap.hidden) {display:none}
.auth-options .auth-link-row {margin:0;font-size:12px}
.auth-remember input {accent-color:var(--auth-green);width:15px;height:15px;margin:0}
.auth-card .btn {width:100%;margin-top:12px;font-size:14px}
#authBtn {background:var(--auth-green);color:white;height:44px;box-shadow:0 4px 12px #13845f18}
.auth-card .switch {font-size:12px;line-height:1.6;color:var(--muted)}
#authForm>[data-i18n="auth.cookie_notice"] {padding:10px 12px;background:var(--search-input-bg);border-radius:8px;margin-top:14px;font-size:12px;line-height:1.45;text-align:left}
#authSwitch {margin-top:12px}
#authSwitch a,#authSwitch button {display:block;width:100%;padding:10px;border:1px solid var(--teal);color:var(--teal);background:transparent;border-radius:8px;margin-top:8px;font-size:13px;font-weight:600;text-decoration:none}
.auth-link-row a {text-decoration:underline;text-underline-offset:3px}
#auth a,#authSwitch button {color:var(--auth-green);border-color:var(--auth-green)}
.auth-card input:autofill {box-shadow:0 0 0 1000px var(--search-input-bg) inset;color:var(--ink)}
.auth-card input:-webkit-autofill {-webkit-box-shadow:0 0 0 1000px var(--search-input-bg) inset;-webkit-text-fill-color:var(--ink);caret-color:var(--ink)}
@media(min-width:641px) and (max-height:740px) {
  #auth {inset:16px max(24px,calc((100vw - 1040px)/2))}
  .auth-card {padding:20px 32px}
  .auth-card .brand {margin-bottom:16px}
  .auth-lead {margin-bottom:12px}
  .auth-card h1 {font-size:26px}
  .story-copy h2 {font-size:34px}
}
.err:empty {display:none}
/* Workspace geometry: every top bar is --bar tall, every sidebar block shares --gutter,
   and controls are --control tall, so edges and baselines line up across columns. */
:root {--bar:64px;--gutter:12px;--control:40px}
* {scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 35%,transparent) transparent}
#app,#app.profile-mode {display:grid;grid-template-columns:var(--rail) var(--side) minmax(0,1fr);height:100dvh;background:var(--panel)}
.workspace-rail {grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 0 12px;background:#073f34;color:#b9d5cb;z-index:25}
.rail-brand {height:var(--bar);flex:none;margin-bottom:8px;color:#d4fff1;display:grid;place-items:center}
.rail-brand .pulse-mark-flat {display:block;width:30px;height:30px}
.pulse-mark-flat-bubble {fill:#48d6b5}
.pulse-mark-flat-line {fill:none;stroke:#073f34;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.rail-control {position:relative;width:52px;height:52px;flex:none;border:0;border-radius:10px;background:none;color:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;font-size:10px;line-height:1.2}
.rail-control .ui-icon {width:20px;height:20px}
.rail-control span {max-width:100%;padding:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-control:hover,.rail-control.is-active {background:#ffffff14;color:#fff}
.rail-control.is-active:before {content:'';position:absolute;left:calc((100% - var(--rail))/2);top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:#48d6b5}
#supportReportSideBtn {margin-top:auto}
.sidebar {grid-column:2;grid-row:1;min-width:0;background:var(--panel);border-right:1px solid var(--line)}
/* The current-user card is the sidebar's top bar: same height and divider as the other columns. */
#app .side-head {order:0;position:relative;flex:none;display:flex;align-items:center;height:calc(var(--bar) + env(safe-area-inset-top));min-height:0;margin:0;padding:env(safe-area-inset-top) calc(var(--gutter) * 2) 0;gap:0;flex-wrap:nowrap;border:0;border-bottom:1px solid var(--line);border-radius:0;background-color:var(--panel)}
#app .side-head .me {position:relative;z-index:1;pointer-events:none;display:flex;align-items:center;min-width:0;flex:1;gap:12px}
#app .side-head .me .avatar {width:40px;height:40px;min-width:40px;font-size:14px}
#app .side-head .me-text {min-width:0;padding-right:24px}
#app .side-head .me .name {max-width:none;font-size:14px;font-weight:600;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .side-head .me .profile-value {font-size:12px;line-height:16px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-open {position:absolute;inset:0;width:100%;border:0;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:flex-end;padding:env(safe-area-inset-top) calc(var(--gutter) + 4px) 0}
.account-open .ui-icon {width:16px;height:16px}
.account-open:hover {background:var(--chat-row-hover);color:var(--ink)}
.account-open:focus-visible {outline-offset:-3px}
.chat-actions {position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:var(--gutter) var(--gutter) 0;border:0;overflow:visible;flex:none;z-index:5}
.workspace-create {display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;width:100%;height:var(--control);padding:0 10px;border:1px solid transparent;border-radius:10px;background:var(--teal);color:#fff;font-size:13px;font-weight:600;white-space:nowrap}
.workspace-create span {min-width:0;overflow:hidden;text-overflow:ellipsis}
.workspace-create .ui-icon {width:18px;height:18px}
.workspace-create-secondary {color:var(--teal-dark);background:color-mix(in srgb,var(--teal) 8%,var(--panel));border-color:color-mix(in srgb,var(--teal) 18%,var(--panel))}
.workspace-create:hover {filter:brightness(.97)}
.sidebar>.search {padding:var(--gutter);border:0;background:var(--panel);flex:none}
.sidebar>.search input {height:var(--control);font-size:13px;padding:0 var(--gutter);border:1px solid var(--line);border-radius:10px;background:var(--search-input-bg)}
.chats {flex:1;min-height:0;padding:0 var(--gutter) var(--gutter)}
.chat-row {border:0;border-radius:10px;margin:0 0 2px;overflow:hidden}
.chat-row-content {gap:12px;padding:10px var(--gutter);min-height:64px;border-radius:0}
.chat-row-swipe-action,.chat-row-swipe-action .chat-action-item {border-radius:0}
.chat-row-swipe-action {visibility:hidden}
.chat-row.swipe-open .chat-row-swipe-action,.chat-row:has(.chat-row-content[style*="transform"]) .chat-row-swipe-action {visibility:visible}
.chat-avatar.group-avatar {outline:none;border:0;box-shadow:none}
.chat-row .avatar {width:44px;height:44px;min-width:44px;font-size:15px;border:0;box-shadow:none}
/* Title/time and preview/badge are two aligned rows, not two independent columns. */
.chat-main {display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title time" "sub badge";column-gap:8px;row-gap:4px;align-items:center}
.chat-top,.chat-right {display:contents}
.chat-title-wrap {grid-area:title;min-width:0;gap:6px}
.chat-title {font-size:14px;font-weight:600;line-height:20px}
.chat-type-pill,body[data-theme="dark"] .chat-type-pill {flex:none;height:18px;padding:0 7px;border-radius:999px;font-size:10px;font-weight:700;line-height:18px;letter-spacing:.02em;color:var(--teal-dark);background:color-mix(in srgb,var(--teal) 16%,var(--panel))}
.chat-time {grid-area:time;justify-self:end;font-size:11px;line-height:20px;color:var(--muted)}
.chat-sub {grid-area:sub;margin:0;font-size:12px;line-height:20px}
.chat-unread-badge {grid-area:badge;justify-self:end;display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;font-size:11px;line-height:1;background:var(--teal)}
.chat-title-wrap .presence-pulse-icon {width:14px;height:14px}
.conversation {grid-column:3;grid-row:1;min-width:0}
.conv-head {height:var(--bar);min-height:var(--bar);padding:0 calc(var(--gutter) * 2);gap:12px;background:var(--panel);border-bottom:1px solid var(--line)}
.conv-head .avatar {width:40px;height:40px;min-width:40px}
.conv-head .meta {min-width:0;flex:1}
#convTitle {display:flex;align-items:center;gap:8px;min-width:0;font-size:15px;font-weight:650;line-height:1.35;white-space:nowrap;overflow:hidden}
#convTitle .conv-title-text {min-width:0;overflow:hidden;text-overflow:ellipsis}
#convMembers {font-size:12px;line-height:1.35;color:var(--muted);margin-top:2px}
.conversation-info {margin-left:auto;flex:none;width:36px;height:36px;display:grid;place-items:center;color:var(--muted)}
.conversation-info:hover {color:var(--ink)}
.thread {background:var(--chat-wallpaper);padding:24px clamp(20px,4vw,64px);scrollbar-gutter:stable}
.rows {max-width:1040px;width:100%;margin:0 auto}
.msg {max-width:min(72%,560px);font-size:14px;line-height:1.5;padding:8px 12px;border-radius:12px;margin:8px 0 2px;box-shadow:0 1px 1px #163d2c08}
.msg.in {border-top-left-radius:4px}
.msg.out {border-top-right-radius:4px}
.msg.is-continuation {margin-top:2px}
.msg.is-continuation.in {border-top-left-radius:12px}
.msg.is-continuation.out {border-top-right-radius:12px}
.msg.msg-group-in {margin-left:40px}
.msg .message-sender-avatar {position:absolute;left:-40px;top:0;width:28px;height:28px;min-width:28px;font-size:11px}
.msg .sender {font-size:12px;line-height:1.35;margin-bottom:2px;font-weight:600}
.msg .meta-line {font-size:11px;line-height:1.3;margin-top:4px;color:var(--muted)}
.msg .msg-reply-preview {border-left-width:2px;border-radius:6px;padding:6px 10px;background:color-mix(in srgb,var(--panel) 45%,transparent)}
.message-day {align-self:center;margin:16px 0;padding:4px 12px;border-radius:12px;background:color-mix(in srgb,var(--panel) 85%,transparent);color:var(--muted);font-size:12px;line-height:1.4}
.composer {padding:var(--gutter) calc(var(--gutter) * 2);background:var(--panel);border-top:1px solid var(--line)}
.composer-row {gap:8px;align-items:flex-end}
.composer textarea {font-size:14px;line-height:20px;min-height:var(--control);height:var(--control);padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:var(--search-input-bg)}
.composer .icon-btn {width:var(--control);min-width:var(--control);height:var(--control);border-radius:10px;display:grid;place-items:center;color:var(--muted)}
.composer .icon-btn:hover {color:var(--ink)}
.composer .send {width:var(--control);height:var(--control);min-width:var(--control);border-radius:10px;box-shadow:none;background:var(--teal);color:white;display:grid;place-items:center}
.composer .send svg {width:20px;height:20px}
/* Profile and contacts occupy the work area; never wash out a second view. */
#app.profile-mode .conversation {display:none;opacity:1;filter:none}
#app>.profile-sheet {grid-column:3;grid-row:1;position:relative;inset:auto;width:100%;height:100%;z-index:10;overflow:auto;background:var(--profile-sheet-bg)}
.profile-head {height:var(--bar);min-height:var(--bar);font-size:18px;font-weight:650;justify-content:flex-start;gap:12px;padding:0 24px;border-bottom:1px solid var(--line);background:var(--panel)}
.profile-head .profile-back {position:static;width:32px;height:32px;min-width:32px;font-size:23px;background:transparent}
.profile-main {width:100%;max-width:740px;margin:0 auto;padding:18px 24px 24px;overflow:visible}
.profile-avatar-wrap {margin:0 0 24px}
.profile-avatar {width:100px;height:100px;font-size:34px;box-shadow:0 4px 16px #0c382616}
.profile-card {border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.profile-row {min-height:58px;padding:12px 18px;gap:14px}
.profile-label {font-size:13px;font-weight:500}
.profile-value {font-size:13px}
.profile-card select {font-size:12px}
.profile-password-box {margin-top:20px;padding:20px;border-radius:12px;box-shadow:none;border:1px solid var(--line)}
.profile-setting-section {display:grid;grid-template-columns:128px minmax(0,1fr);gap:18px;margin-bottom:12px}
.profile-section-heading h2 {font-size:13px;margin:14px 0 5px;font-weight:650}
.profile-section-heading p {font-size:11px;color:var(--muted);line-height:1.5;margin:0}
.profile-setting-section .profile-password-box {margin:0;padding:10px 16px;border:0;border-radius:0;background:var(--panel)}
.profile-setting-section .profile-password-head {margin:0;min-height:24px}
.profile-setting-section .profile-password-form:not(.hidden) {margin-top:12px}
.profile-setting-section .profile-row {min-height:44px;padding:8px 16px}
.profile-main>.profile-avatar-wrap {display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:18px;margin:0 0 18px;padding-left:146px}
.profile-avatar-wrap .profile-avatar {width:64px;height:64px;min-width:64px;min-height:64px;max-width:64px;max-height:64px;font-size:24px}
.profile-avatar-wrap .group-avatar-edit-btn {width:26px;height:26px;right:-3px;bottom:-2px;box-shadow:0 2px 6px #123a261a}
.profile-avatar-wrap .group-avatar-edit-btn svg {width:14px;height:14px}
#profilePanel .profile-card {border-radius:10px;box-shadow:none}
#profilePanel .profile-err:empty {display:none}
#profilePanel .profile-value {max-width:260px}
/* Values line up on one right edge: rows without an action reserve the 28px action slot. */
#profilePanel #profileEmailValue {margin-right:36px}
#profilePanel .profile-chevron {width:28px;text-align:center;flex:none}
#profilePanel .profile-password-title {font-size:13px;font-weight:500}
.profile-identity-copy h2 {font-size:20px;margin:0 0 5px;letter-spacing:-.3px}
.profile-identity-copy p {font-size:12px;color:var(--muted);margin:0}
.profile-edit-btn-icon .ui-icon {width:16px;height:16px}
.contacts-main {max-width:800px;width:100%;margin:0 auto;padding:24px}
.contacts-add-btn {min-height:42px;border-radius:9px;box-shadow:none;font-size:14px}
.contact-row {border-radius:10px;box-shadow:none}
#contactsPanel .profile-head {justify-content:flex-start}
#contactsPanel .contacts-add-btn {margin:0 0 0 auto;width:auto;padding:8px 14px;min-height:36px;font-size:13px;gap:8px}
#contactsPanel .contacts-add-btn svg {width:17px;height:17px}
#contactsPanel .profile-main {max-width:740px;padding-top:24px}
.contacts-toolbar {display:flex;align-items:center;gap:16px;margin-bottom:14px}
#contactsSearch {margin:0;flex:1;min-width:0;height:40px;padding:10px 13px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font-size:13px}
.contacts-count {flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
#contactsList {margin:0;overflow:visible;border-radius:10px;box-shadow:none;border:1px solid var(--line)}
#contactsList .contact-row {position:relative;min-height:72px;padding:14px 16px;gap:12px;border-radius:0;background:var(--panel)}
#contactsList .contact-row:first-child {border-radius:10px 10px 0 0}
#contactsList .contact-row:last-child {border-radius:0 0 10px 10px}
#contactsList .contact-row:only-child {border-radius:10px}
#contactsList .contact-row:hover {background:var(--chat-row-hover)}
#contactsList .avatar {width:40px;height:40px;min-width:40px;font-size:15px}
#contactsList .contact-name {font-size:14px;font-weight:600}
#contactsList .contact-username {font-size:12px;margin-top:3px;color:var(--muted)}
.contact-actions .contact-write-hint {padding:7px 12px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--teal-dark);font-size:12px;font-weight:600}
.contact-menu {position:relative;flex:none}
.contact-menu summary {display:grid;place-items:center;width:30px;height:32px;border-radius:7px;color:var(--muted);font-size:22px;cursor:pointer;list-style:none}
.contact-menu summary::-webkit-details-marker {display:none}
.contact-menu summary:hover,.contact-menu[open] summary {background:var(--chat-row-active)}
.contact-menu .contact-remove-btn {position:absolute;right:0;top:36px;z-index:30;width:max-content;max-width:220px;height:auto;padding:11px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:#c43d39;font-size:12px;box-shadow:0 8px 24px #15392d20}
summary:focus-visible {outline:2px solid var(--teal);outline-offset:2px}
#contactsList .contact-row:has(.contact-menu[open]) {z-index:2}
@media(min-width:641px) {#profilePanel .profile-head {flex:none}}
/* Dialogs: one 24px gutter for head, body and footer. main.css adds its own 22px side
   paddings to sections, tips and errors; they are reset here so every block shares one edge. */
.modal-overlay {background:rgb(10 31 25 / 35%);backdrop-filter:blur(3px);padding:24px}
.modal-card {border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 24px 64px #062b2526;width:min(480px,100%);max-height:calc(100dvh - 48px);background:var(--panel)}
.modal-card h2,.modal-card h3,.modal-title {font-size:18px;font-weight:650;letter-spacing:-.3px;line-height:1.3;margin:0}
.modal-card p,.modal-lead {font-size:13px;line-height:1.5;color:var(--muted)}
.modal-lead {margin:4px 0 0}
.modal-card input:not([type=checkbox]),.modal-card textarea {font-size:14px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:var(--panel)}
.modal-card textarea {padding:10px 12px}
.modal-card input:not([type=checkbox]) {height:var(--control);min-height:var(--control)}
.modal-card input.modal-contact-search {padding-left:38px}
.modal-actions {display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.modal-actions .btn {width:auto;min-width:112px;height:var(--control);min-height:var(--control);margin:0;padding:0 16px;border-radius:10px;font-size:14px;box-shadow:none}
.modal-card-group {padding:0;width:min(480px,100%)}
.modal-head {padding:20px 24px 16px;border-bottom:1px solid var(--line)}
.modal-close-btn {width:32px;height:32px;margin:-4px -6px 0 0;border-radius:8px}
.modal-scroll {padding:0 24px;scrollbar-gutter:auto}
.modal-card-group .modal-section {padding:20px 0;margin:0;border:0}
.modal-card-group>.modal-section {padding:20px 24px}
.modal-card-group .modal-section + .modal-section,.modal-group-identity + .modal-section {border-top:1px solid var(--line)}
.modal-card-group .modal-icon-badge {display:none}
.modal-card-group .modal-field-row {display:block}
.modal-field-label,.modal-field-row .modal-field-label {display:block;margin:0 0 8px;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.modal-section-head {display:flex;align-items:center;gap:8px;min-height:32px;margin:0 0 12px}
.modal-section-copy {flex:0 1 auto;min-width:0}
.modal-card .modal-section-title {font-size:14px;font-weight:600;letter-spacing:0;line-height:1.4}
.modal-section-note {margin:2px 0 0;font-size:12px;line-height:1.45}
.modal-selected-pill {display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;border:0;border-radius:11px;background:var(--search-input-bg);font-size:12px}
.modal-inline-action-btn {margin-left:auto;min-width:0;height:32px;min-height:32px;padding:0 12px;border-radius:8px;font-size:12px}
.modal-card-group .modal-contact-search-wrap {margin:0 0 12px}
.modal-card-group .modal-group-contacts-list {min-height:0;max-height:min(36vh,288px);border-radius:12px;background:var(--panel);box-shadow:none}
.modal-card-group .modal-contact-row {padding:10px 12px;gap:12px}
.modal-card-group .modal-contact-row .avatar {width:36px;height:36px;min-width:36px;font-size:13px}
.modal-card-group .modal-contact-check {width:20px;height:20px;flex:0 0 20px;border-radius:6px;font-size:12px}
.modal-card-group .modal-contact-row.selected .modal-contact-check {transform:none;box-shadow:none}
.modal-card-group .modal-err {padding:0;margin:0}
.modal-card-group .modal-err:not(:empty) {margin:0 0 16px}
.modal-card-group .modal-tip {margin:0 0 20px;padding:12px 16px;gap:12px;border-radius:12px;box-shadow:none}
.modal-tip-btn {height:36px;min-height:36px;padding:0 14px;border-radius:8px;font-size:13px}
.modal-actions-group {margin:0;padding:16px 24px;border-top:1px solid var(--line);background:var(--panel)}
.modal-actions-group .btn {min-width:112px;padding:0 16px;border-radius:10px;font-size:14px}
.modal-actions-group .btn:not(.btn-secondary) {box-shadow:none}
.modal-group-identity-centered {margin:0;padding:24px 0 20px;gap:12px;background:none;border-radius:0}
.modal-group-identity-centered:before,.modal-group-identity-centered:after {display:none}
.modal-group-identity-centered .avatar {width:88px;height:88px;min-width:88px;min-height:88px;max-width:88px;max-height:88px;flex:none;font-size:30px;box-shadow:none}
.modal-group-identity-centered .modal-group-avatar-shell {flex:none}
.modal-group-identity-centered .group-avatar-edit-btn {width:28px;height:28px;right:0;bottom:0;border:2px solid var(--panel);box-shadow:none}
.modal-group-identity-centered .group-avatar-edit-btn svg {width:14px;height:14px}
.modal-group-name-row {justify-content:center}
.modal-group-name {font-size:17px;font-weight:650}
.modal-group-name-edit-icon {display:none!important}
.group-info-view {padding:12px 14px;border:0;border-radius:10px;background:var(--search-input-bg)}
.group-info-title {display:none}
.group-info-description {margin:0}
#groupMembersModal .modal-group-description {display:none}
#groupMembersModal .modal-section-note {display:none}
.members-panel-list {gap:2px;max-height:none;overflow:visible;padding:0}
.member-card {gap:12px;margin:0 -8px;padding:8px;border:0;border-radius:10px;background:transparent;box-shadow:none}
.member-card:hover {border:0;box-shadow:none;background:var(--chat-row-hover)}
.member-card .avatar {width:40px;height:40px;min-width:40px;min-height:40px;font-size:14px}
/* Name gets the whole first line; username and role share the second, so long names are not cut by the pill. */
.member-card-main {display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:6px;row-gap:2px}
.member-card-name-row {display:contents}
.member-card-name {flex:1 0 100%;min-width:0;font-size:14px;line-height:20px}
.member-card-username {order:1;min-width:0;font-size:12px;line-height:18px}
.member-role-pill {order:2;padding:0 7px;font-size:11px;line-height:18px;border-radius:9px}
.member-card-menu-btn {width:32px;height:32px;border-radius:8px}
.modal-card-group .modal-section-exit {padding:12px 0}
.group-exit-item {width:calc(100% + 16px);margin:0 -8px;padding:10px 8px;gap:12px;border-radius:10px}
.group-exit-item-icon {width:24px;height:24px}
.group-exit-item-icon svg {width:20px;height:20px}
.group-exit-item-title {font-size:14px}
.modal-card .avatar {box-shadow:none}
/* Dialog surface: a hairline ring plus one long soft shadow instead of a border and a grey blur. */
.modal-overlay {background:rgb(8 28 22 / 38%);backdrop-filter:blur(2px)}
.modal-card {border:0;box-shadow:0 0 0 1px rgb(16 40 32 / 7%),0 2px 4px rgb(16 40 32 / 4%),0 28px 64px -20px rgb(16 40 32 / 34%)}
body[data-theme="dark"] .modal-card {box-shadow:0 0 0 1px rgb(255 255 255 / 8%),0 28px 64px -20px rgb(0 0 0 / 60%)}
.modal-overlay:not(.hidden) .modal-card {animation:modal-in .18s cubic-bezier(.2,.8,.2,1)}
@keyframes modal-in {from {opacity:0;transform:translateY(6px) scale(.985)}}
.modal-close-btn:hover {background:var(--search-input-bg);color:var(--ink)}
.modal-card input:not([type=checkbox]):focus,.modal-card .modal-field-input:focus {border-color:var(--teal);background:var(--panel);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 14%,transparent)}
.modal-card input::placeholder {color:color-mix(in srgb,var(--muted) 80%,transparent)}
.modal-card-group .modal-contact-row.selected {background:color-mix(in srgb,var(--teal) 6%,var(--panel))}
.modal-card-group .modal-contact-row:focus-visible {outline:none;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--teal) 45%,transparent)}
.modal-card-group .modal-contact-name {font-size:14px;line-height:20px}
.modal-card-group .modal-contact-username {margin:0;font-size:12px;line-height:16px}
.modal-card-group .modal-contact-check {border:1.5px solid color-mix(in srgb,var(--muted) 45%,transparent);background:var(--panel)}
.modal-card-group .modal-contact-row.selected .modal-contact-check {border-color:var(--teal);background:var(--teal);color:#fff}

/* New chat is a search palette: the query is the header, results follow without a frame. */
.modal-overlay-top {align-items:flex-start;padding-top:min(14vh,120px)}
.palette-card {display:flex;flex-direction:column;width:min(560px,100%);max-height:min(600px,calc(100dvh - 48px));padding:0;overflow:hidden}
.palette-head {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 0 20px}
.palette-head .modal-title {font-size:15px;font-weight:650;letter-spacing:-.1px}
.palette-head .modal-close-btn {margin:0}
.palette-search {display:flex;align-items:center;gap:12px;height:56px;padding:0 20px;border-bottom:1px solid var(--line);cursor:text}
.palette-search svg {width:20px;height:20px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round}
.palette-search:focus-within svg {stroke:var(--teal)}
.modal-card input.palette-input,.modal-card input.palette-input:focus {flex:1;min-width:0;height:100%;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:16px;color:var(--ink)}
.palette-list.modal-contacts-list {flex:1 1 auto;min-height:120px;max-height:none;margin:0;padding:8px;overflow-y:auto;border:0;border-radius:0;background:transparent}
.palette-list .modal-search-section-hdr {padding:10px 12px 6px;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.palette-list .modal-contact-row {gap:12px;min-height:52px;padding:8px 12px;border:0;border-radius:10px}
.palette-list .modal-contact-row:hover,.palette-list .modal-contact-row:focus-visible {outline:none;background:color-mix(in srgb,var(--teal) 7%,var(--panel))}
.palette-list .modal-contact-row::after {content:'↵';display:grid;place-items:center;margin-left:auto;min-width:26px;height:22px;padding:0 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--muted);font-size:12px;opacity:0}
.palette-list .modal-contact-row:is(:hover,:focus-visible)::after {opacity:1}
.palette-list .modal-contact-avatar {width:36px;height:36px;min-width:36px;min-height:36px;font-size:13px}
.palette-list .modal-contact-name {font-size:14px;font-weight:600;line-height:20px}
.palette-list .modal-contact-username {margin:0;font-size:12px;line-height:16px}
.palette-list .modal-contacts-empty {padding:40px 24px;font-size:13px;line-height:1.5;color:var(--muted)}
.palette-err:not(:empty) {margin:0;padding:0 20px 12px}
.palette-foot {display:flex;align-items:center;gap:20px;padding:10px 20px;border-top:1px solid var(--line);background:var(--search-input-bg);font-size:12px;color:var(--muted)}
.palette-foot>span {display:inline-flex;align-items:center;gap:4px}
.palette-foot span span {margin-left:4px}
.palette-foot kbd {display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--panel);color:var(--ink);font-family:inherit;font-size:11px;font-weight:500;line-height:1}
@media (hover:none),(max-width:640px) {.palette-foot {display:none} .modal-overlay-top {align-items:center;padding-top:12px}}

/* New group: identity first (live preview next to the name), then people, then one quiet hint. */
#newGroupModal .modal-card-group {width:min(520px,100%)}
#newGroupModal .modal-section + .modal-section {border-top:0}
#newGroupModal .new-group-identity {padding:24px 0 4px}
#newGroupModal .new-group-identity .modal-field-row {display:flex;align-items:stretch;gap:16px}
#newGroupModal .new-group-identity .modal-field-label {line-height:18px;margin-bottom:6px}
.new-group-preview {flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff;font-size:22px;font-weight:600;letter-spacing:.5px}
.new-group-preview.is-empty {background:var(--search-input-bg);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.new-group-preview .ui-icon {width:26px;height:26px}
#newGroupModal .new-group-members {padding:20px 0 24px}
#newGroupModal .modal-section-head {min-height:0;margin-bottom:10px}
#newGroupModal .modal-section-title {display:flex;align-items:center;flex:1;font-size:13px;line-height:22px}
#newGroupModal .modal-title-count {margin-left:auto;transform:none;height:22px;min-width:22px;padding:0 8px;border-radius:11px;background:color-mix(in srgb,var(--teal) 12%,var(--panel));color:var(--teal-dark);font-size:12px;font-weight:600}
#newGroupModal .modal-group-contacts-list {max-height:min(34vh,264px)}
.new-group-hint {display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:12px 0 0;font-size:13px;color:var(--muted)}
.link-btn {padding:0;border:0;background:none;color:var(--teal-dark);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--teal) 35%,transparent);text-underline-offset:3px}
.link-btn:hover {text-decoration-color:currentColor}

/* Group information docks only where it leaves a useful conversation width. */
@media(min-width:1200px) {
  #app:has(#groupMembersModal:not(.hidden)):not(.profile-mode) {grid-template-columns:var(--rail) var(--side) minmax(0,1fr) 320px}
  #groupMembersModal {grid-column:4;grid-row:1;position:relative;inset:auto;display:flex;align-items:stretch;padding:0;background:var(--panel);backdrop-filter:none;border-left:1px solid var(--line);z-index:20;overflow:hidden}
  #groupMembersModal .modal-card {width:100%;height:100%;max-height:none;box-shadow:none;border:0;border-radius:0;animation:none}
  #groupMembersModal .modal-head {display:flex;align-items:center;height:var(--bar);padding:0 14px 0 20px}
  #groupMembersModal .modal-head-row {flex:1;align-items:center}
  #groupMembersModal .modal-title {font-size:15px}
  #groupMembersModal .modal-lead {margin-top:2px;font-size:12px;line-height:1.3}
  #groupMembersModal .modal-close-btn {margin:0}
  #groupMembersModal .modal-scroll {padding:0 20px}
  #groupMembersModal .modal-actions-group {display:none}
}
@media(max-width:1199px) { :root {--rail:62px} .rail-control {width:48px} .auth-story {padding:32px} .auth-card {padding:32px} }
@media(max-width:900px) {
  #app,#app.profile-mode {grid-template-columns:60px minmax(0,1fr);height:var(--vvh,100dvh)}
  #app .sidebar,#app .conversation {position:relative;inset:auto;height:100%;min-height:0;transform:none;will-change:auto;box-shadow:none}
  #app .sidebar {grid-column:2;display:flex}
  #app .conversation {display:none;grid-column:2;visibility:visible}
  #app.mobile-chat-open .conversation {display:flex}
  #app.mobile-chat-open .sidebar {display:none}
  #app>.profile-sheet {grid-column:2}
  #app.profile-mode .sidebar {display:none}
  #app.profile-mode .conversation {display:none}
  .workspace-rail {display:flex}
  .chat-title {font-size:14px}
  .chat-sub {font-size:12px}
  .thread {padding:18px 16px}
  .msg {max-width:85%}
  .msg.msg-group-in {max-width:calc(85% - 24px)}
  #auth {grid-template-columns:1fr 1fr;inset:20px}
  .auth-story {padding:28px 24px;min-height:0}
  .story-copy h2 {font-size:30px}
  .auth-card {padding:28px 24px}
  .auth-card .brand {font-size:15px}
}
@media(max-width:640px) {
  #auth {inset:0;display:flex;flex-direction:column;border-radius:0;background:var(--panel);overflow-y:auto}
  .auth-story {width:100%;min-height:210px;height:210px;flex:none;padding:20px 24px;background-position:center 56%;background-size:100% auto}
  .auth-story:before {background:linear-gradient(180deg,#002d2b70,transparent 45%,#002a2510)}
  .story-brand {font-size:15px;justify-content:center;text-shadow:0 1px 6px #00281e}
  .pulse-symbol {width:30px;height:30px;border-radius:9px}
  .pulse-symbol .ui-icon {width:22px;height:22px}
  .story-copy,.story-benefits {display:none}
  .auth-card {width:100%;max-width:440px;padding:24px;align-self:center;border-radius:22px 22px 0 0;margin-top:-18px;z-index:1;flex:none}
  .auth-card .brand {display:none}
  .auth-card h1 {font-size:27px;text-align:center}
  .auth-lead {text-align:center;font-size:12px;margin-bottom:20px}
  .auth-card input:not([type=checkbox]) {height:44px}
  .auth-card label {margin-top:12px}
  #authForm>[data-i18n="auth.cookie_notice"] {margin-top:14px}
  #authSwitch {margin-top:12px}
  .workspace-rail {padding:12px 4px;width:56px}
  #app,#app.profile-mode {grid-template-columns:56px minmax(0,1fr)}
  .rail-control {width:46px;min-height:54px;font-size:8px}
  #app.mobile-chat-open:not(.profile-mode) {grid-template-columns:minmax(0,1fr)}
  #app.mobile-chat-open:not(.profile-mode) .workspace-rail {display:none}
  #app.mobile-chat-open .conversation {grid-column:1}
  .conv-head {padding:0 12px}
  .composer {padding:10px 8px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .composer-row {gap:3px}
  .composer textarea {font-size:16px}
  .profile-main {padding:20px 14px}
  #contactsPanel .profile-head {gap:8px}
  #contactsPanel .contacts-add-btn {font-size:11px;padding:7px 9px;gap:4px}
  #contactsPanel .contacts-add-btn svg {display:none}
  #contactsPanel .profile-main {padding:16px 12px}
  #contactsList .contact-row {padding:12px 10px;gap:8px;flex-wrap:wrap}
  #contactsList .contact-actions {margin-left:auto;gap:4px}
  .contact-actions .contact-write-hint {padding:6px 8px}
  #profilePanel .profile-value {max-width:190px}
  .profile-setting-section {grid-template-columns:1fr;gap:8px;margin-bottom:18px}
  .profile-main>.profile-avatar-wrap {padding-left:0;gap:14px}
  .profile-identity-copy h2 {font-size:17px}
  .profile-row {padding:12px;gap:8px;flex-wrap:wrap}
  .profile-value-wrap {min-width:0;max-width:100%}
  .profile-head {padding:0 16px}
  .modal-overlay {padding:12px}
  .modal-card {max-height:calc(100dvh - 24px);border-radius:16px;padding:20px}
  .modal-card-group {padding:0}
  .modal-head {padding:16px 20px 12px}
  .modal-scroll {padding:0 20px}
  .modal-actions-group {padding:12px 20px}
}
@media(min-width:641px) and (max-height:740px) {
  .auth-card {padding:20px 28px}
}
/* Sidebar: soft grey column with a floating account card. */
:root {--sidebar-bg:#f4f7f6;--online:#1f9d55;--online-dot:#22b45e}
body[data-theme="dark"] {--sidebar-bg:#10231c;--online:#4ccf86;--online-dot:#34c473}
#app .sidebar {background:var(--sidebar-bg)}
#app .side-head {height:auto;margin:0;padding:calc(10px + env(safe-area-inset-top)) calc(var(--gutter) * 2) 10px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;overflow:visible}
#app .side-head .account-open {padding:calc(10px + env(safe-area-inset-top)) calc(var(--gutter) + 4px) 10px}
#app .side-head .account-open .ui-icon {width:16px;height:16px;transform:none}
#app .side-head .me-name-row {display:flex;align-items:center;gap:6px;min-width:0}
#app .side-head .me-name-row .name {min-width:0}
#app .side-head .me-name-row .presence-pulse-icon {width:14px;height:14px;margin:0;flex:none}
#app .side-head #meStatus {color:var(--muted)}
.sidebar>.search {position:relative;background:transparent}
.sidebar>.search .ui-icon {position:absolute;left:calc(var(--gutter) + 12px);top:50%;width:16px;height:16px;color:var(--muted);transform:translateY(-50%);pointer-events:none}
.sidebar>.search input {padding-left:38px;background:var(--panel)}
.chat-row-content {background:var(--sidebar-bg)}
.chat-row:hover .chat-row-content {background:color-mix(in srgb,var(--ink) 4%,var(--sidebar-bg))}
.chat-row.active .chat-row-content,.chat-row:active .chat-row-content {background:color-mix(in srgb,var(--teal) 10%,var(--panel))}
/* Profile and contacts pages: page title, wide content column, hero and table cards. */
#app .chat-actions {background:transparent}
#app>.profile-sheet .profile-head {background:transparent;border-bottom:0;font-size:22px;font-weight:700;letter-spacing:-.3px;padding:0 max(32px,calc((100% - 960px) / 2 + 32px))}
#app>.profile-sheet .profile-back {display:none}
#profilePanel .profile-main,#contactsPanel .profile-main {max-width:960px;padding:4px 32px 32px}
.profile-hero {display:flex;align-items:center;gap:20px;margin:0 0 28px;padding:4px 0 8px;border:0;background:transparent}
.profile-hero .profile-avatar-wrap {display:flex;flex-direction:column;align-items:center;gap:8px;flex:none;margin:0;padding:0}
.profile-hero .profile-avatar-wrap .profile-avatar {width:88px;height:88px;min-width:88px;min-height:88px;max-width:88px;max-height:88px;font-size:30px;border:0;box-shadow:none}
.profile-hero .group-avatar-edit-btn {width:30px;height:30px;right:-2px;bottom:0}
.profile-hero .profile-identity-copy {flex:1;min-width:0}
.profile-hero .profile-identity-copy h2 {margin:0 0 6px;font-size:22px;line-height:28px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-hero .profile-identity-copy p {margin:0;font-size:13px;line-height:20px}
.profile-hero .profile-hero-status {display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:500}
.profile-hero .profile-hero-status .presence-pulse-icon {width:15px;height:15px;margin:0}
.profile-hero .profile-hero-handle {color:var(--muted)}
.profile-hero .profile-hero-handle:empty {display:none}
#profileStatusValue {display:inline-flex;align-items:center;gap:6px}
#profileStatusValue .presence-pulse-icon {width:14px;height:14px;margin:0}
#profilePanel .profile-setting-section {grid-template-columns:200px minmax(0,1fr);gap:32px;margin-bottom:20px}
#profilePanel .profile-section-heading h2 {display:flex;align-items:center;gap:10px;margin:14px 0 6px;font-size:15px;font-weight:650}
#profilePanel .profile-section-heading h2 .ui-icon {width:18px;height:18px;color:var(--teal)}
#profilePanel .profile-section-heading p {padding-left:28px;font-size:12px}
#profilePanel .profile-card {border-radius:12px}
#profilePanel .profile-setting-section .profile-row {min-height:52px;padding:8px 18px}
#profilePanel .profile-label,#profilePanel .profile-password-title {display:flex;align-items:center;gap:12px;font-size:13px;font-weight:500}
#profilePanel .profile-label .ui-icon,#profilePanel .profile-password-title .ui-icon {width:18px;height:18px;color:var(--muted)}
#profilePanel .profile-setting-section .profile-password-box {padding:8px 18px;border-top:1px solid var(--profile-row-border)}
#profilePanel .profile-password-head {display:flex;align-items:center;justify-content:space-between;min-height:36px;cursor:pointer}
#profilePanel .profile-chevron .ui-icon,#profilePasswordToggleBtn .ui-icon {width:16px;height:16px;color:var(--muted)}
#profilePanel .profile-language-select {height:34px;min-width:132px;padding:0 32px 0 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23657980' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 14px no-repeat;color:var(--ink);font-size:13px;appearance:none;-webkit-appearance:none;cursor:pointer}
#contactsPanel .contacts-add-btn {min-height:38px;padding:0 16px;border-radius:10px}
.contacts-toolbar {position:relative;margin-bottom:16px}
.contacts-toolbar .ui-icon {position:absolute;left:14px;top:50%;width:17px;height:17px;color:var(--muted);transform:translateY(-50%);pointer-events:none}
#contactsSearch {height:44px;padding-left:42px;border-radius:10px}
.contacts-table {border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.contacts-table-head,#contactsList .contact-row {--avatar-col:40px;--status-col:140px;--actions-col:184px}
.contacts-table-head {display:grid;grid-template-columns:var(--avatar-col) minmax(0,1fr) var(--status-col) var(--actions-col);gap:16px;padding:12px 20px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--muted)}
.contacts-table-head span:first-child {grid-column:1 / span 2}
.contacts-table-head span:last-child {text-align:right}
.contacts-table:has(.contacts-empty) .contacts-table-head {display:none}
#contactsList {border:0;border-radius:0 0 14px 14px;background:transparent}
#contactsList .contact-row {display:grid;grid-template-columns:var(--avatar-col) minmax(0,1fr) var(--status-col) var(--actions-col);align-items:center;column-gap:16px;min-height:68px;padding:12px 20px}
#contactsList .contact-row+.contact-row {border-top:1px solid var(--line)}
#contactsList .contact-row:first-child {border-radius:0}
#contactsList .contact-row:last-child {border-radius:0 0 13px 13px}
#contactsList .contact-main {min-width:0}
#contactsList .contact-name,#contactsList .contact-username {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contact-presence {font-size:13px;color:var(--muted)}
.contact-presence.is-online {color:var(--online);font-weight:500}
#contactsList .contact-actions {display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:0}
.contact-actions .contact-write-hint {display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:8px}
.contact-actions .contact-write-hint .ui-icon {width:16px;height:16px}
.contact-actions .contact-write-hint:hover {border-color:color-mix(in srgb,var(--teal) 35%,var(--line));background:color-mix(in srgb,var(--teal) 6%,var(--panel))}
.contact-menu summary {width:34px;height:34px;border:1px solid var(--line);border-radius:8px;font-size:18px;line-height:1}
.contact-menu .contact-remove-btn {top:40px}
@media(max-width:1199px) {
  #profilePanel .profile-setting-section {grid-template-columns:160px minmax(0,1fr);gap:24px}
}
@media(max-width:900px) {
  #app>.profile-sheet .profile-head {padding:0 16px}
  #app>.profile-sheet .profile-back {display:grid;place-items:center}
  #profilePanel .profile-setting-section {grid-template-columns:1fr;gap:8px}
  #profilePanel .profile-section-heading h2 {margin-top:4px}
}
@media(max-width:640px) {
  #app>.profile-sheet .profile-head {padding:0 12px;font-size:19px}
  #profilePanel .profile-main,#contactsPanel .profile-main {padding:4px 12px 24px}
  .profile-hero {flex-wrap:wrap;gap:12px 16px;padding:0 0 4px}
  .profile-hero .profile-avatar-wrap .profile-avatar {width:72px;height:72px;min-width:72px;min-height:72px;max-width:72px;max-height:72px;font-size:26px}
  .profile-hero .profile-identity-copy {flex:1 1 160px}
  .profile-hero .profile-identity-copy h2 {font-size:18px;line-height:24px}
  #profilePanel .profile-setting-section .profile-row {padding:10px 14px}
  #profilePanel .profile-label {gap:10px}
  #profilePanel .profile-language-select {min-width:116px}
  .contacts-table-head {display:none}
  #contactsList .contact-row {grid-template-columns:40px minmax(0,1fr) auto;column-gap:12px;padding:12px 14px}
  #contactsList .contact-row:first-child {border-radius:13px 13px 0 0}
  #contactsList .contact-row:only-child {border-radius:13px}
  .contact-presence {display:none}
  .contact-actions .contact-write-hint {width:34px;padding:0;justify-content:center}
  .contact-actions .contact-write-hint span {display:none}
}
@media(prefers-reduced-motion:reduce) {
  *:not(.presence-pulse-icon),*:before,*:after {scroll-behavior:auto!important;animation:none!important;transition:none!important}
  /* Presence is information, not decoration: keep the slow beat that says "online". */
  .presence-pulse-icon {animation:presence-pulse-beat 1.6s ease-in-out infinite!important}
}
.hidden {display:none!important}
.side-head-tools {display:none}
@media(max-width:900px) {
  #app,#app.profile-mode,#app.mobile-chat-open:not(.profile-mode) {grid-template-columns:minmax(0,1fr)}
  .workspace-rail,#app.mobile-chat-open:not(.profile-mode) .workspace-rail {display:none}
  #app .sidebar,#app .conversation,#app>.profile-sheet,#app.mobile-chat-open .conversation {grid-column:1}
  #app .side-head {gap:12px;padding:calc(10px + env(safe-area-inset-top)) var(--gutter) 10px calc(var(--gutter) + 4px)}
  #app .side-head .me {gap:12px}
  #app .side-head .me .avatar {width:46px;height:46px;min-width:46px;font-size:16px}
  #app .side-head .me .name {font-size:16px;line-height:22px}
  #app .side-head .me .profile-value {font-size:13px;line-height:18px}
  #app .side-head .me-text {padding-right:0}
  #app .side-head .account-open .ui-icon {display:none}
  .side-head-tools {position:relative;z-index:2;display:flex;align-items:center;gap:6px;flex:none}
  .side-head-tool {display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid color-mix(in srgb,var(--teal) 16%,var(--line));border-radius:12px;background:var(--panel);color:var(--teal-dark);box-shadow:0 1px 2px #0b2a2010}
  .side-head-tool .ui-icon {width:20px;height:20px}
  .side-head-tool:active {background:color-mix(in srgb,var(--teal) 10%,var(--panel))}
  .side-head-tool:last-child {color:var(--muted)}
  .chat-actions {padding:var(--gutter) var(--gutter) 0}
  .workspace-create {height:44px;font-size:14px;border-radius:12px}
  .sidebar>.search input {height:44px;font-size:16px;border-radius:12px}
  .chats {padding-bottom:calc(var(--gutter) + env(safe-area-inset-bottom))}
  .conv-head {height:calc(var(--bar) + env(safe-area-inset-top));min-height:calc(var(--bar) + env(safe-area-inset-top));padding:env(safe-area-inset-top) var(--gutter) 0 6px;gap:10px}
  .conv-back {display:grid;place-items:center;width:40px;height:40px;flex:none}
  .composer {padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom))}
  #app>.profile-sheet .profile-head,.profile-head {height:calc(var(--bar) + env(safe-area-inset-top));min-height:calc(var(--bar) + env(safe-area-inset-top));padding:env(safe-area-inset-top) var(--gutter) 0}
  #profilePanel .profile-main,#contactsPanel .profile-main {padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}
.auth-field {position:relative}
.auth-field>.ui-icon {position:absolute;left:14px;top:50%;width:20px;height:20px;color:var(--muted);transform:translateY(-50%);pointer-events:none}
.auth-card .auth-field input:not([type=checkbox]) {padding-left:44px}
#authForm {display:flex;flex-direction:column}
#authForm>[data-i18n="auth.cookie_notice"] {order:1;display:flex;align-items:center;gap:12px}
#authForm>[data-i18n="auth.cookie_notice"]:before {content:'';flex:none;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--auth-green) 12%,var(--panel)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313845f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.6 3.1 8.4 7.5 9.5 4.4-1.1 7.5-4.9 7.5-9.5V6Z'/%3E%3Cpath d='m8.8 12 2.2 2.2 4.3-4.4'/%3E%3C/svg%3E") center / 18px no-repeat}
#authBtn {display:flex;align-items:center;justify-content:center;gap:10px}
#authBtn:after {content:'';width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat}
.brand-name-sub {font-weight:400;color:var(--muted)}
.auth-hero-mark {display:none}
@keyframes auth-hero-float {0%,100% {transform:translateY(0)} 50% {transform:translateY(-6px)}}
@media(max-width:640px) {
  #auth {top:0;bottom:auto;height:var(--vvh,100dvh);background:radial-gradient(130% 48% at 50% 0%,color-mix(in srgb,#2fd3a4 20%,var(--panel)) 0%,color-mix(in srgb,#2fd3a4 6%,var(--panel)) 45%,var(--panel) 75%)}
  .auth-story {display:none}
  .auth-card,#auth .auth-card {width:100%;max-width:460px;min-height:0;margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));border-radius:0;background:transparent;box-shadow:none;align-self:center;flex:none}
  .auth-card .brand {display:flex;justify-content:center;align-items:center;gap:10px;margin:0;font-size:22px;letter-spacing:-.4px}
  .auth-card .brand .logo {width:44px;height:44px}
  .auth-card .brand-name strong {font-weight:750}
  .auth-hero-mark {position:relative;isolation:isolate;display:grid;place-items:center;height:200px;margin:4px 0 8px}
  .auth-hero-mark:after {content:'';position:absolute;z-index:-1;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,#3ddbb0 30%,transparent) 0%,transparent 66%)}
  .auth-hero-mark:before {content:'';position:absolute;z-index:2;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:-128px 14px 6px 1px #c9fff0,118px -16px 5px 1px #c9fff0,96px 30px 3px #fff,-84px -42px 3px #e3fff6,40px -70px 2px #fff;opacity:.9}
  .auth-hero-bubble {position:relative;z-index:1;display:block;width:250px;max-width:100%;height:auto;filter:drop-shadow(0 18px 24px color-mix(in srgb,#0a6b4c 28%,transparent));animation:auth-hero-float 5s ease-in-out infinite}
  .auth-card h1 {margin:0 0 6px;font-size:30px;line-height:1.15;font-weight:800;letter-spacing:-.7px;text-align:center}
  .auth-lead {margin:0 0 18px;font-size:15px;line-height:1.4;text-align:center}
}
.auth-card label {margin:14px 0 8px;font-size:14px}
.auth-card input:not([type=checkbox]) {height:50px;border-radius:12px;background:var(--panel);font-size:15px}
.auth-card .auth-field>.ui-icon {left:16px}
.auth-card .auth-field input:not([type=checkbox]) {padding-left:48px}
.auth-card .password-toggle-btn {right:10px;width:36px;height:36px}
.auth-options {margin:16px 0 4px}
.auth-card label.auth-remember {gap:10px;font-size:14px}
.auth-remember input {width:20px;height:20px}
.auth-options .auth-link-row {font-size:14px}
.auth-card .btn {min-height:52px;border-radius:14px;font-size:16px}
#authBtn {height:52px;margin-top:16px;background:linear-gradient(180deg,#1db487,#0b7a5b);box-shadow:0 10px 22px color-mix(in srgb,#0f8a65 30%,transparent);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
#authBtn:hover {filter:brightness(1.05);box-shadow:0 12px 26px color-mix(in srgb,#0f8a65 36%,transparent)}
#authBtn:active {transform:translateY(1px);box-shadow:0 6px 14px color-mix(in srgb,#0f8a65 28%,transparent)}
#authBtn:after {transition:transform .2s ease}
#authBtn:hover:after {transform:translateX(3px)}
#authSwitch {margin-top:12px;font-size:0}
#authSwitch a,#authSwitch button {display:flex;align-items:center;justify-content:center;height:52px;margin:0;padding:0 16px;border:1.5px solid var(--auth-green);border-radius:14px;background:var(--panel);font-size:16px;font-weight:650;transition:background-color .15s ease}
#authSwitch a:hover,#authSwitch button:hover {background:color-mix(in srgb,var(--auth-green) 6%,var(--panel))}
#authForm>[data-i18n="auth.cookie_notice"] {margin-top:18px;padding:14px 16px;border-radius:14px;font-size:13px;line-height:1.45}
#authForm>[data-i18n="auth.cookie_notice"]:before {width:38px;height:38px}
.auth-story:after {content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(34% 26% at 50% 52%,color-mix(in srgb,#5dffb0 34%,transparent) 0%,transparent 70%);mix-blend-mode:screen;opacity:.35;animation:auth-story-beat 2.8s ease-in-out infinite}
@keyframes auth-story-beat {0%,100% {opacity:.3} 12% {opacity:.75} 24% {opacity:.4} 36% {opacity:.65} 60% {opacity:.3}}
.auth-card>* {animation:auth-card-in .5s cubic-bezier(.2,.8,.2,1) both}
.auth-card>:nth-child(2) {animation-delay:.04s}
.auth-card>:nth-child(3) {animation-delay:.08s}
.auth-card>:nth-child(4) {animation-delay:.12s}
.auth-card>:nth-child(n+5) {animation-delay:.16s}
@keyframes auth-card-in {from {opacity:0;transform:translateY(8px)}}
@media(max-width:900px) {
  .msg .att img {max-height:min(320px,42dvh)}
  .msg-image-viewer,.msg-video-viewer {bottom:auto;height:var(--vvh,100dvh);padding:calc(env(safe-area-inset-top) + 64px) 12px calc(env(safe-area-inset-bottom) + 16px)}
  .msg-image-viewer-backdrop,.msg-video-viewer-backdrop {background:rgb(3 10 14 / 92%)}
  .msg-image-viewer-panel,.msg-video-viewer-panel {width:100%;max-height:100%}
  .msg-image-viewer-image {max-width:100%;max-height:calc(var(--vvh,100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 150px);border-radius:10px;box-shadow:none}
  .msg-video-viewer-player {max-height:calc(var(--vvh,100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 160px)}
  .msg-image-viewer-close,.msg-video-viewer-close {top:calc(env(safe-area-inset-top) + 10px);right:12px;width:44px;height:44px;background:rgb(255 255 255 / 16%);color:#fff;box-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .msg-image-viewer-download {width:100%;max-width:340px;height:48px;border-radius:14px}
}
@media(max-width:640px) {
  .modal-overlay {padding:12px 10px calc(10px + env(safe-area-inset-bottom))}
  .modal-card {max-height:calc(var(--vvh,100dvh) - 22px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
}
@media(max-width:900px) and (pointer:coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select {font-size:16px!important}
}
#bootSplash {background:radial-gradient(70% 50% at 50% 45%,#0d5a3f 0%,#063a2a 55%,#03251b 100%)}
#bootSplash .logo {width:min(220px,60vw);height:auto;border-radius:0;background:none;animation:boot-splash-pulse 1.6s ease-in-out infinite}
.empty .big .brand-mark {width:34px;height:34px;flex:none}

:root {--ico-users:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20v-2a6 6 0 0 1 12 0v2ZM16 5a3 3 0 0 1 0 6M18 14a5 5 0 0 1 3 5'/%3E%3C/svg%3E");--ico-reply:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10a6 6 0 0 1 6 6v4'/%3E%3C/svg%3E");--ico-copy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E");--ico-hide:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 10.6a2 2 0 0 0 2.8 2.8'/%3E%3Cpath d='M9.9 5.1A10 10 0 0 1 12 5c7 0 10 7 10 7a17 17 0 0 1-3.2 4.2'/%3E%3Cpath d='M6.6 6.6A17 17 0 0 0 2 12s3 7 10 7a10 10 0 0 0 5.4-1.6'/%3E%3C/svg%3E");--ico-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5h.01'/%3E%3C/svg%3E");--ico-edit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 4 5 5'/%3E%3Cpath d='M4 20l5-1L21 7a2 2 0 0 0-4-4L5 15Z'/%3E%3C/svg%3E");--ico-trash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6'/%3E%3Cpath d='M6 7l1 13h10l1-13'/%3E%3Cpath d='M9 7V4h6v3'/%3E%3C/svg%3E");--ico-leave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H4v16h5M13 7l5 5-5 5M8 12h13'/%3E%3C/svg%3E")}
.msg-action-item:before,.msg-action-sheet-item:before {content:'';flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:var(--ico) center / contain no-repeat;mask:var(--ico) center / contain no-repeat;opacity:.85}
.msg-reply-action {--ico:var(--ico-reply)}
.msg-copy-action {--ico:var(--ico-copy)}
.msg-hide-action {--ico:var(--ico-hide)}
.msg-info-action {--ico:var(--ico-info)}
.msg-edit-action {--ico:var(--ico-edit)}
.msg-delete-action,.chat-delete-action,.chat-disband-action {--ico:var(--ico-trash)}
.chat-leave-action {--ico:var(--ico-leave)}
.msg-action-sheet-item:not([class*="-action"]):before {display:none}
.msg .msg-actions-menu {min-width:210px;padding:6px}
.msg .msg-action-item {gap:10px;padding:9px 12px;font-size:13.5px}
.msg .msg-action-item.msg-hide-action:hover,.msg .msg-action-item.msg-info-action:hover,.msg .msg-action-item.msg-copy-action:hover,.msg .msg-action-item.msg-reply-action:hover,.msg .msg-action-item.msg-edit-action:hover {background:var(--search-input-bg);color:var(--ink)}
.msg .msg-action-item.msg-delete-action {color:#d13f3f}
.msg .msg-action-item.msg-delete-action:hover {background:color-mix(in srgb,#e24b4b 10%,transparent)}
.msg .msg-action-item.msg-delete-action {position:relative;margin-top:7px}
.msg .msg-action-item.msg-delete-action:after {content:'';position:absolute;left:8px;right:8px;top:-4px;height:1px;background:var(--line)}
.msg-action-sheet-item {display:flex;align-items:center;gap:14px;min-height:52px;padding:0 18px;font-size:16px}
.msg-action-sheet-item.msg-hide-action,.msg-action-sheet-item.msg-info-action {color:var(--ink)}
.msg-action-sheet-item.chat-disband-action {color:#d13f3f}
.msg-action-sheet-item.msg-delete-action,.msg-action-sheet-item.chat-delete-action,.msg-action-sheet-item.chat-disband-action {border-top:6px solid var(--search-input-bg)!important}
.msg-action-sheet-cancel {min-height:52px}
.modal-err:empty {min-height:0;margin:0}
.modal-card-compact {padding:0}
.modal-card-compact .modal-head {padding:20px 24px 4px;border-bottom:0}
.modal-card-compact>input {display:block;width:calc(100% - 48px);margin:16px 24px 0}
.modal-card-compact>.modal-err:not(:empty) {margin:10px 24px 0}
.modal-card-compact>.modal-actions {margin:0;padding:20px 24px 24px}
#messageReceiptModal .modal-head {padding-bottom:16px}
.receipt-reader-time:empty {display:none}
@media(max-width:640px) {
  .modal-card:not(.modal-card-group):not(.palette-card):not(.modal-card-compact) {padding:30px 20px calc(16px + env(safe-area-inset-bottom))}
  .modal-card-group .modal-head,.modal-card-compact .modal-head {padding:22px 20px 14px}
  .modal-card-group .modal-head .modal-close-btn,.modal-card-compact .modal-head .modal-close-btn,.palette-head .modal-close-btn {width:40px;height:40px;margin:-8px -10px 0 0}
  .modal-card-group .modal-scroll {padding:0 20px}
  .modal-card-group>.modal-section {padding-left:20px;padding-right:20px}
  .modal-actions-group {padding:12px 20px calc(12px + env(safe-area-inset-bottom))}
  .modal-card-compact>input {width:calc(100% - 40px);margin:4px 20px 0}
  .modal-card-compact>.modal-err:not(:empty) {margin:10px 20px 0}
  .modal-card-compact>.modal-actions {position:static;padding:20px 20px calc(16px + env(safe-area-inset-bottom))}
  .modal-card.palette-card {padding:20px 0 calc(8px + env(safe-area-inset-bottom))}
  .palette-head {padding:10px 18px 4px 20px}
  .palette-head .modal-title {font-size:18px}
  .palette-search {padding:0 20px}
  .palette-list.modal-contacts-list {padding:8px 10px}
  .modal-actions .btn,.modal-actions-group .btn {height:48px;min-height:48px;font-size:15px;border-radius:12px}
}
.support-chips-label {margin:16px 0 8px;font-size:13px;font-weight:600;color:var(--ink)}
.modal-card p.support-chips-label {color:var(--ink)}
.modal-card .confirm-message {margin:0 0 4px;font-size:15px;line-height:1.5;color:var(--ink)}
.modal-actions .btn:disabled,.modal-actions-group .btn:disabled {opacity:.45;cursor:not-allowed;filter:none}
.member-action-dropdown-item {display:flex;align-items:center;gap:10px}
.member-action-dropdown-item:before {content:'';flex:none;width:17px;height:17px;background:currentColor;-webkit-mask:var(--ico) center / contain no-repeat;mask:var(--ico) center / contain no-repeat;opacity:.85}
.member-action-dropdown-item[data-action="role"] {--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.6 3.1 8.4 7.5 9.5 4.4-1.1 7.5-4.9 7.5-9.5V6Z'/%3E%3C/svg%3E")}
.member-action-dropdown-item[data-action="transfer"] {--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l4 4 5-7 5 7 4-4-2 11H5Z'/%3E%3C/svg%3E")}
.member-action-dropdown-item[data-action="remove"] {--ico:var(--ico-trash);position:relative;margin-top:7px}
.member-action-dropdown-item[data-action="remove"]:after {content:'';position:absolute;left:8px;right:8px;top:-4px;height:1px;background:var(--line)}

.member-action-dropdown-item[data-action="report"] {--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E")}
.support-complaint-lead {margin:6px 0 0;padding:10px 12px;border-radius:10px;background:var(--search-input-bg);font-size:13px;line-height:1.45}
.modal-card p.support-complaint-lead {color:var(--muted)}
#supportReportModal {z-index:1050}
@media(max-width:640px) {
  .auth-card label {font-size:15px}
  .auth-card label.auth-remember,.auth-options .auth-link-row {font-size:15px}
  .auth-card input:not([type=checkbox]) {height:52px;font-size:16px}
  .auth-card .btn,#authBtn,#authSwitch a,#authSwitch button {min-height:54px;height:54px;font-size:17px}
}

.member-card.is-clickable {cursor:pointer}
.member-card.is-clickable:focus-visible {outline:2px solid color-mix(in srgb,var(--teal) 55%,transparent);outline-offset:-2px}
.member-contact-pill {order:3;display:inline-flex;align-items:center;gap:4px;font-size:11.5px;line-height:18px;color:var(--online,#1f9d55);font-weight:500}
.member-contact-pill .ui-icon {width:13px;height:13px}
.member-action-dropdown-item[data-action="profile"] {--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a8 8 0 0 1 16 0v1'/%3E%3C/svg%3E")}
.member-action-dropdown-item[data-action="add-contact"] {--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='7' r='4'/%3E%3Cpath d='M2 21v-2a8 8 0 0 1 13-6.2M19 14v6M16 17h6'/%3E%3C/svg%3E")}
#userProfileModal .modal-card,#pollModal .modal-card,#pollResultsModal .modal-card,#userProfileModal .modal-head,#pollModal .modal-head,#pollResultsModal .modal-head,#userProfileModal .modal-actions-group,#pollModal .modal-actions-group,#pollResultsModal .modal-actions-group {background:var(--profile-sheet-bg)}
#userProfileModal .modal-scroll.user-profile-body,#pollModal .modal-scroll.user-profile-body,#pollResultsModal .modal-scroll.user-profile-body {padding:0 24px 4px}
.user-profile-hero {display:flex;align-items:center;gap:18px;padding:24px 0 20px}
.user-profile-avatar {width:80px;height:80px;min-width:80px;min-height:80px;font-size:28px;box-shadow:none}
.user-profile-identity {flex:1;min-width:0}
.modal-card .user-profile-name {margin:0 0 4px;font-size:21px;line-height:26px;font-weight:700;letter-spacing:-.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal-card p.user-profile-status {display:flex;align-items:center;gap:6px;margin:0;font-size:13px;line-height:20px;color:var(--muted)}
.modal-card p.user-profile-status.is-online {color:var(--ink);font-weight:500}
.user-profile-status .presence-pulse-icon {width:15px;height:15px;margin:0}
.modal-card p.user-profile-handle {margin:0;font-size:13px;line-height:20px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-profile-handle:empty {display:none}
.user-profile-actions {display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;margin:0 0 24px}
.user-profile-action {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;height:42px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font-size:13.5px;font-weight:600;white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .1s ease}
.user-profile-action span {min-width:0;overflow:hidden;text-overflow:ellipsis}
.user-profile-action .ui-icon {width:17px;height:17px}
.user-profile-action:hover:not(:disabled) {border-color:color-mix(in srgb,var(--teal) 35%,var(--line));color:var(--teal-dark)}
.user-profile-action:active:not(:disabled) {transform:scale(.98)}
.user-profile-action:disabled {cursor:default}
.user-profile-action[aria-busy="true"] {opacity:.7}
#userProfileWriteBtn {border-color:transparent;background:var(--teal);color:#fff}
#userProfileWriteBtn:hover:not(:disabled) {filter:brightness(.96);color:#fff}
.user-profile-action.is-done {border-color:transparent;background:color-mix(in srgb,var(--online,#1f9d55) 10%,var(--panel));color:var(--online,#1f9d55)}
.user-profile-section {margin:0 0 22px}
.modal-card .user-profile-section-title {display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:15px;font-weight:650;letter-spacing:0}
.user-profile-section-title .ui-icon {width:18px;height:18px;color:var(--teal)}
#userProfileModal .profile-card,#pollModal .profile-card,#pollResultsModal .profile-card {border-radius:12px}
#userProfileModal .profile-row,#pollModal .profile-row,#pollResultsModal .profile-row {min-height:52px;padding:8px 18px;gap:16px}
#userProfileModal .profile-label,#pollModal .profile-label,#pollResultsModal .profile-label {display:flex;align-items:center;gap:12px;flex:none;font-size:13px;font-weight:500;color:var(--profile-label-color)}
#userProfileModal .profile-label .ui-icon,#pollModal .profile-label .ui-icon,#pollResultsModal .profile-label .ui-icon {width:18px;height:18px;color:var(--muted)}
#userProfileModal .profile-value,#pollModal .profile-value,#pollResultsModal .profile-value {min-width:0;font-size:13px;color:var(--profile-value-color);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#userProfileModal .profile-value.is-empty,#pollModal .profile-value.is-empty,#pollResultsModal .profile-value.is-empty {color:color-mix(in srgb,var(--muted) 75%,transparent)}
.user-profile-report-row {width:100%;margin:0;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer;transition:background-color .15s ease}
.user-profile-report-row:hover {background:color-mix(in srgb,#e24b4b 6%,var(--panel))}
#userProfileModal .user-profile-report-row .profile-label,#userProfileModal .user-profile-report-row .profile-label .ui-icon {color:#d13f3f}
.user-profile-row-chevron {display:grid;place-items:center;margin-left:auto;color:var(--muted)}
.user-profile-row-chevron .ui-icon {width:16px;height:16px}
.modal-card p.user-profile-note {margin:8px 4px 0;font-size:12px;line-height:1.45;color:var(--muted)}
@media(max-width:900px) {
  #userProfileModal .profile-label,#pollModal .profile-label,#pollResultsModal .profile-label {font-size:14.5px;font-weight:500}
  #userProfileModal .profile-value,#pollModal .profile-value,#pollResultsModal .profile-value {font-size:14px}
}
@media(max-width:640px) {
  #userProfileModal .modal-scroll.user-profile-body,#pollModal .modal-scroll.user-profile-body,#pollResultsModal .modal-scroll.user-profile-body {padding:0 20px 4px}
  .user-profile-hero {gap:16px;padding:20px 0 18px}
  .user-profile-avatar {width:72px;height:72px;min-width:72px;min-height:72px;font-size:26px}
  .modal-card .user-profile-name {font-size:19px;line-height:24px}
  .user-profile-action {height:46px;font-size:14.5px;border-radius:12px}
  #userProfileModal .profile-row,#pollModal .profile-row,#pollResultsModal .profile-row {min-height:54px;padding:8px 16px}
}

.msg-forward-action {--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5 6 6-6 6'/%3E%3Cpath d='M21 11H10a7 7 0 0 0-7 7v1'/%3E%3C/svg%3E")}
.msg-forwarded-label {display:flex;align-items:center;gap:5px;max-width:100%;margin:0 0 4px;padding:0;border:0;background:none;color:var(--teal-dark);font:inherit;font-size:12px;font-weight:600;line-height:1.35;text-align:left}
.msg-forwarded-label .ui-icon {width:14px;height:14px;flex:none}
.msg-forwarded-label span {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.msg-forwarded-label {cursor:pointer}
button.msg-forwarded-label:hover span {text-decoration:underline;text-underline-offset:2px}
.msg.msg-media-only .msg-forwarded-label {margin:2px 4px 6px}
.forward-card {display:flex;flex-direction:column;width:min(480px,100%);max-height:min(640px,calc(100dvh - 48px))}
.modal-card p.forward-preview {margin:6px 0 0;padding:8px 12px;border-left:3px solid var(--teal);border-radius:8px;background:var(--search-input-bg);color:var(--ink);font-size:13px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.forward-search {display:flex;align-items:center;gap:10px;margin:14px 24px 6px;padding:0 12px;height:var(--control);border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:text}
.forward-search svg {width:17px;height:17px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round}
.forward-search:focus-within {border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 12%,transparent)}
.modal-card .forward-search input,.modal-card .forward-search input:focus {flex:1;min-width:0;height:100%;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;font-size:14px}
.forward-list {flex:1 1 auto;min-height:160px;overflow-y:auto;padding:6px 14px 10px}
.forward-row {display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 10px;border:0;border-radius:12px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background-color .12s ease}
.forward-row:hover:not(:disabled),.forward-row:focus-visible {outline:none;background:var(--chat-row-hover)}
.forward-row[aria-selected="true"] {background:color-mix(in srgb,var(--teal) 8%,var(--panel))}
.forward-row:disabled {opacity:.45;cursor:not-allowed}
.forward-avatar {width:40px;height:40px;min-width:40px;font-size:14px}
.forward-row-copy {display:flex;flex-direction:column;flex:1;min-width:0}
.forward-row-title {font-size:14px;font-weight:600;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.forward-row-sub {font-size:12px;line-height:16px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.forward-check {display:grid;place-items:center;flex:none;width:22px;height:22px;border:1.5px solid color-mix(in srgb,var(--muted) 45%,transparent);border-radius:50%;color:transparent;transition:background-color .12s ease,border-color .12s ease}
.forward-check .ui-icon {width:14px;height:14px;stroke-width:2.4}
.forward-row[aria-selected="true"] .forward-check {border-color:var(--teal);background:var(--teal);color:#fff}
.forward-empty {padding:40px 16px;text-align:center;font-size:13px;color:var(--muted)}
.forward-err:not(:empty) {margin:0 24px 10px}
#forwardModal .modal-actions-group {align-items:center}
.forward-hint {margin-right:auto;font-size:12px;color:var(--muted)}
@media(max-width:640px) {
  .forward-card {max-height:calc(var(--vvh,100dvh) - 22px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  .forward-search {margin:12px 20px 6px;height:44px}
  .forward-list {padding:6px 10px 10px}
  .forward-row {min-height:60px}
  .forward-avatar {width:44px;height:44px;min-width:44px}
  .forward-err:not(:empty) {margin:0 20px 10px}
  #forwardModal .modal-actions-group {flex-wrap:wrap}
  .forward-hint {flex:1 0 100%;text-align:center}
  .forward-hint:empty {display:none}
}
:is(#newDirectModal,#newGroupModal,#messageReceiptModal) .modal-card,:is(#newGroupModal,#messageReceiptModal) :is(.modal-head,.modal-actions-group) {background:var(--profile-sheet-bg)}
.modal-scroll.sheet-body {padding:0 24px 4px}
.sheet-card {background:var(--panel);border:1px solid var(--profile-row-border);border-radius:12px;box-shadow:0 1px 2px rgb(11 20 26 / 5%);overflow:hidden}
.sheet-section-count {margin-left:auto;padding:1px 9px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--muted)}
.sheet-section-count:empty {display:none}
#messageReceiptModal .modal-scroll.sheet-body {padding-top:20px}
#messageReceiptModal .profile-row {min-height:52px;padding:8px 18px;gap:16px}
#messageReceiptModal .profile-label {display:flex;align-items:center;gap:12px;font-size:13px;font-weight:500;color:var(--profile-label-color)}
#messageReceiptModal .profile-label .ui-icon {width:18px;height:18px;color:var(--muted)}
#messageReceiptModal .profile-value {font-size:13px;font-weight:600;color:var(--teal-dark)}
.receipt-readers {max-height:min(40vh,340px);overflow-y:auto}
.receipt-reader-row.is-empty {justify-content:center;color:var(--muted);font-size:13px}
.receipt-reader-main {display:flex;align-items:center;gap:12px;min-width:0}
.receipt-reader-avatar {width:32px;height:32px;min-width:32px;font-size:12px}
.receipt-reader-name {min-width:0;font-size:13.5px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.receipt-reader-status {display:inline-flex;align-items:center;gap:5px;flex:none;font-size:12.5px}
.receipt-reader-status.is-read {color:var(--online,#1f9d55);font-weight:600}
.receipt-reader-status.is-read .ui-icon {width:15px;height:15px;stroke-width:2.2}
.receipt-reader-status.is-unread {color:var(--muted)}
#newGroupModal .modal-scroll.sheet-body .modal-section {padding-left:0;padding-right:0}
#newGroupModal .new-group-identity {padding:20px 0 0}
#newGroupModal .new-group-identity .modal-field-row.sheet-card {align-items:center;gap:16px;padding:14px 16px}
#newGroupModal .new-group-identity .modal-field-col {flex:1;min-width:0}
#newGroupModal .new-group-identity .modal-field-label {font-size:12px;font-weight:600;color:var(--muted)}
#newGroupModal .new-group-identity input.modal-field-input {background:var(--profile-sheet-bg)}
#newGroupModal .new-group-preview {width:56px;height:56px;font-size:20px}
#newGroupModal .new-group-members {padding:22px 0 8px}
#newGroupModal .modal-section-head {margin-bottom:10px}
#newGroupModal .modal-section-title.user-profile-section-title {margin:0;font-size:15px}
#newGroupModal .modal-title-count {margin-left:6px}
#newGroupModal .modal-contact-search-wrap {margin:0 0 10px}
#newGroupModal input.modal-contact-search {background:var(--panel);border-radius:12px}
#newGroupModal .modal-group-contacts-list {border:1px solid var(--profile-row-border);border-radius:12px;background:var(--panel);box-shadow:0 1px 2px rgb(11 20 26 / 5%);min-height:0}
#newGroupModal .modal-group-contacts-list .modal-contact-row {min-height:56px;padding:8px 16px;border-bottom:1px solid var(--profile-row-border);border-radius:0}
#newGroupModal .modal-group-contacts-list .modal-contact-row:last-child {border-bottom:0}
#newGroupModal .new-group-hint {margin:12px 2px 0}
#newDirectModal .palette-head {padding:16px 16px 0 24px}
#newDirectModal .palette-search {margin:14px 24px 4px;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
#newDirectModal .palette-search:focus-within {border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 12%,transparent)}
#newDirectModal .palette-list.modal-contacts-list {padding:6px 24px 16px}
#newDirectModal .palette-list .modal-search-section-hdr {display:flex;align-items:center;gap:8px;padding:14px 2px 8px;font-size:13px;font-weight:650;color:var(--ink)}
#newDirectModal .palette-list .modal-search-section-hdr:before {content:'';width:16px;height:16px;flex:none;background:var(--teal);-webkit-mask:var(--ico-users) center / contain no-repeat;mask:var(--ico-users) center / contain no-repeat}
#newDirectModal .palette-list .modal-contact-row {min-height:56px;padding:8px 16px;border:1px solid var(--profile-row-border);border-top:0;border-radius:0;background:var(--panel)}
#newDirectModal .palette-list .modal-search-section-hdr + .modal-contact-row,#newDirectModal .palette-list > .modal-contact-row:first-child {border-top:1px solid var(--profile-row-border);border-top-left-radius:12px;border-top-right-radius:12px}
#newDirectModal .palette-list .modal-contact-row:has(+ .modal-search-section-hdr),#newDirectModal .palette-list .modal-contact-row:last-child {border-bottom-left-radius:12px;border-bottom-right-radius:12px}
#newDirectModal .palette-list .modal-contact-row:hover,#newDirectModal .palette-list .modal-contact-row:focus-visible {background:color-mix(in srgb,var(--teal) 6%,var(--panel))}
#newDirectModal .palette-foot {background:var(--profile-sheet-bg)}
@media(max-width:640px) {
  .modal-scroll.sheet-body {padding:0 20px 4px}
  #newDirectModal .palette-head {padding:10px 18px 4px 20px}
  #newDirectModal .palette-search {margin:12px 20px 4px}
  #newDirectModal .palette-list.modal-contacts-list {padding:6px 20px 12px}
  #messageReceiptModal .profile-row {min-height:56px;padding:8px 16px}
  #contactsList .contact-row {grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"avatar main actions" "avatar presence actions";row-gap:0}
  #contactsList .contact-row>.avatar {grid-area:avatar}
  #contactsList .contact-main {grid-area:main;align-self:end}
  #contactsList .contact-presence {display:block;grid-area:presence;align-self:start;font-size:12.5px;line-height:18px}
  #contactsList .contact-actions {grid-area:actions}
}
#messageReceiptModal .receipt-reader-row,#messageReceiptModal .receipt-reader-row:hover {background:transparent;border-radius:0}
#messageReceiptModal .receipt-reader-status,body[data-theme="dark"] #messageReceiptModal .receipt-reader-status.is-read {padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.contact-presence {display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.contact-presence:not(.is-online) {padding-left:21px}
.contact-presence.is-online {color:var(--ink);font-weight:500}
.contact-presence .presence-pulse-icon {width:15px;height:15px;margin:0}
.contact-presence[title] {cursor:help}
@media(max-width:640px) {
  #contactsList .contact-presence {display:flex;gap:5px}
  #contactsList .contact-presence:not(.is-online) {padding-left:0}
  #contactsList .contact-presence .presence-pulse-icon {width:14px;height:14px}
}
@media(max-width:640px) {
  .modal-overlay:not(.confirm-overlay) {align-items:flex-end;justify-content:stretch;padding:calc(12px + env(safe-area-inset-top)) 0 0}
  .modal-overlay:not(.confirm-overlay) .modal-card {width:100%;max-width:100%;border-radius:22px 22px 0 0;max-height:calc(var(--vvh,100dvh) - 12px - env(safe-area-inset-top))}
  .keyboard-open .modal-overlay:not(.confirm-overlay) .modal-actions-group,
  .keyboard-open .modal-overlay:not(.confirm-overlay) .modal-card-compact>.modal-actions {padding-bottom:12px}
  .keyboard-open .modal-overlay:not(.confirm-overlay) .modal-card:not(.modal-card-group):not(.palette-card):not(.modal-card-compact) {padding-bottom:16px}
  .keyboard-open .modal-overlay:not(.confirm-overlay) .modal-card.palette-card {padding-bottom:8px}
}
@media(max-width:900px) {
  .keyboard-open .composer {padding-bottom:8px}
  .keyboard-open .thread {padding-bottom:8px}
}
@media(max-width:640px) {
  .confirm-overlay .modal-card.confirm-card {padding:22px 20px 18px;border-radius:16px}
  .confirm-overlay .modal-card.confirm-card .modal-actions {position:static;padding:12px 0 0}
}
@media(max-width:900px) {
  html,body {background:var(--sidebar-bg)}
  html:has(#app.mobile-chat-open:not(.profile-mode)),html:has(#app.mobile-chat-open:not(.profile-mode)) body {background:var(--panel)}
  html:has(#app.profile-mode),html:has(#app.profile-mode) body {background:var(--profile-sheet-bg)}
  html:has(#auth:not(.hidden)),html:has(#auth:not(.hidden)) body {background:var(--panel)}
  html:has(#bootSplash:not(.hidden)),html:has(#bootSplash:not(.hidden)) body {background:#03251b}
}
@media(max-width:640px) {
  .chat-row-content {gap:14px;min-height:78px;padding:9px 14px}
  .chat-row .avatar.chat-avatar {width:56px;height:56px;min-width:56px;font-size:20px}
  .chat-title {font-size:17px;font-weight:600;line-height:22px}
  .chat-title-wrap .presence-pulse-icon {width:16px;height:16px}
  .chat-type-pill,body[data-theme="dark"] .chat-type-pill {font-size:12px;line-height:22px}
  .chat-time {font-size:14px;line-height:22px}
  .chat-sub {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal;font-size:15px;line-height:20px;word-break:break-word}
  .chat-unread-badge {min-width:22px;height:22px;padding:0 7px;border-radius:11px;font-size:13px}
  #app .side-head .me .name {font-size:17px;line-height:22px}
  #app .side-head .me .profile-value {font-size:14px;line-height:19px}
  #convTitle {font-size:17px;font-weight:600;line-height:22px}
  #convMembers {font-size:13.5px;line-height:18px}
  .conv-head .avatar {width:42px;height:42px;min-width:42px;font-size:16px}
  .msg {font-size:16.5px;line-height:1.38;padding:7px 12px 6px}
  .msg .sender {font-size:14px}
  .msg .meta-line {font-size:12px}
  .msg-forwarded-label {font-size:13.5px}
  .msg .msg-reply-preview {font-size:14px}
  .message-day {font-size:13.5px}
  .composer textarea,.composer-row textarea {font-size:16.5px!important;line-height:22px}
  #contactsList .contact-row {min-height:72px}
  #contactsList .contact-row>.avatar {width:48px;height:48px;min-width:48px;font-size:17px}
  #contactsList .contact-name {font-size:17px;font-weight:600}
  #contactsList .contact-username {font-size:14.5px}
  #contactsList .contact-presence {font-size:14.5px;line-height:20px}
  #contactsList .contact-presence .presence-pulse-icon {width:16px;height:16px}
}
@media(max-width:640px) {
  #contactsList .contact-row {grid-template-columns:48px minmax(0,1fr) auto;column-gap:14px}
}
@media(max-width:640px) {
  :root {--gutter:16px}
  #app .side-head {padding-left:var(--gutter);padding-right:var(--gutter)}
  .chats {padding:0 4px var(--gutter)}
  .chat-row-content {padding:9px 12px}
  .side-head-tool,.conv-back,.conversation-info,.composer .icon-btn,.composer .send,.modal-close-btn,
  .modal-card-group .modal-head .modal-close-btn,.modal-card-compact .modal-head .modal-close-btn,.palette-head .modal-close-btn {width:44px;height:44px;min-width:44px}
  .composer .send {border-radius:12px}
  .composer .icon-btn .ui-icon,.composer .icon-btn svg {width:22px;height:22px}
  .conversation-info .ui-icon {width:22px;height:22px}
  .conv-head {padding-left:4px;padding-right:8px}

  #app>.profile-sheet .profile-head {gap:4px;padding:env(safe-area-inset-top) var(--gutter) 0 6px;font-size:20px;font-weight:700;letter-spacing:-.3px}
  #app>.profile-sheet .profile-back,.profile-head .profile-back {width:44px;height:44px;min-width:44px;font-size:30px;line-height:1;border-radius:12px}
  #contactsPanel .contacts-add-btn {height:40px;min-height:40px;margin-left:auto;padding:0 14px;border-radius:12px;font-size:14px}
  #profilePanel .profile-main,#contactsPanel .profile-main {padding:4px var(--gutter) calc(24px + env(safe-area-inset-bottom))}

  .profile-hero .profile-identity-copy h2 {font-size:22px;line-height:28px}
  .profile-hero .profile-identity-copy p {font-size:15px;line-height:21px}
  #profilePanel .profile-section-heading h2 {font-size:16px;font-weight:600}
  #profilePanel .profile-section-heading p {font-size:13px}
  #profilePanel .profile-label,#profilePanel .profile-password-title {font-size:15px;font-weight:500}
  #profilePanel .profile-value {font-size:15px}
  #profilePanel .profile-setting-section .profile-row {min-height:54px;padding:8px 16px}
  #profilePanel .profile-label .ui-icon,#profilePanel .profile-password-title .ui-icon {width:20px;height:20px}
  #profilePanel .profile-row .icon-btn,#profilePasswordToggleBtn {width:44px;height:44px;min-width:44px;margin:-8px -12px -8px -4px;display:grid;place-items:center}

  #contactsList .contact-row {padding:12px var(--gutter)}
  .contact-actions .contact-write-hint,.contact-menu summary {width:44px;height:44px;border-radius:12px}

  .modal-title,.modal-card h2.modal-title,.palette-head .modal-title {font-size:20px;font-weight:700;line-height:26px;letter-spacing:-.3px}
  .modal-lead,.modal-card p.modal-lead {font-size:14px}
  .modal-actions .btn,.modal-actions-group .btn {height:50px;min-height:50px;font-size:16px;font-weight:600}
  .modal-card-group .modal-head,.modal-card-compact .modal-head {padding:22px var(--gutter) 14px}
  .modal-card-group .modal-scroll,.modal-scroll.sheet-body {padding-left:var(--gutter);padding-right:var(--gutter)}
  .modal-card-group>.modal-section {padding-left:var(--gutter);padding-right:var(--gutter)}
  .modal-actions-group {padding-left:var(--gutter);padding-right:var(--gutter)}
  .modal-card:not(.modal-card-group):not(.palette-card):not(.modal-card-compact) {padding-left:var(--gutter);padding-right:var(--gutter)}
  .modal-card-compact>input {width:calc(100% - 2 * var(--gutter));margin-left:var(--gutter);margin-right:var(--gutter)}
  .modal-card-compact>.modal-actions {padding-left:var(--gutter);padding-right:var(--gutter)}
  .palette-head,#newDirectModal .palette-head {padding:10px 10px 4px var(--gutter)}
  #newDirectModal .palette-search {margin-left:var(--gutter);margin-right:var(--gutter)}
  #newDirectModal .palette-list.modal-contacts-list {padding-left:var(--gutter);padding-right:var(--gutter)}
  .forward-search {margin-left:var(--gutter);margin-right:var(--gutter)}
  .forward-list {padding-left:calc(var(--gutter) - 6px);padding-right:calc(var(--gutter) - 6px)}
  .forward-err:not(:empty) {margin-left:var(--gutter);margin-right:var(--gutter)}

  .user-profile-section-title,.modal-card .user-profile-section-title,.modal-card .modal-section-title,#newGroupModal .modal-section-title.user-profile-section-title {font-size:16px;font-weight:600}
  .modal-group-name {font-size:20px;font-weight:700}
  .group-info-view,.group-info-description {font-size:15px}
  .modal-inline-action-btn {height:36px;min-height:36px;padding:0 14px;font-size:14px;border-radius:10px}
  .member-card {min-height:60px}
  .member-card .avatar {width:44px;height:44px;min-width:44px;min-height:44px;font-size:16px}
  .member-card-name {font-size:16px;line-height:22px;font-weight:600}
  .member-card-username {font-size:14px;line-height:19px}
  .member-role-pill {font-size:12px;line-height:19px}
  .member-contact-pill {font-size:13px;line-height:19px}
  .member-card-menu-btn {width:44px;height:44px;margin:-6px -8px -6px 0;font-size:22px}
  .group-exit-item-title {font-size:16px}
  .group-exit-item-note {font-size:13px}

  .modal-card-group .modal-contact-row .avatar,.palette-list .modal-contact-avatar,.forward-avatar,.receipt-reader-avatar {width:44px;height:44px;min-width:44px;min-height:44px;font-size:16px}
  .modal-card-group .modal-contact-name,.palette-list .modal-contact-name,.forward-row-title,.receipt-reader-name {font-size:16px;line-height:22px;font-weight:600}
  .modal-card-group .modal-contact-username,.palette-list .modal-contact-username,.forward-row-sub {font-size:14px;line-height:19px}
  #newDirectModal .palette-list .modal-contact-row,#newGroupModal .modal-group-contacts-list .modal-contact-row {min-height:62px}
  .receipt-reader-status {font-size:14px}
  #messageReceiptModal .profile-label,#messageReceiptModal .profile-value {font-size:15px}

  .modal-card .user-profile-name {font-size:22px;line-height:28px}
  .modal-card p.user-profile-status,.modal-card p.user-profile-handle {font-size:15px;line-height:21px}
  #userProfileModal .profile-label,#pollModal .profile-label,#pollResultsModal .profile-label,#userProfileModal .profile-value,#pollModal .profile-value,#pollResultsModal .profile-value {font-size:15px}
  .user-profile-action {font-size:15px}

  .msg-action-sheet-item {min-height:54px;font-size:17px}
  .msg-action-sheet-cancel {min-height:54px;font-size:17px}
}
@media(max-width:640px) {
  #profilePanel .profile-edit-btn-icon {width:44px;height:44px;min-width:44px;margin:-8px -12px -8px -4px;display:grid;place-items:center;border-radius:12px}
  #profilePanel .profile-edit-btn-icon .ui-icon {width:18px;height:18px}
  .modal-card input.modal-field-input,.modal-card input.modal-contact-search,.modal-card-compact>input,.forward-search {height:48px;min-height:48px;border-radius:12px}
  #newGroupModal .new-group-identity .modal-field-label {font-size:13px}
  .new-group-hint,.new-group-hint .link-btn {font-size:14px}
  .workspace-create {font-size:15px}
  #convMembers {font-size:14px;line-height:19px}
  .message-day {font-size:14px}
  #contactsList .contact-username,#contactsList .contact-presence {font-size:14px}
}

.msg.msg-poll {min-width:min(300px,78vw)}
.poll {display:flex;flex-direction:column;gap:4px;padding:2px 0 0}
.poll-question {font-size:15px;font-weight:600;line-height:1.35;color:var(--ink);word-break:break-word}
.poll-kind-row {display:flex;align-items:center;gap:6px;min-height:20px}
.poll-kind {font-size:12px;color:var(--muted)}
.poll-recent-voters {display:flex}
.msg .poll-voter-avatar {flex:0 0 18px;width:18px;height:18px;min-width:18px;font-size:8px;border:1.5px solid var(--bubble-in,var(--panel))}
.msg.out .poll-voter-avatar {border-color:var(--bubble-out)}
.msg .poll-voter-avatar + .poll-voter-avatar {margin-left:-5px}
.poll-options {display:flex;flex-direction:column;gap:6px;margin-top:6px}
.poll-option {display:flex;width:100%;border-radius:10px;color:var(--ink);font:inherit;font-size:14px;text-align:left}
.poll-option-choice {align-items:center;gap:10px;min-height:40px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--muted) 28%,transparent);background:color-mix(in srgb,var(--panel) 55%,transparent);cursor:pointer;transition:background-color .12s ease,border-color .12s ease}
.poll-option-choice:hover:not(:disabled),.poll-option-choice:focus-visible {outline:none;border-color:var(--teal)}
.poll-option-choice.is-selected {border-color:var(--teal);background:color-mix(in srgb,var(--teal) 10%,var(--panel))}
.poll-option-choice:disabled {opacity:.6;cursor:progress}
.poll-option-mark {display:grid;place-items:center;flex:none;width:20px;height:20px;border:1.5px solid color-mix(in srgb,var(--muted) 55%,transparent);border-radius:50%;color:#fff}
.poll-option-mark.is-multiple {border-radius:6px}
.poll-option-choice.is-selected .poll-option-mark {border-color:var(--teal);background:var(--teal)}
.poll-option-mark .ui-icon {width:13px;height:13px;stroke-width:2.6}
.poll-option-text {display:inline-flex;align-items:center;gap:6px;min-width:0;line-height:20px;word-break:break-word}
.poll-option-result {display:grid;grid-template-columns:38px minmax(0,1fr);align-items:start;gap:0 6px;padding:2px 0}
.poll-option-percent {font-size:13px;font-weight:700;line-height:20px;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.poll-option-body {display:flex;flex-direction:column;gap:5px;min-width:0}
.poll-option-result.is-chosen .poll-option-text {font-weight:600}
.poll-option-check {display:inline-grid;place-items:center;flex:none;width:16px;height:16px;border-radius:50%;background:var(--teal);color:#fff}
.poll-option-check .ui-icon {width:11px;height:11px;stroke-width:3}
.poll-option-bar {position:relative;height:4px;border-radius:999px;background:transparent;overflow:hidden}
.poll-option-bar::before {content:"";position:absolute;inset:0 auto 0 0;min-width:4px;width:var(--poll-share,0%);border-radius:inherit;background:color-mix(in srgb,var(--teal) 45%,transparent);transition:width .3s ease}
.poll-option-result.is-chosen .poll-option-bar::before {background:var(--teal)}
.poll-footer {display:flex;align-items:center;justify-content:center;min-height:34px;margin-top:6px;padding-top:4px;border-top:1px solid color-mix(in srgb,var(--muted) 18%,transparent)}
.poll-total {font-size:13px;color:var(--muted)}
.poll-action {border:0;padding:4px 10px;background:transparent;color:var(--teal);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.poll-action:disabled {opacity:.45;cursor:default}
.poll-action:focus-visible {outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}
.poll-card,.poll-results-card {display:flex;flex-direction:column;width:min(480px,100%);max-height:min(720px,calc(100dvh - 48px))}
.poll-hero-icon {background:var(--teal);color:#fff}
.poll-hero-icon svg {width:36px;height:36px;fill:currentColor}
.modal-card .user-profile-name.poll-hero-question {white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.poll-section-counter {margin-left:auto;font-size:12px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
#pollModal textarea.poll-question-input {display:block;width:100%;min-height:76px;margin:0;padding:14px 18px;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--ink);font:inherit;font-size:14px;line-height:1.45;resize:vertical}
#pollModal textarea.poll-question-input:focus {outline:none;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--teal) 35%,transparent);border-radius:12px}
.poll-options-editor .poll-option-row:last-child {border-bottom:1px solid var(--profile-row-border)}
#pollModal .poll-option-row {gap:10px;padding:4px 8px 4px 18px}
.poll-option-index {display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal);font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
#pollModal .poll-option-input,#pollModal .poll-option-input:focus {flex:1;min-width:0;height:44px;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;color:var(--ink);font:inherit;font-size:14px;outline:none}
.poll-option-remove {display:grid;place-items:center;flex:none;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer}
.poll-option-remove:hover {background:var(--chat-row-hover);color:var(--ink)}
.poll-option-remove svg {width:15px;height:15px;fill:currentColor}
.poll-option-remove[hidden],.poll-add-option-row[hidden] {display:none}
.poll-add-option-row {width:100%;margin:0;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer;transition:background-color .15s ease}
.poll-add-option-row:hover {background:color-mix(in srgb,var(--teal) 6%,var(--panel))}
#pollModal .poll-add-option-row .profile-label,#pollModal .poll-add-option-row .profile-label .ui-icon {color:var(--teal);font-weight:600}
.poll-err:not(:empty) {margin:0 24px 10px}
.poll-results-option-title .poll-results-option-text {min-width:0;overflow-wrap:anywhere}
.modal-card .poll-results-option-title .poll-results-option-meta {flex:none;margin-left:auto;font-size:12px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.poll-results-option-title:not(.is-chosen) .ui-icon {color:var(--muted)}
.poll-results-bar {display:block;position:relative;height:4px;margin:-2px 0 10px;border-radius:999px;background:color-mix(in srgb,var(--muted) 16%,transparent);overflow:hidden}
.poll-results-bar::before {content:"";position:absolute;inset:0 auto 0 0;width:var(--poll-share,0%);border-radius:inherit;background:var(--teal)}
.poll-results-voter {width:100%;margin:0;border:0;background:transparent;font:inherit;text-align:left}
.poll-results-voter.is-clickable {cursor:pointer;transition:background-color .15s ease}
.poll-results-voter.is-clickable:hover {background:var(--chat-row-hover)}
#pollResultsModal .poll-results-voter .profile-label {min-width:0;color:var(--ink)}
.poll-results-voter .poll-voter-avatar {flex:0 0 32px;width:32px;height:32px;min-width:32px;font-size:12px}
.poll-results-voter-name {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pollResultsModal .poll-results-empty .profile-label {font-weight:400;color:var(--muted)}
@media(max-width:640px) {
  .poll-card,.poll-results-card {max-height:calc(var(--vvh,100dvh) - 22px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  .poll-option-choice {min-height:44px}
  .poll-option-remove {width:44px;height:44px}
  #pollModal .poll-option-input,#pollModal .poll-option-input:focus {height:48px;font-size:16px}
  #pollModal textarea.poll-question-input {font-size:16px}
}
}

.msg.msg-contact {min-width:min(260px,72vw)}
.contact-card {display:flex;flex-direction:column;gap:6px;padding:2px 0}
.contact-card-main {display:flex;align-items:center;gap:12px;width:100%;padding:4px 2px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.contact-card-main:disabled {cursor:default}
.contact-card-main:hover:not(:disabled) .contact-card-name {color:var(--teal-dark)}
.contact-card-main:focus-visible {outline:2px solid var(--teal);outline-offset:2px}
.msg .contact-card-avatar {flex:0 0 44px;width:44px;height:44px;min-width:44px;font-size:16px}
.contact-card-copy {display:flex;flex:1;flex-direction:column;min-width:0}
.contact-card-name {font-size:15px;font-weight:600;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .12s ease}
.contact-card-sub {font-size:13px;line-height:18px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contact-card-chevron {display:grid;place-items:center;flex:none;color:var(--muted)}
.contact-card-chevron .ui-icon {width:16px;height:16px}
.contact-card-actions {display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;padding-top:6px;border-top:1px solid color-mix(in srgb,var(--muted) 18%,transparent)}
.contact-card-action {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--teal);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.contact-card-action:hover:not(:disabled) {background:color-mix(in srgb,var(--teal) 8%,transparent)}
.contact-card-action:disabled {opacity:.55;cursor:progress}
.contact-card-action .ui-icon {width:16px;height:16px}
.user-profile-share-row {width:100%;margin:0;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer;transition:background-color .15s ease}
.user-profile-share-row:hover {background:var(--chat-row-hover)}
@media(max-width:640px) {
  .contact-card-action {min-height:40px}
}
.contact-menu .contact-menu-list {position:absolute;right:0;top:40px;z-index:30;display:flex;flex-direction:column;min-width:190px;padding:4px;border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:0 8px 24px #15392d20}
.contact-menu .contact-menu-list button {position:static;width:100%;max-width:none;height:auto;padding:10px 12px;border:0;border-radius:6px;background:transparent;box-shadow:none;color:var(--ink);font:inherit;font-size:12.5px;text-align:left;cursor:pointer}
.contact-menu .contact-menu-list button:hover {background:var(--chat-row-hover)}
.contact-menu .contact-menu-list .contact-remove-btn {color:#c43d39}