/* ── SDI Dharma Chatbot Widget v2.5 ── */

/* ─────────────────────────────────────────────────────────────
   Design tokens
───────────────────────────────────────────────────────────── */
:root {
  --sdi-primary:     #8B4513;
  --sdi-primary-dark:#6b3410;
  --sdi-accent:      #c0873f;
  --sdi-bg:          #fffdf8;
  --sdi-header-bg:   #2c1a0e;
  --sdi-user-bg:     #c0873f;
  --sdi-bot-bg:      #f5ede0;
  --sdi-text:        #2c1a0e;
  --sdi-radius:      16px;
  --sdi-shadow:      0 8px 32px rgba(44,26,14,0.18);
}

/* ─────────────────────────────────────────────────────────────
   Widget root — fixed floating layer
   !important on position/z-index/display prevents themes from
   collapsing or hiding the container.
───────────────────────────────────────────────────────────── */
#sdi-chat-widget {
  all: initial !important;           /* hard reset — inherit nothing from theme */
  position:   fixed    !important;
  bottom:     24px     !important;
  right:      24px     !important;
  z-index:    2147483647 !important; /* maximum possible z-index */
  font-family:'Georgia', Georgia, serif !important;
  box-sizing: border-box !important;
  display:    block    !important;
}

/* ─────────────────────────────────────────────────────────────
   Toggle button
   Themes commonly reset: font-size→0, border→none, padding→0,
   background→transparent, color→inherit.  We override all of them.
───────────────────────────────────────────────────────────── */
#sdi-chat-toggle {
  all: unset !important;               /* strip every inherited/reset property */
  box-sizing:       border-box !important;
  width:            60px       !important;
  height:           60px       !important;
  border-radius:    50%        !important;
  background:       var(--sdi-header-bg) !important;
  border:           3px solid var(--sdi-accent) !important;
  cursor:           pointer    !important;
  box-shadow:       var(--sdi-shadow) !important;
  display:          flex       !important;
  align-items:      center     !important;
  justify-content:  center     !important;
  transition:       transform 0.2s, background 0.2s !important;
  color:            #fff       !important;
  outline:          none       !important;
  padding:          0          !important;
  margin:           0          !important;
  line-height:      1          !important;
  overflow:         visible    !important;
  position:         relative   !important;
}
#sdi-chat-toggle:hover {
  transform:  scale(1.08)           !important;
  background: var(--sdi-primary)    !important;
}
#sdi-chat-toggle:focus-visible {
  outline: 3px solid var(--sdi-accent) !important;
  outline-offset: 2px !important;
}

/* ── SVG icon inside toggle ── */
#sdi-chat-toggle .sdi-icon-om,
#sdi-chat-toggle .sdi-icon-close {
  display:        flex        !important;
  align-items:    center      !important;
  justify-content:center      !important;
  width:          100%        !important;
  height:         100%        !important;
  position:       absolute    !important;
  top:            0           !important;
  left:           0           !important;
  transition:     opacity 0.15s, transform 0.15s !important;
  pointer-events: none        !important;
}
#sdi-chat-toggle .sdi-icon-om {
  opacity:   1    !important;
  transform: scale(1) rotate(0deg) !important;
}
#sdi-chat-toggle .sdi-icon-close {
  opacity:   0    !important;
  transform: scale(0.6) rotate(-90deg) !important;
}
#sdi-chat-widget.open #sdi-chat-toggle .sdi-icon-om {
  opacity:   0    !important;
  transform: scale(0.6) rotate(90deg) !important;
}
#sdi-chat-widget.open #sdi-chat-toggle .sdi-icon-close {
  opacity:   1    !important;
  transform: scale(1) rotate(0deg) !important;
}

/* SVG elements inside toggle */
#sdi-chat-toggle svg {
  width:   28px  !important;
  height:  28px  !important;
  display: block !important;
  fill:    currentColor !important;
  overflow:visible !important;
}
#sdi-chat-toggle .sdi-icon-close svg {
  width:  18px   !important;
  height: 18px   !important;
}

/* ─────────────────────────────────────────────────────────────
   Chat window
───────────────────────────────────────────────────────────── */
#sdi-chat-window {
  display:        none            !important;
  flex-direction: column          !important;
  position:       absolute        !important;
  bottom:         72px            !important;
  right:          0               !important;
  width:          360px           !important;
  max-width:      calc(100vw - 32px) !important;
  height:         520px           !important;
  max-height:     calc(100vh - 100px) !important;
  background:     var(--sdi-bg)   !important;
  border-radius:  var(--sdi-radius) !important;
  box-shadow:     var(--sdi-shadow) !important;
  overflow:       hidden          !important;
  border:         1px solid rgba(192,135,63,0.3) !important;
  animation:      sdiSlideIn 0.25s ease !important;
  box-sizing:     border-box      !important;
  font-family:    'Georgia', Georgia, serif !important;
}
#sdi-chat-widget.open #sdi-chat-window {
  display: flex !important;
}

@keyframes sdiSlideIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─────────────────────────────────────────────────────────────
   Header
───────────────────────────────────────────────────────────── */
#sdi-chat-header {
  display:     flex        !important;
  align-items: center      !important;
  gap:         10px        !important;
  background:  var(--sdi-header-bg) !important;
  color:       #fff        !important;
  padding:     14px 16px   !important;
  flex-shrink: 0           !important;
  box-sizing:  border-box  !important;
}
#sdi-chat-header .sdi-header-icon {
  display:     flex        !important;
  align-items: center      !important;
  flex-shrink: 0           !important;
  font-size:   0           !important;  /* neutralise any inherited font-size */
}
#sdi-chat-header .sdi-header-icon svg {
  width:    26px !important;
  height:   26px !important;
  display:  block !important;
  fill:     var(--sdi-accent) !important;
  overflow: visible !important;
}
.sdi-header-text {
  flex:        1     !important;
  line-height: 1.3   !important;
  min-width:   0     !important;
}
.sdi-header-text strong {
  display:   block   !important;
  font-size: 15px    !important;
  color:     #f5c97a !important;
  font-weight: bold  !important;
}
.sdi-header-text small {
  font-size:  11px     !important;
  color:      #c9a87c  !important;
  font-style: italic   !important;
  display:    block    !important;
}
#sdi-chat-close {
  all:         unset     !important;
  color:       #c9a87c   !important;
  font-size:   18px      !important;
  cursor:      pointer   !important;
  padding:     4px       !important;
  line-height: 1         !important;
  flex-shrink: 0         !important;
  border-radius: 4px     !important;
  display:     flex      !important;
  align-items: center    !important;
  justify-content: center !important;
}
#sdi-chat-close:hover  { color: #fff !important; }
#sdi-chat-close:focus-visible { outline: 2px solid var(--sdi-accent) !important; }

/* ─────────────────────────────────────────────────────────────
   Messages area
───────────────────────────────────────────────────────────── */
#sdi-chat-messages {
  flex:            1           !important;
  overflow-y:      auto        !important;
  padding:         16px        !important;
  display:         flex        !important;
  flex-direction:  column      !important;
  gap:             12px        !important;
  scroll-behavior: smooth      !important;
  box-sizing:      border-box  !important;
}
#sdi-chat-messages::-webkit-scrollbar       { width: 4px; }
#sdi-chat-messages::-webkit-scrollbar-thumb { background: rgba(192,135,63,0.3); border-radius: 2px; }

/* ─────────────────────────────────────────────────────────────
   Message bubbles
───────────────────────────────────────────────────────────── */
.sdi-msg {
  max-width:   86%       !important;
  padding:     10px 14px !important;
  border-radius: 12px   !important;
  font-size:   14px      !important;
  line-height: 1.6       !important;
  animation:   sdiFadeIn 0.2s ease !important;
  box-sizing:  border-box !important;
  word-break:  break-word !important;
  font-family: 'Georgia', Georgia, serif !important;
}
@keyframes sdiFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.sdi-msg-bot {
  background:            var(--sdi-bot-bg) !important;
  color:                 var(--sdi-text)   !important;
  border-bottom-left-radius: 4px          !important;
  align-self:            flex-start        !important;
  border-left:           3px solid var(--sdi-accent) !important;
}
.sdi-msg-user {
  background:             var(--sdi-user-bg) !important;
  color:                  #fff               !important;
  border-bottom-right-radius: 4px            !important;
  align-self:             flex-end           !important;
}

/* Links inside messages from the AI */
.sdi-msg-body a {
  color: var(--sdi-primary) !important;
  text-decoration: underline !important;
}

/* Related article links */
.sdi-related {
  margin-top:  10px  !important;
  padding-top:  8px  !important;
  border-top:   1px solid rgba(192,135,63,0.3) !important;
}
.sdi-related p {
  margin:     0 0 5px !important;
  font-size:  12px    !important;
  color:      #7a4f1e !important;
  font-weight:bold    !important;
}
.sdi-related a {
  display:         block   !important;
  font-size:       12px    !important;
  color:           var(--sdi-primary) !important;
  text-decoration: none    !important;
  padding:         3px 0   !important;
}
.sdi-related a:hover {
  color:           var(--sdi-accent) !important;
  text-decoration: underline !important;
}

/* ─────────────────────────────────────────────────────────────
   Typing indicator
───────────────────────────────────────────────────────────── */
.sdi-typing {
  display:         flex       !important;
  align-items:     center     !important;
  gap:             4px        !important;
  padding:         12px 14px  !important;
  background:      var(--sdi-bot-bg) !important;
  border-radius:   12px       !important;
  border-bottom-left-radius: 4px !important;
  border-left:     3px solid var(--sdi-accent) !important;
  align-self:      flex-start !important;
  width:           60px       !important;
  box-sizing:      border-box !important;
}
.sdi-typing span {
  width:       7px  !important;
  height:      7px  !important;
  background:  var(--sdi-accent) !important;
  border-radius:50% !important;
  display:     block !important;
  animation:   sdiDot 1.2s infinite !important;
}
.sdi-typing span:nth-child(2) { animation-delay: 0.2s !important; }
.sdi-typing span:nth-child(3) { animation-delay: 0.4s !important; }
@keyframes sdiDot {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.5; }
  30%           { transform: translateY(-5px); opacity: 1;   }
}

/* ─────────────────────────────────────────────────────────────
   Input area
───────────────────────────────────────────────────────────── */
#sdi-chat-input-area {
  display:     flex         !important;
  align-items: flex-end     !important;
  gap:         8px          !important;
  padding:     12px         !important;
  background:  #fff         !important;
  border-top:  1px solid rgba(192,135,63,0.2) !important;
  flex-shrink: 0            !important;
  box-sizing:  border-box   !important;
}
#sdi-chat-input {
  all:         unset        !important;
  flex:        1            !important;
  resize:      none         !important;
  border:      1px solid rgba(192,135,63,0.4) !important;
  border-radius:8px         !important;
  padding:     9px 12px     !important;
  font-size:   13px         !important;
  font-family: 'Georgia', Georgia, serif !important;
  color:       var(--sdi-text)  !important;
  background:  var(--sdi-bg)    !important;
  line-height: 1.4          !important;
  max-height:  100px        !important;
  overflow-y:  auto         !important;
  box-sizing:  border-box   !important;
  display:     block        !important;
}
#sdi-chat-input:focus { border-color: var(--sdi-accent) !important; }
#sdi-chat-input::placeholder { color: #999 !important; opacity: 1 !important; }

#sdi-chat-send {
  all:             unset     !important;
  width:           38px      !important;
  height:          38px      !important;
  border-radius:   50%       !important;
  background:      var(--sdi-header-bg) !important;
  color:           var(--sdi-accent)    !important;
  font-size:       16px      !important;
  cursor:          pointer   !important;
  flex-shrink:     0         !important;
  transition:      background 0.2s !important;
  display:         flex      !important;
  align-items:     center    !important;
  justify-content: center    !important;
  box-sizing:      border-box !important;
}
#sdi-chat-send:hover    { background: var(--sdi-primary) !important; }
#sdi-chat-send:disabled { opacity: 0.5 !important; cursor: default !important; }
#sdi-chat-send:focus-visible { outline: 2px solid var(--sdi-accent) !important; }
#sdi-chat-send svg {
  width:   18px  !important;
  height:  18px  !important;
  display: block !important;
  fill:    currentColor !important;
}

/* ─────────────────────────────────────────────────────────────
   Footer
───────────────────────────────────────────────────────────── */
#sdi-chat-footer {
  text-align:  center  !important;
  font-size:   10px    !important;
  color:       #aaa    !important;
  padding:     6px     !important;
  background:  #fff    !important;
  border-top:  1px solid #f0e8d8 !important;
  flex-shrink: 0       !important;
  box-sizing:  border-box !important;
}
#sdi-chat-footer a {
  color:           var(--sdi-accent) !important;
  text-decoration: none !important;
}
#sdi-chat-footer a:hover { text-decoration: underline !important; }

/* ─────────────────────────────────────────────────────────────
   Position variants
   Default (right) is already set on #sdi-chat-widget.
   .sdi-pos-left mirrors everything to the left side.
───────────────────────────────────────────────────────────── */

/* Right (default) — explicit class keeps specificity equal */
#sdi-chat-widget.sdi-pos-right {
  right: 24px !important;
  left:  auto !important;
}
#sdi-chat-widget.sdi-pos-right #sdi-chat-window {
  right: 0    !important;
  left:  auto !important;
}

/* Left variant */
#sdi-chat-widget.sdi-pos-left {
  left:  24px !important;
  right: auto !important;
}
#sdi-chat-widget.sdi-pos-left #sdi-chat-window {
  left:  0    !important;
  right: auto !important;
}

/* ─────────────────────────────────────────────────────────────
   Mobile
───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #sdi-chat-widget { bottom: 16px !important; right: 16px !important; }
  #sdi-chat-widget.sdi-pos-right { right: 16px !important; left: auto !important; }
  #sdi-chat-widget.sdi-pos-right #sdi-chat-window {
    width: calc(100vw - 32px) !important;
    right: -8px !important;
    left:  auto !important;
  }
  #sdi-chat-widget.sdi-pos-left { left: 16px !important; right: auto !important; }
  #sdi-chat-widget.sdi-pos-left #sdi-chat-window {
    width: calc(100vw - 32px) !important;
    left:  -8px !important;
    right: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   Reduced-motion accessibility
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #sdi-chat-window       { animation: none !important; }
  .sdi-msg               { animation: none !important; }
  .sdi-typing span       { animation-duration: 2s !important; }
  #sdi-chat-toggle,
  #sdi-chat-toggle .sdi-icon-om,
  #sdi-chat-toggle .sdi-icon-close { transition: none !important; }
}