/* ============================================================
   TIRTH SAHAYAK — Chatbot Widget Styles
   Floating devotee concierge, saffron-gold theme
   ============================================================ */

/* --- Trigger Button ---------------------------------------- */
#ts-trigger {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6B00 0%, #E55A00 100%);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(255,107,0,0.45), 0 2px 8px rgba(44,24,16,0.18);
  z-index: 9999;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s cubic-bezier(0.4,0,0.2,1);
  -webkit-tap-highlight-color: transparent;
}
#ts-trigger:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 8px 32px rgba(255,107,0,0.55), 0 4px 12px rgba(44,24,16,0.2); }
#ts-trigger:active { transform: scale(0.96); }

#ts-trigger .ts-trigger-om { font-size:1.65rem; color:#fff; line-height:1; transition:opacity 0.2s; }
#ts-trigger .ts-trigger-close { font-size:1.35rem; color:#fff; line-height:1; display:none; }
#ts-trigger.ts-open .ts-trigger-om { display:none; }
#ts-trigger.ts-open .ts-trigger-close { display:block; }

#ts-trigger::before {
  content:''; position:absolute;
  top:50%; left:50%;
  width:100%; height:100%;
  transform:translate(-50%,-50%) scale(1);
  border-radius:50%;
  border:2px solid rgba(255,107,0,0.4);
  pointer-events:none;
  animation: ts-pulse 2.4s ease-out infinite;
}
@keyframes ts-pulse {
  0%   { transform:translate(-50%,-50%) scale(1);    opacity:0.7; }
  70%  { transform:translate(-50%,-50%) scale(1.45); opacity:0; }
  100% { transform:translate(-50%,-50%) scale(1.45); opacity:0; }
}
#ts-trigger.ts-open::before { animation:none; opacity:0; }

#ts-badge {
  position:fixed; bottom:100px; right:28px;
  background:#fff; color:#2C1810;
  font-size:0.72rem; font-family:'Inter',sans-serif; font-weight:600;
  padding:0.35rem 0.75rem; border-radius:9999px;
  box-shadow:0 2px 12px rgba(44,24,16,0.12);
  white-space:nowrap; z-index:9998;
  animation: ts-badge-in 0.4s ease 1.8s both, ts-badge-out 0.4s ease 7s forwards;
  pointer-events:none;
}
#ts-badge::after { content:''; position:absolute; bottom:-6px; right:24px; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid #fff; }
@keyframes ts-badge-in  { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }
@keyframes ts-badge-out { to{opacity:0;pointer-events:none;} }

/* --- Chat Window ------------------------------------------- */
#ts-window {
  position:fixed; bottom:104px; right:28px;
  width:380px; max-height:580px;
  background:#FFFAF4; border-radius:20px;
  box-shadow:0 12px 50px rgba(44,24,16,0.18), 0 2px 12px rgba(255,107,0,0.08);
  display:flex; flex-direction:column; overflow:hidden;
  z-index:9998; border:1px solid rgba(240,224,208,0.8);
  transform:scale(0.92) translateY(12px); opacity:0; pointer-events:none;
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.28s cubic-bezier(0.4,0,0.2,1);
  transform-origin:bottom right;
}
#ts-window.ts-visible { transform:scale(1) translateY(0); opacity:1; pointer-events:all; }

/* --- Header ----------------------------------------------- */
#ts-header {
  background:linear-gradient(135deg,#FF6B00 0%,#D4A853 100%);
  padding:0.85rem 1.1rem; display:flex; align-items:center; gap:0.7rem; flex-shrink:0;
}
.ts-avatar { width:40px;height:40px;background:rgba(255,255,255,0.22);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;border:1.5px solid rgba(255,255,255,0.35); }
.ts-header-info { flex:1; min-width:0; }
.ts-header-name { font-family:'Cinzel','Georgia',serif;font-size:0.92rem;font-weight:700;color:#fff;letter-spacing:0.02em;line-height:1.2; }
.ts-header-status { font-size:0.72rem;color:rgba(255,255,255,0.88);display:flex;align-items:center;gap:0.35rem;margin-top:0.15rem; }
.ts-status-dot { width:7px;height:7px;background:#7FE87F;border-radius:50%;animation:ts-blink 2s ease-in-out infinite; }
@keyframes ts-blink { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
.ts-header-actions { display:flex; gap:0.4rem; }
.ts-header-btn { background:rgba(255,255,255,0.18);border:none;border-radius:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.95rem;cursor:pointer;transition:background 0.18s;-webkit-tap-highlight-color:transparent; }
.ts-header-btn:hover { background:rgba(255,255,255,0.28); }

/* --- Messages --------------------------------------------- */
#ts-messages { flex:1; overflow-y:auto; padding:1rem 0.9rem; display:flex; flex-direction:column; gap:0.75rem; scroll-behavior:smooth; }
#ts-messages::-webkit-scrollbar { width:4px; }
#ts-messages::-webkit-scrollbar-thumb { background:#F0D0B0; border-radius:2px; }

.ts-msg { display:flex; align-items:flex-end; gap:0.5rem; animation:ts-msg-in 0.22s ease both; max-width:100%; }
@keyframes ts-msg-in { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
.ts-msg.ts-bot { flex-direction:row; }
.ts-msg.ts-user { flex-direction:row-reverse; }

.ts-msg-icon { width:28px;height:28px;background:linear-gradient(135deg,#FF6B00,#D4A853);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.85rem;flex-shrink:0;align-self:flex-end; }

.ts-bubble { max-width:82%;padding:0.65rem 0.9rem;border-radius:14px;font-size:0.82rem;line-height:1.55;font-family:'Inter',sans-serif;color:#2C1810;word-break:break-word; }
.ts-msg.ts-bot  .ts-bubble { background:#fff;border-bottom-left-radius:4px;box-shadow:0 1px 6px rgba(44,24,16,0.07);border:1px solid rgba(240,224,208,0.7); }
.ts-msg.ts-user .ts-bubble { background:linear-gradient(135deg,#FF6B00 0%,#E55A00 100%);color:#fff;border-bottom-right-radius:4px;box-shadow:0 2px 10px rgba(255,107,0,0.22); }
.ts-bubble a { color:#E55A00;text-decoration:underline;font-weight:600; }
.ts-msg.ts-user .ts-bubble a { color:rgba(255,255,255,0.9); }

/* --- Quick Buttons ---------------------------------------- */
.ts-quick-wrap { display:flex;flex-direction:column;gap:0.45rem;margin-top:0.5rem;animation:ts-msg-in 0.28s ease 0.08s both; }
.ts-qbtn { background:#fff;border:1.5px solid rgba(255,107,0,0.3);border-radius:10px;padding:0.55rem 0.9rem;font-size:0.8rem;font-family:'Inter',sans-serif;font-weight:600;color:#E55A00;cursor:pointer;text-align:left;transition:background 0.18s,border-color 0.18s,transform 0.15s;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;gap:0.5rem; }
.ts-qbtn:hover { background:#FFF0E2;border-color:#FF6B00;transform:translateX(2px); }
.ts-qbtn:active { transform:scale(0.97); }
.ts-qbtn .ts-qbtn-emoji { font-size:1rem;flex-shrink:0; }

/* --- Typing indicator ------------------------------------- */
.ts-typing { display:flex;align-items:center;gap:4px;padding:0.6rem 0.85rem;background:#fff;border-radius:14px;border-bottom-left-radius:4px;width:fit-content;box-shadow:0 1px 6px rgba(44,24,16,0.07);border:1px solid rgba(240,224,208,0.7); }
.ts-typing span { width:7px;height:7px;background:#D4A853;border-radius:50%;animation:ts-dot 1.2s ease-in-out infinite; }
.ts-typing span:nth-child(2){animation-delay:0.18s;} .ts-typing span:nth-child(3){animation-delay:0.36s;}
@keyframes ts-dot { 0%,60%,100%{transform:translateY(0);} 30%{transform:translateY(-5px);} }

/* --- Lead Form -------------------------------------------- */
.ts-lead-form { background:#fff;border-radius:14px;padding:0.85rem;border:1.5px solid rgba(255,107,0,0.2);box-shadow:0 2px 12px rgba(44,24,16,0.07);display:flex;flex-direction:column;gap:0.55rem;max-width:90%;animation:ts-msg-in 0.25s ease both; }
.ts-lead-form label { font-size:0.73rem;font-weight:600;color:#5E4E42;font-family:'Inter',sans-serif;margin-bottom:-0.3rem; }
.ts-lead-input,.ts-lead-textarea { width:100%;border:1.5px solid #F0E0D0;border-radius:8px;padding:0.45rem 0.65rem;font-size:0.8rem;font-family:'Inter',sans-serif;color:#2C1810;background:#FFFAF4;outline:none;transition:border-color 0.18s;resize:none; }
.ts-lead-input:focus,.ts-lead-textarea:focus { border-color:#FF6B00; }
.ts-lead-textarea { min-height:60px; }
.ts-lead-submit { background:linear-gradient(135deg,#FF6B00,#E55A00);color:#fff;border:none;border-radius:9px;padding:0.55rem 1rem;font-size:0.8rem;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;transition:opacity 0.18s,transform 0.15s; }
.ts-lead-submit:hover { opacity:0.9;transform:translateY(-1px); }
.ts-lead-submit:active { transform:scale(0.97); }
.ts-lead-note { font-size:0.68rem;color:#6E5D52;font-family:'Inter',sans-serif;text-align:center; }

/* --- Input Row -------------------------------------------- */
#ts-input-row { display:flex;align-items:center;gap:0.5rem;padding:0.7rem 0.85rem;border-top:1px solid rgba(240,224,208,0.8);background:#fff;flex-shrink:0; }
#ts-input { flex:1;border:1.5px solid #F0E0D0;border-radius:9999px;padding:0.5rem 0.9rem;font-size:0.8rem;font-family:'Inter',sans-serif;color:#2C1810;background:#FFFAF4;outline:none;transition:border-color 0.18s;min-width:0; }
#ts-input:focus { border-color:#FF6B00; }
#ts-input::placeholder { color:#9E8E82; }
#ts-send { width:36px;height:36px;background:linear-gradient(135deg,#FF6B00,#E55A00);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:#fff;font-size:1rem;transition:transform 0.15s,box-shadow 0.18s;-webkit-tap-highlight-color:transparent; }
#ts-send:hover { transform:scale(1.08);box-shadow:0 2px 10px rgba(255,107,0,0.35); }
#ts-send:active { transform:scale(0.94); }

/* --- Misc ------------------------------------------------- */
.ts-home-btn { background:none;border:1.5px solid rgba(255,107,0,0.4);border-radius:10px;color:#E55A00;font-size:0.82rem;font-family:'Inter',sans-serif;font-weight:600;padding:0.5rem 1rem;cursor:pointer;display:inline-flex;align-items:center;gap:0.4rem;margin-top:0.5rem;transition:background 0.18s;-webkit-tap-highlight-color:transparent; }
.ts-home-btn:hover { background:#FFF0E2; }

.ts-divider { text-align:center;font-size:0.67rem;color:#9E8E82;font-family:'Inter',sans-serif;display:flex;align-items:center;gap:0.5rem; }
.ts-divider::before,.ts-divider::after { content:'';flex:1;height:1px;background:rgba(240,224,208,0.9); }

.ts-success-msg { background:linear-gradient(135deg,rgba(255,107,0,0.1),rgba(212,168,83,0.12));border:1.5px solid rgba(255,107,0,0.25);border-radius:12px;padding:0.75rem 0.9rem;font-size:0.81rem;color:#2C1810;font-family:'Inter',sans-serif;text-align:center;line-height:1.5; }

/* --- Mobile ----------------------------------------------- */
@media (max-width: 480px) {
  #ts-trigger { bottom:18px;right:18px;width:52px;height:52px; }
  #ts-badge { bottom:82px;right:18px; }
  /* Leave ~10% gap at the top so user can see they are still on the page */
  #ts-window {
    bottom:0; right:0; left:0;
    width:100%;
    max-height:88dvh;     /* cap at 88% — leaves ~12% gap at top */
    border-radius:20px 20px 0 0;
    transform:translateY(100%);
  }
  #ts-window.ts-visible { transform:translateY(0); }
  #ts-messages { padding:0.85rem 0.75rem; }
  /* Hide the OM trigger button when chat is open on mobile
     so it does not overlap the input bar */
  #ts-root:has(#ts-window.ts-visible) #ts-trigger {
    opacity:0; pointer-events:none;
  }
  /* Also hide the sticky Home button under the chat on mobile */
  .tc-sticky-home { display:none !important; }
  /* Larger close/minimize button on mobile for easy tap */
  .ts-header-btn { width:34px; height:34px; font-size:1.1rem; }
  #ts-header { padding:0.7rem 0.85rem; }
  #ts-input-row { padding:0.55rem 0.7rem; }
}
@media (max-width: 360px) { .ts-bubble{font-size:0.78rem;} .ts-qbtn{font-size:0.76rem;} }