:root{--bg:#f6f7fb;--panel:#fff;--panel2:#f3f5fa;--text:#1f2937;--muted:#6b7280;--border:rgba(0,0,0,.08);--shadow:0 10px 30px rgba(15,23,42,.08);--brand:#2563eb;--brand2:#1d4ed8;--radius:14px;}
html[data-theme="ocean"]{--brand:#2563eb;--brand2:#1d4ed8;--bg:#f4f7ff;}
html[data-theme="saffron"]{--brand:#ff7800;--brand2:#dc3545;--bg:#fff7ee;}
html[data-theme="midnight"]{--brand:#334155;--brand2:#0f172a;--bg:#0b1220;--panel:#0f172a;--panel2:#0b1220;--text:#e5e7eb;--muted:#9ca3af;--border:rgba(255,255,255,.10);--shadow:0 18px 50px rgba(0,0,0,.35);}
html[data-theme="emerald"]{--brand:#0f766e;--brand2:#115e59;--bg:#effaf8;}
*{box-sizing:border-box} body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:var(--bg);}
.app{height:100vh;display:grid;grid-template-columns:260px 1fr 320px;}
.sidebar{background:linear-gradient(180deg,var(--panel) 0%,var(--panel2) 100%);border-right:1px solid var(--border);padding:18px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;margin-bottom:18px;}
.brand .dot{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:var(--shadow);}
.nav{display:flex;flex-direction:column;gap:8px}
.nav a{text-decoration:none;padding:10px 12px;border-radius:12px;color:var(--muted);display:flex;align-items:center;justify-content:space-between;}
.nav a.active{background:rgba(37,99,235,.10);color:var(--text);border:1px solid var(--border);}
html[data-theme="saffron"] .nav a.active{background:rgba(255,120,0,.12);}
html[data-theme="emerald"] .nav a.active{background:rgba(15,118,110,.12);}
html[data-theme="midnight"] .nav a.active{background:rgba(148,163,184,.12);}
.sectionTitle{margin:18px 0 10px;font-size:12px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;}
.list{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.list .item{padding:12px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center;}
.list .item:last-child{border-bottom:0}
.avatar{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand2));}
.meta{min-width:0} .meta .name{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.meta .sub{font-size:12px;color:var(--muted);}
.main{display:flex;flex-direction:column;}
.topbar{background:linear-gradient(180deg,var(--panel) 0%,var(--panel2) 100%);border-bottom:1px solid var(--border);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.kpis{display:flex;gap:10px;flex-wrap:wrap;}
.kpi{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:10px 12px;min-width:160px;box-shadow:var(--shadow);}
.kpi .label{font-size:12px;color:var(--muted)} .kpi .value{font-weight:900;font-size:18px;margin-top:2px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.04);border:1px solid var(--border);color:var(--muted);font-size:12px;}
html[data-theme="midnight"] .pill{background:rgba(255,255,255,.06);}
select,input{border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:12px;padding:10px 12px;outline:none;}
.btn{border:0;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border-radius:12px;padding:10px 12px;font-weight:800;cursor:pointer;box-shadow:var(--shadow);}
.chatWrap{height:calc(100vh - 70px);display:grid;grid-template-rows:1fr auto;overflow:hidden;}
.chatMsgs{padding:16px;overflow:auto;}
.bubble{max-width:72%;padding:12px 14px;border-radius:16px;border:1px solid var(--border);background:rgba(0,0,0,.03);margin:10px 0;}
html[data-theme="midnight"] .bubble{background:rgba(255,255,255,.06);}
.bubble.me{margin-left:auto;background:rgba(37,99,235,.10);}
html[data-theme="saffron"] .bubble.me{background:rgba(255,120,0,.14);}
html[data-theme="emerald"] .bubble.me{background:rgba(15,118,110,.14);}
.chatInput{padding:12px;border-top:1px solid var(--border);background:linear-gradient(180deg,var(--panel2) 0%,var(--panel) 100%);display:flex;gap:10px;}
.chatInput input{flex:1}
.right{background:linear-gradient(180deg,var(--panel) 0%,var(--panel2) 100%);border-left:1px solid var(--border);padding:18px;overflow:auto;}
.small{font-size:12px;color:var(--muted)}
@media (max-width:1100px){.app{grid-template-columns:240px 1fr}.right{display:none}}
@media (max-width:820px){.app{grid-template-columns:1fr}/* .sidebar{display:none} disabled by Phase3 */.chatWrap{height:calc(100vh - 140px)}}

/* ===== Step 7: Responsive layout ===== */
@media (max-width: 1024px){
  .app{ grid-template-columns: 240px 1fr; }
  .rightPane{ display:none; }
}
@media (max-width: 768px){
  .app{ grid-template-columns: 1fr; }
  .sidebar{
    position:fixed; left:0; top:0; bottom:0;
    width: 86vw; max-width: 320px;
    transform: translateX(-110%);
    transition: transform .2s ease;
    z-index: 60;
    box-shadow: var(--shadow);
  }
  .sidebar.open{ transform: translateX(0); }

  .sidebarBackdrop{
    position:fixed; inset:0;
    background:rgba(0,0,0,.28);
    z-index: 55;
    display:none;
  }
  .sidebarBackdrop.show{ display:block; }

  /* Keep composer visible */
  .composer{
    position: sticky;
    bottom: 0;
    background: var(--panel);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Better tap targets */
  .btn, button, a.buttonlike{ min-height:44px; }
}
@media (max-width: 420px){
  .sidebar{ padding: 14px; }
  .list .item{ padding:10px; }
}

/* === Phase 1: Agent Console Dashboard === */
.agentBoard{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  padding:16px;
}
.lane{
  background:var(--panel);
  border-radius:14px;
  border:1px solid var(--border);
  padding:12px;
}
.lane h4{ margin-bottom:10px; }
.card{
  background:rgba(0,0,0,.04);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  margin-bottom:8px;
  box-shadow:var(--shadow);
}
.lane.needs .card{
  background:rgba(255,165,0,.15);
}

/* === Phase 2: Owner Dashboard === */
.ownerGrid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:16px;
  padding:16px;
}
.panel{
  background:var(--panel);
  border-radius:14px;
  border:1px solid var(--border);
  padding:16px;
  box-shadow:var(--shadow);
}
.panel.wide{ grid-column:1 / -1; }

/* === Charts (SVG) — Owner Dashboard === */
.panelHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.panelTitle{font-weight:900;font-size:14px}
.miniSel{padding:8px 10px;border-radius:12px;border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:12px}

.chartBox{border:1px solid var(--border);border-radius:14px;background:linear-gradient(180deg,var(--panel2),var(--panel));padding:10px}
.svgChart{width:100%;height:auto;display:block}
.svgChart .grid line{stroke:rgba(0,0,0,.08);stroke-width:1}
html[data-theme="midnight"] .svgChart .grid line{stroke:rgba(255,255,255,.10)}
.svgChart .axes line{stroke:rgba(0,0,0,.12);stroke-width:1.5}
html[data-theme="midnight"] .svgChart .axes line{stroke:rgba(255,255,255,.18)}

.svgChart .areaA{fill:rgba(34,197,94,.12)}
.svgChart .lineA{fill:none;stroke:rgba(34,197,94,.95);stroke-width:3}
.svgChart .lineB{fill:none;stroke:rgba(37,99,235,.95);stroke-width:3}

html[data-theme="saffron"] .svgChart .lineB{stroke:rgba(255,120,0,.95)}
html[data-theme="emerald"] .svgChart .lineB{stroke:rgba(15,118,110,.95)}

.legend text{font-size:12px;fill:var(--muted)}
.legend .dotA{fill:rgba(34,197,94,.95)}
.legend .dotB{fill:rgba(37,99,235,.95)}
html[data-theme="saffron"] .legend .dotB{fill:rgba(255,120,0,.95)}
html[data-theme="emerald"] .legend .dotB{fill:rgba(15,118,110,.95)}

.donutWrap{display:grid;grid-template-columns:220px 1fr;gap:14px;align-items:center}
@media (max-width: 900px){ .donutWrap{grid-template-columns:1fr} }

.svgDonut{width:220px;height:220px;display:block}
.donutBase{fill:none;stroke:rgba(0,0,0,.06);stroke-width:18}
html[data-theme="midnight"] .donutBase{stroke:rgba(255,255,255,.10)}
.seg{fill:none;stroke-width:18;transform:rotate(-90deg);transform-origin:110px 110px;stroke-linecap:round}
.segA{stroke:rgba(34,197,94,.85)}
.segB{stroke:rgba(255,193,7,.85)}
.segC{stroke:rgba(220,53,69,.85)}
.donutText{font-weight:900;font-size:16px;fill:var(--text)}

.donutLegend .row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0;font-size:13px}
.sw{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:8px}
.swA{background:rgba(34,197,94,.85)}
.swB{background:rgba(255,193,7,.85)}
.swC{background:rgba(220,53,69,.85)}
.mutedRight{color:var(--muted);font-size:12px}

.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid var(--border);font-size:12px}
.chip.good{background:rgba(34,197,94,.10)}

/* =========================
   Phase 1: Screenshot-style Dashboard System
   ========================= */
:root{
  --card: var(--panel);
  --card2: var(--panel2);
  --soft: rgba(0,0,0,.04);
  --soft2: rgba(0,0,0,.06);
}
html[data-theme="midnight"]{
  --soft: rgba(255,255,255,.06);
  --soft2: rgba(255,255,255,.10);
}

.app{background:radial-gradient(1200px 600px at 30% 0%, rgba(37,99,235,.10), transparent 60%), var(--bg);}

.sidebar{
  border-right:1px solid var(--border);
  padding:0;
}
.sidebarInner{padding:18px}
.sidebarHeader{
  height:64px; display:flex; align-items:center; gap:10px;
  padding:0 18px;
  background:linear-gradient(90deg, rgba(0,0,0,.03), transparent);
  border-bottom:1px solid var(--border);
}
html[data-theme="saffron"] .sidebarHeader{background:linear-gradient(90deg, rgba(255,120,0,.10), transparent);}
html[data-theme="emerald"] .sidebarHeader{background:linear-gradient(90deg, rgba(15,118,110,.10), transparent);}
html[data-theme="midnight"] .sidebarHeader{background:linear-gradient(90deg, rgba(255,255,255,.06), transparent);}

.brand{margin:0}
.brand .dot{width:30px;height:30px;border-radius:10px}

.navGroup{padding:14px 10px}
.nav a{gap:10px}
.nav a .icon{width:18px;opacity:.8}
.nav a.active{box-shadow:0 6px 14px rgba(0,0,0,.06)}

.main{min-width:0}
.topbar{
  height:64px;
  padding:0 18px;
  background:linear-gradient(180deg,var(--panel) 0%,var(--panel2) 100%);
  position:sticky; top:0; z-index:10;
}
.topbarLeft{display:flex;align-items:center;gap:12px}
.topbarTitle{font-weight:900;font-size:18px}
.topbarRight{display:flex;align-items:center;gap:10px}
.iconBtn{
  width:36px;height:36px;border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.03);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
}
html[data-theme="midnight"] .iconBtn{background:rgba(255,255,255,.06);}

.page{padding:18px}
.grid{display:grid;gap:14px}
.grid.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){ .grid.kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:640px){ .grid.kpis{grid-template-columns:1fr} }

.card{
  background:linear-gradient(180deg,var(--card) 0%, var(--card2) 100%);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 18px 50px rgba(15,23,42,.10);
  overflow:hidden;
}
html[data-theme="midnight"] .card{box-shadow:0 24px 70px rgba(0,0,0,.45);}

.cardPad{padding:14px}
.cardHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.cardTitle{font-weight:900;font-size:14px}
.cardSub{color:var(--muted);font-size:12px}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--border);
  background:var(--soft);
  font-size:12px;color:var(--muted);
}

.kpiBig{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.kpiNum{font-weight:950;font-size:28px;letter-spacing:-.02em}
.kpiDelta{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:var(--soft)}
.kpiDelta.good{background:rgba(34,197,94,.10)}
.kpiDelta.bad{background:rgba(220,53,69,.10)}

.row2{display:grid;grid-template-columns:2fr 1fr;gap:14px}
@media(max-width:1100px){ .row2{grid-template-columns:1fr} }

.tableWrap{padding:0}
.tableTop{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--border);
  background:rgba(0,0,0,.02);
}
html[data-theme="midnight"] .tableTop{background:rgba(255,255,255,.04);}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{
  padding:8px 10px;border-radius:999px;
  border:1px solid var(--border);
  background:var(--soft);
  font-size:12px;color:var(--muted);
}
.tab.active{color:var(--text);background:rgba(37,99,235,.10)}
html[data-theme="saffron"] .tab.active{background:rgba(255,120,0,.14)}
html[data-theme="emerald"] .tab.active{background:rgba(15,118,110,.14)}
html[data-theme="midnight"] .tab.active{background:rgba(148,163,184,.12)}

.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:left;font-size:13px}
.table th{color:var(--muted);font-weight:800;font-size:12px;background:rgba(0,0,0,.02)}
html[data-theme="midnight"] .table th{background:rgba(255,255,255,.04)}
.table tr:hover td{background:rgba(0,0,0,.02)}
html[data-theme="midnight"] .table tr:hover td{background:rgba(255,255,255,.04)}
.userCell{display:flex;align-items:center;gap:10px}
.avatarSm{width:28px;height:28px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:var(--shadow)}
.pill2{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--soft);font-size:12px;color:var(--muted)}
.pill2.ok{background:rgba(34,197,94,.10)}
.pill2.warn{background:rgba(255,193,7,.14)}
.pill2.bad{background:rgba(220,53,69,.12)}

.rightCol{display:flex;flex-direction:column;gap:14px}
.listMini .miniRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
.listMini .miniRow:last-child{border-bottom:0}
.miniLeft{display:flex;align-items:center;gap:10px}
.miniName{font-weight:900}
.miniSub{font-size:12px;color:var(--muted)}
.score{font-weight:900;color:var(--muted);font-size:12px}

/* Agent layout: center chat + assist bar */
.agentShell{display:grid;grid-template-columns:320px 1fr 340px;gap:14px}
@media(max-width:1100px){ .agentShell{grid-template-columns:1fr} }

.chatCard{height:calc(100vh - 120px);display:flex;flex-direction:column}
.chatHeader{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--border);
}
.chatHeader .who{display:flex;align-items:center;gap:10px}
.chatHeader .whoName{font-weight:950}
.chatHeader .whoMeta{font-size:12px;color:var(--muted)}
.chatBody{flex:1;overflow:auto;padding:14px}
.chatComposer{
  border-top:1px solid var(--border);
  padding:12px 14px;display:flex;gap:10px;align-items:center;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
}
.chatComposer input{flex:1}
.btn2{
  border:0;border-radius:12px;padding:10px 14px;
  font-weight:900;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:var(--shadow);cursor:pointer;
}

/* Assist Bar */
.assistTabs{display:flex;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border)}
.assistTab{flex:1;text-align:center;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--soft);font-weight:900;font-size:12px;color:var(--muted);cursor:pointer}
.assistTab.active{color:var(--text);background:rgba(37,99,235,.10)}
html[data-theme="saffron"] .assistTab.active{background:rgba(255,120,0,.14)}
html[data-theme="emerald"] .assistTab.active{background:rgba(15,118,110,.14)}
html[data-theme="midnight"] .assistTab.active{background:rgba(148,163,184,.12)}

/* ================================
   Phase 3: Dashboard UI blocks
   (Owner + Agent screenshot-style UI)
================================== */

.dashboardApp{ gap:14px; }
.dashboardMain{ display:flex; flex-direction:column; }
.dashboardTop{ border-radius:16px; }

.iconBtn{
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  box-shadow:var(--shadow);
}
.iconBtn:hover{ filter:brightness(0.98); }

.whoTitle{ line-height:1.1; }
.whoTitleMain{ font-weight:950; font-size:14px; }
.whoTitleSub{ font-size:12px; color:var(--muted); margin-top:2px; }

.card{
  background:linear-gradient(180deg,var(--panel) 0%, var(--panel2) 100%);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.cardHead{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
}
.cardTitle{ font-weight:950; }
.cardSubTitle{ margin:12px 14px 8px; font-weight:900; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.cardTools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cardFoot{ padding:10px 14px; border-top:1px solid var(--border); text-align:right; }
.cardFoot a{ text-decoration:none; color:var(--muted); font-weight:800; }

.search{
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  min-width:220px;
}

.dashRow{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
  padding:14px 0;
}
@media(max-width:1100px){ .dashRow{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width:520px){ .dashRow{ grid-template-columns: 1fr; } }

.kpiCard{
  background:linear-gradient(180deg,var(--panel) 0%, var(--panel2) 100%);
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px 14px 12px;
  box-shadow:var(--shadow);
  min-height:92px;
}
.kpiHead{ color:var(--muted); font-size:12px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.kpiBig{ font-size:22px; font-weight:950; margin-top:6px; }
.kpiFoot{ margin-top:6px; font-size:12px; color:var(--muted); font-weight:800; }

.grid2{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap:12px;
}
@media(max-width:1100px){ .grid2{ grid-template-columns: 1fr; } }

.chartBox{ padding:12px 14px; }
.chartLegend{ margin-top:8px; display:flex; gap:14px; align-items:center; color:var(--muted); font-size:12px; font-weight:800; }
.dotLegend{ width:10px; height:10px; border-radius:999px; background:rgba(37,99,235,.65); display:inline-block; margin-right:6px; }
.dotLegend.orange{ background:rgba(255,120,0,.65); }

.slaBox{ display:flex; gap:14px; align-items:center; padding:14px; }
@media(max-width:520px){ .slaBox{ flex-direction:column; align-items:flex-start; } }

.slaDonut{ position:relative; width:120px; height:120px; }
.slaPct{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:950; font-size:16px;
}
.slaList{ flex:1; display:flex; flex-direction:column; gap:10px; }
.slaRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.slaRow b{ font-weight:950; }

.table{ padding:12px 14px 14px; }
.tHead{
  display:grid;
  grid-template-columns: 1.1fr 1fr .7fr .7fr .7fr;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(0,0,0,.03);
  font-size:12px;
  color:var(--muted);
  font-weight:900;
}
.tRow{
  display:grid;
  grid-template-columns: 1.1fr 1fr .7fr .7fr .7fr;
  gap:12px;
  padding:12px 12px;
  border-bottom:1px solid var(--border);
}
.tRow:last-child{ border-bottom:0; }
.tNameCell{ font-weight:900; }
.tNameCell .avatar{ display:inline-block; vertical-align:middle; margin-right:10px; width:28px; height:28px; border-radius:12px; }

.boardCols{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  padding:12px 14px 14px;
}
@media(max-width:1100px){ .boardCols{ grid-template-columns: 1fr; } }

.boardCol{
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(0,0,0,.02);
  overflow:hidden;
}
.boardColHead{
  padding:10px 12px;
  font-weight:950;
  color:var(--muted);
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,.03);
}
.ticket{
  margin:10px 10px 0;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--panel);
}
.ticket:last-child{ margin-bottom:10px; }
.tRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tName{ font-weight:950; }
.tSub{ margin-top:4px; font-size:12px; color:var(--muted); font-weight:800; }
.tag{
  font-size:11px;
  font-weight:950;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  background:rgba(0,0,0,.03);
}
.tag.green{ background:rgba(15,118,110,.12); }
.tag.amber{ background:rgba(255,120,0,.12); }

.assistBody{ padding:12px 0 14px; }

/* =========================
   PHASE1_DASHBOARD_STYLE_V1
   Screenshot-style dashboards
   ========================= */

/* Functional (non-theme) colors used for charts/status */
:root{
  --ok:#22c55e;         /* green */
  --warn:#f59e0b;       /* amber */
  --bad:#ef4444;        /* red */
  --info:#3b82f6;       /* blue */
  --violet:#8b5cf6;     /* purple */
  --teal:#14b8a6;       /* teal */
}

/* Layout: ensure main takes full space, right panel is real and not wasting width */
.app{
  align-items:stretch;
}
.main{
  min-width: 0;
}
.right{
  width: 360px;
  min-width: 320px;
}
@media (max-width:1100px){
  .right{display:none;}
}

/* Card system (soft, glassy like screenshot) */
.card{
  background: rgba(255,255,255,.55);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
html[data-theme="midnight"] .card{
  background: rgba(15,23,42,.55);
}
.cardHd{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding: 14px 16px;
  border-bottom:1px solid var(--border);
}
.cardTitle{font-weight:950}
.cardBody{padding:14px 16px}

/* Dashboard grid like screenshot */
.ownerGrid{
  padding:18px;
  display:grid;
  grid-template-columns: 1.25fr .85fr;
  gap:14px;
}
@media(max-width:1100px){
  .ownerGrid{grid-template-columns:1fr;}
}

/* Metric cards row */
.metricsRow{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
@media(max-width:1100px){
  .metricsRow{grid-template-columns: repeat(2, 1fr);}
}
.metric{
  padding:14px 16px;
  border-radius:18px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.55);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
html[data-theme="midnight"] .metric{background: rgba(15,23,42,.55);}
.metricTop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.metricLabel{font-size:12px;color:var(--muted);font-weight:800}
.metricValue{font-size:22px;font-weight:950;margin-top:6px}
.delta{
  font-size:12px;font-weight:900;padding:6px 10px;border-radius:999px;
  border:1px solid var(--border); background: var(--soft); color: var(--muted);
}
.delta.pos{color: var(--ok); border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.08);}
.delta.neg{color: var(--bad); border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.08);}

/* Status pills like Qualified / Potential */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--border); font-size:12px; font-weight:900;
}
.badge.qual{color: var(--ok); background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.25);}
.badge.pot{color: var(--warn); background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.28);}
.badge.org{color: var(--teal); background: rgba(20,184,166,.12); border-color: rgba(20,184,166,.28);}
.badge.ad{color: var(--info); background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.25);}

/* Leads table layout */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:16px;
  background: rgba(255,255,255,.45);
}
html[data-theme="midnight"] .table{background: rgba(15,23,42,.45);}
.table th, .table td{
  padding:12px 12px;
  border-bottom:1px solid var(--border);
  font-size:13px;
}
.table th{font-size:12px;color:var(--muted);text-align:left;letter-spacing:.06em;text-transform:uppercase}
.table tr:last-child td{border-bottom:0}
.cellName{font-weight:950}
.cellSub{font-size:12px;color:var(--muted);margin-top:2px}

/* Chart SVG styling (multi-color) */
.chartLegend{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:10px}
.legendDot{width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:6px;vertical-align:middle}
.dotGreen{background:var(--ok)}
.dotAmber{background:var(--warn)}
.dotBlue{background:var(--info)}
.dotTeal{background:var(--teal)}

svg{max-width:100%}

/* Agent page: 3-column shell like screenshot */
.agentGrid{
  padding:16px;
  display:grid;
  grid-template-columns: 300px 1fr 360px;
  gap:14px;
  height: calc(100vh - 78px);
}
@media(max-width:1100px){
  .agentGrid{grid-template-columns:1fr;height:auto}
}

/* Left queue panel */
.queueCard{height:100%;display:flex;flex-direction:column}
.queueFilters{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.qpill{
  padding:8px 10px;border-radius:999px;border:1px solid var(--border);
  background: var(--soft); font-weight:900; font-size:12px; color:var(--muted);
}
.qpill.active{background: rgba(59,130,246,.10); color: var(--text);}
html[data-theme="saffron"] .qpill.active{background: rgba(255,120,0,.14);}
html[data-theme="emerald"] .qpill.active{background: rgba(15,118,110,.14);}

/* Center chat card */
.chatCard2{height:100%;display:flex;flex-direction:column}
.chatTopRow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.chatPerson{display:flex;align-items:center;gap:10px}
.chatPerson .nm{font-weight:950}
.chatPerson .mt{font-size:12px;color:var(--muted)}
.chatMsgs2{flex:1;overflow:auto;padding:14px 6px}
.bubble2{max-width:74%;padding:12px 14px;border-radius:16px;border:1px solid var(--border);background:rgba(0,0,0,.03);margin:10px 10px}
html[data-theme="midnight"] .bubble2{background:rgba(255,255,255,.06);}
.bubble2.me{margin-left:auto;background:rgba(59,130,246,.10);}
html[data-theme="saffron"] .bubble2.me{background:rgba(255,120,0,.14);}
html[data-theme="emerald"] .bubble2.me{background:rgba(20,184,166,.14);}
.composer2{display:flex;gap:10px;padding:12px 14px;border-top:1px solid var(--border);background:linear-gradient(180deg,var(--panel2),var(--panel));}
.composer2 input{flex:1}

/* Right Assist Bar */
.assistCard{height:100%;display:flex;flex-direction:column}
.tabRow{display:flex;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border)}
.tabBtn{
  flex:1;text-align:center;padding:10px 12px;border-radius:12px;border:1px solid var(--border);
  background: var(--soft); font-weight:950; font-size:12px; color: var(--muted); cursor:pointer;
}
.tabBtn.active{color:var(--text); background: rgba(59,130,246,.10);}
html[data-theme="saffron"] .tabBtn.active{background: rgba(255,120,0,.14);}
html[data-theme="emerald"] .tabBtn.active{background: rgba(20,184,166,.14);}


/* =========================
   RIGHTSPACE_PATCH_V1
   Remove unused right blank space / container max-width
   ========================= */

html, body { width:100%; overflow-x:hidden; }

.app{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}

.main{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}

/* Ensure sidebar + main align and main expands */
.sidebar{ flex:0 0 280px; }
.main{ flex:1 1 auto; }

/* If any wrapper exists that caps width, neutralize it */
.container, .wrap, .shell{
  max-width:none !important;
  width:100% !important;
}

/* Owner/Agent grids should stretch full width */
.ownerGrid, .agentGrid{
  width:100% !important;
  max-width:none !important;
}


/* =========================
   RIGHT_SPACE_FIX_V1
   Remove unused right blank space
   ========================= */

/* Make right column auto size instead of forcing 320px always */
.app{
  grid-template-columns:260px minmax(0,1fr) max-content !important;
}

/* Cap the right rail so it never becomes huge */
.right{
  width:auto !important;
  max-width:360px;
}

/* If right sidebar has no cards/content, collapse it */
.right:empty{
  display:none !important;
}

/* When right rail is hidden, reclaim full width */
@media (min-width: 1101px){
  .app:has(.right:empty){
    grid-template-columns:260px 1fr !important;
  }
}


/* =========================
   AVATAR_TOPBAR_FIX_V1
   Make topbar + avatar visible like screenshot
   ========================= */

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}

/* if topbar children exist, ensure they don’t collapse */
.topbar > *{ min-width:0; }

.avatar{
  width:34px;
  height:34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.85), rgba(0,0,0,.04));
  overflow:hidden;
}

/* show a default icon if avatar div is empty */
.avatar:empty::before{
  content:"👤";
  font-size:16px;
  opacity:.85;
}

/* make any top-right menu clickable and not hidden under other layers */
.topbar a, .topbar button{
  position:relative;
  z-index:55;
}


/* =========================
   PHASE2_UI_POLISH_V1
   Multi-color charts + legend + top-right profile
   ========================= */

/* Chart palette (4 colors) — stays consistent across themes */
:root{
  --c1:#2563eb; /* blue */
  --c2:#22c55e; /* green */
  --c3:#f59e0b; /* amber */
  --c4:#ef4444; /* red */
}

/* Theme-tuned accents (keep your main theme, but ensure charts have visible separation) */
html[data-theme="saffron"]{
  --c1:#ff7800; /* saffron */
  --c2:#22c55e;
  --c3:#ffc107;
  --c4:#dc3545;
}
html[data-theme="ocean"]{
  --c1:#2563eb;
  --c2:#06b6d4;
  --c3:#f59e0b;
  --c4:#ef4444;
}
html[data-theme="emerald"]{
  --c1:#0f766e;
  --c2:#22c55e;
  --c3:#f59e0b;
  --c4:#ef4444;
}
html[data-theme="midnight"]{
  --c1:#60a5fa;
  --c2:#34d399;
  --c3:#fbbf24;
  --c4:#f87171;
}

/* Legend */
.chartLegend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:10px}
.legendItem{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:rgba(0,0,0,.03)}
.legendDot{width:10px;height:10px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.10)}
.legendDot.c1{background:var(--c1)}
.legendDot.c2{background:var(--c2)}
.legendDot.c3{background:var(--c3)}
.legendDot.c4{background:var(--c4)}

/* SVG line chart series colors (if present) */
svg .series1{stroke:var(--c1) !important}
svg .series2{stroke:var(--c2) !important}
svg .series3{stroke:var(--c3) !important}
svg .series4{stroke:var(--c4) !important}

/* Donut (CSS-based) — if the page has .donutRing */
.donutRing{
  width:160px;height:160px;border-radius:999px;
  background:conic-gradient(
    var(--c1) 0 35%,
    var(--c2) 35% 60%,
    var(--c3) 60% 82%,
    var(--c4) 82% 100%
  );
  position:relative;
  box-shadow:var(--shadow);
}
.donutRing:after{
  content:"";
  position:absolute;inset:22px;
  border-radius:999px;
  background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--border);
}

/* Top-right profile (visible in owner + agent) */
.topbarRight{
  display:flex;align-items:center;gap:10px;
}
.userChip{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border:1px solid var(--border);
  border-radius:999px;background:rgba(0,0,0,.03);
}
.userMeta{display:flex;flex-direction:column;line-height:1.1}
.userName{font-weight:950;font-size:12px}
.userRole{font-size:11px;color:var(--muted)}
.avatar{
  width:34px;height:34px;border-radius:999px;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  box-shadow:0 6px 16px rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.08);
}
.btnGhost{
  border:1px solid var(--border);
  background:rgba(0,0,0,.03);
  color:var(--text);
  font-weight:900;
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
}
.btnGhost:hover{filter:brightness(0.98)}



/* RESPONSIVE_SHELL_V1 */
/* Mobile-first responsive improvements for sidebar + panes */
@media (max-width: 980px){
  .app{ display:block !important; }
  .sidebar{
    position:fixed !important;
    left:-110% !important;
    top:0 !important;
    bottom:0 !important;
    width:min(86vw, 360px) !important;
    max-width:360px !important;
    z-index:60 !important;
    transition:left .18s ease-in-out !important;
  }
  .sidebar.open{ left:0 !important; }
  .sidebar-backdrop{
    display:none;
    position:fixed; inset:0;
    background:rgba(0,0,0,.45);
    z-index:55;
  }
  .sidebar-backdrop.show{ display:block; }

  /* main content should use full width */
  .main, .content, .pane, .panel{ width:100% !important; }

  /* topbar spacing so it never overflows */
  .topbar{ flex-wrap:wrap !important; gap:.5rem !important; }
  .topbar .grow{ flex:1 1 auto !important; min-width:160px !important; }

  /* composer area: avoid off-screen buttons */
  .composer, .inputbar{
    position:sticky !important;
    bottom:0 !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + .5rem) !important;
  }
}

@media (max-width: 520px){
  /* tighter paddings */
  .topbar{ padding:.6rem .7rem !important; }
  .sidebar{ width:90vw !important; }
  .btn{ padding:.45rem .6rem !important; }
}

/* Utility buttons for topbar icons (bell, mic, avatar) */
.hub-iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  cursor:pointer;
}
.hub-iconbtn:active{ transform:translateY(1px); }

.hub-avatar{
  width:34px; height:34px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  font-weight:700;
}
.hub-badge{
  position:absolute; transform:translate(10px,-10px);
  min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; font-size:.72rem;
  display:inline-flex; align-items:center; justify-content:center;
  background:#dc3545; color:#fff;
}

/* Small hamburger shown only on mobile */
.hub-hamburger{ display:none; }
@media (max-width: 980px){
  .hub-hamburger{ display:inline-flex !important; }
}

/* =========================
   RESPONSIVE_UI_V1
   Mobile + Tablet fit (Owner/Agent)
   ========================= */

.hub-topbar-tools{
  position: fixed;
  top: 10px;
  left: 12px;
  right: 12px;
  z-index: 999;
  padding: 6px 8px;
  border-radius: 14px;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
}

.hub-avatar{ flex: 0 0 auto; }

.app{ min-height: 100vh; }

.main{ padding-top: 64px; }

/* Sidebar drawer behavior */
.sidebar{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}

/* Default grids: allow shrink */
.ownerGrid, .agentGrid{
  min-width: 0;
}

/* Tablet: 2-column friendly */
@media (max-width: 1024px){
  .ownerGrid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .agentGrid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .queueCard, .chatCard2, .assistCard{
    min-width: 0;
  }

  .table{ display:block; overflow-x:auto; }
}

/* Mobile: sidebar becomes off-canvas */
@media (max-width: 780px){
  .app{
    grid-template-columns: 1fr !important;
  }

  .sidebar{
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(86vw, 320px);
    transform: translateX(-110%);
    transition: transform .18s ease;
    z-index: 1000;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
  }

  body.hubNavOpen .sidebar{
    transform: translateX(0);
  }

  /* Dim backdrop */
  body.hubNavOpen::before{
    content:"";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 998;
  }

  .topbar{
    flex-wrap: wrap;
    gap: 10px;
  }

  .metricsRow{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .composer2{
    gap: 8px;
  }

  .composer2 input{
    width: 100%;
    min-width: 0;
  }

  .chatMsgs2{
    max-height: 52vh;
    overflow: auto;
  }
}

/* =========================
   WORLD_UI_PATCH_V1
   Step A+B+C (Topbar + Composer + No-cut)
   ========================= */

/* C) Prevent cutting on all devices */
html, body { max-width: 100%; overflow-x: hidden; }
* { box-sizing: border-box; max-width: 100%; }
svg { max-width: 100%; height: auto; display:block; }

/* A) Topbar behaves like world-class mobile/tablet mockups */
.topbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
}
.topbarLeft{
  flex:1 1 auto;
  min-width:180px;
}
.topbarRight{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:flex-end;
  min-width:0;
}
@media (max-width: 720px){
  .topbarRight{
    width:100%;
    justify-content:space-between;
  }
}

/* Make tool icons visually consistent in themes */
.hub-iconbtn{
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
}

/* B) Composer becomes 2-layer like your mockups:
      [actions row]
      [input row] */
.composer2{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding:.7rem;
}
.composerActions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}
.composerInputRow{
  display:flex;
  gap:.5rem;
  align-items:center;
}
.composerInputRow input{
  flex:1 1 auto;
  min-width:0;
}

/* Mobile: action buttons become 2-per-row */
@media (max-width: 1024px){
  .composerActions > *{
    flex: 1 1 48%;
    min-width: 0;
  }
}

/* Tables safe scroll on small screens */
@media (max-width: 1024px){
  .table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .table th, .table td{ white-space:nowrap; }
}

/* =========================
   OWNER_IOS_NOCUT_V1
   Fix iOS/mobile horizontal cut + restore breathing space on desktop
   ========================= */

/* Allow flex/grid children to shrink properly (prevents overflow) */
.app, .main, .ownerGrid, .metricsRow, .card, .cardBody { min-width: 0; }

/* Clamp any accidental overflow on iOS */
body { overflow-x: hidden; }
.app { overflow-x: hidden; }

/* Charts/SVG must never force width */
.ownerGrid svg { width: 100%; height: auto; max-width: 100%; }

/* MOBILE/TABLET: tables should WRAP, not force viewport to expand */
@media (max-width: 1024px){
  .table { width: 100%; table-layout: fixed; }
  .table th, .table td { white-space: normal !important; word-break: break-word; }
}

/* EXTRA SMALL: metrics collapse to 1 column */
@media (max-width: 520px){
  .metricsRow{ grid-template-columns: 1fr !important; }
}

/* DESKTOP: add right-side breathing space WITHOUT reserving a sidebar column */
@media (min-width: 1100px){
  .main { max-width: 1280px; margin: 0 auto; padding-right: 16px; padding-left: 16px; }
}

/* =========================
   NO_OVERFLOW_ALL_V1
   Hard stop for horizontal overflow on mobile/tablet
   ========================= */

/* 1) Global clamp */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
.app { width:100%; max-width:100%; overflow-x:hidden; }

/* 2) Ensure all layout containers can shrink */
.sidebar, .main, .right,
.ownerGrid, .agentGrid,
.metricsRow, .card, .cardHd, .cardBody,
.topbar, .topbarLeft, .topbarRight,
.chatCard2, .queueCard, .assistCard,
.chatMsgs2, .composer2 {
  min-width: 0 !important;
}

/* 3) Anything that might force width should wrap */
.pill, .badge, .qpill, .cellName, .cellSub, .metricLabel {
  white-space: normal !important;
  word-break: break-word;
}

/* 4) Tables: do NOT force viewport wider */
.table { width:100%; max-width:100%; table-layout: fixed; }
.table th, .table td { white-space: normal !important; word-break: break-word; }

/* 5) Charts/SVG: never exceed container */
svg, img, canvas { max-width:100% !important; height:auto; }

/* 6) Inputs/buttons: allow wrapping on small screens */
input, select, button { max-width:100%; }
.topbarRight { flex-wrap: wrap; }

/* 7) Extra-small screens: single column for grids */
@media (max-width: 520px){
  .metricsRow{ grid-template-columns: 1fr !important; }
  .ownerGrid{ grid-template-columns: 1fr !important; }
  .agentGrid{ grid-template-columns: 1fr !important; height:auto !important; }
}

/* =========================
   OVERFLOW_DEBUG_V1
   Toggle by adding ?debug=1 in URL (we handle via small JS next if needed)
   ========================= */
.debug-overflow * { outline: 1px solid rgba(255,0,0,.25); }
.debug-overflow .card, .debug-overflow .table, .debug-overflow svg { outline: 2px solid rgba(255,0,0,.45); }

/* =========================================================
   WORLD_UI_RESPONSIVE_V2
   Fix: mobile overflow/cutting, sidebar width, top tools bar,
        owner tables/graphs, agent composer usability.
   ========================================================= */

html, body { max-width: 100%; overflow-x: hidden; }
* { box-sizing: border-box; }
.app, .main, .ownerGrid, .agentGrid { min-width: 0; max-width: 100%; }

/* Make tables safe on mobile */
.table { width: 100%; border-collapse: collapse; }
@media (max-width: 900px){
  .table { display:block; overflow-x:auto; -webkit-overflow-scrolling: touch; }
  .table thead, .table tbody, .table tr { width: max-content; }
}

/* Make chart SVGs responsive */
svg { max-width: 100%; height: auto; }

/* Topbar: allow wrap correctly without making pills vertical */
.topbar { min-width:0; }
.topbarRight, .topbarLeft { min-width: 0; }
.pill, .badge { white-space: nowrap; }

/* Owner + Agent grids: prevent accidental width explosion */
.ownerGrid, .agentGrid { width: 100%; }

/* Sidebar overlay sizing on small screens */
@media (max-width: 900px){
  .sidebar{
    width: 78vw !important;
    max-width: 340px !important;
    min-width: 260px !important;
  }
  .main { padding: 12px !important; }
}

/* =========================================================
   Floating tools bar (hamburger/bell/mic/avatar)
   Fix: bar was covering the UI on mobile and causing width issues.
   Desktop: keep compact.
   Mobile: show only hamburger; others available in sidebar menu.
   ========================================================= */

.hub-topbar-tools{
  position: fixed;
  z-index: 9999;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 10px;
  right: 10px;
  max-width: 520px;
  margin: 0 auto;
  padding: 8px 10px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
}

.hub-topbar-tools .hub-iconbtn,
.hub-topbar-tools .hub-avatar{
  height: 40px;
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

/* Mobile: only hamburger visible on the floating bar */
@media (max-width: 600px){
  .hub-topbar-tools{
    max-width: 94vw;
    justify-content: flex-start;
    gap: .5rem;
  }
  #hubBell, #hubMic, #hubAvatar, #hubBellBadge { display: none !important; }
}

/* Give content room below the fixed tools bar */
@media (max-width: 900px){
  .main{ padding-top: 84px !important; }
}
@media (min-width: 901px){
  .main{ padding-top: 18px; }
}

/* =========================================================
   Agent composer: mobile friendly layout without HTML changes
   - Quick Call becomes full width
   - Input gets full width
   - Send stays usable
   ========================================================= */
.composer2{ flex-wrap: wrap; align-items: stretch; }
.composer2 .btn2{ white-space: nowrap; }
.composer2 input{ min-width: 160px; }

@media (max-width: 600px){
  .composer2{ gap: 10px; }
  .composer2 button:first-child{
    flex: 1 1 100%;
    order: 1;
  }
  .composer2 input{
    flex: 1 1 100%;
    order: 2;
  }
  .composer2 button:last-child{
    flex: 1 1 100%;
    order: 3;
  }
}

/* Prevent “vertical text” pills on narrow screens */
@media (max-width: 600px){
  .pill{ font-size: 12px; padding: 6px 10px; }
}

/* Safety: never allow any container to overflow horizontally */
.card, .cardBody, .metricsRow, .chatMsgs2, .chatTopRow { max-width: 100%; overflow-x: hidden; }


/* =========================
   WORLD_UI_V2
   - Mobile: hamburger only (hide bell/mic/avatar in top strip)
   - Fix horizontal overflow + better mobile table layout
   ========================= */

html, body { max-width: 100%; overflow-x: hidden; }
.app, .main, .card, .cardBody { min-width: 0; }
.table, svg { max-width: 100%; }

/* tools strip hidden by default (desktop) */
.hub-topbar-tools{ display:none !important; }

/* mobile tools strip */
@media (max-width: 820px){
  .hub-topbar-tools{
    display:flex !important;
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 10px 12px;
    margin: 10px 12px 0 12px;
    border-radius: 16px;
    background: linear-gradient(180deg, var(--panel), var(--panel2));
    border: 1px solid var(--border);
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
    gap: 10px;
  }

  /* hide non-hamburger icons */
  .hub-topbar-tools #hubBell,
  .hub-topbar-tools #hubBellBadge,
  .hub-topbar-tools #hubMic,
  .hub-topbar-tools #hubAvatar{ display:none !important; }

  .hub-topbar-tools .hub-hamburger{
    width: 42px; height: 42px;
    border-radius: 14px;
  }

  .sidebar{ max-width: 86vw; }
  .main{ width: 100%; }
}

/* leads filters wrap */
.leadFiltersRow{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
@media (max-width: 820px){
  .leadFiltersRow{ justify-content:flex-start; }
  .leadFiltersRow input{ width:100%; max-width:100% !important; }
}

/* leads table -> mobile cards */
@media (max-width: 820px){
  .table thead{ display:none; }
  .table, .table tbody, .table tr, .table td{ display:block; width:100%; }
  .table tr{
    border: 1px solid var(--border);
    border-radius: 16px;
    margin: 12px 0;
    overflow:hidden;
    background: linear-gradient(180deg, var(--panel), var(--panel2));
  }
  .table td{
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
  }
  .table td:last-child{ border-bottom:0; }

  .table td[data-label]{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
  }
  .table td[data-label]::before{
    content: attr(data-label);
    font-weight: 800;
    color: var(--muted);
    flex: 0 0 42%;
    max-width: 42%;
    line-height: 1.2;
  }

  .pill, .badge{ white-space: normal; }
  .cellSub{ word-break: break-word; }
}

/* ===============================
   OWNER & HUB MOBILE WORLD FIX
   =============================== */

/* Stop crushing */
.ownerGrid, .metricsRow, .card, .cardBody { min-width: 0; }

/* Header: no floating, compact */
@media (max-width: 900px){
  .topbar { flex-wrap: nowrap; }
  .topbarRight { gap: .4rem; }
  .topbar button, .topbar a { padding: 6px 8px; font-size: 13px; }
}

/* Owner Leads: turn table into cards */
@media (max-width: 900px){
  .table thead { display: none; }
  .table tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: .8rem;
    padding: .6rem;
    background: var(--panel2);
  }
  .table td {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: .5rem;
    padding: .35rem 0;
    border: none;
    white-space: normal;
  }
  .table td::before {
    content: attr(data-label);
    font-weight: 600;
    opacity: .75;
  }
}
    border-radius: 12px;
    margin-bottom: .8rem;
    padding: .6rem;
    background: var(--panel2);
  }
  .table td {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: .5rem;
    padding: .35rem 0;
    border: none;
    white-space: normal;
  }
  .table td::before {
    content: attr(data-label);
    font-weight: 600;
    opacity: .75;
  }
}

/* WORLD_UI_V4_MOBILE_TOPBARFIX
   Mobile+Tablet ONLY (desktop unaffected)
   Goals:
   - Topbar items stay in ONE ROW (horizontal)
   - Theme select + icons + Create Report aligned right
   - If title text is too long -> can go below
   - No page widening: contain overflow, allow horizontal scroll where needed
*/

@media (max-width: 1024px){

  /* 0) Prevent viewport widening / sideways bleed (Android/iOS/tablet) */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* 1) Topbar: keep controls in one horizontal line, scroll if too wide */
  .topbar{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Ensure children don’t force wrap */
  .topbar > * { flex: 0 0 auto; }

  /* 2) Title/heading: if it causes crowding, put it on its own line (below) */
  /* (We can’t rely on exact title class, so we handle common patterns safely.) */
  .topbar .title,
  .topbar .pageTitle,
  .topbar .sectionTitle,
  .topbar h1,
  .topbar h2{
    flex: 1 1 100% !important;
    min-width: 0 !important;
    order: 2 !important;          /* push title below row */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 3) Put theme + icons + create report in the top row (right side) */
  #themeSelOwner,
  #themeSelAgent{
    order: 1 !important;
    flex: 0 0 auto !important;
    font-size: 14px;
    height: 38px;
    max-width: 160px;
  }

  .topbarToolsInline{
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }

  /* If there is a primary action button like "Create Report", keep it in row */
  .topbar button,
  .topbar a.button,
  .topbar .btn{
    flex: 0 0 auto;
  }

  /* 4) Remove "Typing" indicator on mobile/tablet (safe fallbacks) */
  .typing,
  .typingIndicator,
  .typing-indicator,
  #typing,
  #typingStatus,
  #agentTyping,
  .agentTyping{
    display: none !important;
  }

  /* 5) Any wide tables/lists: allow horizontal scroll INSIDE container */
  table{ max-width: 100%; }
  .tableWrap, .tablewrap, .tableContainer, .tablecontainer,
  .listWrap, .listwrap, .wideWrap, .widewrap,
  .cardsWrap, .cardswrap, .content, .main, .panel{
    max-width: 100%;
  }

  /* Prefer: scrolling container instead of expanding page */
  .tableWrap, .tablewrap, .tableContainer, .tablecontainer,
  .wideWrap, .widewrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Reduce chip/pill font a bit (helps fit without pushing layout wide) */
  .pill, .qpill, .badge, .hub-badge{
    font-size: 12px;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }
}

/* WORLD_UI_V4_MOBILE_TOPBARFIX
   Mobile+Tablet ONLY (desktop unaffected)
   Goals:
   - Topbar items stay in ONE ROW (horizontal)
   - Theme select + icons + Create Report aligned right
   - If title text is too long -> can go below
   - No page widening: contain overflow, allow horizontal scroll where needed
*/

@media (max-width: 1024px){

  /* 0) Prevent viewport widening / sideways bleed (Android/iOS/tablet) */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* 1) Topbar: keep controls in one horizontal line, scroll if too wide */
  .topbar{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Ensure children don’t force wrap */
  .topbar > * { flex: 0 0 auto; }

  /* 2) Title/heading: if it causes crowding, put it on its own line (below) */
  /* (We can’t rely on exact title class, so we handle common patterns safely.) */
  .topbar .title,
  .topbar .pageTitle,
  .topbar .sectionTitle,
  .topbar h1,
  .topbar h2{
    flex: 1 1 100% !important;
    min-width: 0 !important;
    order: 2 !important;          /* push title below row */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 3) Put theme + icons + create report in the top row (right side) */
  #themeSelOwner,
  #themeSelAgent{
    order: 1 !important;
    flex: 0 0 auto !important;
    font-size: 14px;
    height: 38px;
    max-width: 160px;
  }

  .topbarToolsInline{
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }

  /* If there is a primary action button like "Create Report", keep it in row */
  .topbar button,
  .topbar a.button,
  .topbar .btn{
    flex: 0 0 auto;
  }

  /* 4) Remove "Typing" indicator on mobile/tablet (safe fallbacks) */
  .typing,
  .typingIndicator,
  .typing-indicator,
  #typing,
  #typingStatus,
  #agentTyping,
  .agentTyping{
    display: none !important;
  }

  /* 5) Any wide tables/lists: allow horizontal scroll INSIDE container */
  table{ max-width: 100%; }
  .tableWrap, .tablewrap, .tableContainer, .tablecontainer,
  .listWrap, .listwrap, .wideWrap, .widewrap,
  .cardsWrap, .cardswrap, .content, .main, .panel{
    max-width: 100%;
  }

  /* Prefer: scrolling container instead of expanding page */
  .tableWrap, .tablewrap, .tableContainer, .tablecontainer,
  .wideWrap, .widewrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Reduce chip/pill font a bit (helps fit without pushing layout wide) */
  .pill, .qpill, .badge, .hub-badge{
    font-size: 12px;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }
}

/* WORLD_UI_V4_MOBILE_TOPBARFIX
   Mobile+Tablet ONLY (desktop unaffected)
   Goals:
   - Topbar items stay in ONE ROW (horizontal)
   - Theme select + icons + Create Report aligned right
   - If title text is too long -> can go below
   - No page widening: contain overflow, allow horizontal scroll where needed
*/

@media (max-width: 1024px){

  /* 0) Prevent viewport widening / sideways bleed (Android/iOS/tablet) */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* 1) Topbar: keep controls in one horizontal line, scroll if too wide */
  .topbar{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Ensure children don’t force wrap */
  .topbar > * { flex: 0 0 auto; }

  /* 2) Title/heading: if it causes crowding, put it on its own line (below) */
  /* (We can’t rely on exact title class, so we handle common patterns safely.) */
  .topbar .title,
  .topbar .pageTitle,
  .topbar .sectionTitle,
  .topbar h1,
  .topbar h2{
    flex: 1 1 100% !important;
    min-width: 0 !important;
    order: 2 !important;          /* push title below row */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 3) Put theme + icons + create report in the top row (right side) */
  #themeSelOwner,
  #themeSelAgent{
    order: 1 !important;
    flex: 0 0 auto !important;
    font-size: 14px;
    height: 38px;
    max-width: 160px;
  }

  .topbarToolsInline{
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }

  /* If there is a primary action button like "Create Report", keep it in row */
  .topbar button,
  .topbar a.button,
  .topbar .btn{
    flex: 0 0 auto;
  }

  /* 4) Remove "Typing" indicator on mobile/tablet (safe fallbacks) */
  .typing,
  .typingIndicator,
  .typing-indicator,
  #typing,
  #typingStatus,
  #agentTyping,
  .agentTyping{
    display: none !important;
  }

  /* 5) Any wide tables/lists: allow horizontal scroll INSIDE container */
  table{ max-width: 100%; }
  .tableWrap, .tablewrap, .tableContainer, .tablecontainer,
  .listWrap, .listwrap, .wideWrap, .widewrap,
  .cardsWrap, .cardswrap, .content, .main, .panel{
    max-width: 100%;
  }

  /* Prefer: scrolling container instead of expanding page */
  .tableWrap, .tablewrap, .tableContainer, .tablecontainer,
  .wideWrap, .widewrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Reduce chip/pill font a bit (helps fit without pushing layout wide) */
  .pill, .qpill, .badge, .hub-badge{
    font-size: 12px;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }
}

/* WORLD_UI_V4_MOBILEFIX
   Targeted fixes using actual selectors:
   - Mobile: keep queueFilters pills horizontal with search
   - Mobile: prevent badge/pill wrap/cut (Qualified/Organic/Potential + Hi/En)
   - Mobile: composer send button layout
*/
@media (max-width: 900px){

  /* 2) Leads filters: keep in one horizontal family */
  .queueFilters{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
    align-items:center !important;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom:2px;
  }
  .queueFilters .pill,
  .queueFilters .qpill{
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }

  /* 3) Badges + language pill: never wrap/cut */
  .badge,
  .hub-badge,
  .pill,
  .qpill{
    white-space:nowrap !important;
    word-break:normal !important;
  }

  /* if any badge container is shrinking, prevent it */
  .badge,
  .hub-badge{
    flex:0 0 auto !important;
  }

  /* 4) Composer: input + send aligned */
  .composer2{
    display:flex !important;
    flex-direction:column;
    gap:8px;
  }
  .composerInputRow{
    display:flex !important;
    align-items:flex-end !important;
    gap:8px !important;
  }
  .composerInputRow textarea,
  .composerInputRow input[type="text"]{
    flex:1 1 auto !important;
    min-width:0 !important;
  }
  .composerActions{
    display:flex !important;
    flex:0 0 auto !important;
    align-items:center !important;
    gap:8px !important;
  }
  .composerActions button,
  .composerActions .send-btn,
  .composerActions button[type="submit"]{
    flex:0 0 auto !important;
    width:auto !important;
  }
}

/* WORLD_UI_OWNER_MOBILE_V8
   Owner console ONLY (body.role-owner) — Mobile/Tablet ONLY
   Fix:
   - Leads pills row must stay horizontal (no vertical letters)
   - Leads table must stay table-like and scroll horizontally
   - Desktop untouched
*/
@media (max-width: 1024px){

  /* Prevent sideways page bleed */
  body.role-owner { max-width: 100%; overflow-x: hidden; }

  /* =========================
     (1) Leads toolbar row (Search + pills)
     ========================= */
  body.role-owner .queueFilters{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:10px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling: touch;
    max-width:100%;
    min-width:0;
  }

  /* Make every pill/button never collapse into vertical letters */
  body.role-owner .queueFilters > *{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    min-width:max-content !important;
  }

  /* Search input can shrink but not disappear */
  body.role-owner .queueFilters input[type="search"],
  body.role-owner .queueFilters input[type="text"]{
    flex:1 1 200px !important;
    min-width:160px !important;
    max-width:60vw !important;
  }

  /* Pills/buttons: enforce readable size */
  body.role-owner .queueFilters .pill,
  body.role-owner .queueFilters .qpill,
  body.role-owner .queueFilters button,
  body.role-owner .queueFilters a{
    white-space:nowrap !important;
    min-width:fit-content !important;
    padding:8px 12px !important;
    font-size:13px !important;
    line-height:1.2 !important;
  }

  /* =========================
     (2) Leads table: keep it as a real table on mobile
     (Stop “card mode” CSS that makes rows vertical)
     ========================= */

  /* Ensure wrapper scroll is used (if you have it) */
  body.role-owner .ownerLeadsScrollX{
    max-width:100%;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
  }

  /* Force table layout */
  body.role-owner table.ownerLeadsTable{
    display:table !important;
    width:max-content !important;
    min-width:760px !important;  /* 5 columns readable */
    table-layout:auto !important;
  }
  body.role-owner table.ownerLeadsTable thead{ display:table-header-group !important; }
  body.role-owner table.ownerLeadsTable tbody{ display:table-row-group !important; }
  body.role-owner table.ownerLeadsTable tr{ display:table-row !important; }
  body.role-owner table.ownerLeadsTable th,
  body.role-owner table.ownerLeadsTable td{
    display:table-cell !important;
    white-space:nowrap !important;
    vertical-align:middle !important;
  }

  /* Kill any “responsive table labels” that insert pseudo headings */
  body.role-owner table.ownerLeadsTable td::before,
  body.role-owner table.ownerLeadsTable th::before{
    content:none !important;
    display:none !important;
  }
}

/* WORLD_UI_OWNER_LEADS_ROW_ONLY_V1
   Owner ONLY (body.role-owner) + Mobile/Tablet ONLY
   Fix: Leads toolbar pills must stay horizontal; allow horizontal scroll.
   Do NOT affect agent or desktop.
*/
@media (max-width: 1024px){

  /* Target ONLY owner console */
  body.role-owner .queueFilters{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:10px !important;

    /* this is the key: scroll instead of squeeze */
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;

    max-width:100% !important;
    min-width:0 !important;
  }

  /* Every child should keep its natural width (prevents vertical letters) */
  body.role-owner .queueFilters > *{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    min-width:max-content !important;

    /* extra safety to prevent weird vertical writing */
    writing-mode:horizontal-tb !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  /* Search box can shrink, pills should not */
  body.role-owner .queueFilters input[type="search"],
  body.role-owner .queueFilters input[type="text"]{
    flex:1 1 180px !important;
    min-width:160px !important;
    max-width:60vw !important;
  }

  /* Pills/buttons readable size */
  body.role-owner .queueFilters .pill,
  body.role-owner .queueFilters .qpill,
  body.role-owner .queueFilters button,
  body.role-owner .queueFilters a{
    padding:8px 12px !important;
    font-size:13px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    min-width:max-content !important;
  }
}


/* DASHBOARD_LAYOUT_SWITCHER_V1 */
/* Dashboard Layout Switcher
   Default: dashboard-holiday (current UI)
   Alternate: dashboard-lovely (new UI will be added later)
*/

.dash-layout-wrap{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:10px;
}
.dash-layout-label{
  font-size:12px;
  opacity:0.75;
}
.dash-layout-select{
  height:38px;
  border-radius:12px;
  border:1px solid var(--border);
  background: var(--card);
  padding: 0 10px;
}

/* Lovely hook: place all Lovely-only overrides inside this selector */
body.dashboard-lovely{
  /* Lovely overrides will go here */
}

/* OWNER_MOBILE_TABLE_V7
   Fix mobile/tablet leads table: stop vertical letters + prevent page widening.
   Owner only. Desktop unchanged.
*/
@media (max-width: 1024px){

  body.role-owner, body.role-owner .app, body.role-owner .main{
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Make ONLY the leads table area horizontally scrollable */
  body.role-owner .ownerLeadsTable{
    display: block;               /* allow overflow scrolling */
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;          /* keep columns horizontal */
  }

  /* Ensure the real <table> inside has enough min width (so it scrolls, not squashes) */
  body.role-owner .ownerLeadsTable table,
  body.role-owner table.ownerLeadsTable{
    min-width: 820px;             /* adjust if you add more columns */
    width: max-content;
    border-collapse: collapse;
  }

  /* Prevent per-letter vertical breaking */
  body.role-owner .ownerLeadsTable th,
  body.role-owner .ownerLeadsTable td,
  body.role-owner table.ownerLeadsTable th,
  body.role-owner table.ownerLeadsTable td{
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* If any pill/badge is forcing wrap */
  body.role-owner .ownerLeadsTable .pill,
  body.role-owner .ownerLeadsTable .badge{
    white-space: nowrap !important;
  }
}

/* AGENT_CONSOLE_V1_START */
/* Step 7.1 — Agent Console (UI only) */

.agent-shell {
  display: grid;
  grid-template-columns: 320px 1fr 360px;
  gap: 14px;
  padding: 14px;
  min-height: 100vh;
}

.agent-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.agent-topbar .left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.agent-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.8);
  font-size: 13px;
  white-space: nowrap;
}

.agent-kpi {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  opacity: .9;
}

.agent-card {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

.agent-card .hd {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.agent-card .bd {
  padding: 12px 14px;
}

.agent-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9);
  outline: none;
}

.agent-btn {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9);
  cursor: pointer;
  font-weight: 600;
}

.agent-btn:active {
  transform: translateY(1px);
}

.thread-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 240px);
  overflow: auto;
  padding-right: 4px;
}

.thread-item {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.75);
  cursor: pointer;
}

.thread-item:hover {
  border-color: rgba(0,0,0,.14);
}

.thread-item.active {
  border-color: rgba(0,0,0,.22);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

.thread-title {
  font-weight: 800;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.thread-sub {
  margin-top: 6px;
  font-size: 12px;
  opacity: .8;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.chat-wrap {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: calc(100vh - 28px);
}

.chat-stream {
  padding: 12px;
  overflow: auto;
  max-height: calc(100vh - 220px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 78%;
}

.msg .meta {
  font-size: 12px;
  opacity: .75;
}

.bubble {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85);
  white-space: pre-wrap;
  word-break: break-word;
}

.msg.user { align-self: flex-start; }
.msg.assistant, .msg.agent { align-self: flex-end; }

.msg.assistant .bubble, .msg.agent .bubble {
  border-color: rgba(0,0,0,.12);
  background: rgba(255,255,255,.95);
}

.chat-composer {
  padding: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.right-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kv {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  font-size: 13px;
  align-items: baseline;
}

.kv .k { opacity: .75; }

@media (max-width: 1100px) {
  .agent-shell { grid-template-columns: 320px 1fr; }
  .agent-right { display: none; }
}

@media (max-width: 820px) {
  .agent-shell { grid-template-columns: 1fr; }
  .agent-left { display: none; }
  .agent-topbar { position: relative; }
  .chat-stream { max-height: calc(100vh - 260px); }
}
/* AGENT_CONSOLE_V1_END */

/* === MOBILE_STACK_V1: ensure Agent Login remains visible on small screens === */
@media (max-width: 900px) {
  .agent-shell {
    display: block !important;
    height: auto !important;
    min-height: 100vh !important;
  }
  .agent-left, .agent-main {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* prevent clipping */
  .agent-left {
    position: relative !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin-bottom: 12px !important;
  }
  /* allow content scroll if needed */
  .agent-left .bd {
    overflow: auto !important;
    max-height: none !important;
    -webkit-overflow-scrolling: touch;
  }
  /* make sure login card is never hidden or collapsed */
  #loginBox {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* thread list should not consume all vertical space */
  .thread-list {
    max-height: 240px !important;
    overflow: auto !important;
  }
}

/* === MOBILE_LOGIN_VISIBILITY_V2: never hide agent-left (login lives here) === */
@media (max-width: 900px) {
  .agent-shell {
    display: block !important;
    height: auto !important;
    min-height: 100vh !important;
  }

  /* critical: some existing CSS hides agent-left on small screens */
  .agent-left {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .agent-main {
    width: 100% !important;
    max-width: 100% !important;
  }

  #loginBox {
    display: block !important;
    visibility: visible !important;
  }

  .thread-list {
    max-height: 240px !important;
    overflow: auto !important;
  }
}

/* === LOGINBOX_HIDE_ON_MOBILE_WHEN_LOGGED_IN_V1 === */
@media (max-width: 900px) {
  body.logged-in #loginBox { display: none !important; }
}


/* =========================
   A3_12_AGENT_V2_BLUE_UI_V1 — BLUE AGENT V2 UI
   Target: full-width 3-panel desktop, hamburger + details sheet on mobile
   ========================= */

.agent-shell.agent-v2 {
  display: flex;
  gap: 14px;
  padding: 14px;
  min-height: 100vh;
  background: radial-gradient(1200px 500px at 50% -200px, rgba(255,255,255,.18), rgba(255,255,255,0)),
              linear-gradient(180deg, #2f6fb6 0%, #2a5ea0 25%, #2a5ea0 100%);
}

.agent-shell.agent-v2 .agent-left {
  width: 280px;
  flex: 0 0 280px;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.agent-shell.agent-v2 .agent-center {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.workspace-row {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 12px;
}

.agent-shell.agent-v2 .agent-card {
  border-radius: 14px;
}

.agent-shell.agent-v2 .agent-card .hd {
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,0));
}

.icon-btn {
  appearance: none;
  border: 0;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-weight: 900;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}

.cmd-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cmd-right {
  margin-left: auto;
}

.right-actions {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.right-actions .full {
  width: 100%;
}

.right-actions .wa { background: #14a89a !important; }
.right-actions .assign { background: #1f9d73 !important; }
.right-actions .pay { background: #f08b3f !important; }

.agent-card.mini {
  margin-top: 12px;
}

#btnDetails {
  display: none; /* desktop hidden; only on mobile */
}

#btnHamburger {
  display: none; /* desktop hidden; only on mobile */
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .agent-shell.agent-v2 {
    padding: 10px;
    gap: 10px;
  }

  /* show mobile buttons */
  #btnHamburger, #btnDetails {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* main layout becomes single column */
  .agent-shell.agent-v2 {
    flex-direction: column;
  }

  .agent-shell.agent-v2 .agent-left {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 86vw;
    max-width: 340px;
    transform: translateX(-110%);
    transition: transform .18s ease;
    z-index: 50;
  }

  .agent-shell.agent-v2 .agent-center {
    width: 100%;
  }

  /* right sidebar becomes bottom-sheet */
  .workspace-row {
    grid-template-columns: 1fr;
  }

  /* hide right sidebar column by default (Customer Sidebar is the 2nd card in workspace-row) */
  .workspace-row > section:nth-child(2) {
    display: none;
  }

  body.drawer-open .agent-shell.agent-v2 .agent-left {
    transform: translateX(0);
  }

  /* Mobile details sheet container (we reuse the 2nd card as a sheet) */
  body.details-open .workspace-row > section:nth-child(2) {
    display: flex;
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    top: auto;
    max-height: 70vh;
    z-index: 60;
    box-shadow: 0 18px 40px rgba(0,0,0,.30);
  }

  body.details-open .workspace-row > section:nth-child(2) .bd {
    overflow: auto;
  }
}


/* A3_12_FILTERS_ONE_ROW_V1
   Goal: widen left sidebar so 3 filters fit in one horizontal row.
*/
.agent-shell.agent-v2 .agent-left{
  width: 360px;           /* was smaller; adjust if needed */
  flex: 0 0 360px;
}

/* Inside inboxPanel: keep filter selects on ONE line */
.agent-shell.agent-v2 #inboxPanel #inboxBody > div > div{
  flex-wrap: nowrap !important;   /* the row that holds selects */
}

/* Make the 3 selects share the row evenly */
.agent-shell.agent-v2 #inboxPanel #filterChannel,
.agent-shell.agent-v2 #inboxPanel #filterIntent,
.agent-shell.agent-v2 #inboxPanel #filterStage{
  width: 33% !important;
  min-width: 0 !important;
}



/* A3_12_REMOVE_CMD_TOPSPACE_V1
   Remove empty space above Command Bar in main column.
   Cause: main is an agent-card (padding-top). */
.agent-shell.agent-v2 main.agent-center.agent-card{
  padding-top: 0 !important;
}

/* Ensure first child (Command Bar card) sits flush */
.agent-shell.agent-v2 main.agent-center > section.agent-card:first-child{
  margin-top: 0 !important;
}



/* A3_12_REMOVE_TOPGAP_SHELL_V1
   Remove any remaining top gap above Command Bar by zeroing outer margins/paddings. */
html, body{
  margin: 0 !important;
  padding: 0 !important;
}

/* If the shell adds padding around the whole layout, remove it */
.agent-shell.agent-v2{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Ensure main column card doesn't push down */
.agent-shell.agent-v2 main.agent-center.agent-card{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* If agent-card globally has padding creating the gap inside main, keep main top tight */
.agent-shell.agent-v2 main.agent-center.agent-card > section.agent-card:first-child{
  margin-top: 0 !important;
}

/* In case there is an invisible spacer div before the first section */
.agent-shell.agent-v2 main.agent-center.agent-card > :first-child{
  margin-top: 0 !important;
}



/* A3_12_CHAT_COMPOSER_WA_CSS_V1
   WhatsApp/ChatGPT-like composer bar */
.chat-composer.wa{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-top:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.65);
  border-radius:14px;
}

.chat-composer.wa .composer-inputwrap{
  flex:1;
  min-width:0;
}

.chat-composer.wa .composer-input{
  width:100%;
  border-radius:999px !important;
  padding:12px 14px !important;
}

.chat-composer.wa .composer-icon{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.85);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
}

.chat-composer.wa .composer-icon.mic-on{
  outline:2px solid rgba(0, 140, 255, .35);
}

.chat-composer.wa .composer-send{
  width:44px;
  height:44px;
  border-radius:999px;
  border:0;
  background:rgba(0, 140, 255, .95);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
}



/* A3_12_COMPOSER_ICONS_INSIDE_CSS_V1
   ChatGPT-like pill with icons INSIDE */
.chat-composer.wa.inside{
  padding:0 !important;
  border-top:0 !important;
  background:transparent !important;
}

.chat-composer.wa.inside .composer-pill{
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:10px 10px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.9);
  border-radius:18px;
}

.chat-composer.wa.inside .pill-btn{
  width:36px;
  height:36px;
  border-radius:999px;
  border:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.9;
}

.chat-composer.wa.inside .pill-btn:hover{
  background:rgba(0,0,0,.06);
}

.chat-composer.wa.inside .pill-btn.send{
  background:rgba(0, 140, 255, .95);
  color:#fff;
}
.chat-composer.wa.inside .pill-btn.send:hover{
  background:rgba(0, 140, 255, 1);
}

.chat-composer.wa.inside .pill-btn.mic.mic-on{
  outline:2px solid rgba(0, 140, 255, .35);
}

.chat-composer.wa.inside .pill-input{
  flex:1;
  min-width:0;
  border:0 !important;
  outline:none !important;
  background:transparent !important;
  padding:8px 4px !important;
  border-radius:12px !important;
  resize:none;
  line-height:1.35;
  max-height:160px;
  overflow:auto;
}



/* A3_12_COMPOSER_FULLWIDTH_V1
   Force GPT-like composer to stretch full width */
#chatComposerBar,
.chat-composer.wa.inside{
  width:100% !important;
  display:block !important;
}

.chat-composer.wa.inside .composer-pill{
  width:100% !important;
  box-sizing:border-box !important;
}

/* If parent tries to shrink, this prevents it */
.chat-composer.wa.inside .composer-pill .pill-input{
  width:100% !important;
}



/* A3_12_LOGIN_GATE_CSS_V1
   Lock UI until logged-in; show only loginBox */

/* IMPORTANT: loginBox now lives inside .agent-center,
   so DO NOT hide .agent-center when logged out. */
body:not(.logged-in) .agent-center{
  display:flex !important;
}

/* Hide main content sections (command bar + workspace) until login */
body:not(.logged-in) .agent-center > section{
  display:none !important;
}

/* Keep login visible */
body:not(.logged-in) #loginBox{
  display:block !important;
}


/* Hide left menu elements when not logged in */
body:not(.logged-in) #inboxPanel,
body:not(.logged-in) #navMenu{
  display:none !important;
}

/* Hide logout button until logged in */
body:not(.logged-in) #btnLogout{
  display:none !important;
}

/* Make login box prominent when locked */
body:not(.logged-in) #loginBox{
  display:block !important;
}

/* Once logged in: hide login box completely */
body.logged-in #loginBox{
  display:none !important;
}


/* =========================================================
   A3_DESKTOP_LEFT_COLLAPSE_CSS_V1
   Desktop-only collapsible left menu (thin strip at extreme left).
   Middle (chat) gets full space.
   ========================================================= */

@media (min-width: 901px){

  /* collapsed state: reduce left column width */
  body.menu-collapsed .agent-shell.agent-v2{
    grid-template-columns: 56px 1fr !important;
  }

  body.menu-collapsed .agent-shell.agent-v2 .agent-left{
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    overflow: hidden !important;
  }

  /* hide heavy sidebar content when collapsed */
  body.menu-collapsed .agent-shell.agent-v2 .agent-left .bd{
    display: none !important;
  }

  /* keep header visible for the collapse button */
  body.menu-collapsed .agent-shell.agent-v2 .agent-left .hd{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap: 0 !important;
    padding: 8px !important;
  }

  /* button styling */
  #menuCollapseBtn{
    cursor:pointer;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 14px;
    line-height: 1;
    background: #fff;
  }
}

/* A3_DESKTOP_LEFT_COLLAPSE_CSS_V4 — CLEAN RESET + COLLAPSE (desktop only) */
@media (min-width: 901px){

  /* ===== EXPANDED RESET (ensures un-collapse always restores) ===== */
  body:not(.menu-collapsed) .agent-shell.agent-v2 .agent-left{
    position: static !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    z-index: auto !important;
  }

  body:not(.menu-collapsed) .agent-shell.agent-v2 .agent-left .bd{
    display: flex !important;
  }

  body:not(.menu-collapsed) .agent-shell.agent-v2 .agent-center{
    margin-left: 0 !important;
    width: auto !important;
  }

  /* ===== COLLAPSED STATE ===== */
  body.menu-collapsed .agent-shell.agent-v2{
    position: relative;
  }

  body.menu-collapsed .agent-shell.agent-v2 .agent-left{
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    overflow: hidden !important;
    z-index: 1002 !important;
    pointer-events: auto !important;
  }

  /* Hide heavy content & badge in collapsed (makes it clean) */
  body.menu-collapsed .agent-shell.agent-v2 .agent-left .bd{
    display: none !important;
  }
  body.menu-collapsed .agent-shell.agent-v2 .agent-left .agent-badge{
    display: none !important;
  }

  /* Keep header compact & centered */
  body.menu-collapsed .agent-shell.agent-v2 .agent-left .hd{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 6px !important;
  }

  /* Expand chat area */
  body.menu-collapsed .agent-shell.agent-v2 .agent-center{
    margin-left: 56px !important;
    width: calc(100% - 56px) !important;
    position: relative;
    z-index: 1;
  }

  /* Button sizing */
  #menuCollapseBtn{
    cursor: pointer;
  }
  body.menu-collapsed #menuCollapseBtn{
    width: 40px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* A3_INBOX_TOGGLE_V2_CSS
   Enforce Inbox panel visibility when shell has .inbox-open
*/
.agent-shell.agent-v2.inbox-open #inboxBody {
  display: block !important;
}

/* A3_INBOX_TOGGLE_HARDWIRE_V2
   Force Inbox/Queue panel open when body has class inbox-open
*/
body.inbox-open #inboxBody{
  display:block !important;
}
#inboxToggle{
  position:relative;
  z-index:2000;
  pointer-events:auto;
}

/* A3_INBOX_COLLAPSE_V1
   True collapse for Inbox/Queue panel (collapse the body, keep header)
*/
#inboxPanel.collapsed #inboxBody{
  display:none !important;
}
#inboxPanel.collapsed .bd{
  display:none !important;
}
#inboxPanel .hd{
  cursor: default;
}

/* ===============================
   A3_UI_VISIBILITY_V1
   =============================== */

/* 1️⃣ Hamburger buttons must be visible on white background */
#menuCollapseBtn,
#btnHamburger{
  color: #000 !important;
  background: transparent !important;
}

/* ensure icon glyph itself is dark */
#menuCollapseBtn *,
#btnHamburger *{
  color: #000 !important;
}

/* 2️⃣ LOGOUT STATE: show ONLY login box */
body:not(.logged-in) .agent-shell.agent-v2 aside,
body:not(.logged-in) .agent-shell.agent-v2 main > section,
body:not(.logged-in) .agent-shell.agent-v2 nav,
body:not(.logged-in) #navMenu,
body:not(.logged-in) #inboxPanel,
body:not(.logged-in) .cmd-left,
body:not(.logged-in) .cmd-right,
body:not(.logged-in) .agent-badge,
body:not(.logged-in) .agent-left,
body:not(.logged-in) .agent-center > :not(#loginBox){
  display: none !important;
}

/* keep login centered and clean */
body:not(.logged-in) #loginBox{
  display: block !important;
  margin: 40px auto !important;
  max-width: 420px;
}


/* Make the composer area behave like a centered bar */
.agent-shell.agent-v2 main.agent-center {
  align-items: stretch;
}

/* Common composer containers (best-effort): center contents */
.agent-shell.agent-v2 .composer-row,
.agent-shell.agent-v2 .compose-row,
.agent-shell.agent-v2 .chat-compose,
.agent-shell.agent-v2 .chat-input-row,
.agent-shell.agent-v2 #composerRow,
.agent-shell.agent-v2 #composeRow {
  display: flex;
  align-items: center;          /* ✅ vertical align (WhatsApp + input) */
  justify-content: center;      /* ✅ bring to middle */
  gap: 10px;
  width: 100%;
}

/* The input itself: keep it centered and consistent width */
.agent-shell.agent-v2 #composer {
  width: min(760px, 100%);
  max-width: 760px;
  margin: 0 auto;
  height: 40px;                 /* align with buttons */
  line-height: 40px;
}

/* WhatsApp button: ensure visible and same height as input */
.agent-shell.agent-v2 #btnWhatsApp {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* If there is a send button next to input, keep same height */
.agent-shell.agent-v2 #btnSend,
.agent-shell.agent-v2 #sendBtn,
.agent-shell.agent-v2 .btn-send {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* If the composer is wrapped inside a card footer / last section, lift that too */
.agent-shell.agent-v2 main.agent-center .agent-card:last-child{
  margin-top: -10px;
}

/* =====================================================
   A3_CHAT_ALIGN_COPY_THREAD_V1
   Align chat composer to center, vertically aligned
   just below "Copy Thread ID" button in right sidebar
   ===================================================== */

/* Ensure workspace grid stays stable */
.agent-shell.agent-v2 .workspace-row{
  align-items: start;
}

/* Push main center content down to align with right panel tools */
.agent-shell.agent-v2 main.agent-center{
  padding-top: 78px; /* matches right sidebar header + copy button row */
}

/* Center the chat composer horizontally */
.agent-shell.agent-v2 .composer-row,
.agent-shell.agent-v2 .compose-row,
.agent-shell.agent-v2 .chat-compose,
.agent-shell.agent-v2 .chat-input-row,
.agent-shell.agent-v2 #composerRow,
.agent-shell.agent-v2 #composeRow{
  margin-left: auto;
  margin-right: auto;
  max-width: 760px;
}

/* Keep input & WhatsApp button alignment intact */
.agent-shell.agent-v2 textarea,
.agent-shell.agent-v2 input[type="text"]{
  margin: 0 auto;
}


/* Common composer containers: center + vertical align */
.agent-shell.agent-v2 .composer-row,
.agent-shell.agent-v2 .compose-row,
.agent-shell.agent-v2 .chat-compose,
.agent-shell.agent-v2 .chat-input-row,
.agent-shell.agent-v2 #composerRow,
.agent-shell.agent-v2 #composeRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;

  /* LOCATION TUNE: move whole composer slightly UP */
  transform: translateY(-14px);
}

/* Input sizing: keep centered + consistent height */
.agent-shell.agent-v2 #msgText,
.agent-shell.agent-v2 #messageText,
.agent-shell.agent-v2 #chatInput,
.agent-shell.agent-v2 #composerInput,
.agent-shell.agent-v2 textarea,
.agent-shell.agent-v2 input[type="text"]{
  width:min(760px, 100%);
  max-width:760px;
  margin:0 auto;
  height:40px;
  line-height:40px;
}

/* WhatsApp button: same height and aligned */
.agent-shell.agent-v2 #btnWhatsApp,
.agent-shell.agent-v2 #whatsAppBtn,
.agent-shell.agent-v2 [aria-label*="WhatsApp"]{
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Send button (if present): same height */
.agent-shell.agent-v2 #btnSend,
.agent-shell.agent-v2 #sendBtn,
.agent-shell.agent-v2 .btn-send{
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}


/* Common composer containers: center + vertical align */
.agent-shell.agent-v2 .composer-row,
.agent-shell.agent-v2 .compose-row,
.agent-shell.agent-v2 .chat-compose,
.agent-shell.agent-v2 .chat-input-row,
.agent-shell.agent-v2 #composerRow,
.agent-shell.agent-v2 #composeRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;

  /* LOCATION TUNE: move whole composer slightly UP */
  transform: translateY(-28px);
}

/* Input sizing: keep centered + consistent height */
.agent-shell.agent-v2 #msgText,
.agent-shell.agent-v2 #messageText,
.agent-shell.agent-v2 #chatInput,
.agent-shell.agent-v2 #composerInput,
.agent-shell.agent-v2 textarea,
.agent-shell.agent-v2 input[type="text"]{
  width:min(760px, 100%);
  max-width:760px;
  margin:0 auto;
  height:40px;
  line-height:40px;
}

/* WhatsApp button: same height and aligned */
.agent-shell.agent-v2 #btnWhatsApp,
.agent-shell.agent-v2 #whatsAppBtn,
.agent-shell.agent-v2 [aria-label*="WhatsApp"]{
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Send button (if present): same height */
.agent-shell.agent-v2 #btnSend,
.agent-shell.agent-v2 #sendBtn,
.agent-shell.agent-v2 .btn-send{
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}


/* Ensure main center uses normal flow */
.agent-shell.agent-v2 main.agent-center{
  display: flex;
  flex-direction: column;
}

/* Messages area should grow naturally */
.agent-shell.agent-v2 .message-list,
.agent-shell.agent-v2 #messageList,
.agent-shell.agent-v2 .messages,
.agent-shell.agent-v2 .chat-messages{
  flex: 1 1 auto;
  min-height: 0;
}

/* Composer row: placed AFTER messages */
.agent-shell.agent-v2 .composer-row,
.agent-shell.agent-v2 .compose-row,
.agent-shell.agent-v2 .chat-compose,
.agent-shell.agent-v2 .chat-input-row,
.agent-shell.agent-v2 #composerRow,
.agent-shell.agent-v2 #composeRow{
  position: sticky;
  bottom: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 100%;
  padding: 12px 0 8px;

  background: var(--card-bg, #fff);
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* Input sizing */
.agent-shell.agent-v2 textarea,
.agent-shell.agent-v2 input[type="text"]{
  width: min(760px, 100%);
  max-width: 760px;
  height: 40px;
  line-height: 40px;
}

/* WhatsApp + Send buttons aligned */
.agent-shell.agent-v2 #btnWhatsApp,
.agent-shell.agent-v2 #whatsAppBtn,
.agent-shell.agent-v2 [aria-label*="WhatsApp"],
.agent-shell.agent-v2 #btnSend,
.agent-shell.agent-v2 #sendBtn{
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* A3_CHAT_ALIGN_WHATSAPP_V1
   Standard inline composer (NOT bottom sticky):
   - composer sits in the middle flow under messages area
   - messages area scrolls within a max-height so composer stays "mid", not pinned to bottom
*/

/* Main center layout: column flow */
.agent-shell.agent-v2 main.agent-center{
  display: flex;
  flex-direction: column;
}

/* Messages area: scroll within a bounded height (prevents composer being pushed to page bottom) */
.agent-shell.agent-v2 .message-list,
.agent-shell.agent-v2 #messageList,
.agent-shell.agent-v2 .messages,
.agent-shell.agent-v2 .chat-messages{
  max-height: 55vh;
  overflow: auto;
}

/* Composer row: standard inline location (no sticky, no fixed) */
.agent-shell.agent-v2 .composer-row,
.agent-shell.agent-v2 .compose-row,
.agent-shell.agent-v2 .chat-compose,
.agent-shell.agent-v2 .chat-input-row,
.agent-shell.agent-v2 #composerRow,
.agent-shell.agent-v2 #composeRow{
  position: static !important;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 100%;
  margin: 12px auto 0;
  padding: 0;
}

/* Input sizing: centered + consistent height */
.agent-shell.agent-v2 #msgText,
.agent-shell.agent-v2 #messageText,
.agent-shell.agent-v2 #chatInput,
.agent-shell.agent-v2 #composerInput,
.agent-shell.agent-v2 textarea,
.agent-shell.agent-v2 input[type="text"]{
  width: min(760px, 100%);
  max-width: 760px;
  margin: 0;
  height: 40px;
  line-height: 40px;
}

/* WhatsApp + Send buttons: same height and aligned */
.agent-shell.agent-v2 #btnWhatsApp,
.agent-shell.agent-v2 #whatsAppBtn,
.agent-shell.agent-v2 [aria-label*="WhatsApp"],
.agent-shell.agent-v2 #btnSend,
.agent-shell.agent-v2 #sendBtn,
.agent-shell.agent-v2 .btn-send{
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}