@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
:root{--j-navy:#081a2c;--j-deep:#10263d;--j-blue:#0762ce;--j-gold:#eab43a;--j-ink:#152d45;--j-muted:#72869b;--j-line:#dce6f0;--j-bg:#eff4f9;--j-panel:#fff;--j-soft:#f4f8fc;--j-field:#f5f9fd;--j-received:#e8f0f8;--j-sent:#d8eaff}
html[data-theme=dark],body.dark{--j-ink:#eaf2fb;--j-muted:#9ab1c9;--j-line:#24415e;--j-bg:#06192c;--j-panel:#0a2037;--j-soft:#102b47;--j-field:#102a44;--j-received:#193854;--j-sent:#07519e}
body,button,input,select,textarea{font-family:'IBM Plex Sans',sans-serif}body{background:var(--j-bg);color:var(--j-ink)}button{border-radius:6px}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--j-gold);outline-offset:2px}
.appHeader{height:94px;min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px clamp(17px,2vw,32px);background:#06172a!important;border-bottom:4px solid var(--j-gold);color:#f2f7fc}
.appHeader .brandwrap{display:flex;align-items:center;gap:18px;min-width:0}.appHeader .brandLogo{width:98px;height:70px;object-fit:contain}.appHeader .brand{font-family:'Exo 2',sans-serif;font-size:clamp(15px,1.55vw,23px);font-weight:800;line-height:1.16;max-width:430px;color:#f2f7fc}.appHeader .brand small{display:block;margin-top:7px;font:600 10px 'IBM Plex Sans',sans-serif;letter-spacing:2px;color:#9db3c8}.topActions{display:flex;gap:12px;align-items:center}.topActions button{height:45px}
.connectionChip,.headerChip,.profileButton{display:flex;align-items:center;gap:9px;padding:7px 13px;background:#102c48;color:#eaf3fb;border:1px solid #284761;text-align:left}.connectionChip small,.headerChip small{display:block;color:#a9c1d4;font-size:11px}.connectionChip b{font-size:12px}.connectionLight{display:inline-block;width:9px;height:9px;border-radius:50%;background:#d29e45}.profileButton #userInitial{display:grid;place-items:center;background:#0762ce;border-radius:50%;width:27px;height:27px;color:#fff}.profileButton #who{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.userMenu,.moreMenu{position:relative}.profileMenu,.roomMoreMenu{position:absolute;z-index:50;top:calc(100% + 8px);right:0;background:var(--j-panel);border:1px solid var(--j-line);padding:9px;box-shadow:0 14px 32px #06182c38;border-radius:8px;min-width:200px;color:var(--j-ink)}.profileMenu button,.roomMoreMenu button{display:block;width:100%;margin:4px 0;text-align:left}.logoutButton{background:transparent;color:#f0f5fa;border:1px solid #33526a;padding:8px 15px}
#app .layout{display:grid;grid-template-columns:minmax(330px,370px) minmax(0,1fr);height:calc(100dvh - 94px);min-height:450px;overflow:hidden;background:var(--j-bg)}#app .layout>aside{width:auto;min-width:0;border-right:1px solid var(--j-line);background:var(--j-panel);display:flex;flex-direction:column;overflow:hidden}
#app .asideTop{padding:20px 18px 13px;gap:15px;border-bottom:1px solid var(--j-line)}.asideTitle strong{font-family:'Exo 2',sans-serif;letter-spacing:1px;font-size:18px;color:var(--j-ink)}#newConversation{background:var(--j-blue);color:white;font-weight:700;width:100%;padding:11px;border:none;box-shadow:0 4px 11px #0762ce23}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.stats .stat{padding:12px 8px;background:var(--j-soft);border:1px solid var(--j-line);border-radius:6px;text-align:center}.stats .stat b{font:700 24px 'Exo 2',sans-serif;color:var(--j-ink)}.stats .stat span{font-size:11px;color:var(--j-muted);display:block}.searchWrap{position:relative}.searchWrap span{position:absolute;left:13px;top:9px;font-size:24px;color:var(--j-muted)}.searchWrap input{width:100%;box-sizing:border-box;padding:12px 10px 12px 39px;background:var(--j-field);color:var(--j-ink);border:1px solid var(--j-line);border-radius:5px}
.filters{display:flex;gap:0;border-bottom:1px solid var(--j-line);align-items:stretch;justify-content:space-between}.filters button{min-width:0;flex:1;border:0;background:transparent;color:var(--j-muted);font-size:12px;padding:11px 2px;position:relative}.filters button.selected{color:var(--j-blue);font-weight:700}.filters button.selected:after{content:'';height:3px;background:var(--j-blue);position:absolute;bottom:-1px;left:3px;right:3px}.listTitle{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:700;letter-spacing:1px;color:var(--j-muted)}.listTitle button{font-size:11px;padding:5px 8px}.itemList{overflow:auto;flex:1;background:var(--j-panel)}.itemList>*,#conversationList>div{border-radius:0!important}#conversationList .selected{border-left:3px solid var(--j-blue);background:var(--j-soft)}#conversationList .item,#conversationList .conversation{border-bottom:1px solid var(--j-line);padding:12px 16px}
#app .main{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--j-bg)}.roomhead{flex:none;background:var(--j-panel);border-bottom:1px solid var(--j-line);padding:18px 24px 0}.roomTop{display:flex;align-items:center;gap:13px;padding-bottom:17px}.roomAvatar{width:47px;height:47px;flex:none;border-radius:8px;display:grid;place-items:center;font:800 20px 'Exo 2',sans-serif;background:var(--j-deep);color:#fff}.roomIdentity{min-width:0;flex:1}.roomNameLine{display:flex;align-items:center;gap:11px;flex-wrap:wrap}.roomNameLine strong{font:800 clamp(17px,1.4vw,22px) 'Exo 2',sans-serif}.roomStatus{border-radius:4px;padding:4px 8px;color:#19704e;background:#e6f7ee;font-size:11px;font-weight:700}.roomIdentityMeta{display:flex;flex-wrap:wrap;gap:15px;font-size:12px;color:var(--j-muted);margin-top:4px}.roomActions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.roomActions button{padding:9px 13px}.roomActions #statusButton{background:var(--j-blue);color:#fff}.roomMoreMenu label{font-size:12px;display:block}.roomMoreMenu select{display:block;width:100%;margin:6px 0}.backToList{display:none}
.roomMeta{display:flex;flex-wrap:wrap;gap:26px;align-items:center;padding:13px 0;border-top:1px solid var(--j-line);font-size:11px;color:var(--j-muted)}.metaField{display:flex;gap:8px;align-items:center}.metaField span b{display:block;font-size:12px;margin-top:4px;color:var(--j-ink);font-weight:600}.vehicleGroup{display:flex;align-items:center;gap:9px;min-width:180px}.vehicleDetails{font-size:12px;color:var(--j-ink)}.vehicleDetails small{color:var(--j-muted)}#editVehicle{font-size:11px;padding:5px 7px}.metaIcon{font-size:19px;color:var(--j-blue)}
#messages{flex:1;min-height:0;overflow-y:auto;padding:25px clamp(15px,4vw,55px);background-color:var(--j-bg);background-image:radial-gradient(circle at 75% 25%,#7fa5bd12 0,transparent 45%)}#messages .message{max-width:min(75%,680px)}#messages .bubble{border-radius:9px;background:var(--j-received);color:var(--j-ink);box-shadow:none}#messages .mine .bubble,#messages .sent .bubble{background:var(--j-sent)}#messages img{max-width:100%;height:auto;object-fit:contain}.composerTabs{border-top:1px solid var(--j-line);background:var(--j-panel);padding:9px 25px 0}.composerTab{display:inline-block;border-bottom:2px solid var(--j-blue);color:var(--j-blue);font-size:12px;font-weight:700;padding:5px 10px 11px}.composer{background:var(--j-panel);padding:13px 20px 18px;display:flex;gap:10px;align-items:center;border-top:1px solid var(--j-line)}.composer #message{flex:1;min-width:0;background:var(--j-field);color:var(--j-ink);border:1px solid var(--j-line);padding:13px}.composer #sendButton{background:var(--j-blue);color:white}.composer button{padding:12px 18px}
@media(max-width:1100px){#app .layout{grid-template-columns:310px minmax(0,1fr)}.roomhead{padding:13px 16px 0}.roomMeta{gap:14px}.roomActions{gap:5px}.appHeader .brand{font-size:16px}.appHeader .brandLogo{width:75px}.headerChip small,.profileButton #who{display:none}}
@media(max-width:760px){.appHeader{height:75px;min-height:75px;padding:8px 12px}.appHeader .brandLogo{width:53px;height:48px}.appHeader .brand{font-size:12px}.appHeader .brand small{font-size:8px;letter-spacing:1px}.topActions{gap:5px}.topActions button{padding:6px}.logoutButton,.headerChip,.profileButton #who{display:none!important}#app .layout{display:block;height:calc(100dvh - 75px);position:relative}#app .layout>aside,#app .layout>.main{position:absolute;inset:0;width:100%;height:100%}#app .layout>.main{display:none}body.mobileRoomOpen #app .layout>aside{display:none}body.mobileRoomOpen #app .layout>.main{display:flex}.backToList{display:inline-flex}.roomTop{flex-wrap:wrap}.roomActions{width:100%;justify-content:flex-start}.roomMeta{gap:10px}.roomIdentityMeta{gap:8px}.roomNameLine strong{font-size:17px}.composer{padding:10px}.composer button{padding:10px}#messages{padding:16px}}
.hidden{display:none!important}

/* Layout corrections 2026-10-22 — live screenshot review */
@media(min-width:761px){
  .appHeader .topActions{flex-shrink:0;min-width:0}
  .appHeader .brandwrap{flex:1 1 auto;min-width:0}
  .appHeader .brand{max-width:none;font-size:clamp(16px,1.35vw,24px)}
  #app .roomhead{padding:16px clamp(16px,1.5vw,28px) 14px;display:grid;grid-template-columns:minmax(0,1fr);gap:13px;min-height:0}
  #app .roomTop{display:grid;grid-template-columns:auto minmax(180px,1fr) auto;align-items:center;gap:14px;padding:0}
  #app .roomIdentity{min-width:0}
  #app .roomActions{justify-content:flex-end;flex-wrap:wrap;gap:8px}
  #app .roomMeta{display:grid;grid-template-columns:minmax(200px,1.6fr) repeat(3,minmax(105px,1fr));gap:10px;margin:0;padding:12px 0 0;align-items:center;border-top:1px solid var(--j-line)}
  #app .roomMeta .vehicleGroup{min-width:0;gap:8px}
  #app .roomMeta .metaField{min-width:0;border-left:1px solid var(--j-line);padding-left:12px}
  #app .roomMeta .metaField span{min-width:0;overflow-wrap:anywhere}
  #app .roomMeta .metaField b{overflow:hidden;text-overflow:ellipsis}
}
.appHeader .connectionChip,.appHeader .headerChip,.appHeader .profileButton{display:flex;align-items:center;justify-content:center;min-height:48px;height:auto;box-sizing:border-box;gap:10px;border-radius:8px;line-height:1.15}
.appHeader .connectionChip{text-align:left;justify-content:flex-start;min-width:135px}
.appHeader .connectionChip>span:last-child{display:flex;flex-direction:column;justify-content:center;min-width:0}
.appHeader .connectionChip b,.appHeader .headerChip b{line-height:1.2}
.appHeader .connectionChip small,.appHeader .headerChip small{line-height:1.25;margin-top:3px}
.appHeader .connectionLight{flex:0 0 11px;width:11px;height:11px}
#app .asideTop{display:grid;gap:12px;padding-bottom:0}
#app .searchWrap{position:relative;min-width:0}
#app .searchWrap span{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:0;line-height:1;width:17px;height:17px;pointer-events:none}
#app .searchWrap span::before{content:'';position:absolute;top:1px;left:1px;border:2px solid var(--j-muted);border-radius:50%;width:10px;height:10px}
#app .searchWrap span::after{content:'';position:absolute;width:8px;height:2px;left:11px;top:13px;background:var(--j-muted);transform:rotate(45deg);transform-origin:left center;border-radius:1px}
#app .searchWrap input{box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:11px 12px 11px 43px;font-size:12px;line-height:20px}
#app .filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:0;border-bottom:1px solid var(--j-line);margin-top:1px}
#app .filters button{width:100%;min-width:0;padding:11px 2px 12px;text-align:center;border-radius:0;background:transparent;box-shadow:none;white-space:nowrap;font-size:11px}
#app .filters button.selected{background:transparent;color:var(--j-blue);box-shadow:none}
#app .listTitle{margin:0 -18px;padding:11px 18px 12px;min-height:44px;display:flex;align-items:center;gap:10px;background:var(--j-soft);font-size:11px;letter-spacing:.5px}
#app .listTitle button{margin-left:auto;flex-shrink:0;border:1px solid var(--j-line);border-radius:5px;padding:6px 9px;background:var(--j-panel);color:var(--j-ink);font-size:11px}
#app #conversationList{padding-top:4px}
@media(min-width:761px) and (max-width:1320px){
  #app .roomTop{grid-template-columns:auto minmax(0,1fr)}
  #app .roomActions{grid-column:1/-1;justify-content:flex-start}
  #app .roomMeta{grid-template-columns:repeat(3,minmax(0,1fr))}
  #app .roomMeta .vehicleGroup{grid-column:1/-1}
}
@media(max-width:760px){
  .appHeader .connectionChip{min-width:0;min-height:40px}
  #app .roomhead{display:block;padding:12px}
  #app .roomMeta{gap:10px}
  #app .searchWrap input{padding-left:43px}
  #app .listTitle{margin:0 -12px;padding:10px 12px}
}


/* Cabeçalho da conversa — identificação e veículo, 2026-10-22 */
#app .roomhead{background:var(--j-panel);border-bottom:1px solid var(--j-line)}
#app .roomTop{min-height:58px}
#app .roomAvatar{background:linear-gradient(145deg,#1264b8,#0d365e);border-radius:12px;width:48px;height:48px}
#app .roomIdentityMeta{gap:8px 16px;align-items:center}
#app .roomActions{gap:8px}
#app .roomMeta{align-items:stretch}
#app .roomMeta .vehicleGroup{display:flex;align-items:center;gap:12px;min-width:0}
#app .roomMeta .vehicleInfo{display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0;flex:1}
#app .roomMeta .vehicleHeading{color:var(--j-muted);font-size:10px;font-weight:700;letter-spacing:1px}
#app .roomMeta .vehicleDetails{font-size:13px;line-height:1.4;font-weight:600;color:var(--j-ink);overflow-wrap:anywhere}
#app .roomMeta .vehiclePlate{align-self:flex-start;padding:4px 9px;border-radius:4px;background:var(--j-soft);border:1px solid var(--j-line);font-family:'IBM Plex Sans',sans-serif;font-weight:700;letter-spacing:.65px;color:var(--j-ink);font-size:12px}
#app .roomMeta #editVehicle{flex-shrink:0;font-size:11px}
#app .roomMeta .metaField{align-items:center}
#app .roomMeta .metaField>span{display:flex;flex-direction:column;gap:6px;color:var(--j-muted);font-size:11px}
#app .roomMeta .metaField b{font-size:12px;line-height:1.4;margin:0;color:var(--j-ink)}
@media(min-width:1321px){#app .roomMeta{grid-template-columns:minmax(260px,1.7fr) repeat(3,minmax(115px,1fr))}}
@media(max-width:760px){#app .roomMeta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}#app .roomMeta .vehicleGroup{grid-column:1/-1;flex-wrap:wrap}#app .roomMeta .metaField{border-left:0;padding-left:0}#app .roomActions{margin-top:8px}}

/* Foto do contato, com fallback por inicial */
#app .roomAvatar{position:relative;overflow:hidden;border-radius:50%;flex-shrink:0}
#app .roomAvatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#app .roomAvatar span{display:grid;place-items:center;width:100%;height:100%}

@media(min-width:761px){#app .roomMeta.noVehicle{grid-template-columns:repeat(3,minmax(0,1fr))}#app .roomMeta.noVehicle .metaField:first-of-type{border-left:0;padding-left:0}}

/* Menu de ações clicável acima do histórico */
#app .roomhead{position:relative;z-index:12;overflow:visible}
#app .roomMoreMenu{min-width:225px;max-height:min(70vh,440px);overflow-y:auto;z-index:120;padding:8px;box-shadow:0 16px 35px #0005}
#app .roomMoreMenu button{display:block;width:100%;text-align:left;padding:10px 12px;background:transparent;border:0;color:var(--j-ink);border-radius:5px}
#app .roomMoreMenu button:hover{background:var(--j-soft)}
#app .roomMoreMenu #deleteConversation{color:#e46b73;border-top:1px solid var(--j-line);border-radius:0}
#app .roomMoreMenu label{padding:8px 10px;border-top:1px solid var(--j-line);color:var(--j-muted)}

/* Diálogos personalizados Juliano */
.appActionDialog{width:min(440px,calc(100vw - 32px));max-width:440px;box-sizing:border-box;border:1px solid var(--j-line);border-radius:12px;padding:0;background:var(--j-panel);color:var(--j-ink);box-shadow:0 25px 75px #0008}
.appActionDialog::backdrop{background:rgba(1,12,25,.75);backdrop-filter:blur(3px)}
.appActionDialog form{padding:23px;display:grid;gap:17px}
.appActionHead{display:flex;gap:13px;align-items:flex-start}
.appActionSymbol{width:38px;height:38px;flex:none;border-radius:9px;background:var(--j-blue);color:#fff;display:grid;place-items:center;font:800 23px 'Exo 2',sans-serif}
.appActionHead h3{margin:0;font:700 20px 'Exo 2',sans-serif;color:var(--j-ink)}
.appActionHead p{margin:6px 0 0;color:var(--j-muted);font-size:13px;line-height:1.5;white-space:pre-line}
.appActionDialog label{display:grid;gap:8px;font-size:12px;font-weight:600}
.appActionDialog input{width:100%;box-sizing:border-box;background:var(--j-field);border:1px solid var(--j-line);border-radius:7px;padding:11px;color:var(--j-ink);font-size:14px}
.appActionButtons{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.appActionButtons button{padding:10px 16px;font-weight:700}
.appActionButtons #appActionOk{background:var(--j-blue);color:#fff}
.appActionError{margin:0;color:#e26a74;font-size:12px}
.appToastRegion{position:fixed;right:20px;bottom:20px;z-index:500;display:grid;gap:8px;max-width:min(380px,calc(100vw - 30px))}
.appToast{background:var(--j-panel);border:1px solid var(--j-line);border-left:4px solid var(--j-blue);border-radius:8px;color:var(--j-ink);padding:13px 17px;box-shadow:0 12px 28px #0004;font-size:13px;overflow-wrap:anywhere}
.appToast.error{border-left-color:#e26a74}

/* Orçamento vinculado ao atendimento */
#app .roomBudget{display:inline-flex;align-items:center;background:rgba(234,180,58,.12);color:var(--j-gold);border:1px solid rgba(234,180,58,.4);border-radius:5px;padding:3px 8px;font-weight:700;font-size:12px;white-space:nowrap}
#app .conversationBudget{display:inline-flex;width:max-content;max-width:100%;margin:5px 0;padding:3px 7px;border-radius:4px;background:rgba(234,180,58,.12);color:var(--j-gold);font-size:11px;font-weight:700}

/* Foto do WhatsApp na lista lateral */
#conversationList .contactAvatar{position:relative;overflow:hidden;flex-shrink:0;border-radius:50%}
#conversationList .contactAvatarPhoto{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}

#messages .stickerMedia{display:block;width:clamp(96px,12vw,176px);height:clamp(96px,12vw,176px);object-fit:contain}

#messages .saveSticker{display:block;margin:5px 0 0;padding:5px 8px;font-size:11px;border:1px solid var(--j-line);background:var(--j-soft);color:var(--j-ink)}
.stickerGalleryDialog{width:min(550px,calc(100vw - 26px));padding:20px;border-radius:12px;border:1px solid var(--j-line);background:var(--j-panel);color:var(--j-ink)}
.stickerGalleryDialog::backdrop{background:#051020bb}
.stickerGalleryHead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}.stickerGalleryHead h3{font:700 20px 'Exo 2',sans-serif;margin:0}
.stickerGalleryGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;max-height:60vh;overflow:auto}
.stickerGalleryItem{padding:6px;border:1px solid var(--j-line);background:var(--j-soft);border-radius:8px;aspect-ratio:1}
.stickerGalleryItem img{width:100%;height:100%;object-fit:contain}

/* Marca d'água fixa no centro da área de conversa, por trás dos balões. */
#messages{position:relative;isolation:isolate}
#messages::before{content:"";position:sticky;top:calc(50% - 180px);display:block;flex:0 0 360px;width:min(470px,72%);height:360px;margin:0 auto -360px;background:url('/logo.png') center / contain no-repeat;opacity:.075;pointer-events:none;z-index:-1}
#messages > .bubble,#messages > .chatMessage,#messages > .empty{position:relative;z-index:1}
#messages .bubble{position:relative;overflow:visible;isolation:auto}
#messages .bubble::before{content:none}
/* A aba única de mensagem foi removida; compositor mais compacto. */
#app .composer{border-top:1px solid var(--j-line)}

/* Correção: balões em lista flex não podem encolher com histórico longo. */
#messages > .bubble,#messages > .chatMessage{flex:0 0 auto;min-height:max-content}

/* Fundo liso: remover padrões de pontos claros sem alterar os balões. */
#app #messages{background-image:none!important;background-color:var(--j-bg)!important}

/* Prévia compacta da imagem colada no compositor */
#app .pastePreview{display:flex;align-items:center;gap:10px;padding:9px 18px;background:var(--j-panel);border-top:1px solid var(--j-line);color:var(--j-ink);font-size:12px;min-width:0}
#app .pastePreview.hidden{display:none!important}
#app .pastePreview img{height:64px;width:64px;object-fit:contain;border:1px solid var(--j-line);border-radius:6px;background:var(--j-soft)}
#app .pastePreview span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .pastePreview button{padding:6px 10px}

/* Filtros secundários para funcionários e fornecedores */
#app .listTitle{gap:6px;flex-wrap:wrap}
#app .listTitle span{margin-right:auto}
#app .listTitle button{margin-left:0}
#app .listTitle button.selected{background:var(--j-blue);color:#fff}

#app #categoryRegister{margin-left:0;background:var(--j-blue);color:#fff;border-color:transparent;white-space:nowrap}
#app #categoryRegister.hidden{display:none!important}

/* Sidebar compacta e menu de perfil acessível */
#app .listTitle{display:flex;flex-wrap:nowrap;align-items:center;gap:5px}
#app .listTitle span{margin-right:auto;white-space:nowrap}
#app .listTitle button{flex-shrink:0;font-size:10px;padding:6px 7px}
#app #categoryRegister{width:26px;height:26px;min-width:26px;padding:0;font-size:19px;line-height:1;display:grid;place-items:center}
#app .userMenu{z-index:100}
#app .profileMenu:not(.hidden){display:flex;flex-direction:column;gap:3px}
#app .profileMenu button{text-align:left;min-height:36px}

/* Novo atendimento: busca por categoria, sem select nativo gigante. */
#dialog .contactPicker{display:grid;gap:10px;min-width:0;margin-top:8px}
#dialog .contactPickerSelected{padding:9px 11px;border:1px solid var(--j-line);background:var(--j-soft);border-radius:6px;font-size:12px;font-weight:700;color:var(--j-ink)}
#dialog .contactPickerSearch{width:100%;box-sizing:border-box;padding:11px 12px;min-height:40px;background:var(--j-field);border:1px solid var(--j-line);border-radius:7px;color:var(--j-ink)}
#dialog .contactPickerTabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
#dialog .contactPickerTab{font-size:11px;padding:9px 5px;background:var(--j-soft);color:var(--j-ink);border:1px solid var(--j-line);border-radius:6px;white-space:nowrap}
#dialog .contactPickerTab.selected{background:var(--j-blue);border-color:var(--j-blue);color:#fff}
#dialog .contactPickerResults{display:grid;align-content:start;gap:3px;max-height:190px;overflow-y:auto;border:1px solid var(--j-line);border-radius:7px;background:var(--j-panel);padding:5px}
#dialog .contactPickerResult{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;border:0;border-radius:5px;padding:9px 10px;background:transparent;color:var(--j-ink);min-width:0}
#dialog .contactPickerResult strong{font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
#dialog .contactPickerResult small{font-size:11px;color:var(--j-muted)}
#dialog .contactPickerResult.selected,#dialog .contactPickerResult:hover{background:var(--j-soft)}
#dialog .contactPickerEmpty{padding:10px;font-size:12px;color:var(--j-muted)}

#dialog .contactPickerResult .contactPickerVehicle{color:var(--j-blue);font-weight:600;line-height:1.4;white-space:normal;overflow-wrap:anywhere}

/* Janela de transferência direta */
.directTransferDialog{width:min(430px,calc(100vw - 28px));padding:22px;box-sizing:border-box;background:var(--j-panel);color:var(--j-ink);border:1px solid var(--j-line);border-radius:12px}
.directTransferDialog::backdrop{background:rgba(0,13,27,.78)}
.directTransferDialog form{display:grid;gap:15px}
.directTransferDialog h3{margin:0;font:700 21px 'Exo 2',sans-serif}
.directTransferDialog p{margin:0;font-size:13px;color:var(--j-muted)}
.directTransferDialog label{display:grid;gap:8px;font-size:12px;font-weight:600}
.directTransferDialog select{padding:11px;width:100%;border-radius:7px;background:var(--j-field);border:1px solid var(--j-line);color:var(--j-ink)}
.directTransferDialog .toolbar{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.directTransferDialog .error{color:#e56b75}

#messages .transferNotice{align-self:center;display:flex;justify-content:center;max-width:min(90%,520px);margin:8px auto;padding:8px 15px;border:1px solid var(--j-line);border-radius:100px;background:var(--j-panel);color:var(--j-muted);font-size:12px;text-align:center;line-height:1.5;flex:0 0 auto}

/* Tela inicial — cartão de boas-vindas adaptável ao tema e à identidade Juliano. */
#app .roomhead.welcomeHeader .roomMeta,#app .roomhead.welcomeHeader .roomActions,#app .roomhead.welcomeHeader .roomAvatar{display:none!important}
#app .roomhead.welcomeHeader{padding-bottom:0}
#app #messages.showWelcome{display:flex;justify-content:center;align-items:center;overflow-y:auto;padding:28px 30px}
#app #messages.showWelcome::before{display:none}
#app .welcomeHome{width:min(920px,100%);display:grid;gap:25px;position:relative;z-index:1;margin:auto}
#app .welcomeIntro{padding:clamp(22px,4vw,42px);background:linear-gradient(125deg,var(--j-panel),var(--j-bg));border:1px solid var(--j-line);border-radius:16px;box-shadow:0 12px 38px #00000012}
#app .welcomeEyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:var(--j-blue);margin-bottom:14px}
#app .welcomeHeading{margin:0 0 10px;font:800 clamp(25px,3vw,39px) 'Exo 2',sans-serif;color:var(--j-ink)}
#app .welcomeDescription{max-width:510px;font-size:14px;line-height:1.65;color:var(--j-muted);margin:0 0 22px}
#app .welcomeActions{display:flex;flex-wrap:wrap;gap:10px}
#app .welcomeActions button{padding:11px 17px;border-radius:7px;font-weight:700;font-size:12px}
#app .welcomePrimary{background:var(--j-blue);color:#fff}
#app .welcomeSecondary{background:var(--j-soft);color:var(--j-ink);border:1px solid var(--j-line)}
#app .welcomeStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#app .welcomeStat{display:grid;gap:6px;padding:20px;border-radius:12px;border:1px solid var(--j-line);background:var(--j-panel)}
#app .welcomeStat strong{font:800 30px 'Exo 2',sans-serif;color:var(--j-ink)}
#app .welcomeStat span{font-size:12px;color:var(--j-muted)}
#app .welcomeHint{border-left:3px solid var(--j-blue);padding:4px 16px;color:var(--j-muted);font-size:13px}
#app .welcomeHint strong{display:block;color:var(--j-ink);margin-bottom:5px}
#app .welcomeHint p{margin:0;line-height:1.6}
@media(max-width:700px){#app #messages.showWelcome{padding:16px}#app .welcomeStats{grid-template-columns:1fr;gap:8px}#app .welcomeStat{padding:12px 16px;display:flex;justify-content:space-between;align-items:center}#app .welcomeStat strong{font-size:24px}#app .welcomeHeading{font-size:25px}}

#app .welcomeMotivation{max-width:620px;margin:0 0 12px;color:var(--j-ink);font:600 clamp(15px,1.4vw,18px)/1.5 'IBM Plex Sans',sans-serif;border-left:3px solid var(--j-blue);padding-left:14px}

#app .welcomeMotivation{display:grid;gap:5px}
#app .welcomeVerse{margin:0;font:600 clamp(15px,1.4vw,18px)/1.5 'IBM Plex Sans',sans-serif}
#app .welcomeVerseRef{font-size:11px;font-weight:700;letter-spacing:.3px;color:var(--j-muted)}

/* Relógio digital da tela inicial */
#app .welcomeIntro{position:relative}
#app .welcomeClock{position:absolute;top:25px;right:28px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:10px 15px;border:1px solid var(--j-line);border-radius:10px;background:var(--j-soft);font-variant-numeric:tabular-nums}
#app .welcomeClockTime{font:800 27px/1.1 'Exo 2',sans-serif;letter-spacing:1px;color:var(--j-ink)}
#app .welcomeClockDay{font-size:11px;color:var(--j-muted)}
@media(max-width:760px){#app .welcomeClock{position:static;width:max-content;margin:0 0 16px;align-items:flex-start}#app .welcomeIntro{padding-top:22px}}
@media(min-width:761px){#app .welcomeEyebrow,#app .welcomeHeading,#app .welcomeMotivation,#app .welcomeDescription{max-width:calc(100% - 165px)}}

/* Alinhamento consistente do resumo do veículo e botão de edição. */
#app .roomMeta .vehicleGroup{align-items:center;gap:14px}
#app .roomMeta .vehicleInfo{align-items:flex-start;gap:5px}
#app .roomMeta .vehicleHeading,#app .roomMeta .vehicleDetails,#app .roomMeta .vehiclePlate{margin:0;line-height:1.45}
#app .roomMeta #editVehicle{align-self:center;margin:0;white-space:nowrap}


/* Resumo do veículo em linha única: modelo, ano, cor e placa. */
#app .roomMeta .vehicleInfo{display:grid;grid-template-columns:max-content max-content;column-gap:10px;row-gap:5px;align-items:center;justify-content:start}
#app .roomMeta .vehicleHeading{grid-column:1/-1}
#app .roomMeta .vehicleDetails{grid-column:1;min-width:0}
#app .roomMeta .vehiclePlate:not(.hidden){grid-column:2;align-self:center;margin:0;padding:2px 7px;white-space:nowrap;font-size:11px}
@media(max-width:1050px){#app .roomMeta .vehicleInfo{grid-template-columns:minmax(0,max-content) max-content;max-width:100%}}
@media(max-width:520px){#app .roomMeta .vehicleInfo{grid-template-columns:minmax(0,1fr);row-gap:4px}#app .roomMeta .vehiclePlate:not(.hidden){grid-column:1;justify-self:start}}

/* Home v2 — desenho editorial, inspirado em painéis operacionais, não em cards genéricos. */
#app #messages.showWelcome{align-items:flex-start;padding:clamp(26px,4vw,60px) clamp(20px,5vw,75px);background-color:var(--j-bg)!important}
#app .welcomeV2{max-width:1030px;width:100%;margin:0 auto;gap:0;display:flex;flex-direction:column}
#app .welcomeV2 .welcomeTopline{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--j-line);padding:0 0 18px}
#app .welcomeV2 .welcomeEyebrow{margin:0;font-size:10px;letter-spacing:2.2px;font-weight:700;color:var(--j-muted)}
#app .welcomeV2 .welcomeClock{position:static;flex-direction:row;align-items:baseline;gap:12px;border:0;background:transparent;padding:0;border-radius:0}
#app .welcomeV2 .welcomeClockTime{font-size:23px;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
#app .welcomeV2 .welcomeClockDay{font-size:11px;font-weight:600}
#app .welcomeV2 .welcomeIntro{border:0;box-shadow:none;border-radius:0;background:transparent;padding:40px 0 34px}
#app .welcomeV2 .welcomeHeading{max-width:none;margin:0 0 11px;font-size:clamp(32px,3.2vw,46px);font-weight:700;letter-spacing:-1.5px;line-height:1.14}
#app .welcomeV2 .welcomeDescription{max-width:630px;margin:0;color:var(--j-muted);font-size:14px;line-height:1.65}
#app .welcomeV2 .welcomeStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--j-line);border-radius:10px;overflow:hidden}
#app .welcomeV2 .welcomeStat{display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px 8px;padding:24px 26px;border:0;border-radius:0;background:var(--j-panel);color:var(--j-ink);text-align:left;cursor:pointer;min-height:118px;transition:background .15s}
#app .welcomeV2 .welcomeStat:not(:last-child){border-right:1px solid var(--j-line)}
#app .welcomeV2 .welcomeStat:hover{background:var(--j-soft)}
#app .welcomeV2 .welcomeStatLabel{grid-column:1;align-self:end;font-size:12px;font-weight:600;color:var(--j-muted)}
#app .welcomeV2 .welcomeStatValue{grid-column:1;align-self:start;font-size:38px;font-weight:700;line-height:1.1;letter-spacing:-1px}
#app .welcomeV2 .welcomeStatArrow{grid-column:2;grid-row:1/3;align-self:start;font-size:15px;opacity:.7;color:var(--j-muted)}
#app .welcomeV2 .welcomeBottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;padding-top:45px}
#app .welcomeV2 .welcomeSectionLabel{font-size:10px;font-weight:800;letter-spacing:1.8px;color:var(--j-muted);margin-bottom:17px}
#app .welcomeV2 .welcomeQuick{min-width:0}
#app .welcomeV2 .welcomeQuickAction{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:15px 0;background:transparent;color:var(--j-ink);border:0;border-bottom:1px solid var(--j-line);border-radius:0;font-size:13px;font-weight:600;transition:color .15s}
#app .welcomeV2 .welcomeQuickAction:hover{color:var(--j-blue)}
#app .welcomeV2 .welcomeQuickIcon{display:grid;place-items:center;flex:none;width:31px;height:31px;background:var(--j-soft);border:1px solid var(--j-line);border-radius:7px;font-size:17px;font-weight:500}
#app .welcomeV2 .welcomeQuickArrow{margin-left:auto;color:var(--j-muted);font-size:15px}
#app .welcomeV2 .welcomeVersePanel{border-left:1px solid var(--j-line);padding:0 0 0 38px;min-width:0}
#app .welcomeV2 .welcomeVerse{padding:0;margin:0 0 14px;border:0;font:500 clamp(17px,1.6vw,21px)/1.5 'IBM Plex Sans',sans-serif;color:var(--j-ink);max-width:430px}
#app .welcomeV2 .welcomeVerseRef{font-size:12px;letter-spacing:.1px;color:var(--j-muted);font-weight:600}
@media(max-width:760px){
 #app #messages.showWelcome{padding:20px 16px}
 #app .welcomeV2 .welcomeTopline{align-items:flex-start}
 #app .welcomeV2 .welcomeClock{display:flex;margin:0;flex-direction:column;align-items:flex-end;gap:0}
 #app .welcomeV2 .welcomeIntro{padding:30px 0 26px}
 #app .welcomeV2 .welcomeHeading{font-size:31px;letter-spacing:-.7px}
 #app .welcomeV2 .welcomeStats{grid-template-columns:1fr}
 #app .welcomeV2 .welcomeStat{min-height:76px;padding:15px 18px}
 #app .welcomeV2 .welcomeStat:not(:last-child){border-right:0;border-bottom:1px solid var(--j-line)}
 #app .welcomeV2 .welcomeStatValue{font-size:29px}
 #app .welcomeV2 .welcomeBottom{grid-template-columns:1fr;gap:34px;padding-top:30px}
 #app .welcomeV2 .welcomeVersePanel{border-left:0;border-top:1px solid var(--j-line);padding:25px 0 0}
}

/* Palavra do dia: sem aparência de cartão/blockquote ou recortes herdados. */
#app .welcomeV2 .welcomeVersePanel{background:transparent;box-shadow:none;outline:0;overflow:visible;min-height:0;align-self:start}
#app .welcomeV2 .welcomeVersePanel .welcomeVerse{display:block;background:transparent;box-shadow:none;border:0;outline:0;overflow:visible;width:auto;max-width:100%;height:auto;min-height:0;padding:0;margin:0 0 12px;white-space:normal;overflow-wrap:break-word;quotes:none}
#app .welcomeV2 .welcomeVersePanel .welcomeVerse::before,#app .welcomeV2 .welcomeVersePanel .welcomeVerse::after{content:none}

/* Separador e ação de novo cadastro após os contatos existentes. */
#dialog .contactNewSection{display:block;width:100%;margin:15px 0 2px;padding:12px 0 0;background:transparent;border:0;border-top:1px solid var(--j-line);border-radius:0;text-align:left;color:var(--j-ink);font:700 13px 'IBM Plex Sans',sans-serif}
#dialog .contactNewSection:hover{color:var(--j-blue)}

/* Destaque discreto de mensagens recebidas e não lidas */
#app .item.hasUnread{border-left:3px solid var(--j-blue)}
#app .item.hasUnread .conversationPreview{font-weight:700;color:var(--j-ink)}
#app .conversationHeading .unreadCount{display:inline-grid;place-items:center;background:var(--j-blue);color:#fff;border-radius:999px;min-width:20px;height:20px;padding:0 5px;font:700 11px 'IBM Plex Sans',sans-serif;margin-left:5px}

/* Cabeçalho dos cards de atendimento: nome à esquerda, protocolo e não lidas à direita. */
#app .conversationContent{min-width:0;width:100%}
#app .conversationHeading{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:7px;row-gap:4px;min-width:0}
#app .conversationHeading>strong{grid-column:1;grid-row:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .conversationHeading>.conversationId{grid-column:2;grid-row:1;white-space:nowrap;justify-self:end;margin:0}
#app .conversationHeading>.unreadCount{grid-column:3;grid-row:1;margin:0;min-width:21px;box-sizing:border-box}
#app .conversationHeading>.employeeLabel{grid-column:1/-1;grid-row:2;justify-self:start}
#app .conversationContent>.vehicleSummary{margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Imagens reais nos balões; a inicial permanece se não houver foto. */
#app .messageAvatar{position:relative;display:inline-grid;place-items:center;overflow:hidden;flex-shrink:0;border-radius:50%}
#app .messageAvatarPhoto{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}

/* Estados concluídos: verde legível, sem sugerir erro ou exclusão. */
#app .conversationStatus:has(.statusDot.done){color:#4ee0a2;font-weight:700}
#app .conversationStatus .statusDot.done{background:#27c98b;box-shadow:0 0 0 3px rgba(39,201,139,.12)}
#app .conversationStatus:has(.statusDot.done)::after{content:"✓";display:inline-grid;place-items:center;width:15px;height:15px;margin-left:3px;border-radius:50%;background:rgba(39,201,139,.14);color:#4ee0a2;font-size:10px;font-weight:800}
[data-theme="light"] #app .conversationStatus:has(.statusDot.done){color:#13845b}
[data-theme="light"] #app .conversationStatus:has(.statusDot.done)::after{color:#13845b}

/* Indicador de atendimento aberto: brilho suave em ciclos, sem distrair. */
#app .conversationStatus .statusDot:not(.done):not(.waiting){
 background:#25cc86;
 animation:openStatusGlow 2.6s ease-in-out infinite;
}
@keyframes openStatusGlow{
 0%,100%{opacity:.65;box-shadow:0 0 0 0 rgba(37,204,134,0),0 0 3px rgba(37,204,134,.20)}
 50%{opacity:1;box-shadow:0 0 0 4px rgba(37,204,134,.10),0 0 10px 2px rgba(37,204,134,.45)}
}
@media(prefers-reduced-motion:reduce){
 #app .conversationStatus .statusDot:not(.done):not(.waiting){animation:none;opacity:1}
}

/* Faixa dourada com passagem escura contínua, sem alterar a geometria do cabeçalho. */
#app .appHeader{position:relative;border-bottom:4px solid var(--j-gold);isolation:isolate}
#app .appHeader::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;pointer-events:none;background:linear-gradient(105deg,transparent 0%,transparent 38%,rgba(1,11,20,.18) 45%,#06121e 50%,rgba(1,11,20,.22) 55%,transparent 62%,transparent 100%);background-size:220% 100%;animation:julianoGoldSweep 6s linear infinite;z-index:2}
@keyframes julianoGoldSweep{from{background-position:180% 0}to{background-position:-180% 0}}
/* Indicador de operações assíncronas: desaparece assim que a requisição conclui. */
.appBusyLayer{position:fixed;inset:0;display:grid;place-items:center;z-index:20000;background:rgba(2,13,24,.38);backdrop-filter:blur(1.5px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,visibility .12s ease}
.appBusyLayer.visible{opacity:1;visibility:visible;pointer-events:auto}
.appBusyCard{display:flex;align-items:center;gap:13px;background:var(--j-panel);color:var(--j-ink);border:1px solid var(--j-line);border-radius:10px;padding:14px 20px;box-shadow:0 16px 42px rgba(0,0,0,.24);font:600 13px 'IBM Plex Sans',sans-serif}
.appBusySpinner{display:block;width:19px;height:19px;flex:none;border:2px solid rgba(125,156,187,.25);border-top-color:var(--j-blue);border-radius:50%;animation:julianoSpinner .7s linear infinite}
@keyframes julianoSpinner{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#app .appHeader::after,.appBusySpinner{animation:none}.appBusySpinner{border-top-color:var(--j-blue)}.appBusyLayer{transition:none}}

/* Menu do perfil acima do conteúdo: o cabeçalho precisa ter prioridade de empilhamento. */
#app .appHeader{z-index:500;overflow:visible}
#app .appHeader .userMenu{position:relative;z-index:10}
#app .appHeader .profileMenu{z-index:20;top:calc(100% + 10px);right:0;max-height:min(70vh,560px);overflow-y:auto}
#app .appHeader::after{z-index:1}

/* Composer: ações por ícones originais, alinhadas ao campo de texto. */
#app .composer .composerIconBtn{flex:0 0 48px;width:48px;height:46px;min-width:48px;padding:0;display:inline-grid;place-items:center;border-radius:9px;border:1px solid var(--j-line);background:var(--j-soft);color:var(--j-ink);transition:background .14s ease,border-color .14s ease,transform .14s ease}
#app .composer .composerIconBtn:hover{background:var(--j-field);border-color:var(--j-blue);transform:translateY(-1px)}
#app .composer .composerIconBtn:active{transform:translateY(0)}
#app .composer .composerIconBtnPrimary{background:var(--j-blue);border-color:var(--j-blue);color:#fff}
#app .composer .composerIconBtnPrimary:hover{background:#1875df;border-color:#1875df}
#app .composer .composerIconBtn.hasAttachment{border-color:var(--j-gold);box-shadow:inset 0 0 0 1px var(--j-gold)}
#app .composer .composerIcon{display:block;width:22px;height:22px;pointer-events:none}
@media(max-width:520px){#app .composer .composerIconBtn{flex-basis:42px;width:42px;min-width:42px;height:42px}#app .composer .composerIcon{width:20px;height:20px}}
/* Carregamento: apenas floco de neve giratório, sem texto na tela. */
.appBusyLayer .appBusyCardSnow{display:grid;place-items:center;width:68px;height:68px;box-sizing:border-box;padding:0;border-radius:50%;background:rgba(8,26,44,.9);border:1px solid rgba(136,181,218,.24);box-shadow:0 12px 36px rgba(0,0,0,.32);color:#80c5ff}
.appBusyLayer .appBusySnowflake{display:block;width:33px;height:33px;animation:julianoSnowSpin 1.3s linear infinite}
@keyframes julianoSnowSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.appBusyLayer .appBusySnowflake{animation:none}}

/* Ações de mensagens com três pontos, mantendo o encaminhamento existente. */
#app .bubble,#app .chatMessage{overflow:visible}
#app .bubbleMenuWrap{position:relative;display:inline-flex;align-items:center;margin-right:auto}
#app .bubbleMenuButton{display:grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border:0;border-radius:5px;background:transparent;color:var(--j-muted);font-size:22px;line-height:1;cursor:pointer}
#app .bubbleMenuButton:hover,#app .bubbleMenuButton:focus-visible{background:var(--j-soft);color:var(--j-ink)}
#app .bubbleMenu{position:absolute;z-index:60;left:0;bottom:calc(100% + 5px);display:flex;flex-direction:column;min-width:170px;padding:5px;background:var(--j-panel);color:var(--j-ink);border:1px solid var(--j-line);border-radius:8px;box-shadow:0 10px 28px #0004}
#app .bubbleMenu.hidden{display:none!important}
#app .bubbleMenuItem{display:block;width:100%;padding:9px 10px;border:0;background:transparent;color:inherit;text-align:left;font:600 12px 'IBM Plex Sans',sans-serif;border-radius:5px;white-space:nowrap}
#app .bubbleMenuItem:hover{background:var(--j-soft)}
#app .bubbleMenuDanger{color:#d65b66}
#app .messageEdited{font-size:10px;color:var(--j-muted);font-style:italic}

/* Menu discreto no canto do balão; não ocupa a linha do horário. */
#app .chatMessage{position:relative}
#app .chatMessage>.bubbleMenuWrap{position:absolute;top:12px;margin:0;z-index:30;display:block}
#app .chatMessage>.bubbleMenuWrap.outsideLeft{left:-36px;right:auto}
#app .chatMessage>.bubbleMenuWrap.outsideRight{right:-36px;left:auto}
#app .chatMessage .bubbleMenuButton{width:27px;height:27px;min-width:27px;border-radius:6px;background:var(--j-panel);border:1px solid var(--j-line);font-size:20px;line-height:1;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s ease}
#app .chatMessage:hover .bubbleMenuButton,#app .chatMessage:focus-within .bubbleMenuButton,#app .chatMessage .bubbleMenuWrap:has(.bubbleMenu:not(.hidden)) .bubbleMenuButton{opacity:.96;visibility:visible}
#app .chatMessage .bubbleMenu{left:auto;right:0;top:calc(100% + 5px);bottom:auto;z-index:100}
#app .chatMessage .outsideLeft .bubbleMenu{left:0;right:auto}
#app .chatMessage .outsideRight .bubbleMenu{left:auto;right:0}
#app .chatMessage .messageHeader{padding-right:0}
@media(hover:none){#app .chatMessage .bubbleMenuButton{visibility:visible;opacity:.75}}
@media(prefers-reduced-motion:reduce){#app .chatMessage .bubbleMenuButton{transition:none}}

/* Margem de segurança para o botão externo; sem empurrar o conteúdo do balão. */
#app #messages .chatMessage{overflow:visible}
@media(max-width:520px){#app .chatMessage>.bubbleMenuWrap.outsideLeft{left:-32px}#app .chatMessage>.bubbleMenuWrap.outsideRight{right:-32px}#app .chatMessage .bubbleMenuButton{width:25px;min-width:25px;height:25px}}


/* Home Juliano — molduras autorais inspiradas nos flyers institucionais. */
#app .welcomeV2 .welcomeIntro{
 position:relative;isolation:isolate;overflow:hidden;
 margin:25px 0 24px;padding:clamp(30px,4vw,49px) clamp(26px,4.4vw,54px);
 min-height:190px;box-sizing:border-box;
 border:1px solid rgba(107,172,255,.32);border-radius:30px 62px 34px 30px;
 background:linear-gradient(119deg,#278ddd 0%,#2252c7 49%,#2117a7 100%);
 box-shadow:0 16px 38px rgba(6,24,65,.18);
}
#app .welcomeV2 .welcomeIntro::before{
 content:"";position:absolute;z-index:0;pointer-events:none;
 width:315px;height:245px;right:-80px;top:-130px;
 background:linear-gradient(145deg,rgba(117,196,255,.42),rgba(95,148,255,.08));
 border-radius:35% 48% 40% 60%;transform:rotate(-28deg);
}
#app .welcomeV2 .welcomeIntro::after{
 content:"";position:absolute;z-index:0;pointer-events:none;
 width:235px;height:190px;right:-90px;bottom:-135px;
 border:1px solid rgba(220,245,255,.29);border-radius:45% 40% 20% 55%;
 transform:rotate(-28deg);
}
#app .welcomeV2 .welcomeIntro>*{position:relative;z-index:1}
#app .welcomeV2 .welcomeHeading{
 max-width:750px;margin:0 0 17px;color:#fff;
 text-shadow:0 2px 10px rgba(0,18,77,.16);
 font-size:clamp(30px,3.25vw,47px);line-height:1.14;
}
#app .welcomeV2 .welcomeDescription{
 color:#e3f3ff;max-width:670px;line-height:1.65;
}
#app .welcomeV2 .welcomeStats{
 border-radius:16px;box-shadow:0 8px 24px rgba(0,15,39,.075);
}
#app .welcomeV2 .welcomeStat{
 position:relative;overflow:hidden;transition:background .2s ease,box-shadow .2s ease,transform .2s ease;
}
#app .welcomeV2 .welcomeStat::before{
 content:"";position:absolute;left:0;right:0;top:0;height:3px;
 background:linear-gradient(90deg,#258ddd,#2534cb);opacity:0;transition:opacity .2s;
}
#app .welcomeV2 .welcomeStat:hover{background:var(--j-soft);box-shadow:inset 0 0 0 1px rgba(83,156,243,.18)}
#app .welcomeV2 .welcomeStat:hover::before,#app .welcomeV2 .welcomeStat:focus-visible::before{opacity:1}
#app .welcomeV2 .welcomeVersePanel{
 position:relative;isolation:isolate;overflow:hidden;align-self:stretch;
 border:1px solid rgba(99,166,248,.30);border-radius:22px 46px 22px 22px;
 padding:clamp(24px,2.9vw,34px)!important;
 background:linear-gradient(140deg,rgba(21,101,188,.15),rgba(32,43,160,.12))!important;
 box-shadow:0 9px 28px rgba(0,20,55,.085)!important;
}
#app .welcomeV2 .welcomeVersePanel::before{
 content:"";position:absolute;z-index:-1;pointer-events:none;
 width:230px;height:200px;right:-95px;top:-125px;
 border-radius:45px 75px 35px 80px;transform:rotate(28deg);
 background:linear-gradient(125deg,rgba(44,152,232,.26),rgba(38,38,179,.18));
}
#app .welcomeV2 .welcomeVersePanel::after{
 content:"";position:absolute;z-index:-1;pointer-events:none;
 width:100px;height:100px;right:8px;bottom:-70px;
 border:1px solid rgba(95,165,246,.24);border-radius:30px;transform:rotate(-35deg);
}
#app .welcomeV2 .welcomeVersePanel .welcomeSectionLabel{
 letter-spacing:2px;color:#80bcff;font-weight:800;
}
#app .welcomeV2 .welcomeVersePanel .welcomeVerse{
 position:relative;font-size:clamp(17px,1.65vw,22px);line-height:1.47;
 font-weight:700;color:var(--j-ink);
}
#app .welcomeV2 .welcomeVersePanel .welcomeVerseRef{color:#84bdf6}
#app .welcomeV2 .welcomeQuickAction{transition:background .2s,border-color .2s,transform .2s}
#app .welcomeV2 .welcomeQuickAction:hover{transform:translateX(4px)}
@media(max-width:760px){
 #app .welcomeV2 .welcomeIntro{margin:18px 0 20px;min-height:0;padding:30px 24px;border-radius:22px 43px 25px 22px}
 #app .welcomeV2 .welcomeHeading{font-size:clamp(27px,7vw,36px)}
 #app .welcomeV2 .welcomeVersePanel{padding:25px!important;border-radius:20px 36px 20px 20px}
}
@media(prefers-reduced-motion:reduce){
 #app .welcomeV2 .welcomeStat,#app .welcomeV2 .welcomeQuickAction{transition:none}
 #app .welcomeV2 .welcomeQuickAction:hover{transform:none}
}

/* Responder citando mensagem */
#app .replyPreview{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:10px 18px;border-top:1px solid var(--j-line);background:var(--j-panel);color:var(--j-ink)}
#app .replyPreviewContent{display:grid;gap:3px;min-width:0;border-left:3px solid var(--j-blue);padding-left:12px}
#app .replyPreviewContent strong{font-size:12px;color:var(--j-blue)}
#app .replyPreviewContent span{font-size:12px;color:var(--j-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .replyCancel{border:0;background:transparent;color:var(--j-muted);font-size:24px;padding:2px 9px;cursor:pointer}
#app .quotedMessage{display:grid;gap:4px;margin:7px 0 9px;padding:8px 11px;border-left:3px solid var(--j-blue);border-radius:5px;background:rgba(94,147,216,.13);cursor:pointer;overflow-wrap:anywhere}
#app .quotedMessage strong{font-size:11px;color:var(--j-blue)}
#app .quotedMessage span{font-size:12px;line-height:1.45;color:var(--j-ink)}

/* Menu de mensagem: coloca o balão ativo acima dos balões vizinhos.
   Evita que a próxima mensagem encubra Responder/Editar/Apagar. */
#app #messages .chatMessage{position:relative;z-index:0;overflow:visible}
#app #messages .chatMessage:has(> .bubbleMenuWrap .bubbleMenu:not(.hidden)){z-index:80}
#app #messages .chatMessage:focus-within{z-index:79}
#app #messages .chatMessage>.bubbleMenuWrap{z-index:81}
#app #messages .chatMessage .bubbleMenu{z-index:82}

/* O menu pode ultrapassar a borda inferior do histórico sem ficar sob o compositor.
   O histórico permanece rolável e seus próprios balões continuam organizados. */
#app .main{isolation:isolate}
#app .main #messages:not(.showWelcome){position:relative;z-index:5}
#app .main .composer,#app .main .composerTabs,#app .main .replyPreview,#app .main .pastePreview{position:relative;z-index:1}
#app #messages .chatMessage:has(> .bubbleMenuWrap .bubbleMenu:not(.hidden)){z-index:90}
#app #messages .chatMessage .bubbleMenu{z-index:91}

/* Notificações no alto: não cobrem o compositor nem suas ações. */
.appToastRegion{
 position:fixed;top:calc(94px + 16px);right:22px;bottom:auto;
 z-index:1000;display:flex;flex-direction:column;align-items:flex-end;
 gap:10px;width:min(380px,calc(100vw - 28px));max-width:none;
 pointer-events:none;
}
.appToast{
 display:flex;align-items:flex-start;gap:14px;justify-content:space-between;
 width:100%;box-sizing:border-box;min-height:52px;
 padding:13px 12px 13px 16px;pointer-events:auto;
 animation:julianoToastIn .32s cubic-bezier(.2,.8,.2,1) both;
}
.appToastText{flex:1;min-width:0;line-height:1.5;overflow-wrap:anywhere}
.appToastClose{
 flex:0 0 25px;width:25px;height:25px;border:0;border-radius:5px;
 padding:0;background:transparent;color:var(--j-muted);
 font:400 22px/1 'IBM Plex Sans',sans-serif;cursor:pointer;
 display:grid;place-items:center;
}
.appToastClose:hover,.appToastClose:focus-visible{background:var(--j-soft);color:var(--j-ink)}
.appToast.leaving{animation:julianoToastOut .23s ease-in forwards}
@keyframes julianoToastIn{
 from{opacity:0;transform:translateX(28px) scale(.98)}
 to{opacity:1;transform:translateX(0) scale(1)}
}
@keyframes julianoToastOut{
 from{opacity:1;transform:translateX(0) scale(1);max-height:130px}
 to{opacity:0;transform:translateX(32px) scale(.98);max-height:0;padding-top:0;padding-bottom:0;margin:0}
}
@media(max-width:760px){.appToastRegion{top:calc(75px + 10px);right:10px;width:min(360px,calc(100vw - 20px))}}
@media(prefers-reduced-motion:reduce){
 .appToast,.appToast.leaving{animation:none}
}

/* Carregamento com transições suaves de entrada e saída. */
.appBusyLayer{
 transition:opacity .28s cubic-bezier(.22,.7,.28,1),visibility .28s;
 will-change:opacity;
}
.appBusyLayer .appBusyCardSnow{
 transform:scale(.88);
 opacity:0;
 transition:transform .32s cubic-bezier(.18,.9,.3,1),opacity .26s ease;
}
.appBusyLayer.visible .appBusyCardSnow{transform:scale(1);opacity:1}
.appBusyLayer .appBusySnowflake{
 animation:julianoSnowSpin 2.1s linear infinite;
 transform-origin:center;
 will-change:transform;
}
@media(prefers-reduced-motion:reduce){
 .appBusyLayer,.appBusyLayer .appBusyCardSnow{transition:none}
 .appBusyLayer .appBusyCardSnow{transform:none;opacity:1}
 .appBusyLayer .appBusySnowflake{animation:none;will-change:auto}
}

/* Mantém identidade e layout, economizando composição gráfica em PCs modestos. */
.lowPerformanceDevice .appBusyLayer,.lowPerformanceDevice .appActionDialog::backdrop{backdrop-filter:none}
.lowPerformanceDevice #app .appHeader::after{animation:none}
.lowPerformanceDevice #app .conversationStatus .statusDot:not(.done):not(.waiting){animation:none;opacity:1;box-shadow:0 0 0 3px rgba(37,204,134,.1)}
.lowPerformanceDevice .appBusySnowflake{will-change:auto}

/* Paginação progressiva do histórico, sem alterar o layout dos balões. */
#app #messages .messageLoadOlder{
 align-self:center;display:block;flex:0 0 auto;
 margin:4px auto 16px;padding:9px 17px;
 background:var(--j-panel);border:1px solid var(--j-line);
 border-radius:18px;color:var(--j-ink);
 font:600 12px 'IBM Plex Sans',sans-serif;cursor:pointer;
}
#app #messages .messageLoadOlder:hover{border-color:var(--j-blue);background:var(--j-soft)}

/* Indicador de carregamento: evita desfocar a tela inteira, operação cara em GPUs integradas. */
.appBusyLayer{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(2,13,24,.22)}
.appBusyLayer .appBusySnowflake{animation-duration:2.4s;transform:translateZ(0)}

/* O floco conclui o giro sem interceptar cliques após a operação. */
.appBusyLayer.finishing{pointer-events:none}
.appBusyLayer .appBusySnowflake{animation-duration:1.6s}

/* Floco: animação explícita que não é cancelada por regras antigas de motion.
   O usuário solicitou o giro; os demais efeitos seguem as preferências do sistema. */
@keyframes julianoSnowflakeRotate{
 from{transform:rotate(0deg)}
 to{transform:rotate(360deg)}
}
.appBusyLayer.visible .appBusySnowflake{
 animation-name:julianoSnowflakeRotate!important;
 animation-duration:1.6s!important;
 animation-timing-function:linear!important;
 animation-iteration-count:infinite!important;
 animation-play-state:running!important;
 transform-origin:50% 50%;
}

/* Pequenos cristais sobem e desaparecem ao redor do floco principal.
   Apenas transform e opacity são animados para preservar a fluidez. */
.appBusyLayer .appBusyCardSnow{position:relative;isolation:isolate;overflow:visible}
.appBusyLayer .appBusySnowflake{position:relative;z-index:2}
.appBusyLayer .busySnowParticles{position:absolute;inset:0;pointer-events:none;z-index:1}
.appBusyLayer .busySnowParticles i{
 --dx:0px;--size:6px;--delay:0s;
 position:absolute;left:50%;top:50%;width:var(--size);height:var(--size);
 border-radius:1px;background:#8de5ff;opacity:0;
 clip-path:polygon(38% 0,62% 0,62% 38%,100% 38%,100% 62%,62% 62%,62% 100%,38% 100%,38% 62%,0 62%,0 38%,38% 38%);
 animation:julianoSnowRise 1.7s ease-out var(--delay) infinite;
}
.appBusyLayer .busySnowParticles i:nth-child(1){left:18%;top:67%;--dx:-15px;--size:6px;--delay:-.1s}
.appBusyLayer .busySnowParticles i:nth-child(2){left:74%;top:72%;--dx:14px;--size:5px;--delay:-.65s}
.appBusyLayer .busySnowParticles i:nth-child(3){left:35%;top:84%;--dx:-8px;--size:4px;--delay:-1.15s}
.appBusyLayer .busySnowParticles i:nth-child(4){left:65%;top:58%;--dx:10px;--size:4px;--delay:-.4s}
.appBusyLayer .busySnowParticles i:nth-child(5){left:12%;top:45%;--dx:-11px;--size:3px;--delay:-1.35s}
.appBusyLayer .busySnowParticles i:nth-child(6){left:85%;top:45%;--dx:12px;--size:3px;--delay:-.95s}
@keyframes julianoSnowRise{
 0%{opacity:0;transform:translate3d(0,8px,0) scale(.65) rotate(0deg)}
 22%{opacity:.8}
 72%{opacity:.65}
 100%{opacity:0;transform:translate3d(var(--dx),-35px,0) scale(.75) rotate(70deg)}
}
@media(prefers-reduced-motion:reduce){.appBusyLayer .busySnowParticles i{animation:none}}
.lowPerformanceDevice .appBusyLayer .busySnowParticles i:nth-child(n+4){display:none}

/* Desfoque suave durante o carregamento; efeito estático, sem animar o filtro. */
.appBusyLayer.visible{
 -webkit-backdrop-filter:blur(2px)!important;
 backdrop-filter:blur(2px)!important;
}
.lowPerformanceDevice .appBusyLayer.visible{
 -webkit-backdrop-filter:none!important;
 backdrop-filter:none!important;
 background:rgba(2,13,24,.32);
}
@media(prefers-reduced-motion:reduce){
 .appBusyLayer.visible{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}

/* Carregamento — opção A: escurecimento azul-marinho leve, sem desfoque. */
.appBusyLayer,
.appBusyLayer.visible,
.lowPerformanceDevice .appBusyLayer.visible {
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  background:rgba(3,17,32,.58);
}

/* Carregamento contextual: ocupa somente o histórico, com transição mais marcada.
   Sem blur: mantém fluidez mesmo em GPUs integradas. */
.appBusyLayer,
.appBusyLayer.visible,
.lowPerformanceDevice .appBusyLayer.visible{
 inset:auto;
 -webkit-backdrop-filter:none!important;
 backdrop-filter:none!important;
 background:rgba(1,10,23,.95);
 border-radius:0;
}
.appBusyLayer{overflow:hidden}

/* Chat refinado: balões proporcionais ao conteúdo, hierarquia compacta e limpa. */
#app #messages:not(.showWelcome){gap:11px}
#app #messages .chatMessage{
 width:fit-content;
 min-width:142px;
 max-width:min(73%,520px);
 padding:11px 13px 9px;
 border-radius:12px;
 box-shadow:0 2px 7px rgba(0,0,0,.08);
 line-height:1.45;
}
#app #messages .chatMessage.received{border-top-left-radius:4px}
#app #messages .chatMessage.mine{border-top-right-radius:4px}
#app #messages .messageHeader{gap:7px;margin-bottom:7px;min-height:23px}
#app #messages .messageAvatar{
 width:23px;height:23px;flex:0 0 23px;
 border-radius:50%;font-size:10px;
}
#app #messages .messageSender{font-size:11px;line-height:1.3;font-weight:700}
#app #messages .messageType{
 font-size:8px;letter-spacing:.5px;padding:3px 5px;
 border-radius:4px;
}
#app #messages .messageText{font-size:12.5px;line-height:1.5}
#app #messages .messageFooter{
 margin-top:5px;gap:5px;font-size:9px;
 line-height:1.3;font-variant-numeric:tabular-nums;
}
#app #messages .quotedMessage{
 margin:3px 0 7px;padding:6px 9px;gap:3px;
 border-left-width:2px;border-radius:4px;
}
#app #messages .quotedMessage strong{font-size:10px}
#app #messages .quotedMessage span{font-size:11px;line-height:1.4}
#app #messages .messageEdited{font-size:9px}
#app #messages .chatMessage>.bubbleMenuWrap{top:8px}
@media(max-width:700px){
 #app #messages:not(.showWelcome){gap:9px}
 #app #messages .chatMessage{max-width:calc(100% - 40px);min-width:115px;padding:9px 10px 8px}
 #app #messages .messageText{font-size:12px}
}

/* Balões inspirados no WhatsApp: borda delicada e proporção natural. */
#app #messages:not(.showWelcome){gap:7px}
#app #messages .chatMessage{
 min-width:0;
 width:fit-content;
 max-width:min(76%,560px);
 padding:7px 9px 6px;
 border:1px solid rgba(111,165,203,.24);
 border-radius:8px;
 box-shadow:0 1px 2px rgba(0,0,0,.09);
 line-height:1.42;
}
#app #messages .chatMessage.mine{
 border-color:rgba(77,162,218,.31);
 border-top-right-radius:3px;
}
#app #messages .chatMessage.received{
 border-color:rgba(111,165,203,.24);
 border-top-left-radius:3px;
}
#app #messages .messageHeader{min-height:20px;margin-bottom:4px;gap:6px}
#app #messages .messageAvatar{width:20px;height:20px;flex-basis:20px;font-size:9px}
#app #messages .messageSender{font-size:10.5px}
#app #messages .messageText{font-size:12.5px;line-height:1.43}
#app #messages .messageFooter{
 justify-content:flex-end;
 margin-top:3px;
 min-height:12px;
 gap:4px;
 font-size:9px;
 line-height:1.1;
 opacity:.85;
}
#app #messages .messageTime{white-space:nowrap;font-variant-numeric:tabular-nums}
#app #messages .quotedMessage{margin:4px 0 6px;padding:5px 8px}
#app #messages .messageType{padding:2px 4px;border-radius:3px}
#app #messages .chatMessage>.bubbleMenuWrap{top:5px}
@media(max-width:700px){
 #app #messages .chatMessage{max-width:calc(100% - 34px);padding:7px 8px 6px}
}

/* Tipografia mais legível nos balões compactos, sem voltar aos cartões grandes. */
#app #messages .messageSender{font-size:12px;line-height:1.35}
#app #messages .messageText{font-size:14px;line-height:1.48}
#app #messages .messageFooter{font-size:10.5px;line-height:1.25}
#app #messages .quotedMessage strong{font-size:11px}
#app #messages .quotedMessage span{font-size:12.5px;line-height:1.45}
#app #messages .messageType{font-size:9px}
#app #messages .messageAvatar{width:23px;height:23px;flex-basis:23px;font-size:10px}
@media(max-width:700px){#app #messages .messageText{font-size:13.5px}}

/* Palavra do dia — contraste próprio do modo claro, mantendo a composição. */
html:not([data-theme="dark"]) #app .welcomeV2 .welcomeVersePanel{
 background:linear-gradient(135deg,#d9e8fa 0%,#c4d9f4 100%)!important;
 border-color:#8fb9ea;
 box-shadow:0 10px 26px rgba(12,63,127,.12)!important;
}
html:not([data-theme="dark"]) #app .welcomeV2 .welcomeVersePanel::before{
 background:linear-gradient(125deg,rgba(39,114,215,.27),rgba(32,79,181,.21));
}
html:not([data-theme="dark"]) #app .welcomeV2 .welcomeVersePanel::after{
 border-color:rgba(36,105,199,.38);
}
html:not([data-theme="dark"]) #app .welcomeV2 .welcomeVersePanel .welcomeSectionLabel{
 color:#155db1;
}
html:not([data-theme="dark"]) #app .welcomeV2 .welcomeVersePanel .welcomeVerse{
 color:#102c50;
}
html:not([data-theme="dark"]) #app .welcomeV2 .welcomeVersePanel .welcomeVerseRef{
 color:#2367b1;
}

/* Lista de atendimentos — modo claro com contraste e hierarquia mais definidos. */
html[data-theme="light"] #app .itemList{background:#f6f9fd}
html[data-theme="light"] #app #conversationList .item{
 background:#ffffff;
 border-color:#dde7f1;
 border-left-color:transparent;
 box-shadow:0 1px 3px rgba(19,55,91,.045);
}
html[data-theme="light"] #app #conversationList .item:hover{
 background:#f0f6fe;
 border-color:#b9d5f1;
}
html[data-theme="light"] #app #conversationList .item.active{
 background:#dcecff;
 border-color:#a4c7ee;
 border-left-color:#096bd9;
 box-shadow:inset 0 0 0 1px rgba(14,103,210,.06);
}
html[data-theme="light"] #app #conversationList .conversationHeading strong{color:#102b4c}
html[data-theme="light"] #app #conversationList .conversationId{color:#4f6c8d}
html[data-theme="light"] #app #conversationList .conversationPreview{color:#244766}
html[data-theme="light"] #app #conversationList .vehicleSummary{color:#376a9a}
html[data-theme="light"] #app #conversationList .conversationFooter{
 color:#55728e;border-top-color:#cdddeb;
}
html[data-theme="light"] #app #conversationList .conversationStatus{color:#157451}
html[data-theme="light"] #app #conversationList .conversationStatus:has(.statusDot.waiting){color:#956315}
html[data-theme="light"] #app #conversationList .conversationStatus:has(.statusDot.done){color:#667b90}
html[data-theme="light"] #app .filters{background:#eaf1f9}
html[data-theme="light"] #app .filters button{color:#536f8b}
html[data-theme="light"] #app .filters button.selected{color:#075cbe;background:#dfeeff}
html[data-theme="light"] #app .stats .stat{background:#f5f9fd;border-color:#d5e3f1}
html[data-theme="light"] #app .stats .stat span{color:#5b7591}
html[data-theme="light"] #app .listTitle{color:#536d89}

/* Carregamento da conversa no modo claro: branco gelo 95%, sem desfoque. */
html[data-theme="light"] .appBusyLayer,
html[data-theme="light"] .appBusyLayer.visible,
html[data-theme="light"].lowPerformanceDevice .appBusyLayer.visible {
  background:rgba(248,252,255,.95)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html[data-theme="light"] .appBusyLayer .appBusyCardSnow {
  background:rgba(255,255,255,.92);
  border-color:rgba(92,146,199,.35);
  box-shadow:0 8px 24px rgba(26,73,124,.1);
}
html[data-theme="light"] .appBusyLayer .appBusySnowflake {filter:none}

/* Modais: backdrop sem desfoque, com 80% de opacidade por tema. */
dialog::backdrop,
.appActionDialog::backdrop,
#app dialog::backdrop {
 -webkit-backdrop-filter:none!important;
 backdrop-filter:none!important;
}
html[data-theme="dark"] dialog::backdrop,
html[data-theme="dark"] .appActionDialog::backdrop,
html[data-theme="dark"] #app dialog::backdrop {
 background:rgba(2,13,24,.80)!important;
}
html[data-theme="light"] dialog::backdrop,
html[data-theme="light"] .appActionDialog::backdrop,
html[data-theme="light"] #app dialog::backdrop {
 background:rgba(248,252,255,.80)!important;
}

/* Prévia acessível de anexos não-imagem (PDF, áudio, vídeo e documentos). */
#app .pastePreview .pastePreviewFileIcon{
 display:grid;place-items:center;flex:0 0 52px;
 width:52px;height:60px;border-radius:8px;
 background:var(--j-soft);border:1px solid var(--j-line);
 color:var(--j-blue);font:800 12px 'IBM Plex Sans',sans-serif;
}
#app .pastePreview .pastePreviewFileIcon.hidden,
#app .pastePreview img.hidden{display:none!important}

/* Novo atendimento: subtítulo de cadastro alinhado aos campos, sem faixa destacada. */
#dialog .contactNewSection,
#dialog .contactNewSection:hover,
#dialog .contactNewSection:focus-visible{
 display:block;
 box-sizing:border-box;
 width:100%;
 margin:16px 0 8px;
 padding:13px 0 0;
 border:0;
 border-top:1px solid var(--j-line);
 border-radius:0;
 background:transparent!important;
 box-shadow:none!important;
 text-align:left;
 font:700 12px/1.4 'IBM Plex Sans',sans-serif;
 color:var(--j-blue);
}
#dialog .contactNewSection:focus-visible{outline:2px solid var(--j-blue);outline-offset:3px}


/* iOS Safari: evita zoom automático ao focar campos (<16px), sem desabilitar pinch-to-zoom. */
@media (max-width:760px) {
 html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
 input, textarea, select,
 #app input, #app textarea, #app select,
 dialog input, dialog textarea, dialog select,
 .appActionDialog input, .appActionDialog textarea, .appActionDialog select {
  font-size:16px!important;
 }
}

/* Mobile: cabeçalho em duas linhas, sem sobrepor a lista ou a conversa. */
@media (max-width:760px) {
 #app:not(.hidden){display:flex;flex-direction:column;height:100dvh;min-height:0;overflow:hidden}
 #app .appHeader{
  position:relative;z-index:2;box-sizing:border-box;
  flex:0 0 auto;width:100%;height:auto;min-height:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px 10px;padding:10px 12px;border-bottom:4px solid var(--j-gold);
 }
 #app .appHeader .brandwrap{flex:1 1 100%;width:100%;max-width:100%;gap:10px}
 #app .appHeader .brand{min-width:0;max-width:100%;font-size:clamp(11px,3vw,14px);overflow-wrap:break-word}
 #app .appHeader .brandLogo{width:49px;height:43px;flex:none}
 #app .appHeader .topActions{display:flex;flex:1 1 100%;justify-content:flex-end;align-items:center;gap:8px;min-width:0}
 #app .appHeader .connectionChip{min-width:0;max-width:calc(100vw - 102px);min-height:38px;padding:6px 10px}
 #app .appHeader .profileButton{min-width:44px;min-height:38px;padding:5px 8px}
 #app .layout{flex:1 1 auto;height:auto;min-height:0;overflow:hidden;position:relative}
 #app .layout>aside,#app .layout>.main{inset:0;height:100%;min-height:0}
 #app .roomTop{min-width:0}
 #app .roomIdentity{min-width:0;overflow-wrap:anywhere}
}

/* Cabeçalho compacto com detalhes expansíveis: apenas telas pequenas. */
.mobileRoomDetailsToggle{display:none}
@media(max-width:760px){
 #app .roomhead{padding:10px 12px 8px}
 #app .roomTop{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:0;min-height:0}
 #app #backToList{flex:0 0 36px;width:36px;height:38px;padding:6px;font-size:21px;justify-content:center}
 #app .roomAvatar{width:35px;height:35px;flex:0 0 35px}
 #app .roomIdentity{flex:1 1 100px;min-width:0;overflow:hidden}
 #app .roomNameLine{gap:5px;flex-wrap:nowrap}
 #app .roomNameLine strong{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #app .roomIdentityMeta{font-size:11px;margin-top:2px;gap:4px}
 #app #phone{display:none}
 #app .mobileRoomDetailsToggle{display:inline-flex;flex:0 0 auto;align-items:center;gap:4px;padding:7px 8px;font-size:12px;white-space:nowrap}
 #app .mobileRoomDetailsToggle[aria-expanded=true] span{transform:rotate(180deg)}
 #app .roomActions{width:100%;display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;padding:3px 0 4px;margin:0;scrollbar-width:none}
 #app .roomActions::-webkit-scrollbar{display:none}
 #app .roomActions>button,#app .roomActions .moreMenu>button{font-size:12px;padding:7px 9px;white-space:nowrap;min-height:34px}
 #app .roomActions .moreMenu{flex:0 0 auto}
 #app .roomMeta{display:none!important}
 #app .roomhead.mobileDetailsExpanded .roomMeta{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px 0 4px;margin-top:8px}
 #app .roomhead.mobileDetailsExpanded .roomMeta .vehicleGroup{grid-column:1/-1}
 #app .roomhead.mobileDetailsExpanded #phone{display:inline}
 #app .roomhead.mobileDetailsExpanded .roomIdentityMeta{flex-wrap:wrap}
}

/* Menus no Safari iOS: impedir corte em contêiner rolável e garantir empilhamento. */
@media (max-width:760px) {
 #app .appHeader{z-index:500;overflow:visible;isolation:isolate}
 #app .appHeader .topActions,
 #app .appHeader .userMenu{overflow:visible}
 #app .appHeader .userMenu{z-index:510}
 #app .appHeader #profileMenu{
  position:absolute;top:calc(100% + 8px);right:0;left:auto;
  z-index:520;max-width:min(290px,calc(100vw - 24px));
  max-height:calc(100dvh - 190px);overflow-y:auto;
  -webkit-overflow-scrolling:touch;
 }
 #app .roomhead{position:relative;z-index:20;overflow:visible}
 #app .roomTop,#app .roomActions,#app .roomActions .moreMenu{
  overflow:visible;overscroll-behavior:auto;
 }
 #app .roomActions{flex-wrap:wrap;scrollbar-width:auto}
 #app .roomActions .moreMenu{position:relative;z-index:30}
 #app #roomMoreMenu{
  position:absolute;right:0;left:auto;top:calc(100% + 6px);
  z-index:40;width:min(265px,calc(100vw - 28px));max-width:calc(100vw - 28px);
  max-height:min(55dvh,410px);overflow-y:auto;
  -webkit-overflow-scrolling:touch;
 }
}

/* Mobile: cabeçalho de uma única linha, menu de usuário com saída acessível. */
.mobileLogout{display:none!important}
@media(max-width:760px){
 #app .appHeader{
  display:flex!important;flex-wrap:nowrap!important;align-items:center!important;
  justify-content:space-between!important;gap:8px!important;
  padding:8px 12px!important;min-height:66px!important;height:auto!important;
 }
 #app .appHeader .brandwrap{
  flex:1 1 auto!important;width:auto!important;max-width:calc(100% - 58px)!important;
  min-width:0!important;gap:8px!important;
 }
 #app .appHeader .brandLogo{
  width:43px!important;height:43px!important;flex:0 0 43px!important;
 }
 #app .appHeader .brand{
  min-width:0!important;max-width:100%!important;
  font-size:12px!important;line-height:1.22!important;
  overflow:hidden!important;display:-webkit-box!important;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
 }
 #app .appHeader .brand small{
  display:block!important;margin-top:3px!important;
  font-size:9px!important;letter-spacing:.5px!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
 }
 #app .appHeader .topActions{
  flex:0 0 auto!important;width:auto!important;min-width:0!important;
  gap:5px!important;justify-content:flex-end!important;
 }
 #app .appHeader .connectionChip,#app .appHeader .headerChip{
  display:none!important;
 }
 #app .appHeader .userMenu{position:relative!important;flex:0 0 auto}
 #app .appHeader .profileButton{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:44px!important;min-width:44px!important;min-height:44px!important;
  height:44px!important;padding:5px!important;gap:3px!important;
 }
 #app .appHeader .profileButton #who{display:none!important}
 #app .appHeader #logout{display:none!important}
 #app .appHeader #profileMenu{
  position:absolute!important;top:calc(100% + 8px)!important;right:0!important;
  z-index:520!important;width:min(280px,calc(100vw - 24px))!important;
  max-width:calc(100vw - 24px)!important;
  max-height:min(65dvh,450px)!important;overflow-y:auto!important;
  box-sizing:border-box!important;overscroll-behavior:contain;
 }
 #app .appHeader #profileMenu .mobileLogout{
  display:block!important;width:100%!important;min-height:42px!important;
  color:#f07c7c!important;border-top:1px solid var(--j-line)!important;
  margin-top:9px!important;padding-top:11px!important;
 }
 #app .appHeader #profileMenu.hidden{display:none!important}
 #app .appHeader{overflow:visible!important}
}

/* Correção da proporção do avatar no cabeçalho mobile. */
@media (max-width:760px) {
 #app .appHeader .profileButton {
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:46px!important;min-width:46px!important;max-width:46px!important;
  height:46px!important;min-height:46px!important;max-height:46px!important;
  box-sizing:border-box!important;padding:5px!important;gap:3px!important;
  flex:0 0 46px!important;border-radius:12px!important;
 }
 #app .appHeader .profileButton #userInitial {
  display:grid!important;place-items:center!important;
  width:30px!important;height:30px!important;
  min-width:30px!important;min-height:30px!important;
  max-width:30px!important;max-height:30px!important;
  flex:0 0 30px!important;aspect-ratio:1/1!important;
  border-radius:50%!important;line-height:1!important;
  box-sizing:border-box!important;padding:0!important;
 }
}

/* Mobile: avatar sem moldura externa; apenas círculo e seta discretos. */
@media (max-width:760px) {
 #app .appHeader .userMenu .profileButton {
  width:auto!important;min-width:0!important;max-width:none!important;
  height:44px!important;min-height:44px!important;max-height:44px!important;
  flex:0 0 auto!important;gap:5px!important;padding:3px 0 3px 3px!important;
  background:transparent!important;border:0!important;
  box-shadow:none!important;outline-offset:2px!important;border-radius:0!important;
  color:var(--j-ink)!important;
 }
 #app .appHeader .userMenu .profileButton:hover,
 #app .appHeader .userMenu .profileButton:active {
  background:transparent!important;box-shadow:none!important;
 }
 #app .appHeader .userMenu .profileButton #userInitial {
  width:34px!important;height:34px!important;
  min-width:34px!important;min-height:34px!important;
  max-width:34px!important;max-height:34px!important;
  flex:0 0 34px!important;border-radius:50%!important;
 }
}

/* Menu "Mais ações" mobile: ancorar no cabeçalho da conversa, não no botão.
   Evita que o dropdown extrapole a lateral esquerda no Safari iOS. */
@media (max-width:760px) {
 #app .roomhead {position:relative!important;overflow:visible!important}
 #app .roomhead .roomActions,
 #app .roomhead .roomActions .moreMenu {overflow:visible!important}
 #app .roomhead .roomActions .moreMenu {
  position:static!important;
 }
 #app .roomhead #roomMoreMenu {
  position:absolute!important;
  top:calc(100% + 4px)!important;
  right:12px!important;
  left:auto!important;
  width:min(265px,calc(100vw - 24px))!important;
  min-width:0!important;
  max-width:calc(100vw - 24px)!important;
  box-sizing:border-box!important;
  z-index:600!important;
  max-height:min(55dvh,410px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
 }
 #app .roomhead #roomMoreMenu.hidden {display:none!important}
}

/* Indicadores em tempo real das filas internas (funcionários e fornecedores). */
#app .listTitle [data-filter="employees"],
#app .listTitle [data-filter="suppliers"]{display:inline-flex;align-items:center;justify-content:center;gap:6px}
#app .listTitle .categoryUnreadBadge{
 display:inline-flex;justify-content:center;align-items:center;
 min-width:19px;height:19px;padding:0 5px;box-sizing:border-box;
 border-radius:999px;background:#e04542;color:#fff;
 font:700 11px/1 'IBM Plex Sans',sans-serif;letter-spacing:0;
}
#app .listTitle .categoryUnreadBadge.hidden{display:none!important}
#app .listTitle button.categoryHasUnread{
 color:var(--j-blue);border-color:var(--j-blue);
 background:color-mix(in srgb,var(--j-blue) 9%,var(--j-panel));
 font-weight:700;
}
@media(max-width:760px){
 #app .listTitle [data-filter="employees"],
 #app .listTitle [data-filter="suppliers"]{gap:4px}
 #app .listTitle .categoryUnreadBadge{min-width:17px;height:17px;font-size:10px;padding:0 4px}
}

/* Prévia compacta de mídia na lista de conversas, inclusive mobile. */
#app .conversationMediaPreview{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .conversationMediaIcon{display:inline-grid;place-items:center;flex:0 0 18px;width:18px;height:18px;border:1px solid var(--j-line);border-radius:5px;color:var(--j-muted);font-size:12px;font-weight:700}
#app .conversationMediaDuration{font-variant-numeric:tabular-nums;color:var(--j-muted);font-size:11px;flex:none}
#app .conversationMediaCaption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* Desktop: coluna de atendimentos ampliada e tipografia mais legível. */
@media (min-width:1100px){
 #app .layout{grid-template-columns:clamp(410px,32vw,480px) minmax(0,1fr)}
 #app .layout>aside{width:auto;max-width:none;min-width:0}
 #app .asideTitle strong{font-size:21px}
 #app #newConversation{min-height:48px;font-size:15px}
 #app .stats .stat b{font-size:27px}
 #app .stats .stat span{font-size:12px}
 #app .searchWrap input{font-size:14px}
 #app .filters button{font-size:13px}
 #app .listTitle{font-size:12px}
 #app .listTitle button{font-size:12px}
 #app #conversationList .item{padding:17px 16px;gap:13px}
 #app #conversationList .conversationHeading strong{font-size:16px;line-height:1.3}
 #app #conversationList .conversationId{font-size:12px}
 #app #conversationList .conversationPreview{font-size:14px;line-height:1.5}
 #app #conversationList .conversationFooter{font-size:12px;line-height:1.45}
 #app #conversationList .conversationStatus{font-size:12px}
}

/* Conversas compactas: cartões discretos, menos espaço morto (desktop). */
@media (min-width:761px){
 #app #conversationList{display:flex;flex-direction:column;gap:5px;padding:7px 9px}
 #app #conversationList .item{
  margin:0!important;min-height:0!important;
  padding:10px 12px!important;gap:10px!important;
  border:1px solid var(--j-line)!important;
  border-left:3px solid transparent!important;
  border-radius:10px!important;
  background:var(--j-panel);
  box-shadow:none!important;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;
 }
 #app #conversationList .item:hover{background:var(--j-soft);border-color:var(--j-blue)!important}
 #app #conversationList .item.active{
  border-left-color:var(--j-blue)!important;
  background:var(--j-soft);
  box-shadow:0 2px 8px rgba(0,0,0,.06)!important;
 }
 #app #conversationList .conversationContent{min-width:0;gap:3px}
 #app #conversationList .conversationHeading{margin:0;gap:4px}
 #app #conversationList .conversationHeading strong{font-size:15px;line-height:1.25}
 #app #conversationList .conversationStatus{margin:2px 0;font-size:11px}
 #app #conversationList .conversationPreview{
  margin:3px 0 0;padding:0;line-height:1.35;font-size:13px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 }
 #app #conversationList .conversationFooter{
  margin:6px 0 0;padding:5px 0 0;
  line-height:1.3;font-size:11px;
 }
 #app #conversationList .contactAvatar{flex-shrink:0}
}

/* Refinamento da lista desktop: cards íntegros, hierarquia leve e badges legíveis. */
@media(min-width:761px){
 #app #conversationList{
  box-sizing:border-box;display:flex;flex-direction:column;
  gap:5px;padding:5px 4px 10px!important;
  overflow-x:hidden;overflow-y:auto;
 }
 #app #conversationList .item{
  box-sizing:border-box;flex:0 0 auto;
  width:100%;max-width:100%;
  border:1px solid var(--j-line)!important;
  border-left:3px solid transparent!important;
  border-radius:7px!important;
  padding:10px 11px!important;
  min-height:0!important;margin:0!important;
  overflow:visible;
 }
 #app #conversationList .item.active{border-left-color:var(--j-blue)!important}
 #app #conversationList .conversationContent{flex:1;min-width:0}
 #app #conversationList .conversationHeading strong{font-weight:600!important;font-size:14px}
 #app #conversationList .conversationPreview{font-weight:400!important;font-size:13px}
 #app #conversationList .conversationStatus,
 #app #conversationList .conversationStatus span{font-weight:500!important}
 #app #conversationList .conversationFooter,
 #app #conversationList .conversationFooter span{font-weight:400!important}
 #app #conversationList .conversationId{font-weight:500!important}
 #app #conversationList .unreadCount{font-weight:700!important}
 #app #conversationList .conversationMediaPreview{font-weight:400!important}
}
#app .listTitle button.categoryHasUnread{
 color:var(--j-ink)!important;
 background:var(--j-soft)!important;
 border-color:var(--j-blue)!important;
 font-weight:600!important;
}
#app .listTitle button.categoryHasUnread .categoryUnreadBadge{
 color:#fff!important;background:#db3f46!important;font-weight:700!important;
}


/* ===== Mobile inbox v2: compacto, consistente e isolado do desktop ===== */
@media (max-width:760px){
 #app .appHeader{
  display:flex!important;flex-wrap:nowrap!important;align-items:center!important;
  gap:10px!important;padding:10px 14px!important;min-height:68px!important;
 }
 #app .appHeader .brandwrap{
  display:flex!important;flex:1 1 auto!important;min-width:0!important;
  width:auto!important;max-width:none!important;gap:9px!important;align-items:center!important;
 }
 #app .appHeader .brandLogo{width:48px!important;height:44px!important;object-fit:contain;flex:none!important}
 #app .appHeader .brand{
  font-size:0!important;line-height:1.15!important;white-space:nowrap!important;
  overflow:hidden!important;max-width:100%!important;
 }
 #app .appHeader .brand::before{
  content:"JULIANO AR CONDICIONADO";display:block;color:#ffffff!important;font-family:'Exo 2',sans-serif;
  font-size:16px;font-weight:750;letter-spacing:.15px;
 }
 #app .appHeader .brand small{
  display:block!important;font:500 10px/1.4 'IBM Plex Sans',sans-serif!important;
  letter-spacing:.4px!important;white-space:nowrap!important;margin-top:2px!important;
 }
 #app .appHeader .topActions{flex:0 0 auto!important;margin:0!important;width:auto!important}
 #app .appHeader .profileButton{min-width:44px;min-height:44px}
 #app .layout>aside{min-width:0!important;overflow-x:hidden}
 #app .asideTop{padding:14px 14px 10px!important;gap:11px!important}
 #app .asideTitle{margin:0!important}
 #app .asideTitle strong{font:700 19px/1.2 'Exo 2',sans-serif!important;letter-spacing:.3px!important}
 #app #newConversation{padding:11px 16px!important;min-height:42px!important;border-radius:10px!important;font-size:14px!important}
 #app .stats{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:9px!important;width:100%!important;margin:0!important;
 }
 #app .stats .stat,#app .stats .stat:nth-child(3){
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  min-width:0!important;min-height:75px!important;padding:10px 5px!important;
  border:1px solid var(--j-line)!important;border-radius:11px!important;
  background:var(--j-soft)!important;text-align:center!important;
 }
 #app .stats .stat b{font:700 26px/1.1 'Exo 2',sans-serif!important;color:var(--j-ink)!important}
 #app .stats .stat:nth-child(2) b{color:#2cbf93!important}
 #app .stats .stat:nth-child(3) b{color:var(--j-gold)!important}
 #app .stats .stat span{font-size:11px!important;line-height:1.3!important;color:var(--j-muted)!important}
 #app .searchWrap{margin:1px 0!important}
 #app .searchWrap input{min-height:43px!important}
 #app .filters{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:3px!important;padding:4px!important}
 #app .filters button{min-width:0!important;min-height:39px!important;padding:7px 2px!important;font-size:11px!important;white-space:nowrap!important}
 #app .listTitle{display:flex!important;gap:6px!important;align-items:center!important;padding:10px 13px!important}
 #app .listTitle>span{margin-right:auto!important;font-size:11px!important;white-space:nowrap!important}
 #app .listTitle button{font-size:10px!important;padding:7px 8px!important;white-space:nowrap!important}
 #app #conversationList{
  display:flex!important;flex-direction:column!important;gap:6px!important;
  padding:7px 9px 18px!important;overflow-x:hidden!important;
 }
 #app #conversationList .item{
  box-sizing:border-box!important;flex:0 0 auto!important;width:100%!important;
  min-height:0!important;padding:12px!important;margin:0!important;gap:11px!important;
  border:1px solid var(--j-line)!important;border-left:3px solid transparent!important;
  border-radius:10px!important;align-items:flex-start!important;overflow:hidden!important;
 }
 #app #conversationList .item.active{border-left-color:var(--j-blue)!important}
 #app #conversationList .contactAvatar{
  flex:0 0 42px!important;width:42px!important;height:42px!important;
  border-radius:50%!important;font-size:16px!important;
 }
 #app #conversationList .conversationContent{flex:1!important;min-width:0!important;display:flex!important;flex-direction:column!important;gap:3px!important}
 #app #conversationList .conversationHeading{display:flex!important;align-items:center!important;gap:7px!important;margin:0!important;min-width:0!important}
 #app #conversationList .conversationHeading strong{
  display:block!important;flex:1!important;min-width:0!important;
  font-size:14px!important;line-height:1.25!important;white-space:nowrap!important;
  overflow:hidden!important;text-overflow:ellipsis!important;
 }
 #app #conversationList .conversationId{display:inline!important;flex:none!important;margin:0!important;font-size:10px!important}
 #app #conversationList .conversationStatus{margin:1px 0!important;font-size:11px!important}
 #app #conversationList .conversationPreview{
  margin:3px 0!important;font-size:12px!important;line-height:1.4!important;
  font-weight:400!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
 }
 #app #conversationList .conversationFooter{
  display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;
  gap:8px!important;border:0!important;padding:2px 0 0!important;margin:0!important;font-size:10px!important;
 }
 #app #conversationList .conversationFooter span{
  display:block!important;min-width:0!important;max-width:65%!important;
  margin:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
 }
 #app #conversationList .conversationFooter span:last-child{max-width:44%!important;text-align:right!important}
}
@media (max-width:365px){
 #app .listTitle{gap:4px!important;padding-inline:8px!important}
 #app .listTitle button{font-size:9px!important;padding-inline:5px!important}
 #app .appHeader .brand::before{font-size:14px}
 #app .stats{gap:5px!important}
}

/* Cabeçalho mobile com contraste em ambos os temas. */
@media(max-width:760px){
 #app .appHeader .brand::before{color:#fff!important;font-size:clamp(12px,3.15vw,16px)!important;letter-spacing:-.2px!important;white-space:nowrap!important}
 #app .appHeader .brand small{color:#c9def0!important;opacity:1!important}
 #app .appHeader .brandwrap{min-width:0!important}
 #app .appHeader .brand{min-width:0!important;flex:1!important;max-width:100%!important}
}

/* Mobile: menu de anexos deve ficar acima da rolagem da conversa. */
@media(max-width:760px){
 #app .layout>.main{isolation:isolate}
 #app .main .composer{position:relative!important;z-index:80!important;overflow:visible!important;isolation:isolate}
 #app .main #messages{position:relative!important;z-index:0!important}
 #app .composer .composerMobileMenu{position:relative!important;z-index:81!important;overflow:visible!important}
 #app .composer .composerMoreMenu{z-index:82!important;bottom:calc(100% + 10px)!important}
}

/* Prévia de áudio gravado — Juliano */
#app .pastePreview:has(.recordPreviewCard:not(.hidden)){position:relative;display:flex;flex-wrap:wrap;padding:10px 14px;background:var(--j-panel);border-top:1px solid var(--j-line)}
#app .pastePreview:has(.recordPreviewCard:not(.hidden)) #pastePreviewFileIcon,#app .pastePreview:has(.recordPreviewCard:not(.hidden)) #pastePreviewName{display:none!important}
#app .recordPreviewCard{flex:1 1 100%;display:grid;gap:10px;min-width:0;box-sizing:border-box;padding:12px 14px;border:1px solid #214d78;border-radius:14px;background:#10243a;color:#fff}
#app .recordPreviewCard.hidden{display:none!important}
#app .recordPreviewHead{display:flex;align-items:center;gap:10px;padding-right:38px}
#app .recordPreviewBadge{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:#1c4263;color:#eab43a;font-size:20px}
#app .recordPreviewLabel{display:grid;gap:2px;min-width:0;flex:1}
#app .recordPreviewLabel strong{font-size:13px;color:#fff}
#app .recordPreviewLabel small{font-size:11px;color:#a9bfd6}
#app .recordPreviewControls{display:flex;align-items:center;gap:10px;min-width:0}
#app .recordPreviewToggle{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;min-height:42px;padding:0;border:0;border-radius:50%;background:#0762ce;color:#fff;font-size:18px}
#app .recordPreviewTimeline{flex:1;min-width:0;display:grid;gap:6px}
#app .recordPreviewTimeline input{appearance:none;-webkit-appearance:none;width:100%;height:6px;margin:0;padding:0;border:0;border-radius:100px;background:linear-gradient(to right,#eab43a var(--preview-progress,0%),#3a5671 var(--preview-progress,0%));cursor:pointer}
#app .recordPreviewTimeline input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border:3px solid #0762ce;border-radius:50%;background:white}
#app .recordPreviewTimeline input::-moz-range-thumb{width:9px;height:9px;border:3px solid #0762ce;border-radius:50%;background:white}
#app .recordPreviewTimes{display:flex;justify-content:space-between;color:#a9bfd6;font-size:11px;font-variant-numeric:tabular-nums}
#app .recordPreviewSpeed{min-height:36px;padding:5px 8px;min-width:42px;border:1px solid #365675;border-radius:9px;background:#1a3855;color:white}
#app .recordPreviewToggle:focus-visible,#app .recordPreviewSpeed:focus-visible,#app .recordPreviewTimeline input:focus-visible{outline:2px solid #eab43a;outline-offset:2px}
#app .pastePreview:has(.recordPreviewCard:not(.hidden)) #pastePreviewRemove{position:absolute;top:15px;right:20px;z-index:2}
@media(max-width:600px){#app .pastePreview:has(.recordPreviewCard:not(.hidden)){padding:9px 12px}#app .recordPreviewCard{padding:11px 12px;border-radius:12px}}


/* Correção de especificidade: player de áudio compacto no mobile e desktop */
#app .pastePreview .recordPreviewCard{width:100%;flex:1 1 100%;max-width:100%;gap:8px;padding:10px 12px;border-radius:11px}
#app .pastePreview .recordPreviewHead{display:flex;gap:8px;align-items:center;min-height:32px;padding-right:38px}
#app .pastePreview .recordPreviewHead .recordPreviewBadge{display:grid;place-items:center;flex:0 0 30px!important;width:30px!important;min-width:30px!important;max-width:30px!important;height:30px!important;overflow:hidden;border-radius:8px;font-size:17px;line-height:1}
#app .pastePreview .recordPreviewHead .recordPreviewLabel{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;flex:1 1 auto!important;min-width:0;overflow:visible;white-space:normal}
#app .pastePreview .recordPreviewLabel strong{font-size:12px;line-height:1.2}
#app .pastePreview .recordPreviewLabel small{font-size:10px;line-height:1.2}
#app .pastePreview .recordPreviewControls{display:flex;align-items:center;gap:10px;min-height:38px}
#app .pastePreview .recordPreviewControls .recordPreviewToggle{flex:0 0 38px!important;width:38px!important;min-width:38px!important;max-width:38px!important;height:38px!important;min-height:38px!important;padding:0!important;font-size:16px;line-height:1}
#app .pastePreview .recordPreviewControls .recordPreviewTimeline{display:flex;flex:1 1 auto!important;flex-direction:column;gap:5px;min-width:0;width:auto}
#app .pastePreview .recordPreviewTimeline input#recordPreviewSeek{display:block;appearance:none;-webkit-appearance:none;box-sizing:border-box;width:100%!important;min-width:0;height:5px!important;min-height:5px!important;max-height:5px!important;margin:7px 0!important;padding:0!important;border:0!important;border-radius:100px!important;box-shadow:none!important;background:linear-gradient(to right,#eab43a var(--preview-progress,0%),#3a5671 var(--preview-progress,0%))!important;touch-action:pan-y}
#app .pastePreview .recordPreviewTimeline input#recordPreviewSeek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px!important;height:14px!important;border:3px solid #0762ce;border-radius:50%;background:#fff}
#app .pastePreview .recordPreviewTimeline input#recordPreviewSeek::-moz-range-thumb{width:10px;height:10px;border:3px solid #0762ce;border-radius:50%;background:#fff}
#app .pastePreview .recordPreviewTimes{display:flex;justify-content:space-between;width:100%;line-height:1.1}
#app .pastePreview .recordPreviewTimes span{display:inline!important;flex:0 0 auto!important;width:auto!important;min-width:0;overflow:visible}
#app .pastePreview .recordPreviewControls .recordPreviewSpeed{flex:0 0 auto!important;width:40px!important;min-width:40px!important;max-width:40px!important;height:34px!important;min-height:34px!important;padding:0!important;font-size:12px}
#app .pastePreview:has(.recordPreviewCard:not(.hidden)) #pastePreviewRemove{right:18px;top:17px;min-width:30px;min-height:30px;padding:4px 8px}
@media(max-width:600px){
 #app .pastePreview:has(.recordPreviewCard:not(.hidden)){padding:8px 12px}
 #app .pastePreview .recordPreviewCard{padding:10px 11px;gap:8px}
 #app .pastePreview .recordPreviewControls{gap:9px}
 #app .pastePreview:has(.recordPreviewCard:not(.hidden)) #pastePreviewRemove{right:21px;top:15px}
}


/* Navegação mobile: seta discreta e proporcional ao avatar */
@media(max-width:760px){
 #app .roomTop #backToList.backToList{
  display:inline-flex!important;align-items:center;justify-content:center;
  flex:0 0 36px!important;width:36px!important;min-width:36px!important;
  max-width:36px!important;height:36px!important;min-height:36px!important;
  padding:0!important;margin:0 2px 0 0;border:1px solid var(--j-line)!important;
  border-radius:10px!important;background:transparent!important;
  color:var(--j-ink)!important;box-shadow:none!important;font-size:0!important;
 }
 #app .roomTop #backToList.backToList svg{display:block;flex:none;width:19px;height:19px;stroke:currentColor}
 #app .roomTop #backToList.backToList:active{background:var(--j-soft)!important}
 #app .roomTop #backToList.backToList:focus-visible{outline:2px solid var(--j-blue);outline-offset:2px}
}