.hx { display: grid; justify-items: center; gap: 1.1rem; width: 100%; }
.hx-stage { display: grid; width: 100%; }
.hx-slide { grid-area: 1 / 1; position: relative; display: flex; justify-content: center; align-items: center;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.98);
  transition: opacity 0.6s var(--ease), transform 0.7s var(--ease), visibility 0.6s; }
.hx-slide.is-on { opacity: 1; visibility: visible; transform: none; }
.hx-dots { display: inline-flex; gap: 0.35rem; padding: 0.3rem; border-radius: 999px; background: rgba(255,255,255,0.8); border: 1px solid var(--line); box-shadow: var(--shadow-sm); position: relative; z-index: 3; }
.hx-dot { font-size: 0.74rem; font-weight: 600; color: var(--body); padding: 0.4rem 0.75rem; border-radius: 999px; transition: background 0.25s, color 0.25s; display: inline-flex; align-items: center; gap: 0.4rem; }
.hx-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.45; }
.hx-dot.is-on { background: var(--ink); color: #fff; }
.hx-dot.is-on::before { background: var(--red); opacity: 1; }
/* supervisor dashboard */
.hx-dash { width: min(25rem, 92vw); filter: drop-shadow(0 30px 50px rgba(28, 20, 23, 0.25)); }
.hx-dash .ct-browser-body { background: #f7f8fa; padding: 12px; display: grid; gap: 9px; }
.hx-dash-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hx-dash-top b { font-size: 0.72rem; color: var(--ink); }
.hx-live { font-family: var(--font-mono); font-size: 0.55rem; color: var(--teal); background: var(--teal-soft); border-radius: 99px; padding: 2px 7px; display: inline-flex; align-items: center; gap: 4px; }
.hx-live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); animation: hx-pulse 1.6s infinite; }
@keyframes hx-pulse { 50% { opacity: 0.3; } }
.hx-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hx-kpi { background: #fff; border: 1px solid #e4e7eb; border-radius: 8px; padding: 7px 7px 6px; }
.hx-kpi span { display: block; font-family: var(--font-mono); font-size: 0.46rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.hx-kpi b { display: block; font-family: var(--font-display); font-size: 1.02rem; color: var(--ink); line-height: 1.2; }
.hx-kpi i { font-style: normal; font-family: var(--font-mono); font-size: 0.48rem; color: var(--teal); }
.hx-kpi i.bad { color: var(--red); }
.hx-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 7px; }
.hx-panel { background: #fff; border: 1px solid #e4e7eb; border-radius: 8px; padding: 8px; }
.hx-panel h6 { font-size: 0.56rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
.hx-agent { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 0.58rem; color: var(--ink); }
.hx-agent .av { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 0.45rem; font-weight: 700; color: #fff; flex: none; }
.hx-agent em { margin-left: auto; font-style: normal; font-family: var(--font-mono); font-size: 0.48rem; border-radius: 99px; padding: 1px 6px; }
.hx-agent em.on { background: var(--azure-soft); color: var(--azure); }
.hx-agent em.free { background: var(--teal-soft); color: var(--teal); }
.hx-agent em.wrap { background: var(--amber-soft); color: var(--amber); }
.hx-agent em.brk { background: var(--paper); color: var(--muted); }
.hx-bars { display: flex; align-items: flex-end; gap: 4px; height: 58px; padding-top: 4px; }
.hx-bars i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(var(--violet), var(--azure)); opacity: 0.85; }
.hx-bars i.hi { background: linear-gradient(var(--red), #ff7a7f); }
.hx-axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.44rem; color: var(--muted); margin-top: 3px; }
.hx-alert { display: flex; align-items: center; gap: 7px; background: var(--red-soft); border-radius: 8px; padding: 6px 8px; font-size: 0.58rem; color: var(--ink); }
.hx-alert b { color: var(--red); }
/* AI chat receptionist */
.hx-chat .ct-phone-screen { gap: 7px; padding-top: 34px; }
.hx-chat-head { display: flex; align-items: center; gap: 7px; background: #fff; border-radius: 12px; padding: 7px 9px; box-shadow: 0 4px 14px -8px rgba(28,20,23,0.15); }
.hx-chat-ava { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--red), var(--violet)); display: grid; place-items: center; color: #fff; flex: none; }
.hx-chat-ava svg { width: 13px; height: 13px; }
.hx-chat-head b { display: block; font-size: 0.64rem; color: var(--ink); line-height: 1.2; }
.hx-chat-head small { display: block; font-family: var(--font-mono); font-size: 0.48rem; color: var(--teal); }
.hx-msgs { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hx-msg { max-width: 86%; font-size: 0.58rem; line-height: 1.4; padding: 6px 9px; border-radius: 12px; }
.hx-msg.in { background: #fff; color: var(--ink); border-bottom-left-radius: 4px; box-shadow: 0 4px 12px -8px rgba(28,20,23,0.2); }
.hx-msg.out { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.hx-msg small { display: block; font-family: var(--font-mono); font-size: 0.44rem; opacity: 0.6; margin-bottom: 1px; }
.hx-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.hx-chips span { font-size: 0.52rem; font-weight: 600; color: var(--red); background: #fff; border: 1px solid var(--red-soft); border-radius: 99px; padding: 3px 7px; }
.hx-booked { display: flex; align-items: center; gap: 7px; background: var(--teal-soft); border-radius: 10px; padding: 7px 9px; font-size: 0.56rem; color: var(--ink); }
.hx-booked svg { width: 14px; height: 14px; color: var(--teal); flex: none; }
.hx-booked b { display: block; font-size: 0.6rem; }
.hx-typing { display: inline-flex; gap: 3px; padding: 7px 9px; background: #fff; border-radius: 12px; border-bottom-left-radius: 4px; align-self: flex-start; }
.hx-typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); animation: hx-pulse 1.2s infinite; }
.hx-typing i:nth-child(2) { animation-delay: 0.2s; } .hx-typing i:nth-child(3) { animation-delay: 0.4s; }
.hx-slide .ct-float.f-violet { left: -6%; top: 16%; }
.hx-slide .ct-float.f-red { right: -6%; bottom: 18%; }
.ct-float.f-violet .ct-float-ico { background: var(--violet-soft); color: var(--violet); }
.ct-float.f-red .ct-float-ico { background: var(--red-soft); color: var(--red); }
@media (max-width: 940px) { .hx-slide .ct-float.f-violet { left: 0; } .hx-slide .ct-float.f-red { right: 0; } }
@media (max-width: 520px) { .hx-dot { padding: 0.4rem 0.55rem; font-size: 0.68rem; } }