/* ═══════════════════════════════════════════════════════════
   VANNIBEL CHAT — chat.vannibel.com
   Shared design system — mobile-first, native-app inspired.
   ═══════════════════════════════════════════════════════════ */
:root{
  --vc-navy:#0a1440; --vc-navy2:#0d1f5c; --vc-navy3:#132a6e;
  --vc-gold:#f5c518; --vc-gold2:#e0ad0a;
  --vc-blue:#2563eb; --vc-green:#059669; --vc-red:#ef4444; --vc-purple:#7c3aed; --vc-orange:#ea580c;
  --vc-bg:#f4f6fb; --vc-surf:#ffffff; --vc-surf2:#f8faff;
  --vc-bdr:#e8edf5; --vc-tx:#0f1b3d; --vc-tx2:#64748b; --vc-tx3:#94a3b8;
  --vc-sw:252px; --vc-th:64px; --vc-tabh:64px;
  --vc-font:-apple-system,BlinkMacSystemFont,'Roboto','Open Sans','Helvetica Neue',sans-serif;
  --vc-r-sm:10px; --vc-r-md:14px; --vc-r-lg:20px;
  --vc-shadow-sm:0 2px 8px rgba(15,27,61,.06);
  --vc-shadow-md:0 8px 24px rgba(15,27,61,.08);
  --vc-shadow-lg:0 20px 50px rgba(15,27,61,.14);
  --vc-safe-b:env(safe-area-inset-bottom,0px);
  --vc-safe-t:env(safe-area-inset-top,0px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{overflow-x:hidden;-webkit-text-size-adjust:100%;}
body{font-family:var(--vc-font);background:var(--vc-bg);color:var(--vc-tx);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font-family:inherit;}
button{-webkit-tap-highlight-color:transparent;}
img{max-width:100%;display:block;}
::selection{background:rgba(245,197,24,.3);}

/* ── Auth page — split-screen, matches pages/auth.php exactly ── */
.vc-auth-page{min-height:100vh;min-height:100dvh;background:linear-gradient(135deg,#0a1845 0%,#0d1f5c 50%,#1a3a8f 100%);display:flex;align-items:center;justify-content:center;padding:2rem 1rem;padding-top:calc(2rem + var(--vc-safe-t));padding-bottom:calc(2rem + var(--vc-safe-b));position:relative;overflow:hidden;}
.vc-auth-page::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 20% 80%,rgba(245,197,24,.07),transparent 50%),radial-gradient(circle at 80% 20%,rgba(37,99,235,.1),transparent 50%);pointer-events:none;}
.vc-auth-container{width:100%;max-width:960px;display:grid;grid-template-columns:1fr 1fr;border-radius:24px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.5);position:relative;z-index:1;}

.vc-auth-left{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.03));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-right:1px solid rgba(255,255,255,.1);padding:3rem 2.5rem;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;}
.vc-auth-left::before{content:'';position:absolute;bottom:-60px;right:-60px;width:280px;height:280px;background:radial-gradient(circle,rgba(245,197,24,.12),transparent 70%);border-radius:50%;}
.vc-a-logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;margin-bottom:2.5rem;position:relative;z-index:1;}
.vc-a-logo-icon{width:44px;height:44px;background:var(--vc-gold);border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;color:var(--vc-navy2);}
.vc-a-logo-text{color:#fff;font-weight:800;font-size:20px;}
.vc-a-logo-text span{color:var(--vc-gold);}
.vc-a-headline{color:#fff;font-size:clamp(21px,3vw,28px);font-weight:800;line-height:1.28;margin-bottom:.75rem;position:relative;z-index:1;}
.vc-a-headline span{color:var(--vc-gold);}
.vc-a-sub{color:rgba(255,255,255,.55);font-size:13.5px;line-height:1.6;margin-bottom:2rem;position:relative;z-index:1;}
.vc-a-feat{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem;position:relative;z-index:1;}
.vc-a-feat-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;color:#fff;}
.vc-a-feat-text strong{color:#fff;display:block;font-size:13px;font-weight:700;}
.vc-a-feat-text span{color:rgba(255,255,255,.6);font-size:12.5px;}

.vc-auth-right{background:#fff;padding:2.75rem 2.5rem;display:flex;flex-direction:column;justify-content:center;}
.vc-auth-right-hd{margin-bottom:1.6rem;}
.vc-auth-right-hd h2{font-size:20px;font-weight:900;color:var(--vc-tx);}
.vc-auth-right-hd p{font-size:12.5px;color:var(--vc-tx2);margin-top:.3rem;line-height:1.5;}
.vc-fg2{margin-bottom:1rem;}
.vc-fg2 label{display:block;font-size:12px;font-weight:700;color:var(--vc-tx);margin-bottom:.4rem;}
.vc-pw-wrap{position:relative;}
/* ── Shared form controls ──
   These live here (not in a page's local <style>) because login.php,
   settings.php and others all use them — previously .vc-input2 was
   only defined inside settings.php, so the login form's inputs rendered
   completely unstyled. */
.vc-lbl{font-size:11px;font-weight:800;color:var(--vc-tx2);text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:.4rem;}
.vc-input2{
  width:100%;
  padding:.72rem .85rem;
  border:1.5px solid var(--vc-bdr);
  border-radius:10px;
  font-size:16px;              /* 16px avoids iOS zoom-on-focus */
  font-family:inherit;
  background:var(--vc-surf);
  color:var(--vc-tx);
  transition:border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance:none;
  appearance:none;
}
.vc-input2::placeholder{color:var(--vc-tx3);}

/* ── Checkboxes, colour pickers and file rows ──
   These were left with raw browser defaults, which is why some settings
   fields looked unstyled next to the themed text inputs. */
input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; flex-shrink:0;
  border:1.5px solid var(--vc-bdr); border-radius:5px;
  background:var(--vc-surf); cursor:pointer; position:relative;
  transition:background .15s, border-color .15s;
}
input[type="checkbox"]:checked{ background:var(--vc-navy2); border-color:var(--vc-navy2); }
input[type="checkbox"]:checked::after{
  content:''; position:absolute; left:5px; top:1.5px;
  width:4px; height:9px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
input[type="checkbox"]:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.2); }

input[type="color"]{
  appearance:none; -webkit-appearance:none;
  width:46px; height:38px; padding:0;
  border:1.5px solid var(--vc-bdr); border-radius:9px;
  background:var(--vc-surf); cursor:pointer; flex-shrink:0;
}
input[type="color"]::-webkit-color-swatch-wrapper{ padding:3px; }
input[type="color"]::-webkit-color-swatch{ border:none; border-radius:6px; }
input[type="color"]::-moz-color-swatch{ border:none; border-radius:6px; }

.vc-check{
  display:flex; align-items:center; gap:.6rem;
  font-size:12.5px; font-weight:600; color:var(--vc-tx2);
  cursor:pointer; user-select:none;
}
.vc-input2:focus{outline:none;border-color:var(--vc-blue);box-shadow:0 0 0 3px rgba(37,99,235,.12);background:var(--vc-surf);}
.vc-input2:disabled{background:var(--vc-surf2);color:var(--vc-tx3);cursor:not-allowed;}
/* Native selects need an explicit arrow once appearance is reset */
select.vc-input2{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:right .7rem center;
  background-size:16px;
  padding-right:2.2rem;
}
textarea.vc-input2{resize:vertical;min-height:90px;line-height:1.55;}
.vc-check{display:flex;align-items:center;gap:.55rem;font-size:12.5px;font-weight:600;color:var(--vc-tx2);cursor:pointer;}
.vc-check input[type=checkbox]{width:17px;height:17px;accent-color:var(--vc-navy2);cursor:pointer;flex-shrink:0;}
.vc-pw-wrap{position:relative;}
.vc-pw-wrap .vc-input2{padding-right:2.5rem;}
.vc-pw-eye{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--vc-tx3);font-size:14px;padding:.2rem;}
.vc-auth-alert{padding:.65rem .9rem;border-radius:9px;font-size:12.5px;font-weight:600;align-items:center;gap:.5rem;margin-bottom:1rem;display:none;}
.vc-auth-alert.show{display:flex;}
.vc-auth-alert.err{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;}
.vc-auth-submit{width:100%;padding:.8rem;border-radius:10px;background:linear-gradient(135deg,#0d1f5c,#1a3a8f);color:#fff;font-size:14px;font-weight:700;border:none;cursor:pointer;font-family:inherit;transition:.2s;display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.3rem;}
.vc-auth-submit:hover{filter:brightness(1.12);transform:translateY(-1px);}
.vc-auth-badge2{display:flex;align-items:center;gap:.4rem;background:#f0fdf4;border:1px solid #bbf7d0;padding:.5rem .8rem;border-radius:9px;font-size:11px;color:#15803d;font-weight:600;margin-top:1.1rem;justify-content:center;}
.vc-auth-switch{text-align:center;margin-top:1.3rem;font-size:12.5px;color:var(--vc-tx2);}
.vc-auth-switch a{color:var(--vc-blue);font-weight:700;}
@media(max-width:640px){.vc-auth-container{grid-template-columns:1fr;}.vc-auth-left{display:none;}.vc-auth-right{padding:2.2rem 1.6rem;}}

/* ── App shell — Topbar ── */
#vcTopbar{position:fixed;top:0;left:0;right:0;height:var(--vc-th);padding-top:var(--vc-safe-t);background:#0d1f5c;z-index:500;display:flex;align-items:center;padding-left:1rem;padding-right:1rem;gap:.7rem;box-shadow:0 1px 0 rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.07);}
.vc-brand{display:flex;align-items:center;gap:.5rem;flex-shrink:0;}
.vc-brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#f5c518,#d4a800);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;color:var(--vc-navy);}
.vc-brand-text{color:#fff;font-weight:800;font-size:14.5px;letter-spacing:-.2px;}
.vc-brand-text span{color:var(--vc-gold);}
#vcHam{display:none;width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.08);border:none;color:#fff;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.vc-topbar-spacer{flex:1;}
.vc-online-toggle{display:flex;align-items:center;gap:.45rem;padding:.4rem .65rem;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);cursor:pointer;flex-shrink:0;transition:background .15s;}
.vc-online-toggle:active{transform:scale(.96);}
.vc-online-dot{width:7px;height:7px;border-radius:50%;background:var(--vc-tx3);flex-shrink:0;}
.vc-online-toggle.on .vc-online-dot{background:var(--vc-green);box-shadow:0 0 8px rgba(5,150,105,.6);animation:vcPulse 2s infinite;}
@keyframes vcPulse{0%,100%{opacity:1;}50%{opacity:.5;}}
.vc-online-label{font-size:11px;font-weight:700;color:rgba(255,255,255,.7);}
.vc-topbar-btn{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.06);border:none;color:rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12.5px;flex-shrink:0;text-decoration:none;}
.vc-topbar-btn:hover{background:rgba(255,255,255,.12);color:#fff;}

/* ── Desktop sidebar — navy user card + grouped nav ── */
#vcSidebar{position:fixed;top:0;left:0;bottom:0;width:var(--vc-sw);background:var(--vc-surf);border-right:1px solid var(--vc-bdr);z-index:400;display:flex;flex-direction:column;transition:transform .25s;overflow:hidden;}

#vcSbTop{flex-shrink:0;padding:1.25rem;padding-top:calc(var(--vc-th) + 1.25rem);background:linear-gradient(135deg,#0d1f5c,#1a3a8f);}
#vcSbUserRow{display:flex;align-items:center;gap:.75rem;}
#vcSbAvatar{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#f5c518,#d4a800);color:#0d1f5c;font-weight:900;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
#vcSbUserInfo{min-width:0;}
#vcSbName{font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#vcSbRole{font-size:11px;color:rgba(255,255,255,.5);text-transform:capitalize;margin-top:.15rem;}

#vcSbNav{flex:1;overflow-y:auto;padding:1rem .75rem;scrollbar-width:thin;}
.vc-sb-group{margin-bottom:.85rem;}
.vc-sb-label{font-size:10px;font-weight:700;color:#94a3b8;letter-spacing:.1em;padding:0 .5rem;margin-bottom:.35rem;display:flex;align-items:center;gap:.4rem;}
.vc-sb-label::after{content:'';flex:1;height:1px;background:#f1f5f9;}

.vc-nav-link{display:flex;align-items:center;gap:.75rem;padding:.58rem .85rem;border-radius:10px;color:#64748b;font-size:13px;font-weight:600;margin-bottom:1px;position:relative;transition:background .15s,color .15s;}
.vc-nav-link i{width:16px;text-align:center;font-size:13px;color:#94a3b8;transition:color .15s;}
.vc-nav-link:hover{background:#f0f4ff;color:#0d1f5c;}
.vc-nav-link:hover i{color:#2563eb;}
.vc-nav-link.on{background:#0d1f5c;color:#fff;}
.vc-nav-link.on i{color:#f5c518;}
.vc-nav-badge{margin-left:auto;background:var(--vc-red);color:#fff;font-size:10px;font-weight:800;padding:.1rem .4rem;border-radius:20px;min-width:18px;text-align:center;}
.vc-sidebar-foot{margin-top:auto;padding-top:1rem;border-top:1px solid var(--vc-bdr);}
.vc-sidebar-foot a{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border-radius:9px;color:var(--vc-tx3);font-size:12px;font-weight:600;}
.vc-sidebar-foot a:hover{background:var(--vc-surf2);color:var(--vc-tx2);}

/* App shell: the main area is its own scroll container sized to exactly
   the space between the topbar and the tab bar. Long conversation lists
   scroll *inside* it rather than growing the page, which is what keeps
   the bottom tab bar reachable (a plain min-height lets the page grow
   past the viewport and pushes fixed elements out of reach on mobile). */
#vcMain{margin-left:var(--vc-sw);margin-top:var(--vc-th);height:calc(100vh - var(--vc-th));height:calc(100dvh - var(--vc-th));overflow-y:auto;-webkit-overflow-scrolling:touch;}
/* Pages that manage their own internal scrolling (the inbox) opt out of
   the shell's scrollbar so you don't get two nested scroll areas. */
#vcMain.vc-main-fixed{overflow:hidden;}
#vcOverlay{display:none;}

/* ── Mobile bottom tab bar (native-app pattern — this is the primary
   nav for mobile, replacing the hamburger drawer entirely) ── */
#vcTabBar{display:none;}

@media(min-width:901px){
  #vcSidebar{transform:translateX(0) !important;}
  #vcMain{margin-left:var(--vc-sw) !important;}
}
@media(max-width:900px){
  :root{--vc-th:56px;}
  #vcSidebar{display:none;}
  #vcMain{margin-left:0 !important;margin-top:var(--vc-th);height:calc(100vh - var(--vc-th) - var(--vc-tabh) - var(--vc-safe-b));height:calc(100dvh - var(--vc-th) - var(--vc-tabh) - var(--vc-safe-b));overflow-y:auto;padding-bottom:0;}

  #vcTabBar{
    display:flex;position:fixed;left:0;right:0;bottom:0;height:calc(var(--vc-tabh) + var(--vc-safe-b));
    padding-bottom:var(--vc-safe-b);background:var(--vc-surf);border-top:1px solid var(--vc-bdr);
    z-index:500;box-shadow:0 -4px 20px rgba(15,27,61,.06);
  }
  .vc-tab-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;color:var(--vc-tx3);position:relative;}
  .vc-tab-item i{font-size:18px;transition:transform .15s;}
  .vc-tab-item span{font-size:9.5px;font-weight:700;}
  .vc-tab-item.on{color:var(--vc-navy2);}
  .vc-tab-item.on i{transform:translateY(-1px);}
  .vc-tab-item:active i{transform:scale(.85);}
  .vc-tab-badge{position:absolute;top:2px;right:calc(50% - 16px);background:var(--vc-red);color:#fff;font-size:9px;font-weight:800;min-width:15px;height:15px;border-radius:20px;display:flex;align-items:center;justify-content:center;padding:0 3px;}
}

/* Generic content helpers reused across pages */
.vc-page-hd{padding:1.25rem 1.25rem .9rem;}
@media(min-width:901px){.vc-page-hd{padding:1.5rem 1.5rem 1rem;}}
.vc-eyebrow{font-size:10.5px;font-weight:800;color:var(--vc-gold2);letter-spacing:.08em;margin-bottom:.3rem;text-transform:uppercase;}
.vc-title{font-size:19px;font-weight:900;color:var(--vc-tx);letter-spacing:-.2px;}
@media(min-width:901px){.vc-title{font-size:21px;}}
.vc-sub{font-size:12px;color:var(--vc-tx2);margin-top:.2rem;line-height:1.5;}
.vc-card{background:var(--vc-surf);border:1px solid var(--vc-bdr);border-radius:var(--vc-r-md);box-shadow:var(--vc-shadow-sm);}
.vc-empty{padding:3rem 1.5rem;text-align:center;color:var(--vc-tx3);font-size:13px;}
.vc-empty i{font-size:30px;display:block;margin-bottom:.7rem;opacity:.35;}
.vc-btn{padding:.6rem 1.05rem;border-radius:10px;font-size:12.5px;font-weight:700;cursor:pointer;border:1.5px solid var(--vc-bdr);background:var(--vc-surf);color:var(--vc-tx2);display:inline-flex;align-items:center;gap:.4rem;transition:background .15s,transform .1s;}
.vc-btn:hover{background:var(--vc-surf2);}
.vc-btn:active{transform:scale(.97);}
.vc-btn-gold{background:linear-gradient(135deg,#f5c518,#d4a800);border-color:transparent;color:var(--vc-navy);box-shadow:0 4px 14px rgba(245,197,24,.3);}
.vc-btn-gold:hover{filter:brightness(1.06);transform:translateY(-1px);}
.vc-btn-navy{background:linear-gradient(135deg,#0d1f5c,#1a3a8f);border-color:transparent;color:#fff;}
.vc-btn-navy:hover{filter:brightness(1.15);transform:translateY(-1px);}

/* Mobile-friendly page container padding */
.vc-mob-pad{padding-left:1.25rem;padding-right:1.25rem;}
@media(min-width:901px){.vc-mob-pad{padding-left:1.5rem;padding-right:1.5rem;}}

/* Scrollbar polish (desktop) */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(15,27,61,.15);border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:rgba(15,27,61,.25);}

/* ── Responsive data table → stacked cards on mobile ──
   Used by Leads / Visitors: add class "vc-rtable" to the <table>, and a
   data-label="Column Name" attribute on each <td> — the table then
   automatically becomes a scannable stacked-card list on phones instead
   of a cramped horizontally-scrolling grid. ── */
@media(max-width:680px){
  .vc-rtable-wrap{overflow-x:visible !important;}
  table.vc-rtable{min-width:0 !important;}
  table.vc-rtable thead{display:none;}
  table.vc-rtable, table.vc-rtable tbody, table.vc-rtable tr, table.vc-rtable td{display:block;width:100%;}
  table.vc-rtable tr{background:var(--vc-surf);border:1px solid var(--vc-bdr);border-radius:var(--vc-r-md);margin-bottom:.7rem;padding:.85rem .95rem;box-shadow:var(--vc-shadow-sm);}
  table.vc-rtable tr.vc-rhide{display:none;}
  table.vc-rtable td{padding:.35rem 0 !important;border:none !important;display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-size:12.5px;}
  table.vc-rtable td::before{content:attr(data-label);font-size:10px;font-weight:800;color:var(--vc-tx3);text-transform:uppercase;letter-spacing:.03em;flex-shrink:0;}
  table.vc-rtable td[data-label="Name"]{font-size:14px;font-weight:800;color:var(--vc-tx);padding-bottom:.5rem !important;border-bottom:1px solid var(--vc-bdr) !important;margin-bottom:.4rem;}
  table.vc-rtable td[data-label="Name"]::before{display:none;}
  table.vc-rtable td[data-label="Copy"], table.vc-rtable td[data-label="Actions"]{justify-content:flex-end;padding-top:.6rem !important;border-top:1px solid var(--vc-bdr) !important;margin-top:.3rem;}
  table.vc-rtable td[data-label="Copy"]::before, table.vc-rtable td[data-label="Actions"]::before{display:none;}
}