/* ==========================================================
   Professional Responsive UI Layer — V11
   Visual-only overrides. Existing application logic unchanged.
   ========================================================== */
:root{
  --ui-bg:#f4f7fb;
  --ui-surface:#ffffff;
  --ui-surface-2:#f8fafc;
  --ui-text:#0f172a;
  --ui-muted:#64748b;
  --ui-border:#e2e8f0;
  --ui-primary:#2563eb;
  --ui-primary-2:#1d4ed8;
  --ui-accent:#14b8a6;
  --ui-danger:#ef4444;
  --ui-success:#16a34a;
  --ui-sidebar:#0f172a;
  --ui-sidebar-2:#172033;
  --ui-radius:18px;
  --ui-shadow:0 12px 32px rgba(15,23,42,.08);
  --ui-shadow-lg:0 24px 70px rgba(15,23,42,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:linear-gradient(180deg,#f8fafc 0%,var(--ui-bg) 100%)!important;
  color:var(--ui-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body>.container-fluid{padding-left:0!important;padding-right:0!important}
body>.container-fluid>.row{margin:0!important;min-height:100vh}

/* Sidebar */
.sidebar{
  min-height:100vh!important;
  background:linear-gradient(180deg,var(--ui-sidebar) 0%,#111827 100%)!important;
  padding:22px 14px!important;
  position:relative;
  box-shadow:8px 0 28px rgba(15,23,42,.08);
  z-index:20;
}
.sidebar h4,.sidebar h5,.sidebar .brand,.sidebar>div:first-child{color:#fff}
.sidebar .nav{gap:6px}
.sidebar .nav-link{
  color:#cbd5e1!important;
  border-radius:12px;
  padding:12px 14px!important;
  font-weight:600;
  font-size:.93rem;
  display:flex;
  align-items:center;
  gap:10px;
  transition:background .18s ease,color .18s ease,transform .18s ease!important;
  border:1px solid transparent;
}
.sidebar .nav-link i{font-size:1.05rem;min-width:20px;text-align:center}
.sidebar .nav-link:hover{
  color:#fff!important;
  background:rgba(255,255,255,.08)!important;
  transform:translateX(2px);
}
.sidebar .nav-link.active{
  color:#fff!important;
  background:linear-gradient(135deg,var(--ui-primary),#3b82f6)!important;
  box-shadow:0 9px 22px rgba(37,99,235,.28);
}
.sidebar .nav-link.text-danger{color:#fca5a5!important}
.sidebar .nav-link.text-danger:hover{background:rgba(239,68,68,.12)!important;color:#fecaca!important}

/* Main content */
.col-md-10,.col-lg-10,.main-content,.content-area{padding:26px 28px!important;min-width:0}
h1,h2,h3,h4,h5,h6{color:var(--ui-text);letter-spacing:-.015em}
.section-header{
  border:0!important;
  padding:0 0 12px!important;
  margin:0 0 20px!important;
  font-weight:750;
  position:relative;
}
.section-header:after{content:"";display:block;width:52px;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--ui-primary),var(--ui-accent));margin-top:10px}

/* Cards */
.card,.stats-card,.ai-card,.toggle-card{
  border:1px solid rgba(226,232,240,.85)!important;
  border-radius:var(--ui-radius)!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:var(--ui-shadow)!important;
  overflow:hidden;
}
.card-header{
  border-bottom:1px solid var(--ui-border)!important;
  padding:15px 18px!important;
  font-weight:700!important;
  background:#fff!important;
  color:var(--ui-text)!important;
}
.card-header.bg-primary,.card-header.bg-success,.card-header.bg-dark,.card-header.bg-secondary{
  background:linear-gradient(135deg,var(--ui-sidebar),var(--ui-sidebar-2))!important;
  color:#fff!important;
  border-bottom:0!important;
}
.card-body{padding:20px!important}
.stats-card{padding:20px!important;transition:transform .2s ease,box-shadow .2s ease}
.stats-card:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(15,23,42,.11)!important}
.stats-card h2,.stats-card h3{font-weight:800}
.stats-card h6{color:var(--ui-muted);font-weight:650}

/* Forms */
.form-control,.form-select,.input-group-text,textarea.form-control{
  border:1px solid #d8e1ec!important;
  border-radius:12px!important;
  min-height:44px;
  box-shadow:none!important;
  background:#fff!important;
}
.form-control:focus,.form-select:focus,textarea.form-control:focus{
  border-color:#93c5fd!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.10)!important;
}
.form-label{font-weight:650;color:#334155;margin-bottom:7px}
.form-text,.text-muted{color:var(--ui-muted)!important}
.form-check-input:checked{background-color:var(--ui-primary);border-color:var(--ui-primary)}

/* Buttons */
.btn{border-radius:11px!important;font-weight:650!important;padding:.58rem .92rem;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--ui-primary),#3b82f6)!important;border-color:transparent!important;box-shadow:0 6px 16px rgba(37,99,235,.18)}
.btn-success{background:linear-gradient(135deg,#16a34a,#22c55e)!important;border-color:transparent!important}
.btn-danger{background:linear-gradient(135deg,#dc2626,#ef4444)!important;border-color:transparent!important}
.btn-sm{border-radius:9px!important;padding:.42rem .68rem}

/* Tables */
.table{--bs-table-bg:transparent;margin-bottom:0;color:#334155}
.table thead th{background:#f8fafc!important;color:#475569;border-bottom:1px solid var(--ui-border)!important;font-size:.76rem;text-transform:uppercase;letter-spacing:.045em;white-space:nowrap;padding:13px 14px}
.table tbody td{border-color:#eef2f7!important;padding:13px 14px;vertical-align:middle}
.table-hover tbody tr:hover>*{background:#f8fbff!important}
.table-responsive{border-radius:14px}
.badge{border-radius:999px;padding:.42em .7em;font-weight:650}

/* Chat */
.chat-list{background:#fff}
.chat-item{border-bottom:1px solid #eef2f7!important;transition:background .15s ease,transform .15s ease}
.chat-item:hover{background:#f8fbff!important}
.message-container{background:linear-gradient(180deg,#f8fafc,#f1f5f9)!important}
.message{max-width:min(78%,680px)}
.chat-input,.card-footer{background:#fff!important;border-top:1px solid var(--ui-border)!important}

/* Email */
.email-account-card,.email-compose-card{border-radius:var(--ui-radius)!important}

/* Modal */
.modal-content{border:0!important;border-radius:20px!important;box-shadow:var(--ui-shadow-lg)!important;overflow:hidden}
.modal-header,.modal-footer{border-color:var(--ui-border)!important}

/* Call overlays — responsive polish without changing behavior */
#incomingCallOverlay{backdrop-filter:blur(8px)}
#incomingCallOverlay .call-box{
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:26px!important;
  width:min(92vw,420px)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.55)!important;
}
#incomingCallOverlay .call-avatar{box-shadow:0 0 0 8px rgba(37,211,102,.08)}
#callOverlay .call-controls{max-width:min(94vw,760px)!important;padding-left:10px!important;padding-right:10px!important}
#callOverlay .call-btn{border-radius:14px!important;min-width:62px}
#callOverlay .video-container:not(.swapped) .local-video-wrapper{max-width:28vw!important;max-height:34vh!important}
#callOverlay .video-container.swapped .local-video-wrapper{max-width:none!important;max-height:none!important}

/* Login */
.login-card{
  width:min(92vw,430px)!important;
  border:1px solid rgba(226,232,240,.9)!important;
  border-radius:24px!important;
  box-shadow:0 24px 70px rgba(15,23,42,.16)!important;
  padding:30px!important;
  background:rgba(255,255,255,.97)!important;
}

/* Visitor widget */
.chat-widget{
  border-radius:22px!important;
  overflow:hidden!important;
  box-shadow:0 22px 60px rgba(15,23,42,.20)!important;
  border:1px solid rgba(226,232,240,.9)!important;
}
.chat-header{background:linear-gradient(135deg,#0f172a,#1e3a8a)!important}
.chat-messages{background:linear-gradient(180deg,#f8fafc,#f1f5f9)!important}
.chat-input{padding:12px!important;gap:8px}
.chat-input input,.chat-input textarea{border-radius:14px!important}

/* Better scrollbar */
*{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}
::-webkit-scrollbar-track{background:transparent}

/* Tablet */
@media (max-width:991.98px){
  .col-md-10,.col-lg-10,.main-content,.content-area{padding:22px 18px!important}
  .stats-card{margin-bottom:12px}
  .card-body{padding:17px!important}
}

/* Mobile dashboard navigation */
@media (max-width:767.98px){
  body>.container-fluid>.row{display:block!important;min-height:100vh}
  .sidebar{
    min-height:auto!important;
    width:100%!important;
    padding:10px 10px 9px!important;
    position:sticky!important;
    top:0;
    z-index:1040;
    box-shadow:0 8px 24px rgba(15,23,42,.14);
  }
  .sidebar h4,.sidebar h5{font-size:1rem!important;margin:2px 8px 8px!important}
  .sidebar .nav{
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
    gap:6px;
    padding-bottom:2px;
  }
  .sidebar .nav-item{flex:0 0 auto!important;margin:0!important}
  .sidebar .nav-link{
    padding:9px 11px!important;
    border-radius:10px;
    font-size:.79rem;
    white-space:nowrap;
    gap:6px;
  }
  .sidebar .nav-link:hover{transform:none}
  .sidebar .nav-link i{font-size:.9rem;min-width:auto}
  .col-md-10,.col-lg-10,.main-content,.content-area{width:100%!important;padding:16px 12px 24px!important}
  h1{font-size:1.7rem}h2{font-size:1.45rem}h3{font-size:1.25rem}h4{font-size:1.1rem}
  .section-header{font-size:1.15rem!important;margin-bottom:15px!important}
  .card,.stats-card,.ai-card,.toggle-card{border-radius:15px!important}
  .card-header{padding:12px 14px!important}
  .card-body{padding:14px!important}
  .row.g-3,.row.g-4{--bs-gutter-x:.75rem;--bs-gutter-y:.75rem}
  .table-responsive,.card-body:has(> .table){overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .table{min-width:640px}
  .table td,.table th{white-space:nowrap}
  .btn{min-height:40px}
  .btn-group,.d-flex.gap-2{flex-wrap:wrap}
  .message{max-width:88%!important}
  #incomingCallOverlay .call-box{width:calc(100vw - 24px)!important;padding:24px 16px 16px!important;border-radius:22px!important}
  #incomingCallOverlay .call-avatar{width:72px!important;height:72px!important;font-size:2rem!important}
  #callOverlay .call-controls{gap:7px!important;bottom:14px!important;overflow-x:auto!important;justify-content:flex-start!important;padding-bottom:max(8px,env(safe-area-inset-bottom))!important}
  #callOverlay .call-btn{flex:0 0 64px!important;min-width:64px!important;padding:9px 6px!important;font-size:.68rem!important}
  #callOverlay .call-btn i{font-size:1.15rem!important}
  #callOverlay .video-container:not(.swapped) .local-video-wrapper{right:10px!important;bottom:105px!important;width:96px!important;height:130px!important}
  #callOverlay .video-container.swapped .local-video-wrapper{left:0!important;top:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important}
  .chat-widget{border-radius:0!important;width:100%!important;max-width:none!important;min-height:100dvh!important;height:100dvh!important}
}

/* Small phones */
@media (max-width:420px){
  .col-md-10,.col-lg-10,.main-content,.content-area{padding:12px 9px 20px!important}
  .sidebar .nav-link{font-size:.74rem;padding:8px 9px!important}
  .stats-card{padding:16px!important}
  .card-body{padding:12px!important}
  #incomingCallOverlay .call-controls{gap:9px!important}
  #incomingCallOverlay .call-btn{padding:11px 6px!important}
}

/* Accessibility */
:focus-visible{outline:3px solid rgba(37,99,235,.35)!important;outline-offset:2px!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* ==========================================================
   V12 — Unified Customer Support Workspace
   Consistent visual system across Sub-Admin and Super Admin.
   ========================================================== */
:root{
  --v12-bg:#f5f7fb;
  --v12-panel:#ffffff;
  --v12-panel-soft:#f8fafc;
  --v12-line:#e7ecf3;
  --v12-text:#122033;
  --v12-muted:#6b7a90;
  --v12-brand:#4f46e5;
  --v12-brand-2:#2563eb;
  --v12-cyan:#06b6d4;
  --v12-green:#10b981;
  --v12-amber:#f59e0b;
  --v12-red:#ef4444;
  --v12-sidebar:#0b1324;
  --v12-sidebar-2:#111c33;
  --v12-radius:18px;
  --v12-shadow:0 10px 30px rgba(18,32,51,.07);
  --v12-shadow-hover:0 16px 42px rgba(18,32,51,.12);
}

body.subadmin-page, body.superadmin-page{
  min-height:100vh;
  background:
    radial-gradient(circle at 85% -10%, rgba(79,70,229,.08), transparent 32%),
    linear-gradient(180deg,#fbfcfe 0%,var(--v12-bg) 100%)!important;
  color:var(--v12-text);
}

/* Stable workspace shell */
.subadmin-page > .container-fluid > .row,
.superadmin-page > .container-fluid > .row{
  flex-wrap:nowrap!important;
}
.subadmin-page .sidebar,
.superadmin-page .sidebar{
  flex:0 0 250px!important;
  width:250px!important;
  max-width:250px!important;
  min-height:100vh!important;
  padding:18px 14px!important;
  background:linear-gradient(180deg,var(--v12-sidebar) 0%,var(--v12-sidebar-2) 100%)!important;
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:12px 0 34px rgba(8,15,28,.08)!important;
  position:sticky!important;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.subadmin-page .sidebar > .p-3,
.superadmin-page .sidebar > .p-3{
  padding:15px 12px 20px!important;
}
.subadmin-page .sidebar h4,
.superadmin-page .sidebar h4{
  font-size:1.23rem!important;
  line-height:1.25;
  font-weight:800!important;
  letter-spacing:-.02em;
  margin:0!important;
}
.subadmin-page .sidebar hr,
.superadmin-page .sidebar hr{
  opacity:.12;
  margin:16px 0 0!important;
}
.subadmin-page .sidebar .nav,
.superadmin-page .sidebar .nav{gap:7px!important}
.subadmin-page .sidebar .nav-link,
.superadmin-page .sidebar .nav-link{
  min-height:48px;
  padding:11px 13px!important;
  border-radius:12px!important;
  color:#b9c5d8!important;
  font-weight:650!important;
  font-size:.92rem!important;
  letter-spacing:.005em;
  border:1px solid transparent;
}
.subadmin-page .sidebar .nav-link i,
.superadmin-page .sidebar .nav-link i{
  width:24px!important;
  min-width:24px!important;
  font-size:1.08rem!important;
  color:#8ea0ba;
}
.subadmin-page .sidebar .nav-link:hover,
.superadmin-page .sidebar .nav-link:hover{
  background:rgba(255,255,255,.06)!important;
  color:#fff!important;
  transform:none!important;
}
.subadmin-page .sidebar .nav-link.active,
.superadmin-page .sidebar .nav-link.active{
  background:linear-gradient(135deg,#4f46e5,#2563eb)!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(37,99,235,.28)!important;
  border-color:rgba(255,255,255,.08);
}
.subadmin-page .sidebar .nav-link.active i,
.superadmin-page .sidebar .nav-link.active i{color:#fff!important}

/* Main canvas */
.subadmin-page .sidebar + [class*="col-md-"],
.superadmin-page .sidebar + [class*="col-md-"]{
  flex:1 1 auto!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  padding:30px 32px 42px!important;
}
.subadmin-page .sidebar + [class*="col-md-"] > h2,
.superadmin-page .sidebar + [class*="col-md-"] > h2{
  font-size:1.75rem!important;
  font-weight:800!important;
  margin:0 0 24px!important;
  color:#111d2f!important;
  letter-spacing:-.025em!important;
}
.subadmin-page .sidebar + [class*="col-md-"] > h2 i{color:var(--v12-brand)}

/* Page cards */
.subadmin-page .card,
.superadmin-page .card{
  border:1px solid var(--v12-line)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:var(--v12-shadow)!important;
  overflow:hidden;
}
.subadmin-page .card-header,
.superadmin-page .card-header{
  min-height:58px;
  padding:16px 20px!important;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--v12-line)!important;
  background:#fff!important;
  color:var(--v12-text)!important;
  font-weight:750!important;
  font-size:.98rem;
}
.subadmin-page .card-header.bg-primary,
.subadmin-page .card-header.bg-secondary,
.subadmin-page .card-header.bg-success,
.subadmin-page .card-header.bg-dark,
.superadmin-page .card-header.bg-primary,
.superadmin-page .card-header.bg-secondary,
.superadmin-page .card-header.bg-success,
.superadmin-page .card-header.bg-dark{
  background:#fff!important;
  color:var(--v12-text)!important;
}
.subadmin-page .card-header.bg-primary i{color:var(--v12-brand)}
.subadmin-page .card-header.bg-success i{color:var(--v12-green)}
.subadmin-page .card-header.bg-dark i{color:#334155}
.subadmin-page .card-body,
.superadmin-page .card-body{padding:20px!important}

/* Consistent section titles */
.subadmin-page .section-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px!important;
  padding:0!important;
  border:0!important;
  font-size:1.2rem!important;
  font-weight:800!important;
}
.subadmin-page .section-header i{color:var(--v12-brand)}
.subadmin-page .section-header:after{display:none!important}

/* Forms */
.subadmin-page .form-label,
.superadmin-page .form-label{font-size:.86rem;font-weight:700!important;color:#41516a!important}
.subadmin-page .form-control,
.subadmin-page .form-select,
.superadmin-page .form-control,
.superadmin-page .form-select{
  min-height:46px!important;
  border:1px solid #dbe3ed!important;
  border-radius:12px!important;
  color:#15243a!important;
  background:#fff!important;
  font-size:.94rem;
}
.subadmin-page textarea.form-control{min-height:120px!important}
.subadmin-page .form-control:focus,
.subadmin-page .form-select:focus{
  border-color:#9da9ff!important;
  box-shadow:0 0 0 4px rgba(79,70,229,.10)!important;
}
.subadmin-page .form-text{font-size:.79rem!important;line-height:1.45}

/* Buttons */
.subadmin-page .btn,
.superadmin-page .btn{
  min-height:42px;
  border-radius:11px!important;
  font-size:.88rem!important;
  font-weight:700!important;
  padding:.55rem .92rem!important;
  box-shadow:none!important;
}
.subadmin-page .btn-primary{background:linear-gradient(135deg,#4f46e5,#2563eb)!important;border:0!important}
.subadmin-page .btn-success{background:linear-gradient(135deg,#0ea56f,#10b981)!important;border:0!important}
.subadmin-page .btn-warning{background:#fff7e6!important;color:#a16207!important;border:1px solid #f5d899!important}
.subadmin-page .btn-danger{background:linear-gradient(135deg,#e5484d,#ef4444)!important;border:0!important}
.subadmin-page .btn:hover{transform:translateY(-1px)!important;filter:saturate(1.05)}

/* Dashboard */
.subadmin-dashboard-page .row.mt-4:first-of-type{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:0!important;
}
.subadmin-dashboard-page .row.mt-4:first-of-type > [class*="col-"]{width:auto!important;padding:0!important}
.subadmin-dashboard-page .stats-card{
  min-height:132px;
  padding:22px!important;
  border:1px solid var(--v12-line)!important;
  border-radius:18px!important;
  box-shadow:var(--v12-shadow)!important;
  position:relative;
  overflow:hidden;
}
.subadmin-dashboard-page .stats-card:before{
  content:"";position:absolute;right:-26px;top:-26px;width:100px;height:100px;border-radius:50%;background:rgba(79,70,229,.06)
}
.subadmin-dashboard-page .stats-card h6{font-size:.78rem!important;text-transform:uppercase;letter-spacing:.07em;color:#718097!important;margin-bottom:8px!important}
.subadmin-dashboard-page .stats-card h2{font-size:2rem!important;font-weight:850!important;margin:0!important}
.subadmin-dashboard-page .stats-card .icon{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#eef2ff;color:#4f46e5!important;font-size:1.35rem!important
}
.subadmin-dashboard-page .stats-card .text-success{background:#ecfdf5;color:#059669!important}
.subadmin-dashboard-page .stats-card .text-warning{background:#fff7ed;color:#d97706!important}
.subadmin-dashboard-page .toggle-card .card-body{padding:22px!important}
.subadmin-dashboard-page .toggle-card .form-switch{padding-left:3.2em!important}
.subadmin-dashboard-page .toggle-card .form-check-input{width:2.45em;height:1.3em;margin-left:-3.1em}

/* Dashboard visitors table */
.subadmin-dashboard-page .mt-5{margin-top:34px!important}
.subadmin-page .table-responsive{
  border:1px solid var(--v12-line)!important;
  border-radius:14px!important;
  overflow:auto!important;
}
.subadmin-page .table{margin:0!important;font-size:.88rem!important}
.subadmin-page .table thead th{
  position:sticky;top:0;z-index:2;
  padding:12px 13px!important;
  background:#f7f9fc!important;
  color:#5c6b81!important;
  border-bottom:1px solid #dde5ef!important;
  font-size:.72rem!important;
  font-weight:800!important;
  letter-spacing:.06em!important;
}
.subadmin-page .table tbody td{padding:13px!important;border-color:#eef2f7!important;background:#fff!important}
.subadmin-page .table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-accent-bg:#fbfcfe!important;background:#fbfcfe!important}
.subadmin-page .table-hover>tbody>tr:hover>*{background:#f5f8ff!important}
.subadmin-page .badge{font-size:.72rem!important;padding:.45em .7em!important}

/* CHAT — full modern support workspace */
.subadmin-chat-page .sidebar + .col-md-10{
  height:100vh;
  overflow:hidden;
  padding:24px!important;
}
.subadmin-chat-page .sidebar + .col-md-10 > .row{
  height:100%;
  margin:0!important;
  display:grid!important;
  grid-template-columns:minmax(320px,365px) minmax(0,1fr);
  gap:18px;
}
.subadmin-chat-page .sidebar + .col-md-10 > .row > .col-md-4,
.subadmin-chat-page .sidebar + .col-md-10 > .row > .col-md-8{
  width:auto!important;max-width:none!important;padding:0!important;min-width:0!important;height:100%;
}
.subadmin-chat-page .card{height:100%!important;display:flex!important;flex-direction:column!important;border-radius:18px!important}
.subadmin-chat-page .card-header{flex:0 0 auto;min-height:64px!important;font-size:1rem!important;padding:17px 18px!important}
.subadmin-chat-page .chat-list{
  flex:1 1 auto;
  max-height:none!important;
  overflow-y:auto!important;
  background:#fff!important;
  padding:8px!important;
}
.subadmin-chat-page .chat-item{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center!important;
  min-height:78px;
  padding:12px 10px!important;
  margin:2px 0;
  border:1px solid transparent!important;
  border-radius:12px!important;
  background:transparent!important;
}
.subadmin-chat-page .chat-item:hover{background:#f6f8ff!important;border-color:#e5e9ff!important}
.subadmin-chat-page .chat-item.active{background:#eef2ff!important;border-color:#d8deff!important}
.subadmin-chat-page .chat-item > div:first-child{min-width:0}
.subadmin-chat-page .chat-item strong{
  display:inline-block;
  max-width:calc(100% - 18px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#17243a;font-size:.9rem;vertical-align:middle
}
.subadmin-chat-page .chat-item small{
  display:block;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:.78rem;color:#7a889c!important
}
.subadmin-chat-page .online-dot{width:8px!important;height:8px!important;margin-left:4px;vertical-align:middle;box-shadow:0 0 0 3px rgba(16,185,129,.10)}
.subadmin-chat-page .chat-item > div:last-child{display:flex;gap:6px;align-items:center}
.subadmin-chat-page .chat-item .call-btn{
  width:38px;height:38px;min-height:38px!important;padding:0!important;margin:0!important;border-radius:11px!important;display:grid!important;place-items:center
}
.subadmin-chat-page .chat-item .call-btn i{font-size:.95rem}
.subadmin-chat-page .message-container{
  flex:1 1 auto!important;
  max-height:none!important;
  overflow-y:auto!important;
  padding:22px!important;
  background:
    radial-gradient(circle at 20% 15%,rgba(79,70,229,.04),transparent 28%),
    linear-gradient(180deg,#f8fafc,#f4f7fb)!important;
}
.subadmin-chat-page .message{
  max-width:min(72%,650px)!important;
  padding:10px 13px!important;
  border-radius:14px!important;
  margin-bottom:10px!important;
  box-shadow:0 3px 10px rgba(18,32,51,.04);
  font-size:.9rem;
}
.subadmin-chat-page .message strong{display:block;font-size:.72rem;margin-bottom:4px;opacity:.76;text-transform:uppercase;letter-spacing:.04em}
.subadmin-chat-page .message p{margin:0 0 3px!important;line-height:1.48}
.subadmin-chat-page .message small{font-size:.68rem;opacity:.65}
.subadmin-chat-page .message.admin{background:linear-gradient(135deg,#4f46e5,#2563eb)!important;color:#fff!important;border-bottom-right-radius:5px!important}
.subadmin-chat-page .message.visitor{background:#fff!important;border:1px solid #e5eaf1!important;color:#27364d!important;border-bottom-left-radius:5px!important}
.subadmin-chat-page .message.ai{background:#fff7e6!important;border:1px solid #f6dfaa!important;color:#62420c!important}
.subadmin-chat-page .card-footer{
  flex:0 0 auto;padding:14px 16px!important;background:#fff!important;border-top:1px solid var(--v12-line)!important
}
.subadmin-chat-page #messageForm{gap:9px}
.subadmin-chat-page #messageForm .form-control{margin-right:0!important;height:46px!important}
.subadmin-chat-page #messageForm .btn{min-width:88px}
.subadmin-chat-page .ai-status{padding:.48em .72em!important}

/* AI settings */
.subadmin-ai-page .ai-card{max-width:1180px}
.subadmin-ai-page .ai-card .card-body > hr{margin:26px 0;border-color:#edf1f6;opacity:1}
.subadmin-ai-page .table-qa td{max-width:420px;white-space:normal!important}

/* Email system */
.subadmin-email-page .sidebar + .col-md-10{max-width:none!important}
.subadmin-email-page .card.shadow-sm.mt-4.mb-4{max-width:900px}
.subadmin-email-page .section-header{margin-top:34px!important}
.subadmin-email-page .section-header + form > .row{--bs-gutter-x:18px;--bs-gutter-y:18px}
.subadmin-email-page .section-header + form .card{height:100%}
.subadmin-email-page .form-check{padding-top:5px;padding-bottom:5px}
.subadmin-email-page input[type="checkbox"].form-check-input{border-radius:5px!important}

/* Chat link */
.subadmin-link-page .sidebar + .col-md-10{max-width:none!important}
.subadmin-link-page .sidebar + .col-md-10 > .card,
.subadmin-link-page .sidebar + .col-md-10 > div{max-width:980px}
.subadmin-link-page .input-group{background:#fff;border:1px solid var(--v12-line);border-radius:14px;padding:7px;box-shadow:var(--v12-shadow)}
.subadmin-link-page .input-group .form-control{border:0!important;background:#f8fafc!important}

/* Call log pages */
.subadmin-calllogs-page .card{margin-top:8px}
.subadmin-calllogs-page .table-call-logs td{white-space:nowrap}
.subadmin-calllogs-page .table-call-logs td:nth-child(2){white-space:normal;min-width:180px}

/* Incoming and active call UI */
.subadmin-page #incomingCallOverlay, .support-page.superadmin-page #incomingCallOverlay{
  background:rgba(8,15,28,.68)!important;
  backdrop-filter:blur(10px)!important;
}
.subadmin-page #incomingCallOverlay .call-box, .support-page.superadmin-page #incomingCallOverlay .call-box{
  width:min(92vw,410px)!important;
  padding:28px 24px 22px!important;
  border-radius:26px!important;
  background:linear-gradient(180deg,#111c33,#0b1324)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 32px 90px rgba(0,0,0,.45)!important;
}
.subadmin-page #incomingCallOverlay .call-avatar, .support-page.superadmin-page #incomingCallOverlay .call-avatar{
  width:86px!important;height:86px!important;background:linear-gradient(135deg,#4f46e5,#06b6d4)!important;box-shadow:0 0 0 10px rgba(79,70,229,.10)!important
}
.subadmin-page #incomingCallOverlay .call-controls, .support-page.superadmin-page #incomingCallOverlay .call-controls{gap:14px!important}
.subadmin-page #incomingCallOverlay .call-btn, .support-page.superadmin-page #incomingCallOverlay .call-btn{border-radius:15px!important;min-height:54px!important}
.subadmin-page #callOverlay .call-controls, .support-page.superadmin-page #callOverlay .call-controls{
  background:rgba(10,17,31,.54)!important;
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:10px!important;
  bottom:20px!important;
}
.subadmin-page #callOverlay .call-btn, .support-page.superadmin-page #callOverlay .call-btn{border-radius:12px!important}

/* Super admin gets same design language */
.superadmin-page .stats-card{border:1px solid var(--v12-line)!important;border-radius:18px!important;box-shadow:var(--v12-shadow)!important}

/* RESPONSIVE */
@media (max-width:1199.98px){
  .subadmin-page .sidebar,.superadmin-page .sidebar{flex-basis:220px!important;width:220px!important;max-width:220px!important}
  .subadmin-page .sidebar + [class*="col-md-"],.superadmin-page .sidebar + [class*="col-md-"]{padding:24px 22px 34px!important}
  .subadmin-chat-page .sidebar + .col-md-10 > .row{grid-template-columns:320px minmax(0,1fr)}
}
@media (max-width:991.98px){
  .subadmin-page > .container-fluid > .row,.superadmin-page > .container-fluid > .row{display:block!important}
  .subadmin-page .sidebar,.superadmin-page .sidebar{
    position:sticky!important;top:0;height:auto!important;min-height:0!important;
    width:100%!important;max-width:none!important;
    padding:9px 10px!important;z-index:1050;
  }
  .subadmin-page .sidebar > .p-3,.superadmin-page .sidebar > .p-3{display:none!important}
  .subadmin-page .sidebar .nav,.superadmin-page .sidebar .nav{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:6px!important;padding:1px!important}
  .subadmin-page .sidebar .nav-item,.superadmin-page .sidebar .nav-item{flex:0 0 auto!important}
  .subadmin-page .sidebar .nav-link,.superadmin-page .sidebar .nav-link{min-height:42px!important;padding:9px 11px!important;font-size:.8rem!important;white-space:nowrap}
  .subadmin-page .sidebar + [class*="col-md-"],.superadmin-page .sidebar + [class*="col-md-"]{width:100%!important;padding:20px 14px 30px!important}
  .subadmin-dashboard-page .row.mt-4:first-of-type{grid-template-columns:repeat(3,minmax(180px,1fr));overflow-x:auto;padding-bottom:4px}
  .subadmin-chat-page .sidebar + .col-md-10{height:calc(100vh - 62px)!important;padding:14px!important}
  .subadmin-chat-page .sidebar + .col-md-10 > .row{grid-template-columns:300px minmax(0,1fr);gap:12px}
}
@media (max-width:767.98px){
  .subadmin-page .sidebar + [class*="col-md-"] > h2{font-size:1.45rem!important;margin-bottom:17px!important}
  .subadmin-dashboard-page .row.mt-4:first-of-type{grid-template-columns:1fr!important;overflow:visible}
  .subadmin-dashboard-page .stats-card{min-height:108px}
  .subadmin-page .card{border-radius:15px!important}
  .subadmin-page .table{min-width:720px!important}
  .subadmin-chat-page .sidebar + .col-md-10{height:auto!important;overflow:visible!important;padding:12px!important}
  .subadmin-chat-page .sidebar + .col-md-10 > .row{display:block!important;height:auto!important}
  .subadmin-chat-page .sidebar + .col-md-10 > .row > .col-md-4,
  .subadmin-chat-page .sidebar + .col-md-10 > .row > .col-md-8{height:auto!important}
  .subadmin-chat-page .sidebar + .col-md-10 > .row > .col-md-4{margin-bottom:12px}
  .subadmin-chat-page .sidebar + .col-md-10 > .row > .col-md-4 .card{height:340px!important}
  .subadmin-chat-page .sidebar + .col-md-10 > .row > .col-md-8 .card{height:calc(100vh - 150px)!important;min-height:520px}
  .subadmin-chat-page .message{max-width:86%!important}
  .subadmin-email-page .row > [class*="col-"]{width:100%!important}
}
@media (max-width:480px){
  .subadmin-page .sidebar .nav-link span{display:none}
  .subadmin-page .sidebar + [class*="col-md-"]{padding:14px 10px 24px!important}
  .subadmin-chat-page .sidebar + .col-md-10 > .row > .col-md-4 .card{height:300px!important}
  .subadmin-chat-page .chat-item{min-height:70px;padding:9px!important}
  .subadmin-chat-page .chat-item .call-btn{width:34px;height:34px;min-height:34px!important}
  .subadmin-chat-page .message-container{padding:14px!important}
}

/* ===== V15 Premium support-chat workspace ===== */
.subadmin-chat-page .sidebar + .col-md-10{background:linear-gradient(180deg,#f7f9fd 0%,#eef3f9 100%)!important}
.subadmin-chat-page .sidebar + .col-md-10 > .row{gap:18px!important}
.subadmin-chat-page .card{border:1px solid #e5eaf2!important;box-shadow:0 16px 40px rgba(27,39,69,.08)!important;overflow:hidden}
.subadmin-chat-page .premium-conv-header,.subadmin-chat-page .premium-chat-header{background:rgba(255,255,255,.95)!important;border-bottom:1px solid #e8edf5!important}
.subadmin-chat-page .premium-conv-header{display:flex;align-items:center;justify-content:space-between!important}
.subadmin-chat-page .premium-conv-header>div,.subadmin-chat-page .premium-chat-person{display:flex;align-items:center;gap:11px;min-width:0}
.subadmin-chat-page .premium-conv-header strong,.subadmin-chat-page .premium-chat-person strong{display:block;color:#12213a;font-size:1rem;line-height:1.2}
.subadmin-chat-page .premium-conv-header small,.subadmin-chat-page .premium-chat-person small{display:block;color:#8490a4;font-size:.72rem;margin-top:3px;font-weight:600}
.subadmin-chat-page .premium-header-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#eef2ff,#e0f2fe);color:#4f46e5;flex:0 0 auto}
.subadmin-chat-page .premium-live-pill{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:#ecfdf3;color:#15803d;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.subadmin-chat-page .premium-live-pill span{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.11)}
.subadmin-chat-page .chat-list{padding:8px!important;background:#fbfcfe!important}
.subadmin-chat-page .chat-item{border:1px solid transparent!important;border-radius:15px!important;margin:5px 2px!important;padding:11px 10px!important;gap:8px;transition:.18s ease!important}
.subadmin-chat-page .chat-item:hover{transform:translateY(-1px);background:#fff!important;border-color:#e3e8f2!important;box-shadow:0 8px 22px rgba(27,39,69,.06)!important}
.subadmin-chat-page .chat-item.active{background:linear-gradient(135deg,#f0f4ff,#eefbff)!important;border-color:#cfd9ff!important;box-shadow:0 8px 24px rgba(79,70,229,.10)!important}
.subadmin-chat-page .premium-conv-main{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.subadmin-chat-page .premium-avatar{position:relative;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(135deg,#6366f1,#3b82f6);color:#fff;font-weight:800;box-shadow:0 6px 14px rgba(79,70,229,.18)}
.subadmin-chat-page .premium-avatar .online-dot{position:absolute;right:-2px;bottom:-2px;border:2px solid #fff;width:11px!important;height:11px!important;margin:0!important;box-shadow:none!important}
.subadmin-chat-page .premium-avatar-lg{width:44px;height:44px;border-radius:15px}
.subadmin-chat-page .premium-conv-copy{min-width:0;flex:1}
.subadmin-chat-page .premium-conv-copy strong{display:block!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.88rem!important;color:#18263d!important;margin:0 0 4px!important;text-transform:none!important;letter-spacing:0!important}
.subadmin-chat-page .premium-conv-copy small{display:block!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#8a96a8!important;font-size:.73rem!important;max-width:210px!important}
.subadmin-chat-page .premium-conv-actions{display:flex;gap:6px;opacity:.92;flex:0 0 auto}
.subadmin-chat-page .premium-conv-actions .call-btn{width:36px!important;height:36px!important;border-radius:11px!important;padding:0!important;display:grid!important;place-items:center!important;margin:0!important;box-shadow:none!important}
.subadmin-chat-page .premium-chat-header{min-height:72px!important;padding:13px 16px!important}
.subadmin-chat-page .message-container{background:radial-gradient(circle at top right,rgba(79,70,229,.05),transparent 30%),#f7f9fc!important;padding:22px!important}
.subadmin-chat-page .message{position:relative;max-width:min(72%,660px)!important;padding:11px 14px!important;border-radius:18px!important;box-shadow:0 4px 14px rgba(21,31,51,.05)!important}
.subadmin-chat-page .message.admin{border-bottom-right-radius:6px!important;background:linear-gradient(135deg,#4f46e5,#2563eb)!important}
.subadmin-chat-page .message.visitor{border-bottom-left-radius:6px!important;background:#fff!important;border:1px solid #e3e8f0!important}
.subadmin-chat-page .message.ai{border-bottom-left-radius:6px!important;background:linear-gradient(135deg,#fff9e8,#fff3c7)!important;border:1px solid #f6df9b!important}
.subadmin-chat-page .message strong{font-size:.66rem!important;letter-spacing:.08em!important}
.subadmin-chat-page .message p{font-size:.91rem!important;margin:2px 0 5px!important}
.subadmin-chat-page .message small{font-size:.64rem!important}
.subadmin-chat-page .premium-empty-chat{height:100%;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#8490a4}
.subadmin-chat-page .premium-empty-chat span{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;background:#eef2ff;color:#4f46e5;font-size:1.55rem;margin-bottom:14px}
.subadmin-chat-page .premium-empty-chat strong{color:#28364c;font-size:1rem;margin-bottom:4px}
.subadmin-chat-page .premium-empty-chat small{font-size:.78rem}
.subadmin-chat-page .card-footer{padding:12px 14px!important;background:#fff!important}
.subadmin-chat-page #messageForm{align-items:center!important}
.subadmin-chat-page .premium-composer{position:relative;display:flex;align-items:center;flex:1;background:#f7f9fc;border:1px solid #dfe5ee;border-radius:15px;padding-left:14px;transition:.18s ease}
.subadmin-chat-page .premium-composer:focus-within{background:#fff;border-color:#aab8ff;box-shadow:0 0 0 4px rgba(79,70,229,.08)}
.subadmin-chat-page .premium-composer>i{color:#98a3b4;font-size:1rem}
.subadmin-chat-page .premium-composer .form-control{border:0!important;background:transparent!important;box-shadow:none!important;height:48px!important;padding-left:10px!important}
.subadmin-chat-page .premium-send-btn{height:48px!important;min-width:104px!important;border-radius:14px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;background:linear-gradient(135deg,#4f46e5,#2563eb)!important;border:0!important;box-shadow:0 8px 18px rgba(37,99,235,.22)!important;font-weight:700!important}
@media(max-width:767.98px){.subadmin-chat-page .premium-conv-copy small{max-width:170px!important}.subadmin-chat-page .premium-send-btn{min-width:52px!important;width:52px!important}.subadmin-chat-page .premium-send-btn span{display:none}.subadmin-chat-page .message{max-width:88%!important}}

/* ===== V16 Chat scroll reliability fix =====
   Flex scroll containers must be allowed to shrink below their content height.
   Without min-height:0, some Chromium builds expand the child instead of
   creating an internal scroll area, so the mouse wheel appears to do nothing. */
.subadmin-chat-page .sidebar + .col-md-10,
.subadmin-chat-page .sidebar + .col-md-10 > .row,
.subadmin-chat-page .sidebar + .col-md-10 > .row > .col-md-4,
.subadmin-chat-page .sidebar + .col-md-10 > .row > .col-md-8,
.subadmin-chat-page .card {
  min-height: 0 !important;
}
.subadmin-chat-page .chat-list,
.subadmin-chat-page .message-container {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  touch-action: pan-y;
}
.subadmin-chat-page .chat-list {
  height: 0;
  flex: 1 1 0 !important;
}
.subadmin-chat-page .message-container {
  height: 0;
  flex: 1 1 0 !important;
}
.subadmin-chat-page .chat-item,
.subadmin-chat-page .premium-conv-main,
.subadmin-chat-page .premium-conv-copy {
  min-width: 0 !important;
}
.subadmin-chat-page .chat-list::-webkit-scrollbar,
.subadmin-chat-page .message-container::-webkit-scrollbar { width: 8px; }
.subadmin-chat-page .chat-list::-webkit-scrollbar-thumb,
.subadmin-chat-page .message-container::-webkit-scrollbar-thumb {
  background: rgba(100,116,139,.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.subadmin-chat-page .chat-list::-webkit-scrollbar-track,
.subadmin-chat-page .message-container::-webkit-scrollbar-track { background: transparent; }

@media (max-width:767.98px){
  .subadmin-chat-page .chat-list{height:auto!important;max-height:276px!important;flex:1 1 auto!important}
  .subadmin-chat-page .message-container{height:auto!important;min-height:0!important;flex:1 1 auto!important}
}

/* ===== V25 Standard responsive mobile navigation =====
   Mobile uses a familiar top navbar + dropdown/collapse menu instead of
   a large off-canvas drawer. Desktop sidebar behavior is unchanged. */
.mobile-admin-topbar,
.mobile-sidebar-backdrop{display:none}

@media (max-width:767.98px){
  body.has-mobile-admin-nav{padding-top:60px!important;overflow-x:hidden}
  body.has-mobile-admin-nav.sidebar-open{overflow:hidden!important}

  .mobile-admin-topbar{
    display:flex!important;
    position:fixed;
    top:0;left:0;right:0;
    height:60px;
    padding:0 14px;
    align-items:center;
    gap:11px;
    background:#ffffff;
    border-bottom:1px solid #e7ebf1;
    box-shadow:0 3px 14px rgba(15,23,42,.08);
    z-index:1200;
  }
  .mobile-admin-topbar-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    line-height:1.05;
    flex:1 1 auto;
    order:1;
  }
  .mobile-admin-topbar-copy strong{
    color:#172033;
    font-size:.94rem;
    font-weight:750;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mobile-admin-topbar-copy small{
    color:#7b8798;
    font-size:.67rem;
    margin-top:5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mobile-admin-menu-btn{
    order:3;
    width:42px;height:42px;
    flex:0 0 42px;
    border:1px solid #dce2ea;
    border-radius:10px;
    background:#f8fafc;
    color:#172033;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:1.28rem;
    box-shadow:none!important;
  }
  .mobile-admin-menu-btn:active{transform:scale(.97)}
  .mobile-admin-topbar-mark{
    order:2;
    width:8px;height:8px;
    flex:0 0 8px;
    border-radius:999px;
    background:#22c55e;
    box-shadow:0 0 0 4px rgba(34,197,94,.10);
  }

  /* Existing desktop sidebar becomes a normal full-width dropdown menu. */
  .sidebar{
    display:block!important;
    position:fixed!important;
    top:60px!important;
    left:0!important;
    right:0!important;
    bottom:auto!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100dvh - 72px)!important;
    padding:8px 12px 14px!important;
    margin:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    background:#ffffff!important;
    border:0!important;
    border-bottom:1px solid #e4e9f0!important;
    border-radius:0 0 16px 16px!important;
    box-shadow:0 16px 34px rgba(15,23,42,.16)!important;
    transform:translateY(-12px)!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease,transform .18s ease,visibility .18s ease!important;
    z-index:1195!important;
  }
  body.sidebar-open .sidebar{
    transform:translateY(0)!important;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  /* Hide desktop sidebar title inside the collapsed mobile menu. */
  .sidebar>div:first-child,
  .sidebar>h4,
  .sidebar>h5{display:none!important}

  .sidebar .nav{
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    gap:3px!important;
    padding:0!important;
    margin:0!important;
    overflow:visible!important;
  }
  .sidebar .nav-item{
    width:100%!important;
    flex:0 0 auto!important;
    margin:0!important;
  }
  .sidebar .nav-item.mt-5{margin-top:7px!important;padding-top:7px!important;border-top:1px solid #edf0f4!important}
  .sidebar .nav-link{
    width:100%!important;
    min-height:44px!important;
    padding:10px 12px!important;
    border-radius:9px!important;
    display:flex!important;
    align-items:center!important;
    gap:11px!important;
    color:#3f4b5f!important;
    background:transparent!important;
    font-size:.89rem!important;
    font-weight:600!important;
    white-space:normal!important;
    box-shadow:none!important;
  }
  .sidebar .nav-link i{
    min-width:22px!important;
    font-size:1rem!important;
    color:#778396!important;
  }
  .sidebar .nav-link:hover{background:#f4f6f9!important;color:#172033!important}
  .sidebar .nav-link.active{
    background:#eef2ff!important;
    color:#4338ca!important;
    box-shadow:none!important;
  }
  .sidebar .nav-link.active i{color:#4f46e5!important}
  .sidebar .nav-link.text-danger{color:#dc3545!important}
  .sidebar .nav-link.text-danger i{color:#dc3545!important}

  .mobile-sidebar-backdrop{
    display:block!important;
    position:fixed;
    inset:60px 0 0 0;
    background:rgba(15,23,42,.30);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease,visibility .18s ease;
    z-index:1190;
  }
  body.sidebar-open .mobile-sidebar-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  body.has-mobile-admin-nav>.container-fluid>.row{display:block!important;min-height:calc(100dvh - 60px)!important}
  body.has-mobile-admin-nav .sidebar + .col-md-10,
  body.has-mobile-admin-nav .sidebar + .col-lg-10,
  body.has-mobile-admin-nav .main-content,
  body.has-mobile-admin-nav .content-area{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
  }
}

@media (max-width:420px){
  .mobile-admin-topbar{height:56px;padding:0 10px}
  body.has-mobile-admin-nav{padding-top:56px!important}
  .sidebar{top:56px!important;max-height:calc(100dvh - 66px)!important;padding:7px 9px 12px!important}
  .mobile-sidebar-backdrop{inset:56px 0 0 0!important}
  .mobile-admin-menu-btn{width:39px;height:39px;flex-basis:39px;border-radius:9px}
  .mobile-admin-topbar-copy strong{font-size:.9rem}
  .sidebar .nav-link{min-height:42px!important;padding:9px 10px!important;font-size:.86rem!important}
}

/* ===== V26 Mobile overlay sidebar =====
   Reuse the real desktop sidebar on phones/tablets. It is hidden off-canvas
   until the floating hamburger is tapped, then slides over page content. */
.mobile-sidebar-trigger{display:none}

@media (max-width:767.98px){
  body.has-mobile-admin-nav{
    padding-top:0!important;
    overflow-x:hidden!important;
  }
  body.has-mobile-admin-nav.sidebar-open{overflow:hidden!important}

  /* V25 top bar is no longer used. */
  .mobile-admin-topbar{display:none!important}

  .mobile-sidebar-trigger{
    display:inline-flex!important;
    position:fixed!important;
    top:16px!important;
    left:16px!important;
    width:52px!important;
    height:52px!important;
    align-items:center!important;
    justify-content:center!important;
    border:0!important;
    border-radius:12px!important;
    background:linear-gradient(180deg,#172033 0%,#0f172a 100%)!important;
    color:#fff!important;
    font-size:1.65rem!important;
    box-shadow:0 8px 24px rgba(15,23,42,.25)!important;
    z-index:1305!important;
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease!important;
  }
  .mobile-sidebar-trigger:active{transform:scale(.96)!important}
  body.sidebar-open .mobile-sidebar-trigger{
    left:232px!important;
    background:rgba(255,255,255,.14)!important;
    box-shadow:none!important;
  }

  /* Keep the desktop sidebar look; only change its positioning on mobile. */
  .sidebar,
  .subadmin-page .sidebar,
  .superadmin-page .sidebar{
    display:block!important;
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:auto!important;
    bottom:0!important;
    width:300px!important;
    max-width:82vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    padding:0!important;
    margin:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    background:linear-gradient(180deg,var(--v12-sidebar,#0b1324) 0%,var(--v12-sidebar-2,#111c33) 100%)!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:16px 0 42px rgba(15,23,42,.32)!important;
    transform:translateX(-104%)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition:transform .24s cubic-bezier(.22,.8,.25,1)!important;
    z-index:1300!important;
  }
  body.sidebar-open .sidebar,
  body.sidebar-open .subadmin-page .sidebar,
  body.sidebar-open .superadmin-page .sidebar{
    transform:translateX(0)!important;
  }

  /* Restore the sidebar heading/brand that V25 hid. */
  .sidebar>div:first-child,
  .sidebar>h4,
  .sidebar>h5,
  .subadmin-page .sidebar > .p-3,
  .superadmin-page .sidebar > .p-3{
    display:block!important;
  }
  .sidebar>div:first-child{padding:22px 20px 14px!important}
  .sidebar h4,.sidebar h5{
    font-size:1.35rem!important;
    margin:0 0 10px!important;
    color:#fff!important;
  }

  .sidebar .nav,
  .subadmin-page .sidebar .nav,
  .superadmin-page .sidebar .nav{
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
    padding:10px 16px 22px!important;
    margin:0!important;
    overflow:visible!important;
  }
  .sidebar .nav-item,
  .subadmin-page .sidebar .nav-item,
  .superadmin-page .sidebar .nav-item{
    width:100%!important;
    flex:0 0 auto!important;
    margin:0!important;
  }
  .sidebar .nav-item.mt-5{margin-top:18px!important;padding-top:12px!important;border-top:1px solid rgba(255,255,255,.08)!important}
  .sidebar .nav-link,
  .subadmin-page .sidebar .nav-link,
  .superadmin-page .sidebar .nav-link{
    width:100%!important;
    min-height:50px!important;
    padding:12px 14px!important;
    border-radius:11px!important;
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    color:#cbd5e1!important;
    background:transparent!important;
    font-size:.95rem!important;
    font-weight:650!important;
    white-space:normal!important;
    box-shadow:none!important;
  }
  .sidebar .nav-link i{
    min-width:24px!important;
    font-size:1.1rem!important;
    color:#94a3b8!important;
  }
  .sidebar .nav-link:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
  .sidebar .nav-link.active{
    background:linear-gradient(135deg,#3b82f6,#4f46e5)!important;
    color:#fff!important;
    box-shadow:0 8px 20px rgba(59,130,246,.24)!important;
  }
  .sidebar .nav-link.active i{color:#fff!important}
  .sidebar .nav-link.text-danger{color:#fca5a5!important}
  .sidebar .nav-link.text-danger i{color:#fca5a5!important}

  .mobile-sidebar-backdrop{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    background:rgba(15,23,42,.55)!important;
    backdrop-filter:blur(1.5px);
    -webkit-backdrop-filter:blur(1.5px);
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .22s ease,visibility .22s ease!important;
    z-index:1290!important;
  }
  body.sidebar-open .mobile-sidebar-backdrop{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* Main page stays full width and gets room for floating menu button. */
  body.has-mobile-admin-nav>.container-fluid>.row{display:block!important;min-height:100dvh!important}
  body.has-mobile-admin-nav .sidebar + .col-md-10,
  body.has-mobile-admin-nav .sidebar + .col-lg-10,
  body.has-mobile-admin-nav .main-content,
  body.has-mobile-admin-nav .content-area{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    padding-top:82px!important;
  }
  .subadmin-chat-page.has-mobile-admin-nav .sidebar + .col-md-10{padding-top:82px!important}
}

@media (max-width:420px){
  .mobile-sidebar-trigger{
    top:12px!important;
    left:12px!important;
    width:48px!important;
    height:48px!important;
    border-radius:11px!important;
    font-size:1.5rem!important;
  }
  body.sidebar-open .mobile-sidebar-trigger{left:calc(min(82vw,300px) - 62px)!important}
  .sidebar,
  .subadmin-page .sidebar,
  .superadmin-page .sidebar{width:290px!important;max-width:84vw!important}
  body.has-mobile-admin-nav .sidebar + .col-md-10,
  body.has-mobile-admin-nav .sidebar + .col-lg-10,
  body.has-mobile-admin-nav .main-content,
  body.has-mobile-admin-nav .content-area{padding-top:74px!important}
}

/* ===== V27 Mobile right-side slide menu =====
   On phones/tablets keep desktop untouched. The hamburger stays at the
   top-left; tapping it slides the existing full submenu in from the RIGHT. */
@media (max-width:767.98px){
  .mobile-sidebar-trigger{
    left:16px!important;
    right:auto!important;
  }
  body.sidebar-open .mobile-sidebar-trigger{
    left:16px!important;
    right:auto!important;
    background:linear-gradient(180deg,#172033 0%,#0f172a 100%)!important;
    box-shadow:0 8px 24px rgba(15,23,42,.25)!important;
  }

  .sidebar,
  .subadmin-page .sidebar,
  .superadmin-page .sidebar{
    left:auto!important;
    right:0!important;
    box-shadow:-16px 0 42px rgba(15,23,42,.32)!important;
    transform:translateX(104%)!important;
  }
  body.sidebar-open .sidebar,
  body.sidebar-open .subadmin-page .sidebar,
  body.sidebar-open .superadmin-page .sidebar{
    transform:translateX(0)!important;
  }
}

@media (max-width:420px){
  .mobile-sidebar-trigger,
  body.sidebar-open .mobile-sidebar-trigger{
    left:12px!important;
    right:auto!important;
  }
}

/* ===== V28 COMPLETE MOBILE RESPONSIVE FIX =====
   Prevents overlapping/cut-off text and makes all admin/workspace screens
   usable on phones without changing desktop behavior. */
@media (max-width: 767.98px){
  html, body{max-width:100%;overflow-x:hidden!important}
  body{font-size:14px!important}
  *, *::before, *::after{box-sizing:border-box!important;min-width:0}
  img,video,canvas,svg{max-width:100%;height:auto}

  /* Keep only the requested right-side mobile menu; content remains full width. */
  body.has-mobile-admin-nav>.container-fluid{padding-left:0!important;padding-right:0!important;max-width:100vw!important;overflow-x:hidden!important}
  body.has-mobile-admin-nav>.container-fluid>.row{margin-left:0!important;margin-right:0!important;width:100%!important}
  body.has-mobile-admin-nav .sidebar + .col-md-10,
  body.has-mobile-admin-nav .sidebar + .col-lg-10,
  body.has-mobile-admin-nav .main-content,
  body.has-mobile-admin-nav .content-area,
  .subadmin-page .col-md-10,
  .superadmin-page .col-md-10{
    width:100%!important;max-width:100%!important;flex:0 0 100%!important;
    margin:0!important;padding:76px 12px 24px!important;overflow-x:hidden!important;
  }

  /* Typography: never let long words, emails, URLs or labels overlap. */
  h1,h2,h3,h4,h5,h6,p,span,small,strong,label,a,td,th,.card-title,.card-text,.nav-link,
  .alert,.badge,.form-text,.text-muted{
    overflow-wrap:anywhere!important;word-break:break-word!important;max-width:100%;
  }
  h1{font-size:1.6rem!important;line-height:1.2!important}
  h2{font-size:1.38rem!important;line-height:1.25!important}
  h3{font-size:1.2rem!important;line-height:1.3!important}
  h4{font-size:1.08rem!important;line-height:1.3!important}
  .lead{font-size:1rem!important}

  /* Bootstrap rows/columns: stack cleanly, remove accidental horizontal overflow. */
  .row{--bs-gutter-x:.75rem!important}
  .row>[class*="col-"]{max-width:100%!important}
  .col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-12,
  .col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-12{
    width:100%!important;flex:0 0 100%!important;
  }

  /* Cards/forms */
  .card,.stats-card,.ai-card,.toggle-card,.upgrade-card{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}
  .card-header,.card-body,.card-footer{max-width:100%!important}
  .card-header{padding:12px!important}
  .card-body{padding:13px!important}
  .card-footer{padding:11px 12px!important}
  .form-control,.form-select,.input-group,.input-group-text,textarea,select,input{max-width:100%!important}
  .input-group{flex-wrap:nowrap!important}
  textarea{min-height:110px}
  .form-label{white-space:normal!important}

  /* Buttons/actions wrap instead of colliding. */
  .d-flex{min-width:0}
  .d-flex.gap-2,.d-flex.gap-3,.btn-group,.card-header.d-flex,.card-footer .d-flex{
    flex-wrap:wrap!important;
  }
  .btn-group{display:flex!important;width:100%!important;gap:7px!important}
  .btn-group>.btn{border-radius:10px!important;flex:1 1 auto!important}
  .btn{white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.2!important}
  .btn:not(.call-btn):not(.mobile-sidebar-trigger){min-height:42px}

  /* Tables remain readable instead of forcing the whole page sideways. */
  .table-responsive{width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  .table-responsive>.table,.card-body>.table{margin-bottom:0!important}
  .table{font-size:.82rem!important;min-width:620px!important;width:max-content!important;max-width:none!important}
  .table th,.table td{padding:9px 10px!important;vertical-align:middle!important;white-space:normal!important;max-width:230px!important}
  .table td a,.table td span{overflow-wrap:anywhere!important;word-break:break-word!important}

  /* Dashboard stats */
  .stats-card{margin-bottom:10px!important;padding:15px!important}
  .stats-card h2{font-size:1.7rem!important;margin-bottom:0!important}
  .stats-card .icon{font-size:1.55rem!important}

  /* CHAT: stack inbox above conversation and keep each section usable. */
  .subadmin-chat-page .col-md-4,.subadmin-chat-page .col-md-8{width:100%!important;flex:0 0 100%!important}
  .subadmin-chat-page .col-md-4{margin-bottom:12px!important}
  .subadmin-chat-page .card{border-radius:16px!important}
  .subadmin-chat-page .chat-list{max-height:40dvh!important;min-height:180px!important;overflow-y:auto!important;overflow-x:hidden!important}
  .subadmin-chat-page .chat-item{padding:11px!important;gap:8px!important;overflow:hidden!important}
  .subadmin-chat-page .premium-conv-main{display:flex!important;align-items:center!important;gap:9px!important;min-width:0!important}
  .subadmin-chat-page .premium-conv-copy{min-width:0!important;flex:1 1 auto!important}
  .subadmin-chat-page .premium-conv-copy strong,.subadmin-chat-page .premium-conv-copy small{display:block!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .subadmin-chat-page .premium-conv-copy small{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden!important}
  .subadmin-chat-page .premium-conv-actions{flex:0 0 auto!important;display:flex!important;gap:5px!important}
  .subadmin-chat-page .premium-conv-actions .btn{width:38px!important;height:38px!important;min-height:38px!important;padding:0!important;display:grid!important;place-items:center!important}
  .subadmin-chat-page .premium-chat-header{align-items:flex-start!important;gap:10px!important;flex-direction:column!important}
  .subadmin-chat-page .premium-chat-header>div:last-child{width:100%!important;display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
  .subadmin-chat-page .premium-chat-person{width:100%!important;min-width:0!important}
  .subadmin-chat-page .premium-chat-person>div:last-child{min-width:0!important}
  .subadmin-chat-page .premium-chat-person strong,.subadmin-chat-page .premium-chat-person small{display:block!important;overflow-wrap:anywhere!important}
  .subadmin-chat-page .message-container{height:42dvh!important;min-height:280px!important;max-height:52dvh!important;padding:12px!important;overflow-y:auto!important;overflow-x:hidden!important}
  .subadmin-chat-page .message{max-width:88%!important;min-width:0!important}
  .subadmin-chat-page .message p{white-space:pre-wrap!important;overflow-wrap:anywhere!important;word-break:break-word!important}
  .subadmin-chat-page .card-footer form{display:flex!important;gap:8px!important;align-items:flex-end!important}
  .subadmin-chat-page .premium-composer{flex:1 1 auto!important;min-width:0!important}
  .subadmin-chat-page .premium-composer input{width:100%!important;min-width:0!important}
  .subadmin-chat-page .premium-send-btn{flex:0 0 auto!important;min-width:48px!important;padding-left:12px!important;padding-right:12px!important}
  .subadmin-chat-page .premium-send-btn span{display:none!important}

  /* Email / AI settings / link pages */
  .subadmin-page .nav-tabs,.subadmin-page .nav-pills{display:flex!important;flex-wrap:wrap!important;gap:6px!important}
  .subadmin-page .nav-tabs .nav-item,.subadmin-page .nav-pills .nav-item{flex:1 1 130px!important}
  .subadmin-page .nav-tabs .nav-link,.subadmin-page .nav-pills .nav-link{width:100%!important;text-align:center!important;white-space:normal!important}
  .subadmin-page code,.superadmin-page code{white-space:pre-wrap!important;overflow-wrap:anywhere!important;word-break:break-all!important}

  /* Super Admin manager/monitor */
  .superadmin-page .permission-grid,.superadmin-page .permissions-grid{grid-template-columns:1fr!important}
  .superadmin-page .card-header.d-flex{align-items:flex-start!important;flex-direction:column!important}
  .superadmin-page .card-header.d-flex>*{max-width:100%!important}

  /* Call pages: make controls fit and labels not collide. */
  #incomingCallOverlay .call-box{max-width:calc(100vw - 24px)!important;width:calc(100vw - 24px)!important}
  #callOverlay .call-info,#callOverlay .caller-name,#incomingCallOverlay .caller-name{max-width:calc(100vw - 32px)!important;overflow-wrap:anywhere!important}
  #callOverlay .call-controls{width:calc(100vw - 16px)!important;max-width:100%!important;left:8px!important;right:8px!important;transform:none!important;display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;justify-content:flex-start!important;gap:7px!important;padding:8px 4px max(10px,env(safe-area-inset-bottom))!important}
  #callOverlay .call-btn{flex:0 0 66px!important;min-width:66px!important;max-width:66px!important;white-space:normal!important;line-height:1.05!important}

  /* Alerts and long status text */
  .alert{padding:11px 38px 11px 12px!important;position:relative!important}
  .alert .btn-close{position:absolute!important;right:8px!important;top:8px!important}
}

@media (max-width: 479.98px){
  body{font-size:13.5px!important}
  body.has-mobile-admin-nav .sidebar + .col-md-10,
  body.has-mobile-admin-nav .sidebar + .col-lg-10,
  body.has-mobile-admin-nav .main-content,
  body.has-mobile-admin-nav .content-area,
  .subadmin-page .col-md-10,.superadmin-page .col-md-10{padding:70px 9px 18px!important}
  .card-header,.card-body,.card-footer{padding-left:10px!important;padding-right:10px!important}
  .table{font-size:.78rem!important;min-width:560px!important}
  .subadmin-chat-page .message{max-width:92%!important}
  .subadmin-chat-page .premium-avatar{width:40px!important;height:40px!important;flex:0 0 40px!important}
  .subadmin-chat-page .premium-send-btn{width:46px!important;min-width:46px!important;padding:0!important}
  .mobile-sidebar-trigger{width:46px!important;height:46px!important}
}