/* =========================================================
   CO3PEDIA Chatbot — style_chatbot.css (final)
   - Single scroll area (#chatbot-messages)
   - Section-tinted bubbles
   - Header controls + collapse
   - Context preview + meta panels + toolbar
   ========================================================= */

/* -------------------------
   Container + layout
   ------------------------- */
#chatbot-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0; /* important for flex children scrolling */
  background: white;

  /* isolate from global defaults */
  font-family: var(--font-main, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}

#chatbot-container *,
#chatbot-container *::before,
#chatbot-container *::after {
  box-sizing: border-box;
}

/* neutralize global style.css rules on ALL buttons/labels inside the chatbot */
#chatbot-container button {
  margin: 0;
  box-shadow: none;
}

#chatbot-container label {
  margin: 0;
}

/* Collapsed state (JS toggles .collapsed on #chatbot-container) */
#chatbot-container.collapsed #chatbot-body,
#chatbot-container.collapsed #chatbot-input-container {
  display: none;
}

#chatbot-container.collapsed #chatbot-header {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* -------------------------
   Header
   ------------------------- */
#chatbot-header {
  background-color: #EBAA3F;
  color: white;
  padding: 10px 12px;
  cursor: default; /* header itself isn't clickable */
  flex-shrink: 0;

  font-family: var(--font-main, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  font-size: var(--fs-lg, 1.2rem);
  font-weight: var(--fw-medium, 500);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#chatbot-title {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Header controls (added by JS) */
#chatbot-header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Collapse button */
#chatbot-collapse-btn {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.15);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-shadow: none; /* ensure global button shadow never shows */
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1;
}
#chatbot-collapse-btn::before { content: "▾"; }
#chatbot-container.collapsed #chatbot-collapse-btn::before { content: "▸"; }

#chatbot-collapse-btn:hover { background: rgba(255,255,255,0.22); }
#chatbot-collapse-btn:focus-visible {
  outline: 2px solid rgba(255,255,255,0.75);
  outline-offset: 2px;
}

/* Mode toggle (forced to assistant, chat disabled) */
#chatbot-mode-toggle {
  display: inline-flex;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 8px;
  overflow: hidden;
}
#chatbot-mode-toggle .mode-btn {
  border: none;
  padding: 6px 10px;
  font-family: var(--font-main);
  font-size: var(--fs-sm);
  cursor: default;
  background: rgba(255,255,255,0.15);
  color: white;
}
#chatbot-mode-toggle .mode-btn.active {
  background: rgba(255,255,255,0.30);
  font-weight: var(--fw-medium);
}
#chatbot-mode-toggle .mode-btn.disabled { opacity: 0.6; }

/* -------------------------
   Body + messages (single scroll area)
   ------------------------- */
#chatbot-body {
  flex: 1 1 auto;
  min-height: 0; /* enables inner scroll */
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden; /* avoid nested scrollbars */
}

#chatbot-messages {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  scroll-behavior: smooth;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

/* -------------------------
   Message bubbles (base)
   ------------------------- */
.chat-bubble {
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 10px;
  display: inline-block;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-sizing: border-box;

  font-family: var(--font-main);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: 1.25;
}

.chat-bubble.user {
  margin-left: auto;
  align-self: flex-end;
  text-align: left;
  background-color: #4CAF50;
  color: white;
  font-weight: var(--fw-medium);
}

.chat-bubble.bot {
  margin-right: auto;
  align-self: flex-start;
  text-align: left;
  background-color: #eee;
  color: #333;
}

/* Inline icon/image in bubbles */
.chat-bubble img {
  margin-top: .1em;
  width: 1em;
  height: 1em;
}

/* Reset margins inside bubble content */
.chat-bubble p {
  margin: 0.4em 0;
  padding: 0;
  text-align: left;
}

/* Status bubble (progress streaming) */
.status-bubble {
  opacity: 0.9;
  font-size: var(--fs-sm);
  background: rgba(255,255,255,0.6);
  border: 1px dashed rgba(0,0,0,0.15);
}

/* Error bubble + Retry button */
.error-bubble {
  border: 1px solid rgba(200, 0, 0, 0.25);
  background: rgba(255, 230, 230, 0.75);
}
.error-bubble .error-text {
  font-family: var(--font-main);
  font-size: var(--fs-md);
  color: #7a0000;
}
.retry-btn {
  margin-top: 8px;
  border: 1px solid rgba(200, 0, 0, 0.25);
  background: white;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: var(--fs-sm);
}
.retry-btn:focus-visible {
  outline: 2px solid rgba(200, 0, 0, 0.35);
  outline-offset: 2px;
}

/* -------------------------
   Markdown styling inside assistant replies
   (JS should wrap rendered markdown with .chatbot-markdown)
   ------------------------- */
.chatbot-markdown h1,
.chatbot-markdown h2,
.chatbot-markdown h3 {
  font-size: var(--fs-lg);
  margin: 0.55em 0 0.35em 0;
  font-weight: var(--fw-medium);
}

.chatbot-markdown p { margin: 0.4em 0; }

.chatbot-markdown ul,
.chatbot-markdown ol {
  margin: 0.35em 0 0.35em 1.4em;
}
.chatbot-markdown li { margin: 0.15em 0; }

.chatbot-markdown code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
  padding: 0.12em 0.35em;
  border-radius: 6px;
  background: rgba(0,0,0,0.06);
}

.chatbot-markdown pre {
  margin: 0.6em 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.06);
  overflow-x: auto;
}
.chatbot-markdown pre code { background: transparent; padding: 0; }

/* -------------------------
   Typing-in-progress cursor (text-node reveal)
   The JS adds .typing-in-progress on the bubble during the
   typewriter animation; it is removed when typing completes.
   ------------------------- */
.chat-bubble.bot.typing-in-progress .chatbot-markdown {
  /* ensure the cursor pseudo-element is positioned relative to this wrapper */
  position: relative;
}

.chat-bubble.bot.typing-in-progress .chatbot-markdown::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: #888;
  vertical-align: text-bottom;
  margin-left: 1px;
  animation: chatbot-blink 600ms steps(2, start) infinite;
}

@keyframes chatbot-blink {
  to { opacity: 0; }
}

/* -------------------------
   Input area
   ------------------------- */
#chatbot-input-container {
  padding: 10px;
  border-top: 1px solid #ddd;

  /* keep input + disclaimer always visible */
  flex: 0 0 auto;
  flex-shrink: 0;
  background: #fff;
  position: relative;
  z-index: 2;
}

#chatbot-input-bar {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  gap: 8px;

  /* match rows="2" feel; still allows growth */
  min-height: calc(1.4em * 2 + 16px);
  max-height: calc(1.4em * 6 + 16px);
}

/* Growing textarea */
#chatbot-input {
  width: 100%;
  resize: none;
  border: none;
  outline: none;
  background: transparent;

  font-family: var(--font-main);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  color: var(--Default_Text);
  line-height: 1.4;

  padding: 6px 8px;
  overflow-y: auto;
  min-height: calc(1.4em * 2);
  max-height: calc(1.4em * 6);
  box-sizing: border-box;

  flex: 1 1 auto;
}

#chatbot-input::placeholder {
  font-family: var(--font-main);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  color: var(--Light_Text);
  opacity: 0.6;
}

#chatbot-input:focus-visible {
  outline: 2px solid rgba(235, 170, 63, 0.35);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Send icon button */
#chatbot-send {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: none;
  background-color: transparent;
  background-image: url('ressources/Send.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  padding: 0;
}
#chatbot-send:hover { transform: scale(1.08); }
#chatbot-send:active { transform: scale(1.00); }
#chatbot-send:focus-visible {
  outline: 2px solid rgba(235, 170, 63, 0.55);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Disclaimer */
#chatbot-disclaimer {
  font-size: var(--fs-sm);
  color: #888;
  text-align: center;
  margin-top: 5px;
  padding: 5px;
}
#chatbot-disclaimer_rag {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);

  /* force readable color (some layouts may set --Light_Text too light) */
  color: #6f6f6f;

  margin-top: 6px;
  padding: 2px 4px 0 4px;
  line-height: 1.25;
  text-align: center;
  min-height: 1.1em; /* avoids “vanish” feeling when layout changes */
}

/* -------------------------
   Context controls (manual typed messages only)
   ------------------------- */
#chatbot-context-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  /* row-gap / col-gap for cleaner alignment */
  gap: 8px 16px;

  padding: 6px 2px 10px 2px;
}

/* If your JS wraps an option as <label class="ctx-opt">...</label> */
#chatbot-context-controls .ctx-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

/* If your structure is legacy: <input> then <label> as siblings */
#chatbot-context-controls input[type="checkbox"] + label {
  margin-right: 14px;
}

/* Keep the preview button nicely aligned to the right when there’s room */
#chatbot-context-preview-toggle {
  margin-left: auto;
}

#chatbot-context-controls input[type="checkbox"] {
  transform: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #EBAA3F;
  flex: 0 0 auto;
}

#chatbot-context-controls label {
  font-family: var(--font-main, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  font-size: var(--fs-sm, 0.95rem);
  color: var(--Default_Text, #333);
  opacity: 0.9;

  margin: 0;              /* override global margin-left + !important patterns */
  padding: 0;
  line-height: 1.2;
  user-select: none;
}

#chatbot-context-preview-toggle {
  border: 1px solid #ccc;
  background: white;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: var(--fs-sm);
}
#chatbot-context-preview-toggle:focus-visible {
  outline: 2px solid rgba(0,0,0,0.25);
  outline-offset: 2px;
}

#chatbot-context-preview {
  width: 100%;
  border: 1px solid #e1e1e1;
  background: #fafafa;
  border-radius: 8px;
  padding: 8px 10px;
  box-sizing: border-box;
}
#chatbot-context-preview.collapsed { display: none; }

#chatbot-context-preview .ctx-head {
  font-family: var(--font-main);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  margin-bottom: 6px;
}

#chatbot-context-preview .ctx-item {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  padding: 4px 0;
  border-top: 1px dashed #e6e6e6;
}
#chatbot-context-preview .ctx-k,
#chatbot-context-preview .ctx-v,
#chatbot-context-preview .ctx-empty,
#chatbot-context-preview .ctx-more {
  font-family: var(--font-main);
  font-size: var(--fs-sm);
}
#chatbot-context-preview .ctx-k {
  color: var(--Default_Text);
  opacity: 0.9;
}
#chatbot-context-preview .ctx-v {
  color: var(--Default_Text);
  opacity: 0.75;
}
#chatbot-context-preview .ctx-empty,
#chatbot-context-preview .ctx-more {
  color: var(--Light_Text);
  opacity: 0.9;
}

/* -------------------------
   Assistant meta (reflection / docs / sites) + expandable docs list
   ------------------------- */
.chat-meta {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-family: var(--font-main);
  font-size: var(--fs-sm);
  color: var(--Default_Text);
  opacity: 0.9;
}

.chat-meta .meta-line { margin: 2px 0; }

.chat-meta .meta-expandable {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.docs-panel {
  margin-top: 6px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 8px;
  background: rgba(255,255,255,0.65);
  padding: 8px 10px;
}
.docs-panel.collapsed { display: none; }

.docs-panel .doc-item {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 10px;
  padding: 4px 0;
  border-top: 1px dashed rgba(0,0,0,0.08);
}
.docs-panel .doc-item:first-child { border-top: none; }
.docs-panel .doc-fn { opacity: 0.95; }
.docs-panel .doc-origin,
.docs-panel .doc-score {
  opacity: 0.70;
  text-align: right;
}
.docs-panel .doc-empty { opacity: 0.7; }

/* Dev debug panel */
.chat-meta .debug-toggle {
  margin-top: 8px;
  border: 1px solid rgba(0,0,0,0.15);
  background: white;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: var(--fs-sm);
}
.chat-meta .debug-toggle:focus-visible {
  outline: 2px solid rgba(0,0,0,0.25);
  outline-offset: 2px;
}

.chat-meta .debug-panel {
  margin-top: 6px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.8);
  padding: 8px 10px;
  font-size: 12px;
  overflow-x: auto;
  white-space: pre-wrap;
}
.chat-meta .debug-panel.collapsed { display: none; }

/* -------------------------
   Assistant toolbar (Copy / Insert disabled / 👍 👎 / Regenerate)
   ------------------------- */
.chat-toolbar {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chat-toolbar .tb-btn {
  border: 1px solid rgba(0,0,0,0.18);
  background: white;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: var(--fs-sm);
  line-height: 1;
}
.chat-toolbar .tb-btn:hover { transform: translateY(-1px); }
.chat-toolbar .tb-btn:active { transform: translateY(0); }

.chat-toolbar .tb-btn.disabled,
.chat-toolbar .tb-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.chat-toolbar .tb-btn:focus-visible {
  outline: 2px solid rgba(0,0,0,0.22);
  outline-offset: 2px;
}

/* -------------------------
   Section-specific tints (user/bot)
   ------------------------- */
/* Collaboration – Soft Rose */
.collaboration-bubble.user { background-color: #e8b3b3; color: #4a0000; }
.collaboration-bubble.bot  { background-color: #f9ecec; color: #4a0000; }

/* Analyse – Warm Sand Beige */
.analyse-bubble.user { background-color: #f2d1aa; color: #5a3b11; }
.analyse-bubble.bot  { background-color: #fcead7; color: #5a3b11; }

/* Info Préliminaire – Soft Apricot Cream */
.infoPreliminaire-bubble.user { background-color: #f6cda3; color: #704210; }
.infoPreliminaire-bubble.bot  { background-color: #fcf0dd; color: #704210; }

/* Info Technique – Misty Steel Blue */
.infoTechnique-bubble.user { background-color: #c2b6eb; color: #3c2765; }
.infoTechnique-bubble.bot  { background-color: #e7eef8; color: #3c2765; }

/* Info Pédagogique – Pale Honey */
.infoPedagogique-bubble.user { background-color: #fbeea8; color: #6b5a00; }
.infoPedagogique-bubble.bot  { background-color: #fff4cf; color: #6b5a00; }

/* Scenario Activités – Balanced Mint */
.scenarioActivites-bubble.user { background-color: #b8dbc9; color: #1e4936; }
.scenarioActivites-bubble.bot  { background-color: #e2f2e7; color: #1e4936; }

/* Production – Lavender Grey */
.production-bubble.user { background-color: #c4c9e2; color: #2f3751; }
.production-bubble.bot  { background-color: #e9ecf5; color: #2f3751; }

/* Évaluation – Dusty Lilac */
.evaluation-bubble.user { background-color: #cfb1e4; color: #3d2d53; }
.evaluation-bubble.bot  { background-color: #f1e4f7; color: #3d2d53; }

/* Calendrier – True Light Blue-Grey */
.calendrier-bubble.user { background-color: #aac8eb; color: #123d67; }
.calendrier-bubble.bot  { background-color: #e8eaf1; color: #123d67; }

/* Soumettre – Soft Neutral Ivory */
.Soumettre-bubble.user { background-color: #d9d4cc; color: #443c33; }
.Soumettre-bubble.bot  { background-color: #f4f1eb; color: #443c33; }

/* -------------------------
   Legacy / compatibility
   ------------------------- */
.hidden { display: none; }

/* Old prompt toggles (if still used somewhere) */
.toggle-prompt {
  background-color: transparent;
  border: none;
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}
.toggle-prompt:hover { color: darkblue; }

/* If legacy .user-message / .bot-message are still emitted, keep them readable */
.user-message,
.bot-message {
  padding: 8px;
  border-radius: 8px;
  margin: 4px 0;
  font-family: var(--font-main);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.user-message { background-color: #e0f7fa; }
.bot-message  { background-color: #f1f8e9; }

.user-message::before,
.bot-message::before {
  content: attr(data-section) " - ";
  font-weight: var(--fw-medium);
}

.user-message::before { color: #00796b; }
.bot-message::before  { color: #558b2f; }

/* Legacy .copy-button removed: Copy now lives in .chat-toolbar */
.copy-button { display: none; }