/**
 * @file
 * anakrys-chatbot.css
 *
 * Styles for the Anakrys Chatbot floating widget.
 *
 * Design: refined dark-glass panel with an indigo accent.
 * All layout uses CSS custom properties so integrators can
 * override easily from their own theme.
 */

/* ─── Custom properties ──────────────────────────────────────────────────── */
:root {
  --akc-accent:          #000000;        /* primary indigo */
  --akc-accent-hover:    #434ed4;
  --akc-accent-fg:       #ffffff;        /* text on accent */

  --akc-panel-bg:        #ffffff;
  --akc-panel-border:    #e2e4f0;
  --akc-panel-shadow:    0 12px 48px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  --akc-panel-radius:    18px;
  --akc-panel-w:         600px;
  --akc-panel-h:         560px;

  --akc-header-bg:       #fc0;
  --akc-header-fg:       #000000;

  --akc-msg-user-bg:     #5b65f6;
  --akc-msg-user-fg:     #ffffff;
  --akc-msg-bot-bg:      #f3f4fd;
  --akc-msg-bot-fg:      #1a1d2e;
  --akc-msg-radius:      14px;

  --akc-input-bg:        #f7f8ff;
  --akc-input-border:    #d4d7f0;
  --akc-input-focus:     #5b65f6;

  --akc-sources-bg:      #f0f1fc;
  --akc-sources-fg:      #3b3f6b;
  --akc-sources-link:    #5b65f6;

  --akc-toggle-size:     58px;
  --akc-toggle-offset:   40px;
  --akc-toggle-offset-side:   250px;

  --akc-z:               9000;           /* z-index base */

  --akc-font:            system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --akc-transition:      0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Toggle button ──────────────────────────────────────────────────────── */
.anakrys-chatbot__toggle {
  position: fixed;
  z-index: var(--akc-z);

  display: flex;
  align-items: center;
  gap: 8px;

  height: var(--akc-toggle-size);
  padding: 0 20px 0 16px;
  border: none;
  border-radius: 100px;

  background: var(--akc-accent);
  color: var(--akc-accent-fg);
  font-family: var(--akc-font);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;

  box-shadow: 0 4px 20px rgba(91, 101, 246, 0.45);
  transition:
    background var(--akc-transition),
    box-shadow var(--akc-transition),
    transform var(--akc-transition);

  /* Prevent text selection on rapid clicks */
  user-select: none;
}

.anakrys-chatbot__toggle:hover {
  background: var(--akc-accent-hover);
  box-shadow: 0 6px 28px rgba(91, 101, 246, 0.55);
  transform: translateY(-2px);
}

.anakrys-chatbot__toggle:focus-visible {
  outline: 3px solid var(--akc-accent);
  outline-offset: 3px;
}

/* Position variants */
.anakrys-chatbot__toggle.anakrys-chatbot--bottom-right {
  bottom: var(--akc-toggle-offset);
  right: var(--akc-toggle-offset-side);
}
.anakrys-chatbot__toggle.anakrys-chatbot--bottom-left {
  bottom: var(--akc-toggle-offset);
  left: var(--akc-toggle-offset);
}
.anakrys-chatbot__toggle.anakrys-chatbot--bottom-center {
  bottom: var(--akc-toggle-offset);
  left: 50%;
  transform: translateX(-50%);
}
.anakrys-chatbot__toggle.anakrys-chatbot--bottom-center:hover {
  transform: translateX(-50%) translateY(-2px);
}

/* Icon swap */
.anakrys-chatbot__toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--akc-transition), transform var(--akc-transition);
}
.anakrys-chatbot__toggle-icon--close {
  display: none;
}

/* When chat is open */
.anakrys-chatbot__toggle[aria-expanded="true"] .anakrys-chatbot__toggle-icon--open {
  display: none;
}
.anakrys-chatbot__toggle[aria-expanded="true"] .anakrys-chatbot__toggle-icon--close {
  display: flex;
}

/* ─── Backdrop ───────────────────────────────────────────────────────────── */
.anakrys-chatbot__backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--akc-z) + 1);
  background: rgba(10, 12, 30, 0.35);
  backdrop-filter: blur(2px);
  animation: akc-fade-in 0.2s ease forwards;
}
.anakrys-chatbot__backdrop[hidden] { display: none; }

/* ─── Panel ──────────────────────────────────────────────────────────────── */
.anakrys-chatbot__panel {
  position: fixed;
  z-index: calc(var(--akc-z) + 2);

  display: flex;
  flex-direction: column;

  width: var(--akc-panel-w);
  max-width: calc(100vw - 32px);
  height: var(--akc-panel-h);
  max-height: calc(100dvh - 32px);

  background: var(--akc-panel-bg);
  border: 1px solid var(--akc-panel-border);
  border-radius: var(--akc-panel-radius);
  box-shadow: var(--akc-panel-shadow);
  overflow: hidden;

  font-family: var(--akc-font);
  color: var(--akc-msg-bot-fg);

  /* Entry animation */
  transform-origin: bottom right;
  animation: akc-panel-in var(--akc-transition) forwards;
}

/* Position variants for panel */
.anakrys-chatbot__panel.anakrys-chatbot--bottom-right {
  bottom: calc(var(--akc-toggle-offset) + var(--akc-toggle-size) + 12px);
  right: var(--akc-toggle-offset);
  transform-origin: bottom right;
}
.anakrys-chatbot__panel.anakrys-chatbot--bottom-left {
  bottom: calc(var(--akc-toggle-offset) + var(--akc-toggle-size) + 12px);
  left: var(--akc-toggle-offset);
  transform-origin: bottom left;
}
.anakrys-chatbot__panel.anakrys-chatbot--bottom-center {
  bottom: calc(var(--akc-toggle-offset) + var(--akc-toggle-size) + 12px);
  left: 50%;
  transform: translateX(-50%);
  transform-origin: bottom center;
}

.anakrys-chatbot__panel[hidden] { display: none; }

/* ─── Header ─────────────────────────────────────────────────────────────── */
.anakrys-chatbot__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--akc-header-bg);
  color: var(--akc-header-fg);
  flex-shrink: 0;
}

.anakrys-chatbot__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.anakrys-chatbot__header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.anakrys-chatbot__name {
  font-size: 0.95rem;
  font-weight: 700;
}

.anakrys-chatbot__status {
  font-size: 0.72rem;
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 4px;
}
.anakrys-chatbot__status::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
}

.anakrys-chatbot__close {
  display: flex;
  padding: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--akc-header-fg);
  cursor: pointer;
  transition: background var(--akc-transition);
}
.anakrys-chatbot__close:hover {
  background: rgba(255, 255, 255, 0.3);
}
.anakrys-chatbot__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ─── Message thread ─────────────────────────────────────────────────────── */
.anakrys-chatbot__messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;

  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--akc-input-border) transparent;
}
.anakrys-chatbot__messages::-webkit-scrollbar { width: 5px; }
.anakrys-chatbot__messages::-webkit-scrollbar-track { background: transparent; }
.anakrys-chatbot__messages::-webkit-scrollbar-thumb {
  background: var(--akc-input-border);
  border-radius: 10px;
}

/* Individual message bubble */
.anakrys-chatbot__message {
  display: flex;
  flex-direction: column;
  max-width: 82%;
  animation: akc-msg-in 0.22s ease forwards;
}

.anakrys-chatbot__message--user {
  align-self: flex-end;
  align-items: flex-end;
}
.anakrys-chatbot__message--bot {
  align-self: flex-start;
  align-items: flex-start;
}

.anakrys-chatbot__bubble {
  padding: 10px 14px;
  border-radius: var(--akc-msg-radius);
  font-size: 0.875rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.anakrys-chatbot__bubble a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.5);
}
.anakrys-chatbot__bubble a:hover {
  text-decoration-color: currentColor;
}

.anakrys-chatbot__message--user .anakrys-chatbot__bubble {
  background: var(--akc-msg-user-bg);
  color: var(--akc-msg-user-fg);
  border-bottom-right-radius: 4px;
}
.anakrys-chatbot__message--user .anakrys-chatbot__bubble a {
  text-decoration-color: rgba(255,255,255,0.6);
}

.anakrys-chatbot__message--bot .anakrys-chatbot__bubble {
  background: var(--akc-msg-bot-bg);
  color: var(--akc-msg-bot-fg);
  border-bottom-left-radius: 4px;
}
.anakrys-chatbot__message--bot .anakrys-chatbot__bubble a {
  color: var(--akc-accent);
  text-decoration-color: rgba(91,101,246,0.4);
}

.anakrys-chatbot__meta {
  font-size: 0.68rem;
  color: #9da3c2;
  margin-top: 3px;
  padding: 0 4px;
}

/* Typing / loading indicator */
.anakrys-chatbot__typing {
  display: flex;
  gap: 5px;
  padding: 12px 14px;
  background: var(--akc-msg-bot-bg);
  border-radius: var(--akc-msg-radius);
  border-bottom-left-radius: 4px;
  width: fit-content;
}
.anakrys-chatbot__typing span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--akc-accent);
  opacity: 0.4;
  animation: akc-bounce 1.2s infinite ease-in-out;
}
.anakrys-chatbot__typing span:nth-child(2) { animation-delay: 0.2s; }
.anakrys-chatbot__typing span:nth-child(3) { animation-delay: 0.4s; }

/* ─── Sources section ────────────────────────────────────────────────────── */
.anakrys-chatbot__sources {
  flex-shrink: 0;
  padding: 8px 16px 6px;
  background: var(--akc-sources-bg);
  border-top: 1px solid var(--akc-panel-border);
  font-size: 0.75rem;
  color: var(--akc-sources-fg);
  max-height: 96px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.anakrys-chatbot__sources[hidden] { display: none; }

.anakrys-chatbot__sources-label {
  font-weight: 600;
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  opacity: 0.7;
}

.anakrys-chatbot__sources-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.anakrys-chatbot__sources-list li {
  display: flex;
  align-items: center;
  gap: 5px;
}
.anakrys-chatbot__sources-list li::before {
  content: '↗';
  font-size: 0.7rem;
  color: var(--akc-accent);
}
.anakrys-chatbot__sources-list a {
  color: var(--akc-sources-link);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.anakrys-chatbot__sources-list a:hover { text-decoration: underline; }

.anakrys-chatbot__source-badge {
  font-size: 0.6rem;
  padding: 1px 5px;
  border-radius: 20px;
  background: rgba(91,101,246,0.12);
  color: var(--akc-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* ─── Footer / input area ────────────────────────────────────────────────── */
.anakrys-chatbot__footer {
  flex-shrink: 0;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--akc-panel-border);
  background: var(--akc-panel-bg);
}

.anakrys-chatbot__input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.anakrys-chatbot__input {
  flex: 1;
  resize: none;
  border: 1.5px solid var(--akc-input-border);
  border-radius: 12px;
  padding: 9px 12px;
  font-family: var(--akc-font);
  font-size: 0.875rem;
  line-height: 1.45;
  background: var(--akc-input-bg);
  color: var(--akc-msg-bot-fg);
  transition: border-color var(--akc-transition), box-shadow var(--akc-transition);
  max-height: 120px;
  overflow-y: auto;
}
.anakrys-chatbot__input:focus {
  outline: none;
  border-color: var(--akc-input-focus);
  box-shadow: 0 0 0 3px rgba(91, 101, 246, 0.15);
}
.anakrys-chatbot__input::placeholder { color: #b0b4d0; }

.anakrys-chatbot__send {
  display: flex;
  align-items: center;
  padding: 2px;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: none;
  border-radius: 12px;
  background: var(--akc-accent);
  color: var(--akc-accent-fg);
  cursor: pointer;
  transition: background var(--akc-transition), transform var(--akc-transition), opacity var(--akc-transition);
}
.anakrys-chatbot__send:hover:not(:disabled) {
  background: var(--akc-accent-hover);
  transform: translateY(-1px);
}
.anakrys-chatbot__send:focus-visible {
  outline: 3px solid var(--akc-accent);
  outline-offset: 2px;
}
.anakrys-chatbot__send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── Error state ────────────────────────────────────────────────────────── */
.anakrys-chatbot__message--error .anakrys-chatbot__bubble {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* ─── Animations ─────────────────────────────────────────────────────────── */
@keyframes akc-panel-in {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
@keyframes akc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes akc-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
@keyframes akc-bounce {
  0%, 60%, 100% { transform: translateY(0);   opacity: 0.4; }
  30%            { transform: translateY(-5px); opacity: 1;   }
}

/* ─── Responsive (mobile) ────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .anakrys-chatbot__panel {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0;
  }

  .anakrys-chatbot__toggle {
    bottom: 16px !important;
    right: 16px !important;
    left: auto !important;
    transform: none !important;
  }
}

/* ─── Drupal admin toolbar offset ───────────────────────────────────────── */
body.toolbar-fixed .anakrys-chatbot__toggle,
body.toolbar-fixed .anakrys-chatbot__panel {
  /* The toolbar height is set by Drupal as CSS var or hard offset;
     we nudge down by the standard admin bar height (39px + 29px). */
}