/* =========================================================
   OOZ NM Chat Widget — widget.css
   Primary: #ffcd00 (OOZ yellow)
   Font: Sora (Google Fonts)
   ========================================================= */

/* ---- Scoped Reset ---- */
:where(#ooz-widget) * {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Sora', sans-serif !important;
}

/* ---- CSS Variables scoped to widget root (not :root) ---- */
#ooz-widget {
  --ooz-primary: #ffcd00;
  --ooz-primary-dark: #f7c200;
  --ooz-primary-mid: #ffe040;
  --ooz-primary-light: #fffbe6;
  --ooz-on-primary: #1a1a2e;
  --ooz-white: #ffffff;
  --ooz-bg: #f4f6fb;
  --ooz-text: #1a1a2e;
  --ooz-text-soft: #8892a4;
  --ooz-bubble-user: #ffcd00;
  --ooz-bubble-bot: #ffffff;
  --ooz-shadow: 0 8px 40px rgba(255, 205, 0, 0.35);
  --ooz-shadow-sm: 0 2px 16px rgba(255, 205, 0, 0.2);
  --ooz-radius: 20px;
  --ooz-radius-msg: 18px;
  --ooz-w: 400px;
  --ooz-h: 720px;
}

/* =========================================================
   TRIGGER BUBBLE
   ========================================================= */
#ooz-widget #ooz-trigger {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  width: 62px !important;
  height: 62px !important;
  min-width: unset !important;
  max-width: unset !important;
  border-radius: 50% !important;
  background: var(--ooz-primary) !important;
  border: 2.5px solid var(--ooz-primary-dark) !important;
  box-shadow: var(--ooz-shadow) !important;
  cursor: pointer !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease !important;
  animation: ooz-bubble-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

#ooz-widget #ooz-trigger:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 12px 48px rgba(255, 205, 0, 0.5) !important;
}

#ooz-widget #ooz-trigger:active {
  transform: scale(0.95) !important;
}

#ooz-widget #ooz-trigger img {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
  border-radius: 50% !important;
}

@keyframes ooz-bubble-in {
  from { transform: scale(0) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0);    opacity: 1; }
}

/* =========================================================
   CHAT WINDOW
   ========================================================= */
#ooz-widget #ooz-window {
  position: fixed !important;
  bottom: 104px !important;
  right: 28px !important;
  width: var(--ooz-w) !important;
  height: var(--ooz-h) !important;
  max-height: calc(100dvh - 120px) !important;
  border-radius: var(--ooz-radius) !important;
  background: var(--ooz-bg) !important;
  box-shadow: 0 20px 72px rgba(255, 205, 0, 0.18), 0 4px 24px rgba(0,0,0,0.08) !important;
  z-index: 9998 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transform-origin: bottom right !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.25s ease !important;
}

#ooz-widget #ooz-window.ooz-hidden {
  transform: scale(0.6) translateY(40px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#ooz-widget #ooz-window.ooz-visible {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
}

/* ---- Header ---- */
#ooz-widget #ooz-header {
  background: linear-gradient(160deg, #ffe84d 0%, #ffcd00 100%) !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

#ooz-widget #ooz-header-close {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: unset !important;
  max-width: unset !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s !important;
  padding: 0 !important;
}

#ooz-widget #ooz-header-close:hover {
  background: rgba(255,255,255,0.85) !important;
}

#ooz-widget #ooz-reload-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: unset !important;
  max-width: unset !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s, transform 0.3s !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}

#ooz-widget #ooz-reload-btn:hover {
  background: rgba(255,255,255,0.85) !important;
  transform: rotate(180deg) !important;
}

#ooz-widget #ooz-reload-btn svg {
  width: 15px !important;
  height: 15px !important;
  display: block !important;
  visibility: visible !important;
  stroke: #000000 !important;
}

#ooz-widget #ooz-header-close svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #000000 !important;
  stroke-width: 2.5 !important;
  fill: none !important;
  display: block !important;
  visibility: visible !important;
}

#ooz-widget #ooz-header-logo {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

#ooz-widget #ooz-header-logo img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
}

#ooz-widget #ooz-header-info {
  display: flex !important;
  flex-direction: column !important;
}

#ooz-widget #ooz-header-name {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--ooz-on-primary) !important;
  letter-spacing: 0.01em !important;
  margin-top: 6px !important;
}

#ooz-widget #ooz-header-status {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  color: rgba(26,26,46,0.65) !important;
  font-weight: 400 !important;
  margin-top: 1px !important;
}

#ooz-widget #ooz-status-dot {
  width: 6px !important;
  height: 6px !important;
  background: #4ade80 !important;
  border-radius: 50% !important;
  display: inline-block !important;
  animation: ooz-pulse 2s ease-in-out infinite !important;
}

@keyframes ooz-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ---- Messages Area ---- */
#ooz-widget #ooz-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 16px 16px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  scroll-behavior: smooth !important;
}

#ooz-widget #ooz-messages::-webkit-scrollbar { width: 6px !important; }
#ooz-widget #ooz-messages::-webkit-scrollbar-track { background: rgba(255,205,0,0.08) !important; border-radius: 6px !important; }
#ooz-widget #ooz-messages::-webkit-scrollbar-thumb { background: rgba(255,205,0,0.5) !important; border-radius: 6px !important; }
#ooz-widget #ooz-messages::-webkit-scrollbar-thumb:hover { background: rgba(255,205,0,0.75) !important; }

/* ---- Message Bubbles ---- */
#ooz-widget .ooz-msg {
  display: flex !important;
  flex-direction: column !important;
  max-width: 82% !important;
  width: fit-content !important;
  min-width: 0 !important;
  animation: ooz-msg-in 0.3s cubic-bezier(0.34, 1.36, 0.64, 1) both !important;
}

@keyframes ooz-msg-in {
  from { transform: translateY(10px) scale(0.95); opacity: 0; }
  to   { transform: translateY(0) scale(1);       opacity: 1; }
}

#ooz-widget .ooz-msg.ooz-user {
  align-self: flex-end !important;
  align-items: flex-end !important;
  margin-right: 8px !important;
  max-width: 78% !important;
}

#ooz-widget .ooz-msg.ooz-bot {
  align-self: flex-start !important;
  align-items: flex-start !important;
  width: 96% !important;
  max-width: 96% !important;
  margin-left: 8px !important;
}

#ooz-widget .ooz-msg-bubble {
  padding: 16px 20px !important;
  border-radius: var(--ooz-radius-msg) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  min-width: 0 !important;
}

#ooz-widget .ooz-msg.ooz-user .ooz-msg-bubble {
  background: var(--ooz-primary) !important;
  color: var(--ooz-on-primary) !important;
  border-bottom-right-radius: 4px !important;
}

#ooz-widget .ooz-msg-bubble a {
  color: #1B3F72 !important;
  text-decoration: underline !important;
  word-break: break-word !important;
}

#ooz-widget .ooz-msg-bubble a:hover {
  opacity: 0.75 !important;
}

#ooz-widget .ooz-msg.ooz-bot .ooz-msg-bubble {
  background: var(--ooz-bubble-bot) !important;
  color: var(--ooz-text) !important;
  border-bottom-left-radius: 4px !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
  width: 100% !important;
}

#ooz-widget .ooz-msg-time {
  font-size: 10px !important;
  color: var(--ooz-text-soft) !important;
  margin-top: 3px !important;
  padding: 0 4px !important;
}

/* ---- Typing Indicator ---- */
#ooz-widget #ooz-typing {
  display: flex !important;
  align-self: flex-start !important;
  align-items: center !important;
  gap: 5px !important;
  background: white !important;
  padding: 12px 16px !important;
  border-radius: var(--ooz-radius-msg) !important;
  border-bottom-left-radius: 4px !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
  animation: ooz-msg-in 0.3s both !important;
}

#ooz-widget #ooz-typing.ooz-hidden { display: none !important; }

#ooz-widget .ooz-dot {
  width: 7px !important;
  height: 7px !important;
  background: var(--ooz-primary-dark) !important;
  border-radius: 50% !important;
  animation: ooz-typing-bounce 1.2s ease-in-out infinite !important;
  opacity: 0.6 !important;
}
#ooz-widget .ooz-dot:nth-child(2) { animation-delay: 0.2s !important; }
#ooz-widget .ooz-dot:nth-child(3) { animation-delay: 0.4s !important; }

@keyframes ooz-typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.6; }
  40%            { transform: translateY(-6px); opacity: 1; }
}

/* ---- Bottom Area ---- */
#ooz-widget #ooz-bottom {
  flex-shrink: 0 !important;
  padding: 8px 14px 14px !important;
  background: transparent !important;
}

/* Quick reply chips */
#ooz-widget #ooz-chips {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

#ooz-widget .ooz-chip {
  padding: 10px 12px !important;
  border-radius: 50px !important;
  border: 1.5px solid var(--ooz-primary-dark) !important;
  background: white !important;
  color: var(--ooz-on-primary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: background 0.18s, color 0.18s, transform 0.15s !important;
  font-family: 'Sora', sans-serif !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.4 !important;
  width: 100% !important;
}

#ooz-widget .ooz-chip:hover {
  background: var(--ooz-primary) !important;
  color: var(--ooz-on-primary) !important;
  transform: translateY(-1px) !important;
}

/* Input bar */
#ooz-widget #ooz-input-bar {
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  background: white !important;
  border-radius: 20px !important;
  padding: 8px 8px 8px 16px !important;
  box-shadow: 0 4px 20px rgba(255, 205, 0, 0.15), 0 1px 6px rgba(0,0,0,0.06) !important;
}

#ooz-widget #ooz-input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  font-size: 13.5px !important;
  color: var(--ooz-text) !important;
  background: transparent !important;
  font-family: 'Sora', sans-serif !important;
  font-weight: 400 !important;
  padding: 0 !important;
  margin: 0 0 9px 0 !important;
  line-height: 1.5 !important;
  resize: none !important;
  overflow: hidden !important;
  max-height: 120px !important;
  overflow-y: auto !important;
  display: block !important;
}

#ooz-widget #ooz-input::placeholder {
  color: #b0bac8 !important;
}

#ooz-widget #ooz-send-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: unset !important;
  max-width: unset !important;
  border-radius: 50% !important;
  background: var(--ooz-primary) !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s, transform 0.15s !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}

#ooz-widget #ooz-send-btn:hover {
  background: var(--ooz-primary-dark) !important;
  transform: scale(1.06) !important;
}

#ooz-widget #ooz-send-btn:active {
  transform: scale(0.94) !important;
}

#ooz-widget #ooz-send-btn svg {
  width: 16px !important;
  height: 16px !important;
  fill: var(--ooz-on-primary) !important;
  display: block !important;
  visibility: visible !important;
  margin-left: 2px !important;
}

/* Powered by */
#ooz-widget #ooz-powered {
  text-align: center !important;
  font-size: 12px !important;
  color: #b0bac8 !important;
  margin-top: 14px !important;
  font-weight: 400 !important;
}

#ooz-widget #ooz-powered a {
  color: var(--ooz-primary-dark) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

#ooz-widget #ooz-powered a:hover {
  text-decoration: underline !important;
}

/* =========================================================
   INTRO / SPLASH SCREEN
   ========================================================= */
#ooz-widget #ooz-intro {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(160deg, #ffe84d 0%, #ffcd00 100%) !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 24px 20px 28px !important;
  border-radius: var(--ooz-radius) !important;
}

#ooz-widget #ooz-intro-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: unset !important;
  max-width: unset !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background 0.2s !important;
}

#ooz-widget #ooz-intro-close:hover { background: rgba(255,255,255,0.85) !important; }

#ooz-widget #ooz-intro-close svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #000000 !important;
  stroke-width: 2.5 !important;
  fill: none !important;
}

#ooz-widget #ooz-intro-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  animation: ooz-intro-fadein 0.45s ease both !important;
}

#ooz-widget #ooz-intro-logo {
  width: 140px !important;
  height: 140px !important;
  border-radius: 50% !important;
  background: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important;
  overflow: hidden !important;
}

#ooz-widget #ooz-intro-logo img {
  width: 116px !important;
  height: 116px !important;
  object-fit: contain !important;
}

#ooz-widget #ooz-intro-name {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--ooz-on-primary) !important;
  letter-spacing: -0.01em !important;
}

#ooz-widget #ooz-intro-status {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: rgba(26,26,46,0.65) !important;
  font-weight: 400 !important;
  margin-top: -8px !important;
}

#ooz-widget #ooz-intro-status-dot {
  width: 7px !important;
  height: 7px !important;
  background: #4ade80 !important;
  border-radius: 50% !important;
  display: inline-block !important;
  animation: ooz-pulse 2s ease-in-out infinite !important;
}

#ooz-widget #ooz-intro-tagline {
  font-size: 14px !important;
  color: #000000 !important;
  text-align: center !important;
  line-height: 1.5 !important;
}

#ooz-widget #ooz-intro-chips {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
  animation: ooz-intro-fadein 0.45s ease 0.25s both !important;
}

#ooz-widget .ooz-intro-chip {
  width: 100% !important;
  padding: 16px 14px !important;
  border-radius: 50px !important;
  border: 1.5px solid rgba(26,26,46,0.25) !important;
  background: rgba(255,255,255,0.35) !important;
  color: var(--ooz-on-primary) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  font-family: 'Sora', sans-serif !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.4 !important;
  transition: background 0.18s, transform 0.15s !important;
  backdrop-filter: blur(4px) !important;
}

#ooz-widget .ooz-intro-chip:hover {
  background: rgba(255,255,255,0.55) !important;
  transform: translateY(-1px) !important;
}

#ooz-widget .ooz-intro-chip:active {
  transform: scale(0.97) !important;
}

#ooz-widget #ooz-intro-input-bar {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 5px 8px 5px 16px !important;
  animation: ooz-intro-fadein 0.45s ease 0.25s both !important;
}

#ooz-widget #ooz-intro-input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  font-size: 13.5px !important;
  color: var(--ooz-on-primary) !important;
  background: transparent !important;
  font-family: 'Sora', sans-serif !important;
  font-weight: 400 !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

#ooz-widget #ooz-intro-input::placeholder {
  color: rgba(0,0,0,0.4) !important;
}

#ooz-widget #ooz-intro-send-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: unset !important;
  max-width: unset !important;
  border-radius: 50% !important;
  background: var(--ooz-primary) !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s, transform 0.15s !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}

#ooz-widget #ooz-intro-send-btn:hover {
  background: var(--ooz-primary-dark) !important;
  transform: scale(1.06) !important;
}

#ooz-widget #ooz-intro-send-btn:active {
  transform: scale(0.94) !important;
}

#ooz-widget #ooz-intro-send-btn svg {
  width: 16px !important;
  height: 16px !important;
  fill: var(--ooz-on-primary) !important;
  display: block !important;
  visibility: visible !important;
  margin-left: 2px !important;
}

#ooz-widget #ooz-intro.ooz-intro-hidden {
  display: none !important;
}

@keyframes ooz-intro-fadein {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   NOTIFICATION BUBBLE
   ========================================================= */
#ooz-widget #ooz-notify {
  position: fixed !important;
  bottom: 104px !important;
  right: 28px !important;
  background: var(--ooz-primary) !important;
  color: var(--ooz-on-primary) !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  border-bottom-right-radius: 4px !important;
  box-shadow: var(--ooz-shadow) !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  z-index: 9997 !important;
  max-width: 270px !important;
  overflow: visible !important;
  animation: ooz-notify-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

#ooz-widget #ooz-notify::after {
  content: '' !important;
  position: absolute !important;
  bottom: -8px !important;
  right: 22px !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 9px solid transparent !important;
  border-right: 9px solid transparent !important;
  border-top: 9px solid var(--ooz-primary) !important;
}

#ooz-widget #ooz-notify.ooz-notify-hidden {
  display: none !important;
}


#ooz-widget #ooz-notify-close {
  position: absolute !important;
  top: -7px !important;
  right: -7px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: unset !important;
  max-width: unset !important;
  background: #1a1a2e !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-size: 11px !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  transition: background 0.2s !important;
}

#ooz-widget #ooz-notify-close:hover {
  background: #333 !important;
}

#ooz-widget #ooz-notify p {
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 700 !important;
  color: var(--ooz-on-primary) !important;
  font-family: 'Sora', sans-serif !important;
  text-align: center !important;
}

#ooz-widget #ooz-notify p:last-child {
  font-weight: 700 !important;
  font-size: 13px !important;
  margin-top: 3px !important;
}

@keyframes ooz-notify-in {
  from { transform: scale(0.85) translateY(10px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}

/* =========================================================
   RESPONSIVE — mobile (≤ 480px)
   ========================================================= */
@media (max-width: 480px) {
  #ooz-widget #ooz-window {
    bottom: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
  }

  #ooz-widget #ooz-trigger {
    bottom: 20px !important;
    right: 20px !important;
  }

  #ooz-widget #ooz-notify {
    bottom: 95px !important;
    right: 20px !important;
  }

  /* Prevent iOS Safari auto-zoom on input focus (triggers when font-size < 16px) */
  #ooz-widget #ooz-input,
  #ooz-widget #ooz-intro-input {
    font-size: 16px !important;
  }

  #ooz-widget.ooz-open #ooz-trigger {
    display: none !important;
  }
}