/* AnnalesDNB — chatbot.css : widget flottant FAQ */

#chatbot-root {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 400;
}

#chatbot-toggle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--color-marine);
  color: var(--color-white);
  font-size: var(--text-2xl);
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), transform var(--transition);
}
#chatbot-toggle:hover {
  background: var(--color-marine-light);
  transform: scale(1.05);
}

#chatbot-panel {
  position: fixed;
  bottom: calc(var(--space-6) + 68px);
  right: var(--space-6);
  width: min(360px, calc(100vw - 2 * var(--space-4)));
  max-height: min(520px, calc(100vh - 140px));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#chatbot-panel[hidden] { display: none; }

.chatbot__header {
  background: var(--color-marine);
  color: var(--color-white);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}
.chatbot__header button {
  background: none;
  border: none;
  color: var(--color-white);
  font-size: var(--text-lg);
  cursor: pointer;
  line-height: 1;
}

.chatbot__intro {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

.chatbot__messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 160px;
}

.chatbot__bubble {
  max-width: 88%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  line-height: 1.4;
  white-space: pre-wrap;
}
.chatbot__bubble--user {
  align-self: flex-end;
  background: var(--color-marine);
  color: var(--color-white);
  border-bottom-right-radius: var(--radius-sm);
}
.chatbot__bubble--bot {
  align-self: flex-start;
  background: var(--color-bg-alt);
  color: var(--color-text);
  border-bottom-left-radius: var(--radius-sm);
}
.chatbot__bubble-link {
  display: inline-block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
}
.chatbot__bubble-source {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.chatbot__form {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.chatbot__form input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--text-sm);
}

@media (max-width: 480px) {
  #chatbot-panel {
    right: var(--space-3);
    left: var(--space-3);
    width: auto;
    bottom: calc(var(--space-4) + 68px);
  }
  #chatbot-root {
    right: var(--space-4);
    bottom: var(--space-4);
  }
}