/* Juliano Atendimento • identidade visual 2.0 */
/* Camadas: fundação em base.css; acabamento institucional aqui. */
:root{--navy:#081a30;--navy2:#102b49;--blue:#075dc6;--cyan:#159ac9;--gold:#f5bd35;--ink:#162b44;--sub:#6c8098;--line:#e1e9f2;--surface:#f4f7fb;font-family:Inter,"Segoe UI",system-ui,sans-serif}
body{background:var(--surface)}
button,input,select{transition:border-color .18s,box-shadow .18s,background .18s,transform .18s}
button{border-radius:11px;font-weight:700}
button:active:not(:disabled){transform:translateY(1px)}
input,select{min-height:43px;border-radius:11px}
header{height:88px;min-height:88px;background:linear-gradient(105deg,#081c33 0%,#102c4c 72%,#123957 100%);border-bottom:3px solid var(--gold);padding:15px clamp(18px,2.5vw,42px);box-shadow:0 5px 24px #081d3318}
.brandwrap{gap:17px}.brandLogo{width:74px;height:60px;object-fit:contain}.brand{font-size:clamp(15px,1.18vw,20px);letter-spacing:-.45px}.brand small{font-size:10px;letter-spacing:1.7px;color:#9fc3df;margin-top:8px}
header .toolbar{gap:12px}.who{font-weight:600;color:#c7dbeb}.topActions button{border:1px solid #345c7c;background:#173b5c;padding:10px 16px}.topActions button:first-of-type{background:#1263be;border-color:#438ee0}
.layout{height:calc(100dvh - 88px);grid-template-columns:clamp(290px,23vw,354px) minmax(0,1fr)}
aside{border-right:1px solid #e0e8f1;box-shadow:8px 0 28px #0d315008;z-index:1}
.asideTop{gap:16px;padding:25px 19px 19px;background:#fff}.asideTitle strong{font-size:19px;letter-spacing:-.3px}.asideTitle span{letter-spacing:1.6px;color:#b88612}
.stats{gap:10px}.stat{padding:14px 12px;border-radius:13px;border:1px solid #e0e8f3;background:#f7faff}.stat b{font-size:25px;letter-spacing:-.8px}.stat span{font-size:11px}
#search{background:#f9fbfe;border-color:#e0e7f0;padding-left:15px}
.filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;border-radius:12px;background:#eef3f9;padding:5px}
.filters button{min-width:0;padding:10px 3px;border-radius:8px;font-size:11px;background:transparent;color:#4d6783;box-shadow:none!important}
.filters button.selected{background:#fff;color:#0b3a70;box-shadow:0 2px 8px #0d325017!important}
#newConversation{min-height:46px;background:#075fc9;box-shadow:0 5px 12px #086ad51c}
.itemList{padding:7px 8px 18px;background:#fff}
.item{margin:5px 0;padding:16px 13px;border:1px solid transparent;border-left:3px solid transparent;border-radius:12px}
.item:hover{background:#f4f8fd;border-color:#e7eef7}
.item.active{background:#edf5ff;border-color:#d8e9fc;border-left-color:#086bd8;box-shadow:0 2px 10px #0a4a9110}
.itemTop strong{font-size:13px}.preview{margin:8px 0;font-size:12px}.statusLine{font-size:11px}
.pill{padding:5px 9px;font-size:10px}
.main{background:#f5f8fc}
.roomhead{background:#fff;min-height:98px;padding:19px clamp(16px,2.5vw,36px);border-bottom:1px solid #e3eaf3;box-shadow:0 5px 17px #18365207}
.roomhead strong{font-size:20px;letter-spacing:-.45px}.roomhead .muted{margin-top:3px}
.roomhead .toolbar{gap:9px;max-width:100%}.roomhead .toolbar select{flex-basis:185px;width:185px}
.roomhead .toolbar button{padding:11px 15px}
.messages{padding:35px clamp(20px,5vw,90px);gap:18px;background-color:#f3f7fc;background-image:radial-gradient(#96b4d11a 1px,transparent 1px);background-size:23px 23px}
.bubble{max-width:min(78%,630px);padding:16px 18px;border-radius:16px;border:1px solid #e4ebf3;box-shadow:0 6px 24px #1839560b}
.bubble.mine{background:#e2f0ff;border-color:#c8e1fa}.bubble small{font-size:11px;color:#285c8f;font-weight:750}
.bubble img,.bubble video{border-radius:12px;max-width:100%}
.composer{padding:17px clamp(15px,3vw,42px);gap:12px;border-top:1px solid #e0e8f1;box-shadow:0 -5px 24px #173a4f08}
.composer input:not([type=file]){min-width:0;background:#f7f9fc;border-color:#dce7f1}
.composer button{min-height:44px}
.composer #attachMedia{border:1px solid #d6e5f1}
.empty{color:#7890a8}
dialog{border-radius:20px;border-top:4px solid var(--gold);padding:29px;box-shadow:0 28px 100px #081e355c}
dialog h3{font-size:20px;letter-spacing:-.35px}
#waDialog .waActions{gap:10px}
body:has(.login:not(.hidden)){background:radial-gradient(ellipse at 13% 13%,#1b4f79 0%,#102e4c 40%,#07182c 100%)}
body:has(.login:not(.hidden)):before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.36;background:radial-gradient(circle at 80% 80%,#e6aa2b30,transparent 30%),linear-gradient(135deg,transparent 46%,#ffffff05 46%,#ffffff05 47%,transparent 47%)}
.login{width:min(470px,calc(100vw - 32px));padding:41px clamp(24px,4vw,43px) 43px;margin:clamp(40px,10vh,110px) auto 0;border-radius:23px;border-top:4px solid var(--gold);box-shadow:0 35px 110px #0006}
.login .loginbrand{margin-bottom:20px}.login .brandLogo{height:130px;width:min(255px,100%)}.login h1{font-size:27px;letter-spacing:-.8px}.login p{margin-bottom:28px}.login label{text-transform:none;font-weight:700}
.login input{background:#f9fbfe;min-height:48px}.login .stack button{min-height:49px;font-size:14px;margin-top:3px}
@media(max-width:1100px){header{padding:12px 18px}.layout{grid-template-columns:285px minmax(0,1fr)}.roomhead{gap:12px}.roomhead .toolbar select{flex-basis:150px;width:150px}.brand{font-size:15px}.who{display:none}}
@media(max-width:760px){header{height:77px;min-height:77px}.layout{height:calc(100dvh - 77px);grid-template-columns:220px minmax(0,1fr)}.brandLogo{width:52px;height:45px}.brand{font-size:12px;white-space:normal}.brand small{font-size:9px}.asideTop{padding:14px 10px;gap:11px}.itemList{padding:5px}.item{padding:12px 8px}.stats{gap:4px}.stat{padding:9px 6px}.stat b{font-size:18px}.filters{grid-template-columns:repeat(2,minmax(0,1fr))}.roomhead{padding:12px}.messages{padding:18px 13px}.bubble{max-width:92%}.composer{padding:10px;flex-wrap:wrap}.composer input:not([type=file]){flex:1 0 100%}}
@media(max-width:500px){.layout{grid-template-columns:118px minmax(0,1fr)}.asideTop{padding:10px 5px}.asideTitle strong{font-size:13px}.asideTitle span{display:none}.stats{grid-template-columns:1fr}.stat{padding:6px 8px}.stat:nth-child(n+2){display:none}.filters button{font-size:9px}.itemTop{flex-wrap:wrap}.brand{font-size:11px}.topActions button{padding:8px}.roomhead strong{font-size:16px}.bubble{min-width:0}.composer button{font-size:12px;padding:9px}}

/* Tema noturno Juliano — somente apresentação, sem alterar funcionalidades */
.themeToggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#1b466b!important;border:1px solid #3b6584!important;color:#f7f9fc!important;white-space:nowrap}
.themeToggle:hover{background:#285b83!important}
html[data-theme="dark"]{color-scheme:dark;--navy:#071726;--navy2:#142e47;--ink:#e6effa;--sub:#98adc4;--line:#29415b;--surface:#0c1929;background:#0c1929;color:#e6effa}
html[data-theme="dark"] body{background:#0c1929;color:#e6effa}
html[data-theme="dark"] header{background:linear-gradient(105deg,#061321,#0c253b 75%,#122e45);border-bottom-color:#eab43a}
html[data-theme="dark"] aside,html[data-theme="dark"] .asideTop,html[data-theme="dark"] .itemList{background:#112237;border-color:#29415b}
html[data-theme="dark"] .asideTitle strong,html[data-theme="dark"] .conversationHeading strong,html[data-theme="dark"] .item strong{color:#e6effa}
html[data-theme="dark"] .asideTitle span{background:#403414;color:#f4ca67}
html[data-theme="dark"] .stat{background:#1a3049;border-color:#304760}
html[data-theme="dark"] .stat b{color:#e9f4ff}
html[data-theme="dark"] .stat span,html[data-theme="dark"] .muted,html[data-theme="dark"] .statusLine{color:#9db2c8}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:#152a41;color:#eff5fb;border-color:#37516a}
html[data-theme="dark"] input::placeholder{color:#95aabd}
html[data-theme="dark"] #search,html[data-theme="dark"] .composer input#message{background:#152b42;border-color:#314a63;color:#e6effa}
html[data-theme="dark"] .filters{background:#0c1e31}
html[data-theme="dark"] .filters button{color:#bacbdd}
html[data-theme="dark"] .filters button.selected{background:#215482;color:#fff}
html[data-theme="dark"] #conversationList{background:#0e2033}
html[data-theme="dark"] #conversationList .item{background:#162c42;border-color:#223a52;box-shadow:none}
html[data-theme="dark"] #conversationList .item:hover{background:#1d3b58}
html[data-theme="dark"] #conversationList .item.active{background:#193e63;border-left-color:#4ca6ff;border-top-color:#35618a;border-right-color:#35618a;border-bottom-color:#35618a}
html[data-theme="dark"] .contactAvatar{background:linear-gradient(135deg,#1c5d86,#398db7)}
html[data-theme="dark"] .conversationHeading strong,html[data-theme="dark"] .conversationPreview{color:#e0ecfa}
html[data-theme="dark"] .conversationId,html[data-theme="dark"] .conversationFooter{color:#9fb5c9}
html[data-theme="dark"] .conversationFooter{border-top-color:#34506a}
html[data-theme="dark"] .conversationFooter .responsibilityLabel{color:#96d0ff}
html[data-theme="dark"] .main,html[data-theme="dark"] .messages{background-color:#0e1d2e}
html[data-theme="dark"] .messages{background-image:radial-gradient(#3c597259 .8px,transparent .8px)}
html[data-theme="dark"] .roomhead,html[data-theme="dark"] .composer{background:#14283d;border-color:#30465c;box-shadow:none}
html[data-theme="dark"] .roomhead strong{color:#eaf3fe}
html[data-theme="dark"] .chatMessage.received,html[data-theme="dark"] .bubble:not(.mine){background:#1d344a;border-color:#335069;color:#f1f6fd}
html[data-theme="dark"] .chatMessage.mine,html[data-theme="dark"] .bubble.mine{background:#17446c;border-color:#2b6595;color:#f1f6fd}
html[data-theme="dark"] .messageSender,html[data-theme="dark"] .messageText{color:#eaf4ff}
html[data-theme="dark"] .messageAvatar{background:#2f4c67;color:#eaf4ff}
html[data-theme="dark"] .messageType{background:#2a425a;color:#c4d5e8}
html[data-theme="dark"] .messageFooter{color:#a5bbd0}
html[data-theme="dark"] .audioCard,html[data-theme="dark"] .mine .audioCard,html[data-theme="dark"] .documentMedia{background:#213b55;border-color:#355775;color:#e5f0ff}
html[data-theme="dark"] .audioTimes,html[data-theme="dark"] .documentInfo span{color:#acc0d3}
html[data-theme="dark"] .audioSpeed,html[data-theme="dark"] .documentIcon{background:#315674;color:#e0effb}
html[data-theme="dark"] .audioSeek{background:linear-gradient(to right,#51a5f0 var(--progress,0%),#58748d var(--progress,0%))}
html[data-theme="dark"] .audioWaveBar{background:#729ab9}
html[data-theme="dark"] .documentInfo strong{color:#e6effa}
html[data-theme="dark"] .secondary,html[data-theme="dark"] #attachMedia{background:#2a4964;color:#ecf5ff}
html[data-theme="dark"] .secondary:hover,html[data-theme="dark"] #attachMedia:hover{background:#345a79}
html[data-theme="dark"] dialog:not(.imagePreviewDialog){background:#192d43;color:#edf5fd;border-color:#e9ad2b}
html[data-theme="dark"] dialog label{color:#bfd1e5}
html[data-theme="dark"] dialog .muted{color:#adc1d5}
html[data-theme="dark"] #waDiagOutput{background:#10243a!important;color:#e1effb}
html[data-theme="dark"] .login{background:#172d44;box-shadow:0 25px 90px #0008}
html[data-theme="dark"] .login h1{color:#f2f6ff}
html[data-theme="dark"] .login p{color:#b2c7da}
html[data-theme="dark"] .login input{background:#11263a;color:#eff7ff;border-color:#39536e}
html[data-theme="dark"] .empty{color:#a8bed1}

/* Legibilidade dos botões do cabeçalho no tema claro e noturno */
.topActions button.secondary,.topActions #waConnect,.topActions #requests{
 background:#1a4e7b!important;
 border:1px solid #3975a6!important;
 color:#f2f8ff!important;
 opacity:1;
}
.topActions button.secondary:hover,.topActions #waConnect:hover,.topActions #requests:hover{background:#24669c!important;color:#fff!important}
.topActions #waConnect:disabled,.topActions #requests:disabled{opacity:.55}
html[data-theme="dark"] .topActions #waConnect,html[data-theme="dark"] .topActions #requests{background:#204d74!important;color:#eef7ff!important}

/* Encaminhamento de mensagens */
.messageFooter .forwardMessage{background:transparent;color:#547c9a;border:1px solid transparent;box-shadow:none;padding:3px 7px;margin-right:auto;font-size:10px;font-weight:700;border-radius:7px}
.messageFooter .forwardMessage:hover{background:#d6e9f8;color:#0b5d9e;border-color:#b3d1ea;box-shadow:none}
html[data-theme="dark"] .messageFooter .forwardMessage{color:#9bc8e8}
html[data-theme="dark"] .messageFooter .forwardMessage:hover{background:#325674;color:#fff;border-color:#527a9a}

.forwardDialog{width:min(440px,94vw);padding:26px;border-radius:18px}
.forwardDialogHead h3{margin:0 0 8px}.forwardDialogHead p{margin:0 0 21px;line-height:1.5}
.forwardDialog form{display:grid;gap:11px}
.forwardDialog select{width:100%;max-width:100%;font-size:14px}
.forwardDialogActions{justify-content:flex-end;margin-top:15px}
.forwardDialogActions button{min-width:115px}

/* Atendimento interno: equipe e identificação de funcionários */
.filters{flex-wrap:wrap}
.filters [data-filter="employees"]{white-space:nowrap}
.employeeLabel,.kindTag{display:inline-block;border-radius:6px;padding:3px 7px;background:#244e70;color:#d5ecff;font-size:10px;font-weight:800;letter-spacing:.5px}
.kindTag{margin-top:6px}
.employeeDialog{width:min(490px,94vw);max-height:85vh;overflow-y:auto;padding:24px;border-radius:18px}
.employeeModalHead{display:flex;align-items:center;justify-content:space-between;gap:14px}
.employeeModalHead h3{margin:0}
.employeeModalHead button{width:38px;height:36px;padding:0}
.employeeDialog>p{line-height:1.5;margin:10px 0 20px}
.employeeForm{display:grid;gap:13px}
.employeeForm label{display:grid;gap:7px;font-size:13px;font-weight:650}
.employeeForm input{width:100%;box-sizing:border-box}
.employeeForm button{justify-self:end}
.employeeDialog h4{margin:22px 0 12px}
.employeeList{display:grid;gap:8px}
.employeeEntry{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line,#d7e1ed);border-radius:10px;padding:11px 12px}
.employeeInfo{display:grid;gap:4px;min-width:0;overflow-wrap:anywhere}
.employeeInfo .muted{font-size:12px}
.employeeEntry button{flex-shrink:0}
html[data-theme="dark"] .employeeEntry{border-color:#37516b}
html[data-theme="dark"] .employeeLabel,html[data-theme="dark"] .kindTag{background:#235777;color:#dff2ff}

/* Identificação de veículos de clientes */
.vehicleFields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:7px}
.vehicleFields label{display:grid;gap:5px;font-size:12px}
.vehicleFields input{min-width:0;width:100%;box-sizing:border-box}
.vehicleDetails{margin-top:5px;font-size:12px;color:#9fc9e9}
#editVehicle{margin-top:6px;padding:4px 9px;font-size:11px}
.vehicleSummary{font-size:11px;color:#9dc9e8;padding-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){.vehicleFields{grid-template-columns:1fr}}