/* Onesimus AI Helpdesk — scoped with .ai-chat-* (no global style bleed) */

.ai-chat-widget {
  --ai-chat-font: "Inter", system-ui, -apple-system, sans-serif;
  --ai-chat-primary: #3730a3;
  --ai-chat-primary-dark: #312e81;
  --ai-chat-primary-light: #4f46e5;
  --ai-chat-accent: #6366f1;
  --ai-chat-surface: #ffffff;
  --ai-chat-surface-muted: #f8fafc;
  --ai-chat-border: #e2e8f0;
  --ai-chat-text: #0f172a;
  --ai-chat-text-muted: #64748b;
  --ai-chat-user-bubble: #eef2ff;
  --ai-chat-bot-bubble: #ffffff;
  --ai-chat-shadow: 0 12px 40px rgb(15 23 42 / 0.18);
  --ai-chat-radius: 1rem;
  --ai-chat-z: 9999;

  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: var(--ai-chat-z);
  font-family: var(--ai-chat-font);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ai-chat-text);
}

.ai-chat-widget *,
.ai-chat-widget *::before,
.ai-chat-widget *::after {
  box-sizing: border-box;
}

/* Floating launcher — fixed so it never expands the widget hit-box over page links */
.ai-chat-launcher {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: calc(var(--ai-chat-z) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ai-chat-primary-light), var(--ai-chat-primary));
  color: #fff;
  cursor: pointer;
  box-shadow: var(--ai-chat-shadow);
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ai-chat-launcher:hover {
  transform: scale(1.04);
  box-shadow: 0 14px 44px rgb(49 46 129 / 0.35);
}

.ai-chat-launcher:focus-visible {
  outline: 2px solid var(--ai-chat-accent);
  outline-offset: 3px;
}

.ai-chat-launcher__icon {
  font-size: 1.35rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.ai-chat-launcher__icon--close {
  position: absolute;
  opacity: 0;
  transform: rotate(-90deg) scale(0.8);
}

.ai-chat-widget.is-open .ai-chat-launcher__icon--open {
  opacity: 0;
  transform: rotate(90deg) scale(0.8);
}

.ai-chat-widget.is-open .ai-chat-launcher__icon--close {
  opacity: 1;
  transform: none;
}

/* Chat window */
.ai-chat-window {
  position: absolute;
  right: 0;
  bottom: calc(3.75rem + 0.85rem);
  display: flex;
  flex-direction: column;
  width: min(22.5rem, calc(100vw - 2rem));
  height: min(32rem, calc(100dvh - 6.5rem));
  border: 1px solid var(--ai-chat-border);
  border-radius: var(--ai-chat-radius);
  background: var(--ai-chat-surface);
  box-shadow: var(--ai-chat-shadow);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem) scale(0.98);
  transform-origin: bottom right;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s ease;
  pointer-events: none;
}

.ai-chat-widget.is-open .ai-chat-window {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ai-chat-window[hidden] {
  display: none !important;
  pointer-events: none !important;
}

/* Header */
.ai-chat-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: linear-gradient(135deg, var(--ai-chat-primary), var(--ai-chat-primary-dark));
  color: #fff;
  flex-shrink: 0;
}

.ai-chat-header__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: rgb(255 255 255 / 0.15);
  font-size: 1rem;
}

.ai-chat-header__text {
  flex: 1;
  min-width: 0;
}

.ai-chat-header__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

.ai-chat-header__subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.6875rem;
  opacity: 0.85;
}

.ai-chat-header__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.ai-chat-header__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: #fff;
  cursor: pointer;
  opacity: 0.9;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.ai-chat-header__btn:hover {
  background: rgb(255 255 255 / 0.12);
  opacity: 1;
}

.ai-chat-header__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

/* Message history */
.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background: var(--ai-chat-surface-muted);
  scroll-behavior: smooth;
}

.ai-chat-messages::-webkit-scrollbar {
  width: 6px;
}

.ai-chat-messages::-webkit-scrollbar-thumb {
  background: var(--ai-chat-border);
  border-radius: 999px;
}

.ai-chat-message {
  display: flex;
  margin-bottom: 0.75rem;
  animation: ai-chat-message-in 0.28s ease;
}

.ai-chat-message--user {
  justify-content: flex-end;
}

.ai-chat-message__bubble {
  max-width: 88%;
  padding: 0.65rem 0.85rem;
  border-radius: 0.875rem;
  font-size: 0.875rem;
  line-height: 1.5;
  word-wrap: break-word;
}

.ai-chat-message--assistant .ai-chat-message__bubble {
  background: var(--ai-chat-bot-bubble);
  color: var(--ai-chat-text);
  border: 1px solid var(--ai-chat-border);
  border-bottom-left-radius: 0.25rem;
}

.ai-chat-message--user .ai-chat-message__bubble {
  background: var(--ai-chat-user-bubble);
  color: var(--ai-chat-primary-dark);
  border-bottom-right-radius: 0.25rem;
}

.ai-chat-message--error .ai-chat-message__bubble {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

/* Assistant group: bubble + option picker */
.ai-chat-message__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 88%;
}

.ai-chat-message--assistant .ai-chat-message__group .ai-chat-message__bubble {
  max-width: 100%;
}

.option-picker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  max-width: 20rem;
}

.option-btn {
  width: 100%;
  padding: 0.625rem 1rem;
  border-radius: 1.25rem;
  border: 2px solid var(--ai-chat-primary-light);
  background: var(--ai-chat-surface);
  color: var(--ai-chat-primary-light);
  cursor: pointer;
  font-family: var(--ai-chat-font);
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: left;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
}

.option-btn:hover:not(:disabled) {
  background: var(--ai-chat-primary-light);
  color: #fff;
  border-color: var(--ai-chat-primary-light);
}

.option-btn:focus-visible {
  outline: 2px solid var(--ai-chat-accent);
  outline-offset: 2px;
}

.option-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--ai-chat-surface);
  color: var(--ai-chat-primary-light);
}

.option-btn--unavailable:disabled {
  opacity: 0.45;
  border-color: var(--ai-chat-border);
  color: var(--ai-chat-text-muted);
  background: var(--ai-chat-surface-muted);
}

.option-btn--unavailable:disabled:hover {
  background: var(--ai-chat-surface-muted);
  color: var(--ai-chat-text-muted);
  border-color: var(--ai-chat-border);
}

/* Mon–Fri date row (5 chips) */
.option-picker--dates {
  max-width: 100%;
}

/* In-message typing bubble */
.ai-chat-message__bubble--typing {
  min-width: 3rem;
  padding: 0.75rem 1rem;
}

.ai-chat-typing-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.ai-chat-typing-inline span {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--ai-chat-accent);
  animation: ai-chat-typing-bounce 1.2s ease-in-out infinite;
}

.ai-chat-typing-inline span:nth-child(2) {
  animation-delay: 0.15s;
}

.ai-chat-typing-inline span:nth-child(3) {
  animation-delay: 0.3s;
}

/* Rich HTML inside assistant bubbles */
.ai-chat-message__bubble--html > :first-child {
  margin-top: 0;
}

.ai-chat-message__bubble--html > :last-child {
  margin-bottom: 0;
}

.ai-chat-message__bubble--html p {
  margin: 0 0 0.65rem;
}

.ai-chat-message__bubble--html p:last-child {
  margin-bottom: 0;
}

.ai-chat-message__bubble--html ul,
.ai-chat-message__bubble--html ol {
  margin: 0.35rem 0 0.65rem;
  padding-left: 1.25rem;
}

.ai-chat-message__bubble--html li {
  margin-bottom: 0.25rem;
}

.ai-chat-message__bubble--html li:last-child {
  margin-bottom: 0;
}

.ai-chat-message__bubble--html a {
  color: var(--ai-chat-primary-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ai-chat-message__bubble--html a:hover {
  color: var(--ai-chat-primary);
}

.ai-chat-message__bubble--html strong,
.ai-chat-message__bubble--html b {
  font-weight: 600;
  color: var(--ai-chat-text);
}

.ai-chat-message__bubble--html h1,
.ai-chat-message__bubble--html h2,
.ai-chat-message__bubble--html h3,
.ai-chat-message__bubble--html h4 {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ai-chat-text);
}

.ai-chat-message__bubble--html blockquote {
  margin: 0.35rem 0 0.65rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--ai-chat-border);
  color: var(--ai-chat-text-muted);
}

.ai-chat-message__bubble--html code {
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  background: var(--ai-chat-surface-muted);
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
}

.ai-chat-message__bubble--html pre {
  margin: 0.35rem 0 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.375rem;
  background: var(--ai-chat-surface-muted);
  overflow-x: auto;
}

.ai-chat-message__bubble--html pre code {
  padding: 0;
  background: transparent;
}

.ai-chat-message__bubble--html hr {
  margin: 0.65rem 0;
  border: none;
  border-top: 1px solid var(--ai-chat-border);
}

/* Typing indicator */
.ai-chat-typing {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem 0.75rem;
  background: var(--ai-chat-surface-muted);
}

.ai-chat-typing.is-visible {
  display: flex;
}

.ai-chat-typing__dots {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ai-chat-border);
  border-radius: 0.875rem;
  background: var(--ai-chat-bot-bubble);
}

.ai-chat-typing__dots span {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--ai-chat-accent);
  animation: ai-chat-typing-bounce 1.2s ease-in-out infinite;
}

.ai-chat-typing__dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.ai-chat-typing__dots span:nth-child(3) {
  animation-delay: 0.3s;
}

.ai-chat-typing__label {
  font-size: 0.75rem;
  color: var(--ai-chat-text-muted);
}

/* Input area */
.ai-chat-input-area {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--ai-chat-border);
  background: var(--ai-chat-surface);
  flex-shrink: 0;
}

.ai-chat-input-area--hidden {
  display: none;
}

/* Confirm / Cancel booking actions */
.confirm-actions {
  display: flex;
  gap: 0.625rem;
  margin-top: 0.5rem;
  width: 100%;
  max-width: 20rem;
}

.btn-confirm,
.btn-cancel {
  flex: 1;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-family: var(--ai-chat-font);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
}

.btn-confirm {
  border: none;
  background: var(--ai-chat-primary-light);
  color: #fff;
}

.btn-confirm:hover:not(:disabled) {
  background: var(--ai-chat-primary);
}

.btn-cancel {
  border: 1px solid var(--ai-chat-border);
  background: transparent;
  color: var(--ai-chat-text-muted);
}

.btn-cancel:hover:not(:disabled) {
  background: var(--ai-chat-surface-muted);
  color: var(--ai-chat-text);
}

.btn-confirm:focus-visible,
.btn-cancel:focus-visible {
  outline: 2px solid var(--ai-chat-accent);
  outline-offset: 2px;
}

.btn-confirm:disabled,
.btn-cancel:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ai-chat-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  min-height: 2.75rem;
  max-height: 2.75rem;
  height: 2.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--ai-chat-border);
  border-radius: 0.5rem;
  font-family: var(--ai-chat-font);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ai-chat-text);
  background: var(--ai-chat-surface-muted);
  resize: none;
  overflow-y: auto;
  box-sizing: border-box;
  scrollbar-width: thin;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ai-chat-input::-webkit-scrollbar {
  width: 4px;
}

.ai-chat-input::-webkit-scrollbar-thumb {
  background: var(--ai-chat-border);
  border-radius: 4px;
}

.ai-chat-input:focus {
  outline: none;
  border-color: var(--ai-chat-accent);
  box-shadow: 0 0 0 3px rgb(99 102 241 / 0.15);
}

.ai-chat-input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.ai-chat-input::placeholder {
  color: var(--ai-chat-text-muted);
}

.ai-chat-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, var(--ai-chat-primary-light), var(--ai-chat-primary));
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.ai-chat-send:hover:not(:disabled) {
  transform: scale(1.03);
}

.ai-chat-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ai-chat-send:focus-visible {
  outline: 2px solid var(--ai-chat-accent);
  outline-offset: 2px;
}

@keyframes ai-chat-message-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ai-chat-typing-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-chat-window,
  .ai-chat-launcher,
  .ai-chat-message,
  .ai-chat-typing__dots span {
    animation: none;
    transition: none;
  }
}

/* Tablet — floating panel (same stack as desktop; launcher stays under the window) */
@media (min-width: 30.0625rem) and (max-width: 64rem) {
  .ai-chat-window {
    width: min(22.5rem, calc(100vw - 2.5rem));
    height: min(28rem, calc(100dvh - 7rem));
  }
}

/* Mobile — full-screen panel; launcher only when chat is closed */
@media (max-width: 30rem) {
  /* Do not span full viewport — avoids blocking page links (e.g. mailto) */
  .ai-chat-widget {
    bottom: auto;
    left: auto;
    right: auto;
    pointer-events: none;
  }

  .ai-chat-widget.is-open {
    pointer-events: none;
  }

  .ai-chat-launcher {
    position: fixed;
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    right: max(1rem, env(safe-area-inset-right, 0px));
    z-index: calc(var(--ai-chat-z) + 1);
    pointer-events: auto;
  }

  /* Avoid overlapping send — close via header ✕ only while chat is open */
  .ai-chat-widget.is-open .ai-chat-launcher {
    display: none;
  }

  .ai-chat-window {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    bottom: 0;
    border-radius: 0;
    border: none;
    transform: translateY(100%);
    pointer-events: none;
  }

  .ai-chat-widget.is-open .ai-chat-window {
    transform: translateY(0);
    pointer-events: auto;
  }

  .ai-chat-input-area {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  }
}