/* * 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-.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 . */ --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); /* 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 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 { flex: none; display: flex; align-items: center; gap: .75rem; padding: .85rem var(--inset); background: var(--color-primary); color: var(--color-on-primary); } .chat-header-icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-on-primary-wash); } .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; } .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); color: var(--color-on-primary); 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); 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 ^{: 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;
}

.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;
}

/*
* 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);
color: var(--color-on-primary);
cursor: pointer;
}}