f3a2309536
Measured in real Chromium (1440x900 and 390x844) rather than inferred. Desktop - The assistant rail sat inside the content area's 14px padding, on the tiled ground. So its background differed from the workspace sidebar's, its name card sat 6px lower and further in, and the page was 28px taller than the window. It is now the same flush white sidebar with the same insets; the chat and sources panels carry the 14px. Measured: name card 848-892 at x=8, brand, switch and 210px width identical in both views, expanded and collapsed, with no page scroll. Phone - The menu button opens the chat history in the assistant (its drawer) and the workspace list elsewhere. In workspace mode the drawer lists the workspace links. Choosing a page, switching mode or pressing « closes it. - The drawer no longer scrolls as a whole: only the chat list does, so the name card is pinned at the foot, the same place as in the workspace menu (790-836 at x=12 in both). - Both menus are one plain shape: same width, text rows, grey current row, no "Menu" header and one close control. - The assistant page no longer overflows the phone by 16px. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01W4rptBNvn6RYieQw54GXNS
581 lines
54 KiB
CSS
581 lines
54 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; }
|
|
.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; }
|
|
/* 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. */
|
|
.assistant-chats-header { display:flex; align-items:center; justify-content:space-between; width:100%; border:0; background:none; cursor:pointer; text-align:left; }
|
|
.assistant-chats-caret { font-size:10px; color:var(--g400); transition:transform .15s ease; }
|
|
.assistant-chats-header[aria-expanded="false"] .assistant-chats-caret { transform:rotate(-90deg); }
|
|
|
|
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; }
|
|
.assistant-source { 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 { margin-left:auto; font-size:11px; }
|
|
/* 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. */
|
|
.assistant-sources { flex:1 1 auto; min-height:0; overflow-y:auto; -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: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; }
|
|
.assistant-history .card-header { padding:6px 10px 2px; }
|
|
#assistant-saved-chats { padding:2px 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; }
|
|
#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(--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 { display:flex; align-items:center; }
|
|
.assistant-model-pill[hidden] { display:none; }
|
|
/* 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-history .card-header h3 { font-size:11px; 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, no icon out of line with the rows. */
|
|
.assistant-kbd, .assistant-history .card-header h3 i { 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; }
|
|
.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; }
|
|
|
|
/* 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); }
|
|
body.assistant-mode-workspace.menu-hidden .assistant-layout { grid-template-columns:0 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:8px; top:8px; 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 the same white sidebar the workspace uses, flush to the
|
|
window edge. It used to sit inside the content area's 14px padding, on the
|
|
tiled ground — so the menu changed background between the two views, the
|
|
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; background:white; border-right:1.5px solid var(--g200); }
|
|
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; }
|
|
}
|