:root{color-scheme:dark;--bg:#100b10;--card:#1d141c;--card2:#281a24;--line:#49303e;--text:#fff4ee;--muted:#c4aeb4;--accent:#ff8b73;--danger:#ff6675;--cream:#ffe4ce;--green:#75c99a}
    *{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -10%,#24203b 0,#101016 45%);color:var(--text);font:16px system-ui,-apple-system,sans-serif;min-height:100vh}
    main{width:min(720px,100%);margin:0 auto;padding:28px 16px 40px}.screen{display:none}.screen.active{display:block}.card{background:#17171eec;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 16px 50px #0004}
    h1{font-size:28px;margin:0 0 6px}h2{font-size:21px;margin:0}.sub{color:var(--muted);margin:0 0 24px;line-height:1.5}.muted{color:var(--muted);font-size:13px}label{display:block;color:#c6c4cf;font-size:14px;margin:14px 0 6px}input,textarea,button{font:inherit;border-radius:11px;border:1px solid var(--line);padding:12px;background:#111118;color:var(--text)}input{width:100%}button{cursor:pointer;background:var(--accent);border:0;color:#171421;font-weight:700}button.secondary{background:var(--card2);color:var(--text);border:1px solid var(--line)}button.danger{background:transparent;color:var(--danger);border:1px solid #633440}.row{display:flex;gap:10px;align-items:center}.row>*:first-child{flex:1}.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.chat-item{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);background:var(--card);border-radius:13px;margin:9px 0;cursor:pointer}.chat-item:hover{border-color:var(--accent)}.bubble{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#39334f;color:var(--accent);font-weight:800}.chat-name{font-weight:650}.chat-code{color:var(--muted);font-size:13px}.empty{padding:36px 12px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:14px}.messages{height:55vh;min-height:280px;overflow:auto;padding:4px 2px}.msg{padding:9px 11px;margin:8px 0;background:var(--card2);border-radius:12px;max-width:92%;overflow-wrap:anywhere}.meta{font-size:12px;color:var(--muted);margin-bottom:3px}.compose{display:flex;gap:8px;margin-top:12px}.compose textarea{flex:1;height:46px;resize:none}.compose button{width:104px}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#292533;border:1px solid var(--line);border-radius:10px;padding:10px 14px;display:none}.toast.show{display:block}.brand{display:flex;align-items:center;gap:12px;margin-bottom:8px}.brand-logo{width:48px;height:48px;border-radius:14px;object-fit:contain;background:#17171e;padding:2px;flex:0 0 auto}.brand h1{margin:0}.message-avatar{width:24px;height:24px;border-radius:50%;vertical-align:middle;margin-right:4px}.msg{border-color:#452b3b}.msg:focus-within{border-color:var(--accent)}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#avatarPicker>*:first-child,#colorPicker>*:first-child{flex:0 0 auto}@media(max-width:480px){main{padding:18px 12px}.card{padding:18px}h1{font-size:25px}.compose button{width:82px}}


:root{--bg:#0e0b0f;--panel:#171319;--panel-2:#211922;--line:#382b36;--text:#f6eee9;--muted:#a9969f;--accent:#ff856f;--accent-2:#e55372}*{box-sizing:border-box}body{background:var(--bg);font-size:15px}main{width:min(980px,100%);min-height:100vh;padding:0 18px 24px}.screen{min-height:100vh}.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:none;padding:18px}h1{font-size:24px;letter-spacing:-.02em}h2{font-size:18px}.sub{margin-bottom:18px}.muted{font-size:12px;color:var(--muted)}#welcome{width:min(560px,100%);min-height:auto;margin:46px auto 0}.brand{padding-bottom:8px;border-bottom:1px solid var(--line)}.brand-logo{width:42px;height:42px;border-radius:10px;padding:1px}#avatarLabel,#colorLabel{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}#avatarPicker{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px;margin-top:10px!important}#avatarPicker button{width:44px!important;height:44px!important;justify-self:center;border-radius:50%;background:#100d12!important}#avatarPicker button img{border-radius:50%;object-fit:cover}#colorPicker{gap:12px;margin-top:10px!important}#colorPicker button{flex:0 0 25px}#enter{margin-top:18px!important;height:44px}#menu,#chat{width:100%;padding-top:18px}#menu>.top,#chat>.top{margin:0 -18px;padding:12px 18px 14px;border-bottom:1px solid var(--line);background:#120f13}#menu>.top h1{margin:0 0 3px}#menu>.card{margin-top:14px;padding:12px 14px}#menu>.card .row{max-width:560px}#newRoom{width:auto!important;margin-top:10px!important;padding:9px 12px}#rooms{margin-top:14px!important;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}.chat-item{border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;padding:12px 14px;background:transparent;min-height:64px}.chat-item:last-child{border-bottom:0}.chat-item:hover{background:var(--panel-2);border-color:var(--line)}.bubble{width:38px;height:38px;border-radius:50%;background:#32202d;color:#ffc0a9}.chat-name{font-size:15px}.chat-code{font-size:12px;margin-top:2px}.room-action{font-size:12px!important;padding:7px 9px!important}#chat>.top{display:flex;align-items:center;gap:10px}#chat>.top>.row{margin-left:auto}#chat>.card{padding:0;margin-top:14px;overflow:hidden;background:#120f13}#chatTitle{padding:14px 16px 0}.chat-code{padding-bottom:10px}.messages{height:calc(100vh - 220px);min-height:300px;padding:12px 16px;border-top:1px solid var(--line);background:#0f0c10}.msg{max-width:760px;padding:5px 0 7px;margin:0;background:transparent;border:0;border-radius:0}.meta{display:flex;align-items:center;gap:3px;margin-bottom:2px}.message-avatar{width:22px;height:22px;margin-right:3px}.compose{position:sticky;bottom:0;margin:0;padding:10px 12px;border-top:1px solid var(--line);background:#171319}.compose textarea{height:44px;border-radius:9px}.compose button{width:92px;border-radius:9px}button{border-radius:9px}button.secondary{background:#211922}button:hover{filter:brightness(1.06)}@media(max-width:600px){main{padding:0 10px 14px}#welcome{margin-top:18px;padding:16px}#menu,#chat{padding-top:0}#menu>.top,#chat>.top{margin:0 -10px;padding:10px}.top button{padding:9px 10px}.messages{height:calc(100vh - 190px);padding:10px 12px}.compose{padding:8px}.compose button{width:76px}.chat-item{padding:11px 10px}}




:root{color-scheme:dark;--bg:#0b0d10;--panel:#12161c;--panel-2:#181e26;--line:#28313d;--text:#edf3fa;--muted:#929eac;--accent:#63adff;--accent-2:#8b8cff;--green:#42d6a0;--shadow:0 24px 70px #0007}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg);scroll-behavior:smooth}body{min-height:100vh;background:radial-gradient(ellipse 850px 400px at 80% -12%,#1d3b5d66,transparent 70%),radial-gradient(ellipse 700px 400px at -12% 70%,#292b5a24,transparent 70%),var(--bg);color:var(--text);font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
main{width:min(1020px,100%);padding:28px 22px 38px}.screen{min-height:100vh}.card{background:linear-gradient(145deg,#141a22f5,#10141af5);border:1px solid #2c3948;border-radius:18px;box-shadow:var(--shadow);padding:22px}h1{font-size:26px;letter-spacing:-.035em}h2{font-size:19px;letter-spacing:-.02em}.sub,.muted{color:var(--muted)}.sub{line-height:1.65}label{color:#aeb9c7}input,textarea{border-color:#303b49;border-radius:11px;background:#0c1117;color:var(--text);transition:border-color .18s,box-shadow .18s,background .18s}input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #63adff20;outline:0}button{border-radius:10px;background:linear-gradient(135deg,#73b9ff,#5196ed);color:#07111d;box-shadow:0 6px 18px #438ede2b;transition:transform .18s,filter .18s,box-shadow .18s}button:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 9px 22px #438ede3b}button:active:not(:disabled){transform:translateY(0) scale(.985)}button.secondary{border:1px solid #344253;background:#171e27;color:#d7e2ef;box-shadow:none}button.secondary:hover:not(:disabled){border-color:#568ac0;background:#1b2734}.brand{gap:13px}.brand-logo{width:46px;height:46px;border:1px solid #38506b;border-radius:14px;background:#152337;padding:3px;box-shadow:0 0 24px #428bda26}.brand h1{letter-spacing:.015em}.top{gap:16px}.chat-item{margin:8px 0;border-color:#2b3745;border-radius:13px;background:#121820;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}.chat-item:hover{transform:translateX(3px);border-color:#568ac0;background:#17212d;box-shadow:0 8px 24px #0003}.bubble{background:#17314d;color:#89c3ff}.chat-code{color:#8392a3}.empty{border-color:#344253;background:#111820}.messages{scrollbar-color:#39506a transparent;overscroll-behavior:contain}.msg{width:fit-content;min-width:min(180px,100%);padding:10px 13px;margin:8px 0;border:1px solid #283746;border-radius:4px 14px 14px 14px;background:#151e28;animation:chat-message-in .22s ease-out both}.msg:nth-child(even){background:#121a23}.meta{color:#94a5b8}.message-avatar{border:1px solid #3b526d}.compose{padding:12px;border:1px solid #2b3948;border-radius:14px;background:#111820}.compose textarea{min-height:46px}.toast{z-index:40;border-color:#3b5c7d;border-radius:12px;background:#172638;color:#e4f2ff;box-shadow:var(--shadow);animation:chat-toast-in .2s ease-out both}
#welcome{position:relative;overflow:hidden;border-radius:22px}#welcome::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#63adff,#8b8cff,#42d6a0);opacity:.9}#welcome .brand{margin-bottom:14px}#menu>.top,#chat>.top{border-color:#26313e;background:#0e131a}#menu>.card,#chat>.card{border-color:#2b3948;background:#111820}#rooms{border-color:#2b3948;border-radius:14px;background:#111820}.chat-item:last-child{border-bottom-color:transparent}#chatTitle{padding-top:17px}.messages{background:#0c1117}.compose{border-width:1px;border-color:#293747;background:#121922}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #8ac5ff;outline-offset:3px}
@keyframes chat-message-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes chat-dialog-in{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes chat-toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:600px){main{padding:12px 10px 18px}#welcome{margin:14px auto 0;padding:19px 16px}.card{border-radius:15px;padding:16px}.top{align-items:flex-start}.top button{padding:9px 10px}#menu>.top,#chat>.top{padding:10px}#chat>.top{flex-wrap:wrap}#chat>.top>.row{width:100%;justify-content:flex-start!important;flex-wrap:wrap}#chat>.top>.row button{flex:1 1 auto;font-size:12px}.chat-item{border-radius:11px}.chat-item:hover{transform:none}.messages{height:calc(100dvh - 240px);min-height:240px}.compose{gap:7px;padding:8px}.compose textarea{min-width:0}.compose button{width:78px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.site-link{position:fixed;z-index:5;top:14px;left:12px;display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border:1px solid #2b3948;border-radius:11px;background:#171e28;color:#dcecff;font-weight:700;text-decoration:none;white-space:nowrap}.site-link:hover{background:#202b39;border-color:#46617c}[hidden]{display:none!important}#menu{padding-top:68px!important}
@media(max-width:600px){.site-link{top:10px;left:10px}#welcome{margin-top:62px!important}#menu{padding-top:60px!important}}
#chat>.card{overflow:visible}.messages{height:auto;max-height:none;min-height:0;overflow:visible;overscroll-behavior:auto}.compose{position:static}

body.booting main,body.booting .site-link,body.booting #lang{visibility:hidden}
body.chat-open{overflow:hidden}
body.chat-open main{width:100%;height:100dvh;min-height:0;margin:0;padding:0}
#chat.screen.active{display:flex;flex-direction:column;width:100%;height:100dvh;min-height:0;padding:0}
#chat>.top{flex:0 0 auto;width:100%;margin:0;padding:12px 18px 14px}
#chat>.card{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;margin:0;border:0;border-radius:0;padding:0;overflow:hidden}
#chatTitle{flex:0 0 auto;padding:14px 18px 0}
#chatCode{flex:0 0 auto;padding:0 18px 10px}
#chat>.card>.messages{flex:1 1 auto;height:auto;min-height:0;max-height:none;overflow:auto;padding:14px 18px;overscroll-behavior:contain}
#chat>.card>.compose{position:static;flex:0 0 auto;margin:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-radius:0;border-width:1px 0 0}
.profile-trigger{display:inline-flex;align-items:center;gap:5px;margin:0;padding:0;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;font-weight:inherit;box-shadow:none;vertical-align:middle;cursor:pointer}
.profile-trigger:hover{filter:brightness(1.1);transform:none!important;box-shadow:none!important;text-decoration:underline}
.profile-trigger .message-avatar{flex:0 0 auto}
.profile-dialog{position:fixed;inset:0;width:min(340px,calc(100vw - 32px));margin:auto;padding:30px 22px 24px;border:1px solid #34485d;border-radius:18px;background:linear-gradient(145deg,#17212d,#10161e);color:var(--text);text-align:center;box-shadow:0 24px 80px #000b;animation:chat-dialog-in .18s ease-out both}
.profile-dialog::backdrop{background:#05080dcc;backdrop-filter:blur(3px)}
.profile-close{position:absolute;top:9px;right:9px;width:36px;height:36px;padding:0;font-size:23px;line-height:1}
.profile-avatar{display:block;width:88px;height:88px;margin:10px auto 14px;border:2px solid #3b526d;border-radius:50%;object-fit:cover;background:#0c1117}
.profile-dialog h2{margin:0 0 12px;overflow-wrap:anywhere}
.profile-color{display:inline-block;width:34px;height:5px;border-radius:999px;box-shadow:0 0 16px currentColor}
@media(max-width:600px){#chat.screen.active{height:100dvh}#chat>.top{gap:8px;padding:9px 10px}#chat>.top>.row{flex-wrap:nowrap;overflow-x:auto}#chat>.top>.row button{flex:0 0 auto;font-size:12px}#chatTitle{padding:12px 12px 0}#chatCode{padding:0 12px 8px}#chat>.card>.messages{padding:10px 12px}#chat>.card>.compose{padding:8px 9px calc(8px + env(safe-area-inset-bottom))}}
body.chat-open main{width:min(96vw,1920px);height:96dvh;margin:2dvh auto;padding:0}
body.chat-open #lang{top:calc(2dvh + 12px)!important;right:calc(2vw + 12px)!important}
#chat.screen.active{height:100%;margin:0;padding-top:0}
#chat>.top{padding-right:96px;border:1px solid #2b3948;border-radius:14px}
#chat>.top>.row{margin-right:76px}
#chat>.card{margin-top:10px;border:1px solid #2b3948;border-radius:16px}
@media(max-width:600px){body.chat-open main{width:96vw;height:96dvh;margin:2dvh auto}body.chat-open #lang{right:calc(2vw + 8px)!important}#chat>.top{padding-right:76px}#chat>.top>.row{margin-right:58px}}
.menu-actions>*{flex:0 0 auto!important}.registration-nickname{display:grid;gap:4px;margin:18px 0 12px;padding:12px;border:1px solid #2b3948;border-radius:11px;background:#111820;text-align:left;overflow-wrap:anywhere}.registration-nickname strong{font-size:15px;color:#e8f2ff}.registration-nickname .muted{font-size:12px}
@media(max-width:600px){#menu>.top{flex-wrap:wrap;align-items:center}#menu>.top>.menu-actions{justify-content:flex-end;flex:1;flex-wrap:wrap}#menu>.top>.menu-actions button{font-size:12px;padding:8px 9px}}

/* Profile actions and room actions use stable widths across phone sizes. */
#menu>.top>.menu-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));flex:0 1 430px;align-items:stretch}
#menu>.top>.menu-actions button{width:100%;min-width:0;min-height:44px;height:100%;padding:10px 12px;line-height:1.25;white-space:normal;overflow-wrap:anywhere}
.chat-item .room-action{box-sizing:border-box;width:88px;min-width:88px;max-width:88px!important;min-height:40px;display:inline-flex;flex:0 0 88px!important;align-items:center;justify-content:center;text-align:center;line-height:1.2;white-space:normal}
@media(max-width:600px){#menu>.top>.menu-actions{width:100%;flex:1 1 100%}#menu>.top>.menu-actions button{font-size:12px;padding:9px 7px}}

.friends-panel{margin-top:12px}
.friends-panel summary{display:flex;align-items:center;gap:9px;cursor:pointer;font-weight:700;list-style:none}
.friends-panel summary::-webkit-details-marker{display:none}
.friends-panel summary::after{content:'＋';margin-left:auto;color:var(--muted)}
.friends-panel[open] summary::after{content:'−'}
.friends-badge,.unread-badge{display:inline-grid;min-width:22px;height:22px;place-items:center;padding:0 6px;border-radius:999px;background:#244567;color:#b9ddff;font-size:12px;font-weight:750}
.friends-panel h2{margin:18px 0 8px;font-size:14px;color:var(--muted)}
.friend-add-row{margin-top:12px}
.friend-add-row input{min-width:0}
.notification-toggle{margin-top:10px}
.friend-row{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 0;border-top:1px solid var(--line)}
.friend-name{flex:1;min-width:0;padding:8px 10px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;background:transparent;color:var(--text)}
.friend-name:hover{filter:brightness(1.1)}
.friend-action{flex:0 0 auto;padding:8px 10px;font-size:12px}
.friends-empty{margin:7px 0;color:var(--muted);font-size:13px}
.unread-badge{width:max-content;margin-top:5px}
.profile-dialog #profileAddFriend{width:100%;margin-top:16px}
@media(max-width:600px){
  .friends-panel{padding:13px 12px}
  .friend-add-row{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .friend-add-row button{padding:10px 9px;font-size:13px}
  .friend-row{flex-wrap:wrap}
  .friend-name{flex:1 1 100%;padding:7px 2px}
  .friend-action{flex:1 1 0;min-width:0;padding:9px 5px;white-space:normal}
}

/* Keep both the room list and the open chat comfortable on narrow phones. */
@media(max-width:600px){
  html,body{min-width:320px}
  main{width:100%;padding:58px 12px 22px}
  body.chat-open main{width:100%;height:100dvh;margin:0;padding:0}
  body.chat-open #lang{top:10px!important;right:10px!important}
  #menu.screen.active{min-height:calc(100dvh - 72px)}
  #menu>.top{gap:8px;padding:10px 12px}
  #menu>.top>.menu-actions{width:100%;margin:0;justify-content:stretch;gap:8px}
  #menu>.top>.menu-actions button{flex:1 1 0!important;min-width:0;white-space:normal}
  #menu>.card .row{align-items:stretch;gap:8px}
  #menu>.card .row input{min-width:0}
  #menu>.card .row button{flex:0 0 auto;padding:10px 12px}
  .chat-item{gap:10px;padding:11px 10px}
  .chat-item .chat-name{overflow-wrap:anywhere}
  .chat-item .room-action{flex:0 0 auto;max-width:96px;white-space:normal}
  #chat>.top{flex-wrap:wrap;gap:8px;padding:10px 72px 10px 10px}
  #chat>.top>.row{width:100%;margin:0;gap:6px;overflow-x:auto;overscroll-behavior-x:contain}
  #chat>.top>.row button{flex:0 0 auto;max-width:45vw;white-space:normal}
  #chat>.card{min-height:0}
  #chatTitle{overflow-wrap:anywhere}
  #chatCode{overflow-wrap:anywhere;word-break:break-word}
  #chat>.card>.messages{padding:10px 12px}
  #chat>.card>.compose{gap:7px;padding:8px 9px calc(8px + env(safe-area-inset-bottom))}
  #chat>.card>.compose textarea{min-width:0;min-height:44px}
  #chat>.card>.compose button{flex:0 0 76px;width:76px;padding:9px 6px}
}