/* =====================================================================
   KAROLI PIPES CHATBOT – CSS (Scoped Namespace: karoli-chat-)
   ===================================================================== */

:root {
  --karoli-chat-primary: #12326b;       /* logo navy  */
  --karoli-chat-primary-dark: #0b2150;
  --karoli-chat-accent: #032236;        /* logo orange */
  --karoli-chat-accent-dark: #032236;
  --karoli-chat-bg: #e8edf4;            /* neumorphic surface */
  --karoli-chat-light: #ffffff;         /* light shadow */
  --karoli-chat-dark: #c2cad8;          /* dark shadow  */
  --karoli-chat-text: #1f2a44;
  --karoli-chat-muted: #6b7690;
  --karoli-chat-whatsapp: #25d366;
  --karoli-chat-call: #0d6efd;
}

/* ---------- RIGHT WALL STICKY BUTTONS (DESKTOP / TABLET) ---------- */
.karoli-chat-fab {
  position: fixed;
  right: 0;
  width: 52px;
  height: 52px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 21px;
  text-decoration: none;
  cursor: pointer;
  z-index: 999990;
  box-sizing: border-box;
  border-radius: 14px 0 0 14px;
  box-shadow: -4px 5px 18px rgba(0, 0, 0, .22);
  transition: transform .3s ease, box-shadow .3s ease;
}
.karoli-chat-fab:hover { transform: translateX(-7px); color: #fff; box-shadow: -8px 8px 25px rgba(0, 0, 0, .3); }
.karoli-chat-fab i { animation: karoliChatBounce 1.8s infinite; }
.karoli-chat-fab-chat     { bottom: 115px; background: linear-gradient(135deg, var(--karoli-chat-primary), var(--karoli-chat-primary-dark)); }
.karoli-chat-fab-whatsapp { bottom: 175px; background: var(--karoli-chat-whatsapp); }
.karoli-chat-fab-call     { bottom: 235px; background: var(--karoli-chat-call); }
.karoli-chat-fab-top      { bottom: 57px; background: var(--karoli-chat-accent); opacity: 0; visibility: hidden; }
.karoli-chat-fab-top.karoli-chat-show { opacity: 1; visibility: visible; }
.karoli-chat-fab-chat.karoli-chat-hidden { display: none; }

@keyframes karoliChatBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---------- CHAT WINDOW ---------- */
.karoli-chat-window {
  position: fixed;
  right: 66px;
  bottom: 20px;
  width: 380px;
  max-width: calc(100vw - 80px);
  height: 600px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  background: var(--karoli-chat-bg);
  border-radius: 24px;
  box-shadow: 14px 14px 30px var(--karoli-chat-dark), -10px -10px 26px var(--karoli-chat-light);
  overflow: hidden;
  z-index: 999995;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  color: var(--karoli-chat-text);
  opacity: 0;
  visibility: hidden;
  transform: translateX(30px) scale(.97);
  transform-origin: bottom right;
  transition: opacity .3s cubic-bezier(0.16, 1, 0.3, 1), transform .3s cubic-bezier(0.16, 1, 0.3, 1), visibility .3s;
  outline: none;
}
.karoli-chat-window.karoli-chat-open { opacity: 1; visibility: visible; transform: none; }
.karoli-chat-window *, .karoli-chat-window *::before, .karoli-chat-window *::after { box-sizing: border-box; }

/* Header */
.karoli-chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--karoli-chat-bg);
  box-shadow: 0 6px 14px -6px var(--karoli-chat-dark);
  border-bottom: 3px solid var(--karoli-chat-accent);
  flex: 0 0 auto; z-index: 2;
}
.karoli-chat-logo { display: flex; align-items: center; min-width: 0; text-decoration: none; }
.karoli-chat-logo img { height: 44px; width: auto; max-width: 190px; object-fit: contain; border-radius: 8px; display: block; }
.karoli-chat-header-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.karoli-chat-icon-btn {
  width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--karoli-chat-bg); color: var(--karoli-chat-primary); font-size: 15px;
  box-shadow: 4px 4px 9px var(--karoli-chat-dark), -4px -4px 9px var(--karoli-chat-light);
  transition: box-shadow .2s, color .2s;
  display: inline-flex; align-items: center; justify-content: center;
}
.karoli-chat-icon-btn:hover { color: var(--karoli-chat-accent); }
.karoli-chat-icon-btn:active { box-shadow: inset 3px 3px 6px var(--karoli-chat-dark), inset -3px -3px 6px var(--karoli-chat-light); }
.karoli-chat-icon-btn.karoli-chat-spin i { animation: karoliChatSpin .6s linear; }
@keyframes karoliChatSpin { to { transform: rotate(360deg); } }

/* Body */
.karoli-chat-body {
  flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 16px 14px 10px;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
}
.karoli-chat-body::-webkit-scrollbar { width: 6px; }
.karoli-chat-body::-webkit-scrollbar-thumb { background: var(--karoli-chat-dark); border-radius: 6px; }

.karoli-chat-msg { display: flex; margin-bottom: 12px; animation: karoliChatIn .3s ease; }
.karoli-chat-msg-user { justify-content: flex-end; }
@keyframes karoliChatIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.karoli-chat-bubble {
  max-width: 85%; padding: 10px 14px; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere;
  border-radius: 16px 16px 16px 4px; background: var(--karoli-chat-bg);
  box-shadow: 5px 5px 11px var(--karoli-chat-dark), -5px -5px 11px var(--karoli-chat-light);
}
.karoli-chat-bubble a { color: var(--karoli-chat-accent-dark); font-weight: 600; text-decoration: none; }
.karoli-chat-msg-user .karoli-chat-bubble {
  border-radius: 16px 16px 4px 16px; color: #fff;
  background: linear-gradient(135deg, var(--karoli-chat-primary), var(--karoli-chat-primary-dark));
  box-shadow: 4px 4px 10px var(--karoli-chat-dark), -3px -3px 8px var(--karoli-chat-light);
}

.karoli-chat-typing { display: flex; gap: 5px; padding: 13px 16px; align-items: center; }
.karoli-chat-typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--karoli-chat-muted); animation: karoliChatDot 1s infinite; }
.karoli-chat-typing span:nth-child(2) { animation-delay: .15s; }
.karoli-chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes karoliChatDot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

/* Quick buttons */
.karoli-chat-quick-row { display: flex; flex-wrap: wrap; gap: 9px; margin: 2px 0 14px; }
.karoli-chat-quick-btn {
  border: 0; cursor: pointer; padding: 8px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
  color: var(--karoli-chat-primary); background: var(--karoli-chat-bg); text-decoration: none; font-family: inherit;
  box-shadow: 4px 4px 9px var(--karoli-chat-dark), -4px -4px 9px var(--karoli-chat-light);
  transition: box-shadow .2s, color .2s;
}
.karoli-chat-quick-btn:hover { color: var(--karoli-chat-accent-dark); }
.karoli-chat-quick-btn:active { box-shadow: inset 3px 3px 7px var(--karoli-chat-dark), inset -3px -3px 7px var(--karoli-chat-light); }

/* ---------- ENQUIRY FORM ---------- */
.karoli-chat-form-card {
  margin: 4px 0 12px; padding: 16px 14px; border-radius: 18px; background: var(--karoli-chat-bg);
  box-shadow: 6px 6px 14px var(--karoli-chat-dark), -6px -6px 14px var(--karoli-chat-light);
  animation: karoliChatIn .3s ease;
}
.karoli-chat-form-title { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--karoli-chat-primary); }
.karoli-chat-form-title i { color: var(--karoli-chat-accent); margin-right: 6px; }
.karoli-chat-field { margin-bottom: 11px; }
.karoli-chat-field input, .karoli-chat-field select, .karoli-chat-field textarea {
  width: 100%; border: 0; outline: none; padding: 11px 14px; font-size: 14px; font-family: inherit;
  color: var(--karoli-chat-text); background: var(--karoli-chat-bg); border-radius: 12px;
  box-shadow: inset 4px 4px 8px var(--karoli-chat-dark), inset -4px -4px 8px var(--karoli-chat-light);
  transition: box-shadow .2s;
}
.karoli-chat-field select { cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.36%22%20height%3D%22292.36%22%3E%3Cpath%20fill%3D%22%2312326b%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 10px; padding-right: 35px; }
.karoli-chat-field textarea { resize: none; min-height: 72px; }
.karoli-chat-field input:focus, .karoli-chat-field select:focus, .karoli-chat-field textarea:focus { box-shadow: inset 4px 4px 8px var(--karoli-chat-dark), inset -4px -4px 8px var(--karoli-chat-light), 0 0 0 2px rgba(232, 115, 26, .45); }
.karoli-chat-field.karoli-chat-invalid input, .karoli-chat-field.karoli-chat-invalid select, .karoli-chat-field.karoli-chat-invalid textarea { box-shadow: inset 4px 4px 8px var(--karoli-chat-dark), inset -4px -4px 8px var(--karoli-chat-light), 0 0 0 2px #d93025; }
.karoli-chat-error { display: none; margin-top: 4px; font-size: 12px; color: #d93025; }
.karoli-chat-invalid .karoli-chat-error, .karoli-chat-error.karoli-chat-show { display: block; }
.karoli-chat-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.karoli-chat-turnstile { margin: 4px 0 11px; min-height: 65px; max-width: 100%; overflow: hidden; display: flex; justify-content: center; }
.karoli-chat-submit {
  width: 100%; border: 0; cursor: pointer; padding: 12px; border-radius: 14px; font-size: 15px; font-weight: 700; font-family: inherit; color: #fff;
  background: linear-gradient(135deg, var(--karoli-chat-accent), var(--karoli-chat-accent-dark));
  box-shadow: 5px 5px 11px var(--karoli-chat-dark), -4px -4px 10px var(--karoli-chat-light);
  transition: transform .15s, box-shadow .15s;
}
.karoli-chat-submit:active { transform: scale(.98); box-shadow: inset 3px 3px 7px rgba(0, 0, 0, .25); }
.karoli-chat-submit[disabled] { opacity: .65; cursor: not-allowed; }
.karoli-chat-form-msg { display: none; margin-bottom: 10px; padding: 8px 10px; border-radius: 10px; font-size: 13px; background: #fdecea; color: #a50e0e; }
.karoli-chat-form-msg.karoli-chat-show { display: block; }

/* ---------- THANK YOU ---------- */
.karoli-chat-thanks {
  margin: 4px 0 12px; padding: 26px 18px; text-align: center; border-radius: 20px; color: #fff;
  background: linear-gradient(145deg, var(--karoli-chat-primary), var(--karoli-chat-primary-dark));
  box-shadow: 8px 8px 18px var(--karoli-chat-dark), -6px -6px 14px var(--karoli-chat-light);
  animation: karoliChatPop .5s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes karoliChatPop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.karoli-chat-thanks-icon {
  width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: #fff; background: var(--karoli-chat-accent);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .12), 0 0 0 16px rgba(255, 255, 255, .06);
}
.karoli-chat-thanks h4 { margin: 0 0 8px; font-size: 19px; color: #fff; }
.karoli-chat-thanks p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.karoli-chat-thanks a { color: #ffd2a8; font-weight: 600; text-decoration: none; }
.karoli-chat-thanks .karoli-chat-quick-btn { margin-top: 12px; background: #fff; }

/* Composer */
.karoli-chat-composer {
  display: flex; gap: 10px; align-items: center; padding: 12px 14px; flex: 0 0 auto; background: var(--karoli-chat-bg);
  box-shadow: 0 -6px 14px -8px var(--karoli-chat-dark);
}
.karoli-chat-composer input {
  flex: 1; min-width: 0; border: 0; outline: none; padding: 11px 16px; font-size: 14px; font-family: inherit; color: var(--karoli-chat-text);
  background: var(--karoli-chat-bg); border-radius: 22px;
  box-shadow: inset 4px 4px 8px var(--karoli-chat-dark), inset -4px -4px 8px var(--karoli-chat-light);
}
.karoli-chat-send {
  flex: 0 0 42px; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer; color: #fff; font-size: 15px;
  background: linear-gradient(135deg, var(--karoli-chat-accent), var(--karoli-chat-accent-dark));
  box-shadow: 4px 4px 9px var(--karoli-chat-dark), -3px -3px 8px var(--karoli-chat-light);
  display: inline-flex; align-items: center; justify-content: center;
}
.karoli-chat-send:active { box-shadow: inset 3px 3px 6px rgba(0, 0, 0, .3); }

/* ---------- MOBILE BOTTOM NAVBAR ---------- */
.karoli-chat-nav { display: none; }

/* =====================================================================
   RESPONSIVE & MOBILE OVERRIDES (BOTTOM-TO-TOP SLIDE REVEAL)
   ===================================================================== */
@media (max-width: 767px) {
 .karoli-chat-fab-call,
 .karoli-chat-fab-whatsapp,
 .karoli-chat-fab-chat
 { display: none !important; }
  body.karoli-chat-has-nav { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important; }
  
  .karoli-chat-fab-top {
  bottom: 75px;
  }

  .karoli-chat-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; max-width: 100vw !important;
    height: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 4px env(safe-area-inset-bottom, 0px) !important;
    margin: 0 !important;
    align-items: stretch !important; justify-content: space-between !important;
    overflow: visible !important;
    touch-action: pan-y;
    overscroll-behavior-x: none;
    background: var(--karoli-chat-bg) !important;
    z-index: 2147483000 !important;
    box-shadow: 0 -6px 18px rgba(18, 50, 107, .18) !important;
    border-top: 2px solid var(--karoli-chat-accent) !important;
    box-sizing: border-box !important;
    transform: none !important;
    font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  }

  .karoli-chat-nav .karoli-chat-nav-item {
    display: flex !important; flex: 1 1 0 !important; min-width: 0 !important;
    flex-direction: column !important; align-items: center !important; justify-content: center !important;
    gap: 2px !important; padding: 4px 0 !important; margin: 0 !important;
    color: var(--karoli-chat-primary) !important; text-decoration: none !important;
    font-size: 10px !important; line-height: 1.1 !important; font-weight: 600 !important;
    background: transparent !important; border: 0 !important;
    -webkit-tap-highlight-color: transparent; transition: color .2s;
  }

  .karoli-chat-nav .karoli-chat-nav-svg {
    display: block !important; width: 22px !important; height: 22px !important; fill: currentColor !important; flex: 0 0 auto;
  }

  .karoli-chat-nav .karoli-chat-nav-item span {
    display: block !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  }

  .karoli-chat-nav .karoli-chat-nav-item:active { color: var(--karoli-chat-accent) !important; }

  .karoli-chat-nav .karoli-chat-nav-chat { position: relative !important; overflow: visible !important; }
  .karoli-chat-nav .karoli-chat-nav-chat .karoli-chat-nav-svg {
    box-sizing: content-box !important; width: 22px !important; height: 22px !important; padding: 11px !important;
    margin-top: -24px !important; border-radius: 50% !important; color: #fff !important;
    background: linear-gradient(135deg, var(--karoli-chat-accent), var(--karoli-chat-accent-dark)) !important;
    box-shadow: 4px 4px 10px var(--karoli-chat-dark), -3px -3px 8px #fff, 0 0 0 4px var(--karoli-chat-bg) !important;
  }

  /* Chat window: Starts hidden down below and slides up from bottom to top */
  .karoli-chat-window {
    left: 8px !important; 
    right: 8px !important;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important; 
    max-width: none !important;
    height: calc(100vh - 85px) !important;
    height: calc(100dvh - 85px) !important;
    max-height: 640px !important; 
    border-radius: 20px 20px 0 0 !important;
    transform-origin: bottom center !important;
    transform: translateY(110%) scale(1) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, visibility 0.3s ease !important;
  }

  .karoli-chat-window.karoli-chat-open {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .karoli-chat-logo img { height: 38px; max-width: 150px; }
  .karoli-chat-composer input, .karoli-chat-field select, .karoli-chat-field input { font-size: 16px; } /* Prevents iOS auto-zoom */
}

@media (max-width: 360px) {
  .karoli-chat-nav .karoli-chat-nav-item { font-size: 9px !important; }
  .karoli-chat-bubble { max-width: 92%; }
  .karoli-chat-logo img { max-width: 120px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .karoli-chat-window { width: 360px; }
}

@media (max-height: 520px) and (min-width: 768px) {
  .karoli-chat-window { height: calc(100vh - 30px); bottom: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .karoli-chat-fab i, .karoli-chat-msg, .karoli-chat-thanks { animation: none; }
}

/* ---------- FIXED PLACEHOLDERS & INPUT TEXT ---------- */
.karoli-chat-field input, 
.karoli-chat-field select, 
.karoli-chat-field textarea,
.karoli-chat-composer input {
  width: 100%; 
  border: 0; 
  outline: none; 
  padding: 11px 14px; 
  font-size: 14px; 
  font-family: inherit;
  color: var(--karoli-chat-text) !important; 
  background: var(--karoli-chat-bg); 
  border-radius: 12px;
  box-shadow: inset 4px 4px 8px var(--karoli-chat-dark), inset -4px -4px 8px var(--karoli-chat-light);
  transition: box-shadow .2s;
}

/* Explicitly force placeholders to be visible with proper muted contrast */
.karoli-chat-field input::placeholder,
.karoli-chat-field textarea::placeholder,
.karoli-chat-composer input::placeholder {
  color: var(--karoli-chat-muted) !important;
  opacity: 1 !important;
}

.karoli-chat-field select {
  color: var(--karoli-chat-text);
  cursor: pointer; 
  appearance: none; 
  -webkit-appearance: none; 
  -moz-appearance: none; 
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.36%22%20height%3D%22292.36%22%3E%3Cpath%20fill%3D%22%2312326b%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E"); 
  background-repeat: no-repeat; 
  background-position: right 14px center; 
  background-size: 10px; 
  padding-right: 35px;
}

.karoli-chat-field textarea { resize: none; min-height: 72px; }

.karoli-chat-field input:focus, 
.karoli-chat-field select:focus, 
.karoli-chat-field textarea:focus { 
  box-shadow: inset 4px 4px 8px var(--karoli-chat-dark), inset -4px -4px 8px var(--karoli-chat-light), 0 0 0 2px rgba(232, 115, 26, .45); 
}

/* ---------- FIXED CHAT SCROLLING ---------- */
.karoli-chat-body {
  flex: 1 1 auto; 
  overflow-y: auto !important; 
  overflow-x: hidden; 
  padding: 16px 14px 10px;
  scroll-behavior: smooth; 
  -webkit-overflow-scrolling: touch;
}

.karoli-chat-form-card {
  margin: 4px 0 12px; 
  padding: 16px 14px; 
  border-radius: 18px; 
  background: var(--karoli-chat-bg);
  box-shadow: 6px 6px 14px var(--karoli-chat-dark), -6px -6px 14px var(--karoli-chat-light);
  animation: karoliChatIn .3s ease;
  max-height: calc(100% - 20px);
  overflow-y: visible; /* Allows inner elements like Turnstile to render fully without clipping */
}