@layer reset, base, layout, components, states;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ul { margin: 0; }
  button, input, textarea, select { font: inherit; }
  button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
  button { cursor: pointer; }
  button:disabled { cursor: default; }
  button, input, textarea, select { color: inherit; }
  button { border: 0; }
  img { max-width: 100%; }
  [hidden] { display: none !important; }
}

@layer base {
  :root {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #f4f4f6;
    background: #09090b;
    font-synthesis: none;
    --bg: #09090b;
    --panel: #111114;
    --raised: #1c1c21;
    --line: #26262e;
    --muted: #92929f;
    --accent: #ed1535;
    --accent-hover: #ff3653;
    --bubble: #24242c;
    --mine: #641528;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    color-scheme: dark;
  }
  html, body, #app { width: 100%; height: 100%; min-height: 100%; }
  body { overflow: hidden; overscroll-behavior: none; }
  a { color: #ff6a82; text-underline-offset: 3px; }
  button, input, textarea, select { touch-action: manipulation; }
  button:focus-visible, a:focus-visible { outline: 2px solid #ff687f; outline-offset: 4px; }
  input:focus-visible, textarea:focus-visible { outline: none; }
  input:focus { border-color: #e64861 !important; box-shadow: 0 0 0 3px #ed15351a; }
  button:disabled { opacity: .45; }
  .wordmark { color: var(--accent); font-size: 28px; font-weight: 950; font-style: italic; letter-spacing: -1.7px; transform: skewX(-8deg); display: inline-block; }
  .icon { width: 22px; height: 22px; stroke-width: 1.8; flex: 0 0 auto; }
  .muted { color: var(--muted); }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
}

@layer layout {
  .boot-screen { height: 100dvh; min-height: 100%; display: grid; place-content: center; justify-items: center; gap: 18px; }
  .boot-label { color: var(--muted); font-size: 13px; }
  .auth-screen { height: 100dvh; min-height: 100%; overflow-y: auto; padding: max(32px, var(--safe-top)) 22px max(24px, var(--safe-bottom)); display: flex; align-items: center; justify-content: center; }
  .auth-card { width: min(100%, 400px); padding: 12px 0 26px; }
  .auth-brand { margin-bottom: 44px; text-align: center; }
  .auth-brand .wordmark { font-size: 44px; }
  .auth-subtitle { font-size: 12px; color: var(--muted); margin-top: 10px; letter-spacing: 2.2px; text-transform: uppercase; }
  .auth-card h1 { font-size: 27px; font-weight: 650; letter-spacing: -.6px; margin-bottom: 9px; }
  .auth-description { font-size: 14px; line-height: 1.55; color: var(--muted); margin-bottom: 26px; }
  .auth-form { display: grid; gap: 18px; }
  .field { display: grid; gap: 8px; font-size: 13px; color: #c7c7d0; }
  .field input { width: 100%; background: var(--panel); border: 1px solid #30303a; border-radius: 12px; padding: 14px 15px; min-height: 50px; font-size: 16px; transition: border-color .15s, box-shadow .15s; }
  .field small { color: var(--muted); font-size: 12px; line-height: 1.5; }
  .auth-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; margin-top: 24px; }
  .auth-links .link-button { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 2px; }
  .auth-note { color: #71717d; font-size: 12px; text-align: center; line-height: 1.6; margin-top: 34px; }
  .messenger { height: 100dvh; min-height: 100%; display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); max-width: 1600px; margin: 0 auto; background: var(--bg); }
  .sidebar { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--panel); border-right: 1px solid var(--line); }
  .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: calc(18px + var(--safe-top)) 20px 14px; }
  .sidebar-heading { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.7px; margin-top: 5px; }
  .sidebar-search { margin: 7px 14px 14px; position: relative; }
  .sidebar-search > .icon { position: absolute; left: 13px; top: 12px; width: 19px; height: 19px; color: #82828f; pointer-events: none; }
  .sidebar-search input { min-height: 44px; width: 100%; background: #1d1d23; border: 1px solid transparent; border-radius: 12px; padding: 10px 38px 10px 40px; font-size: 15px; }
  .clear-search { position: absolute; right: 0; top: 0; width: 44px; height: 44px; color: var(--muted); background: none; display: grid; place-items: center; }
  .clear-search .icon { width: 17px; height: 17px; }
  .list-caption { color: var(--muted); font-size: 11px; padding: 2px 20px 12px; text-transform: uppercase; letter-spacing: 1.3px; }
  .chat-list { overflow-y: auto; flex: 1; min-height: 0; padding: 0 8px 12px; scrollbar-width: thin; }
  .sidebar-footer { padding: 12px 20px calc(13px + var(--safe-bottom)); border-top: 1px solid var(--line); display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; }
  .sidebar-footer .username { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
  .connection-dot { width: 6px; height: 6px; border-radius: 50%; background: #7c7c87; flex: 0 0 auto; }
  .connection-dot[data-state="ready"] { background: #6bcf95; box-shadow: 0 0 10px #6bcf9529; }
  .connection-dot[data-state="connecting"] { background: #dca653; animation: breathe 1.5s ease-in-out infinite; }
  .conversation { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; background: radial-gradient(ellipse at 72% 46%, #1a0d1333, transparent 60%), var(--bg); }
  .conversation-empty { flex: 1; display: grid; place-content: center; padding: 30px; text-align: center; justify-items: center; }
  .empty-emblem { width: 72px; height: 72px; border: 1px solid #3c2028; border-radius: 24px; display: grid; place-items: center; color: #ef3653; background: #33111a66; margin-bottom: 22px; }
  .empty-emblem .icon { width: 32px; height: 32px; }
  .conversation-empty h2 { font-size: 22px; font-weight: 600; letter-spacing: -.5px; }
  .conversation-empty p { color: var(--muted); max-width: 285px; font-size: 14px; line-height: 1.65; margin-top: 10px; }
  .chat-header { display: flex; align-items: center; gap: 12px; min-height: calc(78px + var(--safe-top)); padding: calc(12px + var(--safe-top)) 24px 12px; background: #111114e8; border-bottom: 1px solid var(--line); }
  .chat-header .back-button { display: none; margin-left: -12px; }
  .chat-header-info { min-width: 0; flex: 1; }
  .chat-header h1 { font-size: 16px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .chat-status { margin-top: 4px; font-size: 11px; color: #aaa2a8; display: flex; align-items: center; gap: 4px; }
  .chat-status .icon { width: 12px; height: 12px; }
  .messages { flex: 1; min-height: 0; overflow-y: auto; padding: 28px max(25px, calc((100% - 780px) / 2)); display: flex; flex-direction: column; gap: 9px; scroll-behavior: auto; scrollbar-width: thin; }
  .messages-empty { margin: auto; padding: 20px; color: #71717d; text-align: center; line-height: 1.6; font-size: 13px; max-width: 300px; }
  .day-divider { align-self: center; color: #99919a; background: #1f1b20; border-radius: 12px; font-size: 11px; padding: 4px 11px; margin: 12px 0; }
  .composer-wrap { padding: 12px max(24px, calc((100% - 780px) / 2)) calc(17px + var(--safe-bottom)); }
  .composer { display: flex; align-items: flex-end; gap: 7px; background: #1b1b21; border: 1px solid #2c2b33; border-radius: 18px; padding: 6px; }
  .composer textarea { resize: none; overflow-y: auto; background: transparent; border: none; font-size: 15px; line-height: 23px; padding: 10px 2px; max-height: 144px; min-height: 43px; width: 100%; min-width: 0; }
  .composer textarea::placeholder { color: #858590; }
  .composer-hint { min-height: 17px; color: #77717b; font-size: 10px; padding: 6px 11px 0; display: flex; align-items: center; gap: 5px; }
  .composer-hint .icon { width: 10px; height: 10px; }
}

@layer components {
  .icon-button { background: transparent; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #aaa9b5; flex: 0 0 auto; transition: background .15s, color .15s; }
  .icon-button:hover { background: #ffffff0a; color: #fff; }
  .icon-button.primary { background: var(--accent); color: #fff; }
  .icon-button.primary:hover { background: var(--accent-hover); }
  .primary-button { min-height: 49px; padding: 13px 20px; background: var(--accent); color: white; border-radius: 12px; font-size: 14px; font-weight: 600; transition: background .15s; }
  .primary-button:hover { background: var(--accent-hover); }
  .secondary-button { min-height: 46px; border: 1px solid #39323a; padding: 12px 17px; background: #211b22; color: #e4cdd3; border-radius: 11px; font-size: 14px; }
  .link-button { color: #d6b9c0; background: transparent; padding: 0; font-size: 13px; line-height: 1.6; }
  .link-button:hover { color: #ff7c91; }
  .form-error { color: #ff8396; background: #70182c33; border: 1px solid #741c2c77; border-radius: 10px; padding: 11px 13px; font-size: 13px; line-height: 1.5; }
  .chat-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 11px; border-radius: 12px; background: none; text-align: left; min-width: 0; transition: background .15s; }
  .chat-row:hover { background: #1b1b21; }
  .chat-row[aria-current="true"] { background: #41131e; }
  .avatar { width: 47px; height: 47px; flex: 0 0 auto; border-radius: 18px; background: var(--avatar-color, #552435); display: grid; place-items: center; font-weight: 650; color: #f4dce4; font-size: 18px; user-select: none; }
  .chat-header .avatar { width: 42px; height: 42px; font-size: 16px; border-radius: 15px; }
  .chat-row-info { flex: 1; min-width: 0; }
  .chat-row-top { display: flex; gap: 9px; align-items: center; margin-bottom: 6px; }
  .chat-row-title { font-size: 14px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-row-time { font-size: 10px; color: #8d8590; white-space: nowrap; }
  .chat-row-bottom { display: flex; gap: 8px; align-items: center; }
  .chat-row-preview { color: #a09aa5; font-size: 12px; line-height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
  .unread-badge { border-radius: 12px; padding: 2px 6px; font-size: 10px; font-weight: 600; background: var(--accent); color: white; min-width: 18px; text-align: center; }
  .list-empty { padding: 36px 21px; text-align: center; color: #85818d; font-size: 13px; line-height: 1.7; }
  .message { align-self: flex-start; max-width: min(84%, 560px); position: relative; background: var(--bubble); border: 1px solid #ffffff03; border-radius: 15px 15px 15px 4px; padding: 10px 12px 7px; min-width: 85px; overflow-wrap: anywhere; }
  .message.mine { align-self: flex-end; background: var(--mine); border-color: #9c31412b; border-radius: 15px 15px 4px 15px; }
  .message-text { white-space: pre-wrap; font-size: 14px; line-height: 1.55; }
  .message-meta { display: flex; justify-content: flex-end; align-items: center; gap: 5px; font-size: 9px; color: #b6abb2; line-height: 13px; margin-top: 4px; user-select: none; }
  .message-meta .icon { width: 13px; height: 13px; }
  .message-meta[data-status="error"] { color: #ff99aa; }
  .message-meta[data-status="read"] .icon { color: #8dc8ff; }
  .message-media { padding: 4px; min-width: 180px; }
  .image-button { display: block; border-radius: 12px; overflow: hidden; padding: 0; background: #151519; max-width: 360px; }
  .image-button img { display: block; width: 100%; max-height: 430px; object-fit: contain; }
  .message-media .message-meta { padding: 0 7px 3px; }
  .message-media .message-text { padding: 8px 8px 2px; }
  .message audio { display: block; width: min(280px, 64vw); height: 42px; margin: 5px 0; }
  .file-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #f7e9ef; padding: 5px 2px; font-size: 13px; line-height: 1.4; }
  .file-link .icon { width: 28px; height: 28px; color: #e98199; }
  .file-name { max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
  .attachment-error-text { color: #efb3c0; font-size: 13px; line-height: 1.55; }
  .attachment-fallback { max-width: 290px; }
  .attachment-fallback .file-link { margin-top: 8px; min-height: 44px; }
  .attachment-retry { display: block; width: 100%; min-height: 44px; border: 1px solid #b7677d66; border-radius: 9px; padding: 9px 12px; margin-top: 10px; font-size: 12px; background: #ffffff08; color: #ffc4d2; }
  .attachment-retry:hover { background: #ffffff10; }
  .recording-indicator { display: flex; gap: 8px; align-items: center; font-size: 12px; color: #ff889b; padding: 9px 10px; flex: 1; min-height: 43px; }
  .recording-indicator::before { content: ""; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; animation: breathe 1s ease-in-out infinite; }
  .record-stop { background: #7a172b; color: #ffd7de; }
  .modal-backdrop { position: fixed; inset: 0; z-index: 30; padding: max(24px, var(--safe-top)) 20px max(24px, var(--safe-bottom)); background: #000a; backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; overflow-y: auto; }
  .modal { width: min(100%, 420px); background: #151519; border: 1px solid #34303a; border-radius: 22px; padding: 26px; box-shadow: 0 30px 90px #0008; max-height: 100%; overflow-y: auto; }
  .modal-title { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
  .modal-title h2 { font-size: 21px; font-weight: 600; letter-spacing: -.5px; flex: 1; }
  .modal-title .icon-button { margin: -8px; }
  .modal p { font-size: 14px; color: #aaa3af; line-height: 1.65; }
  .modal strong { color: #e4d9df; font-weight: 600; }
  .recovery-code { display: block; padding: 20px 16px; border-radius: 12px; border: 1px solid #5f2938; background: #210e15; color: #ff9fb1; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 17px; line-height: 1.8; overflow-wrap: anywhere; user-select: all; margin: 22px 0 14px; letter-spacing: 1px; }
  .recovery-actions { display: flex; gap: 10px; margin-bottom: 22px; }
  .recovery-actions > button { flex: 1; }
  .check-field { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.6; color: #c4bac4; margin: 20px 0; cursor: pointer; }
  .check-field input { accent-color: var(--accent); width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; }
  .modal .primary-button { width: 100%; }
  .settings-account { display: flex; align-items: center; gap: 13px; padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
  .settings-account .muted { font-size: 11px; margin-top: 4px; }
  .setting-block { margin: 20px 0; }
  .setting-block h3 { font-size: 13px; margin-bottom: 7px; font-weight: 600; }
  .setting-block p { font-size: 12px; margin-bottom: 12px; }
  .setting-block .secondary-button { width: 100%; }
  .settings-logout { width: 100%; color: #ff8198; background: #6e1b2e2b; border: 1px solid #7321355c; margin-top: 10px; }
  .invite-modal { width: min(100%, 560px); }
  .invite-intro { margin-bottom: 22px; }
  .invite-form { display: grid; gap: 15px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
  .invite-form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .invite-form-fields .field { min-width: 0; }
  .invite-form select { min-width: 0; width: 100%; min-height: 51px; background: var(--panel); border: 1px solid #30303a; border-radius: 12px; padding: 12px; font-size: 16px; }
  .invite-form select:focus-visible { outline: 2px solid #e64861; outline-offset: 2px; }
  .invite-list-heading { font-size: 14px; font-weight: 600; margin: 24px 0 14px; }
  .invite-list { display: grid; gap: 10px; }
  .invite-row { background: #1b191f; border: 1px solid #322b34; border-radius: 13px; padding: 14px; }
  .invite-row-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
  .invite-row-info { min-width: 0; }
  .invite-row-info strong { display: block; font-size: 13px; line-height: 1.4; }
  .invite-row-info p { font-size: 11px; margin-top: 5px; line-height: 1.5; }
  .invite-status { font-size: 10px; line-height: 15px; border-radius: 7px; padding: 3px 7px; background: #34303a; color: #b9afb9; white-space: nowrap; }
  .invite-status[data-state="active"] { background: #1d4030; color: #b0d9bf; }
  .invite-status[data-state="revoked"] { background: #4e2130; color: #f2b4c2; }
  .invite-row-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; min-height: 44px; color: #9c919e; font-size: 11px; }
  .invite-revoke { min-height: 44px; padding: 8px 9px; margin-right: -7px; border-radius: 8px; font-size: 12px; color: #f690a6; background: transparent; }
  .invite-revoke:hover { background: #74223833; }
  .invite-back { margin-top: 22px; width: 100%; }
  .invite-empty { padding: 16px 5px; font-size: 12px !important; text-align: center; }
  .created-invite { background: #28131d; border: 1px solid #653045; border-radius: 14px; padding: 17px; margin-top: 22px; }
  .created-invite h3 { font-size: 15px; margin-bottom: 9px; }
  .created-invite > p { font-size: 12px; }
  .created-invite .invite-value-label { font-size: 10px; text-transform: uppercase; letter-spacing: .7px; margin: 18px 0 7px; color: #cbaab7; }
  .invite-code, .invite-url { display: block; user-select: all; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; line-height: 1.6; color: #ffd4df; margin-bottom: 11px; }
  .invite-code { font-size: 14px; }
  .invite-url { font-size: 11px; }
  .created-invite .secondary-button { width: 100%; min-height: 44px; }
  .created-invite .invite-created-expiry { margin-top: 16px; font-size: 10px; color: #c09eac; }
  .lightbox { z-index: 40; flex-direction: column; gap: 15px; }
  .lightbox img { object-fit: contain; max-height: calc(100dvh - 170px); width: auto; max-width: 100%; border-radius: 6px; }
  .lightbox .icon-button { align-self: flex-end; background: #26232b; color: white; }
  .lightbox-caption { font-size: 12px; color: #b8acb7; }
  .toast-region { position: fixed; left: 50%; bottom: calc(28px + var(--safe-bottom)); z-index: 80; transform: translateX(-50%); width: min(calc(100% - 32px), 430px); display: grid; gap: 8px; pointer-events: none; }
  .toast { background: #302931f5; border: 1px solid #5a434e; color: #f6e4eb; border-radius: 12px; padding: 13px 17px; font-size: 13px; line-height: 1.55; box-shadow: 0 8px 30px #0007; animation: appear .18s ease-out; }
  .toast.error { background: #511b2af5; border-color: #9d3650; }
  .noscript { position: fixed; inset: 0; display: grid; place-content: center; background: #09090b; color: #ddd; padding: 30px; text-align: center; }
}

@layer states {
  @keyframes breathe { 50% { opacity: .35; } }
  @keyframes appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @media (min-width: 1601px) { .messenger { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }
  @media (max-width: 760px) {
    .messenger { grid-template-columns: 1fr; }
    .sidebar { border: 0; }
    .conversation { display: none; }
    .messenger[data-chat-open="true"] .sidebar { display: none; }
    .messenger[data-chat-open="true"] .conversation { display: flex; }
    .sidebar-header { padding: calc(18px + var(--safe-top)) 22px 15px; }
    .sidebar-header .wordmark { font-size: 31px; }
    .sidebar-search { margin: 7px 16px 15px; }
    .chat-list { padding-left: 9px; padding-right: 9px; }
    .chat-row { padding: 14px 12px; }
    .chat-row .avatar { width: 51px; height: 51px; border-radius: 19px; }
    .chat-row-title { font-size: 15px; }
    .chat-row-preview { font-size: 13px; }
    .chat-header { min-height: calc(70px + var(--safe-top)); padding: calc(9px + var(--safe-top)) 15px 9px 10px; gap: 9px; }
    .chat-header .back-button { display: flex; margin: 0 -4px 0 -3px; width: 44px; }
    .chat-header .avatar { width: 39px; height: 39px; border-radius: 14px; }
    .messages { padding: 17px 12px; gap: 8px; }
    .message { max-width: 87%; }
    .message-text { font-size: 15px; }
    .composer-wrap { padding: 8px 9px calc(8px + var(--safe-bottom)); }
    .composer { border-radius: 17px; padding: 4px; gap: 4px; }
    .composer textarea { font-size: 16px; padding-top: 10px; }
    .composer-hint { padding-top: 5px; min-height: 16px; font-size: 9px; }
    .modal { padding: 22px; }
    .invite-form-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
    .invite-form-fields .field { font-size: 11px; }
    .invite-form-fields .field > span { min-height: 28px; display: flex; align-items: flex-end; }
    .invite-form-fields input { padding-left: 12px; padding-right: 12px; }
    .auth-brand { margin-bottom: 36px; }
    .auth-screen { align-items: flex-start; padding-top: max(60px, calc(var(--safe-top) + 28px)); }
  }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; } }
}