@keyframes scopeLabelFlash {
  0%   { background-color: transparent; color: inherit; }
  20%  { background-color: #ef4444; color: #fff; border-radius: 4px; padding: 1px 4px; }
  80%  { background-color: #ef4444; color: #fff; border-radius: 4px; padding: 1px 4px; }
  100% { background-color: transparent; color: inherit; }
}

/* Chat ιστορικό (αριστερό panel): show/hide toggle, ίδιο concept με το preview
   toggle του /rag/notes — collapse σε στενή λωρίδα όπου το κουμπί toggle (μέσα
   στο #chat_history_header) παραμένει πάντα ορατό για re-open. */
#chat_history_panel {
  width: 25%; /* w-60 */
  transition: width 0.15s ease;
  overflow: hidden;
}

#chat_history_panel.collapsed {
  width: 3rem;
}

#chat_history_panel.collapsed #chat_history_header {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
}

#chat_history_panel.collapsed #chat-list {
  display: none;
}

#chat_history_toggle_icon {
  transition: transform 0.15s ease;
}

/* Chat history toggle: ορατό border + background πάντα, πιο έντονο on hover */
#chat_history_toggle {
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.05);
}

#chat_history_toggle:hover {
  border-color: rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.12);
}

/* Mobile: το input row στριμώχνεται (νέα συνομιλία + attach + textarea + send
   στην ίδια γραμμή) — 1η γραμμή: νέα συνομιλία + textarea (μαζί)· 2η γραμμή:
   send μόνο του, full-width· attach κρύβεται. Δεν αγγίζει sidebar/ιστορικό. */
@media (max-width: 480px) {
  .chat_attach_btn {
    display: none;
  }
  .chat_input_row {
    flex-wrap: wrap;
  }
  .chat_ask_textarea {
    min-width: 0;
    min-height: 3.6rem; /* ~2 γραμμές, αντί για 1 */
  }
  .chat_send_btn,
  .chat_stop_btn {
    flex-basis: 100%;
    width: 100%;
  }
}

/* Τιμή/Εικόνα/Σύνδεσμος ενωμένα στην ίδια γραμμή (βλ. ChatAI::mergePriceImageLinkLines) — κάθε
   πεδίο σε δικό του inline-block ώστε label+value να μένουν μαζί σε wrap, όχι να σπάει το
   "Σύνδεσμος:" από το κουμπί/link του σε στενή οθόνη. */
.chat-field {
  display: inline-block;
}

/* Κάθε "κάρτα" (top-level bullet με τίτλο προϊόντος) μέσα σε απάντηση του μοντέλου — ΟΧΙ τα
   εσωτερικά πεδία της (αυτά ζουν σε nested <ul>, ένα επίπεδο βαθύτερα, άρα δεν πιάνονται από
   το `> ul > li`).
   Το `.stream-body` είναι ο wrapper του live streaming bubble (βλ. chat.js prependStreamingBubble/
   finalizeStreamingBubble)· στο reload (appendMessage) το HTML μπαίνει απευθείας στο `.ai-bubble`.
   Χωρίς το δεύτερο selector η ίδια απάντηση φαινόταν μορφοποιημένη μόνο μετά το reload της συνομιλίας. */
.ai-bubble > ul > li,
.ai-bubble > .stream-body > ul > li {
  margin: 0.7rem 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-left: 0.2rem solid var(--color-primary, #3a5fa0);
}

/* Click-to-load εικόνων μέσα στις απαντήσεις: placeholder κουμπί -> <img> μετά από click. */
.chat-img-load {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  margin: 0.15rem 0;
  font-size: 0.85em;
  line-height: 1.2;
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, currentColor 6%, transparent);
  cursor: pointer;
}
.chat-img-load:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.chat-img-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 0.4rem 0;
}
.chat-img-rendered {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}
.chat-img-close {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}
.chat-img-close:hover {
  background: rgba(0, 0, 0, 0.75);
}
.chat-img-error {
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.6;
}

/* Μη-clickable URL: συντομευμένο κείμενο + κουμπί αντιγραφής του πλήρους URL (data-url).
   Το break-all μένει ως δίχτυ ασφαλείας — το κείμενο είναι ήδη κομμένο server-side. */
.chat-url {
  word-break: break-all;
  opacity: 0.85;
}
.chat-url-copy {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 0.25rem;
  padding: 0 0.2rem;
  font-size: 0.9em;
  line-height: 1.2;
  border: 0;
  background: none;
  opacity: 0.6;
  cursor: pointer;
}
.chat-url-copy:hover {
  opacity: 1;
}
.chat-url-copy.copied {
  opacity: 1;
  color: var(--color-success, green);
}

/* AI bubble (daisyUI chat-start): το "μυτάκι" προεπιλογή είναι κάτω-αριστερά —
   το μεταφέρουμε πάνω-αριστερά (δίπλα στο chat-header) γυρνώντας τη μάσκα
   κατακόρυφα και αντιστρέφοντας ποια γωνία μένει "κοφτή". */
#chat-messages .ai-bubble.chat-bubble {
  border-end-start-radius: var(--radius-field);
  border-start-start-radius: 0;
}
#chat-messages .ai-bubble.chat-bubble:before {
  top: 0;
  bottom: auto;
  transform: scaleY(-1);
}

/* User bubble (daisyUI chat-end): το "μυτάκι" προεπιλογή είναι κάτω-δεξιά —
   το μεταφέρουμε πάνω-δεξιά (δίπλα στο chat-header) με τον ίδιο τρόπο. */
#chat-messages .chat-end .chat_user_bubble.chat-bubble {
  border-end-end-radius: var(--radius-field);
  border-start-end-radius: 0;
}
#chat-messages .chat-end .chat_user_bubble.chat-bubble:before {
  top: 0;
  bottom: auto;
  transform: scaleY(-1);
}

/* .chat (daisyUI, chat-start) είναι CSS grid 2 στηλών (auto | 1fr) — μόνο
   .chat-header/.chat-image/.chat-bubble/.chat-footer έχουν ρητό grid-column-start.
   Το .stream-sources (sibling μετά το .chat-bubble, βλ. chat.js
   prependStreamingBubble/finalizeStreamingBubble) δεν είχε κανένα — το grid
   auto-placement το έστελνε στη στενή στήλη 1 (avatar), αντί κάτω από τη
   φυσαλίδα. Ρητή τοποθέτηση στη στήλη 2 (ίδια με .chat-bubble). */
#chat-messages .chat_ai_turn.chat-start .stream-sources {
  grid-column-start: 2;
}

/* Απάντηση: όλο το διαθέσιμο πλάτος της στήλης (αντί για max-w-3xl / 90% του daisyUI). */
#chat-messages .chat_ai_turn.chat-start .ai-bubble.chat-bubble {
  width: 100%;
  max-width: none;
}

/* Ερώτηση: σκούρο μπλε (primary) με λευκά γράμματα — το «μυτάκι» (:before) κληρονομεί το φόντο. */
#chat-messages .chat-end .chat_user_bubble.chat-bubble {
  background-color: var(--color-primary);
  color: #fff;
}