/* ==========================================================================
   Nurexa OS — AI Communication Platform
   "One AI receptionist for your business across phone calls and WhatsApp."

   Design system
     brand green  #00cb54
     brand dark   #050d1f
   Bootstrap 5 is the base; this file is the product skin.
   UI-only prototype.
   ========================================================================== */

:root{
  /* Planes & surfaces (dark) */
  --bg:            #050d1f;   /* page plane */
  --surface:       #0b1730;   /* cards, sidebar, topbar */
  --surface-2:     #0f1d3a;   /* inset / hover */
  --surface-3:     #16274a;   /* stronger inset, active chips */
  --border:        #1a2a49;
  --border-strong: #27395f;

  /* Ink */
  --ink:           #e9eff8;
  --ink-2:         #a2b3cc;
  --muted:         #6b7c95;

  /* Brand */
  --brand:         #00cb54;
  --brand-strong:  #00b34a;
  --brand-deep:    #049a42;
  --on-brand:      #04210f;   /* ink on a green fill */
  --brand-tint:    rgba(0,203,84,.13);
  --brand-tint-2:  rgba(0,203,84,.24);

  /* Channels — subtle marks only, never large blocks */
  --voice:         #3987e5;
  --voice-tint:    rgba(57,135,229,.14);
  --voice-tint-2:  rgba(57,135,229,.26);
  --wa:            #00cb54;
  --wa-tint:       rgba(0,203,84,.13);

  /* Status */
  --good:          #00cb54;
  --good-tint:     rgba(0,203,84,.13);
  --warning:       #fab219;
  --warning-ink:   #f6c463;
  --warning-tint:  rgba(250,178,25,.13);
  --critical:      #ff6b6b;
  --critical-tint: rgba(255,107,107,.13);
  --human:         #a78bfa;
  --human-tint:    rgba(167,139,250,.14);

  /* Chart chrome (validated against surface #0b1730) */
  --c-voice:       #3987e5;
  --c-wa:          #00b34a;
  --c-neutral:     #33445f;
  --grid:          #162643;
  --axis:          #23345a;

  --radius:        12px;
  --radius-sm:     8px;
  --radius-lg:     16px;
  --shadow-xs:     0 1px 2px rgba(0,0,0,.28);
  --shadow-sm:     0 2px 8px rgba(0,0,0,.32);
  --shadow-md:     0 10px 30px rgba(0,0,0,.42);
  --shadow-pop:    0 18px 50px rgba(0,0,0,.55);
  --glow:          0 0 0 3px var(--brand-tint-2);

  --sidebar-w:     250px;
  --topbar-h:      60px;

  --font: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;

  color-scheme: dark;

  /* --- Bootstrap variables mapped to our tokens ---------------------------
     Bootstrap components (.card, .modal, .dropdown, .offcanvas, forms…) set
     their own `color` from these, which would otherwise override inheritance
     and paint text in Bootstrap's light-theme ink. */
  --bs-body-color:        #e9eff8;
  --bs-body-color-rgb:    233,239,248;
  --bs-body-bg:           #050d1f;
  --bs-body-bg-rgb:       5,13,31;
  --bs-emphasis-color:    #ffffff;
  --bs-emphasis-color-rgb:255,255,255;
  --bs-secondary-color:   rgba(233,239,248,.72);
  --bs-tertiary-color:    rgba(233,239,248,.52);
  --bs-secondary-bg:      #0f1d3a;
  --bs-tertiary-bg:       #16274a;
  --bs-border-color:      #1a2a49;
  --bs-heading-color:     inherit;
  --bs-link-color:        #00cb54;
  --bs-link-color-rgb:    0,203,84;
  --bs-link-hover-color:  #2ade74;
  --bs-card-color:        #e9eff8;
  --bs-card-bg:           #0b1730;
  --bs-card-border-color: #1a2a49;
  --bs-modal-color:       #e9eff8;
  --bs-modal-bg:          #0b1730;
  --bs-dropdown-color:    #a2b3cc;
  --bs-dropdown-bg:       #0b1730;
  --bs-offcanvas-color:   #e9eff8;
  --bs-offcanvas-bg:      #0b1730;
  --bs-table-color:       #e9eff8;
}

*{ -webkit-font-smoothing: antialiased; }
html, body{ height:100%; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

[dir="rtl"], [lang="ar"]{ font-family: "IBM Plex Sans Arabic", "Inter", sans-serif; }

a{ color: var(--brand); text-decoration: none; }
a:hover{ color: #2ade74; }
hr{ border-color: var(--border); opacity:1; }
small{ font-size: .84em; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#22334f; border-radius:10px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:#2e4262; background-clip:content-box; border:3px solid transparent; }
::-webkit-scrollbar-track{ background:transparent; }

::selection{ background: var(--brand-tint-2); color:#fff; }

/* ==========================================================================
   App shell
   ========================================================================== */

.app{ min-height:100vh; }

.sidebar{
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display:flex; flex-direction:column; z-index:1045;
}

.sidebar__brand{
  height: var(--topbar-h); display:flex; align-items:center; gap:10px;
  padding: 0 16px; border-bottom:1px solid var(--border); flex:0 0 auto;
}
.brand-logo{ width:28px; height:28px; object-fit:contain; flex:0 0 auto; }
.brand-name{ font-weight:660; font-size:15px; letter-spacing:-.025em; line-height:1.1; }
.brand-sub{ font-size:10.5px; color:var(--muted); letter-spacing:.02em; }

.sidebar__nav{ flex:1 1 auto; overflow-y:auto; padding: 10px 10px 18px; }

.nav-section{
  font-size:10px; font-weight:680; letter-spacing:.09em; text-transform:uppercase;
  color:#5d6e87; padding: 16px 10px 6px; display:flex; align-items:center; gap:7px;
}
.nav-section i{ font-size:10px; }
.nav-section--voice i{ color: var(--voice); }
.nav-section--wa i{ color: var(--wa); }

.nav-link{
  display:flex; align-items:center; gap:11px; padding:8px 10px; margin-bottom:2px;
  border-radius: var(--radius-sm); color: var(--ink-2); font-weight:500; font-size:13.5px;
  position:relative; transition: background .12s ease, color .12s ease;
}
.nav-link i{ width:16px; text-align:center; font-size:13.5px; color:#6b7c95; transition: color .12s ease; }
.nav-link:hover{ background: var(--surface-2); color: var(--ink); }
.nav-link:hover i{ color: var(--ink-2); }
.nav-link.active{ background: var(--surface-3); color:#fff; font-weight:600; }
.nav-link.active::before{
  content:""; position:absolute; left:-10px; top:7px; bottom:7px; width:3px;
  background: var(--brand); border-radius:0 3px 3px 0;
}
.nav-link.active i{ color: var(--brand); }
.nav-link .nav-badge{
  margin-left:auto; background: var(--critical); color:#2b0b0b;
  font-size:10.5px; font-weight:700; line-height:1; padding:4px 6px; border-radius:20px;
  min-width:19px; text-align:center;
}
.nav-sub{ padding-left:8px; }

.sidebar__foot{ flex:0 0 auto; border-top:1px solid var(--border); padding:10px; }
.workspace{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:var(--radius-sm); }
.workspace:hover{ background: var(--surface-2); }

.nav-link--signout{ margin-top:4px; }
.nav-link--signout:hover{ background: var(--critical-tint); color:#ff8f8f; }

.avatar{
  border-radius:50%; background: var(--surface-3); color: var(--ink);
  display:grid; place-items:center; font-weight:650; flex:0 0 auto;
  width:32px; height:32px; font-size:11.5px; letter-spacing:-.02em;
  border:1px solid var(--border-strong);
}
.avatar--lg{ width:48px; height:48px; font-size:16px; }
.avatar--sm{ width:26px; height:26px; font-size:10px; }
.avatar--brand{ background: var(--brand-tint); color: var(--brand); border-color: var(--brand-tint-2); }

/* Main column */
.main{ margin-left: var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column; }

.topbar{
  position:sticky; top:0; z-index:1020; height:var(--topbar-h); flex:0 0 auto;
  background: rgba(11,23,48,.82); backdrop-filter: saturate(150%) blur(10px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:14px; padding:0 22px;
}
.topbar__title{ font-size:15px; font-weight:650; letter-spacing:-.02em; }
.topbar__crumb{ font-size:12px; color:var(--muted); }

.icon-btn{
  width:34px; height:34px; border-radius:9px; border:1px solid transparent; background:transparent;
  color:var(--ink-2); display:grid; place-items:center; position:relative; transition: background .12s ease, color .12s ease;
}
.icon-btn:hover{ background: var(--surface-2); color:var(--ink); }
.icon-btn .dot{
  position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%;
  background: var(--critical); border:1.5px solid var(--surface);
}

.page{ padding:24px 26px 44px; flex:1 1 auto; }
.page--flush{ padding:0; height: calc(100vh - var(--topbar-h)); overflow:hidden; }
.page-head{ margin-bottom:20px; }
.savebar{
  position:sticky; top:calc(var(--topbar-h) + 10px); z-index:1010;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background: rgba(11,23,48,.9); backdrop-filter: saturate(150%) blur(10px);
  border:1px solid var(--border-strong); border-radius:11px;
  padding:10px 14px; margin-bottom:18px; box-shadow: var(--shadow-xs);
}
.savebar__text{ font-size:13px; color:var(--ink-2); }
.savebar__dot{ width:8px; height:8px; border-radius:50%; background: var(--brand); flex:0 0 auto; }
.page-title{ font-size:22px; font-weight:680; letter-spacing:-.03em; margin:0; }
.page-sub{ color:var(--muted); font-size:13.5px; margin:4px 0 0; }
.section-title{ font-size:13px; font-weight:650; letter-spacing:-.01em; margin:0; }
.section-hint{ font-size:12px; color:var(--muted); }

/* ==========================================================================
   Primitives
   ========================================================================== */

.card{
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-xs);
  color: var(--ink);
}

/* Text that carries meaning is always given ink explicitly, never left to
   inherit through a third-party component. */
.page-title, .greeting, .section-title, .thread-head__name, .conv__name,
.t-name, .kpi__value, .timeline__title, .notif__title, .ownership__title,
.setting-row__label, .empty__title, .choice__title, .prev-conv__title,
.brand-name, .legend__val, .kv__v, .modal-title, .chan-card__num,
.transcript-line__text, .msg__bubble, .tbl td{ color: var(--ink); }
.card__head{
  padding:14px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.card__body{ padding:16px; }
.card__foot{ padding:12px 16px; border-top:1px solid var(--border); }

.btn{ font-size:13.5px; font-weight:560; border-radius:9px; padding:.5rem .9rem; letter-spacing:-.01em; }
.btn:focus{ box-shadow:none; }
.btn-primary{ background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight:620; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active{ background:#00e05d; border-color:#00e05d; color: var(--on-brand); }
.btn-primary:disabled, .btn-primary.disabled{ background: var(--brand); border-color: var(--brand); color: var(--on-brand); opacity:.6; }
.btn-outline-secondary:disabled, .btn-outline-secondary.disabled{ background:transparent; border-color: var(--border-strong); color: var(--ink-2); opacity:.6; }
.btn-ghost:disabled, .btn-ghost.disabled{ background:transparent; color: var(--ink-2); opacity:.6; }
.btn-danger-soft:disabled, .btn-danger-soft.disabled{ background: var(--critical-tint); color:#ff8f8f; opacity:.6; }
.btn-outline-secondary{ border-color: var(--border-strong); color: var(--ink-2); background: transparent; }
.btn-outline-secondary:hover{ background: var(--surface-2); border-color: var(--border-strong); color: var(--ink); }
.btn-ghost{ color: var(--ink-2); background:transparent; border:1px solid transparent; }
.btn-ghost:hover{ background: var(--surface-2); color: var(--ink); }
.btn-danger-soft{ background: var(--critical-tint); border:1px solid rgba(255,107,107,.3); color:#ff8f8f; }
.btn-danger-soft:hover{ background: rgba(255,107,107,.2); color:#ffa8a8; }
.btn-sm{ font-size:12.5px; padding:.34rem .68rem; border-radius:8px; }
.btn-lg{ font-size:14.5px; padding:.62rem 1.15rem; border-radius:10px; }
.btn i{ font-size:.92em; }

.form-control, .form-select{
  border-color: var(--border-strong); border-radius:9px; font-size:13.5px;
  color: var(--ink); padding:.48rem .7rem; background-color: var(--surface-2);
}
.form-control:focus, .form-select:focus{
  background-color: var(--surface-2); color: var(--ink);
  border-color: var(--brand); box-shadow: var(--glow);
}
.form-control::placeholder{ color:#5f7089; }
.form-select{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7c95' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-label{ font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:5px; }
.form-hint{ font-size:12px; color:var(--muted); margin-top:5px; }
.form-check-input{ background-color: var(--surface-3); border-color: var(--border-strong); }
.form-check-input:checked{ background-color: var(--brand); border-color: var(--brand); }
.form-switch .form-check-input{ width:2.1em; height:1.15em; }
.form-switch .form-check-input:focus{ box-shadow: var(--glow); border-color: var(--brand); }
textarea.form-control{ line-height:1.6; }

.search{ position:relative; }
.search i{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:#5f7089; font-size:12.5px; }
.search .form-control{ padding-left:31px; }

/* Pills & chips */
.pill{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; line-height:1;
  padding:4.5px 9px; border-radius:20px; white-space:nowrap;
  background: var(--surface-3); color: var(--ink-2);
}
.pill i{ font-size:9px; }
.pill--ai{        background: var(--brand-tint);    color:#4ee08a; }
.pill--attention{ background: var(--warning-tint);  color: var(--warning-ink); }
.pill--human{     background: var(--human-tint);    color: var(--human); }
.pill--resolved{  background: rgba(162,179,204,.12);color: var(--ink-2); }
.pill--active{    background: var(--good-tint);     color:#4ee08a; }
.pill--muted{     background: var(--surface-3);     color: var(--muted); }
.pill--missed{    background: var(--critical-tint); color:#ff8f8f; }
.pill--voice{     background: var(--voice-tint);    color:#79b1f0; }
.pill--wa{        background: var(--wa-tint);       color:#4ee08a; }

.dot-live{
  width:7px; height:7px; border-radius:50%; background: var(--brand); display:inline-block;
  box-shadow:0 0 0 3px var(--brand-tint);
}

/* Channel icon square */
.ico{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-size:14px; flex:0 0 auto; }
.ico--sm{ width:26px; height:26px; border-radius:7px; font-size:11px; }
.ico--lg{ width:42px; height:42px; border-radius:11px; font-size:17px; }
.ico--voice{ background: var(--voice-tint); color: var(--voice); }
.ico--wa{ background: var(--wa-tint); color: var(--wa); }
.ico--neutral{ background: var(--surface-3); color: var(--ink-2); }
.ico--brand{ background: var(--brand-tint); color: var(--brand); }
.ico--warn{ background: var(--warning-tint); color: var(--warning); }
.ico--danger{ background: var(--critical-tint); color: var(--critical); }
.ico--human{ background: var(--human-tint); color: var(--human); }

.chan-mark{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color: var(--ink-2); font-weight:500; }
.chan-mark i{ font-size:11.5px; }
.chan-mark--voice i{ color: var(--voice); }
.chan-mark--wa i{ color: var(--wa); }

/* ==========================================================================
   Overview
   ========================================================================== */

.greeting{ font-size:24px; font-weight:680; letter-spacing:-.035em; margin:0; }

.chan-card{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  background: var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow: var(--shadow-xs); height:100%;
}
.chan-card__num{ font-size:13.5px; font-weight:620; letter-spacing:-.01em; font-variant-numeric: tabular-nums; }
.chan-card__label{ font-size:11.5px; color:var(--muted); }
.chan-card__meta{ font-size:12px; color:var(--ink-2); }

.kpi{
  background: var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 15px; box-shadow: var(--shadow-xs); height:100%;
}
.kpi__label{ font-size:12px; color:var(--muted); font-weight:500; display:flex; align-items:center; gap:6px; }
.kpi__value{ font-size:26px; font-weight:660; letter-spacing:-.035em; margin-top:4px; line-height:1.15; }
.kpi__value small{ font-size:14px; font-weight:550; color:var(--ink-2); letter-spacing:-.01em; }
.kpi__delta{ font-size:11.5px; font-weight:550; margin-top:3px; display:flex; align-items:center; gap:4px; }
.kpi__delta--up{ color: var(--brand); }
.kpi__delta--down{ color:#ff8f8f; }
.kpi__delta--flat{ color: var(--muted); }

/* Tables */
.tbl{ width:100%; border-collapse:separate; border-spacing:0; }
.tbl th{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:650; color:#5d6e87;
  padding:9px 16px; background: var(--surface-2); border-bottom:1px solid var(--border);
  text-align:left; white-space:nowrap;
}
.tbl td{ padding:12px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
.tbl tbody tr:last-child td{ border-bottom:none; }
.tbl tbody tr{ transition: background .1s ease; }
.tbl tbody tr.row-link:hover{ background: var(--surface-2); cursor:pointer; }
.tbl .t-name{ font-weight:600; font-size:13.5px; }
.tbl .t-sub{ font-size:12.5px; color:var(--ink-2); }
.tbl .t-time{ font-size:12px; color:var(--muted); white-space:nowrap; font-variant-numeric: tabular-nums; }
.t-snippet{ color:var(--ink-2); font-size:13px; max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Needs attention */
.attn-row{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); }
.attn-row:last-child{ border-bottom:none; }
.attn-banner{
  background: var(--warning-tint); border:1px solid rgba(250,178,25,.28);
  border-radius: var(--radius); padding:13px 15px; display:flex; gap:12px; align-items:flex-start;
}
.attn-banner__title{ font-size:13.5px; font-weight:650; color: var(--warning-ink); }
.attn-banner__text{ font-size:12.5px; color:#d8b878; }

/* ==========================================================================
   Inbox — three columns
   ========================================================================== */

.inbox{
  display:grid; grid-template-columns: 328px minmax(0,1fr) 320px;
  height:100%; background: var(--surface);
}
.inbox__col{ min-width:0; display:flex; flex-direction:column; height:100%; overflow:hidden; }
.inbox__list{ border-right:1px solid var(--border); background: var(--surface); }
.inbox__thread{ background: var(--bg); }
.inbox__details{ border-left:1px solid var(--border); background: var(--surface); }

.col-head{ flex:0 0 auto; padding:14px 14px 10px; border-bottom:1px solid var(--border); background:var(--surface); }
.col-scroll{ flex:1 1 auto; overflow-y:auto; }

.seg{ display:flex; gap:2px; background: var(--surface-2); padding:3px; border-radius:9px; }
.seg button{
  flex:1 1 auto; border:none; background:transparent; border-radius:7px;
  font-size:12px; font-weight:550; color:var(--ink-2); padding:5px 8px; white-space:nowrap;
  transition: background .12s ease, color .12s ease;
}
.seg button:hover{ color:var(--ink); }
.seg button.active{ background: var(--surface-3); color:#fff; font-weight:600; box-shadow: var(--shadow-xs); }
.seg button .cnt{ font-size:10.5px; color:var(--muted); margin-left:3px; font-variant-numeric: tabular-nums; }
.seg button.active .cnt{ color:var(--ink-2); }

/* Conversation list item */
.conv{
  display:flex; gap:11px; padding:12px 14px; border-bottom:1px solid var(--border);
  cursor:pointer; position:relative; transition: background .1s ease;
}
.conv:hover{ background: var(--surface-2); }
.conv.active{ background: var(--surface-3); }
.conv.active::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--brand); }
.conv__body{ min-width:0; flex:1 1 auto; }
.conv__top{ display:flex; align-items:baseline; gap:8px; }
.conv__name{ font-weight:600; font-size:13.5px; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conv__time{ margin-left:auto; font-size:11px; color:var(--muted); white-space:nowrap; flex:0 0 auto; }
.conv__msg{ font-size:12.5px; color:var(--ink-2); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conv__foot{ display:flex; align-items:center; gap:7px; margin-top:7px; }
.conv__av{ position:relative; flex:0 0 auto; }
.conv__chan{
  position:absolute; right:-3px; bottom:-3px; width:16px; height:16px; border-radius:50%;
  display:grid; place-items:center; font-size:8px; border:2px solid var(--surface);
}
.conv__chan--wa{ background: var(--wa); color:#04210f; }
.conv__chan--voice{ background: var(--voice); color:#04162b; }
.conv.active .conv__chan{ border-color: var(--surface-3); }
.unread-dot{ width:8px; height:8px; border-radius:50%; background: var(--brand); flex:0 0 auto; }
.conv--unread .conv__name{ font-weight:680; color:#fff; }
.conv--unread .conv__msg{ color:var(--ink); font-weight:500; }

/* Thread header */
.thread-head{
  flex:0 0 auto; background: var(--surface); border-bottom:1px solid var(--border);
  padding:11px 18px; display:flex; align-items:center; gap:12px;
}
.thread-head__name{ font-size:14.5px; font-weight:650; letter-spacing:-.02em; }
.thread-head__meta{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.thread-scroll{
  flex:1 1 auto; overflow-y:auto; padding:20px 22px 8px;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.045) 1px, transparent 0) 0 0/22px 22px,
    var(--bg);
}

.day-sep{ display:flex; align-items:center; gap:12px; margin:6px 0 16px; }
.day-sep::before, .day-sep::after{ content:""; height:1px; background:var(--border); flex:1 1 auto; }
.day-sep span{ font-size:11px; color:var(--muted); font-weight:550; }

/* Messages — deliberately not a WhatsApp clone: flat surfaces, small radii */
.msg{ display:flex; gap:9px; margin-bottom:14px; max-width:78%; }
.msg__av{ flex:0 0 auto; }
.msg__col{ min-width:0; }
.msg__who{ font-size:11px; color:var(--muted); font-weight:600; margin-bottom:4px; display:flex; align-items:center; gap:6px; }
.msg__bubble{
  border-radius: 4px 12px 12px 12px; padding:9px 12px; font-size:13.5px; line-height:1.6;
  border:1px solid var(--border); background: var(--surface); color:var(--ink);
  box-shadow: var(--shadow-xs); white-space:pre-wrap; word-wrap:break-word;
}
.msg__time{ font-size:10.5px; color:var(--muted); margin-top:4px; font-variant-numeric: tabular-nums; }

.msg--out{ margin-left:auto; flex-direction:row-reverse; }
.msg--out .msg__col{ text-align:right; }
.msg--out .msg__who{ justify-content:flex-end; }
.msg--out .msg__bubble{
  border-radius: 12px 4px 12px 12px;
  background: var(--brand-tint); border-color: rgba(0,203,84,.28); color:#d9ffe8; text-align:left;
}
.msg--human .msg__bubble{ background: var(--human-tint); border-color: rgba(167,139,250,.3); color:#e6ddff; }
.msg--out .msg__time{ text-align:right; }
.msg__bubble[dir="rtl"]{ text-align:right; }

.typing{ display:inline-flex; gap:3px; align-items:center; }
.typing span{ width:5px; height:5px; border-radius:50%; background: var(--brand); opacity:.4; animation: blink 1.2s infinite; }
.typing span:nth-child(2){ animation-delay:.2s; }
.typing span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,60%,100%{opacity:.3} 30%{opacity:1} }

.thread-event{ display:flex; align-items:center; justify-content:center; gap:8px; margin:2px 0 16px; }
.thread-event span{
  font-size:11.5px; color:var(--ink-2); background:var(--surface); border:1px solid var(--border);
  padding:4px 11px; border-radius:20px; display:inline-flex; align-items:center; gap:6px;
}
.thread-event i{ font-size:10px; color:var(--muted); }

/* Ownership bar + composer */
.ownership{
  flex:0 0 auto; background: var(--surface); border-top:1px solid var(--border);
  padding:10px 18px; display:flex; align-items:center; gap:11px; flex-wrap:wrap;
}
.ownership--ai{ background: var(--brand-tint); border-top-color: rgba(0,203,84,.28); }
.ownership--attention{ background: var(--warning-tint); border-top-color: rgba(250,178,25,.3); }
.ownership--human{ background: var(--human-tint); border-top-color: rgba(167,139,250,.3); }
.ownership__title{ font-size:13px; font-weight:640; }
.ownership__text{ font-size:12px; color:var(--ink-2); }

.composer{ flex:0 0 auto; background: var(--surface); border-top:1px solid var(--border); padding:12px 18px 14px; }
.composer__box{
  border:1px solid var(--border-strong); border-radius:12px; background: var(--surface-2);
  padding:8px 10px 8px 12px; display:flex; align-items:flex-end; gap:8px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.composer__box:focus-within{ border-color: var(--brand); box-shadow: var(--glow); }
.composer textarea{
  border:none; outline:none; resize:none; flex:1 1 auto; font-size:13.5px; max-height:120px;
  background:transparent; color:var(--ink); padding:5px 0; line-height:1.5;
}
.composer textarea::placeholder{ color:#5f7089; }
.composer--locked .composer__box{ background: transparent; border-style:dashed; }
.composer__locked-note{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-2); }

/* Right details panel */
.details-sec{ padding:16px; border-bottom:1px solid var(--border); }
.details-sec__title{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:650; color:#5d6e87; margin-bottom:10px;
}
.kv{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:12.5px; }
.kv__k{ color:var(--muted); flex:0 0 auto; }
.kv__v{ color:var(--ink); font-weight:550; text-align:right; min-width:0; }
.tag{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:550;
  background: var(--surface-2); border:1px solid var(--border); color:var(--ink-2);
  padding:4px 9px; border-radius:6px;
}
.summary-box{
  background: var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:11px 12px; font-size:12.5px; color:var(--ink-2); line-height:1.6;
}
.extract-row{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; padding:6px 0; border-bottom:1px dashed var(--border); }
.extract-row:last-child{ border-bottom:none; }

/* Timeline */
.timeline{ position:relative; padding-left:26px; }
.timeline::before{ content:""; position:absolute; left:8px; top:6px; bottom:6px; width:1px; background:var(--border); }
.timeline__item{ position:relative; padding-bottom:16px; }
.timeline__item:last-child{ padding-bottom:0; }
.timeline__dot{
  position:absolute; left:-22px; top:2px; width:17px; height:17px; border-radius:50%;
  display:grid; place-items:center; font-size:7.5px; border:2px solid var(--surface);
}
.timeline__dot--wa{ background: var(--wa-tint); color: var(--wa); }
.timeline__dot--voice{ background: var(--voice-tint); color: var(--voice); }
.timeline__date{ font-size:11px; color:var(--muted); font-weight:550; }
.timeline__title{ font-size:13px; font-weight:600; margin-top:1px; }
.timeline__desc{ font-size:12.5px; color:var(--ink-2); }

.prev-conv{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); cursor:pointer; }
.prev-conv:last-child{ border-bottom:none; }
.prev-conv:hover .prev-conv__title{ color: var(--brand); }
.prev-conv__title{ font-size:12.5px; font-weight:550; }
.prev-conv__meta{ font-size:11.5px; color:var(--muted); }

/* Voice record inside the thread column */
.call-summary{
  background: var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; box-shadow: var(--shadow-xs);
}
.transcript-line{ display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); }
.transcript-line:last-child{ border-bottom:none; }
.transcript-line__who{
  flex:0 0 68px; font-size:11.5px; font-weight:650; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; padding-top:2px;
}
.transcript-line__text{ font-size:13.5px; color:var(--ink); line-height:1.6; }
.transcript-line--ai .transcript-line__who{ color: var(--brand); }
.waveform{ display:flex; align-items:center; gap:2.5px; height:30px; }
.waveform span{ width:2.5px; border-radius:2px; background: var(--surface-3); }
.waveform span.on{ background: var(--brand); }

/* ==========================================================================
   Agent & settings
   ========================================================================== */

.setting-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:14px 0; border-bottom:1px solid var(--border);
}
.setting-row:last-child{ border-bottom:none; }
.setting-row__label{ font-size:13.5px; font-weight:600; }
.setting-row__hint{ font-size:12.5px; color:var(--muted); margin-top:2px; max-width:54ch; }
.setting-row__ctrl{ flex:0 0 auto; min-width:200px; }

.choice-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(148px,1fr)); gap:8px; }
.choice{
  border:1px solid var(--border-strong); border-radius:10px; padding:11px 12px; cursor:pointer;
  background: var(--surface-2); transition: border-color .12s ease, background .12s ease;
}
.choice:hover{ border-color: var(--brand); }
.choice.selected{ border-color: var(--brand); background: var(--brand-tint); }
.choice__title{ font-size:13px; font-weight:600; display:flex; align-items:center; gap:7px; }
.choice__desc{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.choice input{ display:none; }

.knowledge-card{
  border:1px solid var(--border); border-radius:var(--radius); padding:14px;
  background: var(--surface); height:100%; transition: border-color .12s ease, background .12s ease;
}
.knowledge-card:hover{ border-color: var(--border-strong); background: var(--surface-2); }
.share-line{
  font-size:11.5px; color:var(--ink-2); display:flex; align-items:center; gap:10px;
  margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); flex-wrap:wrap;
}
.share-chk{ display:inline-flex; align-items:center; gap:4px; }
.share-chk i{ font-size:10px; }
.share-chk--on{ color: var(--brand); }
.share-chk--off{ color:#3f5171; }

.instructions-area{
  font-family: var(--font); font-size:13px; line-height:1.7; min-height:300px;
  background: var(--surface-2); border-radius:10px;
}

.connection-card{
  border:1px solid var(--border); border-radius:var(--radius); background: var(--surface);
  box-shadow: var(--shadow-xs); overflow:hidden;
}
.cap-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 0; border-bottom:1px dashed var(--border); font-size:13px;
}
.cap-row:last-child{ border-bottom:none; }

/* Empty state */
.empty{ text-align:center; padding:44px 24px; max-width:470px; margin:0 auto; }
.empty__ico{
  width:58px; height:58px; border-radius:16px; display:grid; place-items:center; margin:0 auto 16px;
  font-size:23px; background: var(--surface-2); color: var(--muted); border:1px solid var(--border);
}
.empty__title{ font-size:16.5px; font-weight:650; letter-spacing:-.02em; }
.empty__text{ font-size:13.5px; color:var(--muted); margin:6px 0 18px; }

/* Wizard */
.wiz-steps{ display:flex; align-items:center; margin-bottom:22px; }
.wiz-step{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); font-weight:550; }
.wiz-step__n{
  width:23px; height:23px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:650;
  background: var(--surface-2); color:var(--muted); border:1px solid var(--border-strong);
}
.wiz-step.active{ color:#fff; }
.wiz-step.active .wiz-step__n{ background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.wiz-step.done{ color: var(--ink-2); }
.wiz-step.done .wiz-step__n{ background: var(--brand-tint); color: var(--brand); border-color: var(--brand-tint-2); }
.wiz-line{ flex:1 1 auto; height:1px; background: var(--border-strong); margin:0 10px; }

.pick-row{
  display:flex; align-items:center; gap:12px; border:1px solid var(--border-strong); border-radius:10px;
  padding:12px 14px; cursor:pointer; background: var(--surface-2);
  transition: border-color .12s ease, background .12s ease;
}
.pick-row:hover{ border-color: var(--brand); }
.pick-row.selected{ border-color: var(--brand); background: var(--brand-tint); }

/* Modals & dropdowns */
.modal-content{
  border:1px solid var(--border); border-radius:14px; box-shadow: var(--shadow-pop);
  background: var(--surface); color: var(--ink);
}
.modal-header{ border-bottom:1px solid var(--border); padding:16px 20px; }
.modal-title{ font-size:15.5px; font-weight:650; letter-spacing:-.02em; }
.modal-body{ padding:20px; }
.modal-footer{ border-top:1px solid var(--border); padding:14px 20px; }
.modal-backdrop.show{ opacity:.62; }
.btn-close{ filter: invert(1) grayscale(1) brightness(1.6); opacity:.5; }
.btn-close:hover{ opacity:.9; }

.dropdown-menu{
  border:1px solid var(--border); border-radius:12px; box-shadow: var(--shadow-md); padding:6px;
  font-size:13.5px; background: var(--surface); --bs-dropdown-link-color: var(--ink-2);
}
.dropdown-item{ border-radius:7px; padding:7px 10px; color:var(--ink-2); }
.dropdown-item:hover, .dropdown-item:focus{ background: var(--surface-2); color:var(--ink); }
.dropdown-item i{ width:16px; color:var(--muted); }
.dropdown-header{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#5d6e87; font-weight:650; padding:8px 10px 4px; }
.dropdown-divider{ border-color:var(--border); margin:5px 0; }

/* Notifications */
.notif-menu{ width:356px; padding:0; overflow:hidden; }
.notif-head{ padding:12px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.notif{ display:flex; gap:11px; padding:12px 14px; border-bottom:1px solid var(--border); cursor:pointer; }
.notif:last-child{ border-bottom:none; }
.notif:hover{ background: var(--surface-2); }
.notif--unread{ background: rgba(0,203,84,.06); }
.notif--unread:hover{ background: rgba(0,203,84,.1); }
.notif__title{ font-size:13px; font-weight:600; line-height:1.35; }
.notif__text{ font-size:12.5px; color:var(--ink-2); margin-top:2px; }
.notif__time{ font-size:11px; color:var(--muted); margin-top:4px; }

/* Toast */
.toast-stack{ position:fixed; right:20px; top:calc(var(--topbar-h) + 14px); z-index:2000; display:flex; flex-direction:column; gap:10px; }
.toast-item{
  background: var(--surface-3); border:1px solid var(--border-strong); color: var(--ink);
  border-radius:11px; padding:11px 15px; font-size:13px; box-shadow: var(--shadow-pop);
  display:flex; align-items:center; gap:10px; min-width:250px;
  animation: toastIn .22s cubic-bezier(.2,.8,.3,1);
}
.toast-item i{ color: var(--brand); }
@keyframes toastIn{ from{ opacity:0; transform: translateY(-8px) scale(.98);} to{opacity:1; transform:none;} }

/* Charts */
.chart-wrap{ position:relative; height:250px; }
.chart-wrap--sm{ height:200px; }
.legend{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.legend__item{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-2); }
.legend__key{ width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
.legend__val{ font-weight:650; color:var(--ink); font-variant-numeric: tabular-nums; }

.split-bar{ display:flex; height:12px; border-radius:6px; overflow:hidden; gap:2px; }
.split-bar__seg{ height:100%; border-radius:3px; }

.perf-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
.perf-row:last-child{ border-bottom:none; }
.perf-bar{ flex:1 1 auto; height:7px; border-radius:4px; background: var(--surface-3); overflow:hidden; }
.perf-bar span{ display:block; height:100%; border-radius:4px; }

/* Live call */
.livecall{
  border:1px solid rgba(0,203,84,.28); background: var(--brand-tint); border-radius:var(--radius);
  padding:12px 14px; display:flex; align-items:center; gap:12px;
}
.pulse{ animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }

/* Utilities */
.text-muted-2{ color: var(--muted) !important; }
.fs-12{ font-size:12px; }
.fs-13{ font-size:13px; }
.fw-550{ font-weight:550; }
.fw-650{ font-weight:650; }
.tnum{ font-variant-numeric: tabular-nums; }
.hairline{ border-top:1px solid var(--border); }
.cursor-pointer{ cursor:pointer; }
.mobile-only{ display:none; }
.text-brand{ color: var(--brand) !important; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1400px){
  .inbox{ grid-template-columns: 300px minmax(0,1fr) 296px; }
}

@media (max-width: 1199.98px){
  .inbox{ grid-template-columns: 296px minmax(0,1fr); }
  .inbox__details{
    position:fixed; top:var(--topbar-h); right:0; bottom:0; width:320px; z-index:1030;
    box-shadow: var(--shadow-pop); transform: translateX(100%); transition: transform .22s ease;
  }
  .inbox.show-details .inbox__details{ transform:none; }
  .details-toggle{ display:inline-grid !important; }
}
.details-toggle{ display:none; }

@media (max-width: 991.98px){
  .sidebar{ transform: translateX(-100%); transition: transform .22s ease; }
  body.nav-open .sidebar{ transform:none; }
  body.nav-open .nav-scrim{ opacity:1; pointer-events:auto; }
  .nav-scrim{
    position:fixed; inset:0; background:rgba(5,13,31,.7); z-index:1040;
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .main{ margin-left:0; }
  .mobile-only{ display:inline-grid; }
  .page{ padding:18px 16px 40px; }
  .topbar{ padding:0 14px; }

  .inbox{ grid-template-columns: 1fr; }
  .inbox__col{ grid-column:1; grid-row:1; }
  .inbox__list{ border-right:none; }
  .inbox__thread, .inbox__details{ display:none; }
  .inbox[data-view="thread"] .inbox__list{ display:none; }
  .inbox[data-view="thread"] .inbox__thread{ display:flex; }
  .inbox[data-view="details"] .inbox__list{ display:none; }
  .inbox[data-view="details"] .inbox__details{
    display:flex; position:static; width:auto; transform:none; box-shadow:none; border-left:none;
  }
  .back-btn{ display:inline-grid !important; }
  .msg{ max-width:88%; }
}
.back-btn{ display:none; }

@media (max-width: 575.98px){
  .greeting{ font-size:20px; }
  .kpi__value{ font-size:22px; }
  .page-title{ font-size:19px; }
  .notif-menu{ width: calc(100vw - 28px); }
}

/* ==========================================================================
   Auth — sign in / sign up
   A two-plane screen: the brand panel states what Nurexa is, the form panel
   stays narrow so the fields read as one column on any width.
   ========================================================================== */

.auth{ min-height:100vh; display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); }

.auth__brand{
  position:relative; display:flex; flex-direction:column; gap:26px;
  padding:38px 44px; background: var(--surface); border-right:1px solid var(--border);
  overflow:hidden;
}
.auth__brand::after{
  content:""; position:absolute; inset:auto -30% -45% -30%; height:70%;
  background: radial-gradient(60% 100% at 50% 100%, var(--brand-tint) 0%, transparent 70%);
  pointer-events:none;
}
.auth__brand > *{ position:relative; z-index:1; }

.auth-lockup{ display:flex; align-items:center; gap:11px; }
.auth-lockup img{ width:34px; height:34px; object-fit:contain; flex:0 0 auto; }
.auth-lockup__name{ font-size:16px; font-weight:660; letter-spacing:-.025em; line-height:1.1; }
.auth-lockup__sub{ font-size:11px; color:var(--muted); letter-spacing:.02em; }

.auth-pitch{ margin-top:auto; }
.auth-pitch__title{
  font-size:27px; font-weight:680; letter-spacing:-.035em; line-height:1.24; margin:0;
  max-width:19ch;
}
.auth-pitch__text{ font-size:13.5px; color:var(--ink-2); margin:12px 0 0; max-width:44ch; }

.auth-points{ display:flex; flex-direction:column; gap:12px; margin:26px 0 0; padding:0; list-style:none; }
.auth-points li{ display:flex; align-items:center; gap:11px; font-size:13.5px; color:var(--ink-2); }

.auth-foot-note{ margin-top:auto; font-size:11.5px; color:var(--muted); }

.auth__panel{ display:flex; align-items:center; justify-content:center; padding:40px 24px; }
.auth-form{ width:100%; max-width:404px; }
.auth-form__lockup{ display:none; margin-bottom:26px; }

.auth-title{ font-size:23px; font-weight:680; letter-spacing:-.03em; margin:0; }
.auth-sub{ font-size:13.5px; color:var(--muted); margin:6px 0 24px; }

.auth-alert{
  display:flex; gap:9px; align-items:flex-start;
  background: var(--critical-tint); border:1px solid rgba(255,107,107,.3);
  color:#ff9b9b; border-radius: var(--radius-sm); padding:10px 12px;
  font-size:12.5px; margin-bottom:16px;
}
.auth-alert i{ margin-top:2px; }
.auth-alert ul{ margin:0; padding-left:16px; }

.auth-note{
  display:flex; gap:9px; align-items:flex-start;
  background: var(--brand-tint); border:1px solid var(--brand-tint-2);
  color:#7fe6ab; border-radius: var(--radius-sm); padding:10px 12px;
  font-size:12.5px; margin-bottom:16px;
}

.auth-field{ margin-bottom:14px; }
.auth-field .form-control{ padding-top:.52rem; padding-bottom:.52rem; }
.auth-field .invalid-feedback{ display:block; font-size:12px; color:#ff9b9b; margin-top:5px; }
.auth-field .form-control.input-validation-error{ border-color: rgba(255,107,107,.55); }

.auth-input{ position:relative; }
.auth-input .form-control{ padding-right:38px; }
.auth-input__btn{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:28px; height:28px; display:grid; place-items:center;
  background:transparent; border:0; border-radius:6px; color:var(--muted); font-size:12.5px;
}
.auth-input__btn:hover{ background: var(--surface-3); color: var(--ink-2); }

.auth-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 20px; }

.auth-submit{ width:100%; padding:.6rem 1rem; font-size:14px; }

.auth-sep{ display:flex; align-items:center; gap:12px; margin:22px 0; }
.auth-sep::before, .auth-sep::after{ content:""; height:1px; background:var(--border); flex:1 1 auto; }
.auth-sep span{ font-size:11.5px; color:var(--muted); }

.auth-switch{ font-size:13px; color:var(--ink-2); text-align:center; }
.auth-legal{ font-size:11.5px; color:var(--muted); text-align:center; margin-top:18px; }

@media (max-width: 991.98px){
  .auth{ grid-template-columns: 1fr; }
  .auth__brand{ display:none; }
  .auth__panel{ padding:32px 20px 44px; align-items:flex-start; }
  .auth-form__lockup{ display:flex; justify-content:center; }
  .auth-form{ margin-top:24px; }
}

.locale-btn{
  min-height:36px; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:6px 10px; border:1px solid var(--border-strong); border-radius:9px;
  color:var(--ink-2); background:var(--surface); font:inherit; font-size:12.5px; font-weight:600;
}
.locale-btn:hover{ color:var(--ink); background:var(--surface-2); }
.locale-btn--compact{ min-height:34px; }
.auth__panel{ position:relative; }
.auth-tools{ position:absolute; top:20px; right:22px; display:flex; align-items:center; gap:8px; }

html[data-theme="light"]{
  --bg:#f4f7fb;
  --surface:#ffffff;
  --surface-2:#f0f4f8;
  --surface-3:#e5ebf3;
  --border:#dce3ec;
  --border-strong:#c5d0dd;
  --ink:#132033;
  --ink-2:#45566d;
  --muted:#687a91;
  --brand:#008f3d;
  --brand-strong:#007c35;
  --brand-deep:#006a2d;
  --on-brand:#ffffff;
  --brand-tint:rgba(0,143,61,.10);
  --brand-tint-2:rgba(0,143,61,.20);
  --voice:#216fc2;
  --voice-tint:rgba(33,111,194,.10);
  --voice-tint-2:rgba(33,111,194,.20);
  --wa:#008f3d;
  --wa-tint:rgba(0,143,61,.10);
  --good:#008f3d;
  --good-tint:rgba(0,143,61,.10);
  --warning:#ad7200;
  --warning-ink:#805400;
  --warning-tint:rgba(173,114,0,.11);
  --critical:#c83d3d;
  --critical-tint:rgba(200,61,61,.10);
  --human:#7255bd;
  --human-tint:rgba(114,85,189,.10);
  --c-voice:#216fc2;
  --c-wa:#008f3d;
  --c-neutral:#9aa8ba;
  --grid:#e5ebf3;
  --axis:#c5d0dd;
  --shadow-xs:0 1px 2px rgba(19,32,51,.07);
  --shadow-sm:0 2px 10px rgba(19,32,51,.09);
  --shadow-md:0 12px 32px rgba(19,32,51,.13);
  --shadow-pop:0 18px 50px rgba(19,32,51,.18);
  --bs-body-color:#132033;
  --bs-body-color-rgb:19,32,51;
  --bs-body-bg:#f4f7fb;
  --bs-body-bg-rgb:244,247,251;
  --bs-emphasis-color:#0a1424;
  --bs-emphasis-color-rgb:10,20,36;
  --bs-secondary-color:rgba(19,32,51,.72);
  --bs-tertiary-color:rgba(19,32,51,.52);
  --bs-secondary-bg:#f0f4f8;
  --bs-tertiary-bg:#e5ebf3;
  --bs-border-color:#dce3ec;
  --bs-link-color:#008f3d;
  --bs-link-color-rgb:0,143,61;
  --bs-link-hover-color:#006f30;
  --bs-card-color:#132033;
  --bs-card-bg:#ffffff;
  --bs-card-border-color:#dce3ec;
  --bs-modal-color:#132033;
  --bs-modal-bg:#ffffff;
  --bs-dropdown-color:#45566d;
  --bs-dropdown-bg:#ffffff;
  --bs-offcanvas-color:#132033;
  --bs-offcanvas-bg:#ffffff;
  --bs-table-color:#132033;
  color-scheme:light;
}

html[data-theme="light"] a:hover{ color:#006f30; }
html[data-theme="light"] ::-webkit-scrollbar-thumb{ background:#b8c4d2; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{ background:#9aa8ba; }
html[data-theme="light"] ::selection{ color:#062512; }
html[data-theme="light"] .nav-section{ color:#687a91; }
html[data-theme="light"] .nav-link i{ color:#687a91; }
html[data-theme="light"] .nav-link.active,
html[data-theme="light"] .seg button.active{ color:var(--ink); }
html[data-theme="light"] .topbar{ background:rgba(255,255,255,.86); }
html[data-theme="light"] .savebar{ background:rgba(255,255,255,.92); }
html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .btn-primary:focus,
html[data-theme="light"] .btn-primary:active{ background:var(--brand-strong); border-color:var(--brand-strong); }
html[data-theme="light"] .form-control::placeholder{ color:#8291a4; }
html[data-theme="light"] .composer textarea::placeholder{ color:#8291a4; }
html[data-theme="light"] .pill--ai,
html[data-theme="light"] .pill--active,
html[data-theme="light"] .pill--wa{ color:#007633; }
html[data-theme="light"] .pill--voice{ color:#1b62aa; }
html[data-theme="light"] .pill--missed,
html[data-theme="light"] .btn-danger-soft,
html[data-theme="light"] .nav-link--signout:hover{ color:#aa2f2f; }
html[data-theme="light"] .attn-banner__text{ color:#745316; }
html[data-theme="light"] .conv--unread .conv__name{ color:var(--ink); }
html[data-theme="light"] .msg--out .msg__bubble{ color:#12321f; }
html[data-theme="light"] .msg--human .msg__bubble{ color:#493681; }
html[data-theme="light"] .kpi__delta--down{ color:#aa2f2f; }
html[data-theme="light"] .share-chk--off{ color:#8291a4; }
html[data-theme="light"] .tbl th,
html[data-theme="light"] .details-sec__title,
html[data-theme="light"] .dropdown-header{ color:#687a91; }
html[data-theme="light"] .btn-close{ filter:none; }
html[data-theme="light"] .auth-alert,
html[data-theme="light"] .auth-field .invalid-feedback{ color:#a93131; }
html[data-theme="light"] .auth-note{ color:#176b3a; }
html[data-theme="light"] .nav-scrim{ background:rgba(19,32,51,.4); }

[dir="rtl"] body{ letter-spacing:0; }
[dir="rtl"] .sidebar{ inset:0 0 0 auto; border-right:0; border-left:1px solid var(--border); }
[dir="rtl"] .main{ margin-left:0; margin-right:var(--sidebar-w); }
[dir="rtl"] .nav-sub{ padding-left:0; padding-right:8px; }
[dir="rtl"] .nav-link.active::before{ left:auto; right:-10px; border-radius:3px 0 0 3px; }
[dir="rtl"] .nav-link .nav-badge{ margin-left:0; margin-right:auto; }
[dir="rtl"] .search i{ left:auto; right:11px; }
[dir="rtl"] .search .form-control{ padding-left:.7rem; padding-right:31px; }
[dir="rtl"] .inbox__list{ border-right:0; border-left:1px solid var(--border); }
[dir="rtl"] .inbox__details{ border-left:0; border-right:1px solid var(--border); }
[dir="rtl"] .conv.active::before{ left:auto; right:0; }
[dir="rtl"] .conv__time{ margin-left:0; margin-right:auto; }
[dir="rtl"] .msg--out{ margin-left:0; margin-right:auto; }
[dir="rtl"] .msg--out .msg__col,
[dir="rtl"] .msg--out .msg__time{ text-align:left; }
[dir="rtl"] .msg__bubble{ text-align:right; }
[dir="rtl"] .kv__v{ text-align:left; }
[dir="rtl"] .timeline{ padding-left:0; padding-right:26px; }
[dir="rtl"] .timeline::before{ left:auto; right:8px; }
[dir="rtl"] .timeline-item::before{ left:auto; right:-22px; }
[dir="rtl"] .toast-stack{ right:auto; left:20px; }
[dir="rtl"] .auth__brand{ border-right:0; border-left:1px solid var(--border); }
[dir="rtl"] .auth-input .form-control{ padding-right:.7rem; padding-left:38px; }
[dir="rtl"] .auth-input__btn{ right:auto; left:6px; }
[dir="rtl"] .auth-alert ul{ padding-left:0; padding-right:16px; }
[dir="rtl"] .auth-tools{ right:auto; left:22px; }
[dir="rtl"] .dropdown-menu-end{ right:auto !important; left:0 !important; }
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-arrow-right-from-bracket{ transform:scaleX(-1); }
[dir="rtl"] .ms-auto{ margin-left:0 !important; margin-right:auto !important; }
[dir="rtl"] .me-auto{ margin-right:0 !important; margin-left:auto !important; }
[dir="rtl"] .ms-1{ margin-left:0 !important; margin-right:.25rem !important; }
[dir="rtl"] .ms-2{ margin-left:0 !important; margin-right:.5rem !important; }
[dir="rtl"] .ms-3{ margin-left:0 !important; margin-right:1rem !important; }
[dir="rtl"] .me-1{ margin-right:0 !important; margin-left:.25rem !important; }
[dir="rtl"] .me-2{ margin-right:0 !important; margin-left:.5rem !important; }
[dir="rtl"] .me-3{ margin-right:0 !important; margin-left:1rem !important; }
[dir="rtl"] .text-start{ text-align:right !important; }
[dir="rtl"] .text-end{ text-align:left !important; }

@media (max-width:1199.98px){
  [dir="rtl"] .inbox__details{ right:auto; left:0; transform:translateX(-100%); }
}

@media (max-width:991.98px){
  [dir="rtl"] .sidebar{ transform:translateX(100%); }
  [dir="rtl"] body.nav-open .sidebar{ transform:none; }
  [dir="rtl"] .main{ margin-right:0; }
  [dir="rtl"] .inbox__list,
  [dir="rtl"] .inbox__details{ border-left:0; border-right:0; }
}

@media (max-width:575.98px){
  .auth-tools{ top:14px; right:14px; }
  [dir="rtl"] .auth-tools{ right:auto; left:14px; }
}