189 lines
14 KiB
CSS
189 lines
14 KiB
CSS
@import "../components/chat/message-bubble.css";
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
color: #211c2b;
|
|
background: #fff;
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
--radius: 0px;
|
|
--lite-border: #ada7b8;
|
|
--lite-muted: #595064;
|
|
--lite-accent: #50327c;
|
|
--message-bubble-background: #f3f1f7;
|
|
--message-bubble-border: #aaa2b6;
|
|
--message-bubble-shadow: none;
|
|
--message-bubble-user-background: #e9e0f5;
|
|
--message-bubble-user-border: #9683b1;
|
|
--message-bubble-user-color: #211c2b;
|
|
--message-footer-color: var(--lite-muted);
|
|
--message-footer-hover-background: #ede8f4;
|
|
--message-footer-hover-color: #211c2b;
|
|
--message-footer-focus-color: var(--lite-accent);
|
|
--message-footer-transition: none;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html, body, #app { height: 100%; width: 100%; margin: 0; }
|
|
body { overflow: hidden; }
|
|
button, input, select, textarea { font: inherit; color: inherit; }
|
|
button, input, select, textarea, summary { border: 1px solid var(--lite-border); border-radius: var(--radius); background: #fff; }
|
|
button { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; cursor: pointer; padding: .5rem .75rem; min-height: 40px; font-size: .875rem; font-weight: 500; line-height: 1.4; }
|
|
button:hover { background: #ede8f4; }
|
|
button:disabled { cursor: default; color: #625b6d; background: #eae7ee; border-color: var(--lite-border); }
|
|
button svg, summary svg { width: 1rem; height: 1rem; flex: none; }
|
|
input, select, textarea { display: block; width: 100%; padding: .5rem .75rem; min-height: 40px; }
|
|
textarea { resize: vertical; line-height: 1.5; }
|
|
label { display: block; font-size: .875rem; font-weight: 500; }
|
|
a { color: var(--lite-accent); text-decoration: underline; overflow-wrap: anywhere; }
|
|
:focus-visible { outline: 2px solid var(--lite-accent); outline-offset: 2px; }
|
|
h1, h2, h3, p { margin: 0; }
|
|
h1 { font-size: 1rem; font-weight: 600; line-height: 1.5; }
|
|
h2 { font-size: 1.1rem; line-height: 1.4; }
|
|
small { font-size: .75rem; }
|
|
summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; padding: .5rem .75rem; min-height: 40px; font-size: .875rem; list-style: none; }
|
|
summary::-webkit-details-marker { display: none; }
|
|
pre { max-width: 100%; overflow: auto; padding: .75rem; border: 1px solid var(--lite-border); border-radius: var(--radius); background: #f5f3f8; font-size: .875rem; }
|
|
::selection { color: #fff; background: var(--lite-accent); }
|
|
.lite-shell { display: flex; height: 100%; min-height: 0; padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); }
|
|
.lite-sidebar { display: flex; flex-direction: column; width: 320px; flex: none; min-height: 0; border-right: 1px solid var(--lite-border); background: #f4f1f8; }
|
|
.lite-sidebar-header { display: flex; align-items: center; justify-content: space-between; min-height: 96px; padding: 20px 16px 16px; }
|
|
.lite-brand { display: inline-block; color: var(--lite-accent); font-size: 30px; text-decoration: none; }
|
|
.lite-workspace-actions { display: flex; flex-direction: column; gap: .75rem; padding: 0 12px 12px; }
|
|
.lite-workspace-actions button { width: 100%; justify-content: flex-start; gap: .75rem; padding-left: .75rem; }
|
|
.lite-workspace-actions button:first-child { min-height: 44px; font-size: 15px; }
|
|
.lite-workspace-actions .lite-agent-button { min-height: 50px; border-color: #bcb5c7; background: #f4f1f8; font-weight: 600; }
|
|
.lite-agent-button svg { width: 18px; height: 18px; }
|
|
.lite-agent-button[aria-current="page"] { background: #e4d9f3; border-color: var(--lite-accent); }
|
|
.lite-primary { color: #fff; background: var(--lite-accent); border-color: var(--lite-accent); }
|
|
.lite-primary:hover { background: #402563; }
|
|
.lite-history-search { position: relative; margin: 0 12px 12px; }
|
|
.lite-history-search > svg { position: absolute; top: 12px; left: 12px; height: 16px; width: 16px; color: var(--lite-muted); }
|
|
.lite-history-search input { padding-left: 36px; font-size: 14px; }
|
|
.lite-history { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 12px; }
|
|
.lite-history h2 { margin: 12px 8px 8px; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lite-muted); }
|
|
.lite-history-list { list-style: none; padding: 0; margin: 0; }
|
|
.lite-history-list li { margin-bottom: 4px; }
|
|
.lite-history-list button { width: 100%; justify-content: flex-start; align-items: flex-start; gap: .5rem; text-align: left; padding: 10px 12px; background: #f4f1f8; border-color: #f4f1f8; }
|
|
.lite-history-list button:hover { background: #ede8f4; }
|
|
.lite-history-list button[aria-current="page"] { border-color: var(--lite-accent); background: #e4d9f3; }
|
|
.lite-history-list button > svg { margin-top: 2px; }
|
|
.lite-history-item-content { min-width: 0; flex: 1; }
|
|
.lite-history-title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 600; }
|
|
.lite-history-title svg { display: inline; width: 12px; height: 12px; margin-left: 5px; fill: currentColor; }
|
|
.lite-history-item-content time, .lite-history-item-content small { display: block; margin-top: 4px; color: var(--lite-muted); font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }
|
|
.lite-sidebar-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--lite-border); padding: 8px 16px; font-size: 12px; }
|
|
.lite-text-button { padding: .5rem 0; border: 0; background: none; font-size: inherit; }
|
|
.lite-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; flex: 1; }
|
|
.lite-workspace-header { display: flex; flex: none; align-items: center; gap: .5rem; min-height: 65px; padding: 12px 28px; border-bottom: 1px solid var(--lite-border); background: #f9f7fc; }
|
|
.lite-workspace-title { flex: 1; min-width: 0; }
|
|
.lite-workspace-title h1, .lite-workspace-title p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.lite-workspace-title p { color: var(--lite-muted); font-size: 12px; }
|
|
.lite-header-actions { display: flex; align-items: center; gap: 8px; }
|
|
.lite-icon-button { width: 40px; padding: 0; flex: none; }
|
|
.lite-settings { position: relative; }
|
|
.lite-settings[open] summary { border-color: var(--lite-accent); }
|
|
.lite-model-controls { position: absolute; top: calc(100% + 8px); right: 0; z-index: 10; width: 280px; padding: 16px; border: 1px solid var(--lite-border); border-radius: var(--radius); background: #fff; }
|
|
.lite-model-controls label + label { margin-top: 12px; }
|
|
.lite-model-controls input, .lite-model-controls select { margin-top: 4px; font-weight: 400; }
|
|
.lite-scroll, .lite-agent-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 32px 40px 24px; }
|
|
.lite-transcript, .lite-search-results { max-width: 896px; margin: 0 auto; min-width: 0; }
|
|
.lite-message { display: flex; justify-content: flex-start; min-width: 0; margin-bottom: 24px; }
|
|
.lite-message-user { justify-content: flex-end; }
|
|
.lite-message-content { min-width: 0; max-width: 85%; overflow-wrap: anywhere; }
|
|
.lite-message:not(.lite-message-user) > .lite-message-content { font-size: 16px; line-height: 1.82; }
|
|
.lite-message-user > .lite-message-content { max-width: 78%; }
|
|
.lite-message-content > .assistant-message-footer { margin-top: 12px; }
|
|
.lite-message-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; margin: 5px 3px 0; color: var(--lite-muted); font-size: 11px; line-height: 1.4; }
|
|
.lite-message-meta time::before { content: "·"; margin-right: 7px; }
|
|
.lite-message-user .lite-message-meta { justify-content: flex-end; }
|
|
.lite-plain-text { white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
.lite-tool { max-width: 896px; margin: 0 auto 24px; font-size: .875rem; overflow-wrap: anywhere; }
|
|
.lite-tool summary { display: list-item; list-style: disclosure-closed inside; width: fit-content; max-width: 100%; }
|
|
.lite-tool[open] summary { list-style-type: disclosure-open; }
|
|
.lite-attachments { font-size: .875rem; padding-left: 1.25rem; margin: 8px 0; }
|
|
.lite-composer-shell { flex: none; padding: 12px 24px 24px; background: #fff; }
|
|
.lite-composer { max-width: 896px; margin: 0 auto; padding: 8px; border: 1px solid #9683b1; border-radius: var(--radius); background: #faf8fd; }
|
|
.lite-composer textarea { max-height: 160px; min-height: 48px; padding: 12px; border: 0; border-radius: var(--radius); background: #faf8fd; font-size: 16px; resize: vertical; }
|
|
.lite-composer textarea:focus { outline: 0; }
|
|
.lite-composer:focus-within { outline: 2px solid var(--lite-accent); outline-offset: 2px; }
|
|
.lite-composer-footer { display: flex; align-items: center; justify-content: flex-end; padding: 0 8px 4px; }
|
|
.lite-send { width: 40px; height: 40px; padding: 0; }
|
|
.lite-send svg { width: 18px; height: 18px; }
|
|
.lite-muted { color: var(--lite-muted); font-size: 12px; }
|
|
.lite-status { max-width: 896px; margin: 0 auto 16px; color: var(--lite-muted); font-size: 14px; }
|
|
.lite-error { max-width: 896px; margin: 0 auto 12px; padding: 8px 12px; border: 1px solid #873535; border-radius: var(--radius); color: #732222; background: #fff; font-size: 13px; overflow-wrap: anywhere; }
|
|
.lite-error button { margin-top: 8px; }
|
|
.lite-agent { display: flex; flex-direction: column; flex: 1; min-height: 0; }
|
|
.lite-agent-connection { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 4px 28px; border-bottom: 1px solid var(--lite-border); font-size: 12px; }
|
|
.lite-agent-connection button { margin-left: auto; border: 0; min-height: 32px; padding: 4px 0; background: none; font-size: 12px; }
|
|
.lite-agent-scroll .lite-transcript { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; max-width: 848px; }
|
|
.lite-agent-scroll .lite-transcript > * { flex: none; }
|
|
.lite-agent-scroll { overflow-anchor: none; }
|
|
.lite-agent .lite-message { margin-bottom: 15px; }
|
|
.lite-agent .lite-message-content { max-width: 89%; }
|
|
.lite-agent .lite-message-user .lite-message-content { max-width: 78%; }
|
|
.lite-agent .lite-composer { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; max-width: 788px; padding: 7px 8px 7px 5px; border-radius: 17px; }
|
|
.lite-agent .lite-composer textarea { flex: 1; min-width: 0; width: auto; min-height: 46px; max-height: 156px; resize: none; padding: 13px 11px; font-size: 14px; line-height: 20px; border-radius: 12px; }
|
|
.lite-agent .lite-composer-footer { flex: none; padding: 0; }
|
|
.lite-agent .lite-send { width: 38px; height: 38px; min-height: 38px; margin-bottom: 4px; border-radius: 11px; }
|
|
.lite-agent .lite-composer > .lite-attachments, .lite-agent .lite-composer > .lite-error { flex-basis: 100%; }
|
|
.lite-delivery-error { color: #732222; }
|
|
.lite-delivery-error button { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; text-decoration: underline; }
|
|
.lite-result-list { list-style: none; padding: 0; margin: 24px 0 0; }
|
|
.lite-result-list li { margin-bottom: 24px; }
|
|
.lite-result-list h2 { font-size: 18px; font-weight: 500; }
|
|
.lite-result-url { margin: 4px 0 8px; font-size: 12px; color: var(--lite-muted); overflow-wrap: anywhere; }
|
|
.lite-search-answer { padding-bottom: 16px; border-bottom: 1px solid var(--lite-border); margin-bottom: 16px; }
|
|
.lite-search-answer h2 { margin-bottom: 12px; }
|
|
.md-content { overflow-wrap: anywhere; }
|
|
.md-content > :first-child { margin-top: 0; }
|
|
.md-content > :last-child { margin-bottom: 0; }
|
|
.md-content p + p { margin-top: .85rem; }
|
|
.md-content h1, .md-content h2, .md-content h3 { margin: 1.2rem 0 .45rem; line-height: 1.25; font-weight: 700; }
|
|
.md-content h1 { font-size: 1.45rem; }
|
|
.md-content h2 { font-size: 1.25rem; }
|
|
.md-content h3 { font-size: 1.1rem; }
|
|
.md-content ul, .md-content ol { padding-left: 1.35rem; margin: .85rem 0; }
|
|
.md-content li + li { margin-top: .3rem; }
|
|
.md-content blockquote { border-left: 3px solid #aaa2b6; margin: 1rem 0; padding-left: 1rem; }
|
|
.md-content code { font-size: .86em; border-radius: var(--radius); background: #ebe7f1; padding: .05rem .3rem; }
|
|
.md-content pre { margin: 1rem 0; }
|
|
.md-content pre code { display: block; background: none; padding: 0; font-size: .88em; line-height: 1.55; white-space: pre; }
|
|
.md-table-scroll { max-width: 100%; overflow-x: auto; margin: .35rem 0 1rem; }
|
|
.md-content table { border-collapse: collapse; min-width: 100%; font-size: .94em; line-height: 1.48; }
|
|
.md-content td, .md-content th { border: 1px solid var(--lite-border); text-align: left; padding: .48rem .7rem; }
|
|
.md-content th { background: #ede8f4; white-space: nowrap; }
|
|
.lite-auth { max-width: 448px; margin: 15vh auto 0; padding: 24px; border: 1px solid var(--lite-border); border-radius: var(--radius); background: #f9f7fc; }
|
|
.lite-auth .lite-brand { margin-bottom: 24px; }
|
|
.lite-auth h1 { font-size: 18px; }
|
|
.lite-auth p { margin-top: 4px; font-size: 14px; }
|
|
.lite-auth form { margin: 20px 0 12px; }
|
|
.lite-auth input { margin: 8px 0 12px; }
|
|
.lite-auth .lite-primary { width: 100%; }
|
|
.lite-auth > a:last-child { font-size: 12px; }
|
|
.lite-sidebar-trigger, .lite-sidebar-close, .lite-sidebar-backdrop { display: none; }
|
|
.lite-skip, .lite-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
|
|
.lite-skip:focus { z-index: 100; top: 0; left: 0; width: auto; height: auto; clip: auto; padding: .5rem; background: #fff; }
|
|
@supports (height: 100dvh) { html, body, #app { height: 100dvh; } }
|
|
@media (min-width: 1024px) { .lite-scroll, .lite-agent-scroll { padding-left: 56px; padding-right: 56px; } }
|
|
@media (max-width: 767px) {
|
|
.lite-sidebar { display: none; position: fixed; inset: 0 auto 0 0; z-index: 30; width: 86vw; max-width: 320px; }
|
|
.lite-sidebar.is-open { display: flex; }
|
|
.lite-sidebar-trigger, .lite-sidebar-close { display: inline-flex; background: none; border: 0; }
|
|
.lite-sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 20; width: 100%; height: 100%; border: 0; border-radius: 0; background: #c9c3d3; }
|
|
.lite-sidebar-backdrop:hover { background: #c9c3d3; }
|
|
.lite-workspace-header { min-height: 65px; padding: 10px 12px; }
|
|
.lite-workspace-title h1 { font-size: 14px; }
|
|
.lite-header-actions { gap: 4px; }
|
|
.lite-settings summary { justify-content: center; width: 40px; padding: 0; }
|
|
.lite-settings summary > span { display: none; }
|
|
.lite-model-controls { width: min(280px, calc(100vw - 24px)); }
|
|
.lite-scroll, .lite-agent-scroll { padding: 24px 16px; }
|
|
.lite-message-content { width: 100%; max-width: 100%; }
|
|
.lite-message-user > .lite-message-content { width: auto; max-width: 87%; }
|
|
.lite-composer-shell { padding: 8px 12px 12px; }
|
|
.lite-agent-connection { padding: 4px 16px; }
|
|
.lite-agent .lite-message-content { width: auto; }
|
|
.lite-auth { margin: 8vh 16px 0; padding: 24px; max-width: none; }
|
|
}
|