:root {
  color-scheme: dark;
  --ink: #f5f3ff;
  --muted: #a7a7bd;
  --muted-strong: #d0cede;
  --canvas: #181925;
  --panel: rgba(29, 30, 45, 0.9);
  --panel-solid: #202134;
  --panel-soft: rgba(255, 255, 255, 0.055);
  --control: #151621;
  --control-hover: #191a28;
  --border: rgba(237, 233, 255, 0.1);
  --border-bright: rgba(237, 233, 255, 0.2);
  --accent: #a994ff;
  --accent-bright: #c7bbff;
  --accent-dark: #7660dc;
  --green: #77dfad;
  --danger: #ff97a8;
  --shadow: 0 30px 90px rgba(1, 2, 10, 0.46);
  --app-viewport-height: 100dvh;
  --app-viewport-top: 0px;
  --motion-press: 110ms;
  --motion-state: 160ms;
  --motion-screen: 240ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: var(--canvas); }
button, input, textarea { font: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: wait; opacity: 0.62; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
[hidden] { display: none !important; }
::selection { color: #171425; background: #c7bbff; }

.backdrop, .glow, .noise { position: fixed; inset: 0; pointer-events: none; }
.backdrop { overflow: hidden; background: radial-gradient(circle at 14% -5%, rgba(92, 85, 159, 0.3), transparent 32%), var(--canvas); }
.glow { filter: blur(4px); opacity: 0.68; }
.glow-one { inset: auto auto -30vh -16vw; width: 54vw; height: 54vw; border-radius: 50%; background: radial-gradient(circle, rgba(116, 87, 228, 0.26), rgba(116, 87, 228, 0)); }
.glow-two { inset: -22vh -18vw auto auto; width: 58vw; height: 58vw; border-radius: 50%; background: radial-gradient(circle, rgba(130, 111, 215, 0.16), rgba(130, 111, 215, 0)); }
.noise { opacity: 0.075; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }

.page-shell { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 22px; }
.auth-view { width: min(100%, 426px); }
.auth-card { padding: 30px; border: 1px solid var(--border); border-radius: 24px; background: linear-gradient(150deg, rgba(39, 40, 60, 0.95), rgba(27, 28, 43, 0.94)); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.055); backdrop-filter: blur(20px); }
.eyebrow { margin-bottom: 9px; color: var(--accent-bright); font-size: 11px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
.auth-card h1 { margin-bottom: 8px; font-size: clamp(30px, 7vw, 40px); line-height: 1.06; letter-spacing: -0.06em; }
.auth-lead { margin-bottom: 29px; color: var(--muted); line-height: 1.55; }
.field-label { display: block; margin: 0 0 8px 2px; color: var(--muted-strong); font-size: 13px; font-weight: 650; }
.field { width: 100%; height: 48px; margin-bottom: 18px; padding: 0 14px; border: 1px solid var(--border); border-radius: 13px; color: var(--ink); background: var(--control); transition: border-color var(--motion-state) var(--ease-standard), background-color var(--motion-state) var(--ease-standard), box-shadow var(--motion-state) var(--ease-standard); }
.field::placeholder { color: #77768d; }
.field:hover { border-color: var(--border-bright); }
.field:focus { border-color: var(--accent); background: var(--control-hover); box-shadow: 0 0 0 3px rgba(169, 148, 255, 0.11); outline: 0; }
.password-wrap { position: relative; }
.password-wrap .field { padding-right: 48px; }
.password-toggle { position: absolute; top: 9px; right: 9px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; color: var(--muted); background: transparent; }
.password-toggle:hover { color: var(--ink); background: rgba(255, 255, 255, 0.07); }
.password-toggle svg, .icon-button svg, .people-search svg, .composer-action svg, .send-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.form-error { margin: -3px 0 14px; padding: 10px 12px; border: 1px solid rgba(255, 151, 168, 0.22); border-radius: 10px; color: #ffb5c0; background: rgba(157, 44, 72, 0.14); font-size: 13px; line-height: 1.35; }
.primary-button, .secondary-button { min-height: 48px; border-radius: 13px; font-weight: 750; transition: transform var(--motion-press) var(--ease-standard), filter var(--motion-state) var(--ease-standard), background-color var(--motion-state) var(--ease-standard); }
.primary-button { width: 100%; border: 1px solid rgba(228, 220, 255, 0.32); color: #161423; background: linear-gradient(135deg, #c7bbff, #9c85ff); box-shadow: 0 10px 24px rgba(113, 87, 217, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.61); }
.auth-card form { display: grid; gap: 12px; }
.auth-card .field, .auth-card .form-error { margin: 0; }
.auth-card .field { font-size: 16px; }
.auth-card .field:focus { box-shadow: none; }
.auth-card .primary-button { margin-top: 2px; }
.auth-mode-button { width: 100%; min-height: 40px; margin-top: 12px; padding: 8px; border: 1px solid rgba(237, 233, 255, 0.08); border-radius: 12px; color: var(--muted-strong); background: rgba(255, 255, 255, 0.028); font-size: 13px; font-weight: 700; transition: color var(--motion-state) var(--ease-standard), background-color var(--motion-state) var(--ease-standard), border-color var(--motion-state) var(--ease-standard); }
.auth-mode-button:hover { border-color: rgba(199, 187, 255, 0.2); color: #fff; background: rgba(169, 148, 255, 0.08); }

.messenger { width: min(1200px, 100%); height: min(840px, calc(100vh - 44px)); min-height: 620px; display: grid; grid-template-columns: 312px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--border); border-radius: 28px; background: var(--panel); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.055); backdrop-filter: blur(20px); }
.sidebar { z-index: 1; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: rgba(17, 18, 30, 0.75); }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.sidebar-top-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.icon-button, .composer-action, .send-button, .remove-attachment { display: inline-grid; place-items: center; border: 0; }
.icon-button.subtle { width: 34px; height: 34px; padding: 0; border-radius: 10px; color: var(--muted); background: transparent; }
.password-toggle,
.icon-button.subtle,
.invite-inbox,
.current-user,
.remove-attachment,
.small-button,
.logout-button {
  transition: color var(--motion-state) var(--ease-standard), background-color var(--motion-state) var(--ease-standard), border-color var(--motion-state) var(--ease-standard), opacity var(--motion-state) var(--ease-standard), transform var(--motion-press) var(--ease-standard);
}
.icon-button.subtle:hover { color: var(--ink); background: rgba(255, 255, 255, 0.07); }
.sidebar-search-row { padding: 12px 12px 4px; }
.search-trigger { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 43px; padding: 0 13px; border: 1px solid rgba(230, 224, 255, 0.09); border-radius: 14px; color: #aaa8bd; text-align: left; background: var(--control); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); font-size: 13px; transition: border-color var(--motion-state) var(--ease-standard), color var(--motion-state) var(--ease-standard), background-color var(--motion-state) var(--ease-standard), transform var(--motion-press) var(--ease-standard); }
.search-trigger svg { flex: 0 0 auto; width: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.people-search { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px; border: 1px solid transparent; border-radius: 10px; color: #807e94; background: rgba(5, 6, 17, 0.25); transition: border-color var(--motion-state) var(--ease-standard), background-color var(--motion-state) var(--ease-standard); }
.people-search:focus-within { border-color: rgba(181, 164, 255, 0.35); background: rgba(5, 6, 17, 0.44); }
.people-search svg { flex: 0 0 auto; width: 16px; }
.people-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.people-search input::placeholder { color: #7f7d90; }
.invite-inbox { display: flex; align-items: center; gap: 9px; width: calc(100% - 24px); margin: 0 12px 11px; padding: 10px; border: 1px solid rgba(196, 182, 255, 0.16); border-radius: 12px; color: var(--ink); text-align: left; background: rgba(168, 145, 255, 0.09); }
.invite-inbox:hover { background: rgba(168, 145, 255, 0.15); }
.invite-inbox-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; color: var(--accent-bright); background: rgba(180, 160, 255, 0.15); }
.invite-inbox > span:nth-child(2) { display: grid; min-width: 0; flex: 1; gap: 2px; }
.invite-inbox strong { font-size: 12px; }
.invite-inbox small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.count-badge, .unread-badge { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; color: #241d43; background: var(--accent-bright); font-size: 10px; font-weight: 800; }
.side-heading { display: flex; justify-content: space-between; margin: 15px 20px 9px; color: #89879f; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.conversation-list { min-height: 0; flex: 1; padding: 0 8px 12px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(203, 194, 244, 0.22) transparent; }
.conversation-list::-webkit-scrollbar, .message-list::-webkit-scrollbar, .sheet-body::-webkit-scrollbar { width: 7px; }
.conversation-list::-webkit-scrollbar-thumb, .message-list::-webkit-scrollbar-thumb, .sheet-body::-webkit-scrollbar-thumb { border-radius: 20px; background: rgba(203, 194, 244, 0.2); }
.conversation-card { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 64px; margin: 3px 0; padding: 9px 10px; border: 1px solid transparent; border-radius: 16px; color: var(--ink); text-align: left; background: transparent; transition: background-color var(--motion-state) var(--ease-standard), border-color var(--motion-state) var(--ease-standard), transform var(--motion-press) var(--ease-standard), opacity var(--motion-state) var(--ease-standard); }
.conversation-card.active { border-color: rgba(190, 175, 255, 0.2); background: rgba(158, 137, 246, 0.13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 5px 16px rgba(5, 5, 17, 0.1); }
.conversation-avatar-wrap { position: relative; display: block; flex: 0 0 auto; }
.conversation-avatar { width: 38px; height: 38px; border-radius: 12px; font-size: 12px; }
.avatar-presence { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border: 2px solid #191a2a; border-radius: 50%; background: var(--green); }
.conversation-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.conversation-title-row { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.conversation-title-row strong { overflow: hidden; flex: 1; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-title-row time { flex: 0 0 auto; color: #89879c; font-size: 10px; }
.conversation-copy small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.unread-badge { flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px; margin-left: -2px; font-size: 9px; }
.conversation-list-empty { display: grid; gap: 5px; padding: 28px 13px; color: var(--muted); text-align: center; }
.conversation-list-empty strong { color: #d9d6e9; font-size: 13px; }
.conversation-list-empty span { font-size: 11px; line-height: 1.45; }
.conversation-list-loading { display: grid; gap: 5px; padding: 3px 2px 12px; animation: conversation-state-in var(--motion-state) var(--ease-standard) both; }
.conversation-skeleton { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 11px; min-height: 64px; padding: 9px 10px; opacity: 0.48; animation: conversation-skeleton-pulse 920ms ease-in-out infinite alternate; }
.conversation-skeleton:nth-child(2) { animation-delay: 90ms; }
.conversation-skeleton:nth-child(3) { animation-delay: 180ms; }
.conversation-skeleton-avatar { width: 38px; height: 38px; border-radius: 12px; background: rgba(220, 214, 255, 0.13); }
.conversation-skeleton-copy { display: grid; gap: 7px; }
.conversation-skeleton-line { height: 8px; border-radius: 999px; background: rgba(220, 214, 255, 0.12); }
.conversation-skeleton-line.title { width: min(58%, 126px); }
.conversation-skeleton-line.preview { width: min(82%, 184px); opacity: 0.72; }
.conversation-list-error { animation: conversation-state-in var(--motion-state) var(--ease-standard) both; }
.conversation-list-retry { justify-self: center; min-height: 32px; margin-top: 7px; padding: 0 13px; border: 1px solid rgba(203, 190, 255, 0.2); border-radius: 10px; color: var(--accent-bright); background: rgba(168, 145, 255, 0.1); transition: color var(--motion-state) var(--ease-standard), background-color var(--motion-state) var(--ease-standard), transform var(--motion-press) var(--ease-standard); }

@keyframes conversation-state-in {
  from { opacity: 0; transform: translate3d(0, 4px, 0); }
}

@keyframes conversation-skeleton-pulse {
  to { opacity: 0.82; }
}

.avatar { display: grid; flex: 0 0 auto; place-items: center; width: 30px; height: 30px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 10px; color: #fff; background: var(--avatar, #6e65cf); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24); font-size: 10px; font-weight: 800; letter-spacing: -0.03em; }
.avatar[data-avatar-color="0"] { --avatar: #7164cf; }
.avatar[data-avatar-color="1"] { --avatar: #a05b9f; }
.avatar[data-avatar-color="2"] { --avatar: #398b9b; }
.avatar[data-avatar-color="3"] { --avatar: #b06b52; }
.avatar[data-avatar-color="4"] { --avatar: #608559; }
.avatar[data-avatar-color="5"] { --avatar: #9a6db0; }
.avatar[data-avatar-color="6"] { --avatar: #6475b7; }
.avatar.has-image { color: transparent; background: #11121d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.avatar.has-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-large { width: 35px; height: 35px; border-radius: 11px; font-size: 11px; }
.current-user { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 66px; padding: 11px 17px; border: 0; border-top: 1px solid var(--border); color: var(--ink); text-align: left; background: rgba(4, 5, 13, 0.18); }
.current-user:hover { background: rgba(255, 255, 255, 0.04); }
.current-user-copy { display: grid; min-width: 0; flex: 1; gap: 2px; }
.current-user-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.current-user-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(119, 223, 173, 0.1); }
.status-dot.offline { background: #89879d; box-shadow: none; }

.conversation-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: 76px minmax(0, 1fr); background: rgba(24, 25, 38, 0.38); }
.conversation-header { position: relative; z-index: 2; display: flex; align-items: center; min-width: 0; padding: 0 25px; border-bottom: 1px solid var(--border); background: rgba(29, 30, 46, 0.54); }
.active-conversation-identity { display: flex; align-items: center; min-width: 0; gap: 10px; flex: 1; }
.avatar-header { width: 37px; height: 37px; border-radius: 12px; font-size: 12px; }
.active-conversation-copy { display: grid; min-width: 0; gap: 3px; }
.active-conversation-copy strong { overflow: hidden; font-size: 15px; letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; }
.active-conversation-copy small { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.active-conversation-copy .status-dot { width: 6px; height: 6px; }
.mobile-back { display: none; }
.conversation-empty { display: grid; align-content: center; justify-items: center; max-width: 410px; margin: auto; padding: 28px; color: var(--muted); text-align: center; }
.conversation-empty .empty-mark, .message-empty .empty-mark { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px; border: 1px solid rgba(196, 182, 255, 0.22); border-radius: 17px; color: var(--accent-bright); background: rgba(168, 145, 255, 0.12); font-size: 25px; }
.conversation-empty h1 { margin-bottom: 8px; color: #eae7f6; font-size: 22px; letter-spacing: -0.045em; }
.conversation-empty p { max-width: 355px; margin-bottom: 21px; font-size: 13px; line-height: 1.55; }
.secondary-button { min-width: 178px; padding: 0 18px; border: 1px solid rgba(203, 190, 255, 0.22); color: #eae5ff; background: rgba(168, 145, 255, 0.12); }
.conversation-content { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) 23px auto; overflow: hidden; }
.message-list { min-height: 0; padding: 26px 28px; overflow-y: auto; overflow-anchor: none; overscroll-behavior: contain; scrollbar-color: rgba(203, 194, 244, 0.24) transparent; -webkit-overflow-scrolling: touch; }
.message-empty { display: grid; justify-items: center; max-width: 320px; margin: 12vh auto 0; color: var(--muted); text-align: center; }
.message-empty h2 { margin: 0 0 7px; color: #eae7f6; font-size: 18px; letter-spacing: -0.035em; }
.message-empty p { margin: 0; font-size: 13px; line-height: 1.5; }
.message-loading { width: fit-content; margin: 16px auto; padding: 9px 13px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: rgba(255, 255, 255, 0.04); font-size: 12px; }
.message-loading.error { border-color: rgba(255, 151, 168, 0.22); color: #ffb5c0; }
.message { display: grid; grid-template-columns: 35px minmax(0, 1fr); align-items: start; gap: 10px; margin: 0 0 19px; opacity: 1; transform: translate3d(0, 0, 0); transform-origin: 50% 100%; transition: opacity var(--motion-state) var(--ease-standard), transform var(--motion-state) var(--ease-standard); }
.message:last-child { margin-bottom: 0; }
.message.message-entering { opacity: 0; transform: translate3d(0, 6px, 0); }
.message.message-leaving { opacity: 0; pointer-events: none; transform: translate3d(0, -4px, 0); transition-timing-function: var(--ease-exit); }
.message-avatar { width: 35px; height: 35px; border-radius: 11px; font-size: 11px; }
.message-content { min-width: 0; max-width: min(650px, 91%); }
.message.mine .message-content { margin-left: auto; }
.message.mine .message-avatar { order: 2; }
.message.mine { grid-template-columns: minmax(0, 1fr) 35px; }
.message-meta { display: flex; align-items: baseline; gap: 8px; min-height: 17px; margin: 0 2px 4px; }
.message.mine .message-meta { justify-content: flex-end; }
.message-author { overflow: hidden; color: #e9e5fa; font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.message-time { flex: 0 0 auto; color: #77768b; font-size: 10px; }
.message-delete { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 6px; color: #9996aa; background: transparent; font-size: 17px; line-height: 1; opacity: 0; transition: opacity var(--motion-state) var(--ease-standard), color var(--motion-state) var(--ease-standard), background-color var(--motion-state) var(--ease-standard), transform var(--motion-press) var(--ease-standard); }
.message:hover .message-delete, .message-delete:focus-visible { opacity: 1; }
.message-delete:hover { color: #ffc0ca; background: rgba(255, 115, 139, 0.12); }
.message-bubble { width: fit-content; max-width: 100%; padding: 9px 12px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 4px 14px 14px; background: rgba(255, 255, 255, 0.055); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026); }
.message.mine .message-bubble { margin-left: auto; border-color: rgba(186, 169, 255, 0.19); border-radius: 14px 4px 14px 14px; background: linear-gradient(135deg, rgba(132, 108, 233, 0.31), rgba(107, 85, 198, 0.22)); }
.message-text { margin: 0; color: #eeecf6; font-size: 14px; line-height: 1.43; overflow-wrap: anywhere; white-space: pre-wrap; }
.message-media { display: block; width: min(340px, 100%); max-height: 360px; margin-top: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: rgba(0, 0, 0, 0.2); }
.message-media:first-child { margin-top: 0; }
.message-media img { display: block; width: 100%; max-height: 358px; object-fit: contain; }
.typing-status { padding: 0 28px; overflow: hidden; color: #9b99b0; font-size: 11px; line-height: 23px; white-space: nowrap; opacity: 1; transform: translate3d(0, 0, 0); transition: opacity var(--motion-state) var(--ease-standard), transform var(--motion-state) var(--ease-standard); }
.typing-status:empty { opacity: 0; transform: translate3d(0, 3px, 0); }
.composer-area { min-width: 0; padding: 0 22px 15px; }
.attachment-preview { display: flex; align-items: center; gap: 10px; width: min(100%, 360px); margin: 0 0 8px 45px; padding: 7px; border: 1px solid rgba(195, 180, 255, 0.2); border-radius: 12px; background: rgba(12, 13, 25, 0.55); opacity: 1; transform: translate3d(0, 0, 0); transition: opacity var(--motion-state) var(--ease-standard), transform var(--motion-state) var(--ease-standard), border-color var(--motion-state) var(--ease-standard); }
.attachment-preview img { width: 43px; height: 43px; border-radius: 8px; object-fit: cover; background: #10111c; }
.attachment-meta { display: grid; min-width: 0; flex: 1; gap: 3px; }
.attachment-meta strong { overflow: hidden; color: #e5e2f2; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.attachment-meta small { color: var(--muted); font-size: 10px; }
.remove-attachment { width: 26px; height: 26px; border-radius: 8px; color: var(--muted); background: transparent; font-size: 21px; line-height: 1; }
.remove-attachment:hover { color: var(--ink); background: rgba(255, 255, 255, 0.08); }
.composer { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 37px; align-items: end; min-width: 0; width: 100%; gap: 5px; min-height: 50px; padding: 6px; border: 1px solid rgba(237, 233, 255, 0.09); border-radius: 16px; background: var(--control); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 9px 25px rgba(0, 0, 0, 0.08); transition: border-color var(--motion-state) var(--ease-standard), box-shadow var(--motion-state) var(--ease-standard); }
.composer-action { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border-radius: 10px; color: #aaa8bc; background: transparent; font-size: 20px; transition: color var(--motion-state) var(--ease-standard), background-color var(--motion-state) var(--ease-standard), transform var(--motion-press) var(--ease-standard); }
.composer-action:hover { color: var(--accent-bright); background: rgba(180, 160, 255, 0.11); }
.composer textarea { display: block; min-width: 0; width: 100%; min-height: 36px; max-height: 130px; padding: 8px 2px; border: 0; resize: none; color: var(--ink); background: transparent; font-size: 14px; line-height: 1.35; transition: height 120ms var(--ease-standard); }
.composer textarea:focus { outline: 0; }
.composer textarea::placeholder { color: #858398; }
.send-button { flex: 0 0 auto; width: 37px; height: 37px; padding: 0; border-radius: 11px; color: #251c47; background: linear-gradient(135deg, #c5b8ff, #997eff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 4px 13px rgba(124, 92, 229, 0.26); transition: transform var(--motion-press) var(--ease-standard), filter var(--motion-state) var(--ease-standard); }

.sheet-backdrop { position: fixed; z-index: 20; inset: 0; background: rgba(2, 3, 11, 0.54); opacity: 0; visibility: hidden; pointer-events: none; backdrop-filter: blur(2px); transition: opacity var(--motion-state) var(--ease-standard), visibility 0s linear var(--motion-state); }
.sheet-backdrop[data-state="open"] { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.sheet-backdrop[data-state="closing"] { opacity: 0; visibility: visible; pointer-events: none; transition-timing-function: var(--ease-exit); }
.sheet { position: fixed; z-index: 21; top: 50%; left: 50%; width: min(440px, calc(100vw - 34px)); max-height: min(680px, calc(100vh - 54px)); overflow: hidden; border: 1px solid var(--border-bright); border-radius: 22px; color: var(--ink); background: var(--panel-solid); box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(-50%, calc(-50% + 10px), 0) scale(0.985); transform-origin: 50% 50%; transition: opacity var(--motion-state) var(--ease-standard), transform var(--motion-state) var(--ease-standard), visibility 0s linear var(--motion-state); }
.sheet[data-state="open"] { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(-50%, -50%, 0) scale(1); transition-delay: 0s; }
.sheet[data-state="closing"] { opacity: 0; visibility: visible; pointer-events: none; transform: translate3d(-50%, calc(-50% + 7px), 0) scale(0.99); transition-timing-function: var(--ease-exit); }
.sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 15px 17px 14px 21px; border-bottom: 1px solid var(--border); }
.sheet-header h2 { margin: 0 0 3px; font-size: 18px; letter-spacing: -0.035em; }
.sheet-header p { margin: 0; color: var(--muted); font-size: 11px; }
.sheet-header .icon-button { font-size: 24px; }
.sheet-body { max-height: calc(min(680px, 100vh - 54px) - 72px); padding: 16px; overflow-y: auto; }
.people-search { min-height: 44px; padding: 0 12px; border-color: var(--border); background: rgba(9, 10, 21, 0.4); }
.people-search input { font-size: 13px; }
.sheet-hint, .sheet-empty { margin: 17px 5px; color: var(--muted); font-size: 12px; line-height: 1.45; text-align: center; }
.sheet-empty.compact { margin: 10px 0; font-size: 11px; text-align: left; }
.people-results, .invite-list { display: grid; gap: 7px; margin-top: 13px; opacity: 1; transform: translate3d(0, 0, 0); transition: opacity var(--motion-state) var(--ease-standard), transform var(--motion-state) var(--ease-standard); }
.people-results:empty, .invite-list:empty { opacity: 0; transform: translate3d(0, 4px, 0); }
.person-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.055); border-radius: 13px; background: rgba(255, 255, 255, 0.035); opacity: 1; transform: translate3d(0, 0, 0); transition: opacity var(--motion-state) var(--ease-standard), transform var(--motion-state) var(--ease-standard), background-color var(--motion-state) var(--ease-standard); }
.person-row.is-entering { opacity: 0; transform: translate3d(0, 5px, 0); }
.person-row.is-leaving { opacity: 0; pointer-events: none; transform: translate3d(0, -3px, 0); transition-timing-function: var(--ease-exit); }
.person-avatar { width: 38px; height: 38px; border-radius: 12px; font-size: 12px; }
.person-copy { display: grid; min-width: 0; gap: 2px; }
.person-copy strong { overflow: hidden; color: #efedf8; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.person-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.person-copy p { display: -webkit-box; margin: 3px 0 0; overflow: hidden; color: #aaa8ba; font-size: 11px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.person-actions, .invite-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.small-button { min-height: 31px; padding: 0 10px; border: 1px solid rgba(205, 190, 255, 0.22); border-radius: 9px; color: #f4f1ff; background: rgba(168, 145, 255, 0.15); font-size: 11px; font-weight: 700; }
.small-button:hover { background: rgba(168, 145, 255, 0.25); }
.action-note { color: #aaa8ba; font-size: 10px; white-space: nowrap; }
.invite-section + .invite-section { margin-top: 24px; }
.section-title { display: flex; align-items: center; gap: 7px; margin: 0 2px 9px; color: #cbc7dd; font-size: 12px; font-weight: 750; }
.section-title span { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; color: var(--muted-strong); background: rgba(255, 255, 255, 0.08); font-size: 10px; }
.invite-row { grid-template-columns: 38px minmax(0, 1fr); }
.invite-row .invite-actions { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
.profile-body { padding: 20px; }
.profile-preview { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding: 13px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 15px; background: rgba(255, 255, 255, 0.04); }
.profile-preview > div { display: grid; min-width: 0; gap: 3px; }
.profile-preview strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.profile-avatar { width: 47px; height: 47px; border-radius: 15px; font-size: 14px; }
.profile-avatar-picker { display: grid; place-items: center; padding: 0; border: 0; border-radius: 15px; background: transparent; transition: transform var(--motion-press) var(--ease-standard), filter var(--motion-state) var(--ease-standard); }
.profile-avatar-picker:disabled { cursor: wait; filter: grayscale(0.3); }
.readonly-field { color: #9a98aa; background: rgba(255, 255, 255, 0.045); }
.logout-button { display: block; width: 100%; margin-top: 14px; min-height: 41px; border: 1px solid rgba(255, 151, 168, 0.16); border-radius: 11px; color: #ffbac5; background: rgba(157, 44, 72, 0.1); font-size: 12px; font-weight: 700; }
.logout-button:hover { background: rgba(157, 44, 72, 0.18); }
.toast { position: fixed; z-index: 40; bottom: 24px; left: 50%; max-width: min(440px, calc(100vw - 32px)); padding: 11px 15px; border: 1px solid rgba(239, 231, 255, 0.18); border-radius: 12px; color: #f6f3ff; background: rgba(39, 38, 59, 0.95); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36); font-size: 13px; line-height: 1.35; opacity: 0; pointer-events: none; transform: translate3d(-50%, 8px, 0) scale(0.985); transform-origin: 50% 100%; backdrop-filter: blur(14px); transition: opacity var(--motion-state) var(--ease-standard), transform var(--motion-state) var(--ease-standard); }
.toast.is-visible { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }

.form-error,
.attachment-preview,
.people-results,
.invite-list,
.typing-status,
.sheet-hint,
.message-loading {
  transition-property: opacity, transform, border-color, background-color;
  transition-duration: var(--motion-state);
  transition-timing-function: var(--ease-standard);
}

.form-error.is-entering,
.attachment-preview.is-entering,
.people-results.is-entering,
.invite-list.is-entering,
.sheet-hint.is-entering,
.message-loading.is-entering {
  opacity: 0;
  transform: translate3d(0, 4px, 0);
}

.form-error.is-leaving,
.attachment-preview.is-leaving,
.people-results.is-leaving,
.invite-list.is-leaving,
.sheet-hint.is-leaving,
.message-loading.is-leaving {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -3px, 0);
  transition-timing-function: var(--ease-exit);
}

@media (max-width: 760px), (max-width: 960px) and (pointer: coarse) {
  :root {
    --mobile-safe-left: env(safe-area-inset-left, 0px);
    --mobile-safe-right: env(safe-area-inset-right, 0px);
    --mobile-safe-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    --mobile-composer-bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) - 16px));
  }
  :root[data-keyboard-open="true"] { --mobile-safe-bottom: 8px; --mobile-composer-bottom: 8px; }
  html { height: 100%; overflow: hidden; overscroll-behavior: none; }
  body { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
  html, body { background: var(--canvas); }
  .page-shell { position: fixed; top: var(--app-viewport-top); right: 0; bottom: auto; left: 0; display: block; width: 100%; height: var(--app-viewport-height); min-height: 0; padding: 0; overflow: hidden; background: var(--canvas); }
  .auth-view { min-height: var(--app-viewport-height); display: grid; align-content: start; padding: max(22px, calc(env(safe-area-inset-top, 0px) + 16px)) 22px 18px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .auth-card { padding: 23px; border-radius: 22px; background: #202132; }
  .auth-card, .messenger, .sheet-backdrop, .toast { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .messenger { position: relative; display: block; width: 100%; height: var(--app-viewport-height); min-height: 0; overflow: hidden; border: 0; border-radius: 0; background: #181925; }
  .sidebar, .conversation-panel { position: absolute; inset: 0; width: 100%; height: auto; min-height: 0; border: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform var(--motion-screen) var(--ease-standard), opacity var(--motion-state) var(--ease-standard), visibility 0s linear var(--motion-screen); will-change: transform, opacity; }
  .sidebar { z-index: 2; background: radial-gradient(circle at 84% -12%, rgba(127, 102, 225, 0.22), transparent 35%), #181925; }
  .conversation-panel { z-index: 3; display: grid; grid-template-rows: calc(61px + env(safe-area-inset-top)) minmax(0, 1fr); background: #181925; opacity: 0.94; visibility: hidden; pointer-events: none; transform: translate3d(100%, 0, 0); }
  .messenger[data-mobile-view="chats"] .sidebar { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0); transition-delay: 0s; }
  .messenger[data-mobile-view="chats"] .conversation-panel { opacity: 0.94; visibility: hidden; pointer-events: none; transform: translate3d(100%, 0, 0); }
  .messenger[data-mobile-view="conversation"] .sidebar { opacity: 0.58; visibility: hidden; pointer-events: none; transform: translate3d(-18%, 0, 0); }
  .messenger[data-mobile-view="conversation"] .conversation-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0); transition-delay: 0s; }
  .sidebar-top { min-height: calc(60px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(17px, var(--mobile-safe-right)) 0 max(17px, var(--mobile-safe-left)); }
  .sidebar-search-row { padding: 10px max(12px, var(--mobile-safe-right)) 2px max(12px, var(--mobile-safe-left)); }
  .search-trigger { min-height: 45px; border-radius: 15px; background: var(--control); font-size: 14px; }
  .side-heading { margin: 17px 17px 8px; }
  .conversation-list { padding: 0 max(9px, var(--mobile-safe-right)) 10px max(9px, var(--mobile-safe-left)); }
  .conversation-card { min-height: 66px; margin: 4px 0; padding: 10px; border-radius: 17px; }
  .conversation-avatar { width: 42px; height: 42px; border-radius: 14px; font-size: 13px; }
  .conversation-list-loading { padding-right: 0; padding-left: 0; }
  .conversation-skeleton { grid-template-columns: 42px minmax(0, 1fr); min-height: 66px; padding: 10px; }
  .conversation-skeleton-avatar { width: 42px; height: 42px; border-radius: 14px; }
  .current-user { display: none; }
  .conversation-header { z-index: 10; padding: env(safe-area-inset-top) max(12px, var(--mobile-safe-right)) 0 max(12px, var(--mobile-safe-left)); pointer-events: auto; }
  .mobile-back { position: relative; z-index: 11; display: inline-grid; flex: 0 0 auto; width: 44px; height: 44px; margin-right: 2px; padding: 0; border-radius: 12px; color: var(--muted-strong); background: transparent; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .mobile-back:hover { background: rgba(255, 255, 255, 0.07); }
  .mobile-back svg { width: 21px; }
  .active-conversation-identity { gap: 9px; }
  .avatar-header { width: 34px; height: 34px; border-radius: 11px; }
  .conversation-empty { padding: 24px; }
  .conversation-content { min-width: 0; min-height: 0; grid-template-rows: minmax(0, 1fr) 22px auto; overflow: hidden; }
  .message-list { min-height: 0; padding: 16px max(13px, var(--mobile-safe-right)) 16px max(13px, var(--mobile-safe-left)); }
  .message-empty { margin-top: 12vh; }
  .typing-status { padding: 0 max(15px, var(--mobile-safe-right)) 0 max(15px, var(--mobile-safe-left)); }
  .composer-area { min-width: 0; padding: 0 max(8px, var(--mobile-safe-right)) var(--mobile-composer-bottom) max(8px, var(--mobile-safe-left)); background: linear-gradient(180deg, transparent, rgba(24, 25, 37, 0.94) 28%); }
  .attachment-preview { width: calc(100% - 40px); margin-left: 40px; }
  .composer { grid-template-columns: 34px minmax(0, 1fr) 35px; min-width: 0; gap: 3px; min-height: 48px; padding: 5px; border-radius: 15px; }
  .composer-action { width: 34px; height: 34px; }
  .composer textarea { min-width: 0; min-height: 38px; padding: 8px 1px; font-size: 16px; line-height: 1.3; }
  .send-button { width: 35px; height: 35px; border-radius: 11px; }
  .message-content { max-width: 94%; }
  .sheet-backdrop { top: var(--app-viewport-top); right: 0; bottom: auto; left: 0; height: var(--app-viewport-height); }
  .sheet { top: var(--app-viewport-top); right: 0; bottom: auto; left: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100%; height: var(--app-viewport-height); max-height: none; border: 0; border-radius: 0; background: #181925; opacity: 0.96; transform: translate3d(100%, 0, 0); transform-origin: 100% 50%; transition: transform var(--motion-screen) var(--ease-standard), opacity var(--motion-state) var(--ease-standard), visibility 0s linear var(--motion-screen); }
  .sheet[data-state="open"] { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0); transition-delay: 0s; }
  .sheet[data-state="closing"] { opacity: 0.96; visibility: visible; pointer-events: none; transform: translate3d(100%, 0, 0); transition-timing-function: var(--ease-exit); }
  .sheet-header { min-height: calc(64px + env(safe-area-inset-top)); padding: calc(12px + env(safe-area-inset-top)) max(16px, var(--mobile-safe-right)) 12px max(16px, var(--mobile-safe-left)); background: rgba(24, 25, 37, 0.96); }
  .sheet-body { min-height: 0; max-height: none; padding: 14px max(16px, var(--mobile-safe-right)) max(16px, var(--mobile-safe-bottom)) max(16px, var(--mobile-safe-left)); }
  #searchSheet .people-search { position: sticky; top: 0; z-index: 1; min-height: 48px; border-radius: 15px; background: #222336; box-shadow: 0 8px 20px rgba(5, 5, 13, 0.18); }
  #searchSheet .people-search input { font-size: 16px; }
  #searchSheet .sheet-hint { margin-top: 14px; }
  .toast {
    top: calc(var(--app-viewport-top) + var(--app-viewport-height) - max(20px, var(--mobile-safe-bottom)));
    bottom: auto;
    transform: translate3d(-50%, calc(-100% + 8px), 0) scale(0.985);
  }
  .toast.is-visible { transform: translate3d(-50%, -100%, 0) scale(1); }
}

@media (max-width: 390px) {
  .auth-view { padding: 15px; }
  .auth-card { padding: 22px 20px; }
  .message { grid-template-columns: 31px minmax(0, 1fr); gap: 8px; }
  .message.mine { grid-template-columns: minmax(0, 1fr) 31px; }
  .message-avatar { width: 31px; height: 31px; border-radius: 10px; }
  .composer { grid-template-columns: 32px minmax(0, 1fr) 34px; gap: 2px; padding: 4px; }
  .composer-action { width: 32px; height: 32px; }
  .send-button { width: 34px; height: 34px; }
  .person-row { grid-template-columns: 35px minmax(0, 1fr) auto; gap: 8px; padding: 9px; }
  .person-avatar { width: 35px; height: 35px; }
}

@media (hover: hover) and (pointer: fine) {
  .primary-button:hover, .secondary-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
  .search-trigger:hover { border-color: rgba(194, 178, 255, 0.28); color: #eeebff; background: rgba(169, 148, 255, 0.1); transform: translateY(-1px); }
  .conversation-card:hover { background: rgba(255, 255, 255, 0.052); transform: translateY(-1px); }
  .send-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
  .profile-avatar-picker:hover { filter: brightness(1.1); transform: scale(1.035); }
}

:is(
  .primary-button,
  .secondary-button,
  .password-toggle,
  .icon-button,
  .search-trigger,
  .invite-inbox,
  .conversation-card,
  .current-user,
  .message-delete,
  .composer-action,
  .send-button,
  .small-button,
  .profile-avatar-picker,
  .logout-button
):not(:disabled):active {
  transform: scale(0.96);
  transition-duration: var(--motion-press);
}

@media (hover: none) {
  .message-delete { opacity: 0.72; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}