/*
|--------------------------------------------------------------------------
| WALIX Modern UI Layer
|--------------------------------------------------------------------------
| Lightweight visual refresh only. No business logic changed.
*/
:root {
  --walix-primary: #2563eb;
  --walix-primary-2: #06b6d4;
  --walix-primary-soft: rgba(37, 99, 235, .12);
  --walix-success: #16a34a;
  --walix-warning: #f59e0b;
  --walix-danger: #ef4444;
  --walix-ink: #0f172a;
  --walix-muted: #64748b;
  --walix-border: rgba(15, 23, 42, .08);
  --walix-card: rgba(255, 255, 255, .92);
  --walix-bg: #f6f8fc;
  --walix-shadow-sm: 0 10px 24px rgba(15, 23, 42, .06);
  --walix-shadow-md: 0 18px 45px rgba(15, 23, 42, .10);
  --walix-radius: 20px;
}

html, body { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, .16), transparent 32rem),
    radial-gradient(circle at 88% 8%, rgba(6, 182, 212, .16), transparent 28rem),
    linear-gradient(180deg, #f8fbff 0%, #eef3fb 100%) !important;
  color: var(--walix-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 62%);
  z-index: -1;
}

.dark-style body {
  --walix-card: rgba(30, 41, 59, .88);
  --walix-border: rgba(255,255,255,.09);
  --walix-ink: #e2e8f0;
  --walix-muted: #94a3b8;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, .18), transparent 34rem),
    radial-gradient(circle at 88% 8%, rgba(6, 182, 212, .14), transparent 28rem),
    linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
}

/* Layout */
.layout-wrapper, .layout-container, .layout-page, .content-wrapper { background: transparent !important; }
.container-p-y { padding-top: 1.1rem !important; }
.container-fluid.container-p-y { padding-left: 1.35rem !important; padding-right: 1.35rem !important; }
@media (max-width: 767.98px) {
  .container-fluid.container-p-y { padding-left: .9rem !important; padding-right: .9rem !important; }
}

/* Sidebar */
.layout-menu.bg-menu-theme {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94)) !important;
  border-right: 1px solid var(--walix-border);
  box-shadow: 18px 0 40px rgba(15, 23, 42, .05);
  backdrop-filter: blur(18px);
}
.dark-style .layout-menu.bg-menu-theme {
  background: linear-gradient(180deg, rgba(15,23,42,.96), rgba(17,24,39,.92)) !important;
}
.app-brand.demo { min-height: 76px; padding: 1rem 1.25rem !important; border-bottom: 1px solid var(--walix-border); }
.app-brand-link { gap: .72rem !important; }
.app-brand-logo img {
  width: 38px;
  height: 38px !important;
  object-fit: contain;
  padding: 7px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--walix-primary), var(--walix-primary-2));
  box-shadow: 0 10px 24px rgba(37, 99, 235, .25);
}
.app-brand-text {
  letter-spacing: -.035em !important;
  font-size: 1.06rem !important;
  color: var(--walix-ink) !important;
}
.menu .app-brand.demo .menu-toggle-icon { color: var(--walix-muted); }
.menu-inner { padding: .9rem .85rem !important; }
.menu-header { margin-top: .8rem !important; padding: .75rem .85rem .35rem !important; }
.menu-header-text {
  color: var(--walix-muted) !important;
  font-weight: 800 !important;
  font-size: .68rem !important;
  letter-spacing: .11em !important;
}
.menu-vertical .menu-item { margin: .12rem 0 !important; }
.menu-vertical .menu-item .menu-link {
  min-height: 44px;
  border-radius: 14px !important;
  color: #334155 !important;
  transition: all .18s ease;
}
.dark-style .menu-vertical .menu-item .menu-link { color: #cbd5e1 !important; }
.menu-vertical .menu-item .menu-link:hover {
  background: var(--walix-primary-soft) !important;
  color: var(--walix-primary) !important;
  transform: translateX(2px);
}
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  color: #fff !important;
  background: linear-gradient(135deg, var(--walix-primary), var(--walix-primary-2)) !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, .28) !important;
}
.menu-icon { opacity: .9; }
.menu-sub .menu-link { min-height: 38px !important; font-size: .875rem; }
.main-device {
  border: 1px solid var(--walix-border) !important;
  background: rgba(255,255,255,.78) !important;
  border-radius: 14px !important;
  min-height: 42px;
  font-weight: 700;
  color: var(--walix-ink) !important;
}
.dark-style .main-device { background: rgba(15,23,42,.65) !important; }

/* Navbar */
.layout-navbar.navbar-detached {
  background: rgba(255,255,255,.78) !important;
  border: 1px solid var(--walix-border);
  box-shadow: var(--walix-shadow-sm) !important;
  border-radius: 20px !important;
  margin-top: .9rem !important;
  backdrop-filter: blur(18px);
}
.dark-style .layout-navbar.navbar-detached { background: rgba(15,23,42,.78) !important; }
.navbar .nav-link, .navbar .dropdown-toggle { border-radius: 14px; }
.navbar .nav-link:hover { background: var(--walix-primary-soft); }
#server-status .badge, .navbar .badge {
  border-radius: 999px !important;
  padding: .48rem .7rem !important;
  box-shadow: none !important;
}
.avatar img { border: 2px solid rgba(37,99,235,.18); box-shadow: 0 8px 20px rgba(15,23,42,.10); }
.dropdown-menu {
  border: 1px solid var(--walix-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--walix-shadow-md) !important;
  overflow: hidden;
}
.dropdown-item { border-radius: 12px; margin: .1rem .4rem; width: calc(100% - .8rem); }

/* Page head */
.walix-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: .35rem .15rem;
}
.walix-page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--walix-primary);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.walix-page-head h3 {
  margin: .2rem 0 0;
  font-size: clamp(1.35rem, 1vw + 1.05rem, 2rem);
  letter-spacing: -.04em;
  font-weight: 850;
  color: var(--walix-ink);
}
.walix-page-meta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .82rem;
  border: 1px solid var(--walix-border);
  border-radius: 999px;
  color: var(--walix-muted);
  background: rgba(255,255,255,.62);
  font-weight: 700;
  font-size: .82rem;
}
.dark-style .walix-page-meta { background: rgba(15,23,42,.56); }
@media (max-width: 767.98px) {
  .walix-page-head { align-items: flex-start; flex-direction: column; gap: .55rem; }
  .walix-page-meta { width: 100%; justify-content: center; }
}

/* Cards */
.card {
  border: 1px solid var(--walix-border) !important;
  border-radius: var(--walix-radius) !important;
  background: var(--walix-card) !important;
  box-shadow: var(--walix-shadow-sm) !important;
  overflow: hidden;
  backdrop-filter: blur(16px);
}
.card:hover { box-shadow: var(--walix-shadow-md) !important; }
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--walix-border) !important;
  padding: 1.15rem 1.25rem !important;
}
.card-body { padding: 1.25rem !important; }
.card .content-left span:first-child { font-weight: 800; color: var(--walix-muted); text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; }
.card .content-left h4 { font-size: 2rem; font-weight: 850; letter-spacing: -.05em; color: var(--walix-ink); }
.badge.bg-label-primary.rounded.p-2,
.badge.bg-label-success.rounded.p-2,
.badge.bg-label-warning.rounded.p-2,
.badge.bg-label-danger.rounded.p-2,
.badge.bg-label-info.rounded.p-2 {
  border-radius: 16px !important;
  min-width: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Tables / DataTables */
.table { --bs-table-bg: transparent !important; }
.table > :not(caption) > * > * { padding: .95rem 1rem !important; border-bottom-color: var(--walix-border) !important; }
.table thead th {
  background: rgba(37,99,235,.06) !important;
  color: var(--walix-muted) !important;
  font-size: .72rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-weight: 850 !important;
  border-bottom: 0 !important;
}
.table tbody tr { transition: background .18s ease, transform .18s ease; }
.table tbody tr:hover { background: rgba(37,99,235,.045) !important; }
.card-datatable { padding: .25rem !important; }
.dataTables_wrapper .row:first-child,
.dataTables_wrapper .row:last-child { padding: 1rem 1.1rem !important; align-items: center; }
.dataTables_filter input,
.dataTables_length select {
  border-radius: 14px !important;
  border-color: var(--walix-border) !important;
  box-shadow: none !important;
}
.page-link { border-radius: 12px !important; margin: 0 .12rem; border-color: transparent !important; }
.page-item.active .page-link { background: linear-gradient(135deg, var(--walix-primary), var(--walix-primary-2)) !important; box-shadow: 0 8px 18px rgba(37,99,235,.25); }

/* Forms */
.form-control, .form-select, .input-group-text {
  border-radius: 14px !important;
  border-color: rgba(15,23,42,.10) !important;
  background-color: rgba(255,255,255,.82) !important;
  min-height: 43px;
  box-shadow: none !important;
}
.dark-style .form-control,
.dark-style .form-select,
.dark-style .input-group-text { background-color: rgba(15,23,42,.68) !important; border-color: rgba(255,255,255,.10) !important; }
.form-control:focus, .form-select:focus {
  border-color: rgba(37,99,235,.58) !important;
  box-shadow: 0 0 0 .25rem rgba(37,99,235,.10) !important;
}
.form-label { font-weight: 800; color: var(--walix-ink); letter-spacing: -.01em; }
small, .text-muted { color: var(--walix-muted) !important; }

/* Buttons */
.btn { border-radius: 14px !important; font-weight: 800 !important; box-shadow: none !important; }
.btn-primary {
  background: linear-gradient(135deg, var(--walix-primary), var(--walix-primary-2)) !important;
  border: 0 !important;
  box-shadow: 0 12px 24px rgba(37,99,235,.24) !important;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(37,99,235,.28) !important; }
.btn-label-secondary, .btn-outline-secondary, .btn-secondary {
  border-color: var(--walix-border) !important;
  background: rgba(148,163,184,.10) !important;
  color: var(--walix-ink) !important;
}
.btn-danger, .btn-outline-danger { border-radius: 14px !important; }
.btn-sm { border-radius: 11px !important; }

/* Badges and alerts */
.badge { font-weight: 800 !important; letter-spacing: -.01em; }
.bg-label-primary { background: rgba(37,99,235,.11) !important; color: var(--walix-primary) !important; }
.bg-label-success { background: rgba(22,163,74,.12) !important; color: var(--walix-success) !important; }
.bg-label-warning { background: rgba(245,158,11,.14) !important; color: #b45309 !important; }
.bg-label-danger { background: rgba(239,68,68,.12) !important; color: var(--walix-danger) !important; }
.alert {
  border: 1px solid var(--walix-border) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}
.alert-primary { background: rgba(37,99,235,.09) !important; color: #1e3a8a !important; }
.dark-style .alert-primary { color: #bfdbfe !important; }

/* Modal / offcanvas */
.modal-content, .offcanvas {
  border: 1px solid var(--walix-border) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: var(--walix-shadow-md) !important;
  backdrop-filter: blur(18px);
}
.dark-style .modal-content, .dark-style .offcanvas { background: rgba(15,23,42,.95) !important; }
.modal-header, .modal-footer, .offcanvas-header { border-color: var(--walix-border) !important; }
.offcanvas-end { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }

/* Live chat / inbox common */
.chat-history, .chat-history-body, .app-chat-history, .app-chat-contacts {
  border-color: var(--walix-border) !important;
}
.chat-message-text, .chat-history .chat-message {
  border-radius: 18px !important;
}

/* Auth */
.authentication-wrapper {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 12%, rgba(37,99,235,.2), transparent 26rem),
    radial-gradient(circle at 85% 24%, rgba(6,182,212,.2), transparent 28rem);
}
.authentication-inner .card {
  max-width: 450px;
  margin: 0 auto;
  border-radius: 28px !important;
  box-shadow: 0 28px 70px rgba(15,23,42,.16) !important;
}
.authentication-inner .app-brand-logo img { height: 46px !important; width: 46px; }
.authentication-inner h4 { letter-spacing: -.04em; font-weight: 850; }

/* Map / file manager compatibility */
#location-map, .leaflet-container { border-radius: 18px !important; border: 1px solid var(--walix-border); overflow: hidden; }

/* Misc */
code {
  border-radius: 8px;
  padding: .15rem .35rem;
  background: rgba(37,99,235,.10);
  color: var(--walix-primary);
}
.swal2-popup { border-radius: 24px !important; }
hr { border-color: var(--walix-border) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Compact sidebar refinements */
.menu-inner { padding-left: .62rem !important; padding-right: .62rem !important; }
.menu-vertical .menu-item .menu-link {
  min-height: 40px !important;
  padding: .58rem .78rem !important;
  margin-left: .12rem !important;
  margin-right: .12rem !important;
}
.menu-vertical .menu-item > .menu-link.px-0 {
  padding: .32rem .44rem !important;
  justify-content: center !important;
}
.menu-sub .menu-link {
  min-height: 36px !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}
.main-device {
  width: calc(100% - .65rem) !important;
  max-width: 214px !important;
  min-height: 38px !important;
  margin: .12rem auto !important;
  padding: .5rem .72rem !important;
  font-size: .84rem !important;
  line-height: 1.2 !important;
}
@media (max-width: 1199.98px) {
  .main-device { max-width: 100% !important; }
}



/* --------------------------------------------------------------------------
   Vuexy-style polish v6.6: cleaner logo, protected scrolling sidebar
   -------------------------------------------------------------------------- */
:root {
  --walix-vuexy-purple: #7367f0;
  --walix-vuexy-cyan: #00cfe8;
  --walix-vuexy-bg: #f8f7fa;
  --walix-vuexy-card: #fff;
  --walix-vuexy-text: #2f2b3d;
  --walix-vuexy-muted: #6f6b7d;
  --walix-vuexy-border: rgba(47, 43, 61, .12);
}
body {
  background:
    radial-gradient(circle at 12% 0, rgba(115,103,240,.12), transparent 28rem),
    radial-gradient(circle at 86% 8%, rgba(0,207,232,.10), transparent 26rem),
    var(--walix-vuexy-bg) !important;
}
body::before { opacity: .32; }
.layout-menu.bg-menu-theme {
  background: rgba(255,255,255,.96) !important;
  border-right: 1px solid var(--walix-vuexy-border) !important;
  box-shadow: 0 .125rem .375rem rgba(47,43,61,.10) !important;
}
.dark-style .layout-menu.bg-menu-theme { background: rgba(37,35,52,.97) !important; }
#layout-menu.layout-menu.menu-vertical {
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#layout-menu .app-brand.demo {
  flex: 0 0 auto !important;
  min-height: 72px !important;
  position: relative !important;
  z-index: 5 !important;
  background: inherit !important;
  border-bottom: 1px solid var(--walix-vuexy-border) !important;
}
#layout-menu .menu-inner-shadow { flex: 0 0 auto !important; z-index: 4 !important; }
#layout-menu .menu-inner {
  flex: 1 1 auto !important;
  height: auto !important;
  max-height: calc(100vh - 72px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-top: .85rem !important;
  padding-bottom: 1.25rem !important;
  scroll-padding-top: 1rem;
}
.app-brand-logo-clean,
.app-brand-logo.demo {
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.app-brand-logo-clean img,
.app-brand-logo.demo img,
.authentication-inner .app-brand-logo img {
  width: auto !important;
  height: 34px !important;
  max-width: 42px !important;
  object-fit: contain !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.app-brand-text {
  color: var(--walix-vuexy-text) !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
}
.dark-style .app-brand-text { color: #f8f7fa !important; }
.menu-vertical .menu-item .menu-link {
  border-radius: .375rem !important;
  min-height: 42px !important;
  color: var(--walix-vuexy-muted) !important;
}
.menu-vertical .menu-item .menu-link:hover {
  background: rgba(115,103,240,.10) !important;
  color: var(--walix-vuexy-purple) !important;
  transform: translateX(2px);
}
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(118deg, var(--walix-vuexy-purple), #8f85f3) !important;
  box-shadow: 0 .125rem .375rem rgba(115,103,240,.42) !important;
}
.menu-header-text { color: #a8aaae !important; }
.main-device {
  border-radius: .375rem !important;
  border-color: var(--walix-vuexy-border) !important;
  font-weight: 600 !important;
}
.layout-navbar.navbar-detached,
.card,
.dropdown-menu,
.modal-content,
.offcanvas {
  border-color: var(--walix-vuexy-border) !important;
  box-shadow: 0 .25rem 1.125rem rgba(47,43,61,.10) !important;
}
.layout-navbar.navbar-detached,
.card { border-radius: .75rem !important; }
.btn,
.form-control,
.form-select,
.input-group-text,
.page-link,
.badge { border-radius: .375rem !important; }
.btn-primary,
.page-item.active .page-link {
  background: linear-gradient(118deg, var(--walix-vuexy-purple), #8f85f3) !important;
  border-color: transparent !important;
  box-shadow: 0 .125rem .375rem rgba(115,103,240,.42) !important;
}
.form-control:focus,
.form-select:focus {
  border-color: rgba(115,103,240,.65) !important;
  box-shadow: 0 0 0 .2rem rgba(115,103,240,.12) !important;
}
.bg-label-primary { background: rgba(115,103,240,.16) !important; color: var(--walix-vuexy-purple) !important; }
.walix-page-eyebrow { color: var(--walix-vuexy-purple) !important; }
.walix-page-head h3 { color: var(--walix-vuexy-text) !important; }
.dark-style .walix-page-head h3 { color: #f8f7fa !important; }


/* --------------------------------------------------------------------------
   Sidebar brand/logo hard reset
   Menghapus total box/circle/background bawaan Vuexy/demo pada logo brand.
-------------------------------------------------------------------------- */
#layout-menu .app-brand-logo,
#layout-menu .app-brand-logo.demo,
#layout-menu .app-brand-logo-clean,
#layout-menu .app-brand-logo::before,
#layout-menu .app-brand-logo::after,
#layout-menu .app-brand-logo.demo::before,
#layout-menu .app-brand-logo.demo::after,
#layout-menu .app-brand-logo-clean::before,
#layout-menu .app-brand-logo-clean::after {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}
#layout-menu .app-brand-logo img,
#layout-menu .app-brand-logo.demo img,
#layout-menu .app-brand-logo-clean img {
  display: block !important;
  width: auto !important;
  height: 34px !important;
  max-width: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* AI Bot model field must stay editable */
.ai-model-input {
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    cursor: text !important;
    background-color: var(--bs-body-bg) !important;
}
.ai-model-input[readonly], .ai-model-input:disabled {
    opacity: 1 !important;
}

/* Inbox / Live Chat refresh */
.walix-chat-shell {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 1rem;
  min-height: calc(100vh - 210px);
}
.walix-chat-sidebar,
.walix-chat-panel {
  border: 1px solid var(--walix-border);
  border-radius: 24px;
  background: rgba(255,255,255,.86);
  box-shadow: var(--walix-shadow-sm);
  backdrop-filter: blur(18px);
  overflow: hidden;
}
.dark-style .walix-chat-sidebar,
.dark-style .walix-chat-panel { background: rgba(15,23,42,.82); }
.walix-chat-sidebar { display: flex; flex-direction: column; min-height: 640px; }
.walix-chat-sidebar-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .8rem;
  padding: 1.15rem 1.15rem .9rem;
  border-bottom: 1px solid var(--walix-border);
}
.walix-chat-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 .65rem;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, var(--walix-primary), var(--walix-primary-2));
  box-shadow: 0 10px 24px rgba(37,99,235,.25);
}
.walix-chat-search {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: .95rem 1rem;
  padding: .72rem .9rem;
  border-radius: 16px;
  border: 1px solid var(--walix-border);
  background: rgba(248,250,252,.92);
}
.dark-style .walix-chat-search { background: rgba(30,41,59,.72); }
.walix-chat-search i { color: var(--walix-muted); font-size: 1.1rem; }
.walix-chat-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--walix-ink);
  font-weight: 650;
  font-size: .92rem;
}
.walix-chat-search input::placeholder { color: var(--walix-muted); font-weight: 500; }
.walix-conversation-list {
  padding: 0 .75rem 1rem;
  overflow: auto;
  flex: 1;
}
.walix-conversation-item {
  display: flex;
  gap: .82rem;
  padding: .85rem;
  margin-bottom: .45rem;
  border-radius: 18px;
  text-decoration: none;
  color: var(--walix-ink);
  border: 1px solid transparent;
  transition: all .18s ease;
}
.walix-conversation-item:hover {
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.12);
  color: var(--walix-ink);
  transform: translateX(2px);
}
.walix-conversation-item.active {
  background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(6,182,212,.10));
  border-color: rgba(37,99,235,.22);
  box-shadow: inset 3px 0 0 var(--walix-primary);
}
.walix-conversation-item.has-takeover:not(.active) { background: rgba(245,158,11,.08); }
.walix-chat-avatar,
.walix-message-avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: #fff;
  font-weight: 850;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #64748b, #334155);
  box-shadow: 0 10px 22px rgba(15,23,42,.16);
}
.walix-chat-avatar-lg { width: 48px; height: 48px; border-radius: 18px; background: linear-gradient(135deg, var(--walix-primary), var(--walix-primary-2)); }
.walix-conversation-main { min-width: 0; flex: 1; }
.walix-conversation-top,
.walix-conversation-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
}
.walix-conversation-top strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .94rem;
  color: var(--walix-ink);
}
.walix-conversation-sub {
  margin-top: .12rem;
  color: var(--walix-muted);
  font-size: .79rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.walix-conversation-bottom {
  margin-top: .42rem;
  color: var(--walix-muted);
  font-size: .72rem;
}
.walix-conversation-bottom span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.walix-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 .42rem;
  border-radius: 999px;
  background: var(--walix-danger);
  color: #fff;
  font-size: .72rem;
  font-weight: 850;
}
.walix-takeover-pill,
.walix-takeover-banner,
.walix-ai-active {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  font-weight: 800;
  white-space: nowrap;
}
.walix-takeover-pill {
  padding: .18rem .45rem;
  background: rgba(245,158,11,.16);
  color: #b45309;
  font-size: .7rem;
}
.walix-chat-panel {
  min-height: 640px;
  display: flex;
  flex-direction: column;
}
.walix-chat-header {
  min-height: 76px;
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--walix-border);
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(248,250,252,.72));
}
.dark-style .walix-chat-header { background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(30,41,59,.72)); }
.walix-chat-status-line {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--walix-muted);
  font-size: .82rem;
  max-width: 100%;
}
.walix-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--walix-success); flex: 0 0 auto; }
.walix-chat-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; flex-wrap: wrap; }
.walix-takeover-banner {
  padding: .5rem .75rem;
  color: #92400e;
  background: rgba(245,158,11,.16);
  border: 1px solid rgba(245,158,11,.18);
}
.walix-ai-active {
  padding: .5rem .75rem;
  color: #047857;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.18);
}
.walix-chat-body {
  position: relative;
  flex: 1;
  min-height: 470px;
  max-height: 66vh;
  overflow: auto;
  padding: 1.25rem;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.10), transparent 26rem),
    radial-gradient(circle at bottom right, rgba(6,182,212,.10), transparent 22rem),
    linear-gradient(180deg, rgba(248,250,252,.86), rgba(241,245,249,.72));
}
.dark-style .walix-chat-body {
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.14), transparent 25rem),
    radial-gradient(circle at bottom right, rgba(6,182,212,.10), transparent 22rem),
    linear-gradient(180deg, rgba(15,23,42,.82), rgba(17,24,39,.78));
}
.walix-message-row {
  display: flex;
  align-items: flex-end;
  gap: .65rem;
  margin-bottom: .9rem;
}
.walix-message-row.outgoing { justify-content: flex-end; }
.walix-message-row.incoming { justify-content: flex-start; }
.walix-message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  font-size: .78rem;
  margin-bottom: 1.25rem;
  background: linear-gradient(135deg, #94a3b8, #475569);
  box-shadow: none;
}
.walix-message-stack {
  max-width: min(76%, 680px);
  display: flex;
  flex-direction: column;
}
.walix-message-row.outgoing .walix-message-stack { align-items: flex-end; }
.walix-message-row.incoming .walix-message-stack { align-items: flex-start; }
.walix-message-bubble {
  position: relative;
  padding: .82rem .98rem;
  border-radius: 20px;
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}
.walix-message-bubble.incoming {
  color: #0f172a;
  background: #fff;
  border-bottom-left-radius: 7px;
  border: 1px solid rgba(15,23,42,.06);
}
.walix-message-bubble.outgoing {
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  border-bottom-right-radius: 7px;
}
.dark-style .walix-message-bubble.incoming {
  color: #e2e8f0;
  background: rgba(30,41,59,.96);
  border-color: rgba(255,255,255,.08);
}
.walix-message-text {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
  font-size: .94rem;
}
.walix-message-meta {
  display: flex;
  align-items: center;
  gap: .32rem;
  margin-top: .34rem;
  padding: 0 .25rem;
  color: var(--walix-muted);
  font-size: .71rem;
  line-height: 1;
}
.walix-message-meta.outgoing { justify-content: flex-end; }
.walix-message-meta i { font-size: .9rem; color: var(--walix-primary); }
.walix-chat-footer {
  padding: .95rem 1rem;
  border-top: 1px solid var(--walix-border);
  background: rgba(255,255,255,.86);
}
.dark-style .walix-chat-footer { background: rgba(15,23,42,.86); }
.walix-reply-box {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  padding: .58rem;
  border-radius: 20px;
  border: 1px solid var(--walix-border);
  background: rgba(248,250,252,.94);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68);
}
.dark-style .walix-reply-box { background: rgba(30,41,59,.72); box-shadow: none; }
.walix-reply-box textarea {
  width: 100%;
  min-height: 42px;
  max-height: 150px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--walix-ink);
  padding: .62rem .72rem;
  line-height: 1.45;
  font-weight: 600;
}
.walix-reply-box textarea::placeholder { color: var(--walix-muted); font-weight: 500; }
.walix-send-btn {
  min-width: 104px;
  min-height: 44px;
  border-radius: 16px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  box-shadow: 0 10px 24px rgba(37,99,235,.25) !important;
}
.walix-send-btn.is-sending { opacity: .8; }
.walix-chat-empty,
.walix-chat-no-selection {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}
.walix-chat-empty {
  padding: 2rem 1.1rem;
  color: var(--walix-muted);
  gap: .35rem;
}
.walix-chat-empty i {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  margin-bottom: .35rem;
  color: var(--walix-primary);
  background: var(--walix-primary-soft);
  font-size: 1.85rem;
}
.walix-chat-empty strong { color: var(--walix-ink); font-size: 1rem; }
.walix-chat-empty-room { min-height: 430px; }
.walix-chat-no-selection { min-height: 640px; }
.min-w-0 { min-width: 0; }
@media (max-width: 991.98px) {
  .walix-chat-shell { grid-template-columns: 1fr; min-height: auto; }
  .walix-chat-sidebar, .walix-chat-panel { min-height: auto; }
  .walix-conversation-list { max-height: 360px; }
  .walix-chat-header { align-items: flex-start; flex-direction: column; }
  .walix-chat-header-actions { width: 100%; justify-content: flex-start; }
  .walix-chat-body { max-height: 58vh; min-height: 430px; padding: 1rem .82rem; }
  .walix-message-stack { max-width: 86%; }
}
@media (max-width: 575.98px) {
  .walix-chat-shell { gap: .8rem; }
  .walix-chat-sidebar, .walix-chat-panel { border-radius: 18px; }
  .walix-chat-sidebar-head, .walix-chat-header { padding: .95rem; }
  .walix-message-stack { max-width: 88%; }
  .walix-message-bubble { padding: .74rem .85rem; border-radius: 17px; }
  .walix-reply-box { gap: .45rem; border-radius: 17px; }
  .walix-send-btn { min-width: 48px; padding-left: .8rem !important; padding-right: .8rem !important; }
  .walix-send-btn .send-text { display: none; }
}

/* Pairing Code UI Fix */
.walix-pairing-card {
    width: min(100%, 520px);
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 1.25rem;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(67, 89, 113, .12);
    box-shadow: 0 18px 45px rgba(67, 89, 113, .12);
}
.walix-pairing-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 260px;
    padding: .95rem 1.25rem;
    border-radius: 1rem;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: .38rem;
    color: #0f172a;
    background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(34,211,238,.16));
    border: 1px dashed rgba(59,130,246,.55);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    user-select: all;
}
.dark-style .walix-pairing-card,
[data-bs-theme="dark"] .walix-pairing-card {
    background: rgba(30, 32, 44, .88);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dark-style .walix-pairing-code,
[data-bs-theme="dark"] .walix-pairing-code {
    color: #f8fafc;
    background: linear-gradient(135deg, rgba(59,130,246,.22), rgba(34,211,238,.18));
    border-color: rgba(96,165,250,.65);
}
@media (max-width: 576px) {
    .walix-pairing-code {
        min-width: 0;
        width: 100%;
        letter-spacing: .24rem;
    }
}