4d92488f0c
Translation
- Stop scrubbing markdown before sending it to LibreTranslate. The scrub
deleted ordered-list numbering ("1. Give amoxicillin" -> "Give amoxicillin"),
flattened tables into ambiguous whitespace and ate underscores inside
identifiers. Raw markdown now goes to the translator unchanged.
- Render the translation through the same markdown pipeline as the original
bubble, with the message's own sources, so [n] markers come back as the usual
clickable .assistant-cite chips instead of escaped literal text. Headings,
lists and tables survive with them.
- When the translator drops citation markers, surface the affected sources in a
recovery block rather than letting the evidence disappear.
- Image cards are live nodes: they are now re-attached on every path out of a
translation (success, failure and Show original), so a failed translation no
longer silently removes a generating image from the message.
Patient take home
- Add a language selector to the take-home modal, reusing the existing
/translate endpoint and offering only what the local LibreTranslate reports.
- Copy, Export and Email carry what the caregiver is actually reading; the
original stays canonical behind "Original".
Conversation budget
- The admin field no longer prefills with the environment value, which turned
the next Save into an accidental override and made the documented "leave
empty to use the environment" path unreachable. The effective limit is shown
as a placeholder instead.
- Report source 'default' honestly instead of naming an unset env var.
- The load-failure notice now lands on the <p> instead of an <input>'s
textContent, where it rendered nothing.
- One validator for the budget everywhere: conversationLimit() replaces a
parseInt that accepted "120000abc".
Other
- /assistant is addressed by its URL, not by ped_last_tab, so "/" no longer
reopens the assistant; the URL follows tab changes and Back leaves it.
- Remove the dead DeepL path (it referenced an undefined DEEPL_BASES) and stop
offering admins a provider the server silently ignores.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BkfrkQwA4YGrGw9LZSpeAq
387 lines
39 KiB
CSS
387 lines
39 KiB
CSS
|
|
.assistant-header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
|
|
.assistant-mobile-menu { display:none; }
|
|
.assistant-topbar { display:flex; align-items:center; gap:12px; padding:6px 12px; border-bottom:1px solid var(--g200); background:var(--g50); position:sticky; top:0; z-index:4; }
|
|
.assistant-topbar-title { flex:1; min-width:0; }
|
|
.assistant-topbar-title h2 { font-size:15px; margin:0; color:var(--g800); }
|
|
.assistant-topbar-title h2 i { margin-right:6px; }
|
|
.assistant-status { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--g500); background:white; border:1px solid var(--g200); border-radius:999px; padding:5px 10px; box-shadow:var(--shadow); }
|
|
.assistant-dot { width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block; }
|
|
.assistant-status.busy .assistant-dot { background:var(--amber); animation:pulse 1.5s infinite; }
|
|
.assistant-status.error .assistant-dot { background:var(--red); }
|
|
.assistant-layout { display:grid; grid-template-columns:260px minmax(0,1fr) 330px; gap:14px; align-items:stretch; }
|
|
.assistant-layout > * { min-width:0; }
|
|
.assistant-history { display:grid; gap:10px; align-content:start; position:sticky; top:52px; }
|
|
.assistant-new-chat { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; border:1px solid var(--purple-light); background:#faf5ff; color:var(--purple); border-radius:10px; padding:10px 12px; font-size:13px; font-weight:700; cursor:pointer; }
|
|
.assistant-new-chat:hover { border-color:var(--purple); background:var(--purple-light); }
|
|
.assistant-view-switch { display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--g100); border:1px solid var(--g200); border-radius:10px; padding:4px; }
|
|
.assistant-view-switch button { border:0; border-radius:7px; padding:7px 6px; font-size:12px; font-weight:600; color:var(--g500); background:transparent; cursor:pointer; }
|
|
.assistant-view-switch button.active { background:white; color:var(--purple); box-shadow:var(--shadow); }
|
|
.assistant-main { display:flex; flex-direction:column; min-height:calc(100vh - 200px); min-width:0; }
|
|
#assistant-chat-view { display:grid; grid-template-rows:auto minmax(420px,1fr) auto; min-height:calc(100vh - 200px); min-width:0; }
|
|
#assistant-chat-view[hidden], .assistant-learning-view[hidden] { display:none; }
|
|
.assistant-learning-view { min-height:calc(100vh - 200px); }
|
|
#assistant-learning-root { padding:4px 2px; }
|
|
.assistant-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--g200); background:var(--g50); }
|
|
.assistant-toolbar-actions { display:flex; gap:6px; flex-wrap:wrap; }
|
|
.assistant-messages { padding:16px; max-height:65vh; overflow-y:auto; overflow-x:hidden; background:linear-gradient(180deg,#fff,var(--g50)); min-width:0; }
|
|
.assistant-empty { max-width:680px; margin:50px auto; text-align:center; color:var(--g500); }
|
|
.assistant-empty i { font-size:34px; color:var(--purple); margin-bottom:10px; }
|
|
.assistant-empty h3 { color:var(--g800); font-size:18px; margin-bottom:6px; }
|
|
.assistant-examples { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:16px; }
|
|
.assistant-examples button { border:1px solid var(--g200); background:white; color:var(--blue); border-radius:999px; padding:7px 10px; font-size:12px; cursor:pointer; }
|
|
.assistant-suggestion-buttons { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
|
|
.assistant-suggestion-buttons button { border:1px solid var(--purple-light); background:#faf5ff; color:var(--purple); border-radius:999px; padding:7px 10px; font-size:12px; cursor:pointer; text-align:left; }
|
|
.assistant-suggestion-buttons button:hover { border-color:var(--purple); background:var(--purple-light); }
|
|
.assistant-msg { max-width:900px; min-width:0; margin:0 0 14px; display:grid; gap:6px; position:relative; }
|
|
.assistant-msg.user { margin-left:auto; max-width:760px; }
|
|
.assistant-msg-label { font-size:11px; font-weight:700; color:var(--g400); text-transform:uppercase; letter-spacing:.04em; }
|
|
.assistant-msg-actions { display:flex; gap:4px; opacity:0; transition:opacity .12s ease; }
|
|
.assistant-msg:hover .assistant-msg-actions, .assistant-msg-actions:focus-within { opacity:1; }
|
|
.assistant-msg-actions button { border:1px solid var(--g200); background:white; color:var(--g500); border-radius:7px; padding:3px 7px; font-size:11px; cursor:pointer; }
|
|
.assistant-msg-actions button:hover { color:var(--purple); border-color:var(--purple-light); }
|
|
.assistant-translate-pop { display:grid; gap:4px; border:1px solid var(--g200); background:white; border-radius:10px; padding:8px; box-shadow:var(--shadow); position:absolute; right:0; top:100%; z-index:6; min-width:200px; }
|
|
.assistant-translate-providers { display:flex; gap:4px; border-bottom:1px solid var(--g100); padding-bottom:6px; }
|
|
.assistant-translate-providers button { flex:1; border:1px solid var(--g200); background:var(--g50); color:var(--g600); border-radius:7px; padding:4px; font-size:11px; font-weight:700; cursor:pointer; }
|
|
.assistant-translate-providers button.active { background:var(--purple); color:white; border-color:var(--purple); }
|
|
.assistant-translate-pop [data-assistant-translate-lang] { border:0; background:transparent; text-align:left; padding:4px 6px; font-size:12px; color:var(--g700); border-radius:6px; cursor:pointer; }
|
|
.assistant-translate-pop [data-assistant-translate-lang]:hover { background:var(--g50); }
|
|
.assistant-translated-sources { margin-top:10px; padding-top:8px; border-top:1px solid var(--g200); font-size:12px; color:var(--g500); }
|
|
.assistant-translated-sources strong { display:block; font-weight:600; margin-bottom:4px; }
|
|
.assistant-message-attachments { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
|
|
.assistant-message-attachment { margin:0; display:grid; gap:3px; justify-items:center; }
|
|
.assistant-message-attachment img { width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--g200); background:var(--g50); display:block; }
|
|
.assistant-message-attachment figcaption { font-size:10px; color:var(--g500); max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
.assistant-bubble { border:none; border-radius:0; padding:2px 4px; background:transparent; box-shadow:none; font-size:13px; line-height:1.75; overflow-wrap:anywhere; min-width:0; max-width:100%; }
|
|
.assistant-msg.user .assistant-bubble { white-space:pre-wrap; background:var(--blue); color:white; border-radius:16px; padding:10px 14px; }
|
|
.assistant-bubble h1, .assistant-bubble h2, .assistant-bubble h3 { margin:16px 0 8px; line-height:1.25; color:var(--g900); }
|
|
.assistant-bubble h1:first-child, .assistant-bubble h2:first-child, .assistant-bubble h3:first-child { margin-top:0; }
|
|
.assistant-bubble h1 { font-size:20px; }
|
|
.assistant-bubble h2 { font-size:17px; border-bottom:1px solid var(--g200); padding-bottom:4px; }
|
|
.assistant-bubble h3 { font-size:15px; }
|
|
.assistant-bubble p { margin:0 0 10px; }
|
|
.assistant-bubble p:last-child { margin-bottom:0; }
|
|
.assistant-bubble ul, .assistant-bubble ol { padding-left:20px; margin:8px 0; }
|
|
.assistant-bubble li { margin:4px 0; }
|
|
.assistant-bubble blockquote { margin:10px 0; padding:8px 12px; border-left:3px solid var(--blue); background:var(--blue-light); color:var(--g700); border-radius:8px; }
|
|
.assistant-bubble hr { border:0; border-top:1px solid var(--g200); margin:18px 0; }
|
|
.assistant-bubble img { max-width:100%; border-radius:8px; margin:10px 0; }
|
|
.assistant-msg.user .assistant-bubble code { background:rgba(255,255,255,.25); color:#fff; }
|
|
.assistant-msg.user .assistant-bubble a { color:#fff; text-decoration:underline; }
|
|
.assistant-msg.user .assistant-bubble pre { background:rgba(0,0,0,.35); }
|
|
.assistant-msg.user .assistant-bubble blockquote { border-left-color:rgba(255,255,255,.6); background:rgba(255,255,255,.15); color:#fff; }
|
|
.assistant-msg.user .assistant-bubble hr { border-top-color:rgba(255,255,255,.35); }
|
|
.assistant-table-scroll { position:relative; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:10px 0; border:0; border-radius:0; background:transparent; box-shadow:none; scrollbar-width:none; }
|
|
.assistant-table-scroll::-webkit-scrollbar { display:none; }
|
|
.assistant-table-scroll table { width:max-content; min-width:100%; max-width:none; border-collapse:separate; border-spacing:0; margin:0; border:0; border-radius:0; font-size:12px; }
|
|
.assistant-table-scroll::after { content:'Swipe table'; display:none; position:sticky; left:0; bottom:0; padding:3px 9px; font-size:10px; font-weight:700; color:var(--g500); background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,0)); pointer-events:none; }
|
|
.assistant-bubble th, .assistant-bubble td { padding:8px 10px; border-bottom:1px solid var(--g100); vertical-align:top; text-align:left; font-size:12px; }
|
|
.assistant-bubble th, .assistant-bubble td { overflow-wrap:normal; word-break:normal; }
|
|
.assistant-bubble [align="right"] { text-align:right; }
|
|
.assistant-bubble [align="center"] { text-align:center; }
|
|
.assistant-bubble th { background:transparent; font-weight:600; color:var(--g800); }
|
|
.assistant-bubble tr:last-child td { border-bottom:0; }
|
|
.assistant-table-actions { position:absolute; top:6px; right:8px; z-index:2; display:flex; gap:4px; opacity:0; transition:opacity .12s ease; }
|
|
.assistant-table-scroll:hover .assistant-table-actions, .assistant-table-scroll:focus-within .assistant-table-actions { opacity:1; }
|
|
.assistant-table-actions button { border:1px solid var(--g200); background:white; color:var(--g600); border-radius:6px; padding:2px 7px; font-size:10px; font-weight:700; cursor:pointer; }
|
|
.assistant-table-actions button:hover { color:var(--purple); border-color:var(--purple-light); }
|
|
.assistant-codeblock { position:relative; margin:10px 0; }
|
|
.assistant-codeblock pre { margin:0; }
|
|
.assistant-code-copy { position:absolute; top:6px; right:8px; border:1px solid rgba(255,255,255,.25); background:rgba(17,24,39,.7); color:#fff; border-radius:6px; padding:2px 8px; font-size:10px; font-weight:700; cursor:pointer; }
|
|
.assistant-code-copy:hover { background:rgba(17,24,39,.95); }
|
|
.assistant-bubble code { background:var(--g100); border-radius:4px; padding:1px 4px; }
|
|
.assistant-bubble pre { background:var(--g900); color:white; border-radius:8px; padding:10px; overflow:auto; margin:10px 0; }
|
|
.assistant-bubble .katex-display { overflow-x:auto; overflow-y:hidden; padding:4px 0; }
|
|
.assistant-thinking { background:linear-gradient(90deg,#fff,#f8fafc,#fff); background-size:220% 100%; animation:assistantShimmer 1.8s ease-in-out infinite; }
|
|
.assistant-thinking-line { display:flex; align-items:center; gap:6px; color:var(--g800); }
|
|
.assistant-thinking-detail { color:var(--g500); font-size:12px; margin-top:3px; }
|
|
.assistant-thinking-dot { width:7px; height:7px; border-radius:50%; background:var(--purple); display:inline-block; animation:assistantBounce 1.2s infinite ease-in-out; }
|
|
.assistant-thinking-dot:nth-child(2) { animation-delay:.15s; }
|
|
.assistant-thinking-dot:nth-child(3) { animation-delay:.3s; margin-right:3px; }
|
|
@keyframes assistantBounce { 0%,80%,100% { transform:scale(.65); opacity:.45; } 40% { transform:scale(1); opacity:1; } }
|
|
@keyframes assistantShimmer { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } }
|
|
.assistant-cite { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 6px; margin:0 1px; border-radius:999px; background:var(--purple-light); color:var(--purple); font-size:10px; font-weight:800; text-decoration:none; vertical-align:baseline; border:1px solid rgba(124,58,237,.18); text-transform:uppercase; letter-spacing:.03em; }
|
|
.assistant-cite:hover { background:var(--purple); color:white; text-decoration:none; }
|
|
.assistant-composer { border-top:1px solid var(--g200); padding:12px; background:white; display:grid; gap:8px; }
|
|
.assistant-attachments { display:flex; flex-wrap:wrap; gap:8px; }
|
|
.assistant-attachments[hidden] { display:none; }
|
|
.assistant-attachment { position:relative; width:64px; height:64px; border:1px solid var(--g200); border-radius:8px; overflow:hidden; background:var(--g50); }
|
|
.assistant-attachment img { width:100%; height:100%; object-fit:cover; display:block; }
|
|
.assistant-attachment-remove { position:absolute; top:3px; right:3px; width:18px; height:18px; border:none; border-radius:50%; background:rgba(0,0,0,.65); color:#fff; font-size:10px; line-height:18px; cursor:pointer; padding:0; }
|
|
.assistant-attachment-remove:hover { background:rgba(0,0,0,.85); }
|
|
.assistant-attach { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--g600); cursor:pointer; padding:6px 10px; border:1px dashed var(--g300); border-radius:8px; }
|
|
.assistant-attach:hover { border-color:var(--blue); color:var(--blue); }
|
|
.assistant-composer textarea, .assistant-side textarea { width:100%; border:1.5px solid var(--g300); border-radius:10px; padding:10px 12px; resize:vertical; font-family:inherit; font-size:13px; outline:none; }
|
|
.assistant-composer textarea:focus, .assistant-side textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-light); }
|
|
.assistant-composer-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; }
|
|
.assistant-composer-footer .btn-generate { width:auto; margin:0; padding:9px 18px; }
|
|
.assistant-composer-footer #btn-assistant-cancel[hidden] { display:none !important; }
|
|
.assistant-composer-footer #btn-assistant-cancel:not([hidden]) { display:inline-flex; }
|
|
.assistant-check { font-size:12px; color:var(--g500); display:flex; align-items:center; gap:6px; }
|
|
/* Sources: a full-page right column; the panel fills the height and scrolls */
|
|
.assistant-side { display:flex; flex-direction:column; gap:12px; height:100%; min-height:0; }
|
|
.assistant-side .card { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
|
|
.assistant-generated-image { display:grid; gap:8px; }
|
|
.assistant-generated-image img { width:100%; border-radius:10px; border:1px solid var(--g200); background:white; }
|
|
.assistant-image-actions { display:flex; gap:8px; flex-wrap:wrap; }
|
|
.assistant-image-preview-open { overflow:hidden; }
|
|
.assistant-image-modal { position:fixed; inset:0; z-index:9999; background:rgba(15,23,42,.82); display:flex; align-items:center; justify-content:center; padding:24px; }
|
|
.assistant-image-modal-card { position:relative; display:grid; gap:10px; max-width:min(96vw,1200px); max-height:92vh; }
|
|
.assistant-image-modal-card img { max-width:100%; max-height:92vh; border-radius:14px; background:white; box-shadow:0 24px 80px rgba(0,0,0,.35); }
|
|
.assistant-image-modal-close { position:absolute; top:8px; right:8px; z-index:1; width:38px; height:38px; border:0; border-radius:999px; background:white; color:var(--g800); font-size:24px; line-height:1; cursor:pointer; box-shadow:var(--shadow); }
|
|
.assistant-image-modal-cancel { justify-self:center; border:0; border-radius:999px; background:white; color:var(--g800); font-weight:700; padding:9px 14px; box-shadow:var(--shadow); cursor:pointer; }
|
|
.assistant-sources { padding:10px 12px; display:grid; gap:8px; flex:1 1 auto; min-height:0; overflow-y:auto; }
|
|
.assistant-saved-chats { flex:1 1 auto; overflow-y:auto; min-height:0; padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
|
|
.assistant-saved-chat { border:1px solid transparent; border-radius:10px; padding:7px 10px; background:transparent; display:flex; flex-direction:column; gap:1px; width:100%; text-align:left; cursor:pointer; color:inherit; font:inherit; min-width:0; }
|
|
.assistant-saved-chat:hover { background:var(--g100, #f3f4f6); border-color:transparent; }
|
|
.assistant-saved-chat.active { border-color:var(--accent, #0f766e); }
|
|
.assistant-saved-chat-title { font-size:13px; font-weight:500; color:var(--g800); line-height:1.35; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
.assistant-saved-chat-meta { font-size:11px; color:var(--g500); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
.assistant-save-actions { display:flex; gap:6px; flex-wrap:wrap; }
|
|
.assistant-source { border:1px solid var(--g200); border-radius:10px; padding:9px; background:white; font-size:12px; line-height:1.5; }
|
|
.assistant-source strong { color:var(--g800); }
|
|
.assistant-source-badges { display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; }
|
|
.assistant-source-badges span { border:1px solid var(--g200); border-radius:999px; background:var(--g50); color:var(--g600); padding:2px 7px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
|
|
.assistant-source-meta { color:var(--g500); font-size:11px; margin-top:3px; }
|
|
.assistant-source-preview { margin-top:8px; }
|
|
.assistant-source-preview button { border:0; padding:0; background:transparent; cursor:pointer; width:100%; display:block; }
|
|
.assistant-source-preview img { width:100%; max-height:220px; object-fit:contain; border:1px solid var(--g200); border-radius:10px; background:white; display:block; }
|
|
.assistant-source-excerpt { margin-top:7px; color:var(--g600); max-height:170px; overflow:auto; }
|
|
.assistant-source-excerpt p { margin:0 0 6px; }
|
|
.assistant-source-excerpt ul, .assistant-source-excerpt ol { padding-left:16px; margin:4px 0; }
|
|
.assistant-source-excerpt strong { color:var(--g700); }
|
|
.assistant-muted { color:var(--g500); font-size:12px; line-height:1.6; }
|
|
.assistant-mermaid { background:white; border:1px solid var(--g200); border-radius:10px; padding:10px; margin:10px 0; overflow:auto; }
|
|
.assistant-source-modal { position:fixed; inset:0; z-index:10000; background:rgba(15,23,42,.72); display:flex; align-items:center; justify-content:center; padding:24px; }
|
|
.assistant-source-modal .modal-content { width:100%; max-width:640px; max-height:88vh; overflow:auto; }
|
|
.assistant-source-modal-meta { font-size:13px; font-weight:700; color:var(--g800); margin-bottom:10px; }
|
|
.assistant-source-modal-excerpt { white-space:pre-wrap; font-size:12px; line-height:1.6; color:var(--g600); background:var(--g50); border:1px solid var(--g200); border-radius:10px; padding:10px 12px; max-height:52vh; overflow:auto; margin-bottom:10px; }
|
|
/* Saved chats occupy the full left rail and scroll inside it */
|
|
.assistant-history { display:flex; flex-direction:column; height:100%; min-height:0; }
|
|
.assistant-history .card { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
|
|
@media (max-width: 960px) { .assistant-layout { grid-template-columns:minmax(0,1fr) 300px; } .assistant-history { position:static; grid-column:1 / -1; grid-template-columns:auto 1fr; align-items:start; } .assistant-new-chat { grid-column:1; } .assistant-view-switch { grid-column:1; } .assistant-history .card { grid-column:2; grid-row:1 / span 2; } .assistant-main { min-height:auto; } #assistant-chat-view { min-height:auto; grid-template-rows:auto minmax(320px,1fr) auto; } }
|
|
@media (max-width: 640px) {
|
|
/* ── ChatGPT/OWUI mobile: independent full-screen overlay; the page behind never scrolls ── */
|
|
.assistant-topbar { flex-wrap:nowrap; gap:8px; padding:10px 14px; }
|
|
.assistant-mobile-menu { display:inline-flex; }
|
|
.assistant-topbar .btn-sm { padding:6px 8px; }
|
|
#btn-assistant-goback span, #btn-assistant-goback { font-size:0; }
|
|
#btn-assistant-goback { padding:8px; }
|
|
.assistant-topbar-title h2 { font-size:15px; }
|
|
.assistant-status { margin-left:auto; font-size:11px; }
|
|
.assistant-toggle-history { display:none; }
|
|
/* The assistant fills the viewport exactly; nothing behind can scroll */
|
|
.assistant-layout { display:flex; flex-direction:column; height:100dvh; min-height:0; overflow:hidden; }
|
|
.assistant-main { flex:1 1 auto; min-height:0; display:flex; }
|
|
.assistant-main.card { box-shadow:none; border:none; margin:0; }
|
|
#assistant-chat-view { flex:1 1 auto; min-height:0; height:auto; display:flex; flex-direction:column; }
|
|
.assistant-messages { flex:1 1 auto; min-height:0; max-height:none; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px 14px 12px; }
|
|
.assistant-side { display:none; }
|
|
/* Slim toolbar: icon-only actions in one row */
|
|
.assistant-toolbar { padding:6px 10px; flex:0 0 auto; }
|
|
.assistant-toolbar > div:first-child { display:none; }
|
|
.assistant-toolbar-actions { display:flex; width:100%; justify-content:flex-end; gap:4px; }
|
|
.assistant-toolbar-actions .btn-sm { font-size:0; padding:6px 8px; }
|
|
.assistant-toolbar-actions .btn-sm i { font-size:13px; }
|
|
/* Saved chats: a fixed drawer overlaying the chat */
|
|
.assistant-history { position:fixed; left:0; top:0; bottom:0; width:min(85vw,320px); z-index:130; background:white; border-right:1px solid var(--g100); box-shadow:0 0 40px rgba(15,23,42,.14); transform:translateX(-105%); transition:transform .18s ease; display:flex; flex-direction:column; align-items:stretch; padding:10px 8px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; gap:2px; border-radius:0; }
|
|
.assistant-history .card, #assistant-saved-chats { width:100%; max-width:100%; min-width:0; }
|
|
/* Open WebUI-style: the whole menu is one scrollable column — the card grows
|
|
with its content instead of clipping it, and the drawer itself scrolls. */
|
|
.assistant-history .card { flex:0 0 auto; min-height:0; overflow:visible; }
|
|
#assistant-saved-chats { overflow:visible; }
|
|
.assistant-layout.mobile-chats-open .assistant-history { transform:translateX(0); }
|
|
.assistant-history .card { border:none; box-shadow:none; background:none; padding:0; }
|
|
.assistant-history .card-header { padding:6px 10px 2px; }
|
|
#assistant-saved-chats { padding:2px 0 12px; gap:0; overflow:visible; }
|
|
.assistant-saved-chat { flex-direction:row; align-items:center; gap:0; border:none; border-radius:8px; padding:12px 36px 12px 12px; min-width:0; width:100%; max-width:none; position:relative; }
|
|
.assistant-saved-chat:hover { background:var(--g100); }
|
|
.assistant-saved-chat.active { background:var(--g100); }
|
|
.assistant-saved-chat-title { flex:1 1 auto; min-width:0; max-width:calc(100% - 20px); font-size:12.5px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
#assistant-saved-chats { gap:7px; }
|
|
.assistant-saved-chat-meta { display:none; }
|
|
.assistant-layout .assistant-saved-chat-menu { position:absolute; right:6px; top:50%; transform:translateY(-50%); opacity:1; pointer-events:auto; }
|
|
.assistant-new-chat, .assistant-goback-rail { display:flex; align-items:center; gap:10px; width:100%; border:none; background:none; color:var(--g700); font-size:14px; padding:10px 12px; border-radius:8px; text-align:left; }
|
|
.assistant-new-chat:hover, .assistant-goback-rail:hover { background:var(--g100); }
|
|
.assistant-create-image { display:flex; align-items:center; gap:10px; width:100%; background:none; color:var(--purple); font-weight:700; font-size:14px; padding:10px 12px; border-radius:8px; text-align:left; }
|
|
.assistant-create-image:hover { background:var(--purple-light,#faf5ff); }
|
|
.assistant-view-switch { margin:6px 8px; }
|
|
.assistant-empty { margin:28px auto; max-width:100%; }
|
|
.assistant-empty i { font-size:26px; }
|
|
.assistant-empty h3 { font-size:16px; text-align:left; }
|
|
.assistant-empty p { text-align:left; font-size:13px; }
|
|
.assistant-examples { flex-direction:column; align-items:stretch; gap:0; margin:14px 0 0; }
|
|
.assistant-examples button { border:none; background:none; color:var(--g700); text-align:left; padding:12px 2px; font-size:14px; border-radius:0; border-bottom:1px solid var(--g100); white-space:normal; width:100%; }
|
|
/* Floating pill composer pinned at the bottom */
|
|
.assistant-composer { position:static; flex:0 0 auto; margin:0 10px 10px; z-index:60; background:white; border:1px solid var(--g200); border-radius:20px; box-shadow:0 8px 30px rgba(0,0,0,.14); padding:8px 12px 6px; display:flex; flex-direction:column; gap:6px; }
|
|
#assistant-input { font-size:16px; }
|
|
.assistant-composer > label { display:none; }
|
|
#assistant-context-budget, #assistant-context-warning { display:none; }
|
|
.assistant-composer-footer { flex-direction:row; align-items:center; justify-content:space-between; gap:4px; }
|
|
.assistant-composer-footer .btn-generate { width:44px; height:44px; border-radius:50%; padding:0; font-size:0; flex:0 0 auto; }
|
|
.assistant-composer-footer .btn-generate i { font-size:16px; }
|
|
.assistant-attach { font-size:0; }
|
|
.assistant-attach i { font-size:18px; }
|
|
.assistant-check { display:none; }
|
|
.assistant-composer-footer #btn-assistant-cancel:not([hidden]) { width:auto; padding:8px 12px; }
|
|
.assistant-mic { font-size:0; }
|
|
.assistant-mic i { font-size:18px; }
|
|
}
|
|
|
|
|
|
/* Patient take home modal + actions */
|
|
.assistant-takehome-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; z-index: 120; }
|
|
.assistant-takehome-modal .modal-content { width: min(640px, 92vw); max-height: 82vh; display: flex; flex-direction: column; }
|
|
/* Take-home result uses the same markdown typography as chat bubbles */
|
|
.assistant-takehome-result { overflow-y: auto; font-size: 13px; line-height: 1.75; overflow-wrap: anywhere; }
|
|
.assistant-takehome-result h1, .assistant-takehome-result h2, .assistant-takehome-result h3 { margin:16px 0 8px; line-height:1.25; color:var(--g900); }
|
|
.assistant-takehome-result h1:first-child, .assistant-takehome-result h2:first-child, .assistant-takehome-result h3:first-child { margin-top:0; }
|
|
.assistant-takehome-result h1 { font-size:20px; }
|
|
.assistant-takehome-result h2 { font-size:17px; border-bottom:1px solid var(--g200); padding-bottom:4px; }
|
|
.assistant-takehome-result h3 { font-size:15px; }
|
|
.assistant-takehome-result ul, .assistant-takehome-result ol { padding-left:20px; margin:8px 0; }
|
|
.assistant-takehome-result p { margin:8px 0; }
|
|
.assistant-takehome-result strong { font-weight:600; }
|
|
.assistant-takehome-result table { border-collapse:collapse; margin:10px 0; font-size:12px; }
|
|
.assistant-takehome-result th, .assistant-takehome-result td { border:1px solid var(--g200); padding:5px 8px; text-align:left; }
|
|
.assistant-takehome-result code { background:var(--g100, #f3f4f6); border-radius:4px; padding:1px 5px; font-size:12px; }
|
|
.assistant-takehome-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; border-top: 1px solid var(--border, #e5e7eb); padding-top: .75rem; }
|
|
.assistant-takehome-lang { display: flex; align-items: center; }
|
|
.assistant-takehome-lang select { font-size: 12px; padding: 4px 6px; border: 1px solid var(--g200); border-radius: 6px; background: white; color: var(--g900); max-width: 150px; }
|
|
.assistant-takehome-lang select:disabled { opacity: .6; cursor: progress; }
|
|
.assistant-takehome-email { display: flex; gap: .5rem; margin-left: auto; }
|
|
.assistant-takehome-email input { width: 220px; }
|
|
.assistant-takehome-loading { padding: 1.25rem 0; color: var(--muted, #6b7280); }
|
|
.assistant-translate-langs { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
|
|
.assistant-translate-none { color: var(--muted, #6b7280); font-size: .85rem; }
|
|
|
|
/* Voice: composer mic + conversation overlay */
|
|
.assistant-mic.recording { background: var(--danger, #dc2626); color: #fff; }
|
|
.assistant-voice-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; z-index: 115; }
|
|
.assistant-voice-card { background: var(--surface, #fff); border-radius: 14px; padding: 1.75rem 2rem; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.28); display: flex; flex-direction: column; gap: 1rem; align-items: center; min-width: 280px; }
|
|
.assistant-voice-status { font-size: 1rem; color: var(--muted, #6b7280); min-height: 1.4rem; }
|
|
.assistant-voice-mic { width: 72px; height: 72px; border-radius: 50%; border: none; background: var(--accent, #0f766e); color: #fff; font-size: 1.6rem; cursor: pointer; }
|
|
.assistant-voice-mic.recording { background: var(--danger, #dc2626); animation: assistant-pulse 1.2s infinite; }
|
|
@keyframes assistant-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.45); } 50% { box-shadow: 0 0 0 14px rgba(220,38,38,0); } }
|
|
|
|
/* Full-screen Open WebUI workspace: the assistant replaces the app chrome */
|
|
body.assistant-workspace .assistant-layout { height: calc(100vh - 64px); min-height: 0; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
|
|
/* Desktop: the saved-chats rail collapses like ChatGPT's sidebar */
|
|
.assistant-toggle-history { border:none; background:none; color:var(--g600); padding:6px 8px; border-radius:8px; cursor:pointer; }
|
|
.assistant-toggle-history:hover { background:var(--g100); color:var(--g800); }
|
|
.assistant-layout { transition:grid-template-columns .18s ease; }
|
|
.assistant-layout.history-collapsed { grid-template-columns:0 minmax(0,1fr) 330px; }
|
|
.assistant-layout.history-collapsed .assistant-history { display:none; }
|
|
body.assistant-workspace .assistant-layout > * { min-height: 0; }
|
|
body.assistant-workspace .assistant-main,
|
|
body.assistant-workspace .assistant-main #assistant-chat-view { min-height: 0; }
|
|
body.assistant-workspace .assistant-side { height: 100%; overflow: hidden; }
|
|
body.assistant-workspace .assistant-side .card { min-height: 0; }
|
|
body.assistant-workspace .assistant-main { min-height: 0; }
|
|
body.assistant-workspace #assistant-chat-view { min-height: 0; }
|
|
body.assistant-workspace .assistant-learning-view { min-height: 0; height: 100vh; overflow-y: auto; }
|
|
.assistant-saved-chat { position:relative; }
|
|
.assistant-saved-chat-delete { position:absolute; top:6px; right:8px; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; color:var(--g500, #6b7280); opacity:0; transition:opacity .12s ease; pointer-events:none; }
|
|
.assistant-saved-chat:hover .assistant-saved-chat-delete, .assistant-saved-chat:focus-within .assistant-saved-chat-delete { opacity:1; pointer-events:auto; }
|
|
.assistant-saved-chat-delete:hover { color:var(--danger, #dc2626); background:rgba(220,38,38,.08); }
|
|
|
|
/* Create image entry + Images gallery (ChatGPT-style left rail) */
|
|
.assistant-create-image { display:flex; align-items:center; gap:8px; width:100%; border:none; border-radius:12px; padding:10px 12px; background:linear-gradient(90deg,var(--purple,#7c3aed),var(--purple-light,#a78bfa)); color:#fff; font-weight:700; font-size:13px; cursor:pointer; }
|
|
.assistant-create-image:hover { filter:brightness(1.06); }
|
|
.assistant-goback-rail { margin-bottom:2px; }
|
|
.assistant-gallery-card { flex:0 1 auto; }
|
|
.assistant-image-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); gap:6px; padding:10px 12px; max-height:220px; overflow-y:auto; }
|
|
.assistant-gallery-item { border:none; background:none; padding:0; border-radius:8px; overflow:hidden; cursor:pointer; border:1px solid var(--g200); }
|
|
.assistant-gallery-item img { width:100%; height:56px; object-fit:cover; display:block; }
|
|
.assistant-create-image-label { display:block; font-size:12px; font-weight:700; color:var(--g500); margin:10px 0 4px; }
|
|
#create-image-description, #create-image-chat { width:100%; border:1.5px solid var(--g300); border-radius:10px; padding:8px 10px; font-size:13px; }
|
|
.assistant-create-image-actions { display:flex; justify-content:flex-end; margin-top:12px; }
|
|
|
|
/* Open WebUI-style composer: a prominent input box with a slim action row below */
|
|
.assistant-composer { border:1px solid var(--g200); border-radius:20px; box-shadow:0 8px 30px rgba(0,0,0,.08); padding:10px 14px 6px; display:flex; flex-direction:column; gap:2px; }
|
|
.assistant-composer > label { display:none; }
|
|
#assistant-input { flex:1 1 auto; border:none; outline:none; resize:none; background:transparent; font-size:15px; line-height:1.5; min-height:56px; max-height:180px; padding:6px 0; }
|
|
.assistant-composer-footer { display:flex; align-items:center; gap:2px; border-top:1px solid var(--g100); padding-top:4px; margin-top:2px; }
|
|
.assistant-composer-footer .assistant-tools { display:flex; align-items:center; gap:2px; margin-right:auto; }
|
|
.assistant-composer-footer .assistant-attach, .assistant-composer-footer .assistant-voice-btn, .assistant-composer-footer .assistant-mic { width:30px; height:30px; font-size:14px; }
|
|
.assistant-composer-footer .btn-send { width:32px; height:32px; font-size:14px; margin-left:auto; }
|
|
.assistant-attach, .assistant-voice-btn, .assistant-mic { width:38px; height:38px; border:none; background:none; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--g600); cursor:pointer; font-size:16px; }
|
|
.assistant-attach:hover, .assistant-voice-btn:hover, .assistant-mic:hover { background:var(--g100); }
|
|
.assistant-mic.recording { background:var(--danger,#dc2626); color:#fff; }
|
|
.assistant-check { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; cursor:pointer; color:var(--g500); position:relative; }
|
|
.assistant-check i { font-size:13px; }
|
|
.assistant-check input { position:absolute; inset:0; opacity:0; cursor:pointer; }
|
|
.assistant-check:has(input:checked) { color:var(--purple); background:var(--purple-light,#faf5ff); }
|
|
.btn-send { width:40px; height:40px; border:none; border-radius:50%; background:var(--accent,#0f766e); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; }
|
|
.btn-send:disabled { opacity:.5; cursor:not-allowed; }
|
|
.assistant-composer .assistant-muted { flex-basis:100%; }
|
|
/* Learning Hub: full-width page without the chat rail or sources column */
|
|
.assistant-layout.learning-mode .assistant-history,
|
|
.assistant-layout.learning-mode .assistant-side { display:none; }
|
|
.assistant-layout.learning-mode { grid-template-columns:minmax(0,1fr); }
|
|
.assistant-layout.learning-mode .assistant-main { grid-column:1; }
|
|
/* Saved-chat options menu */
|
|
.assistant-saved-chat-menu { position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--g500); opacity:0; transition:opacity .12s ease; pointer-events:none; }
|
|
.assistant-saved-chat:hover .assistant-saved-chat-menu, .assistant-saved-chat:focus-within .assistant-saved-chat-menu { opacity:1; pointer-events:auto; }
|
|
@media (max-width: 640px) {
|
|
.assistant-layout .assistant-saved-chat-menu,
|
|
.assistant-saved-chat:hover .assistant-saved-chat-menu,
|
|
.assistant-saved-chat:focus-within .assistant-saved-chat-menu { opacity:1; pointer-events:auto; }
|
|
}
|
|
.assistant-saved-chat-menu:hover { background:var(--g100); color:var(--g800); }
|
|
.assistant-saved-chat-menu-pop, .assistant-chat-menu { position:absolute; right:8px; top:30px; z-index:20; max-width:min(90vw,220px); background:white; border:1px solid var(--g200); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.16); padding:4px; display:grid; min-width:150px; }
|
|
.assistant-chat-menu button { display:flex; align-items:center; gap:8px; border:none; background:none; padding:8px 10px; font-size:13px; color:var(--g700); cursor:pointer; border-radius:7px; text-align:left; white-space:nowrap; }
|
|
.assistant-chat-menu button:hover { background:var(--g100); }
|
|
.assistant-chat-menu button[data-chat-action="delete"] { color:var(--danger,#dc2626); }
|
|
.assistant-chat-menu button i { width:14px; text-align:center; }
|
|
.assistant-saved-chat-rename { width:100%; border:1.5px solid var(--purple); border-radius:6px; padding:4px 6px; font-size:12px; }
|
|
|
|
/* Create-image popup: generation progress + full history grid */
|
|
.create-image-progress { margin-top:10px; padding:8px 10px; border-radius:8px; background:var(--g50,#f9fafb); color:var(--g600); font-size:13px; }
|
|
.create-image-progress[hidden] { display:none; }
|
|
.create-image-history { display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:8px; max-height:42vh; overflow-y:auto; margin-top:8px; }
|
|
.assistant-gallery-running { display:flex; align-items:center; justify-content:center; min-height:72px; border:1px dashed var(--g300); border-radius:8px; color:var(--g500); }
|
|
/* Composer model pill (Open WebUI-style, its own line above the actions) */
|
|
.assistant-model-pill { display:flex; align-items:center; }
|
|
.assistant-model-pill[hidden] { display:none; }
|
|
.assistant-model-control { border:1px solid var(--g200); background:white; border-radius:999px; padding:3px 10px; font-size:11px; color:var(--g600); cursor:pointer; max-width:220px; }
|
|
.assistant-model-pick { display:block; }
|
|
/* Send button becomes a red stop while the assistant works */
|
|
.btn-send.busy { background:var(--danger,#dc2626); }
|
|
/* Autosave state: always visible so users see the chat is saved */
|
|
.assistant-autosave-state { font-size:11px; color:var(--g400); }
|
|
.assistant-autosave-state.saving { color:var(--g500); }
|
|
.assistant-autosave-state.saved { color:var(--accent,#0f766e); font-weight:600; }
|
|
.assistant-autosave-state.failed { color:var(--danger,#dc2626); }
|
|
/* Rail goback is mobile-only; the topbar goback is desktop-only */
|
|
.assistant-goback-rail { display:none; }
|
|
@media (max-width: 640px) {
|
|
/* Go back lives in the drawer menu, clearly labeled at the top */
|
|
.assistant-goback-rail { display:flex; align-items:center; gap:10px; align-self:stretch; width:100%; border:none; background:none; color:var(--g700); font-size:14px; padding:12px; border-radius:8px; text-align:left; margin-bottom:4px; }
|
|
.assistant-goback-rail:hover { background:var(--g100); }
|
|
/* The drawer menu is a plain text list — no icons */
|
|
.assistant-history .assistant-goback-rail i,
|
|
.assistant-history .assistant-create-image i,
|
|
.assistant-history .assistant-new-chat i { display:none; }
|
|
/* Compact: every menu word fits the drawer width */
|
|
.assistant-goback-rail, .assistant-create-image, .assistant-new-chat { font-size:13px; padding:11px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
.assistant-history .card-header h3 { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
/* The topbar keeps only the hamburger; Go back is in the menu */
|
|
.assistant-topbar #btn-assistant-goback { display:none; }
|
|
}
|
|
/* Library item hover download */
|
|
.assistant-gallery-item-wrap { position:relative; }
|
|
.assistant-gallery-download { position:absolute; top:4px; right:4px; width:24px; height:24px; border-radius:6px; background:rgba(15,23,42,.6); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; opacity:0; transition:opacity .12s ease; pointer-events:none; }
|
|
.assistant-gallery-item-wrap:hover .assistant-gallery-download, .assistant-gallery-item-wrap:focus-within .assistant-gallery-download { opacity:1; pointer-events:auto; }
|
|
/* Mobile drawer: real menu with close button and backdrop */
|
|
.assistant-drawer-backdrop { display:none; }
|
|
.assistant-drawer-close { display:none; }
|
|
@media (max-width: 640px) {
|
|
.assistant-drawer-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.4); z-index:125; display:none; }
|
|
.assistant-layout.mobile-chats-open .assistant-drawer-backdrop { display:block; }
|
|
.assistant-drawer-close { display:flex; align-items:center; justify-content:center; align-self:flex-end; width:30px; height:30px; border:none; background:var(--g100); border-radius:50%; color:var(--g600); }
|
|
}
|
|
/* Saved chats: a plain sidebar list, not a card — desktop and mobile */
|
|
.assistant-history .card { border:none; box-shadow:none; background:none; padding:0; }
|
|
.assistant-history .card-header { padding:2px 4px; }
|
|
.assistant-history .card-header h3 { font-size:11px; font-weight:700; color:var(--g500); text-transform:uppercase; letter-spacing:.04em; }
|