cf7a3161a8
iOS zoom (and the menu button scrolling away with it) - Safari zooms the whole page when a text field under 16px takes focus and never zooms back; while zoomed, fixed chrome sits outside the visual viewport, which is why the menu button had to be scrolled to. All 144 visible text controls were 13-15px. They are 16px on phones now. !important is deliberate: per-component rules like `.demo-field select` outrank any element selector, and a new component would slip through. - The composer set 15px AFTER its own mobile 16px rule, so at equal specificity the base rule won; the size is per breakpoint now. - Pinch-zoom is untouched: no user-scalable=no. Desktop unchanged (13/15px). Composer - "Ready" / "Looking up sources..." / "saved" repeated what the send button already shows by turning into Stop, and on a phone they wrapped under the model control. Kept in the DOM as live regions; nothing is drawn. - The model control shows the word "Model" (76px) instead of ids as long as "openrouter-gemini-3.1-flash-image-preview", and opens the full list on click. The select stays as the state holder, so choosing still saves through the same change event. Search - Nothing typed lists the 19 destinations only; sub-items appear once there is something to match. - Listing, matching and opening now read one attribute list instead of three that could drift, and bedside's emergency sections are searchable. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Dv6sqaY6Vq3ChZHMem3cnU
607 lines
56 KiB
CSS
607 lines
56 KiB
CSS
|
|
.assistant-header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
|
|
.assistant-mobile-menu { display:none; }
|
|
/* Inside the assistant workspace the page IS the assistant; naming it again in
|
|
the topbar just costs a row of space. Kept in the DOM for screen readers. */
|
|
.assistant-status { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--g400); }
|
|
.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:210px 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:0; }
|
|
.assistant-new-chat { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; border:1px solid var(--blue-light); background:var(--blue-light); color:var(--blue); border-radius:10px; padding:10px 12px; font-size:13px; font-weight:700; cursor:pointer; }
|
|
.assistant-new-chat:hover { border-color:var(--blue); background:var(--blue-light); }
|
|
.assistant-main { display:flex; flex-direction:column; min-height:0; min-width:0; }
|
|
#assistant-chat-view { display:grid; grid-template-rows:minmax(0,1fr) auto; min-height:0; min-width:0; }
|
|
.assistant-messages { padding:16px; max-height:none; overflow-y:auto; overflow-x:hidden; background:transparent; 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(--blue); 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(--g700); 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(--blue-light); background:var(--blue-light); color:var(--blue); border-radius:999px; padding:7px 10px; font-size:12px; cursor:pointer; text-align:left; }
|
|
.assistant-suggestion-buttons button:hover { border-color:var(--blue); background:var(--blue-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(--blue); border-color:var(--blue-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(--blue); color:white; border-color:var(--blue); }
|
|
.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(--blue); border-color:var(--blue-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(--blue); 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; justify-items:start; }
|
|
/* Thumbnail in the transcript; Preview (or clicking it) opens full resolution. */
|
|
.assistant-generated-image img { width:auto; max-width:min(100%,320px); max-height:240px; object-fit:contain; border-radius:10px; border:1px solid var(--g200); background:white; cursor:zoom-in; }
|
|
.assistant-generated-image img:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
|
|
@media (max-width:960px) { .assistant-generated-image img { max-width:100%; max-height:200px; } }
|
|
.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; }
|
|
/* One column capped at the panel's width: an auto grid column grows to its
|
|
widest unbreakable content, so a long file name pushed every card off-screen. */
|
|
.assistant-sources { padding:10px 12px; display:grid; grid-template-columns:minmax(0,1fr); gap:8px; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; }
|
|
.assistant-saved-chats { flex:1 1 auto; overflow-y:auto; min-height:0; padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
|
|
/* Open WebUI-style recency headings above each run of chats. */
|
|
/* Composed empty state: a title, one status pill and the composer — nothing
|
|
else competing for attention before the first question is asked. */
|
|
.assistant-empty h3 { color:var(--g900); font-size:26px; font-weight:600; letter-spacing:-.01em; margin:0 0 12px; }
|
|
.assistant-empty-badge { display:inline-flex; align-items:center; gap:7px; margin:0; padding:7px 14px; border:1px solid var(--g200); border-radius:999px; background:white; box-shadow:var(--shadow); font-size:12.5px; color:var(--g600); }
|
|
.assistant-empty-badge i { color:var(--blue); font-size:12px; }
|
|
.assistant-examples button { border:1px solid var(--g200); background:white; color:var(--g700); border-radius:10px; padding:9px 14px; font-size:12.5px; box-shadow:var(--shadow); }
|
|
.assistant-examples button:hover { border-color:var(--blue-light); background:var(--blue-light); color:var(--blue); }
|
|
|
|
/* A faint graph-paper ground so the composer card reads as a raised surface. */
|
|
.assistant-messages { background-image:linear-gradient(var(--g100) 1px, transparent 1px), linear-gradient(90deg, var(--g100) 1px, transparent 1px); background-size:28px 28px; background-position:-1px -1px; }
|
|
.assistant-messages:has(.assistant-msg) { background-image:none; }
|
|
|
|
/* New chat carries its shortcut, the way a command row does. */
|
|
.assistant-new-chat { justify-content:flex-start; }
|
|
.assistant-kbd { margin-left:auto; font:inherit; font-size:10px; color:var(--g400); background:var(--g100); border:1px solid var(--g200); border-radius:5px; padding:2px 5px; white-space:nowrap; }
|
|
|
|
/* Saved Chats collapses, like the Chats group in the reference UI. */
|
|
|
|
background-image:linear-gradient(var(--g100) 1px, transparent 1px), linear-gradient(90deg, var(--g100) 1px, transparent 1px);
|
|
background-size:28px 28px; background-position:-1px -1px; }
|
|
/* On a phone the rail IS the drawer menu; a second copy as cards is redundant
|
|
and pushes the real list off the screen. */
|
|
|
|
.assistant-saved-chat-group { display:block; }
|
|
.assistant-saved-chat-group + .assistant-saved-chat-group { margin-top:10px; }
|
|
.assistant-saved-chat-heading { margin:0 0 2px; padding:0 10px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--g400); }
|
|
.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; }
|
|
/* Long names break onto new lines instead of running past the card
|
|
(word-break is the fallback for iOS Safari before 15.4). */
|
|
.assistant-source { min-width:0; overflow-wrap:anywhere; word-break:break-word; border:1px solid var(--g200); border-radius:10px; padding:10px 12px; background:white; box-shadow:var(--shadow); font-size:12px; line-height:1.5; transition:border-color .12s ease; }
|
|
.assistant-source:hover { border-color:var(--blue-light); }
|
|
.assistant-source:target { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-light); }
|
|
.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(--blue-light); border-radius:999px; background:var(--blue-light); color:var(--blue); 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 */
|
|
/* 8px below the account card, matching .sidebar-nav in the app. Without it the
|
|
card sat flush against the bottom edge here and 8px higher there, so the name
|
|
appeared to jump when you opened a workspace tab. The higher position wins. */
|
|
.assistant-history { display:flex; flex-direction:column; height:100%; min-height:0; padding-bottom:8px; }
|
|
.assistant-history .card { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
|
|
#assistant-saved-chats { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
|
|
@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:minmax(0,1fr) auto; } }
|
|
@media (max-width: 640px) {
|
|
/* ── ChatGPT/OWUI mobile: independent full-screen overlay; the page behind never scrolls ── */
|
|
.assistant-mobile-menu { display:inline-flex; }
|
|
#btn-assistant-goback span, #btn-assistant-goback { font-size:0; }
|
|
#btn-assistant-goback { padding:8px; }
|
|
.assistant-status, .assistant-autosave-state { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
|
|
/* The assistant fills the viewport exactly; nothing behind can scroll */
|
|
.assistant-layout { display:flex; flex-direction:column; height:calc(100dvh - var(--mobile-bar, 0px)); 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; }
|
|
/* Sources are not deleted on a phone, and they do not cover the conversation
|
|
either: opening them gives the column its own band at the foot of the flex
|
|
layout, so the chat shrinks above it and the composer stays reachable.
|
|
A fixed overlay sat on top of the question box, which is what made the
|
|
sheet feel like it had nowhere to live. */
|
|
.assistant-side { order:-1; flex:0 0 auto; display:none; min-height:0; margin:0; padding:0;
|
|
background:white; border-bottom:1px solid var(--g200); border-radius:0;
|
|
box-shadow:0 8px 24px rgba(15,23,42,.08); overflow:hidden; }
|
|
body.assistant-sources-open .assistant-side { display:flex; height:min(46vh,340px); }
|
|
.assistant-side .card { flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
|
|
border:none; box-shadow:none; border-radius:0; }
|
|
.assistant-side .card-header { flex:0 0 auto; }
|
|
/* The band is fixed height, so the list inside it is what scrolls. */
|
|
/* On a touchscreen the list is one smooth vertical scroll: no sideways pan,
|
|
and no excerpt scrolling inside it. */
|
|
.assistant-source-excerpt { max-height:none; overflow:visible; }
|
|
.assistant-sources { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; touch-action:pan-y; -webkit-overflow-scrolling:touch;
|
|
padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
|
|
/* Slim toolbar: icon-only actions in one row */
|
|
/* 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:env(safe-area-inset-top, 0px) 0 0; overflow:hidden; gap:0; border-radius:0; }
|
|
.assistant-history .menu-head { padding:14px 14px 8px; }
|
|
.assistant-rail-actions { padding:0 8px; }
|
|
.assistant-rail-workspace { padding:2px 8px 8px; }
|
|
.assistant-history .account-card { padding:8px 12px calc(8px + env(safe-area-inset-bottom)); }
|
|
.assistant-drawer-close { display:none !important; }
|
|
.assistant-history .card, #assistant-saved-chats { width:100%; max-width:100%; min-width:0; }
|
|
/* The chat list takes the free height and scrolls inside it. */
|
|
.assistant-history .card { flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
|
|
#assistant-saved-chats { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
|
|
.assistant-layout.mobile-chats-open .assistant-history { transform:translateX(0); }
|
|
.assistant-history .card { border:none; box-shadow:none; background:none; padding:0 8px; }
|
|
/* 10px above the first date heading, the menu's rhythm (switch → New chat is
|
|
10px too) now that no "Saved Chats" header sits between. */
|
|
#assistant-saved-chats { padding:10px 0 12px; gap:0; }
|
|
.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 { 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 { background:var(--g100); }
|
|
.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 */
|
|
/* No header bar anywhere now, so the layout owns the whole viewport. */
|
|
body.assistant-workspace .assistant-layout { height: calc(100vh - var(--mobile-bar, 0px)); min-height: 0; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
|
|
/* Phones: workspace mode hides .app-header, so there is no 64px to subtract and
|
|
the mobile flex layout must survive the more specific workspace selectors. */
|
|
@media (max-width: 640px) {
|
|
/* The layout is sized to the screen below the menu row; the content area's
|
|
8px padding on top of that made the page 16px taller than the phone. */
|
|
body.assistant-workspace .main-content { padding:0; }
|
|
body.assistant-workspace .assistant-layout { height:calc(100dvh - var(--mobile-bar, 0px)); display:flex; flex-direction:column; grid-template-rows:none; overflow:hidden; }
|
|
|
|
}
|
|
/* Desktop: the saved-chats rail collapses like ChatGPT's sidebar */
|
|
.assistant-layout { transition:grid-template-columns .18s ease; }
|
|
/* Open WebUI-style rail: the column collapses to zero and the chat takes the
|
|
space, animated so the change reads as a fold rather than a jump. */
|
|
.assistant-layout { transition:grid-template-columns .18s ease; }
|
|
/* Citations off: the Sources column is gone, so its track goes with it rather
|
|
than leaving a 330px blank. Both collapse states are spelled out. */
|
|
body.assistant-no-citations .assistant-layout { grid-template-columns:210px minmax(0,1fr); }
|
|
body.assistant-no-citations .assistant-layout.history-collapsed { grid-template-columns:0 minmax(0,1fr); }
|
|
.assistant-layout.history-collapsed { grid-template-columns:0 minmax(0,1fr) 330px; }
|
|
/* NOT display:none — that removes the rail from grid flow, so the chat inherits
|
|
the 0 column and the sources column takes its place. Keep it as a zero-width
|
|
grid item so the remaining columns stay where they belong. */
|
|
.assistant-layout.history-collapsed .assistant-history { width:0; min-width:0; overflow:hidden; visibility:hidden; padding:0; border:0; margin:0; pointer-events:none; }
|
|
@media (prefers-reduced-motion:reduce) { .assistant-layout { transition: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; }
|
|
.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) */
|
|
than a second full-width banner competing with it. */
|
|
.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; }
|
|
/* The closed select shows as much of a chat title as the width allows, so a
|
|
phone shows less than a desktop rather than everything sharing one cut. */
|
|
#create-image-chat { max-width:100%; text-overflow:ellipsis; }
|
|
.assistant-takehome-modal .modal-content { width:min(760px, 94vw); }
|
|
@media (max-width:640px) { .assistant-takehome-modal .modal-content { width:96vw; } }
|
|
.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; }
|
|
/* 15px is the desktop size. The phone override lives earlier in this file, so
|
|
at equal specificity this rule used to win and iOS zoomed on focus; the size
|
|
is set per breakpoint here instead. */
|
|
#assistant-input { flex:1 1 auto; border:none; outline:none; resize:none; background:transparent; line-height:1.5; min-height:56px; max-height:180px; padding:6px 0; }
|
|
@media (min-width:641px) { #assistant-input { font-size:15px; } }
|
|
.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(--blue); background:var(--blue-light); }
|
|
.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(--blue); 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 { position:relative; display:flex; align-items:center; }
|
|
.assistant-model-pill[hidden] { display:none; }
|
|
/* The select is the state holder only; the button is what people see. */
|
|
.assistant-model-state { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); }
|
|
.assistant-model-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--g200); background:white; border-radius:999px; padding:5px 11px; font-family:inherit; font-size:11.5px; font-weight:600; color:var(--g600); cursor:pointer; white-space:nowrap; box-shadow:var(--shadow); }
|
|
.assistant-model-btn:hover, .assistant-model-btn[aria-expanded="true"] { border-color:var(--blue-light); background:var(--blue-light); color:var(--blue); }
|
|
.assistant-model-btn i { font-size:11px; }
|
|
/* Opens upward: the composer sits at the foot of the view. */
|
|
.assistant-model-menu { position:absolute; right:0; bottom:calc(100% + 6px); z-index:40; min-width:220px; max-width:min(320px,80vw); max-height:min(320px,50vh); overflow-y:auto; display:flex; flex-direction:column; gap:2px; padding:6px; background:white; border:1px solid var(--g200); border-radius:12px; box-shadow:0 12px 32px rgba(15,23,42,.16); }
|
|
.assistant-model-menu[hidden] { display:none; }
|
|
.assistant-model-option { display:flex; align-items:center; gap:8px; width:100%; border:0; border-radius:8px; padding:8px 10px; background:none; color:var(--g700); font-family:inherit; font-size:12.5px; text-align:left; cursor:pointer; overflow-wrap:anywhere; }
|
|
.assistant-model-option:hover { background:var(--blue-light); color:var(--blue); }
|
|
.assistant-model-option i { width:12px; flex:0 0 auto; font-size:10px; color:var(--blue); }
|
|
.assistant-model-option[aria-selected="false"] i { visibility:hidden; }
|
|
/* Model choice reads as a control, not a raw form element: the native chevron is
|
|
replaced with one that matches the composer, and the whole pill responds. */
|
|
.assistant-model-control { appearance:none; -webkit-appearance:none; border:1px solid var(--g200); background:white; border-radius:999px; padding:5px 26px 5px 11px; font-family:inherit; font-size:11.5px; font-weight:600; color:var(--g600); cursor:pointer; max-width:240px; text-overflow:ellipsis; box-shadow:var(--shadow);
|
|
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8.2 2.4 4.6l.8-.8L6 6.6l2.8-2.8.8.8z'/%3E%3C/svg%3E");
|
|
background-repeat:no-repeat; background-position:right 9px center; background-size:10px; transition:border-color .12s ease, color .12s ease, background-color .12s ease; }
|
|
.assistant-model-control:hover { border-color:var(--blue-light); background-color:var(--blue-light); color:var(--blue); }
|
|
.assistant-model-control:focus-visible { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-light); }
|
|
.assistant-model-control option { font-weight:500; color:var(--g800); background:white; }
|
|
/* The image-model select sits in a popup, where a full-width control reads
|
|
better than a pill. */
|
|
.assistant-create-image-label { display:block; font-size:11px; font-weight:700; color:var(--g500); text-transform:uppercase; letter-spacing:.04em; margin:10px 0 4px; }
|
|
#assistant-image-model-select { max-width:100%; width:100%; border-radius:10px; padding:8px 26px 8px 11px; font-size:12.5px; }
|
|
.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 */
|
|
@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-rail-link { padding:11px 12px; font-size:14px; color:var(--g700); border-left:none; border-radius:8px; }
|
|
/* Plain: no keyboard shortcut on a phone. */
|
|
.assistant-kbd { display:none; }
|
|
.assistant-rail-link i { display:none; }
|
|
/* The topbar keeps only the hamburger; Go back is in the menu */
|
|
}
|
|
/* 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; }
|
|
|
|
/* Workspace launcher: same ground, card language and spacing as the empty state,
|
|
so the two views are one interface. Desktop only. */
|
|
.assistant-workspace-view { flex:1 1 auto; min-height:0; padding:24px 18px; overflow-y:auto; }
|
|
.assistant-workspace-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; max-width:860px; margin:0 auto; }
|
|
.assistant-workspace-card { display:flex; align-items:center; gap:10px; border:1px solid var(--g200); background:white; border-radius:10px; padding:12px 14px; font-size:12.5px; color:var(--g700); text-align:left; cursor:pointer; box-shadow:var(--shadow); }
|
|
.assistant-workspace-card:hover { border-color:var(--blue-light); background:var(--blue-light); color:var(--blue); }
|
|
.assistant-workspace-card i { width:16px; text-align:center; color:var(--g400); font-size:13px; }
|
|
.assistant-workspace-card:hover i { color:var(--blue); }
|
|
|
|
/* Both views occupy the same box, so switching never moves the page. */
|
|
.assistant-workspace-view { display:none; }
|
|
body.assistant-mode-workspace .assistant-workspace-view { display:block; }
|
|
body.assistant-mode-workspace #assistant-chat-view { display:none; }
|
|
body.assistant-mode-workspace .assistant-history .card,
|
|
body.assistant-mode-workspace .assistant-rail-actions,
|
|
body.assistant-mode-workspace .assistant-side { display:none; }
|
|
body.assistant-mode-workspace .assistant-layout { grid-template-columns:210px minmax(0,1fr); }
|
|
/* Collapsed is the 52px strip in workspace mode too. This said 0, and loading
|
|
after styles.css it beat the 52px rule there, so the collapsed menu (name
|
|
card included) vanished whenever the workspace launcher was showing. */
|
|
body.assistant-mode-workspace.menu-hidden .assistant-layout { grid-template-columns:52px minmax(0,1fr); }
|
|
/* Workspace mode works on a phone too: the launcher is the same grid of cards,
|
|
one per column. Suppressing it here is what made the Workspace pill do
|
|
nothing at all on mobile. */
|
|
@media (max-width:640px) {
|
|
.assistant-workspace-cards { grid-template-columns:1fr; }
|
|
.assistant-workspace-view { padding:14px 12px calc(14px + env(safe-area-inset-bottom)); }
|
|
/* No sources or chat rail belong to the launcher. */
|
|
body.assistant-mode-workspace .assistant-side,
|
|
body.assistant-mode-workspace .assistant-sources-fab { display:none; }
|
|
}
|
|
|
|
/* Rail menu in workspace mode: the app's own .tab-btn shape, so the assistant
|
|
rail and the app sidebar are the same list in the same clothes. */
|
|
/* The rail lists every app tab, which overflows a short viewport. The app
|
|
sidebar has always scrolled; this one had no overflow rule, so the list simply
|
|
ran off the bottom until you left for the app and got scrolling "suddenly".
|
|
The head and the account card stay put; only the list moves. */
|
|
.assistant-rail-workspace { display:none; flex-direction:column; gap:1px; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
|
|
body.assistant-mode-workspace .assistant-rail-workspace { display:flex; }
|
|
.assistant-rail-links { display:flex; flex-direction:column; gap:1px; }
|
|
.assistant-rail-link { display:flex; align-items:center; gap:10px; width:100%; border:none; border-left:3px solid transparent; background:none; color:var(--g600); font-family:inherit; font-size:13px; font-weight:500; text-align:left; padding:10px 12px; cursor:pointer; }
|
|
.assistant-rail-link:hover { background:var(--g50); color:var(--g900); }
|
|
.assistant-rail-link i { width:16px; text-align:center; flex-shrink:0; font-size:14px; color:var(--g400); }
|
|
.assistant-rail-link:hover i { color:var(--blue); }
|
|
|
|
/* ── Composer ────────────────────────────────────────────────────────────────
|
|
With the toolbar gone, both the chat and the workspace launcher start at the
|
|
very top of the same box, so switching moves nothing. */
|
|
.assistant-composer-right { display:flex; align-items:center; gap:6px; margin-left:auto; }
|
|
.assistant-tools { display:flex; align-items:center; gap:6px; min-width:0; }
|
|
|
|
/* The + holds everything that acts on the conversation. */
|
|
.assistant-plus { position:relative; }
|
|
.assistant-plus-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--g200); border-radius:999px; background:white; color:var(--g600); font-size:13px; cursor:pointer; }
|
|
.assistant-plus-btn:hover, .assistant-plus-btn[aria-expanded="true"] { border-color:var(--blue); background:var(--blue-light); color:var(--blue); }
|
|
.assistant-plus-menu { position:absolute; bottom:calc(100% + 8px); left:0; z-index:40; min-width:210px; display:flex; flex-direction:column; gap:2px; padding:6px; background:white; border:1px solid var(--g200); border-radius:12px; box-shadow:0 12px 32px rgba(15,23,42,.16); }
|
|
.assistant-plus-menu[hidden] { display:none; }
|
|
.assistant-plus-item { display:flex; align-items:center; gap:10px; width:100%; border:0; border-radius:8px; padding:8px 10px; background:none; color:var(--g700); font-family:inherit; font-size:13px; text-align:left; cursor:pointer; }
|
|
.assistant-plus-item:hover { background:var(--blue-light); color:var(--blue); }
|
|
.assistant-plus-item i { width:16px; text-align:center; color:var(--g400); font-size:12px; }
|
|
.assistant-plus-item:hover i { color:var(--blue); }
|
|
|
|
|
|
/* The drawer button floats on phones instead of occupying a bar the desktop
|
|
layout does not have — that bar was the dead strip at the top and the reason
|
|
the assistant and the workspace were different heights. */
|
|
.assistant-mobile-menu { display:none; }
|
|
@media (max-width:640px) {
|
|
.assistant-mobile-menu { display:inline-flex; align-items:center; justify-content:center; position:absolute; top:8px; left:8px; z-index:70; width:36px; height:36px; border:1px solid var(--g200); border-radius:10px; background:white; color:var(--g600); font-size:14px; box-shadow:var(--shadow); }
|
|
.assistant-layout { position:relative; }
|
|
}
|
|
/* Both toggles point the way they act, and flip when collapsed. */
|
|
.assistant-menu-toggle i { transition:transform .15s ease; }
|
|
.assistant-menu-toggle.is-collapsed i { transform:rotate(180deg); }
|
|
|
|
/* ── One surface for both modes ──────────────────────────────────────────────
|
|
The tiled ground, the padding and the box are identical whether you are
|
|
reading the transcript or the workspace launcher, so switching changes the
|
|
content and nothing else. */
|
|
.assistant-main.card {
|
|
background-image:linear-gradient(var(--g100) 1px, transparent 1px), linear-gradient(90deg, var(--g100) 1px, transparent 1px);
|
|
background-size:28px 28px; background-position:-1px -1px; background-color:white;
|
|
border:1px solid var(--g200); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
|
|
|
|
/* The composer is a card floating on that ground, with room around it rather
|
|
than pinned to the panel edge. */
|
|
.assistant-composer { margin:0 auto 20px; max-width:760px; width:calc(100% - 40px); border-top:1px solid var(--g200); }
|
|
/* Nothing sits above the transcript, so an empty one would leave the composer at
|
|
the very top. Push it to a comfortable reading position instead. */
|
|
.assistant-messages:not(:has(.assistant-msg)) { display:flex; flex-direction:column; justify-content:center; padding-bottom:0; }
|
|
.assistant-empty { max-width:680px; margin:0 auto 26px; text-align:center; color:var(--g500); }
|
|
#assistant-chat-view:has(.assistant-messages:not(:has(.assistant-msg))) { grid-template-rows:minmax(0,1.15fr) auto; }
|
|
@media (max-width:640px) {
|
|
.assistant-composer { margin:0 10px 10px; width:auto; max-width:none; }
|
|
}
|
|
|
|
/* The button that opens that sheet. Desktop keeps the column, so it is only
|
|
ever shown on a phone, and only when the answer actually has citations. */
|
|
.assistant-sources-fab { display:none; }
|
|
@media (max-width:640px) {
|
|
/* It sits in the top bar's row, beside the menu button, so it never covers
|
|
the conversation — floating above the composer, it did. */
|
|
.assistant-sources-fab { position:fixed; right:calc(8px + env(safe-area-inset-right, 0px)); top:calc(8px + env(safe-area-inset-top, 0px)); z-index:81;
|
|
display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border:1px solid var(--g200);
|
|
border-radius:999px; background:white; color:var(--blue); font-family:inherit; font-size:12.5px;
|
|
font-weight:600; cursor:pointer; }
|
|
.assistant-sources-fab[hidden] { display:none; }
|
|
body.assistant-sources-open .assistant-sources-fab { background:var(--blue-light); border-color:var(--blue-light); }
|
|
}
|
|
|
|
/* Desktop: the rail is laid out as the workspace sidebar is, flush to the
|
|
window edge and flat on the page's tiled ground. It used to sit inside the
|
|
content area's 14px padding, so its name card sat 6px lower and further in
|
|
and the page was 28px taller than the window. The 14px now belongs to the
|
|
panels beside the rail. */
|
|
@media (min-width:961px) {
|
|
body.assistant-workspace .main-content { padding:0; }
|
|
body.assistant-workspace .assistant-layout { padding-right:14px; }
|
|
body.assistant-workspace .assistant-main,
|
|
body.assistant-workspace .assistant-side { margin-block:14px; height:auto; }
|
|
body.assistant-workspace .assistant-history { padding:0; gap:0; }
|
|
body.assistant-workspace .assistant-rail-actions { padding:0 8px; }
|
|
body.assistant-workspace .assistant-history .card { padding:0 8px; }
|
|
/* Workspace links: the app's .tab-btn, full-bleed with the same inset. */
|
|
body.assistant-workspace .assistant-rail-link { padding:10px 16px; }
|
|
}
|
|
|
|
/* The composer says it is working through the send button, which becomes Stop.
|
|
The status pill and the autosave word repeated that beside the model control,
|
|
so they are announced but not drawn. */
|
|
.assistant-status, .assistant-autosave-state { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
|