/* Floating assistant chat — pill launcher (matches Pomodoro float) */

:root {
  --kpf-float-tools-gap: 10px;
  --kpf-float-tools-right: 20px;
  --kpf-float-tools-bottom: 20px;
  --kpf-float-pill-h: 44px;
  --kpf-chat-accent: var(--kodex-action-primary, #001bff);
  --kpf-chat-ink: var(--kodex-text-primary, #14141a);
  --kpf-chat-muted: var(--kodex-text-muted, #6e7180);
  --kpf-chat-line: var(--kodex-border-default, #d3d6e0);
  --kpf-chat-surface: var(--kodex-bg-surface, #ffffff);
}

/* Shared dock: Pomodoro + Kodax side by side */
html body.app.admin .kpf-float-tools {
  position: fixed !important;
  right: var(--kpf-float-tools-right) !important;
  bottom: var(--kpf-float-tools-bottom) !important;
  z-index: 1450 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  gap: var(--kpf-float-tools-gap) !important;
  pointer-events: none !important;
}

html body.app.admin .kpf-float-tools > * {
  pointer-events: auto !important;
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
}

html body.app.admin .kpf-float-chat {
  position: fixed !important;
  right: var(--kpf-float-tools-right) !important;
  bottom: var(--kpf-float-tools-bottom) !important;
  z-index: 1450 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 12px !important;
  pointer-events: none !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
}

html body.app.admin .kpf-float-tools .kpf-float-chat {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
}

html body.app.admin .kpf-float-chat > * {
  pointer-events: auto !important;
}

/* Pill launcher — same language as .kpf-pomo-float__pill */
html body.app.admin .kpf-float-chat__launcher {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: var(--kpf-float-pill-h) !important;
  padding: 8px 14px 8px 10px !important;
  margin: 0 !important;
  border: 1px solid color-mix(in srgb, var(--kpf-chat-accent) 30%, var(--kpf-chat-line)) !important;
  border-radius: 999px !important;
  background: var(--kpf-chat-surface) !important;
  color: var(--kpf-chat-ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  box-shadow: 0 10px 28px rgba(20, 20, 26, 0.16) !important;
  font-family: inherit !important;
  font-weight: 650 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease !important;
  overflow: visible !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

html body.app.admin .kpf-float-chat__launcher:hover,
html body.app.admin .kpf-float-chat__launcher:focus-visible {
  background: color-mix(in srgb, var(--kpf-chat-accent) 8%, #fff) !important;
  border-color: var(--kpf-chat-accent) !important;
  box-shadow: 0 14px 32px rgba(20, 20, 26, 0.18) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
  color: var(--kpf-chat-ink) !important;
}

html body.app.admin .kpf-float-chat.is-open .kpf-float-chat__launcher {
  border-color: var(--kpf-chat-accent) !important;
  background: color-mix(in srgb, var(--kpf-chat-accent) 10%, #fff) !important;
  box-shadow: 0 10px 28px rgba(20, 20, 26, 0.16) !important;
}

html body.app.admin .kpf-float-chat__launcher-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--kpf-chat-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kpf-chat-accent) 22%, transparent) !important;
  flex-shrink: 0 !important;
}

html body.app.admin .kpf-float-chat.is-open .kpf-float-chat__launcher-dot {
  background: var(--kpf-chat-accent) !important;
}

html body.app.admin .kpf-float-chat__launcher-label {
  white-space: nowrap !important;
}

html body.app.admin .kpf-float-chat__launcher-glyph {
  position: relative !important;
  width: 18px !important;
  height: 18px !important;
  display: none !important; /* pill uses status dot + label; icons swap when open/typing */
}

html body.app.admin .kpf-float-chat.is-open .kpf-float-chat__launcher-glyph,
html body.app.admin .kpf-float-chat.is-typing:not(.is-open) .kpf-float-chat__launcher-glyph {
  display: block !important;
}

html body.app.admin .kpf-float-chat.is-open .kpf-float-chat__launcher-dot,
html body.app.admin .kpf-float-chat.is-typing:not(.is-open) .kpf-float-chat__launcher-dot {
  display: none !important;
}

/* Stack chat / close in the same slot — only one visible */
html body.app.admin .kpf-float-chat__launcher .kpf-float-chat__icon-chat,
html body.app.admin .kpf-float-chat__launcher .kpf-float-chat__icon-close {
  position: absolute !important;
  inset: 0 !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  color: var(--kpf-chat-accent) !important;
  stroke: currentColor !important;
  fill: none !important;
  pointer-events: none !important;
}

html body.app.admin .kpf-float-chat__launcher .kpf-float-chat__icon-chat {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html body.app.admin .kpf-float-chat__launcher .kpf-float-chat__icon-close {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html body.app.admin .kpf-float-chat.is-open .kpf-float-chat__launcher .kpf-float-chat__icon-close {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Typing dots only while waiting for a reply */
html body.app.admin .kpf-float-chat__launcher-typing {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: none !important;
  align-items: center !important;
  gap: 3px !important;
  pointer-events: none !important;
}

html body.app.admin .kpf-float-chat.is-typing:not(.is-open) .kpf-float-chat__launcher-typing {
  display: inline-flex !important;
}

html body.app.admin .kpf-float-chat.is-typing:not(.is-open) .kpf-float-chat__launcher .kpf-float-chat__icon-chat,
html body.app.admin .kpf-float-chat.is-typing:not(.is-open) .kpf-float-chat__launcher .kpf-float-chat__icon-close {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html body.app.admin .kpf-float-chat__launcher-typing span {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: var(--kpf-chat-accent) !important;
  opacity: 0.85 !important;
  animation: kpf-float-chat-dot 1.1s ease-in-out infinite !important;
}

html body.app.admin .kpf-float-chat__launcher-typing span:nth-child(2) {
  animation-delay: 0.15s !important;
}

html body.app.admin .kpf-float-chat__launcher-typing span:nth-child(3) {
  animation-delay: 0.3s !important;
}

@keyframes kpf-float-chat-dot {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  40% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

/* Panel */
html body.app.admin .kpf-float-chat__panel {
  width: min(360px, calc(100vw - 32px)) !important;
  height: min(520px, calc(100vh - 120px)) !important;
  display: none !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 4px !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  background: var(--kodex-bg-surface, #fff) !important;
  color: var(--kodex-text-primary, #14141a) !important;
  box-shadow: 0 18px 48px rgba(20, 20, 26, 0.18) !important;
  transform-origin: bottom right !important;
}

html body.app.admin .kpf-float-chat.is-open .kpf-float-chat__panel {
  display: flex !important;
  animation: kpf-float-chat-in 0.22s cubic-bezier(0.22, 0.9, 0.28, 1) !important;
}

@keyframes kpf-float-chat-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

html body.app.admin .kpf-float-chat__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 14px 14px 12px !important;
  border-bottom: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  background: color-mix(in srgb, var(--kodex-action-primary, #001bff) 4%, #fff) !important;
}

html body.app.admin .kpf-float-chat__brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html body.app.admin .kpf-float-chat__avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 4px !important;
  background: var(--kodex-action-primary, #001bff) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}

html body.app.admin .kpf-float-chat__avatar svg {
  width: 18px !important;
  height: 18px !important;
}

html body.app.admin .kpf-float-chat__title {
  margin: 0 !important;
  font-family: var(--kodex-font-display, "Neue Haas Grotesk Display", Satoshi, system-ui, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  color: var(--kodex-text-primary, #14141a) !important;
  line-height: 1.2 !important;
}

html body.app.admin .kpf-float-chat__subtitle {
  margin: 2px 0 0 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--kodex-text-muted, #6e7180) !important;
}

html body.app.admin .kpf-float-chat__close {
  width: 32px !important;
  height: 32px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--kodex-text-secondary, #40424d) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body.app.admin .kpf-float-chat__close:hover {
  background: var(--kodex-bg-subtle, #f5f5f5) !important;
  color: var(--kodex-text-primary, #14141a) !important;
}

html body.app.admin .kpf-float-chat__messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: var(--kodex-bg-subtle, #f7f7f7) !important;
}

html body.app.admin .kpf-float-chat__bubble {
  max-width: 88% !important;
  padding: 10px 12px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  box-shadow: none !important;
}

html body.app.admin .kpf-float-chat__bubble--bot {
  align-self: flex-start !important;
  background: #fff !important;
  border: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  color: var(--kodex-text-primary, #14141a) !important;
}

html body.app.admin .kpf-float-chat__bubble--user {
  align-self: flex-end !important;
  background: var(--kodex-action-primary, #001bff) !important;
  color: #fff !important;
}

html body.app.admin .kpf-float-chat__composer {
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  padding: 12px !important;
  border-top: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  background: var(--kodex-bg-surface, #fff) !important;
}

html body.app.admin .kpf-float-chat__input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 40px !important;
  max-height: 96px !important;
  resize: none !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  border-radius: 4px !important;
  background: var(--kodex-bg-subtle, #f7f7f7) !important;
  color: var(--kodex-text-primary, #14141a) !important;
  font: inherit !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
}

html body.app.admin .kpf-float-chat__input:focus {
  outline: none !important;
  border-color: var(--kodex-action-primary, #001bff) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, #001bff 16%, transparent) !important;
  background: #fff !important;
}

html body.app.admin .kpf-float-chat__send {
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: var(--kodex-action-primary, #001bff) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

html body.app.admin .kpf-float-chat__send:hover {
  background: color-mix(in srgb, #001bff 88%, #000) !important;
}

html body.app.admin .kpf-float-chat__send:disabled {
  opacity: 0.45 !important;
  cursor: default !important;
}

/* Dark */
html body.app.admin.kodex-crm-admin--ui-dark .kpf-float-chat__panel {
  background: #1e1e24 !important;
  border-color: #2a2a32 !important;
  color: #f0f1f5 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-float-chat__head {
  background: color-mix(in srgb, #001bff 10%, #1e1e24) !important;
  border-bottom-color: #2a2a32 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-float-chat__title {
  color: #f7f7f7 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-float-chat__messages {
  background: #14141a !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-float-chat__bubble--bot {
  background: #1e1e24 !important;
  border-color: #2a2a32 !important;
  color: #f0f1f5 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-float-chat__composer {
  background: #1e1e24 !important;
  border-top-color: #2a2a32 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-float-chat__input {
  background: #14141a !important;
  border-color: #2a2a32 !important;
  color: #f0f1f5 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-float-chat__launcher {
  background: #1e1e24 !important;
  border-color: color-mix(in srgb, var(--kpf-chat-accent) 28%, #40424d) !important;
  color: #f7f7f7 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-float-chat__launcher:hover,
html body.app.admin.kodex-crm-admin--ui-dark .kpf-float-chat__launcher:focus-visible,
html body.app.admin.kodex-crm-admin--ui-dark .kpf-float-chat.is-open .kpf-float-chat__launcher {
  background: color-mix(in srgb, var(--kpf-chat-accent) 16%, #1e1e24) !important;
  border-color: var(--kpf-chat-accent) !important;
  color: #f7f7f7 !important;
}

@media (max-width: 768px) {
  html body.app.admin .kpf-float-tools {
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;
    right: 12px !important;
    bottom: 12px !important;
  }

  html body.app.admin .kpf-float-chat,
  html body.app.admin .kpf-float-tools .kpf-float-chat {
    right: auto !important;
    bottom: auto !important;
  }

  html body.app.admin .kpf-float-chat__launcher,
  html body.app.admin .kpf-pomo-float__pill {
    min-height: 36px !important;
    padding: 6px 10px 6px 8px !important;
    font-size: 11px !important;
    gap: 7px !important;
    box-shadow: 0 8px 20px rgba(20, 20, 26, 0.14) !important;
  }

  html body.app.admin .kpf-float-chat__launcher-dot,
  html body.app.admin .kpf-pomo-float__dot {
    width: 8px !important;
    height: 8px !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--kpf-chat-accent) 22%, transparent) !important;
  }

  html body.app.admin .kpf-pomo-float__dot {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--kpf-pomo-accent, #fa4616) 22%, transparent) !important;
  }

  html body.app.admin .kpf-float-chat__panel {
    width: calc(100vw - 24px) !important;
    height: min(70vh, 560px) !important;
  }
}

@media (max-width: 520px) {
  html body.app.admin .kpf-float-chat__panel {
    width: calc(100vw - 24px) !important;
    height: min(70vh, 560px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.app.admin .kpf-float-chat__launcher,
  html body.app.admin .kpf-float-chat.is-open .kpf-float-chat__panel,
  html body.app.admin .kpf-float-chat__launcher-typing span {
    animation: none !important;
    transition: none !important;
  }
}