/* Klira — Evaluar mi caso (isolated styles) */

/*
  iOS/Safari keyboard can trigger a tiny horizontal overflow when an input is focused.
  We lock the page scroll while the chat modal is open (class is toggled by chat.js).
*/
html.klira-scroll-lock,
body.klira-scroll-lock{
  position:fixed;
  width:100%;
  overflow:hidden;
  left:0;right:0;
  max-width:100%;
  touch-action:pan-y;
}
.klira-chat-section{max-width:900px;margin:2.5rem auto;padding:0 1rem}


/* Prevent iOS Safari from zooming on input focus (it can cause page scale + horizontal overflow). */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

@media (max-width: 820px){
  .klira-chat__input,
  .klira-chat input[type="text"],
  .klira-chat textarea{
    font-size:16px !important; /* iOS: 16px+ prevents auto-zoom */
  }
}

.klira-chat-section{transition:opacity .22s ease, transform .22s ease}
.klira-chat-section--closing{opacity:0;transform:translateY(8px) scale(.99)}
.klira-chat-head h2{margin:0 0 .35rem;font-size:clamp(22px,2.2vw,28px)}
.klira-chat-head p{margin:0 0 1.2rem;opacity:.85}

.klira-chat-frame{
  max-width:760px;margin:0 auto;
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  padding:14px;
}
.klira-chat{display:flex;flex-direction:column;gap:12px}
.klira-chat__messages{
  height:380px;overflow:auto;overflow-x:hidden;padding:10px;
  border-radius:14px;background:#fff;
  border:1px solid rgba(0,0,0,.08);
}
.klira-chat__msg{
  max-width:82%;padding:10px 12px;border-radius:14px;margin:8px 0;
  line-height:1.45;font-size:14px;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere
}
.klira-chat__msg--assistant{background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06)}
.klira-chat__msg--user{margin-left:auto;background:#111827;color:#fff;border:1px solid rgba(0,0,0,.10)}
.klira-chat__inputwrap{display:flex;gap:10px;align-items:center;min-width:0}
.klira-chat__input{
  flex:1 1 auto;width:100%;
  padding:10px 12px;border-radius:12px;
  border:1px solid rgba(0,0,0,.14);background:#fff;font-size:14px;outline:none;
  resize:none; overflow:hidden; /* auto-grow via JS */
  min-height:44px; max-height:160px;
  line-height:1.35;
}
.klira-chat__input:focus{border-color:rgba(0,0,0,.25);box-shadow:inset 0 0 0 2px rgba(17,24,39,.10)}
.klira-chat__mic{
  flex:0 0 auto;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  color:#111827;
  line-height:1;
  cursor:pointer;
}
.klira-chat__mic.is-on{background:#111827;color:#fff;border-color:#111827;box-shadow:0 0 0 3px rgba(17,24,39,.18);animation:kliraMicPulse 1.2s ease-in-out infinite}

@keyframes kliraMicPulse{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1px)}
}
.klira-chat__mic.is-disabled,
.klira-chat__miclang.is-disabled{
  background:#f3f4f6;
  color:#9ca3af;
  border-color:rgba(0,0,0,.10);
  cursor:not-allowed;
}
.klira-chat__miclang:active{background:#111827;color:#fff;border-color:#111827}
.klira-chat__mic:active{transform:translateY(1px)}
.klira-chat__send{flex:0 0 auto;padding:10px 14px;border-radius:999px;min-width:0}
.klira-chat__microcopy small{font-size:12px;opacity:.75}
.klira-chat-note{max-width:760px;margin:.9rem auto 0;font-size:13px;opacity:.75}

/* Close CTA after completion */
.klira-chat__closecta{display:flex;justify-content:center;margin:14px 0 2px}
.klira-chat__closebtn{
  padding:10px 16px;
  border-radius:999px;
  background:#111827; /* black button */
  border:1px solid rgba(0,0,0,.12);
  color:#fff !important; /* white label */
  font-weight:800;
  cursor:pointer;
}
.klira-chat__closebtn:hover{transform:translateY(-1px)}
.klira-chat__closebtn:active{transform:translateY(0)}

/* Smooth hide when embedded (non-modal) */
.klira-chat-section--closed{display:none}

.klira-chat__start{
  margin-top:8px;padding:10px;border-radius:14px;
  border:1px dashed rgba(0,0,0,.14);background:rgba(0,0,0,.02)
}
.klira-chat__label{font-size:13px;font-weight:800;margin:6px 0 8px}
.klira-chat__chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.klira-chat__chip{
  border:1px solid rgba(0,0,0,.14);background:#fff;border-radius:999px;
  padding:8px 12px;cursor:pointer;font-weight:700;font-size:13px
}
.klira-chat__chip.is-active{background:#111827;color:#fff;border-color:#111827}
.klira-chat__consent{margin-top:8px}
.klira-chat__consentlabel{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.35}
.klira-chat__consentlabel input{width:16px;height:16px;margin-top:2px}
.klira-chat__consent a{text-decoration:underline}

/* Modal */
.klira-chat-modal{
  position:fixed;inset:0;background:rgba(0,0,0,.42);
  display:none;align-items:center;justify-content:center;padding:18px;z-index:99999;
  overflow:hidden; /* prevent tiny horizontal overflow on mobile */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.klira-chat-modal.is-open{display:flex;overflow-x:hidden}

.klira-chat-modal__panel{
  width:min(860px,100%);
  max-width:100%;
  box-sizing:border-box;
  border-radius:18px;background:#fff;
  box-shadow:0 18px 60px rgba(0,0,0,.22);overflow:hidden;
  /* Keep modal size constant; scroll happens inside messages */
  display:flex;
  flex-direction:column;
  max-height:min(92vh, 920px);
  transform:translateY(12px) scale(.985);opacity:0;
  transition:transform .22s ease, opacity .22s ease;
  overscroll-behavior: contain;
}
.klira-chat-modal.is-open .klira-chat-modal__panel{transform:none;opacity:1}
.klira-chat-modal.is-closing .klira-chat-modal__panel{transform:translateY(12px) scale(.985);opacity:0}
.klira-chat-modal__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.08)
}
.klira-chat-modal__title{margin:0;font-size:16px;font-weight:800}
.klira-chat-modal__close{
  border:0;background:transparent;cursor:pointer;font-size:22px;line-height:1;
  padding:6px 10px;border-radius:10px
}
.klira-chat-modal__body{padding:14px;display:flex;flex:1 1 auto;overflow:hidden}
.klira-chat-modal__frame{
  border:1px solid rgba(0,0,0,.10);border-radius:16px;padding:14px;background:rgba(255,255,255,.92);
  flex:1 1 auto;min-height:0;max-width:100%;width:100%;
  overflow:hidden;
  touch-action: pan-y;
}



/* Hard guard: never allow modal content to exceed viewport width */
.klira-chat-modal__panel,
.klira-chat-modal__head,
.klira-chat-modal__body,
.klira-chat-modal__frame,
.klira-chat-modal__frame *{
  max-width:100%;
}

/* Make chat layout stable: fixed modal size, scroll only inside messages */
.klira-chat-modal__frame{display:flex;min-height:0}
.klira-chat-modal__frame .klira-chat{height:100%;min-height:0;flex:1 1 auto}
.klira-chat-modal__frame .klira-chat__messages{flex:1 1 auto;height:auto;min-height:0;overflow:auto}
.klira-chat-modal__frame .klira-chat__inputwrap{flex:0 0 auto}
/* Opener button (optional shortcode) */
.klira-chat-openwrap{width:100%;text-align:center;margin:0.75rem 0}
.klira-chat-openbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 18px;border-radius:999px;border:1px solid rgba(0,0,0,.12);
  background:#111827;color:#fff;font-weight:800;cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.10);}
.klira-chat-openbtn:hover{transform:translateY(-1px)}
.klira-chat-openbtn:active{transform:translateY(0)}

/* Better modal behavior on mobile/tablet */
@media (max-width:820px){
  .klira-chat-modal{padding:10px}
  .klira-chat-modal__panel{width:100%;height:min(92dvh,920px);display:flex;flex-direction:column}
  .klira-chat-modal__body{padding:10px;flex:1 1 auto;overflow:hidden}
  .klira-chat-modal__frame{height:100%;padding:10px}
  /* Use flex-based sizing instead of hard calculations */
  .klira-chat-modal__frame .klira-chat__messages{height:auto}
}
@media (max-width:520px){
  /* Let messages grow with available space */
  .klira-chat__messages{height:auto}
  .klira-chat__msg{max-width:92%}
  .klira-chat__inputwrap{flex-direction:column;align-items:stretch}
  .klira-chat__send{width:100%}
}

@media (max-width:820px){
  .klira-chat-modal{padding:10px}
  .klira-chat-modal__panel{width:100%;max-height:92vh}
}

@media (max-width:600px){
  .klira-chat-modal{padding:0}
  .klira-chat-modal__panel{width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0}
  .klira-chat-modal__body{padding:10px;flex:1 1 auto;overflow:hidden}
  .klira-chat-modal__frame{height:100%;padding:10px}
  .klira-chat-modal__frame .klira-chat__messages{height:auto}
}


/* ============================================================
   KLIRA CHAT — THEME COLOR ISOLATION (fix white text issues)
   ============================================================ */
.klira-chat, .klira-chat *{ box-sizing:border-box; }
.klira-chat{ color:#111; }
.klira-chat a{ color:inherit; }

/* Choice pills/buttons */
.klira-chat__chips button,
.klira-chat__chips .klira-chip{
  color:#111 !important;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.14) !important;
}
.klira-chat__chips button:hover,
.klira-chat__chips .klira-chip:hover{
  background:rgba(0,0,0,.04) !important;
}
.klira-chat__chips button.is-active,
.klira-chat__chips .is-active{
  background:#111827 !important;
  color:#fff !important;
  border-color:#111827 !important;
}

/* Input field */
.klira-chat input[type="text"],
.klira-chat textarea{
  color:#111 !important;
  background:#fff !important;
}
.klira-chat input::placeholder,
.klira-chat textarea::placeholder{
  color:rgba(0,0,0,.45) !important;
  opacity:1 !important;
}

/* Consent text */
.klira-chat__consent,
.klira-chat__consent label{
  color:rgba(0,0,0,.85) !important;
}

/* Messages */
.klira-chat__messages{ color:#111 !important; }
.klira-chat__msg--assistant{ color:#111 !important; background:rgba(0,0,0,.04) !important; }
.klira-chat__msg--user{ color:#fff !important; background:#111827 !important; }

/* Force any inherited 'white text' from theme to not break chips */
.klira-chat button{ color:#111; }
.klira-chat button.is-active{ color:#fff; }

/* v1.2.2 patch: ensure send button text visible */
button[data-klira-send]{ color:#fff !important; }
/* typing dots */
.klira-msg--typing{ opacity:.85; }
.klira-chat__msg--typing{ opacity:.85; }
.klira-typing-pen{ display:inline-flex; align-items:center; }
.klira-typing-pen svg{ transform-origin: 50% 50%; animation:kliraPen 1.1s infinite ease-in-out; }
.klira-typing-dots{ display:inline-flex; gap:2px; margin-left:4px; }
.klira-typing-dots span{ display:inline-block; animation:kliraDot 1.1s infinite; }
.klira-typing-dots span:nth-child(2){ animation-delay:.15s; }
.klira-typing-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes kliraDot{ 0%,60%,100%{transform:translateY(0);opacity:.35;} 30%{transform:translateY(-2px);opacity:1;} }
@keyframes kliraPen{ 0%,100%{transform:rotate(-8deg) translateY(0);opacity:.75;} 50%{transform:rotate(8deg) translateY(-1px);opacity:1;} }

/* ==========================================================
   UI4 — iOS keyboard horizontal overflow hard-stop
   (CSS only, keeps chat logic untouched)
   ========================================================== */

/* Prevent 1–3px horizontal pan on iOS when keyboard opens */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Prefer clip when supported (prevents bounce pan on iOS 16+) */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

/* Chat modal/frame: avoid 100vw pitfalls */
.klira-emc-overlay,
.klira-emc-modal,
.klira-emc-frame,
.klira-emc-panel,
.klira-emc-card,
.klira-emc-wrap,
.klira-emc-ui {
  box-sizing: border-box;
  max-width: 100%;
}

/* Ensure modal container never exceeds viewport width */
.klira-emc-overlay,
.klira-emc-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* If the chat uses a centered "frame", clamp with left/right instead of vw */
.klira-emc-frame,
.klira-emc-panel,
.klira-emc-card {
  width: auto !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Long content protection */
.klira-emc-messages,
.klira-emc-message,
.klira-emc-bubble,
.klira-emc-input,
.klira-emc-footer,
.klira-emc-actions {
  max-width: 100%;
  overflow-x: hidden;
}

.klira-emc-bubble, .klira-emc-message {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* iOS focus ring can create overflow via outer shadows — keep it inside */
.klira-emc-input:focus,
.klira-emc-input textarea:focus,
.klira-emc-input input:focus {
  box-shadow: inset 0 0 0 3px rgba(17, 24, 39, .18) !important;
  outline: none !important;
}

/* V2 safe UX: character counter + sending state */
.klira-chat__counter{
  align-self:center;
  flex:0 0 auto;
  font-size:11px;
  line-height:1;
  opacity:.48;
  padding:0 2px;
  white-space:nowrap;
}
.klira-chat__counter.is-warn{opacity:.9;font-weight:800}
.klira-chat.is-sending .klira-chat__send{opacity:.68;cursor:wait}
@media (max-width:520px){
  .klira-chat__counter{align-self:flex-end;margin-top:-4px;margin-bottom:2px}
}

/* ============================================================
   KLIRA CHAT BRAND COLORS MODAL TITLE FIX v1.3.8.2
   Keeps logic untouched. Only visual corrections.
   ============================================================ */

:root{
  --klira-brand:#204d50;
  --klira-brand-dark:#173c3f;
  --klira-mint:#b4f6ce;
  --klira-soft:#f4edea;
  --klira-text:#204d50;
}

.klira-chat-modal__head{
  background:var(--klira-brand) !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
  min-height:62px !important;
}

.klira-chat-modal__title{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  margin:0 !important;
  color:#ffffff !important;
  font-size:18px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  letter-spacing:.1px !important;
}

.klira-chat-modal__close{
  color:#ffffff !important;
  background:transparent !important;
  font-weight:900 !important;
}
.klira-chat-modal__close:hover{
  background:rgba(255,255,255,.12) !important;
}

.klira-chat-modal__frame,
.klira-chat-frame{
  background:rgba(255,255,255,.96) !important;
  border-color:rgba(32,77,80,.14) !important;
}

.klira-chat__messages{
  background:#ffffff !important;
  border-color:rgba(32,77,80,.12) !important;
}

.klira-chat__msg--assistant{
  background:var(--klira-soft) !important;
  color:#1f2933 !important;
  border:1px solid rgba(32,77,80,.10) !important;
  box-shadow:0 2px 8px rgba(32,77,80,.035) !important;
}

.klira-chat__msg--user{
  background:var(--klira-brand) !important;
  color:#ffffff !important;
  border:1px solid rgba(180,246,206,.28) !important;
  box-shadow:0 8px 18px rgba(32,77,80,.18) !important;
}

.klira-chat__chip,
.klira-chat__chips button,
.klira-chat__chips .klira-chip{
  background:#ffffff !important;
  color:var(--klira-text) !important;
  border-color:rgba(32,77,80,.18) !important;
}

.klira-chat__chip:hover,
.klira-chat__chips button:hover,
.klira-chat__chips .klira-chip:hover{
  background:var(--klira-soft) !important;
  color:var(--klira-text) !important;
  border-color:rgba(32,77,80,.25) !important;
}

.klira-chat__chip.is-active,
.klira-chat__chips button.is-active,
.klira-chat__chips .is-active{
  background:var(--klira-brand) !important;
  color:#ffffff !important;
  border-color:var(--klira-brand) !important;
}

.klira-chat__input{
  color:#204d50 !important;
  background:#ffffff !important;
  border-color:rgba(32,77,80,.18) !important;
}
.klira-chat__input:focus{
  border-color:rgba(32,77,80,.42) !important;
  box-shadow:0 0 0 4px rgba(180,246,206,.32) !important;
}

.klira-chat__send,
button[data-klira-send]{
  background:var(--klira-brand) !important;
  color:#ffffff !important;
  border:0 !important;
  box-shadow:0 10px 22px rgba(32,77,80,.18) !important;
}
.klira-chat__send:hover,
button[data-klira-send]:hover{
  background:var(--klira-brand-dark) !important;
  color:#ffffff !important;
}

.klira-chat__mic{
  background:var(--klira-brand) !important;
  color:#ffffff !important;
  border-color:var(--klira-brand) !important;
}
.klira-chat__mic:hover{
  background:var(--klira-brand-dark) !important;
}
.klira-chat__mic.is-on,
.klira-chat__miclang:active,
.klira-chat__mic:active{
  background:var(--klira-mint) !important;
  color:var(--klira-brand) !important;
  border-color:var(--klira-mint) !important;
}

.klira-chat__microcopy small,
.klira-chat__counter{
  color:rgba(32,77,80,.72) !important;
}

@media (max-width:520px){
  .klira-chat-modal__title{font-size:16px !important;}
  .klira-chat-modal__head{min-height:56px !important;}
}