body{font-family:Inter,system-ui,sans-serif;background:#f7f8fa;color:#122033}.navbar{min-height:62px}.navbar-brand{letter-spacing:-1px}.nav-link{margin-right:.35rem}.card{border:0;border-radius:.75rem}.login-bg{min-height:100vh;display:grid;place-items:center;background:#081226}.login-box{width:min(420px,calc(100% - 2rem));background:#fff;border-radius:1rem;padding:2rem;box-shadow:0 1rem 3rem #0005}
.atendimento-page{height:100vh;overflow:hidden}.atendimento-page>.navbar{margin-bottom:0!important}.atendimento-main{height:calc(100vh - 62px);display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;padding-bottom:16px}.atendimento-title{flex:0 0 auto}.chat-layout{display:grid;grid-template-columns:25% 50% 25%;height:100%;min-height:0;overflow:hidden}.chat-list,.chat-profile{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;border-right:1px solid #dee2e6;background:#fff}.chat-profile{border-left:1px solid #dee2e6;border-right:0}.chat-contact{position:relative;display:flex;align-items:center;gap:.7rem;padding:1rem;color:inherit;text-decoration:none;border-bottom:1px solid #eee}.chat-contact.active,.chat-contact:hover{background:#eaf7f0}.chat-contact-copy{min-width:0;flex:1}.chat-contact small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-contact .badge{position:absolute;right:10px;top:14px}.chat-contact-avatar,.profile-avatar{display:inline-grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;overflow:hidden;background:#148f5a;color:#fff}.chat-contact-avatar img,.profile-avatar img{width:100%;height:100%;object-fit:cover}.profile-avatar-lg{width:82px;height:82px;font-size:2rem}.chat-main{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-width:0;min-height:0;overflow:hidden;background:#eee7dd}.chat-main header{min-width:0}.chat-messages{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:1rem;background:#eee7dd}.bubble{position:relative;max-width:72%;padding:.7rem .8rem;margin:.5rem 0;border-radius:.6rem;box-shadow:0 1px 1px #0001;white-space:pre-wrap}.bubble.sent{margin-left:auto;background:#d9fdd3}.bubble.received{background:#fff}.bubble small{display:block;text-align:right;font-size:.7rem;color:#667}.bubble-actions{position:absolute;right:.35rem;top:.25rem;display:flex;gap:.2rem;opacity:0;transition:opacity .15s}.bubble:hover .bubble-actions,.bubble:focus-within .bubble-actions{opacity:1}.bubble-actions button{border:0;border-radius:50%;width:28px;height:28px;background:#fff;color:#53616d;box-shadow:0 1px 5px #0002}.quoted-message{margin:-.2rem 0 .55rem;padding:.45rem .6rem;border-left:4px solid #148f5a;border-radius:.25rem;background:#0000000d;color:#52606b;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-media-image,.chat-media-video{max-height:260px}.chat-composer{background:#fff;border-top:1px solid #dee2e6}.reply-preview{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.55rem 1rem 0;padding:.5rem .7rem;border-left:4px solid #148f5a;border-radius:.3rem;background:#f1f4f6}.reply-preview div{min-width:0}.reply-preview b,.reply-preview span{display:block}.reply-preview span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#667}.chat-send{display:flex;gap:.6rem;padding:1rem;background:#fff}.chat-send button{flex:0 0 42px;width:42px;height:42px}.template-toolbar button{min-width:38px}
@media(max-width:992px){.chat-layout{grid-template-columns:35% 65%}.chat-profile{display:none}}@media(max-width:650px){.atendimento-page{overflow:auto}.atendimento-main{height:calc(100vh - 62px);padding-bottom:0}.chat-layout{grid-template-columns:1fr}.chat-list{display:none}}
@media(hover:none){.bubble-actions{opacity:.65}}
.bubble{width:fit-content;min-width:86px;max-width:min(72%,680px);padding:.48rem .62rem .3rem;margin:.22rem 0;border-radius:.48rem;white-space:normal;word-break:break-word}.bubble.received{margin-right:auto;border-top-left-radius:.15rem}.bubble.sent{margin-left:auto;border-top-right-radius:.15rem}.bubble-text{white-space:pre-wrap;line-height:1.35}.bubble small{margin-top:.12rem;line-height:1}.chat-messages{padding:.7rem 1rem}.chat-send{padding:.65rem .8rem}.chat-send button{width:40px;height:40px;flex-basis:40px}.chat-composer .form-control{min-height:40px}.chat-contact{padding:.72rem 1rem}.chat-media-image,.chat-media-video{display:block;max-width:min(420px,100%)}
.chat-list-filter{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:.4rem;padding:.65rem .75rem;background:#fff;border-bottom:1px solid #dee2e6}.chat-list-filter .btn{border-radius:999px}.chat-list-empty{padding:1.25rem;text-align:center;color:#6c757d}.chat-media-unavailable{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem;color:#6c757d;text-decoration:none}
.chat-send textarea.form-control{border-radius:1.25rem;resize:none;min-height:40px;max-height:120px;overflow-y:auto;line-height:1.35}.message-status{display:inline-block;margin-left:.2rem;font-size:.72rem;line-height:1}.message-status.status-pending{color:#667781}.message-status.status-sent{color:#667781}.message-status.status-delivered{color:#667781}.message-status.status-read{color:#53bdeb}.message-status.status-error{color:#e53935}

@media(max-width:991.98px){
  .app-nav-container{padding-left:1rem;padding-right:1rem}
  .navbar .navbar-collapse{padding:.75rem 0 1rem}
  .navbar .nav-link{display:flex;align-items:center;gap:.55rem;padding:.85rem .2rem;border-bottom:1px solid rgba(255,255,255,.08);font-size:1rem}
  .navbar .nav-link i{width:1.35rem;text-align:center}
  .nav-user-actions{align-items:stretch!important;gap:.75rem!important;padding-top:.75rem}
  .nav-user-actions form,.nav-user-actions button{width:100%}
}

@media(max-width:767.98px){
  html,body{max-width:100%;overflow-x:hidden}
  body{font-size:15px;background:#f4f6f8}
  main.container,main.container-fluid{width:100%;max-width:none;padding-left:.75rem!important;padding-right:.75rem!important}
  h1.h2,.h2{font-size:1.45rem}
  .card{border-radius:.65rem}
  .btn{min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:.35rem}
  .btn-sm{min-height:38px;padding:.42rem .62rem}
  .btn-group{display:inline-flex;flex-wrap:nowrap;align-items:center}
  .btn-group>.btn,.btn-group>a.btn{min-width:38px}
  .border-bottom.pb-2,.border-bottom.pt-3{gap:.75rem;align-items:flex-start!important}
  .dashboard-metrics .card-body{padding:1rem}
  .dashboard-metrics h2{font-size:1.6rem}
  #filtros.card{position:sticky;top:0;z-index:12;border-radius:0;margin-left:-.75rem;margin-right:-.75rem;border-left:0;border-right:0;box-shadow:0 .35rem 1rem #00000012}
  #filtros .row>[class*=col-]{width:100%}
  #filtros .btn{width:100%}
  .table-responsive{overflow:visible}
  table.mobile-cards,table{border-collapse:separate;border-spacing:0}
  .table-responsive table thead{display:none}
  .table-responsive table,.table-responsive tbody,.table-responsive tr,.table-responsive td{display:block;width:100%}
  .table-responsive tbody tr{margin:.75rem 0;padding:.75rem;border:1px solid #e2e7ee;border-radius:.75rem;background:#fff;box-shadow:0 .2rem .65rem #12203310}
  .table-responsive tbody tr td{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:.42rem .1rem!important;border:0!important;text-align:right!important}
  .table-responsive tbody tr td::before{content:attr(data-label);flex:0 0 42%;max-width:42%;font-weight:700;color:#53616d;text-align:left}
  .table-responsive tbody tr td:first-child{display:block;text-align:left!important;padding-top:.1rem!important}
  .table-responsive tbody tr td:first-child::before{display:none}
  .table-responsive tbody tr td:last-child{display:block;text-align:left!important;padding-top:.7rem!important;border-top:1px solid #eef1f4!important}
  .table-responsive tbody tr td:last-child::before{display:block;max-width:none;margin-bottom:.45rem}
  .table-responsive tbody tr td:last-child .btn-group{display:flex;width:100%;gap:.35rem}
  .table-responsive tbody tr td:last-child .btn-group>.btn,.table-responsive tbody tr td:last-child .btn-group>a.btn{flex:1 1 0;border-radius:.45rem!important}
  .card-footer{display:grid!important;gap:.75rem;text-align:center}
  .pagination{justify-content:center;flex-wrap:wrap;gap:.2rem}
  .pagination .page-link{min-width:38px;text-align:center;border-radius:.45rem}
  .swal2-popup{width:calc(100vw - 1rem)!important;max-width:calc(100vw - 1rem)!important;padding:1rem!important}
  .swal2-html-container{margin:.75rem 0 0!important;max-height:calc(100dvh - 220px);overflow:auto}
  .swal2-actions{width:100%;gap:.5rem}
  .swal2-actions .swal2-confirm,.swal2-actions .swal2-cancel{flex:1 1 0;margin:.2rem 0!important}
  .swal2-popup .row>[class*=col-]{width:100%}
  .swal2-popup input,.swal2-popup select,.swal2-popup textarea{font-size:16px}
  #config .card-body{padding:1rem}
  #config .mt-3.d-flex{display:grid!important}
  .template-toolbar{display:flex;flex-wrap:wrap;gap:.35rem}
  .template-toolbar .btn{border-radius:.35rem!important}
}

.chat-mobile-back,.chat-mobile-profile{display:none}.mobile-client-list{display:none}

@media(max-width:650px){
  body.atendimento-page{height:100dvh;overflow:hidden}
  .atendimento-page .navbar{min-height:58px}
  .atendimento-main{height:calc(100dvh - 58px);padding:0!important;grid-template-rows:auto minmax(0,1fr)}
  .atendimento-title{padding:.65rem .85rem!important;margin:0!important;background:#f7f8fa}
  .atendimento-title h1{font-size:1.2rem;margin:0}
  .atendimento-title small{font-size:.72rem}
  .chat-layout{height:100%;border-radius:0!important;border:0;grid-template-columns:1fr;box-shadow:none!important}
  .chat-list{display:block;height:100%;border-right:0}
  .chat-list-filter{padding:.6rem .75rem}
  .chat-contact{padding:.85rem .9rem}
  .chat-contact-avatar{width:46px;height:46px;flex-basis:46px}
  .chat-main,.chat-profile{display:none}
  .chat-layout.chat-no-number .chat-list{display:block}
  .chat-layout.chat-no-number .chat-main{display:none!important}
  .chat-layout.chat-has-number .chat-list{display:none!important}
  .chat-layout.chat-has-number .chat-main{display:grid!important}
  .chat-current-header{padding:.62rem .7rem!important;background:#f4ede4}
  .chat-current-header h5{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chat-mobile-back,.chat-mobile-profile{display:inline-flex;flex:0 0 40px;width:40px;height:40px;padding:0;border-radius:50%}
  .chat-messages{padding:.65rem .55rem .8rem}
  .bubble{max-width:88%;min-width:72px}
  .bubble-actions{opacity:.78;top:.25rem;right:.25rem}
  .bubble-actions button{width:30px;height:30px}
  .chat-media-image,.chat-media-video{max-width:100%;max-height:58dvh}
  .wa-audio-player{min-width:min(260px,78vw);gap:.4rem}
  .chat-composer{padding-bottom:max(0px,env(safe-area-inset-bottom))}
  .chat-send{gap:.45rem;padding:.55rem .55rem}
  .chat-send button{width:40px;height:40px;flex:0 0 40px;padding:0}
  .chat-send textarea.form-control{font-size:16px}
  .reply-preview{margin:.45rem .55rem 0}
  .chat-profile.mobile-open{position:fixed;inset:58px 0 0 0;z-index:1050;display:block;background:#fff;border:0;box-shadow:0 -1rem 2rem #0003}
  .chat-profile.mobile-open::before{content:'Toque aqui para fechar';position:sticky;top:0;display:block;padding:.6rem;text-align:center;background:#122033;color:#fff;font-size:.85rem}
  .chat-profile.mobile-open{cursor:pointer}
  .chat-profile.mobile-open>*{cursor:auto}
}

@media(max-width:767.98px){
  .clientes-card{background:transparent;box-shadow:none!important;border:0}
  .clientes-table{display:none!important}
  .mobile-client-list{display:grid;gap:.75rem}
  .mobile-client-card{padding:.85rem;border:1px solid #e2e7ee;border-radius:.85rem;background:#fff;box-shadow:0 .2rem .7rem #12203312}
  .mobile-client-head{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:.7rem}
  .mobile-client-avatar{width:46px;height:46px;flex-basis:46px}
  .mobile-client-title{min-width:0}
  .mobile-client-title h2{font-size:1rem;line-height:1.18;margin:0;word-break:break-word}
  .mobile-client-title small{display:block;color:#6c757d;word-break:break-word}
  .mobile-client-grid{display:grid;grid-template-columns:minmax(96px,38%) minmax(0,1fr);gap:.45rem .75rem;margin-top:.8rem;padding-top:.75rem;border-top:1px solid #eef1f4}
  .mobile-client-grid span{color:#667781;font-weight:700}
  .mobile-client-grid strong{min-width:0;text-align:right;word-break:break-word}
  .mobile-client-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem;margin-top:.8rem}
  .mobile-client-actions .btn{min-width:0;width:100%;padding:.48rem .2rem}
  .mobile-empty-state{padding:1.25rem;text-align:center;color:#6c757d;background:#fff;border-radius:.75rem}
}
