@charset "UTF-8";*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{margin:0;background:#9c93e5;overflow-x:hidden;position:relative;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}#app{width:100%;height:100%}.page-bg{position:fixed;left:0;right:0;bottom:0;height:33.333vh;background:url(/images/lower-background.png) no-repeat center top;background-size:cover;z-index:-10;pointer-events:none}.input-page{position:relative;z-index:1;min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:10vh 16px 16px}.back-btn{position:absolute;top:20px;left:20px;color:#fff;font-size:40px;text-decoration:none;line-height:1;z-index:5;opacity:.9}.back-btn:hover{opacity:1}.input-card{position:relative;z-index:2;width:min(500px,92vw);min-width:300px;min-height:420px;max-height:calc(88vh - 32px);overflow:auto;background-color:#fffefe12;border-radius:15px;padding:24px;box-shadow:0 14px 40px #0000002e;display:flex;flex-direction:column;gap:12px}.avatar-placeholder{width:140px;height:140px;border-radius:50%;background:#fff;box-shadow:0 12px 30px #00000005;margin:0 auto 8px}.input-title{margin:0;font-size:22px;line-height:1.2}.input-subtitle{margin:0 0 6px;opacity:.7}.input-form{display:flex;flex-direction:column;gap:12px}.field{display:flex;flex-direction:column;gap:6px}.field__label{display:block;font-size:10px;color:#000;opacity:.5}.field__input{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(0,0,0,.55);padding:8px 4px;font-size:16px;outline:none}.field__input:focus{border-bottom-color:#000000d9}.field__error{min-height:12px;font-size:11px;color:#d32525}.field--invalid .field__input{border-bottom-color:red;background-color:#ff000014}.btn{display:flex;align-items:center;justify-content:center;width:100%;padding:12px 14px;border-radius:10px;text-align:center;text-decoration:none;cursor:pointer;border:0;font:inherit;line-height:1;appearance:none}.submit-btn{background-color:#7f4ea8;color:#fff;transition:background .3s;margin-top:10px}.submit-btn:hover{background-color:#5b4db2}.alt-btn{background:transparent;color:#3a2a4c;border:1px solid rgba(0,0,0,.15)}html,body{height:100%}body{margin:0;background:#9c93e5;overflow-x:hidden;position:relative;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;min-height:100vh;display:grid;place-items:center}#app{display:grid;place-items:center;height:100%}:root{--purple: #c9a6df;--purple-dark: #6b3b97;--gray: #8c8c8c;--white: #fff;--shadow: 0 10px 24px rgb(0 0 0 / 25%);--gap: 0px}.error{width:150vh;aspect-ratio:2/1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:var(--gap);box-shadow:var(--shadow)}.tile--img{background:#eee}.tile__img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%)}.tile--code{background:var(--purple);display:grid;place-items:center;position:relative}.code{font-weight:900;font-size:clamp(72px,12vw,160px);line-height:1;color:var(--purple-dark);text-shadow:0 2px 0 rgba(255,255,255,.25),0 10px 18px rgba(0,0,0,.25);letter-spacing:.02em}.tile--text{background:var(--purple);display:grid;place-items:center;position:relative;padding:28px}.spaced{display:grid;gap:14px;text-align:center}.spaced__line{color:var(--white);font-size:clamp(18px,2.2vw,30px);letter-spacing:.7em;text-transform:uppercase;white-space:nowrap;transform:translate(.35em)}.tile--back{background:var(--gray);display:grid;place-items:center;padding:24px}.back{color:#ffffffeb;text-decoration:none;font-size:12px;letter-spacing:.08em;text-transform:lowercase;opacity:.9}.back:hover{opacity:1;text-decoration:underline}:root{--bg: #9c93e5;--panel-left: #c9a6df;--panel-left-dark: #b98ed8;--panel-right: #8c8c8c;--panel-right-soft: rgb(255 254 254 / 7%);--purple-dark: #6b3b97;--purple-btn: #7f4ea8;--purple-btn-hover: #5b4db2;--text: rgb(0 0 0 / 85%);--muted: rgb(0 0 0 / 55%);--white: #fff;--shadow: 0 14px 40px rgb(0 0 0 / 18%);--shadow-soft: 0 10px 24px rgb(0 0 0 / 18%);--radius: 14px;--radius-sm: 10px;--gap: 12px}.chats-page{height:100vh;width:100%;display:grid;grid-template-columns:320px 1fr;gap:0;padding:0;min-height:0}.chats-section{background:linear-gradient(180deg,var(--panel-left) 0%,var(--panel-left-dark) 100%);padding:16px 12px;box-shadow:var(--shadow-soft);height:100%;overflow-y:auto;min-height:0}.chats-section:before{content:"";display:block;height:6px}.chat-item{appearance:none;border:1px solid rgba(25,25,25,.08);text-align:left;font:inherit;width:100%;cursor:pointer;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;gap:4px 10px;padding:10px;border-radius:12px;text-decoration:none;color:var(--text);background:#ffffff2e;margin-bottom:10px;transition:background .15s ease,transform .08s ease}.chat-item--active{background:#ffffff52}.chat-item:hover{background:#ffffff47}.chat-item:active{transform:translateY(1px)}.chat-preview__avatar{grid-column:1;grid-row:1/span 2;width:44px;height:44px;border-radius:50%;object-fit:cover;background:#ffffff12;box-shadow:0 10px 18px #0000001f}.chat-preview__title{grid-column:2;grid-row:1;display:flex;align-items:baseline;justify-content:space-between;gap:8px}.chat-preview__title_name{font-weight:700;font-size:14px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-preview__title_date{font-size:11px;opacity:.65;white-space:nowrap}.chat-preview__subtitle{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px}.chat-preview__subtitle_last-message{font-size:12px;color:#00000012;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-preview__subtitle_counter{min-width:20px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-size:11px;line-height:1;color:var(--white);background:var(--purple-dark)}.chat-section{background:var(--panel-right);display:grid;grid-template-rows:auto 1fr auto;height:100%;min-height:0;overflow:hidden}.chat-empty{grid-row:1/-1;display:grid;place-items:center;font-weight:700;color:#ffffffd9;letter-spacing:.08em;text-transform:lowercase}.chat__header{background:#ffffff38;border-bottom:1px solid rgba(255,255,255,.25);display:grid;grid-template-columns:44px 1fr 40px;align-items:center;gap:12px;padding:12px 16px}.chat__header__avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#ffffff12;box-shadow:0 10px 18px #0000001f}.chat__header_title_name{font-weight:800;color:#fffffff2;font-size:14px;height:100%;text-overflow:ellipsis;white-space:nowrap}.chat__header_settings{width:32px;height:32px;border-radius:10px;justify-self:end;position:relative;background:#ffffff2e;border:1px solid rgba(255,255,255,.18)}.chat__header_settings:before{content:"⋮";position:absolute;inset:0;display:grid;place-items:center;color:#ffffff17;font-size:18px;line-height:1}.chat__body{padding:18px 16px 12px;overflow-y:auto;min-height:0}.chat__body_messages{display:flex;flex-direction:column;gap:10px}.chat__body_empty{display:grid;place-items:center;padding:48px 0;color:#ffffffd9;opacity:.9}.message{max-width:min(520px,78%);padding:10px 12px;border-radius:14px;box-shadow:0 10px 18px #0000001f;display:grid;gap:6px}.message__text{font-size:13px;line-height:1.35}.message__time{justify-self:end;font-size:10px;opacity:.65}.message--their{align-self:flex-start;background:#ffffffa6;color:#000000d9;border-top-left-radius:8px}.message--mine{align-self:flex-end;background:#7f4ea88c;color:#fffffff2;border-top-right-radius:8px}.chat__input{padding:12px 16px 16px;display:grid;grid-template-columns:1fr 44px;gap:12px;align-items:end;background:#ffffff1f;border-top:1px solid rgba(255,255,255,.02)}.chat__input_message{width:100%;height:44px;padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.12);outline:none;background:#ffffffa6;color:#000000d9;font:inherit}.chat__input_message:focus{border-color:#00000047;background:#ffffffc7}.chat__input_send_message{width:44px;height:44px;border:0;border-radius:999px;cursor:pointer;background:var(--purple-btn);box-shadow:0 12px 28px #0000002e;display:grid;place-items:center;transition:background .2s ease,transform .08s ease}.chat__input_send_message:hover{background:var(--purple-btn-hover)}.chat__input_send_message:active{transform:translateY(1px)}.chat__input_send_message:before{content:"➤";color:#fffffff2;font-size:18px;transform:translate(1px)}@media(max-width:860px){.chats-page{grid-template-columns:280px 1fr}}@media(max-width:720px){.chats-page{grid-template-columns:1fr}.chats-section{height:100%;overflow-y:auto}.chat-section{height:100%;overflow:hidden}}