/*
 * Styles for the ask page's chat window.
 *
 * Kept as a separate static file rather than inlined in the template: the
 * widget is embedded as an iframe that reloads on every page navigation on
 * the host site (see views.py, VISITOR_COOKIE), so a cacheable file avoids
 * re-downloading identical CSS on every reload.
 *
 * Colors and shapes are declared once below as custom properties and used
 * everywhere else by name, rather than repeated as literals through the
 * file. That keeps the palette consistent by construction, and leaves one
 * place to change if a given clinic ever wants its own accent color.
 *
 * The window itself carries no border-radius or shadow: it is built to fill
 * whatever box the embedding iframe gives it edge to edge. The floating,
 * rounded-card look comes from the host page's own CSS on that iframe
 * element (border-radius, box-shadow, overflow: hidden) — the same way
 * every embeddable chat widget works, because the content can't round or
 * shadow a frame it doesn't control the outside of.
 */

:root {
  /* Brand accent: the header bar, the visitor's own messages, citation
     links, the send button. The real value for every configured site lives
     in that site's own accent-<site>.css (see ragservice/views.py, which
     links it in alongside this file); what's set here is only the fallback
     for a site that has none — see ask.html's comment on the second <link>. */
  --color-primary: #2a6;
  --color-on-primary: #fff;
  --color-on-primary-muted: rgba(255, 255, 255, 0.85);
  --color-on-primary-wash: rgba(255, 255, 255, 0.18);

  /* The accent as a diagonal gradient — lighter top-left, darker
     bottom-right — the same recipe as the launcher button in embed.js, so
     the header, the visitor's bubbles and the send button match the button
     the visitor clicked to get here. Derived from --color-primary rather
     than set per clinic, so every accent-<site>.css gets it for free. Every
     rule that uses it sets a plain --color-primary background first, as the
     fallback for a browser without color-mix(). */
  --gradient-primary: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 70%, #fff) 0%,
    var(--color-primary) 55%,
    color-mix(in srgb, var(--color-primary) 75%, #000) 100%
  );
  /* A soft glow in the accent color, for shadows that should read as "lit"
     rather than as a gray drop shadow. */
  --color-primary-glow: color-mix(in srgb, var(--color-primary) 35%, transparent);
  /* A barely-there tint of the accent behind the message list. */
  --color-primary-tint: color-mix(in srgb, var(--color-primary) 6%, #fff);

  /* Body text and secondary/tertiary text (debug figures, captions). */
  --color-text: #1a1a1a;
  --color-muted: #888;
  --color-faint: #999;
  --color-faint-alt: #aaa;

  /* Surfaces and borders. */
  --color-page: #fff;
  --color-surface: #f5f7f6;
  --color-border: #ccc;
  --color-border-light: #e5e5e5;

  /* The rate-limit banner. */
  --color-danger: #a33;
  --color-danger-bg: #fdf3f3;
  --color-danger-border: #f0d8d8;

  /* Corner radii shared by the compose bar's controls and the chat bubbles. */
  --radius-control: 20px;
  --radius-bubble: 14px;

  /* The horizontal inset every section applies for itself. The header and
     compose bar's own backgrounds need to reach the window's edges, so this
     can no longer live as padding on <body> the way a plain document's
     would. */
  --inset: 1rem;
}


/*
 * Page layout: one column, viewport height. A header that never moves, a
 * scrolling message list in between, and the compose bar pinned under it —
 * the layout every chat interface uses, so the box you type into never
 * drifts away as the conversation grows.
 */

body {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100vh;
  max-width: 720px;
  margin: 0 auto;
  background: var(--color-page);
  color: var(--color-text);
  font-family: system-ui, sans-serif;
}

/*
 * The header bar: who the visitor is talking to, and a way to hand the
 * widget back to its launcher bubble.
 */

.chat-header {
  position: relative;
  overflow: hidden;
  flex: none;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem var(--inset);
  background: var(--color-primary);
  background: var(--gradient-primary);
  color: var(--color-on-primary);
  box-shadow: 0 4px 14px var(--color-primary-glow);
  /* Above the message list, so its glow falls onto the list, not under it. */
  z-index: 1;
}

/* A band of light that sweeps across the header once when the window
   loads — the same sweep the teaser bubble gets in embed.js, so opening the
   chat feels like a continuation of the invitation. pointer-events: none
   keeps it from ever catching a click meant for the header's buttons. */
.chat-header::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  pointer-events: none;
  animation: header-shine 1.2s ease-out .35s 1 both;
}

@keyframes header-shine {
  from { left: -60%; }
  to { left: 130%; }
}

.chat-header-icon {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-on-primary-wash);
}

/* A small green "online" dot on the assistant's avatar: the familiar sign
   that someone is there to answer right now. The white ring separates it
   from whichever accent color the header has. */
.chat-header-icon::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #3ccf73;
}

@media (prefers-reduced-motion: reduce) {
  .chat-header::after {
    animation: none;
    display: none;
  }
}

.chat-header-text {
  flex: 1 1 auto;
  min-width: 0;
}

.chat-header-title {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.3;
}

.chat-header-subtitle {
  overflow: hidden;
  color: var(--color-on-primary-muted);
  font-size: .75rem;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chat-header-close,
.chat-header-expand {
  flex: none;
  display: flex;
  padding: .3rem;
  border: 0;
  background: none;
  color: var(--color-on-primary-muted);
  cursor: pointer;
}

.chat-header-close:hover,
.chat-header-expand:hover {
  color: var(--color-on-primary);
}

/* While the window is enlarged the control stays lit, so it reads as a
   toggle that is currently on rather than a button that did nothing. */
.chat-header-expand.is-enlarged {
  color: var(--color-on-primary);
}

.store {
  flex: none;
  margin: 0;
  padding: .5rem var(--inset) 0;
  color: var(--color-muted);
  font-size: 11px;
}

.store code {
  font-size: 11px;
}

.tuning {
  color: var(--color-faint-alt);
  font-size: 10px;
}

.limit {
  flex: none;
  margin: 0 var(--inset) .6rem;
  padding: .7rem .9rem;
  border: 1px solid var(--color-danger-border);
  border-radius: 6px;
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

/*
 * The message list. flex: 1 so it takes whatever height the header and the
 * compose bar leave it; min-height: 0 overrides flexbox's default of never
 * shrinking a child below its content size, which without this would grow
 * the list instead of scrolling it.
 */

#chat {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: .8rem var(--inset) 1rem;
  /* A faint wash of the accent fading to white, so the list area belongs
     to the clinic's color without competing with the bubbles on it. */
  background: linear-gradient(180deg, var(--color-primary-tint), var(--color-page) 60%);
}

.message {
  display: flex;
  flex-direction: column;
}

/*
 * Visitor on the right, assistant on the left — the one convention every
 * chat surface shares, so which side a bubble sits on tells you who wrote
 * it before you have read a word of it.
 */

.message.visitor {
  align-self: flex-end;
  align-items: flex-end;
  max-width: 85%;
}

.message.assistant {
  align-self: flex-start;
  width: 100%;
}

.message.visitor p {
  margin: 0;
  padding: .55rem .9rem;
  border-radius: var(--radius-bubble) var(--radius-bubble) 3px var(--radius-bubble);
  background: var(--color-primary);
  background: var(--gradient-primary);
  color: var(--color-on-primary);
  box-shadow: 0 4px 12px var(--color-primary-glow);
  white-space: pre-wrap;
  line-height: 1.4;
}

.answer {
  box-sizing: border-box;
  padding: .8rem 1rem;
  border-radius: 3px var(--radius-bubble) var(--radius-bubble) var(--radius-bubble);
  background: var(--color-surface);
  /* A light lift so the answer sits on the tinted list as a card. */
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  white-space: pre-wrap;
  line-height: 1.5;
}

/*
 * Sits inside an empty .answer while retrieval and the first model token are
 * still on their way, so the bubble reads as "working on it" rather than
 * nothing having happened yet. Removed by the same write that puts real text
 * in the bubble (see ask.js) — no separate hide step.
 */
.typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: .2rem 0;
}

.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-faint);
  animation: typing-bounce 1.2s infinite ease-in-out;
}

.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .typing span {
    animation: none;
    opacity: .6;
  }
}

/*
 * Citation markers ([1], [2]) sitting inline in an answer. Rendered as a small
 * raised superscript so they stay out of the way of the sentence they hang off
 * — the reference number matters far less than the prose, and these are on
 * their way out of the UI entirely. The font-size / line-height / position
 * trio is the browser's own recipe for <sup>: it lifts the marker without
 * adding height to the line it sits on. white-space: nowrap keeps "[1]" from
 * being split across a line break.
 */
.citation {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
  white-space: nowrap;
}

.citation:hover {
  text-decoration: underline;
}

/* The address a visitor asked for ("pošli mi odkaz na ceník"), appended by
   append_requested_link. Unlike a citation it is the answer itself, so it is
   drawn full size and underlined — it has to look clickable at a glance. */
.answer-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  word-break: break-all;
}

.sources {
  margin: .5rem .2rem 0;
}

.sources h2 {
  margin: 0 0 .3rem;
  color: var(--color-faint);
  font-size: .8rem;
  font-weight: 600;
}

.sources li {
  color: var(--color-faint);
  font-size: .8rem;
}

.empty {
  margin: 0 0 .4rem;
  color: var(--color-muted);
}

/*
 * The compose bar. flex: none keeps it its own height regardless of what
 * #chat is doing; it sits at the bottom simply because it is the last flex
 * child and #chat has already claimed the space above it.
 */

form {
  flex: none;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem var(--inset);
  border-top: 1px solid var(--color-border-light);
}

input[name="q"] {
  flex: 1;
  padding: .6rem .9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  font-size: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* While typing, the input is ringed in the accent color instead of the
   browser's default blue outline, which clashes with every clinic palette. */
input[name="q"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}

/*
 * A round icon button rather than a labelled one: the compose bar is the one
 * place in the window narrow enough on a phone-width panel that a text
 * button ("Zeptat se") competes with the input for room. The arrow is
 * universal enough not to need a label of its own; the accessible name comes
 * from the button's aria-label in the template.
 */
.send-button {
  flex: none;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary);
  background: var(--gradient-primary);
  color: var(--color-on-primary);
  box-shadow: 0 4px 12px var(--color-primary-glow);
  cursor: pointer;
  transition: transform .15s ease;
}

.send-button:not(:disabled):hover {
  transform: scale(1.08);
}

/* Disabled while an answer is still being written (see setWaiting in
 * ask.js): faded, so it reads as "not now" rather than as broken. */
.send-button:disabled {
  opacity: 0.5;
  cursor: default;
}