.ca-live {
  --ca-red: #b31136;
  --ca-ink: #1e1c20;
  --ca-line: #ded9da;
  --ca-muted: #544c50;
  --ca-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  position: fixed;
  z-index: 90;
  inset: auto calc(14px + env(safe-area-inset-right, 0px)) var(--ca-bottom) auto;
  font: 500 14px/1.4 var(--font);
  color: var(--ca-ink);
}
.ca-live [hidden] { display: none !important; }
.ca-live *, .ca-live *::before, .ca-live *::after { box-sizing: border-box; }
.ca-live-actions { display: flex; justify-content: end; gap: 8px; }
.ca-live-actions > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 13px;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 3px 12px #17171b38;
  font: 600 13px/1.25 var(--font);
  white-space: nowrap;
  text-decoration: none;
  color: #fff;
}
.ca-live-actions svg { width: 19px; height: 19px; flex: none; }
.ca-live-actions .ca-live-whatsapp { background: #176749; color: #fff; }
.ca-live-actions .ca-live-toggle, .ca-live-send { background: var(--ca-red); color: #fff; }
.ca-live-actions [aria-disabled="true"] { opacity: .7; }
.ca-live button, .ca-live a { cursor: pointer; }
.ca-live :focus-visible { outline: 2px solid #ec5576; outline-offset: 2px; }
.ca-live-panel {
  position: absolute;
  inset: auto 0 calc(100% + 9px) auto;
  display: flex;
  flex-direction: column;
  width: min(390px, calc(100vw - 28px));
  max-height: min(550px, calc(var(--ca-live-viewport, 100vh) - 96px));
  border: 1px solid var(--ca-line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 32px #17171b32;
}
.ca-live-heading { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 16px; background: var(--ca-ink); color: #fff; }
.ca-live-heading h2 { margin: 0; font: 500 19px/1.2 var(--font-display); color: inherit; text-transform: uppercase; letter-spacing: .06em; }
.ca-live-heading p { margin: 2px 0 0; color: #e8dfe3; font-size: 12px; }
.ca-live-heading button { width: 44px; min-height: 44px; border: 0; border-radius: 5px; background: transparent; color: inherit; font: 400 27px/1 system-ui, sans-serif; }
.ca-live-heading button:hover { background: #ffffff22; }
.ca-live-body { padding: 14px; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.ca-live-status { margin: 0; color: var(--ca-muted); font-size: 13px; }
.ca-live-status:not(:empty) { margin-top: 5px; }
.ca-live-body h3 { margin: 0 0 10px; font: 650 17px/1.25 var(--font); color: var(--ca-ink); }
.ca-live-welcome button, .ca-live-step-actions button, .ca-live-chat-top button { min-height: 44px; border: 1px solid var(--ca-line); border-radius: 7px; padding: 8px 10px; background: #fff; color: var(--ca-ink); font: 700 13px/1.2 system-ui, sans-serif; }
.ca-live-welcome .ca-live-topic-primary { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-inline: 12px; background: #f8eef0; border-color: #e6c8d0; color: #90152f; }
.ca-live-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.ca-live-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12px; color: var(--ca-muted); }
.ca-live-progress progress { flex: 1; min-width: 0; height: 5px; accent-color: var(--ca-red); }
.ca-live-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ca-live-intake label, .ca-live-form label, .ca-live-steering legend { display: block; min-width: 0; font-weight: 700; }
.ca-live-intake small, .ca-live-form small { font-size: 11px; font-weight: 500; color: var(--ca-muted); }
.ca-live :is(input:not([type="radio"]), select, textarea) { display: block; width: 100%; margin-top: 4px; min-height: 44px; padding: 7px; border: 1px solid #91888e; border-radius: 5px; background: #fff; color: var(--ca-ink); font: 400 16px/1.3 var(--font); }
.ca-live-steering { margin: 0 0 8px; padding: 0; border: 0; min-width: 0; }
.ca-live-steering legend { margin-bottom: 4px; }
.ca-live-steering label { display: inline-flex; align-items: center; min-height: 44px; gap: 5px; padding-inline: 6px; margin: 0 4px 4px 0; border: 1px solid var(--ca-line); border-radius: 6px; font-size: 12px; }
.ca-live-steering label:has(:checked) { border-color: var(--ca-red); background: #f8eef0; }
.ca-live-steering input { margin: 0; accent-color: var(--ca-red); }
.ca-live-step-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 11px; }
.ca-live-step-actions .ca-live-send { background: var(--ca-red); color: #fff; border-color: var(--ca-red); }
.ca-live-summary { display: grid; grid-template-columns: minmax(105px, .8fr) minmax(0, 1.2fr); gap: 4px 8px; margin: 0 0 9px; padding: 9px; border-radius: 6px; background: #f8f4f4; font-size: 13px; }
.ca-live-summary dt { font-weight: 700; }
.ca-live-summary dd { margin: 0; overflow-wrap: anywhere; }
.ca-live-chat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ca-live-chat-top h3 { margin-bottom: 0; }
.ca-live-chat-top button { font-size: 12px; }
.ca-live-messages { display: grid; gap: 6px; list-style: none; min-height: 0; max-height: 260px; padding: 0; margin: 8px 0; overflow: auto; overscroll-behavior: contain; }
.ca-live-messages li { margin: 0; border-radius: 6px; background: #f8eef0; padding: 7px 9px; overflow-wrap: anywhere; }
.ca-live-messages .ca-live-from-support { background: #edf3ef; }
.ca-live-messages p { margin: 2px 0 0; white-space: pre-wrap; }
.ca-live-form { margin: 0; }
.ca-live-form label { display: block; margin-bottom: 4px; font-weight: 750; }
.ca-live-compose { display: flex; align-items: end; gap: 7px; }
.ca-live .ca-live-form textarea { flex: 1; width: 0; min-width: 0; min-height: 48px; resize: vertical; }
.ca-live-send { min-height: 44px; padding: 8px 13px; border: 0; border-radius: 5px; font: 700 14px/1 system-ui, sans-serif; }
.ca-live-send:disabled { opacity: .65; cursor: wait; }
@media (max-width: 760px) {
  body:has(.mobile-contact:not([hidden])) .ca-live { --ca-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  body:has(.ca-live-toggle:not([hidden])) .mobile-contact { grid-template-columns: 1fr; }
  body:has(.ca-live-toggle:not([hidden])) .mobile-contact > .mobile-message { display: none; }
  .ca-live-actions { gap: 6px; }
  .ca-live-actions > * { padding-inline: 10px; }
  .ca-live-panel {
    position: fixed;
    inset: auto max(10px, env(safe-area-inset-right, 0px)) max(calc(var(--ca-bottom) + 52px), calc(var(--ca-live-keyboard, 0px) + 8px)) auto;
    width: min(390px, calc(100vw - max(10px, env(safe-area-inset-right, 0px)) - max(10px, env(safe-area-inset-left, 0px))));
    max-height: min(550px, calc(100dvh - var(--ca-bottom) - 64px), calc(var(--ca-live-viewport, 100dvh) - 16px));
  }
}