:root { --control-ink: #18181b; }
.chat-hero { padding: 170px 0 108px; border-bottom: 1px solid var(--line); }
.live-chat-demo .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.chat-hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, .76fr); gap: clamp(54px, 8vw, 124px); align-items: end; }
.chat-hero-grid > *, .chat-intro-grid > *, .chat-demo-heading > *, .chat-capabilities-head > * { min-width: 0; }
.chat-hero h1 { max-width: 11ch; margin-top: 56px; font-family: var(--font-display); font-size: clamp(3.6rem, 6.4vw, 6rem); font-weight: 500; line-height: .98; }
.chat-hero-copy > p { max-width: 58ch; margin: 28px 0 32px; color: var(--zinc-300); font-size: 1.05rem; }
.hero-conversation { overflow: hidden; border: 1px solid var(--line-2); border-radius: 16px; background: #0c0c0f; box-shadow: 0 50px 90px -50px rgba(0,0,0,.95); }
.hero-conversation-head { display: flex; justify-content: space-between; gap: 20px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.hero-conversation-head span { display: flex; align-items: center; gap: 9px; color: var(--white); font-weight: 600; }
.hero-conversation-head i, #visitorStatus i, #availabilityButton i { width: 7px; height: 7px; border-radius: 50%; background: var(--white); }
.hero-conversation-head small { color: var(--zinc-500); }
.hero-message { display: grid; max-width: 78%; gap: 4px; margin: 24px; }
.hero-message span { padding: 13px 15px; border: 1px solid var(--line-2); border-radius: 10px; color: var(--zinc-300); line-height: 1.45; }
.hero-message small { color: var(--zinc-600); font-size: .7rem; }
.hero-message.is-visitor { justify-items: end; margin-left: auto; }
.hero-message.is-visitor span { background: var(--white); color: var(--control-ink); }
.hero-message.is-agent { grid-template-columns: 28px minmax(0, 1fr); align-items: end; margin-right: auto; }
.hero-message.is-agent b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--zinc-800, #27272a); font-size: .67rem; }
.hero-message.is-agent small { grid-column: 2; }
.hero-typing { display: flex; gap: 4px; width: max-content; margin: 0 0 22px 76px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; }
.hero-typing span { width: 4px; height: 4px; border-radius: 50%; background: var(--zinc-400); animation: chatTyping 1.35s infinite ease-in-out; }
.hero-typing span:nth-child(2) { animation-delay: .16s; }
.hero-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes chatTyping { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

.chat-intro { border-bottom: 1px solid var(--line); }
.chat-intro-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(46px, 8vw, 120px); }
.chat-intro h2, .chat-demo-heading h2, .chat-capabilities h2 { max-width: 15ch; font-family: var(--font-display); font-size: clamp(2.35rem, 4.8vw, 4.8rem); font-weight: 500; line-height: 1.04; }
.chat-intro-copy { display: grid; align-content: end; gap: 18px; max-width: 68ch; color: var(--zinc-300); font-size: 1.05rem; }

.chat-demo-section { padding: 104px 0 116px; border-bottom: 1px solid var(--line); }
.chat-demo-heading, .chat-capabilities-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .62fr); gap: 48px; align-items: end; margin-bottom: 44px; }
.chat-demo-heading > p, .chat-capabilities-head > p { max-width: 54ch; color: var(--zinc-400); }
.live-chat-demo { --chat-panel-height: 820px; display: grid; grid-template-columns: minmax(360px, .72fr) minmax(0, 1.28fr); overflow: hidden; border: 1px solid var(--line-2); border-radius: 16px; background: #0c0c0f; box-shadow: 0 50px 90px -50px rgba(0,0,0,.95); }
.visitor-pane { border-right: 1px solid var(--line-2); }
.pane-label { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 20px; border-bottom: 1px solid var(--line-2); color: var(--zinc-400); font-size: .76rem; }
.pane-label b { color: var(--zinc-600); font-size: .65rem; letter-spacing: .08em; }
.visitor-site { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 38px; height: var(--chat-panel-height); padding: 34px; background: #111114; }
.visitor-site-copy { max-width: 310px; }
.visitor-site-copy small { color: var(--zinc-600); font-size: .64rem; letter-spacing: .08em; }
.visitor-site-copy h3 { margin-top: 10px; font-family: var(--font-display); font-size: 2rem; font-weight: 500; line-height: 1.08; }
.visitor-site-copy p { margin-top: 10px; color: var(--zinc-500); }
.visitor-widget { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; overflow: hidden; border: 1px solid var(--line-2); border-radius: 16px; background: var(--bg); }
.widget-head { display: flex; align-items: center; gap: 11px; padding: 17px 18px; border-bottom: 1px solid var(--line); }
.widget-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--white); color: var(--control-ink); font-size: .72rem; font-weight: 700; }
.widget-head h4 { font-size: .9rem; }
.widget-head p { display: flex; align-items: center; gap: 7px; margin-top: 2px; color: var(--zinc-500); font-size: .7rem; }
.widget-messages, .agent-messages { overflow-y: auto; scrollbar-color: var(--zinc-700) transparent; }
.widget-messages::-webkit-scrollbar, .agent-messages::-webkit-scrollbar { width: 6px; }
.widget-messages::-webkit-scrollbar-track, .agent-messages::-webkit-scrollbar-track { background: transparent; }
.widget-messages::-webkit-scrollbar-thumb, .agent-messages::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--zinc-700); }
.widget-messages { display: flex; flex-direction: column; gap: 11px; padding: 18px; }
.demo-message { display: grid; max-width: 84%; gap: 4px; }
.demo-message span { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--zinc-300); font-size: .84rem; line-height: 1.45; overflow-wrap: anywhere; }
.demo-message small { color: var(--zinc-600); font-size: .64rem; }
.demo-message.is-visitor { align-self: end; justify-items: end; }
.demo-message.is-visitor span { border-color: var(--white); background: var(--white); color: var(--control-ink); }
.demo-message.is-system { max-width: 100%; align-self: center; color: var(--zinc-600); font-size: .72rem; text-align: center; }
.widget-form { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.widget-form input, .agent-form input { min-width: 0; min-height: 44px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg); color: var(--white); font: inherit; }
.widget-form input { grid-column: 1; width: 100%; padding: 0 12px; }
.widget-form button { display: grid; grid-column: 2; place-items: center; width: 44px; min-width: 44px; border: 0; border-radius: 8px; background: var(--white); color: var(--control-ink); cursor: pointer; }
.widget-form svg { width: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

#availabilityButton { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 8px; background: transparent; color: var(--zinc-300); cursor: pointer; }
#availabilityButton[aria-pressed="false"] i { background: var(--zinc-600); }
.agent-workspace { display: grid; grid-template-columns: 190px minmax(0, 1fr); height: var(--chat-panel-height); min-height: 0; }
.agent-inbox { border-right: 1px solid var(--line-2); background: #0a0a0c; }
.inbox-head { display: flex; justify-content: space-between; gap: 10px; padding: 18px 16px; border-bottom: 1px solid var(--line); }
.inbox-head b { font-size: .84rem; }
.inbox-head span { color: var(--zinc-600); font-size: .7rem; }
.inbox-ticket { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; width: 100%; padding: 14px; border: 0; border-bottom: 1px solid var(--line); background: #161619; color: var(--white); text-align: left; cursor: default; }
.inbox-ticket > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--zinc-400); font-size: .64rem; }
.inbox-ticket b, .inbox-ticket small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-ticket b { font-size: .76rem; }
.inbox-ticket small { margin-top: 4px; color: var(--zinc-500); font-size: .67rem; }
.inbox-ticket i { position: absolute; top: 17px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--white); }
.inbox-empty { padding: 20px 16px; color: var(--zinc-700); font-size: .72rem; line-height: 1.5; }
.agent-chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; min-width: 0; min-height: 0; }
.agent-chat-head { display: flex; align-items: center; min-height: 68px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.agent-chat-head h3 { font-size: .9rem; }
.agent-chat-head p { margin-top: 2px; color: var(--zinc-600); font-size: .7rem; }
.agent-messages { display: flex; min-height: 0; flex-direction: column; gap: 12px; padding: 24px; }
.agent-messages .demo-message.is-agent { align-self: end; justify-items: end; }
.agent-messages .demo-message.is-agent span { border-color: var(--white); background: var(--white); color: var(--control-ink); }
.agent-messages .demo-message.is-visitor { align-self: start; justify-items: start; }
.agent-messages .demo-message.is-visitor span { border-color: var(--line); background: transparent; color: var(--zinc-300); }
.quick-replies { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 18px 10px; }
.quick-replies button { min-height: 36px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 8px; background: transparent; color: var(--zinc-400); font: inherit; font-size: .7rem; cursor: pointer; }
.quick-replies button:hover { border-color: var(--zinc-500); color: var(--white); }
.agent-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 18px 18px; }
.agent-form input { grid-column: 1; width: 100%; padding: 0 13px; }
.agent-form button { grid-column: 2; min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--white); color: var(--control-ink); font: inherit; font-weight: 600; cursor: pointer; }
.agent-customization { padding: 20px 18px 22px; border-top: 1px solid var(--line); }
.agent-customization h4 { color: var(--white); font-size: .88rem; font-weight: 600; }
.agent-customization p { max-width: 62ch; margin-top: 7px; color: var(--zinc-500); font-size: .75rem; line-height: 1.55; }
.widget-form input:focus-visible, .agent-form input:focus-visible, .widget-form button:focus-visible, .agent-form button:focus-visible, .quick-replies button:focus-visible, #availabilityButton:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.demo-privacy { margin-top: 16px; color: var(--zinc-600); font-size: .78rem; }

.chat-capabilities-head { margin-bottom: 44px; }
.chat-capability-list { border-top: 1px solid var(--line-2); }
.chat-capability-list article { display: grid; grid-template-columns: minmax(190px, .4fr) minmax(0, 1fr); gap: 36px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--line-2); }
.chat-capability-list h3 { font-size: 1.35rem; font-weight: 500; }
.chat-capability-list p { max-width: 66ch; color: var(--zinc-400); }

@media (max-width: 1080px) {
  .live-chat-demo { --chat-panel-height: 740px; }
  .chat-hero-grid, .live-chat-demo { grid-template-columns: 1fr; }
  .hero-conversation { max-width: 620px; }
  .visitor-pane { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .visitor-widget { max-width: 480px; }
}
@media (max-width: 760px) {
  .live-chat-demo { --chat-panel-height: 680px; }
  .chat-hero { padding: 140px 0 76px; }
  .chat-hero h1 { max-width: 100%; margin-top: 44px; font-size: clamp(3rem, 14vw, 5rem); overflow-wrap: break-word; }
  .chat-intro-grid, .chat-demo-heading, .chat-capabilities-head { grid-template-columns: 1fr; gap: 28px; }
  .chat-demo-section { padding: 78px 0; }
  .live-chat-demo { border-right: 0; border-left: 0; border-radius: 0; }
  .agent-workspace { grid-template-columns: 1fr; }
  .agent-inbox { display: none; }
  .chat-capability-list article { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 520px) {
  .hero-conversation-head { align-items: flex-start; flex-direction: column; gap: 6px; }
  .hero-message { max-width: 88%; margin-right: 16px; margin-left: 16px; }
  .hero-typing { margin-left: 60px; }
  .visitor-site { padding: 24px 18px; }
  .visitor-widget { margin-top: 28px; }
  .agent-chat-head { padding: 0 16px; }
  .agent-messages { padding: 20px 16px; }
  .quick-replies, .agent-form { padding-right: 12px; padding-left: 12px; }
  .agent-form { grid-template-columns: 1fr; }
  .agent-form input, .agent-form button { grid-column: 1; }
  .agent-form button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-typing span { animation: none; opacity: .75; transform: none; }
}