/* ViaOn Conecta 0.4.4.14 - aparencia por usuario. Override ultimo, apos os estilos anteriores. */
:root{--user-font-family:Inter,'Segoe UI',system-ui,sans-serif;--user-chat-size:15px;--user-message-ink:#20252d;--user-wallpaper:none;--app-accent-contrast:#ffffff;--app-accent:#fb790f;--app-accent-deep:#ae4900;--app-accent-pale:#fff0e2;--app-accent-ring:#ffd7b7}
html,body,button,input,select,textarea,.bubble,.private-bubble,.private-message{font-family:var(--user-font-family)!important}
body:not(.is-admin) .bubble,body:not(.is-admin) .private-bubble,body:not(.is-admin) .private-message,body:not(.is-admin) .private-message-content{font-size:var(--user-chat-size)!important;color:var(--user-message-ink)}
body:not(.is-admin) #msg,body:not(.is-admin) #privateInput{font-size:var(--user-chat-size)!important}
body:not(.is-admin) #messages,body:not(.is-admin) #privateMessages{background-image:var(--user-wallpaper)!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;background-attachment:local!important}
/* Palette applied to the entire driver interface, not only the primary button. Status/danger red remains red for safety. */
body:not(.is-admin) .brand b span,body:not(.is-admin) .login h1 span,body:not(.is-admin) .more-hero strong span,body:not(.is-admin) #morePanel .more-links button:hover{color:var(--app-accent-deep)!important}
body:not(.is-admin) .primary,body:not(.is-admin) button.root-orange,body:not(.is-admin) #privateSend,body:not(.is-admin) #send,body:not(.is-admin) #chatTab.active,body:not(.is-admin) .private-alert-banner button:first-child,body:not(.is-admin) .rail-face.rail-me{background-color:var(--app-accent)!important;border-color:var(--app-accent)!important;color:var(--app-accent-contrast)!important}
body:not(.is-admin) .chat-nav button.active{box-shadow:inset 0 -3px var(--app-accent)!important;color:var(--app-accent-deep)!important}
body:not(.is-admin) .bubble.me,body:not(.is-admin) .private-bubble.mine{background:var(--app-accent-pale)!important;border-color:var(--app-accent-ring)!important}
body:not(.is-admin) .private-compose .private-ptt-open,body:not(.is-admin) .private-compose #privateSend,body:not(.is-admin) .send button,body:not(.is-admin) .private-rail .rail-unread,body:not(.is-admin) .rail-unread{background:var(--app-accent)!important;color:var(--app-accent-contrast)!important}
body:not(.is-admin) .rail-face.is-unread,body:not(.is-admin) .rail-item.has-unread .rail-face{border-color:var(--app-accent)!important;box-shadow:0 0 0 3px var(--app-accent-ring)!important}
body:not(.is-admin) .private-profile-open,body:not(.is-admin) .profile-picker,body:not(.is-admin) #privatePttOpen,body:not(.is-admin) .private-ptt-open{border-color:var(--app-accent-ring)!important}
body:not(.is-admin) .private-ptt-talk,body:not(.is-admin) #radioPanel #ptt{background:linear-gradient(150deg,var(--app-accent),var(--app-accent-deep))!important;color:var(--app-accent-contrast)!important;box-shadow:0 6px 18px var(--app-accent-ring)!important}
body:not(.is-admin) #radioPanel #ptt.active,body:not(.is-admin) .private-ptt-talk.transmitting{background:#bb3027!important;box-shadow:0 0 0 4px #ffdad8!important}
body:not(.is-admin) .profile-photo-card header small,body:not(.is-admin) .palette-top small,body:not(.is-admin) .appearance-section>label,body:not(.is-admin) .private-chat-header strong{color:var(--app-accent-deep)!important}
body:not(.is-admin) :is(input[type=range],input[type=checkbox]){accent-color:var(--app-accent)!important}
body:not(.is-admin) .private-profile-card .rail-face,body:not(.is-admin) .profile-preview .rail-face{border-color:var(--app-accent)!important}
/* sheet controls */
.appearance-section{margin:16px 0;padding:15px 0 0;border-top:1px solid #e9edf3}
.appearance-section>label{display:block;font-size:12px;font-weight:800;margin:11px 0 7px}
.appearance-section select{width:100%;border:1px solid #d5dae3;border-radius:12px;padding:12px;background:#f9fafc;color:#162334;font:inherit;font-size:13px}
.appearance-section input[type=range]{width:100%;accent-color:var(--app-accent)}
.appearance-color-control{display:flex;align-items:center;gap:10px}.appearance-color-control input{width:58px;height:43px;border:0;background:transparent}.appearance-color-control button{border:1px solid #ddd;border-radius:10px;background:#f8fafc;padding:10px;color:#263144}
.appearance-row{display:flex;justify-content:space-between;gap:10px;align-items:center}.appearance-row strong{font-size:14px}.appearance-row span{color:#748191;font-size:11px}
.appearance-categories{display:flex;gap:6px;overflow-x:auto;padding:10px 0;scrollbar-width:thin}
.appearance-categories button{flex:0 0 auto;border:1px solid #dce3ed;background:#fff;color:#293c51;border-radius:100px;padding:8px 12px;font-weight:700;font-size:11px}
.appearance-categories button.active{background:var(--app-accent)!important;color:var(--app-accent-contrast)!important;border-color:var(--app-accent)!important}
.appearance-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:300px;overflow:auto;scrollbar-width:thin}
.appearance-gallery button{border:2px solid transparent;background:#eef3f7;padding:0;border-radius:13px;overflow:hidden;aspect-ratio:2/3;min-width:0;position:relative;cursor:pointer}
.appearance-gallery button.selected{border-color:var(--app-accent);box-shadow:0 0 0 2px var(--app-accent-ring)}
.appearance-gallery img{display:block;width:100%;height:100%;object-fit:cover}.appearance-gallery button.selected:after{content:'✓';position:absolute;right:5px;top:5px;border-radius:50%;background:var(--app-accent);color:var(--app-accent-contrast);width:23px;height:23px;display:grid;place-items:center;font-weight:900}
.appearance-upload{display:block;text-align:center;border-radius:12px;border:1px solid var(--app-accent-ring);background:var(--app-accent-pale);color:var(--app-accent-deep);font-weight:900;padding:12px;position:relative;overflow:hidden}
.appearance-upload input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
#appearanceStatus{color:#748191;font-size:11px;line-height:1.5}.appearance-wall-actions{display:flex;justify-content:flex-end}.appearance-wall-actions button{background:#eef0f3;color:#223043;border:0;border-radius:10px;padding:10px;font-weight:750}
@media(max-width:420px){.palette-sheet{padding:15px!important}.appearance-gallery{max-height:230px}.appearance-section{margin:11px 0}}
html[data-theme=dark] .appearance-section{border-color:#4b5360}html[data-theme=dark] .appearance-section select,html[data-theme=dark] .appearance-color-control button{background:#202733;color:#fff;border-color:#3e4a5e}
html[data-theme=dark] .appearance-row span,html[data-theme=dark] #appearanceStatus{color:#bac3d0}
html[data-theme=dark] .appearance-categories button{background:#202733;color:#eee;border-color:#3b4454}
/* Os dois rádios PTT compartilham a mesma geometria visual. */
body:not(.is-admin)[data-ptt-sheet="open"] #radioPanel #ptt,
body:not(.is-admin) #privatePttSheet .private-ptt-talk{
 width:min(176px,48vw)!important;height:142px!important;min-height:142px!important;
 border-radius:23px!important;flex:0 0 auto!important;
}
body:not(.is-admin)[data-ptt-sheet="open"] #radioPanel #ptt,
body:not(.is-admin) #privatePttSheet .private-ptt-talk{
 background-image:linear-gradient(150deg,var(--app-accent),var(--app-accent-deep))!important;
}
/* Cores do tema por inteiro: barra de navegacao, opcoes, icones da marca e destaques. */
html body:not(.is-admin) .chat-nav #chatTab.active,
html body:not(.is-admin) .chat-nav button.active,
html body:not(.is-admin) .chat-nav #radioTab.active,
html body:not(.is-admin) .chat-nav #filesTab.active {
 background:var(--app-accent)!important;
 background-color:var(--app-accent)!important;
 border-color:var(--app-accent)!important;
 color:var(--app-accent-contrast)!important;
 box-shadow:0 2px 9px var(--app-accent-ring)!important;
}
html body:not(.is-admin) #roomHeaderToggle,
html body:not(.is-admin) #attachToggle,
html body:not(.is-admin) #quickPtt,
html body:not(.is-admin) #privateProfileGalleryButton,
html body:not(.is-admin) #privateProfileCameraButton {
 background:var(--app-accent-pale)!important;
 border-color:var(--app-accent-ring)!important;
 color:var(--app-accent-deep)!important;
}
html body:not(.is-admin) .mark img,
html body:not(.is-admin) .viaon-login-fox,
html body:not(.is-admin) .more-hero img,
html body:not(.is-admin) .private-profile-overlay .fox-logo {
 filter:var(--user-brand-filter,none);
}

/* v0.4.4.14: Fundo escolhido sempre substitui a marca d'agua antiga.
   O desenho anterior vinha do pseudo-elemento .messages::before. */
html[data-user-wallpaper="yes"] body:not(.is-admin)[data-conecta-view="chat"] #chatPanel #messages,
html[data-user-wallpaper="yes"] body:not(.is-admin) #messages,
html[data-user-wallpaper="yes"] body:not(.is-admin) #privateMessages,
html[data-user-wallpaper="yes"] body:not(.is-admin) .private-messages {
 background:#f8f8f8 var(--user-wallpaper) center center / cover no-repeat!important;
 background-image:var(--user-wallpaper)!important;
 background-size:cover!important;
 background-position:center center!important;
 background-repeat:no-repeat!important;
}
html[data-theme="dark"][data-user-wallpaper="yes"] body:not(.is-admin) #messages,
html[data-theme="dark"][data-user-wallpaper="yes"] body:not(.is-admin) #privateMessages {background-color:#17202c!important}
html[data-user-wallpaper="yes"] body:not(.is-admin) #messages::before,
html[data-user-wallpaper="yes"] body:not(.is-admin) .messages::before {
 content:none!important;display:none!important;background-image:none!important;opacity:0!important;
}