/* ========================================
   Floating Chat Widget — Fully Isolated
   All selectors scoped to .sb-float-* to avoid
   conflicts with page chatbots (.mwai-*, .sb-chat-*)
   ======================================== */

/* Trigger button — matches ai-jobhelper.dk */
.sb-float-trigger {
  position: fixed !important;
  bottom: 30px !important;
  right: 30px !important;
  z-index: 2147483646 !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: #003d4e !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.3s, opacity 0.3s, background-color 0.3s, box-shadow 0.3s !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
}

.sb-float-trigger:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  background-color: #005068 !important;
}

.sb-float-trigger:hover .sb-float-icon-img {
  transform: rotate(10deg) scale(1.1) !important;
}

.sb-float-trigger:active {
  transform: scale(0.9) !important;
}

.sb-float-trigger.opening {
  transform: scale(0.8) !important;
  opacity: 0.3 !important;
}

.sb-float-trigger .sb-float-icon-img {
  width: 30px !important;
  height: 30px !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
  transition: transform 0.3s !important;
}

/* Chat window */
.sb-float-window {
  position: fixed !important;
  bottom: 30px !important;
  right: 30px !important;
  z-index: 2147483647 !important;
  width: min(420px, calc(100vw - 32px)) !important;
  max-height: min(600px, calc(100vh - 140px)) !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(12px) scale(0.96) !important;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease !important;
  pointer-events: none !important;
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  box-sizing: border-box !important;
}

.sb-float-window *,
.sb-float-window *::before,
.sb-float-window *::after {
  box-sizing: border-box !important;
}

.sb-float-window.open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

/* Header */
.sb-float-header {
  display: flex !important;
  align-items: center !important;
  padding: 14px 16px !important;
  background: #003d4e !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.sb-float-header-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  flex: 1 !important;
  color: #ffffff !important;
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sb-float-header-close {
  width: 28px !important;
  height: 28px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  transition: background 0.15s !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sb-float-header-close:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

.sb-float-header-close svg {
  width: 18px !important;
  height: 18px !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Conversation area */
.sb-float-conversation {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 14px 14px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-height: 200px !important;
  max-height: 400px !important;
  background: #ffffff !important;
  margin: 0 !important;
  border: none !important;
}

/* Messages */
.sb-float-msg {
  max-width: 85% !important;
  padding: 8px 14px !important;
  border-radius: 15px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  word-wrap: break-word !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.sb-float-msg.ai {
  align-self: flex-start !important;
  background: #f0f0f1 !important;
  color: #5a5d62 !important;
  position: relative !important;
}

.sb-float-msg.ai::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  left: -7px !important;
  bottom: 0 !important;
  width: 16px !important;
  height: 16px !important;
  background: #f0f0f1 !important;
  border-bottom-right-radius: 12px !important;
}

.sb-float-msg.ai::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  bottom: 0 !important;
  left: -10px !important;
  width: 10px !important;
  height: 16px !important;
  background: #ffffff !important;
  border-bottom-right-radius: 8px !important;
}

.sb-float-msg.user {
  align-self: flex-end !important;
  background: #629d9b !important;
  color: #ffffff !important;
  position: relative !important;
}

.sb-float-msg.user::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  right: -7px !important;
  bottom: 0 !important;
  width: 16px !important;
  height: 16px !important;
  background: #629d9b !important;
  border-bottom-left-radius: 12px !important;
}

.sb-float-msg.user::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  right: -10px !important;
  bottom: 0 !important;
  width: 10px !important;
  height: 16px !important;
  background: #ffffff !important;
  border-bottom-left-radius: 8px !important;
}

/* Markdown inside AI messages */
.sb-float-msg.ai .markdown-body {
  background: transparent !important;
  font-size: inherit !important;
  font-family: inherit !important;
  color: #5a5d62 !important;
  overflow-x: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.sb-float-msg.ai .markdown-body p {
  margin: 2px 0 !important;
}

.sb-float-msg.ai .markdown-body table {
  width: 100% !important;
  table-layout: auto !important;
  word-break: break-word !important;
}

/* The shared azure_markdown.css colors h6/blockquote/footnotes with
   --color-fg-muted and links with --color-accent-fg, breaking inheritance
   from .markdown-body's #5a5d62. Re-pin these descendants to the bubble
   color so the AI reply renders as a single uniform grey. Code/syntax
   highlighting (code, pre, .pl-*) is left alone. */
.sb-float-msg.ai .markdown-body *{
  color: #5a5d62 !important;
}

/* TTS (read-aloud) button — top corner of EVERY message (AI and user),
   hover-revealed; stays visible while loading/playing so the user can find
   it again to stop. AI bubbles (left-aligned) put the button at top-right;
   user bubbles (right-aligned) mirror it to top-left so it sits inward,
   away from the conversation edge. */
.sb-float-msg > .sb-float-tts-btn {
  position: absolute !important;
  top: -7px !important;
  right: -10px !important;
  left: auto !important;
  z-index: 5 !important;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  cursor: pointer !important;
  color: #333 !important;
  font: inherit !important;
  line-height: 1 !important;
  transition: background 0.15s, border-color 0.15s !important;
}

/* Mirror to top-left for user bubbles (which are right-aligned). */
.sb-float-msg.user > .sb-float-tts-btn {
  left: auto !important;
  right: -10px !important;
}

.sb-float-msg:hover > .sb-float-tts-btn,
.sb-float-msg > .sb-float-tts-btn.is-speaking,
.sb-float-msg > .sb-float-tts-btn.is-loading {
  display: inline-flex !important;
}

.sb-float-msg > .sb-float-tts-btn:hover {
  background: #f3f4f6 !important;
}

.sb-float-msg > .sb-float-tts-btn svg {
  width: 13px !important;
  height: 13px !important;
  stroke: #333 !important;
  fill: none !important;
  display: block !important;
}

.sb-float-msg > .sb-float-tts-btn.is-speaking {
  background: #f4ffff !important;
  border-color: #c0dbd9 !important;
}

.sb-float-msg > .sb-float-tts-btn.is-speaking svg {
  stroke: #629d9b !important;
}

.sb-float-msg > .sb-float-tts-btn.is-loading {
  color: #629d9b !important;
}

.sb-float-msg > .sb-float-tts-btn .tts-inline-spinner {
  width: 13px !important;
  height: 13px !important;
  border: 2px solid currentColor !important;
  border-top-color: transparent !important;
  border-radius: 50% !important;
  display: inline-block !important;
  animation: sb-float-tts-spin 0.8s linear infinite !important;
}

@keyframes sb-float-tts-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Typing indicator */
.sb-float-typing {
  display: flex !important;
  gap: 4px !important;
  padding: 12px 16px !important;
  align-self: flex-start !important;
  background: #f0f0f1 !important;
  border-radius: 15px !important;
  margin: 0 !important;
  border: none !important;
}

.sb-float-typing-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #b1b1b4 !important;
  animation: sb-float-bounce 1.2s infinite !important;
}

.sb-float-typing-dot:nth-child(2) {
  animation-delay: 0.15s !important;
}

.sb-float-typing-dot:nth-child(3) {
  animation-delay: 0.3s !important;
}

@keyframes sb-float-bounce {

  0%,
  60%,
  100% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-4px);
  }
}

/* Input area */
.sb-float-input {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 12px !important;
  border-top: 1px solid #f0f1f2 !important;
  flex-shrink: 0 !important;
  background: #ffffff !important;
  margin: 0 !important;
}

.sb-float-input textarea {
  flex: 1 !important;
  min-height: 38px !important;
  max-height: 100px !important;
  padding: 8px 10px !important;
  border: none !important;
  outline: none !important;
  resize: none !important;
  font-size: 14px !important;
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  line-height: 1.4 !important;
  color: #5a5d62 !important;
  background: transparent !important;
  overflow-y: auto !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.sb-float-input textarea::placeholder {
  color: #b1b1b4 !important;
}

/* File upload */
.sb-float-file-upload {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sb-float-file-icon {
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sb-float-file-icon svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

.sb-float-file-icon .sb-float-upload-hover {
  display: none !important;
}

.sb-float-file-icon .sb-float-upload-success {
  display: none !important;
}

/* Hover: show green plus icon */
.sb-float-file-upload:hover .sb-float-upload-normal {
  display: none !important;
}

.sb-float-file-upload:hover .sb-float-upload-hover {
  display: block !important;
}

/* File attached: show success icon */
.sb-float-file-upload.has-file .sb-float-upload-normal {
  display: none !important;
}

.sb-float-file-upload.has-file .sb-float-upload-hover {
  display: none !important;
}

.sb-float-file-upload.has-file .sb-float-upload-success {
  display: block !important;
}

/* Clear / Delete button */
.sb-float-clear-btn {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background 0.15s, border-color 0.15s !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sb-float-clear-btn.visible {
  display: flex !important;
}

.sb-float-clear-btn:hover {
  background: #fee2e2 !important;
  border-color: #f87171 !important;
}

.sb-float-clear-btn svg {
  width: 18px !important;
  height: 18px !important;
  color: #9ca3af !important;
  transition: color 0.15s !important;
}

.sb-float-clear-btn:hover svg {
  color: #dc2626 !important;
}

/* Send button */
.sb-float-send {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: #629d9b !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background 0.15s !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sb-float-send:hover {
  background: #5a9593 !important;
}

.sb-float-send:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.sb-float-send svg {
  width: 18px !important;
  height: 18px !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Mobile */
@media (max-width: 480px) {
  .sb-float-window {
    bottom: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .sb-float-trigger {
    bottom: 16px !important;
    right: 16px !important;
  }
}

/* ========================================
   Dialog top-layer support
   When the chat is reparented inside a <dialog>,
   ensure it's not clipped by the dialog's overflow.
   ======================================== */
dialog .sb-float-trigger,
dialog .sb-float-window {
  /* z-index within the dialog's stacking context */
  z-index: 999999 !important;
}

/* ========================================
   Plan gating — floating chat is a premium-only feature.
   auth-guard.js adds `plan-basic` / `plan-premium` etc. to <body>
   after the Supabase session check. Hide the widget for basic users.
   Premium (or any non-basic) plan keeps the widget visible.
   ======================================== */
body.plan-basic .sb-float-trigger,
body.plan-basic .sb-float-window {
  display: none !important;
}