/* Chat surfaces, October 2026. Uses the shared light/dark theme tokens. */
body:is([data-view=chats],[data-view=regional],[data-view=dm]) #shell>main{display:flex;flex-direction:column;gap:12px;padding:18px 24px;min-height:0}
#main>.chat-tabs,.dialog-page>.tabs{display:flex;flex-wrap:nowrap;gap:4px;padding:4px;margin:0;background:var(--surface-alt);border-radius:15px;width:max-content;max-width:100%;border:1px solid var(--line)}
#main>.chat-tabs a,.dialog-page>.tabs a{display:flex;align-items:center;justify-content:center;padding:10px 22px;min-height:42px;border:0;border-radius:11px;background:transparent;color:var(--muted);font-size:13px;font-weight:650;white-space:nowrap;text-decoration:none}
#main>.chat-tabs a[aria-current=page],.dialog-page>.tabs a[aria-current=page]{background:var(--accent);color:var(--accent-ink);box-shadow:0 3px 10px #5339a91b}
#main .chat-workspace{display:flex;min-height:0;border-radius:22px!important;box-shadow:0 8px 36px #1d153508}
#main .room-rail{width:260px;flex-basis:260px;padding:20px 12px;overflow:auto;background:color-mix(in srgb,var(--surface) 70%,var(--bg))}
#main .rail-title{display:flex;justify-content:space-between;align-items:center;margin:0 8px 22px;font-size:22px;letter-spacing:-.6px}.rail-title>a{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--tint);color:var(--accent);font-size:24px;text-decoration:none}
#main .room-link{display:flex;gap:12px;align-items:center;margin:4px 0;padding:12px 10px;border-radius:14px;color:var(--text);text-decoration:none}#main .room-link.selected{background:var(--tint);color:var(--accent)}#main .room-link .room-icon{border-radius:13px;width:42px;height:42px;background:var(--surface-alt);color:var(--accent)}#main .room-link.selected .room-icon{background:var(--accent);color:var(--accent-ink)}#main .room-link small{margin-top:5px;display:block;color:var(--muted);font-size:11px}#main .rail-label{display:flex;justify-content:space-between;margin:27px 10px 9px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.4px;text-decoration:none}
#main .chat-workspace>.chat{display:flex;flex-direction:column;border:0;border-radius:0;overflow:hidden;min-height:0;margin:0;position:relative}
#main .conversation-head{display:flex;align-items:center;gap:11px;min-height:66px;height:66px;padding:12px 24px;border-bottom:1px solid var(--line);background:var(--surface)}#main .conversation-head b{font-size:16px;font-weight:650}.conversation-head .room-icon{width:36px;height:36px;border-radius:12px;background:var(--tint);color:var(--accent);font-size:23px}
#main .chat-workspace .messages{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px 26px 22px;gap:14px;background:var(--bg);scrollbar-width:thin}
#main .public-conversation .messages{background:var(--surface);gap:0}#main .public-conversation .message-row{padding:15px 0;gap:13px;border:0;max-width:850px;align-self:center;width:100%}#main .public-conversation .message-row+.message-row{border-top:1px solid color-mix(in srgb,var(--line) 48%,transparent)}
#main .public-conversation .message-row>a{flex:0 0 56px;padding:0}#main .public-conversation .message-row>a>.game-avatar{width:56px;height:56px;min-width:56px;padding:3px}#main .public-conversation .message-row .message{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 8px;align-content:start;padding:1px 0;background:transparent;box-shadow:none;border:0}
#main .public-conversation .message-author{grid-column:1;grid-row:1;min-width:0;margin:0;gap:7px;flex-wrap:wrap}#main .public-conversation .message time{grid-column:2;grid-row:1;margin:2px 0 0;font-size:10px;color:var(--muted);align-self:start}#main .public-conversation .message-body{grid-column:1/-1;grid-row:2;color:var(--text)}#main .message-author strong{font-size:14px;font-weight:650}#main .message-body{font-size:15px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}#main .public-conversation .own .message-profile-link{color:var(--accent)}#main .chat-demographics{font-size:10px}#main .you{display:none}
#main .day-divider{display:flex;align-items:center;gap:12px;width:100%;font-size:11px;color:var(--muted);margin:12px auto 9px;padding:0;background:transparent}#main .day-divider:before,#main .day-divider:after{content:'';height:1px;flex:1;background:var(--line)}
#main .private-conversation .message-row{max-width:78%;gap:0}#main .private-conversation .message-row .message{padding:12px 15px 8px;border:1px solid var(--line);border-radius:18px 18px 18px 5px;background:var(--surface)}#main .private-conversation .message-row.own .message{background:#7750df;border-color:transparent;border-radius:18px 18px 5px 18px}#main .private-conversation .message time{font-size:10px;margin-top:5px}#main .private-conversation .message-row:has(.media-only) .message,#main .private-conversation .message-row:has(.emoji-only) .message{background:transparent;border:0;box-shadow:none}#main .private-conversation .message-row.own:has(.emoji-only) time,#main .private-conversation .message-row.own:has(.media-only) time{color:var(--muted)}
#main .compose{display:flex;align-items:flex-end;gap:10px;padding:14px 18px;background:var(--surface);border-top:1px solid var(--line);flex-shrink:0}#main .compose textarea{flex:1;min-width:0;width:100%;height:46px;min-height:46px;max-height:132px;margin:0;padding:11px 16px;border:1px solid transparent;border-radius:18px;background:var(--surface-alt);color:var(--text);font:inherit;font-size:15px;line-height:21px;resize:none;box-sizing:border-box;overflow-y:auto}#main .compose textarea::placeholder{color:var(--muted)}#main .compose button{flex-shrink:0;margin:0;min-height:46px}#main .compose #emoji{height:46px;width:38px;min-width:38px;background:transparent;border:0;font-size:28px;color:var(--muted);border-radius:12px}#main .compose #emoji:hover{background:var(--tint);color:var(--accent)}#main .compose button.primary{width:46px;height:46px;min-width:46px;padding:12px;border-radius:16px;background:var(--accent);color:var(--accent-ink);box-shadow:none}#main .compose button.primary svg{width:22px;height:22px}#main .compose button:disabled{opacity:.45}
#main .emoji-picker{max-height:min(310px,40dvh);overflow:auto;border:1px solid var(--line);border-radius:18px;margin:0 12px 8px;background:var(--surface);box-shadow:0 -8px 28px #20133810;flex-shrink:0}#main .message-draft{max-height:130px;overflow:auto;flex-shrink:0}#main .chat-loading{margin:auto;color:var(--muted);font-size:13px;padding:24px}#main .chat .empty{margin:auto;color:var(--muted)}#main .chat .empty h2{color:var(--text);font-size:20px}
body[data-view=dialogs] #main{max-width:1150px}.dialog-page{max-width:800px;background:var(--surface);border:1px solid var(--line);padding:26px;border-radius:22px}.dialog-page .dialog-page-head{height:auto;position:static;margin:0 0 20px}.dialog-page .dialog-page-head h1{display:block;font-size:24px}.dialog-page .dialog-new{position:static;width:44px;height:44px;border-radius:14px;text-decoration:none}.dialog-page>.tabs{width:100%;margin:0 0 20px}.dialog-page>.tabs a{flex:1;padding-inline:10px}.dialog-page .dialog-search{width:100%;height:46px;border-radius:14px;margin-bottom:14px;padding:12px 16px;font-size:15px}.dialog-page #dialog-list .dialog-entry{padding:17px 8px;gap:14px}.dialog-page .dialog-entry>.avatar{width:54px;height:54px;flex-basis:54px;background:var(--tint);color:var(--accent)}.dialog-page .dialog-entry b{font-size:15px}.dialog-page .dialog-entry p{font-size:13px;line-height:1.5}.dialog-page .dialog-entry time{font-size:10px}.conversation-person{width:205px;flex-basis:205px}
#main :is(.chat-tabs,.room-rail,.dialog-page,.chat) a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media(max-width:1100px){#main .room-rail{width:215px;flex-basis:215px}.conversation-person{display:none!important}}
@media(max-width:700px){body:is([data-view=chats],[data-view=regional],[data-view=dm]) #shell>main{padding:0;gap:0}#main .chat-workspace{border:0!important;border-radius:0!important;box-shadow:none}body:has(.chat) #shell>main>.chat-tabs{padding:5px;margin:10px 12px 8px;width:calc(100% - 24px);border-radius:14px;background:var(--surface-alt);gap:3px}body:has(.chat) #shell>main>.chat-tabs a{padding:8px 5px;min-height:39px;font-size:12px;background:transparent;border-radius:10px}body:has(.chat) #shell>main>.chat-tabs a[aria-current=page]{background:var(--accent);color:var(--accent-ink)}#main .public-conversation .conversation-head{display:none}body[data-view=regional] #main .public-conversation .conversation-head{display:flex;min-height:36px;height:36px;padding:0 17px 8px;border:0}body[data-view=regional] .conversation-head .room-icon{width:24px;height:24px;font-size:18px;background:transparent}body[data-view=regional] #main .conversation-head b{font-size:12px;color:var(--muted)}#main .private-conversation .conversation-head{min-height:58px;height:58px;padding:9px 15px}#main .chat-workspace .messages{padding:10px 14px 18px}#main .public-conversation .message-row{padding:12px 0;gap:11px}#main .public-conversation .message-row>a{flex-basis:50px}#main .public-conversation .message-row>a>.game-avatar{width:50px;height:50px;min-width:50px}#main .message-body{font-size:14px}#main .message-author strong{font-size:13px}#main .compose{padding:10px 10px;gap:7px}#main .compose textarea{font-size:16px;padding-inline:12px}#main .compose #emoji{width:32px;min-width:32px}#main .compose button.primary{width:44px;min-width:44px}#main .private-conversation .message-row{max-width:88%}#main .day-divider{font-size:10px;margin-top:6px}body[data-view=dialogs] #main{padding:12px 12px calc(var(--app-nav) + 24px)}.dialog-page{padding:0;background:transparent;border:0;border-radius:0}.dialog-page .dialog-page-head{margin-bottom:14px;padding:0 3px}.dialog-page .dialog-page-head h1{font-size:22px}.dialog-page>.tabs{margin-bottom:10px}.dialog-page #dialog-list .dialog-entry{padding:16px 4px}.dialog-page .dialog-search{font-size:16px}.dialog-page .dialog-entry>.avatar{width:50px;height:50px;flex-basis:50px}}

.dialog-search-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}.dialog-page .dialog-search-row .dialog-search{flex:1;min-width:0;margin:0}.dialog-search-row .dialog-new{flex:0 0 44px}@media(max-width:700px){.dialog-page>.tabs{margin:0 0 12px}.dialog-page>.tabs a{min-height:39px;font-size:12px}.dialog-page .dialog-search-row{margin-bottom:8px}}

#main .room-rail #rail-dialogs{max-height:none;overflow:visible}#main .room-rail .new-conversation{display:flex;align-items:center;gap:8px;padding:10px 4px;margin:12px 8px;min-height:40px;height:auto}#main .new-conversation span{display:inline;border:0;width:auto;height:auto;padding:0}#main .room-rail .rail-title>a{padding:0;min-height:36px;box-sizing:border-box}#main .room-rail .dialog-entry[aria-current=page]{background:var(--tint);border-radius:12px}
/* Same workspace dimensions for rooms and private conversations. */
body:is([data-view=chats],[data-view=regional],[data-view=dialogs],[data-view=dm]) #shell>main{height:calc(100dvh - var(--app-header));display:flex;flex-direction:column;min-height:0;max-width:1450px;padding:18px 24px;gap:0}
#main .chat-workspace{width:100%;flex:1;min-width:0;min-height:0;max-height:100%;box-sizing:border-box}#main .room-rail{width:225px;flex-basis:225px;padding:15px 10px;scrollbar-width:thin}#main .room-rail .rail-title{margin:0 8px 14px;font-size:20px;height:38px}#main .room-link{padding:10px;gap:10px;margin:3px 0}#main .room-link .room-icon{width:34px;height:34px;flex:0 0 34px;border-radius:10px;font-size:20px}#main .room-link b{font-size:13px}#main .room-link small{font-size:10px;margin-top:3px}#main .rail-label{margin:20px 9px 8px}#main .room-rail .dialog-entry{padding:10px 7px;border:0;border-radius:11px}#main .room-rail .dialog-entry>.avatar{width:36px;height:36px;flex-basis:36px}#main .room-rail .new-conversation{font-size:11px;margin:8px}
#main .conversation-person{display:none!important}#main .conversation-head{min-height:58px;height:58px;padding:10px 20px}#main .conversation-head b{font-size:14px}#main .chat-workspace .messages{padding:12px 24px 18px;gap:10px}#main .public-conversation .messages{gap:0}#main .public-conversation .message-row{max-width:740px;padding:10px 0;gap:11px}#main .public-conversation .message-row>a{flex-basis:46px}#main .public-conversation .message-row>a>.game-avatar,#main .public-conversation .message-row>a>.avatar{width:46px;height:46px;min-width:46px;border-radius:50%;object-fit:cover}#main .public-conversation .message-row>a>.avatar{display:grid;place-items:center;background:var(--tint);color:var(--accent);font-size:20px;border:0;box-shadow:none}#main .public-conversation .message-row .message{min-width:0}#main .message-body{font-size:14px;line-height:1.5}#main .message-body.emoji-only{font-size:30px;line-height:1.2}#main .message-body .app-emotion{width:30px;height:30px;object-fit:contain;vertical-align:middle}#main .message-body.media-only>.app-emotion{width:56px;height:56px}#main .message-body.media-only :is(.app-sticker,.custom-sticker){max-width:130px;max-height:130px;object-fit:contain}#main .private-conversation .message-row{max-width:min(76%,600px)}
#main .dialogs-workspace>.dialog-page{min-width:0;flex:1;margin:0;max-width:none;overflow:auto;border:0;border-radius:0;padding:20px 24px;background:var(--surface)}#main .dialog-page #dialog-list .dialog-entry{padding:13px 8px}#main .dialog-page .dialog-search-row{margin:0 0 16px}#main .dialog-page .dialog-search{height:44px}#main .dialog-page .dialog-entry>.avatar{width:46px;height:46px;flex-basis:46px}
#main .chat-avatar-settings{display:grid;place-items:center;flex:0 0 32px;height:46px;text-decoration:none}#main .chat-avatar-settings>.avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--tint);color:var(--accent);font-size:13px}#main .compose{padding:11px 16px;gap:8px}#main .compose textarea{border-radius:14px}#main .emoji-picker{max-width:480px;width:calc(100% - 24px);box-sizing:border-box;align-self:flex-start}#main .chat-photo-choice{display:flex;align-items:center;gap:22px;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:18px;margin:15px 0 24px}#main .chat-photo-preview>.avatar{display:grid;place-items:center;width:100px;height:100px;border-radius:50%;object-fit:cover;background:var(--tint);color:var(--accent);font-size:34px}#main .chat-photo-choice h2{margin:0 0 8px;font-size:20px}#main .chat-photo-choice p{font-size:13px;color:var(--muted)}#main .chat-photo-choice .btn{margin:4px 0 4px 8px}#main .game-avatar-library>h2{font-size:18px}
@media(min-width:701px){#main>.chat-tabs,#main .dialog-page>.tabs{display:none!important}}
@media(max-width:1000px) and (min-width:701px){#main .room-rail{width:190px;flex-basis:190px}body:is([data-view=chats],[data-view=regional],[data-view=dialogs],[data-view=dm]) #shell>main{padding:12px}}
@media(max-width:700px){body:is([data-view=chats],[data-view=regional],[data-view=dialogs],[data-view=dm]) #shell>main{height:calc(100dvh - var(--app-header) - var(--app-nav) - env(safe-area-inset-bottom));padding:0;gap:0}#main .room-rail{display:none}#main .dialogs-workspace>.dialog-page{padding:10px 12px}#main .dialog-page>.tabs{margin:0 0 12px}#main .chat-workspace .messages{padding:8px 14px 16px}#main .compose{padding:10px 8px;gap:5px}#main .chat-avatar-settings{flex-basis:28px}#main .chat-avatar-settings>.avatar{width:27px;height:27px}#main .compose #emoji{width:28px;min-width:28px}#main .chat-photo-choice{padding:16px;gap:14px;align-items:flex-start}#main .chat-photo-preview>.avatar{width:65px;height:65px}#main .chat-photo-choice .btn{margin-left:0}#main .chat-photo-choice button{margin-bottom:4px}}

#main .room-icon svg{width:20px;height:20px}#main .rail-label{font-size:12px;padding:10px;border-radius:10px;margin:12px 0 8px;color:var(--text);letter-spacing:0}#main .rail-label.selected{background:var(--tint);color:var(--accent)}body[data-view=dialogs] #rail-dialogs,body[data-view=dialogs] .room-rail .new-conversation{display:none!important}

.chat-photo-upload{position:relative;display:inline-flex;align-items:center;cursor:pointer;overflow:hidden}.chat-photo-upload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.chat-photo-upload:focus-within{outline:2px solid var(--focus-ring);outline-offset:2px}