/* Confiable AI Chat - widget styles. Colors come from CSS variables set in Settings > Colors. */
.cac-root, .cac-root * { box-sizing: border-box; }
.cac-root {
  position: fixed; bottom: 20px; z-index: 999999;
  font: var(--cac-fs, 15px)/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--cac-bot-text);
}
.cac-root.cac-right { right: 20px; }
.cac-root.cac-left { left: 20px; }
.cac-root button, .cac-root textarea { font: inherit; color: inherit; margin: 0; }
.cac-root button { cursor: pointer; background: none; border: 0; padding: 0; }
.cac-root :focus-visible { outline: 2px solid var(--cac-primary); outline-offset: 2px; }

/* Isolation: the website's global fonts / button styles must not leak into the chat. */
.cac-root, .cac-root :is(div, span, strong, em, a, p, ul, li, button, textarea, header, form) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: normal !important; text-transform: none !important; font-style: normal;
}
.cac-root :is(button, textarea) { line-height: 1.35 !important; text-shadow: none !important; }
.cac-root .cac-bubble { font-size: var(--cac-fs, 15px) !important; line-height: 1.5 !important; }
.cac-root .cac-bubble :is(p, li, a, strong, em, span) { font-size: inherit !important; line-height: inherit !important; }

/* launcher */
.cac-launcher {
  display: flex !important; align-items: center; gap: 10px; height: 58px; min-width: 58px; padding: 0 17px !important;
  justify-content: center; border-radius: 29px !important;
  background: var(--cac-primary) !important; color: var(--cac-primary-text) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.2);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cac-launcher:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(0,0,0,.26), 0 1px 3px rgba(0,0,0,.2); }
.cac-launcher:focus-visible { outline-color: var(--cac-primary-text); box-shadow: 0 0 0 3px var(--cac-primary); }
.cac-launcher-label { font-weight: 600; font-size: var(--cac-fs, 15px) !important; white-space: nowrap; }
.cac-left .cac-launcher { flex-direction: row-reverse; }

/* teaser (pop-up message) */
.cac-teaser {
  position: absolute; bottom: 74px; display: flex; align-items: flex-start;
  width: var(--cac-tw, 270px); max-width: calc(100vw - 40px);
  background: var(--cac-bg); color: var(--cac-bot-text); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.05);
  animation: cac-pop .25s ease-out;
}
.cac-teaser::after { content: ""; position: absolute; bottom: -6px; width: 14px; height: 14px; background: var(--cac-bg); transform: rotate(45deg); border-radius: 0 0 4px 0; box-shadow: 3px 3px 5px rgba(0,0,0,.07); }
.cac-right .cac-teaser { right: 0; } .cac-right .cac-teaser::after { right: 34px; }
.cac-left .cac-teaser { left: 0; }  .cac-left .cac-teaser::after { left: 34px; }
.cac-teaser[hidden] { display: none; }
.cac-teaser-text { flex: 1 1 auto; min-width: 0; width: auto !important; text-align: left; padding: 15px 4px 15px 18px !important; line-height: 1.4 !important; font-size: var(--cac-fs-teaser, 14px) !important; font-weight: 500; white-space: normal; word-break: normal; overflow-wrap: break-word; }
.cac-teaser-x { flex: none; align-self: flex-start; padding: 9px 12px 9px 6px !important; font-size: 20px !important; line-height: 1 !important; opacity: .45; }
.cac-teaser-x:hover { opacity: 1; }

/* panel */
.cac-panel {
  position: absolute; bottom: 72px; display: flex; flex-direction: column;
  width: 384px; height: min(620px, calc(100vh - 110px)); max-height: calc(100vh - 110px);
  background: var(--cac-bg); border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(10,30,40,.28), 0 0 0 1px rgba(0,0,0,.06);
  transform-origin: bottom right; animation: cac-pop .2s ease-out;
}
.cac-panel[hidden] { display: none; }
.cac-right .cac-panel { right: 0; } .cac-left .cac-panel { left: 0; transform-origin: bottom left; }

.cac-head { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 16px; background: var(--cac-primary); color: var(--cac-primary-text); }
.cac-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cac-name { font-size: var(--cac-fs-head, 16px) !important; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cac-role { font-size: calc(var(--cac-fs-head, 16px) - 3.5px) !important; opacity: .85; }
.cac-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50% !important; color: inherit !important; opacity: .85; }
.cac-icon, .cac-icon:hover, .cac-icon:focus, .cac-icon:active { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
.cac-icon:hover { opacity: 1; }
.cac-icon svg, .cac-send svg { display: block; margin: auto; }
.cac-head .cac-icon:focus-visible { outline-color: var(--cac-primary-text); }

.cac-avatar { flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--cac-primary-text); color: var(--cac-primary); font-weight: 700; }
.cac-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cac-avatar-lg { width: 44px; height: 44px; font-size: 16px !important; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.cac-avatar-sm { width: 28px; height: 28px; font-size: 11px !important; background: var(--cac-primary); color: var(--cac-primary-text); }

.cac-log { flex: 1; overflow-y: auto; padding: 16px 14px 6px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; overscroll-behavior: contain; }
.cac-row { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.cac-row.cac-user { justify-content: flex-end; }
.cac-bubble { max-width: 82%; padding: 10px 13px; border-radius: 16px; word-wrap: break-word; overflow-wrap: anywhere; }
.cac-bot .cac-bubble { background: var(--cac-bot-bubble); color: var(--cac-bot-text); border-bottom-left-radius: 4px; }
.cac-user .cac-bubble { background: var(--cac-user-bubble); color: var(--cac-user-text); border-bottom-right-radius: 4px; white-space: pre-wrap; }
.cac-bubble p { margin: 0 0 .5em; } .cac-bubble p:last-child { margin-bottom: 0; }
.cac-bubble ul { margin: .3em 0 .5em; padding-left: 1.2em; } .cac-bubble li { margin: .15em 0; }
.cac-bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.cac-sources { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,.1); display: flex; flex-direction: column; gap: 3px; font-size: var(--cac-fs-ui, 13.5px) !important; }
.cac-sources a::before { content: "Read more: "; font-weight: 400; opacity: .7; }

.cac-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.cac-typing i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; animation: cac-dot 1.1s infinite ease-in-out; }
.cac-typing i:nth-child(2) { animation-delay: .15s; } .cac-typing i:nth-child(3) { animation-delay: .3s; }

.cac-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 8px; }
.cac-chips:empty { display: none; }
.cac-chip { padding: 7px 12px !important; border-radius: 16px !important; font-size: var(--cac-fs-ui, 13.5px) !important; text-align: left; border: 1px solid var(--cac-primary) !important; color: var(--cac-primary) !important; background: transparent !important; }
.cac-chip:hover { background: var(--cac-primary) !important; color: var(--cac-primary-text) !important; }

.cac-actions { display: flex; gap: 8px; padding: 4px 14px 10px; }
.cac-action { flex: 1; text-align: center; padding: 8px 6px; font-size: var(--cac-fs-ui, 13.5px) !important; font-weight: 600; text-decoration: none !important; border-radius: 10px; color: var(--cac-bot-text) !important; background: var(--cac-bot-bubble); }
.cac-action:hover { filter: brightness(.96); }

.cac-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(0,0,0,.08); }
.cac-input { font-size: var(--cac-fs, 15px) !important; flex: 1; resize: none; max-height: 110px; padding: 10px 12px !important; border: 1px solid rgba(0,0,0,.18) !important; border-radius: 12px !important; background: var(--cac-bg) !important; color: var(--cac-bot-text) !important; line-height: 1.35; box-shadow: none !important; }
.cac-input::placeholder { color: var(--cac-bot-text); opacity: .5; }
.cac-input:focus { border-color: var(--cac-primary) !important; outline: 0; box-shadow: 0 0 0 3px rgba(0,0,0,.06) !important; }
.cac-send { padding: 0 !important; line-height: 0 !important; align-self: center; flex: none; width: 42px; height: 42px; display: grid !important; place-items: center; border-radius: 12px !important; background: var(--cac-primary) !important; color: var(--cac-primary-text) !important; }
.cac-send:disabled { opacity: .45; cursor: default; }
.cac-note { padding: 0 14px 10px; font-size: calc(var(--cac-fs-ui, 13.5px) - 2px) !important; text-align: center; opacity: .6; }

@keyframes cac-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cac-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .3; } 40% { transform: translateY(-4px); opacity: .8; } }

/* hidden parts must stay hidden whatever display value they have */
.cac-root [hidden] { display: none !important; }

/* lead form (contact details before the chat) */
.cac-lead { flex: 1; overflow-y: auto; padding: 18px 16px 12px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.cac-lead .cac-lead-title { font-size: calc(var(--cac-fs-head, 16px) + 1px) !important; color: var(--cac-bot-text); line-height: 1.3 !important; }
.cac-lead .cac-lead-intro { margin: 0 !important; color: var(--cac-bot-text); opacity: .8; font-size: var(--cac-fs-ui, 13.5px) !important; line-height: 1.45 !important; }
.cac-lead-form { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.cac-lead-field { display: flex; flex-direction: column; gap: 4px; margin: 0 !important; }
.cac-lead-field span { font-size: calc(var(--cac-fs-ui, 13.5px) - 1px) !important; font-weight: 600; color: var(--cac-bot-text); }
.cac-root .cac-lead-input { width: 100% !important; box-sizing: border-box !important; height: auto !important; margin: 0 !important; padding: 10px 12px !important; border: 1px solid rgba(0,0,0,.18) !important; border-radius: 10px !important; background: var(--cac-bg) !important; color: var(--cac-bot-text) !important; font-size: max(16px, var(--cac-fs, 15px)) !important; line-height: 1.3 !important; box-shadow: none !important; }
.cac-root .cac-lead-input:focus { border-color: var(--cac-primary) !important; outline: 0; box-shadow: 0 0 0 3px rgba(0,0,0,.06) !important; }
.cac-lead-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.cac-lead-err { min-height: 0; color: #b32d2e; font-size: calc(var(--cac-fs-ui, 13.5px) - .5px) !important; line-height: 1.35 !important; }
.cac-lead-err:empty { display: none; }
.cac-root .cac-lead-btn { padding: 12px 16px !important; border: 0 !important; border-radius: 12px !important; background: var(--cac-primary) !important; color: var(--cac-primary-text) !important; font-size: var(--cac-fs-ui, 13.5px) !important; font-weight: 600 !important; cursor: pointer; box-shadow: none !important; }
.cac-root .cac-lead-btn:disabled { opacity: .5; cursor: default; }
.cac-lead .cac-lead-consent { margin: 0 !important; color: var(--cac-bot-text); opacity: .6; font-size: calc(var(--cac-fs-ui, 13.5px) - 2px) !important; line-height: 1.4 !important; }

/* no floating button: the chat card sits at the corner and opens only from the shortcode / links */
.cac-no-launcher .cac-launcher, .cac-no-launcher .cac-teaser { display: none !important; }
.cac-no-launcher .cac-panel { bottom: 0; }

/* [confiable_chat] shortcode button */
.cac-trigger { cursor: pointer; font-family: inherit; line-height: 1.3; }
.cac-trigger-button { display: inline-block; padding: 12px 22px !important; border: 0 !important; border-radius: 999px !important; font-size: 16px; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,.18) !important; }
.cac-trigger-button:hover { filter: brightness(1.1); }
.cac-trigger-link { display: inline; padding: 0 !important; border: 0 !important; background: none !important; text-decoration: underline; font-size: inherit; font-weight: 600; }

@media (max-width: 480px) {
  .cac-root.cac-right, .cac-root.cac-left { bottom: 14px; }
  .cac-root.cac-right { right: 14px; } .cac-root.cac-left { left: 14px; }
  /* phones: own text sizes, and the chat floats as a card instead of covering the whole screen */
  .cac-root.cac-root { --cac-fs: var(--cac-fs-m, 15px); --cac-fs-ui: var(--cac-fs-ui-m, 13.5px); --cac-fs-head: var(--cac-fs-head-m, 16px); --cac-fs-teaser: var(--cac-fs-teaser-m, 14px); --cac-tw: var(--cac-tw-m, 240px); }
  .cac-root.cac-is-open .cac-launcher { display: none !important; }
  .cac-root.cac-is-open .cac-panel {
    position: fixed; top: auto; left: 10px; right: 10px; width: auto;
    bottom: calc(10px + var(--cac-kb, 0px));
    height: calc(var(--cac-mh, 75) * 1vh); height: calc(var(--cac-mh, 75) * 1dvh);
    max-height: calc(100vh - 20px - var(--cac-kb, 0px)); max-height: calc(100dvh - 20px - var(--cac-kb, 0px));
    border-radius: 18px;
  }
  .cac-root .cac-input { font-size: max(16px, var(--cac-fs, 15px)) !important; } /* stops iOS zoom on focus */
}
@media (prefers-reduced-motion: reduce) {
  .cac-root *, .cac-panel, .cac-teaser { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}