/* Costa Chat v3 | visual refinado, hierarquia próxima aos clientes modernos de comunidades */
:root{
 --rail:#1e1f22;--sidebar:#2b2d31;--main:#313338;--members:#2b2d31;
 --input:#383a40;--item-hover:#35373c;--selected:#404249;
 --line:#25262b;--text:#f2f3f5;--muted:#b5bac1;--faint:#949ba4;
 --blurple:#5865f2;--user-accent:#5865f2;--green:#23a559;--danger:#da373c;
 font-family:'gg sans','Noto Sans',Inter,'Segoe UI',system-ui,sans-serif;
}
body{background:var(--rail);font-size:14px}
.window-bar{height:31px;min-height:31px;background:#1c1d21;border-bottom:1px solid #15161a;color:#c6c9d0;padding:0 15px}
.window-title{font-size:12px;font-weight:750;letter-spacing:-.2px}
.window-right .demo-pill{font-size:10px;letter-spacing:.35px;font-weight:680}
.server-rail{width:73px;min-width:73px;background:var(--rail);gap:8px;padding-top:12px}
.rail-item{width:48px;height:48px;border-radius:50%;background:#313338;color:#dedfe7;font-size:17px;transition:border-radius .18s ease,background .18s ease,color .18s ease}
.rail-item:hover,.rail-item.active,.rail-item.selected{border-radius:16px;background:var(--user-accent)!important;color:white;transform:none}
.rail-item.add-server,.rail-item.discover{background:#313338;color:#23a559}
.rail-item.add-server:hover,.rail-item.discover:hover{background:#23a559!important;color:white}
.rail-item:before{background:#f5f5fa}
.rail-divider{background:#35363c;width:32px;height:2px;margin:0 auto 3px}
.sidebar{width:241px;min-width:241px;background:var(--sidebar);border-radius:9px 0 0 0}
.sidebar-head{height:49px;min-height:49px;color:#f2f3f5;padding:0 15px;box-shadow:0 1px 0 #1e1f22;font-size:15px;font-weight:750;letter-spacing:-.2px}
.sidebar-head:hover{background:#34363c}
.sidebar-scroll{padding:11px 8px 12px}
.sidebar-scroll::-webkit-scrollbar-thumb{background:#1b1c20}
.category-head{height:29px;margin:17px 0 1px;padding:0 6px;color:#949ba4;font-weight:850;font-size:11px;letter-spacing:.1px}
.category-head:hover{color:#dee0e6}
.channel-entry{height:34px;min-height:34px;font-size:14px;color:#959ba4;padding:0 9px;gap:7px;border-radius:4px;margin:0 0 2px;line-height:1.2}
.channel-entry:hover{background:#35373c;color:#d8dbe2}
.channel-entry.selected{background:#404249;color:#fff;font-weight:650}
.channel-entry.unread{color:#f2f3f5;font-weight:720}
.channel-entry svg{color:#808792}
.channel-entry.selected svg{color:#e1e2e6}
.nav-top-entry{font-size:14px;height:40px;border-radius:4px;margin:1px 0;color:#a9adb7}
.nav-top-entry.selected{background:#404249;color:#f7f7fb}
.dm-entry{border-radius:4px;min-height:43px;padding:5px 8px;gap:10px;color:#b8bbc6}
.dm-entry.selected{background:#404249;color:white}
.dm-name{font-size:14px}
.sidebar-search-btn{background:#1e1f22;margin:10px 10px 6px;height:30px;min-height:30px;color:#9398a4;font-size:11px;border-radius:4px}
.dm-list-heading{font-weight:800;letter-spacing:.15px;font-size:11px;margin-top:15px}
.sidebar-footer{background:#232428;border-top:1px solid #1e1f22;min-height:54px;padding:7px 7px}
.sidebar-footer .self-description b{font-size:12px}.sidebar-footer .self-description small{font-size:10px;color:#b5bac1}
.sidebar-footer .icon-btn{border-radius:6px;width:30px;height:30px;color:#b5bac1}
.sidebar-footer .icon-btn:hover{background:#404249;color:#fff}
.voice-inline-panel{flex:none;background:#232428;border-top:1px solid #1e1f22;padding:10px 12px;display:grid;gap:5px}
.voice-inline-title{font-size:12px;font-weight:800;color:#39b26d;display:flex;gap:7px;align-items:center}
.voice-inline-title i{display:block;width:7px;height:7px;background:#3ba55c;border-radius:50%}
.voice-inline-place{font-size:11px;color:#b5bac1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voice-inline-actions{display:flex;justify-content:space-between;gap:8px;margin-top:4px}
.voice-inline-open{background:#393b42;border-radius:4px;padding:5px 8px;font-size:11px;display:flex;align-items:center;gap:5px;font-weight:650}
.voice-inline-open:hover{background:#4b4e59}
.voice-inline-leave{color:#e24d58;padding:4px;border-radius:4px}.voice-inline-leave:hover{background:#463037}
.voice-users-under{padding:2px 2px 7px 27px;gap:3px}.voice-under-person{font-size:12px;min-height:27px;color:#b5bac1;border-radius:4px}
.voice-under-avatar{width:23px;height:23px}
.main-panel{background:var(--main)}
.chat-header{height:49px;min-height:49px;background:var(--main);border-bottom:1px solid #27282d;box-shadow:0 1px 1px #1d1e2240;padding:0 17px;gap:11px}
.chat-header>.header-label{font-size:15px;font-weight:750;letter-spacing:-.25px}
.chat-header>svg{color:#8d939f}
.chat-header .header-topic{font-size:12px;color:#aeb3bf;border-color:#484a53}
.chat-header-right .icon-btn{color:#b5bac1;border-radius:4px}
.chat-header-right .icon-btn:hover{color:#fff;background:#383a40}
.chat-header-right .icon-btn.active{color:#f2f3f5}
.header-search{border-radius:4px;background:#1e1f22;height:25px;padding:0 7px;min-width:135px}
.header-search input{font-size:11px;color:#dddfe5}
.chat-scroll{scroll-behavior:auto}
.chat-scroll::-webkit-scrollbar-track{background:#2b2d31}
.message-region{padding-bottom:13px}
.message{padding:3px 16px 3px 17px;gap:16px;min-height:32px}
.message:hover{background:#2e3035}
.message .msg-avatar{width:40px;height:40px;flex:0 0 40px;font-size:15px}
.message-main{max-width:100%;min-width:0}
.message-name-row{gap:10px;margin-bottom:3px}
.message-name{font-weight:750;color:#f2f3f5!important;font-size:14px}
.message-time{color:#949ba4;font-size:10px}
.message-body{font-size:14px;line-height:1.47;color:#dbdee1;white-space:pre-wrap;overflow-wrap:anywhere}
.message.compact-message{padding-top:2px;padding-bottom:2px;min-height:23px}
.compact-message .msg-avatar{visibility:hidden;height:15px}
.compact-message .message-name-row{display:none}
.compact-message .message-body{padding-top:0}
.message-actions{background:#2b2d31;border:1px solid #191a1d;border-radius:5px;top:-14px;right:17px;box-shadow:0 4px 16px #1116}
.message-actions button{height:30px;width:32px}.message-actions button:hover{background:#454750;color:#fff}
.channel-intro{padding:22px 18px 24px}
.channel-intro h1{font-size:25px;font-weight:850}.channel-intro p{font-size:14px}
.day-break{font-size:11px;color:#aeb1b8;margin:8px 16px}
.day-break:before,.day-break:after{background:#44464e}
.composer-container{padding:0 16px 17px;background:var(--main)}
.composer{background:#383a40;border-radius:8px;min-height:44px;box-shadow:none;padding:0 11px;gap:9px}
.composer textarea{color:#f2f3f5;font-size:14px;line-height:22px;max-height:180px}
.composer textarea::placeholder{color:#a3a8b2;opacity:1}
.composer .file-label{border-radius:50%;background:transparent;color:#b5bac1}
.composer .file-label:hover{background:#525661;color:white}
.composer .tool{border-radius:5px;color:#b5bac1}.composer .tool:hover{background:#454750;color:#fff}
.reply-bar{border-radius:6px 6px 0 0;background:#2b2d31}
.reaction{border:1px solid #464954;background:#2b2d31;border-radius:7px;font-weight:700}
.reaction.mine{background:#414675;border-color:#646de2}
.members-panel{width:240px;min-width:240px;background:var(--members);padding:18px 7px}
.members-group{margin-bottom:15px}
.member-group-heading{font-size:11px;color:#949ba4;font-weight:840;margin:3px 8px 7px;letter-spacing:.18px}
.member-entry{padding:6px 8px;min-height:43px;border-radius:4px;gap:10px}
.member-entry:hover{background:#35373c}
.member-details b{font-size:13px;color:#b5bac1;font-weight:680}
.member-details b.role-owner{color:#e7b769}.member-details b.role-admin{color:#bdadf6}
.member-details small{font-size:11px;color:#949ba4}
.friends-body{background:var(--main)}.friends-tab{font-size:13px;padding:6px 10px}
.friends-tab.active{background:#404249;color:#fff}.friends-tab.add{background:#248046;color:white}
.friend-row{border-top:1px solid #404249;padding:13px 6px;min-height:61px}
.friends-side{border-left:1px solid #27292e;background:var(--main)}
.modal-card{background:#313338;border-radius:9px;border:1px solid #45464f;box-shadow:0 24px 90px #000a}
.modal-backdrop{background:#0e0f11c5}.form-input{background:#1e1f22;border-color:#17181b;border-radius:4px}
.primary-btn{background:var(--user-accent);color:#fff;border-radius:4px}.primary-btn:hover{filter:brightness(.93)}
.auth-container{background:#313338;border-radius:8px}.auth-root{background:radial-gradient(ellipse at 15% 10%,#454782,transparent 50%),linear-gradient(135deg,#1b1d27,#101116)}
.auth-logo{background:var(--user-accent)}.auth-switch button.active{background:var(--user-accent)}
/* Voice stage: dark immersive room, participant tiles, bottom controls */
.call-experience{background:#232428;scrollbar-color:#464853 #232428}
.call-topbar{padding:20px 25px 6px;gap:15px}
.call-topbar h2{font-size:21px;font-weight:800;letter-spacing:-.3px;margin:5px 0}
.call-topbar p{font-size:12px;color:#aab0bb}
.call-kicker{color:#8d939f;font-size:10px;letter-spacing:1px}
.call-connected{border:0;background:#263c31;color:#79dba1;font-size:11px;padding:7px 10px}
.call-stage{background:#08090d;border:1px solid #43464f;border-radius:9px;width:min(100% - 48px,1450px);height:min(60vh,770px);margin:9px auto 12px;box-shadow:0 12px 36px #0005}
.call-stage-top{background:#131418;border-bottom:1px solid #2a2c33;padding:9px 13px}
.call-stage-top strong{font-size:12px}.call-stage-bottom{background:#15161a;color:#a2a7b1}
.stage-video{background:#07080a;object-fit:contain}
.stage-icon-btn:hover{background:#3b3d45}
.call-people-title{padding:8px 25px 12px}.call-people-title b{font-size:12px;color:#b5bac1;font-weight:800;text-transform:uppercase;letter-spacing:.25px}
.call-people-title span{font-size:11px}
.call-people{margin:0 25px;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));max-width:none}
.call-people.has-stage{grid-template-columns:repeat(auto-fill,minmax(174px,1fr))}
.call-tile{height:clamp(165px,28vh,300px);border:2px solid #18191d;border-radius:9px;background:#18191d}
.has-stage .call-tile{height:143px}
.call-tile:hover{border-color:#666a76;transform:none}
.call-tile.chosen{border-color:var(--user-accent)}
.tile-surface{background:linear-gradient(145deg,#303239,#1c1d22)}
.tile-avatar .member-avatar{width:76px;height:76px;font-size:24px}
.tile-footer{background:#18191dd9;position:absolute;left:8px;bottom:8px;min-height:27px;padding:5px 9px;border-radius:5px;max-width:calc(100% - 16px);gap:6px}
.tile-footer b{font-size:11px}.tile-footer svg{width:14px;height:14px}
.tile-live-badge{top:8px;right:8px;font-size:10px;letter-spacing:.25px;background:#e02e41}
.tile-watch{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;background:#15161bcc;color:#fff;padding:9px 14px;font-size:12px;font-weight:750;border:1px solid #797d88;border-radius:5px;opacity:0;transition:opacity .15s;pointer-events:none;white-space:nowrap}
.call-tile:hover .tile-watch,.call-tile:focus-visible .tile-watch{opacity:1}
.call-no-one{border:1px dashed #4a4c57;background:#2b2d31;border-radius:8px}
.call-bottom{padding:14px 15px 23px;gap:8px}
.call-toolbar{border:0;box-shadow:none;background:transparent;border-radius:0;gap:11px;padding:4px}
.call-tool{min-width:66px;gap:7px;font-size:11px;color:#c9cdd7}
.call-tool .tool-icon{width:51px;height:48px;border-radius:14px;background:#41434b;box-shadow:0 3px 8px #0002}
.call-tool:hover .tool-icon{background:#545760}
.call-tool.is-on .tool-icon{background:var(--user-accent);color:white}
.call-tool.danger .tool-icon{background:#da373c;color:white;min-width:72px;border-radius:15px}
.call-footnote{color:#8c919c;font-size:10px}
.call-join-btn{border-radius:5px;font-weight:750}
.stream-live{background:#da373c;font-size:10px}
/* local preference: optional wallpaper like customized community themes */
.wallpaper-enabled .workspace{background-color:#1c1d22;background-image:linear-gradient(#1b1c2160,#1b1c2160),var(--custom-wallpaper);background-repeat:no-repeat;background-position:center;background-size:cover}
.wallpaper-enabled .main-panel{background:#202127b5;backdrop-filter:blur(5px)}
.wallpaper-enabled .sidebar,.wallpaper-enabled .members-panel{background:#292b30dd;backdrop-filter:blur(13px)}
.wallpaper-enabled .chat-header{background:#24262ac9;backdrop-filter:blur(10px)}
.wallpaper-enabled .chat-scroll{background:#1e20254f}
.wallpaper-enabled .composer-container{background:#282a30b8;backdrop-filter:blur(9px)}
.wallpaper-enabled .message:hover{background:#3a3b4380}
.wallpaper-enabled .call-experience{background:#202126d4;backdrop-filter:blur(7px)}
.appearance-colors{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 19px}
.appearance-color{width:37px;height:37px;border-radius:50%;background:var(--swatch);border:3px solid transparent;box-shadow:inset 0 0 0 2px #ffffff20;display:grid;place-items:center}
.appearance-color.chosen{border-color:white;box-shadow:0 0 0 2px #5865f240}
.appearance-help{font-size:12px;color:#b5bac1;line-height:1.55}
.appearance-upload{display:flex;gap:10px;align-items:center;padding:11px;border-radius:6px;background:#232428;border:1px dashed #555761;margin:10px 0}
.appearance-upload input{font-size:12px;max-width:100%;width:100%;color:#bfc2ca}
.appearance-settings-shortcut{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#25262c;border-radius:5px;padding:12px 13px;margin:13px 0 4px;font-weight:700;font-size:12px;text-align:left;color:#e2e4e8}
.appearance-settings-shortcut:hover{background:#3c3f47}
/* Clean scrollbar with scrolling preserved */
::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-thumb{background:#1a1b20;border-radius:8px}::-webkit-scrollbar-thumb:hover{background:#545761}
.light .workspace{background:#f2f3f5}.light .main-panel,.light .chat-header,.light .composer-container{background:var(--main)}
.light .member-details b{color:#43454f}.light .message-body{color:#31333a}.light .message-name{color:#30343d!important}
.light .call-experience{background:#ebedf2;color:#24262c}.light .call-topbar p{color:#707480}
@media(max-width:1100px){.members-panel{width:207px;min-width:207px}.sidebar{width:227px;min-width:227px}}
@media(max-width:950px){.members-panel{display:none}.sidebar{width:237px;min-width:237px}.call-stage{height:50vh}}
@media(max-width:700px){
 .window-bar{height:28px;min-height:28px}.server-rail{width:60px;min-width:60px}.rail-item{height:44px;width:44px}
 .sidebar{width:min(265px,calc(100vw - 77px));min-width:0;left:60px}
 .chat-header{height:48px;min-height:48px;padding:0 10px;gap:7px}
 .header-search{min-width:0}.message{padding:4px 9px;gap:10px}.message .msg-avatar{height:34px;width:34px;flex:0 0 34px}
 .message-body{font-size:13px}.message-name-row{gap:6px}.message-name{font-size:13px}
 .composer-container{padding:0 10px 12px}.composer{min-height:43px;padding:0 9px}
 .call-topbar{padding:14px 13px 6px}.call-topbar h2{font-size:17px}.call-topbar p{font-size:11px}
 .call-stage{width:calc(100% - 20px);height:43dvh;min-height:200px;margin:8px 10px 13px}
 .call-people-title{padding:8px 12px 10px}.call-people{margin:0 12px;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
 .call-people.has-stage{grid-template-columns:repeat(2,minmax(0,1fr))}.call-tile,.has-stage .call-tile{height:150px}
 .call-bottom{padding:12px 6px 16px}.call-toolbar{gap:4px}.call-tool{min-width:48px;font-size:9px}.call-tool .tool-icon{width:42px;height:42px}
 .tile-watch{display:none}
}