/* Omnichannel CX — demo-scoped styles */
.badge-demo{ font-size:.78rem; padding:6px 14px; border-radius:999px; border:1px solid rgba(212,175,55,.45); color:var(--gold); background:rgba(212,175,55,.08); white-space:nowrap; }
.site-footer-local{ border-top:1px solid var(--border); margin-top:40px; padding:24px 0; color:var(--muted); font-size:.85rem; text-align:center; }

.cx-app{ padding:20px 0 60px; }
.cx-tabs{ display:flex; gap:8px; margin-bottom:20px; }
.cx-view-tab{ padding:10px 20px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--muted); font-weight:600; font-size:.9rem; }
.cx-view-tab.active{ background:linear-gradient(135deg,var(--violet),var(--teal)); color:#04211d; border-color:transparent; }
.cx-view{ display:none; }
.cx-view.active{ display:block; }

/* ---- Inbox ---- */
.cx-inbox-grid{ display:grid; grid-template-columns:340px 1fr; gap:20px; align-items:start; }
@media (max-width:900px){ .cx-inbox-grid{ grid-template-columns:minmax(0,1fr); } }
.cx-panel{ min-width:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow); }
.cx-list{ display:flex; flex-direction:column; gap:8px; max-height:640px; overflow-y:auto; }
.cx-conv{ display:flex; gap:10px; padding:12px; border-radius:var(--radius-md); border:1px solid var(--border); background:rgba(255,255,255,0.02); cursor:pointer; transition:.2s; }
.cx-conv:hover, .cx-conv.selected{ border-color:var(--violet); background:rgba(124,92,255,0.08); }
.cx-avatar{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; flex:none; color:#04211d; }
.cx-conv-body{ flex:1; min-width:0; }
.cx-conv-top{ display:flex; justify-content:space-between; gap:8px; }
.cx-conv-name{ font-weight:700; font-size:.9rem; }
.cx-chan-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-inline-end:5px; }
.cx-conv-preview{ font-size:.78rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }
.cx-tags{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.cx-tag{ font-size:.65rem; padding:2px 8px; border-radius:999px; font-weight:700; }
.cx-tag.sent-negative{ background:rgba(255,90,90,.15); color:#ff8a8a; }
.cx-tag.sent-positive{ background:rgba(25,195,176,.15); color:var(--teal); }
.cx-tag.sent-neutral{ background:rgba(147,161,194,.15); color:var(--muted); }
.cx-tag.status-handover{ background:rgba(212,175,55,.18); color:var(--gold); }
.cx-tag.status-open{ background:rgba(124,92,255,.15); color:var(--violet); }
.cx-tag.status-resolved{ background:rgba(25,195,176,.15); color:var(--teal); }

.cx-thread{ display:flex; flex-direction:column; height:640px; }
.cx-thread-head{ display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--border); margin-bottom:12px; }
.cx-thread-msgs{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:6px; }
.cx-msg{ max-width:75%; padding:11px 15px; border-radius:16px; font-size:.9rem; line-height:1.6; }
.cx-msg.customer{ align-self:flex-start; background:rgba(255,255,255,0.05); border:1px solid var(--border); }
.cx-msg.bot{ align-self:flex-end; background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(25,195,176,.16)); border:1px solid rgba(124,92,255,.3); }
.cx-msg.agent{ align-self:flex-end; background:rgba(212,175,55,.14); border:1px solid rgba(212,175,55,.35); }
.cx-msg-tag{ font-size:.62rem; color:var(--muted); margin-bottom:4px; display:block; }
.cx-composer{ display:flex; gap:10px; margin-top:12px; }
.cx-composer input{ flex:1; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 14px; color:var(--ink); font-family:var(--font-ar); }
.cx-composer button{ background:linear-gradient(135deg,var(--violet),var(--teal)); color:#04211d; border:none; border-radius:var(--radius-md); padding:12px 18px; font-weight:700; }
.cx-handover-banner{ background:rgba(212,175,55,.14); border:1px solid rgba(212,175,55,.4); border-radius:var(--radius-md); padding:10px 14px; font-size:.82rem; color:var(--gold); margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.cx-handover-banner button{ background:var(--gold); color:#241a00; border:none; border-radius:8px; padding:6px 12px; font-size:.78rem; font-weight:700; }

/* ---- Dashboard ---- */
.cx-kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
@media (max-width:900px){ .cx-kpi-grid{ grid-template-columns:repeat(2,1fr); } }
.cx-kpi{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; }
.cx-kpi .k-label{ font-size:.78rem; color:var(--muted); margin-bottom:8px; }
.cx-kpi .k-val{ font-size:1.7rem; font-weight:700; }
.cx-kpi .k-val.gold{ color:var(--gold); } .cx-kpi .k-val.teal{ color:var(--teal); } .cx-kpi .k-val.violet{ color:var(--violet); }
.cx-charts{ display:grid; grid-template-columns:1.1fr .9fr; gap:20px; }
@media (max-width:900px){ .cx-charts{ grid-template-columns:1fr; } }
.cx-chart-wrap{ position:relative; height:280px; }

/* ---- Avatar ---- */
.cx-avatar-wrap{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:20px 0; }
.cx-avatar-svg{ width:180px; height:180px; }
.cx-avatar-caption{ max-width:520px; text-align:center; background:rgba(124,92,255,.08); border:1px solid rgba(124,92,255,.25); border-radius:var(--radius-md); padding:14px 18px; font-size:.92rem; line-height:1.8; min-height:56px; }
.cx-avatar-controls{ display:flex; gap:10px; }
.cx-avatar-controls button{ background:var(--surface); border:1px solid var(--border); color:var(--ink); border-radius:var(--radius-md); padding:10px 18px; font-weight:600; font-size:.85rem; }
.cx-avatar-controls button.primary{ background:linear-gradient(135deg,var(--violet),var(--teal)); color:#04211d; border-color:transparent; }
@keyframes cx-mouth{ 0%,100%{ transform:scaleY(1);} 50%{ transform:scaleY(1.8);} }
.cx-avatar-svg.speaking .cx-mouth{ animation:cx-mouth .28s ease-in-out infinite; transform-origin:center; }
@keyframes cx-blink{ 0%,92%,100%{ transform:scaleY(1);} 96%{ transform:scaleY(0.1);} }
.cx-avatar-svg .cx-eye{ animation:cx-blink 4s infinite; transform-origin:center; }


/* ---- Bilingual layout (EN = LTR default, AR = RTL). site.css hard-codes body{direction:rtl}. ---- */
html[dir="ltr"] body{ direction:ltr; }
html[lang="en"] body{ font-family:var(--font-en), var(--font-ar), sans-serif; }
html[lang="en"] .cx-composer input{ font-family:var(--font-en); }
.skip-link{ right:auto; left:auto; inset-inline-start:16px; transform:translateY(-150%); }
.skip-link:focus{ right:auto; transform:none; }
.demo-head-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.demo-head-actions .btn-ghost{ padding:8px 16px; border-radius:999px; border:1px solid var(--border-strong); font-size:.85rem; white-space:nowrap; }
.lang-toggle{ background:transparent; color:var(--ink); border:1px solid var(--border-strong); border-radius:999px; padding:8px 14px; font-size:.85rem; font-weight:600; white-space:nowrap; }
.lang-toggle:hover, .lang-toggle:focus-visible{ border-color:var(--teal); }
.lang-toggle[lang="ar"]{ font-family:var(--font-ar); }
.lang-toggle[lang="en"]{ font-family:var(--font-en); }
.demo-hero{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.demo-title{ font-size:1.9rem; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.demo-title .title-alt{ font-size:1rem; color:var(--muted); font-weight:400; }
html[lang="en"] .demo-title .title-alt{ display:none; }
.demo-lede{ color:var(--muted); margin-top:8px; max-width:640px; }
.cx-tabs{ flex-wrap:wrap; }
.cx-composer input{ min-width:0; }
@media (max-width:560px){
  .site-header .wrap{ gap:10px; padding:0 14px; }
  .demo-head-actions{ gap:6px; }
  .demo-head-actions .btn-ghost, .lang-toggle{ padding:6px 10px; font-size:.78rem; }
  .demo-title{ font-size:1.5rem; }
  .cx-view-tab{ padding:8px 14px; font-size:.82rem; }
  .cx-composer button{ padding:12px 12px; }
  .cx-msg{ max-width:88%; }
}

/* keep side gutters: the base rule above resets .wrap padding to 0 */
.cx-app{ padding-inline:24px; }
@media (max-width:560px){ .cx-app{ padding-inline:14px; } }