/* WAHAI v8.1 - WhatsApp-like UX, existing brand colors preserved */
:root{
  --pw-list-width:360px;
  --pw-detail-width:320px;
  --pw-wa-header:64px;
  --pw-wa-composer:70px;
  --pw-motion:cubic-bezier(.2,.72,.25,1);
}

/* Smooth but restrained navigation */
.view{opacity:0;transform:translateY(5px);transition:opacity .18s var(--pw-motion),transform .18s var(--pw-motion)}
.view.active{opacity:1;transform:none}
.sidebar,.main-area,.inbox-shell,.contact-detail-pane,.conversation-main,.mobile-bottom-nav{transition:width .22s var(--pw-motion),grid-template-columns .22s var(--pw-motion),transform .22s var(--pw-motion),opacity .18s var(--pw-motion)}
@media(prefers-reduced-motion:reduce){.view,.sidebar,.main-area,.inbox-shell,.contact-detail-pane,.conversation-main,.mobile-bottom-nav{transition:none!important}}

/* Modern controls while retaining established visual language */
input:not([type=checkbox]):not([type=radio]),textarea,select{
  border:1px solid var(--line)!important;
  border-radius:13px!important;
  background:var(--panel)!important;
  color:var(--ink)!important;
  min-height:44px;
  outline:none;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
textarea{min-height:auto}
input:not([type=checkbox]):not([type=radio]):focus,textarea:focus,select:focus{
  border-color:color-mix(in srgb,var(--navy) 52%,#fff)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 12%,transparent)!important;
}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%)!important;background-position:calc(100% - 17px) 19px,calc(100% - 12px) 19px!important;background-size:5px 5px,5px 5px!important;background-repeat:no-repeat!important;padding-right:36px!important}
.btn,.icon-btn,.text-btn{transition:transform .14s ease,background .14s ease,border-color .14s ease,box-shadow .14s ease}
.btn:active,.icon-btn:active{transform:scale(.97)}
.icon-btn.bordered:hover{border-color:#cdd5e1;background:#f7f9fc}

/* Desktop app shell: collapsible icon rail, without changing colors */
@media(min-width:901px){
  body.pw-sidebar-collapsed .sidebar{width:78px!important;padding-inline:10px!important}
  body.pw-sidebar-collapsed .main-area{margin-left:78px!important}
  body.pw-sidebar-collapsed .sidebar-brand div,
  body.pw-sidebar-collapsed .main-nav button b,
  body.pw-sidebar-collapsed .sidebar-foot .service-chip div,
  body.pw-sidebar-collapsed .sidebar-foot #logoutButton span{display:none!important}
  body.pw-sidebar-collapsed .sidebar-brand{justify-content:center;padding-inline:0}
  body.pw-sidebar-collapsed .sidebar-brand img{margin:0}
  body.pw-sidebar-collapsed .main-nav button{grid-template-columns:1fr!important;justify-items:center;padding:12px 8px!important}
  body.pw-sidebar-collapsed .nav-icon{width:auto!important}
  body.pw-sidebar-collapsed .nav-badge{position:absolute;right:6px;top:5px}
  body.pw-sidebar-collapsed .main-nav button{position:relative}
  body.pw-sidebar-collapsed .sidebar-foot .service-chip{justify-content:center;padding:10px 0}
}

/* Conversation = WhatsApp Web structure: list + chat, detail only on demand */
body.conversation-mode .content{padding:10px 12px 12px!important}
body.conversation-mode #view-conversations.active{height:100%;min-height:0}
body.conversation-mode .inbox-shell{
  display:grid!important;
  grid-template-columns:var(--pw-list-width) minmax(0,1fr)!important;
  height:100%!important;
  min-height:0!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:var(--panel)!important;
  box-shadow:0 10px 32px rgba(18,46,118,.07)!important;
}
body.conversation-mode .inbox-shell:has(.contact-detail-pane.open){grid-template-columns:var(--pw-list-width) minmax(0,1fr) var(--pw-detail-width)!important}
body.conversation-mode .inbox-list-pane{min-width:0!important;height:100%!important;background:var(--panel)!important;border-right:1px solid var(--line)!important}
body.conversation-mode .inbox-pane-head{min-height:68px!important;padding:14px 14px 8px!important}
body.conversation-mode .inbox-pane-head h2{margin-top:2px!important}
body.conversation-mode .search-box{margin:4px 12px 10px!important;border-radius:12px!important;background:#f3f5f8!important;border:0!important;min-height:42px!important}
body.conversation-mode .search-box input{border:0!important;box-shadow:none!important;background:transparent!important;min-height:40px!important}
body.conversation-mode .filter-tabs{padding:0 12px 9px!important;display:flex!important;gap:6px!important;overflow-x:auto!important;scrollbar-width:none!important}
body.conversation-mode .filter-tabs::-webkit-scrollbar{display:none}
body.conversation-mode .filter-tabs button{flex:0 0 auto!important;border-radius:999px!important;padding:7px 11px!important}
body.conversation-mode .conversation-list{min-height:0!important;height:100%!important;overflow-y:auto!important;background:var(--panel)!important}
body.conversation-mode .conversation-item{min-height:72px!important;padding:10px 12px!important;border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent)!important;border-radius:0!important;grid-template-columns:48px minmax(0,1fr) auto!important;gap:11px!important}
body.conversation-mode .conversation-item:hover{background:#f6f8fb!important}
body.conversation-mode .conversation-item.active{background:#edf3ff!important;box-shadow:inset 3px 0 var(--navy)!important}
body.conversation-mode .conversation-avatar{width:48px!important;height:48px!important;border-radius:50%!important;font-size:13px!important}
body.conversation-mode .conversation-title-line b{font-size:13px!important;line-height:1.3!important}
body.conversation-mode .conversation-title-line time{font-size:10px!important}
body.conversation-mode .conversation-snippet{font-size:11px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.conversation-mode .unread-count{border-radius:999px!important;min-width:20px!important;height:20px!important;display:grid!important;place-items:center!important;padding:0 5px!important}

body.conversation-mode .conversation-main{min-width:0!important;min-height:0!important;height:100%!important;background:#efeae2!important;overflow:hidden!important;position:relative!important}
body.conversation-mode .conversation-active{height:100%!important;min-height:0!important;display:grid!important;grid-template-rows:var(--pw-wa-header) minmax(0,1fr) auto!important}
body.conversation-mode .conversation-active[hidden]{display:none!important}
body.conversation-mode .conversation-header{height:var(--pw-wa-header)!important;min-height:var(--pw-wa-header)!important;padding:0 14px!important;background:var(--panel)!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important;z-index:5!important}
body.conversation-mode .conversation-header .avatar{border-radius:50%!important;width:42px!important;height:42px!important}
body.conversation-mode .conversation-title{min-width:0!important}
body.conversation-mode .conversation-title b{font-size:13px!important}
body.conversation-mode .conversation-title>span:not(.native-presence){font-size:10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.conversation-mode .conversation-header-actions{margin-left:auto!important;display:flex!important;align-items:center!important;gap:5px!important}
body.conversation-mode .conversation-header-actions .icon-btn{border:0!important;background:transparent!important;border-radius:50%!important}
body.conversation-mode .conversation-header-actions .icon-btn:hover{background:#f1f3f6!important}
body.conversation-mode .conversation-scroll-wrap{min-height:0!important;overflow:hidden!important;position:relative!important}
body.conversation-mode .conversation-messages{height:100%!important;overflow-y:auto!important;padding:18px clamp(14px,3vw,44px)!important;background-color:#efeae2!important;background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px)!important;background-size:14px 14px!important}
body.conversation-mode .message-bubble{max-width:min(72%,680px)!important;border-radius:10px 10px 10px 3px!important;padding:8px 10px!important}
body.conversation-mode .message-row.out .message-bubble{border-radius:10px 10px 3px 10px!important;background:#d9fdd3!important}
body.conversation-mode .thread-jump-bottom{position:absolute!important;right:20px!important;bottom:16px!important;width:42px!important;height:42px!important;border-radius:50%!important;padding:0!important;display:grid!important;place-items:center!important;background:var(--panel)!important;border:1px solid var(--line)!important;box-shadow:0 5px 18px rgba(20,32,51,.16)!important;font-size:0!important;z-index:8!important}
body.conversation-mode .thread-jump-bottom[hidden]{display:none!important}
body.conversation-mode .thread-jump-bottom i{font-size:15px!important;color:var(--navy)!important}

/* Composer modeled after WhatsApp: light shell + rounded field + compact actions */
body.conversation-mode .reply-composer{background:#f0f2f5!important;border-top:1px solid var(--line)!important;padding:9px 12px max(9px,env(safe-area-inset-bottom))!important;overflow:visible!important;max-height:none!important}
body.conversation-mode .reply-composer>textarea{background:var(--panel)!important;border:0!important;border-radius:18px!important;min-height:46px!important;max-height:128px!important;padding:12px 14px!important;box-shadow:0 1px 2px rgba(0,0,0,.06)!important;resize:none!important}
body.conversation-mode .reply-toolbar{margin-top:7px!important;align-items:center!important}
body.conversation-mode .reply-tools{display:flex!important;align-items:center!important;gap:5px!important}
body.conversation-mode .attachment-btn{border:0!important;background:transparent!important;border-radius:50%!important}
body.conversation-mode .reply-send{margin-left:auto!important;display:flex!important;align-items:center!important;gap:9px!important}
body.conversation-mode .reply-send small{font-size:9px!important;color:var(--muted)!important}
body.conversation-mode .reply-send .btn.primary{border-radius:999px!important;min-height:42px!important;padding:0 16px!important}

/* Detail is hidden by default; only .open is visible */
body.conversation-mode .contact-detail-pane{display:none!important;min-width:0!important;background:var(--panel)!important;border-left:1px solid var(--line)!important;padding:18px 16px!important;overflow-y:auto!important}
body.conversation-mode .contact-detail-pane.open{display:block!important;animation:pwDetailIn .18s var(--pw-motion)}
@keyframes pwDetailIn{from{opacity:.65;transform:translateX(10px)}to{opacity:1;transform:none}}
body.conversation-mode .contact-detail-pane .avatar.xlarge{border-radius:50%!important;margin-inline:auto!important}
body.conversation-mode .helpdesk-section{border-radius:14px!important}

/* Font Awesome icon grammar */
.pw-icon-btn{display:inline-grid!important;place-items:center!important;width:40px!important;height:40px!important;padding:0!important;border-radius:50%!important}
.pw-icon-btn i{font-size:16px!important}
.pw-dark-toggle{border:1px solid var(--line)!important;background:var(--panel)!important;color:var(--ink)!important}
.stat-icon{display:grid!important;place-items:center!important;font-size:16px!important}
.stat-icon i{font-size:16px!important}
.mobile-bottom-nav button>span{display:grid!important;place-items:center!important;font-size:17px!important}

/* Mobile = Android-style list screen -> full-screen chat -> full-screen detail */
@media(max-width:900px){
  body.conversation-mode{overflow:hidden!important}
  body.conversation-mode .main-area{height:100dvh!important;padding-bottom:66px!important}
  body.conversation-mode .content{height:calc(100dvh - var(--top) - 66px)!important;padding:0!important}
  body.conversation-mode #view-conversations.active{height:100%!important}
  body.conversation-mode .inbox-shell{height:100%!important;border:0!important;border-radius:0!important;box-shadow:none!important;grid-template-columns:1fr!important}
  body.conversation-mode .inbox-list-pane{height:100%!important;border:0!important}
  body.conversation-mode .conversation-main{display:none!important;position:fixed!important;inset:0!important;z-index:1200!important;height:100dvh!important;background:#efeae2!important}
  body.conversation-mode .conversation-main.mobile-open{display:block!important}
  body.conversation-mode .conversation-main.mobile-open .conversation-active{display:grid!important}
  body.conversation-mode .conversation-back{display:grid!important;border:0!important;background:transparent!important}
  body.pw-mobile-chat-open .topbar,body.pw-mobile-chat-open .mobile-bottom-nav{display:none!important}
  body.pw-mobile-chat-open .main-area{height:100dvh!important;padding:0!important}
  body.pw-mobile-chat-open .content{height:100dvh!important;padding:0!important}
  body.conversation-mode .conversation-header{padding:0 8px!important;gap:7px!important}
  body.conversation-mode .conversation-header .avatar{width:38px!important;height:38px!important;flex:0 0 38px!important}
  body.conversation-mode .conversation-title b{font-size:14px!important}
  body.conversation-mode .conversation-title>span:not(.native-presence){font-size:9px!important}
  body.conversation-mode .conversation-header-actions .icon-btn{width:38px!important;height:38px!important}
  body.conversation-mode .conversation-messages{padding:12px 8px 16px!important}
  body.conversation-mode .message-bubble{max-width:88%!important}
  body.conversation-mode .reply-composer{padding:7px 7px max(7px,env(safe-area-inset-bottom))!important;background:#f0f2f5!important}
  body.conversation-mode .reply-composer>textarea{border-radius:20px!important;min-height:44px!important;padding:11px 13px!important}
  body.conversation-mode .reply-toolbar{margin-top:5px!important}
  body.conversation-mode .reply-send small{display:none!important}
  body.conversation-mode .reply-send .btn.primary{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border-radius:50%!important;font-size:0!important}
  body.conversation-mode .reply-send .btn.primary i{font-size:17px!important}
  body.conversation-mode .thread-jump-bottom{right:12px!important;bottom:12px!important}
  body.conversation-mode .contact-detail-pane,
  body.conversation-mode .contact-detail-pane.open{display:block!important;position:fixed!important;inset:0!important;z-index:1400!important;width:100vw!important;height:100dvh!important;max-height:none!important;border:0!important;transform:translateX(105%)!important;opacity:0!important;pointer-events:none!important;padding:24px 18px max(24px,env(safe-area-inset-bottom))!important;transition:transform .22s var(--pw-motion),opacity .18s ease!important}
  body.conversation-mode .contact-detail-pane.open{transform:none!important;opacity:1!important;pointer-events:auto!important;animation:none!important}
  .pw-detail-backdrop{display:none!important}
  .topbar-title{min-width:0}
  .topbar-title h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .toast-host{top:10px!important;left:10px!important;right:10px!important}
}

@media(max-width:520px){
  body.conversation-mode .inbox-pane-head{padding:12px 14px 7px!important}
  body.conversation-mode .search-box{margin-inline:10px!important}
  body.conversation-mode .filter-tabs{padding-inline:10px!important}
  body.conversation-mode .conversation-item{min-height:70px!important;padding:9px 11px!important}
  body.conversation-mode .conversation-avatar{width:46px!important;height:46px!important}
  .panel,.dialog-card{border-radius:16px!important}
  input:not([type=checkbox]):not([type=radio]),textarea,select{border-radius:12px!important}
}

/* Dark mode: same navy/yellow/green identity, darker surfaces only */
html[data-pw-theme="dark"]{
  --ink:#edf2ff;
  --muted:#9aa8bd;
  --line:#2a3950;
  --bg:#0b1422;
  --panel:#111d2e;
  color-scheme:dark;
}
html[data-pw-theme="dark"],html[data-pw-theme="dark"] body{background:var(--bg)!important;color:var(--ink)!important}
html[data-pw-theme="dark"] .topbar,html[data-pw-theme="dark"] .panel,html[data-pw-theme="dark"] .inbox-list-pane,html[data-pw-theme="dark"] .conversation-header,html[data-pw-theme="dark"] .contact-detail-pane,html[data-pw-theme="dark"] dialog .dialog-card{background:var(--panel)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-pw-theme="dark"] .icon-btn.bordered,html[data-pw-theme="dark"] .btn.subtle{background:#152338!important;border-color:var(--line)!important;color:var(--ink)!important}
html[data-pw-theme="dark"] body.conversation-mode .search-box{background:#172438!important}
html[data-pw-theme="dark"] body.conversation-mode .conversation-item:hover{background:#15243a!important}
html[data-pw-theme="dark"] body.conversation-mode .conversation-item.active{background:#172b4f!important}
html[data-pw-theme="dark"] body.conversation-mode .conversation-main,html[data-pw-theme="dark"] body.conversation-mode .conversation-messages{background-color:#0b141a!important;background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px)!important}
html[data-pw-theme="dark"] body.conversation-mode .message-bubble{background:#1b2736!important;color:#f1f5f9!important}
html[data-pw-theme="dark"] body.conversation-mode .message-row.out .message-bubble{background:#123b32!important;color:#f1f5f9!important}
html[data-pw-theme="dark"] body.conversation-mode .reply-composer{background:#111b27!important}
html[data-pw-theme="dark"] body.conversation-mode .reply-composer>textarea{background:#1b2736!important;color:#f1f5f9!important}
html[data-pw-theme="dark"] body.conversation-mode .thread-jump-bottom{background:#1b2736!important;border-color:#334155!important}
html[data-pw-theme="dark"] .mobile-bottom-nav{background:#111d2e!important;border-color:var(--line)!important}

/* v8.3 canonical navigation/icon layer */
.main-nav .nav-icon{display:grid!important;place-items:center!important;width:28px!important;min-width:28px!important;height:28px!important;color:inherit!important;font-size:0!important}
.main-nav .nav-icon i{display:block!important;font-size:16px!important;line-height:1!important;color:inherit!important}
.main-nav button[data-view="groups"] .nav-icon i{font-size:15px!important}
.main-nav button[data-view="templates"] .nav-icon i{font-size:15px!important}
.main-nav button[data-view="users"] .nav-icon i{font-size:15px!important}
.pw-sidebar-collapsed .main-nav .nav-icon{width:34px!important;height:34px!important}
.pw-view-enter{animation:pwViewEnter .2s ease both}
@keyframes pwViewEnter{from{opacity:.72;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pw-view-enter{animation:none!important}}


/* v8.4 - KPI icons */
.performance-summary .metric-icon{background:transparent!important;border:0!important;box-shadow:none!important;font-size:19px!important}
.performance-summary .metric-icon i{font-size:19px!important;line-height:1!important}
.performance-summary .metric-icon.indigo{color:#3159d6!important}
.performance-summary .metric-icon.amber{color:#be7b0d!important}
.performance-summary .metric-icon.red{color:#d84450!important}
.performance-summary .metric-icon.green{color:#129664!important}
html[data-pw-theme="dark"] .performance-summary .metric-icon{background:transparent!important;border:0!important;box-shadow:none!important}
html[data-pw-theme="dark"] .performance-summary .metric-icon.indigo{color:#8aa6ff!important}
html[data-pw-theme="dark"] .performance-summary .metric-icon.amber{color:#f1c15d!important}
html[data-pw-theme="dark"] .performance-summary .metric-icon.red{color:#ff818b!important}
html[data-pw-theme="dark"] .performance-summary .metric-icon.green{color:#55d99c!important}

/* v8.4 - hamburger must remain visible in both themes */
#menuButton.menu-button{color:#34445e!important}
#menuButton.menu-button i{display:block!important;color:currentColor!important;font-size:18px!important;line-height:1!important}
html[data-pw-theme="dark"] #menuButton.menu-button{background:#172438!important;border-color:#334155!important;color:#f1f5f9!important}
html[data-pw-theme="dark"] #menuButton.menu-button:hover{background:#203149!important}

/* v8.4 - polished sidebar scrollbar */
#sidebar .main-nav{scrollbar-width:thin!important;scrollbar-color:rgba(174,191,232,.34) transparent!important;scrollbar-gutter:stable!important;padding-right:4px!important}
#sidebar .main-nav::-webkit-scrollbar{width:5px!important;height:5px!important}
#sidebar .main-nav::-webkit-scrollbar-track{background:transparent!important}
#sidebar .main-nav::-webkit-scrollbar-thumb{background:rgba(174,191,232,.26)!important;border-radius:999px!important;border:1px solid transparent!important;background-clip:padding-box!important}
#sidebar .main-nav:hover::-webkit-scrollbar-thumb{background:rgba(174,191,232,.52)!important;background-clip:padding-box!important}
#sidebar .main-nav::-webkit-scrollbar-corner{background:transparent!important}

/* v8.4 - keep nav icons stable and distinct even while active */
#mainNav button[data-view] .nav-icon i{font-family:"Font Awesome 6 Free"!important;font-weight:900!important}
#mainNav button[data-view="groups"] .nav-icon i,
#mainNav button[data-view="templates"] .nav-icon i,
#mainNav button[data-view="users"] .nav-icon i{font-size:16px!important}
#mainNav button.active .nav-icon{color:#fff!important}

/* v8.4 - mobile login keeps WAHAI visual identity */
@media(max-width:700px){
  #loginView.login-shell{
    min-height:100dvh!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    background:
      radial-gradient(circle at 82% 8%,rgba(247,203,45,.20),transparent 28%),
      radial-gradient(circle at 12% 30%,rgba(32,182,106,.12),transparent 26%),
      linear-gradient(160deg,#0b1f3a 0%,#122e76 58%,#173b69 100%)!important;
    padding:0 0 max(24px,env(safe-area-inset-bottom))!important;
    overflow-x:hidden!important;
  }
  #loginView .login-brand{
    display:block!important;
    min-height:auto!important;
    padding:30px 22px 78px!important;
    background:transparent!important;
    color:#fff!important;
  }
  #loginView .login-brand:after{display:none!important}
  #loginView .brand-mark{width:54px!important;height:54px!important;margin-bottom:18px!important}
  #loginView .brand-mark img{width:40px!important}
  #loginView .login-brand h1{font-size:44px!important;margin:0 0 12px!important;color:#fff!important}
  #loginView .login-copy{display:block!important;font-size:13px!important;line-height:1.55!important;color:#dbe5ff!important;max-width:34rem!important}
  #loginView .login-points{display:none!important}
  #loginView .login-card{
    width:calc(100% - 28px)!important;
    max-width:430px!important;
    margin:-48px auto 0!important;
    padding:27px 22px 25px!important;
    border:1px solid rgba(255,255,255,.62)!important;
    border-radius:24px!important;
    background:#fff!important;
    box-shadow:0 24px 60px rgba(3,14,31,.28)!important;
    position:relative!important;
    z-index:3!important;
  }
  html[data-pw-theme="dark"] #loginView .login-card{background:#111d2e!important;border-color:#2a3a50!important;color:#f1f5f9!important}
  html[data-pw-theme="dark"] #loginView .login-card input{background:#172438!important;border-color:#334155!important;color:#f1f5f9!important}
  html[data-pw-theme="dark"] #loginView .login-card .muted,
  html[data-pw-theme="dark"] #loginView .login-note{color:#9fb0c6!important}
}


/* v8.6 - desktop title breathing room; mobile returns to original compact spacing */
@media(min-width:901px){.topbar-left{column-gap:30px!important}}
@media(max-width:900px){.topbar-left{column-gap:12px!important}}

/* v8.6 - a hidden login/app view must stay out of the layout on mobile too */
#loginView[hidden],#appView[hidden]{display:none!important}

/* v8.6 - conversation empty state uses a real Font Awesome icon, not an empty rounded tile */
#conversationEmpty .empty-orbit{width:auto!important;height:auto!important;min-width:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#3159d6!important;font-size:43px!important;line-height:1!important}
#conversationEmpty .empty-orbit i{display:block!important;font-size:43px!important;line-height:1!important}
html[data-pw-theme="dark"] #conversationEmpty .empty-orbit{color:#8aa6ff!important}

/* v8.6 - semantic category/role chips and status icons */
.pw-kind-chip{display:inline-flex!important;align-items:center!important;gap:5px!important;max-width:100%!important;white-space:nowrap!important}
.pw-kind-chip i{font-size:9px!important;line-height:1!important;color:currentColor!important}
.pw-kind-chip span{overflow:hidden!important;text-overflow:ellipsis!important}
#contactsGrid .category-chip,#groupsGrid .category-chip,#templatesGrid .category-chip,#usersGrid .category-chip{display:inline-flex!important;visibility:visible!important;opacity:1!important}
.entity-top .status-pill.pw-card-status-icon{position:relative!important;width:30px!important;height:30px!important;min-width:30px!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center!important;font-size:0!important}
.entity-top .status-pill.pw-card-status-icon i{font-size:13px!important;line-height:1!important}
.entity-top .status-pill.pw-card-status-icon.status-aktif{background:#e6f7ef!important;color:#10895c!important}
.entity-top .status-pill.pw-card-status-icon.status-nonaktif{background:#fff0f1!important;color:#c83e49!important}
html[data-pw-theme="dark"] .pw-kind-chip{background:#172438!important;color:#b8c7dc!important}
html[data-pw-theme="dark"] .entity-top .status-pill.pw-card-status-icon.status-aktif{background:#123b32!important;color:#55d99c!important}
html[data-pw-theme="dark"] .entity-top .status-pill.pw-card-status-icon.status-nonaktif{background:#442126!important;color:#ff818b!important}

/* v8.6 - search field: one search hint only */
.search-box .pw-search-icon,.search-box>i.fa-magnifying-glass{flex:0 0 auto!important;color:#8a97a9!important;font-size:13px!important}
.search-box input::placeholder{color:#8a97a9!important}

/* Restore the earlier sidebar icons that were preferred. */
#mainNav button[data-view="templates"] .nav-icon i{font-size:16px!important}
#mainNav button[data-view="users"] .nav-icon i{font-size:16px!important}

/* v8.7 — desktop title spacing only; mobile keeps the compact WhatsApp-like header */
@media (min-width:901px){
  #menuButton.menu-button{margin-right:18px!important;flex:0 0 40px!important}
}
@media (max-width:900px){
  #menuButton.menu-button{margin-right:0!important}
}

/* Optimistic outgoing messages: the bubble exists immediately, status evolves in place. */
.message-row[data-local-pending="1"] .message-bubble{opacity:.96}
.message-status.pending,.message-status.sending,.message-status.queued{color:var(--muted)!important}
.message-status.sent,.message-status.delivered{color:#667085!important}
.message-status.read{color:#16804a!important}
.message-status.failed{color:#c83232!important}
.message-status i{font-size:11px;line-height:1}

/* v8.8: actual desktop header structure is .topbar > #menuButton + .topbar-title. */
@media (min-width:901px){
  .topbar > #menuButton + .topbar-title{margin-left:18px!important}
  #menuButton.menu-button{margin-right:0!important}
}
@media (max-width:900px){
  .topbar > #menuButton + .topbar-title{margin-left:0!important}
  #menuButton.menu-button{margin-right:0!important}
}