/* Гомон: the supplied visual design, connected to the real messenger. */
@font-face { font-family:Onest; src:url('./fonts/onest.ttf') format('truetype'); font-style:normal; font-weight:100 900; font-display:swap; }
@font-face { font-family:Unbounded; src:url('./fonts/unbounded.ttf') format('truetype'); font-style:normal; font-weight:100 900; font-display:swap; }
:root {
  color-scheme: dark;
  --bg: #100e24;
  --panel: #1b1938;
  --panel2: #252248;
  --raised: #2b2858;
  --raised2: #383470;
  --line: rgba(255,255,255,.08);
  --text: #f3f1ff;
  --muted: #a29dc8;
  --dim: #827eae;
  --accent: #ffd23f;
  --green: #4ade9a;
  --red: #ff6b7a;
  font-family: Onest, 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
}
body { -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font-family: inherit; }
button { transition: background .18s, color .18s, transform .18s; }
.ui-icon { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; flex-shrink:0; }
input,textarea,select { background:var(--raised); border-color:var(--line); border-radius:14px; color:var(--text); }
input::placeholder,textarea::placeholder { color:var(--dim); }
.primary { color:#1b1500; border-radius:14px; font-weight:700; }
.primary:hover { background:#ffdb63; }
.secondary { background:var(--raised); border-color:var(--line); border-radius:13px; }
.text-button { color:var(--accent); }
.icon-button { color:var(--muted); width:36px; height:36px; border-radius:12px; display:inline-grid; place-items:center; }
.icon-button:hover { background:var(--raised); color:var(--text); }
.menu-toggle { display:none; }
.brand { font-family:Unbounded,'Segoe UI',sans-serif; font-size:25px; font-weight:750; letter-spacing:-1px; }
.brand-mark { background:var(--accent); color:#1b1500; border-radius:15px; font-family:Unbounded,'Segoe UI',sans-serif; }
.brand-dot { color:var(--accent); }
.auth-story { padding:48px 64px; background:radial-gradient(ellipse at 45% 35%,#443674 0,transparent 68%),var(--panel); }
.auth-story:after { border-color:#c8b9ff29; box-shadow:0 0 0 70px #b9a6ff08,0 0 0 140px #b9a6ff08; }
.story-content h1 { font-family:Unbounded,'Segoe UI',sans-serif; font-size:clamp(46px,4.5vw,74px); letter-spacing:-3px; line-height:1.2; }
.story-content p { color:#c5bde4; }
.story-tags span { background:#b9a6ff0b; border-color:#c1afff2e; color:#d4c9f5; border-radius:12px; }
.story-foot { color:var(--dim); }
.auth-card h2 { font-size:28px; }
.auth-note { color:var(--dim); }
.mobile-brand { color:var(--accent); font-family:Unbounded,'Segoe UI',sans-serif; }

.app-shell { grid-template-columns:64px 268px minmax(0,1fr) 260px; gap:12px; padding:12px; }
.dock { display:flex; flex-direction:column; align-items:center; gap:11px; padding-top:2px; min-height:0; }
.dock-logo,.dock-button { width:52px; height:52px; border-radius:18px; display:grid; place-items:center; flex-shrink:0; }
.dock-logo { background:var(--accent); color:#1b1500; font-family:Unbounded,'Segoe UI',sans-serif; font-size:32px; font-weight:800; }
.dock-divider { width:26px; height:2px; border-radius:2px; background:var(--line); margin:4px 0; }
.dock-button { background:var(--panel); color:var(--muted); position:relative; }
.dock-button:hover { background:var(--raised); color:var(--text); border-radius:15px; }
.dock-button.selected { background:var(--text); color:var(--panel); }
.dock-button.selected:before { content:''; position:absolute; width:4px; height:25px; left:-12px; border-radius:0 4px 4px 0; background:var(--accent); }
.dock-spacer { flex:1; }
.sidebar,.main,.member-panel { background:var(--panel); border:0; border-radius:30px; overflow:hidden; }
.sidebar { overflow-y:auto; }
.app-brand { height:77px; padding:20px 22px; font-size:23px; }
.app-brand .brand-mark { display:none; }
.private-badge { color:var(--dim); background:var(--raised); font-family:inherit; letter-spacing:.6px; font-size:7px; padding:5px 7px; border-radius:7px; }
.community { background:var(--raised); border:0; padding:13px; margin:0 14px 12px; border-radius:18px; }
.community-icon { background:var(--raised2); color:var(--accent); border-radius:13px; }
.community strong { font-size:14px; }
.community small { color:var(--dim); font-size:11px; }
.invite-button { color:var(--muted); border-color:#73689166; margin:0 14px 13px; border-radius:14px; font-size:12px; }
.invite-button:hover { background:var(--raised); color:var(--text); }
.section-label { color:var(--dim); font-size:10px; letter-spacing:1px; margin:15px 23px 9px; }
.sidebar nav { padding:0 12px; }
.room-item { border-radius:15px; color:#b8b4dc; padding:11px 12px; font-size:14px; }
.room-item .room-symbol { color:var(--dim); }
.room-item:hover { background:var(--raised); }
.room-item.active { color:var(--text); background:#ffd23f24; font-weight:650; }
.room-item.active .room-symbol { color:var(--accent); }
.sidebar-hint { color:var(--dim); }
.voice-sidebar { background:var(--raised); border:1px solid #4ade9a55; border-radius:18px; margin:0 10px 8px; }
.voice-sidebar small { color:var(--muted); }
.voice-sidebar button { display:grid; place-items:center; color:var(--red); }
.self-row { margin:0 10px 10px; padding:12px 10px; border-radius:20px; background:var(--raised); gap:8px; }
.self-name strong { font-size:13px; }
.self-name small { font-size:11px; color:var(--dim); }
.self-row .icon-button { width:28px; height:32px; }
.self-row .ui-icon { width:19px; height:19px; }
.avatar { background:#c4b4f2; color:#251d49; width:38px; height:38px; border-radius:14px; font-size:13px; font-weight:750; }
.message:nth-child(4n+2) .avatar { background:#a8d8c7; color:#14382d; }
.message:nth-child(4n+3) .avatar { background:#f2b9cd; color:#4a2433; }
.message:nth-child(4n) .avatar { background:#abd0ef; color:#193a56; }
.room-header { height:76px; padding:0 24px; gap:12px; border-bottom:1px solid var(--line); }
.hash { color:var(--dim); font-size:27px; }
.room-header h1 { font-size:17px; }
.room-header p { color:var(--dim); font-size:11px; margin-top:4px; }
.network-status { background:var(--raised); color:var(--muted); font-size:10px; padding:8px 11px; border-radius:16px; }
.network-status.online:before { content:''; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--green); }
.conversation { padding:22px 24px 20px; }
.call-invitation { border:0; background:var(--raised); border-radius:22px; padding:17px 18px; gap:12px; margin-bottom:22px; }
.call-prompt-icon { width:44px; height:44px; background:#ffd23f24; color:var(--accent); border-radius:15px; }
.call-invitation strong { font-size:13px; }
.call-invitation p { color:var(--muted); font-size:11px; line-height:1.5; }
.call-invitation .primary { font-size:12px; padding:12px 15px; }
.chat-heading { color:var(--dim); font-size:9px; letter-spacing:1.2px; margin-bottom:9px; }
.messages { scrollbar-color:var(--raised2) transparent; padding-right:2px; }
.message { gap:11px; padding:9px 0 12px; }
.message-content { display:flex; flex-direction:column; align-items:flex-start; }
.message-meta { min-height:20px; gap:8px; }
.message-author { color:#d0c1fa; font-size:13px; }
.message-time { color:var(--dim); font-size:10px; }
.message-body { background:var(--raised); color:var(--text); padding:10px 14px; border-radius:6px 20px 20px 20px; font-size:14px; line-height:1.55; max-width:min(660px,100%); margin-top:5px; }
.message.mine .message-author { color:var(--accent); }
.message.mine .message-body { background:#38315e; }
.date-divider { color:var(--dim); font-size:11px; margin:18px 0 10px; }
.date-divider:before,.date-divider:after { background:var(--line); }
.chat-empty { color:var(--dim); padding:46px 12px; }
.chat-empty>div { color:var(--accent); font-size:38px; }
.chat-empty h2 { color:var(--text); font-size:18px; }
.older-button { background:var(--raised); color:var(--muted); border-radius:12px; }
.composer { background:var(--raised); border:1.5px solid transparent; border-radius:24px; padding:6px 9px; margin-top:16px; }
.composer:focus-within { border-color:var(--accent); }
.composer textarea { font-size:14px; background:transparent; padding:12px 9px; width:calc(100% - 44px); }
.composer button { width:38px; height:38px; border-radius:14px; display:grid; place-items:center; color:#1b1500; }
.composer button .ui-icon { width:19px; height:19px; }
.composer p { color:var(--dim); font-size:9px; padding:1px 9px 7px; }
.member-panel { padding:24px 18px 22px; }
.member-heading { background:var(--raised); border-radius:16px; padding:12px; }
.member-heading h2 { font-size:13px; }
.member-heading>span { background:var(--panel2); border-radius:9px; color:var(--muted); }
.member-help { font-size:10px; color:var(--dim); margin:13px 4px 13px; }
.member-group { color:var(--dim); font-size:9px; letter-spacing:1px; margin:18px 4px 8px; }
.member { margin:8px 0; }
.member-main { border-radius:15px; padding:7px 4px; }
.member-main:hover { background:var(--raised); }
.member-info strong { font-size:12px; }
.member-info small { color:var(--dim); font-size:10px; }
.member .avatar { width:34px; height:34px; border-radius:12px; }
.member .avatar:after { border-color:var(--panel); }
.member-admin { color:var(--accent); }
.member-foot { color:var(--dim); font-size:10px; padding-top:25px; }
.call-stage { background:var(--panel2); border-color:#74679866; border-radius:24px; padding:18px; margin-bottom:20px; }
.call-heading .eyebrow { color:var(--dim); }
.call-heading h2 { font-size:17px; }
.quality-badge { background:#4ade9a15; border-color:#4ade9a30; }
.quality-badge.poor { background:#ffc24b15; color:#ffc24b; border-color:#ffc24b30; }
.participant { background:var(--raised); border-color:transparent; border-radius:16px; padding:12px; }
.participant .avatar { background:#c4b4f2; color:#251d49; }
.participant.speaking { border-color:var(--accent); box-shadow:0 0 0 1px #ffd23f33; }
.participant-muted { font-size:8px; }
.call-controls { gap:8px; }
.control-button { background:var(--raised); border:0; border-radius:16px; padding:11px; min-width:66px; color:var(--muted); }
.control-button>span { display:grid; place-items:center; }
.control-button .ui-icon { width:21px; height:21px; }
.control-button small { font-size:10px; }
.control-button:hover { background:var(--raised2); color:var(--text); }
.control-button.active { background:var(--accent); color:#1b1500; }
.control-button.off { background:#ff6b7a1c; color:var(--red); }
.control-button.danger { background:var(--red); color:#fff; }
.video-tile { border-color:var(--line); border-radius:18px; background:var(--bg); }
.video-caption { background:var(--raised); color:var(--muted); }
.audio-unlock { background:var(--raised2); color:var(--text); border-radius:13px; }
dialog { background:var(--panel); border-color:var(--line); border-radius:28px; padding:28px; width:min(470px,92vw); }
dialog::backdrop { background:#100e24b8; }
dialog .dialog-header h2 { font-size:20px; }
dialog h3 { font-size:14px; }
.toast { background:var(--raised); border-color:#71668e; border-radius:18px; }
.toast.error { background:#472436; border-color:#ff6b7a55; }

@media (min-width:1600px) {
  .app-shell { grid-template-columns:76px 284px minmax(0,1fr) 290px; }
  .conversation { padding:24px 32px 24px; }
  .room-header { padding:0 32px; }
}
@media (max-width:1250px) {
  .app-shell { grid-template-columns:60px 250px minmax(0,1fr); }
  .member-panel { display:none; position:fixed; top:88px; bottom:12px; right:12px; width:260px; z-index:15; box-shadow:0 16px 50px #0009; }
  .member-panel.visible { display:flex; }
  .conversation { padding:20px; }
  .room-header { padding:0 20px; }
}
@media (max-width:850px) {
  .app-shell { grid-template-columns:52px 210px minmax(0,1fr); gap:9px; padding:9px; }
  .dock-logo,.dock-button { width:46px; height:46px; }
  .sidebar,.main { border-radius:24px; }
  .app-brand { padding:18px; font-size:21px; }
  .private-badge { display:none; }
  .community { margin:0 10px 12px; padding:10px; gap:8px; }
  .community small { font-size:9px; }
  .community-icon { font-size:18px; padding:8px; }
  .room-header p { display:none; }
  .call-invitation { flex-wrap:wrap; padding:14px; }
  .call-invitation .primary { margin-left:auto; }
  .conversation { padding:15px; }
}
@media (max-width:720px) {
  .app-shell { grid-template-columns:minmax(0,1fr); gap:0; padding:7px; }
  .dock { display:none; }
  .sidebar { left:0; top:0; bottom:0; width:268px; border-radius:0 26px 26px 0; }
  .sidebar.visible { transform:translateX(0); }
  .main { border-radius:24px; }
  .room-header { height:66px; padding:0 12px; gap:7px; }
  .room-header h1 { font-size:14px; }
  .network-status { font-size:8px; padding:7px 8px; }
  .room-header .icon-button { width:29px; height:32px; }
  .room-header .ui-icon { width:19px; height:19px; }
  .menu-toggle { display:inline-grid; }
  .hash { font-size:21px; }
  .conversation { padding:12px 12px 10px; }
  .call-invitation { border-radius:18px; padding:12px; flex-wrap:nowrap; gap:8px; margin-bottom:15px; }
  .call-invitation strong { font-size:11px; }
  .call-invitation p { font-size:10px; }
  .call-invitation .primary { font-size:10px; padding:11px; }
  .call-prompt-icon { display:none; }
  .message { gap:8px; }
  .message-body { font-size:13px; padding:9px 12px; border-radius:6px 17px 17px 17px; }
  .message .avatar { width:29px; height:29px; border-radius:11px; font-size:11px; }
  .message-author { font-size:11px; }
  .message-time { font-size:9px; }
  .composer { border-radius:20px; padding:5px 7px; }
  .composer textarea { font-size:13px; padding:11px 7px; }
  .composer p { font-size:7px; padding:0 7px 6px; }
  .member-panel { top:73px; bottom:7px; right:7px; }
  .call-stage { padding:12px; border-radius:20px; margin-bottom:12px; }
  .call-heading h2 { font-size:14px; }
  .call-controls { gap:5px; }
  .control-button { min-width:0; padding:9px 2px; border-radius:13px; }
  .control-button small { font-size:8px; }
  .control-button .ui-icon { width:19px; height:19px; }
}
@media (max-height:600px) {
  .conversation { padding-top:12px; }
  .call-invitation { padding:10px; margin-bottom:12px; }
  .call-stage { padding:10px; }
  .call-controls { margin-top:8px; }
  .control-button { padding:8px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*:before,*:after { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
}