/* ============================================================
   Workplace Chatbot – Pure CSS (no React, no MUI)
   Mirrors the styling from Chatbot.tsx styled-components

   Color palette sourced from the Workplace theme:
     primary.main:  #0a5264
     primary.dark:  #003d4d
     primary.light: #2d91a3
     background.paper: #fff
     background.default: #f9f9fb
     text.contrast: #fff (common.white)

   CSS Custom Properties (overridable via config.palette):
     --chatbot-color-primary
     --chatbot-color-primary-dark
     --chatbot-color-background
     --chatbot-color-text
   ============================================================ */

:root {
  --chatbot-color-primary: #0a5264;
  --chatbot-color-primary-dark: #003d4d;
  --chatbot-color-background: #ffffff;
  --chatbot-color-text: #ffffff;
}

/* ---------- FAB (Floating Action Button) ---------- */
.chatbot-fab {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1300;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background-color: var(--chatbot-color-primary);
  color: var(--chatbot-color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 3px 5px -1px rgba(0, 0, 0, 0.2),
    0 6px 10px 0 rgba(0, 0, 0, 0.14),
    0 1px 18px 0 rgba(0, 0, 0, 0.12);
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.chatbot-fab:hover {
  background-color: var(--chatbot-color-primary-dark);
  box-shadow:
    0 5px 5px -3px rgba(0, 0, 0, 0.2),
    0 8px 10px 1px rgba(0, 0, 0, 0.14),
    0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.chatbot-fab:focus-visible {
  outline: 3px solid var(--chatbot-color-primary-dark);
  outline-offset: 2px;
}

.chatbot-fab svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* ---------- Dialog Panel ---------- */
.chatbot-panel {
  position: fixed;
  z-index: 1301; /* above FAB so iframe receives clicks */
  overflow: hidden;
  display: none; /* hidden by default */
  flex-direction: column;
  background-color: var(--chatbot-color-background);
  /* Desktop defaults */
  bottom: 80px;
  right: 16px;
  width: 400px;
  max-height: 700px;
  height: calc(100vh - 96px); /* 80px bottom offset + 16px top breathing room */
  border-radius: 8px;
  box-shadow:
    0 3px 5px -1px rgba(0, 0, 0, 0.2),
    0 6px 10px 0 rgba(0, 0, 0, 0.14),
    0 1px 18px 0 rgba(0, 0, 0, 0.12);
}

.chatbot-panel--open {
  display: flex;
}

/* ---------- Iframe ---------- */
.chatbot-iframe {
  flex: 1;
  width: 100%;
  border: none;
}

/* ---------- Fullscreen (mobile < 900px) ---------- */
@media (max-width: 899px) {
  .chatbot-panel {
    top: 0;
    left: 0;
    bottom: auto;
    right: auto;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }
}