1571 lines
28 KiB
CSS
1571 lines
28 KiB
CSS
/* Beautiful UI-inspired foundation, scoped to the asset assistant. */
|
|
.aq-shell {
|
|
--aq-bg: #fff;
|
|
--aq-sidebar: #f7f7f6;
|
|
--aq-inset: #f5f5f4;
|
|
--aq-ink: #252523;
|
|
--aq-muted: #73736f;
|
|
--aq-line: #e8e8e5;
|
|
--aq-hover: #eeefeb;
|
|
--aq-accent: #537c65;
|
|
--aq-soft: #eff5ef;
|
|
--aq-danger: #b34538;
|
|
display: flex !important;
|
|
gap: 0 !important;
|
|
padding: 0 !important;
|
|
width: calc(100vw - 64px) !important;
|
|
max-width: 1380px !important;
|
|
height: calc(100dvh - 64px);
|
|
max-height: 960px;
|
|
border-radius: 16px !important;
|
|
overflow: hidden;
|
|
background: var(--aq-bg) !important;
|
|
color: var(--aq-ink) !important;
|
|
font-family:
|
|
"Geist Variable",
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
"PingFang SC",
|
|
sans-serif;
|
|
font-size: 13px;
|
|
box-shadow: 0 30px 100px #0002;
|
|
}
|
|
.aq-shell.aq-dark {
|
|
--aq-bg: #1a1b1a;
|
|
--aq-sidebar: #151615;
|
|
--aq-inset: #232523;
|
|
--aq-ink: #ededeb;
|
|
--aq-muted: #a4a6a1;
|
|
--aq-line: #30332f;
|
|
--aq-hover: #2b2e29;
|
|
--aq-accent: #a1bda5;
|
|
--aq-soft: #26332b;
|
|
--aq-danger: #f09286;
|
|
}
|
|
.aq-shell button {
|
|
cursor: pointer;
|
|
transition:
|
|
background 0.15s,
|
|
color 0.15s;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
border-radius: 7px;
|
|
font: inherit;
|
|
}
|
|
.aq-shell button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.42;
|
|
}
|
|
.aq-shell button:hover:not(:disabled) {
|
|
background: var(--aq-hover);
|
|
}
|
|
.aq-shell button:focus-visible,
|
|
.aq-shell input:focus-visible,
|
|
.aq-shell textarea:focus-visible {
|
|
outline: 2px solid var(--aq-accent);
|
|
outline-offset: 3px;
|
|
}
|
|
.aq-shell svg {
|
|
flex-shrink: 0;
|
|
}
|
|
.aq-sidebar {
|
|
width: 222px;
|
|
flex-shrink: 0;
|
|
background: var(--aq-sidebar);
|
|
border-right: 1px solid var(--aq-line);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 26px 14px 16px;
|
|
}
|
|
.aq-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 0 9px 29px;
|
|
}
|
|
.aq-brand-mark {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
background: var(--aq-ink);
|
|
color: var(--aq-bg);
|
|
border-radius: 10px;
|
|
}
|
|
.aq-brand strong {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
display: block;
|
|
letter-spacing: -0.4px;
|
|
}
|
|
.aq-brand span {
|
|
display: block;
|
|
font-size: 8px;
|
|
letter-spacing: 1.5px;
|
|
color: var(--aq-muted);
|
|
margin-top: 5px;
|
|
}
|
|
.aq-new {
|
|
min-height: 40px;
|
|
border: 1px solid var(--aq-line);
|
|
background: var(--aq-bg);
|
|
justify-content: flex-start !important;
|
|
padding: 0 12px;
|
|
margin-bottom: 29px;
|
|
box-shadow: 0 1px 2px #00000005;
|
|
}
|
|
.aq-new > span {
|
|
margin-left: auto;
|
|
color: var(--aq-muted);
|
|
}
|
|
.aq-side-label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 11px;
|
|
color: var(--aq-muted);
|
|
padding: 0 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.aq-nav-active,
|
|
.aq-nav {
|
|
padding: 11px 10px;
|
|
justify-content: flex-start !important;
|
|
min-height: 42px;
|
|
}
|
|
.aq-nav-active {
|
|
background: var(--aq-hover);
|
|
font-weight: 550 !important;
|
|
}
|
|
.aq-nav {
|
|
color: var(--aq-muted);
|
|
}
|
|
.aq-nav > svg:last-child {
|
|
margin-left: auto;
|
|
}
|
|
.aq-beta {
|
|
font-size: 9px;
|
|
letter-spacing: 0.7px;
|
|
color: var(--aq-muted);
|
|
margin-left: auto;
|
|
border: 1px solid var(--aq-line);
|
|
padding: 2px 4px;
|
|
border-radius: 4px;
|
|
}
|
|
.aq-history-label {
|
|
margin-top: 32px;
|
|
}
|
|
.aq-history {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
.aq-history > p {
|
|
font-size: 12px;
|
|
line-height: 1.9;
|
|
color: var(--aq-muted);
|
|
padding: 12px 10px;
|
|
}
|
|
.aq-history button {
|
|
justify-content: flex-start !important;
|
|
width: 100%;
|
|
padding: 11px 10px;
|
|
color: var(--aq-muted);
|
|
text-align: left;
|
|
}
|
|
.aq-history button > span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.aq-side-bottom {
|
|
padding: 17px 9px 0;
|
|
border-top: 1px solid var(--aq-line);
|
|
}
|
|
.aq-side-bottom > div {
|
|
display: flex;
|
|
gap: 9px;
|
|
align-items: center;
|
|
}
|
|
.aq-side-bottom span {
|
|
font-size: 11px;
|
|
color: var(--aq-muted);
|
|
}
|
|
.aq-side-bottom strong {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: var(--aq-ink);
|
|
font-weight: 500;
|
|
margin-top: 3px;
|
|
}
|
|
.aq-side-bottom i {
|
|
margin-left: auto;
|
|
}
|
|
.aq-side-bottom p {
|
|
display: flex;
|
|
gap: 7px;
|
|
font-size: 10px;
|
|
color: var(--aq-muted);
|
|
margin-top: 17px;
|
|
}
|
|
.aq-workspace {
|
|
min-width: 0;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.aq-header {
|
|
height: 64px;
|
|
flex-shrink: 0;
|
|
padding: 0 25px;
|
|
border-bottom: 1px solid var(--aq-line);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.aq-header > div {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
.aq-header strong {
|
|
font-weight: 600;
|
|
}
|
|
.aq-header-divider {
|
|
height: 13px;
|
|
width: 1px;
|
|
background: var(--aq-line);
|
|
margin: 0 5px;
|
|
}
|
|
.aq-header-subtitle {
|
|
color: var(--aq-muted);
|
|
font-size: 12px;
|
|
}
|
|
.aq-icon-button {
|
|
width: 36px;
|
|
height: 36px;
|
|
color: var(--aq-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
.aq-mobile-new {
|
|
display: none !important;
|
|
}
|
|
.aq-scope {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 28px;
|
|
font-size: 11px;
|
|
color: var(--aq-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
.aq-scope > span:first-of-type {
|
|
max-width: 45%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.aq-dot {
|
|
opacity: 0.5;
|
|
}
|
|
.aq-live {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.aq-live i,
|
|
.aq-side-bottom i {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: var(--aq-accent);
|
|
display: block;
|
|
}
|
|
.aq-info {
|
|
margin: 4px 25px 8px;
|
|
padding: 14px 16px;
|
|
background: var(--aq-inset);
|
|
border-radius: 10px;
|
|
font-size: 12px;
|
|
line-height: 1.8;
|
|
max-height: 180px;
|
|
overflow: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
.aq-info p {
|
|
color: var(--aq-muted);
|
|
margin-top: 5px;
|
|
}
|
|
.aq-conversation {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
overscroll-behavior: contain;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--aq-line) transparent;
|
|
}
|
|
.aq-welcome {
|
|
width: min(680px, 100%);
|
|
margin: auto;
|
|
padding: clamp(25px, 6vh, 70px) 30px 30px;
|
|
text-align: center;
|
|
}
|
|
.aq-welcome-mark {
|
|
display: grid;
|
|
place-items: center;
|
|
margin: 0 auto 22px;
|
|
width: 60px;
|
|
height: 60px;
|
|
border: 1px solid var(--aq-line);
|
|
border-radius: 19px;
|
|
background: linear-gradient(140deg, var(--aq-bg), var(--aq-inset));
|
|
box-shadow: 0 5px 14px #00000004;
|
|
color: var(--aq-accent);
|
|
}
|
|
.aq-eyebrow {
|
|
font-size: 9px;
|
|
color: var(--aq-muted);
|
|
letter-spacing: 1.65px;
|
|
font-weight: 500;
|
|
}
|
|
.aq-welcome h2 {
|
|
font-size: 27px;
|
|
letter-spacing: -1px;
|
|
font-weight: 550;
|
|
margin: 14px 0;
|
|
}
|
|
.aq-welcome > p {
|
|
font-size: 13px;
|
|
color: var(--aq-muted);
|
|
line-height: 1.9;
|
|
}
|
|
.aq-prompt-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 10px;
|
|
margin-top: 34px;
|
|
text-align: left;
|
|
}
|
|
.aq-prompt-grid > button {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
justify-content: flex-start;
|
|
padding: 17px 19px;
|
|
border: 1px solid var(--aq-line);
|
|
border-radius: 12px;
|
|
gap: 0;
|
|
text-align: left;
|
|
min-height: 112px;
|
|
}
|
|
.aq-prompt-grid > button > div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: var(--aq-muted);
|
|
margin-bottom: 13px;
|
|
}
|
|
.aq-prompt-grid > button strong {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
.aq-prompt-grid > button > span {
|
|
color: var(--aq-muted);
|
|
font-size: 11px;
|
|
margin-top: 5px;
|
|
}
|
|
.aq-welcome-note {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
font-size: 11px;
|
|
color: var(--aq-muted);
|
|
margin-top: 24px;
|
|
}
|
|
.aq-mobile-break {
|
|
display: none;
|
|
}
|
|
.aq-turns {
|
|
max-width: 820px;
|
|
margin: 0 auto;
|
|
padding: 22px 34px 35px;
|
|
}
|
|
.aq-turn {
|
|
scroll-margin-top: 20px;
|
|
margin-bottom: 34px;
|
|
}
|
|
.aq-question {
|
|
display: flex;
|
|
gap: 13px;
|
|
align-items: flex-start;
|
|
margin: 0 0 25px;
|
|
}
|
|
.aq-question > span {
|
|
display: grid;
|
|
place-items: center;
|
|
background: var(--aq-inset);
|
|
border: 1px solid var(--aq-line);
|
|
width: 27px;
|
|
height: 27px;
|
|
font-size: 11px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
.aq-question p {
|
|
line-height: 1.8;
|
|
font-size: 15px;
|
|
padding-top: 1px;
|
|
font-weight: 500;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.aq-assistant-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.aq-small-mark {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 26px;
|
|
height: 26px;
|
|
border: 1px solid var(--aq-line);
|
|
border-radius: 8px;
|
|
color: var(--aq-accent);
|
|
}
|
|
.aq-assistant-label strong {
|
|
font-size: 12px;
|
|
font-weight: 550;
|
|
}
|
|
.aq-assistant-label > span:last-child {
|
|
color: var(--aq-muted);
|
|
font-size: 10px;
|
|
margin-left: 4px;
|
|
}
|
|
.aq-thinking {
|
|
margin: 0 0 17px 35px;
|
|
color: var(--aq-muted);
|
|
}
|
|
.aq-thinking > button {
|
|
min-height: 32px;
|
|
padding: 4px 6px;
|
|
margin-left: -6px;
|
|
font-size: 12px;
|
|
}
|
|
.aq-time {
|
|
font-size: 10px;
|
|
font-variant-numeric: tabular-nums;
|
|
opacity: 0.8;
|
|
}
|
|
.aq-rotated {
|
|
transform: rotate(180deg);
|
|
}
|
|
.aq-trace-collapse {
|
|
display: grid;
|
|
transition:
|
|
grid-template-rows 0.35s ease,
|
|
opacity 0.25s ease;
|
|
}
|
|
.aq-trace-clip {
|
|
overflow: hidden;
|
|
}
|
|
.aq-trace {
|
|
border-left: 1px solid var(--aq-line);
|
|
margin: 5px 0 3px 6px;
|
|
padding: 2px 0 2px 16px;
|
|
list-style: none;
|
|
}
|
|
.aq-trace li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
font-size: 12px;
|
|
min-height: 29px;
|
|
color: var(--aq-muted);
|
|
animation: aq-fade 0.3s ease-out;
|
|
}
|
|
.aq-shimmer {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--aq-muted) 35%,
|
|
var(--aq-ink) 50%,
|
|
var(--aq-muted) 65%
|
|
);
|
|
background-size: 200% 100%;
|
|
background-clip: text;
|
|
color: transparent;
|
|
animation: aq-shimmer 1.5s linear infinite;
|
|
}
|
|
.aq-spin {
|
|
animation: aq-spin 0.8s linear infinite;
|
|
}
|
|
.aq-waiting {
|
|
display: flex;
|
|
gap: 5px;
|
|
padding: 4px 35px 14px;
|
|
}
|
|
.aq-waiting span {
|
|
width: 4px;
|
|
height: 4px;
|
|
background: var(--aq-muted);
|
|
border-radius: 50%;
|
|
animation: aq-pulse 1.2s infinite;
|
|
}
|
|
.aq-waiting span:nth-child(2) {
|
|
animation-delay: 0.15s;
|
|
}
|
|
.aq-waiting span:nth-child(3) {
|
|
animation-delay: 0.3s;
|
|
}
|
|
.aq-result {
|
|
margin-left: 35px;
|
|
animation: aq-fade 0.3s ease-out;
|
|
}
|
|
.aq-answer {
|
|
font-size: 14px;
|
|
line-height: 1.95;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.aq-source-chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin: 14px 0 19px;
|
|
color: var(--aq-muted);
|
|
font-size: 10px;
|
|
}
|
|
.aq-source-chips span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
border: 1px solid var(--aq-line);
|
|
border-radius: 5px;
|
|
padding: 4px 7px;
|
|
}
|
|
.aq-source-chips span:first-child {
|
|
background: var(--aq-soft);
|
|
color: var(--aq-accent);
|
|
border-color: transparent;
|
|
}
|
|
.aq-result-card {
|
|
border: 1px solid var(--aq-line);
|
|
border-radius: 13px;
|
|
overflow: hidden;
|
|
background: var(--aq-bg);
|
|
box-shadow: 0 2px 5px #00000003;
|
|
}
|
|
.aq-card-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px 22px 0;
|
|
gap: 12px;
|
|
}
|
|
.aq-card-top h3 {
|
|
font-size: 15px;
|
|
font-weight: 550;
|
|
margin-top: 6px;
|
|
}
|
|
.aq-card-top .aq-eyebrow {
|
|
font-size: 8px;
|
|
}
|
|
.aq-metrics {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
padding: 24px 22px 25px;
|
|
gap: 20px;
|
|
}
|
|
.aq-metrics > div + div {
|
|
border-left: 1px solid var(--aq-line);
|
|
padding-left: 22px;
|
|
}
|
|
.aq-metrics span {
|
|
font-size: 11px;
|
|
color: var(--aq-muted);
|
|
}
|
|
.aq-metrics strong {
|
|
display: block;
|
|
font-size: 28px;
|
|
letter-spacing: -1px;
|
|
font-weight: 500;
|
|
font-variant-numeric: tabular-nums;
|
|
margin-top: 5px;
|
|
white-space: nowrap;
|
|
}
|
|
.aq-metrics small {
|
|
font-size: 11px;
|
|
font-weight: 400;
|
|
color: var(--aq-muted);
|
|
letter-spacing: 0;
|
|
margin-left: 6px;
|
|
}
|
|
.aq-result-toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 11px 20px;
|
|
border-top: 1px solid var(--aq-line);
|
|
border-bottom: 1px solid var(--aq-line);
|
|
gap: 10px;
|
|
}
|
|
.aq-view-tabs {
|
|
display: flex;
|
|
gap: 3px;
|
|
background: var(--aq-inset);
|
|
padding: 3px;
|
|
border-radius: 7px;
|
|
}
|
|
.aq-view-tabs button {
|
|
padding: 5px 8px;
|
|
font-size: 11px;
|
|
color: var(--aq-muted);
|
|
gap: 5px;
|
|
min-height: 28px;
|
|
}
|
|
.aq-view-tabs button[aria-pressed="true"] {
|
|
background: var(--aq-bg);
|
|
box-shadow: 0 1px 3px #0001;
|
|
color: var(--aq-ink);
|
|
}
|
|
.aq-result-unit {
|
|
font-size: 10px;
|
|
color: var(--aq-muted);
|
|
}
|
|
.aq-bars {
|
|
padding: 17px 20px 12px;
|
|
}
|
|
.aq-bar-row {
|
|
display: grid !important;
|
|
grid-template-columns: 85px minmax(30px, 1fr) 45px 42px 13px;
|
|
gap: 12px !important;
|
|
width: 100%;
|
|
padding: 9px 2px;
|
|
text-align: left;
|
|
font-size: 12px !important;
|
|
}
|
|
.aq-bar-name {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.aq-bar-track {
|
|
height: 18px;
|
|
position: relative;
|
|
min-width: 0;
|
|
border-radius: 3px;
|
|
background: var(--aq-inset);
|
|
overflow: hidden;
|
|
}
|
|
.aq-bar-fill {
|
|
height: 100%;
|
|
display: block;
|
|
border-radius: 3px;
|
|
background: #a8b9ac;
|
|
}
|
|
.aq-bar-lead {
|
|
background: #668874;
|
|
}
|
|
.aq-bar-row > strong {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.aq-bar-share {
|
|
font-size: 10px;
|
|
text-align: right;
|
|
color: var(--aq-muted);
|
|
}
|
|
.aq-bar-row > svg {
|
|
color: var(--aq-muted);
|
|
}
|
|
.aq-chart-caption {
|
|
font-size: 10px;
|
|
color: var(--aq-muted);
|
|
text-align: center;
|
|
margin: 17px 0 3px;
|
|
}
|
|
.aq-more {
|
|
font-size: 11px !important;
|
|
color: var(--aq-muted);
|
|
padding: 8px;
|
|
width: 100%;
|
|
}
|
|
.aq-card-foot {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
border-top: 1px solid var(--aq-line);
|
|
padding: 10px 20px;
|
|
color: var(--aq-muted);
|
|
font-size: 9px;
|
|
background: var(--aq-inset);
|
|
}
|
|
.aq-answer-actions {
|
|
display: flex;
|
|
gap: 14px;
|
|
align-items: center;
|
|
margin: 12px 0 18px;
|
|
color: var(--aq-muted);
|
|
font-size: 10px;
|
|
}
|
|
.aq-answer-actions > button {
|
|
padding: 7px 0;
|
|
font-size: 11px;
|
|
}
|
|
.aq-answer-actions > span {
|
|
margin-left: auto;
|
|
font-size: 9px;
|
|
}
|
|
.aq-followups {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
align-items: center;
|
|
}
|
|
.aq-followups > span {
|
|
font-size: 10px;
|
|
color: var(--aq-muted);
|
|
margin-right: 5px;
|
|
}
|
|
.aq-followups > button {
|
|
font-size: 11px;
|
|
padding: 6px 9px;
|
|
min-height: 32px;
|
|
border: 1px solid var(--aq-line);
|
|
border-radius: 7px;
|
|
color: var(--aq-muted);
|
|
}
|
|
.aq-back {
|
|
font-size: 12px !important;
|
|
justify-content: flex-start !important;
|
|
flex-wrap: wrap;
|
|
}
|
|
.aq-back > span {
|
|
font-size: 10px;
|
|
color: var(--aq-muted);
|
|
}
|
|
.aq-record-toolbar {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
font-size: 10px;
|
|
color: var(--aq-muted);
|
|
}
|
|
.aq-record-toolbar input {
|
|
background: var(--aq-inset);
|
|
border: 1px solid var(--aq-line);
|
|
border-radius: 6px;
|
|
padding: 8px 9px;
|
|
min-width: 0;
|
|
font-size: 11px;
|
|
color: var(--aq-ink);
|
|
width: 100%;
|
|
}
|
|
.aq-record-toolbar label {
|
|
min-width: 0;
|
|
max-width: 70%;
|
|
}
|
|
.aq-table-scroll {
|
|
overflow: auto;
|
|
max-height: 440px;
|
|
}
|
|
.aq-table-scroll table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
text-align: left;
|
|
}
|
|
.aq-table-scroll th {
|
|
background: var(--aq-inset);
|
|
color: var(--aq-muted);
|
|
font-weight: 450;
|
|
font-size: 10px;
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
.aq-table-scroll td,
|
|
.aq-table-scroll th {
|
|
padding: 11px 16px;
|
|
border-bottom: 1px solid var(--aq-line);
|
|
}
|
|
.aq-table-scroll td button {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
.aq-table-scroll small {
|
|
display: block;
|
|
color: var(--aq-muted);
|
|
font-size: 10px;
|
|
max-width: 180px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-top: 4px;
|
|
}
|
|
.aq-plate {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.aq-tag {
|
|
background: var(--aq-inset);
|
|
border: 1px solid var(--aq-line);
|
|
padding: 3px 7px;
|
|
border-radius: 5px;
|
|
color: var(--aq-muted);
|
|
font-size: 10px;
|
|
}
|
|
.aq-pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
color: var(--aq-muted);
|
|
font-size: 10px;
|
|
}
|
|
.aq-pagination > button {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
.aq-pagination > span {
|
|
margin-right: auto;
|
|
}
|
|
.aq-no-data {
|
|
padding: 25px 16px;
|
|
text-align: center;
|
|
color: var(--aq-muted);
|
|
font-size: 12px;
|
|
}
|
|
.aq-flow-chart {
|
|
padding: 12px;
|
|
}
|
|
.aq-date-drills {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
padding: 8px;
|
|
}
|
|
.aq-date-drills > button {
|
|
font-size: 10px;
|
|
padding: 5px 7px;
|
|
border: 1px solid var(--aq-line);
|
|
gap: 6px;
|
|
}
|
|
.aq-date-drills span {
|
|
color: var(--aq-muted);
|
|
}
|
|
.aq-composer-area {
|
|
width: 100%;
|
|
max-width: 820px;
|
|
padding: 13px 34px 15px;
|
|
margin: 0 auto;
|
|
flex-shrink: 0;
|
|
background: var(--aq-bg);
|
|
}
|
|
.aq-composer {
|
|
border: 1px solid var(--aq-line);
|
|
border-radius: 14px;
|
|
box-shadow: 0 3px 15px #00000006;
|
|
transition: border-color 0.2s;
|
|
}
|
|
.aq-composer:focus-within {
|
|
border-color: var(--aq-muted);
|
|
}
|
|
.aq-composer textarea {
|
|
display: block;
|
|
width: 100%;
|
|
background: transparent;
|
|
border: 0;
|
|
outline: 0 !important;
|
|
resize: none;
|
|
font: inherit;
|
|
font-size: 14px;
|
|
color: var(--aq-ink);
|
|
padding: 17px 18px 4px;
|
|
min-height: 68px;
|
|
line-height: 1.7;
|
|
max-height: 160px;
|
|
}
|
|
.aq-composer textarea::placeholder {
|
|
color: var(--aq-muted);
|
|
opacity: 0.85;
|
|
}
|
|
.aq-composer-bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 5px 12px 11px;
|
|
gap: 8px;
|
|
}
|
|
.aq-composer-bottom > div {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
}
|
|
.aq-model {
|
|
display: inline-flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
font-size: 11px;
|
|
color: var(--aq-muted);
|
|
padding: 5px 7px;
|
|
}
|
|
.aq-composer-source {
|
|
display: flex;
|
|
gap: 4px;
|
|
align-items: center;
|
|
color: var(--aq-muted);
|
|
font-size: 10px;
|
|
}
|
|
.aq-send {
|
|
height: 32px;
|
|
width: 32px;
|
|
background: var(--aq-ink) !important;
|
|
color: var(--aq-bg);
|
|
border-radius: 9px !important;
|
|
}
|
|
.aq-send:disabled {
|
|
opacity: 0.25 !important;
|
|
}
|
|
.aq-send:not(:disabled):hover {
|
|
opacity: 0.85;
|
|
}
|
|
.aq-composer-foot {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
font-size: 9px;
|
|
color: var(--aq-muted);
|
|
padding: 10px 4px 0;
|
|
}
|
|
.aq-context {
|
|
display: flex;
|
|
gap: 6px;
|
|
font-size: 10px;
|
|
color: var(--aq-muted);
|
|
margin-bottom: 9px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.aq-context > span:not(:first-child) {
|
|
background: var(--aq-inset);
|
|
border: 1px solid var(--aq-line);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
}
|
|
.aq-character-count {
|
|
font-size: 10px;
|
|
color: var(--aq-muted);
|
|
}
|
|
.aq-voice-note {
|
|
font-size: 11px;
|
|
line-height: 1.6;
|
|
color: var(--aq-muted);
|
|
margin: 8px 4px 0;
|
|
}
|
|
.aq-recording {
|
|
border-color: var(--aq-accent);
|
|
}
|
|
.aq-mic-active {
|
|
color: var(--aq-accent) !important;
|
|
background: var(--aq-soft);
|
|
}
|
|
.aq-error,
|
|
.aq-notice {
|
|
margin: 12px 0 15px;
|
|
padding: 13px 16px;
|
|
background: var(--aq-inset);
|
|
border: 1px solid var(--aq-line);
|
|
border-radius: 9px;
|
|
font-size: 12px;
|
|
line-height: 1.7;
|
|
color: var(--aq-danger);
|
|
}
|
|
.aq-error {
|
|
margin-left: 35px;
|
|
}
|
|
.aq-error button {
|
|
font-size: 11px;
|
|
margin-top: 6px;
|
|
padding: 4px 0;
|
|
}
|
|
@keyframes aq-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes aq-shimmer {
|
|
to {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
@keyframes aq-fade {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(4px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes aq-pulse {
|
|
50% {
|
|
opacity: 0.25;
|
|
}
|
|
}
|
|
@media (max-width: 1050px) {
|
|
.aq-sidebar {
|
|
width: 190px;
|
|
}
|
|
.aq-header {
|
|
padding: 0 18px;
|
|
}
|
|
.aq-scope {
|
|
padding: 12px 20px;
|
|
}
|
|
.aq-turns {
|
|
padding: 18px 24px 24px;
|
|
}
|
|
.aq-composer-area {
|
|
padding: 12px 24px;
|
|
}
|
|
.aq-welcome {
|
|
padding-top: 35px;
|
|
}
|
|
.aq-metrics strong {
|
|
font-size: 24px;
|
|
}
|
|
.aq-result-unit {
|
|
display: none;
|
|
}
|
|
}
|
|
@media (max-width: 760px) {
|
|
.aq-shell {
|
|
width: 100vw !important;
|
|
max-width: 100vw !important;
|
|
height: 100dvh;
|
|
max-height: 100dvh;
|
|
border-radius: 0 !important;
|
|
}
|
|
.aq-sidebar {
|
|
display: none;
|
|
}
|
|
.aq-header {
|
|
height: 56px;
|
|
padding: 0 14px;
|
|
}
|
|
.aq-header > div {
|
|
gap: 5px;
|
|
}
|
|
.aq-header-subtitle,
|
|
.aq-header-divider {
|
|
display: none;
|
|
}
|
|
.aq-mobile-new {
|
|
display: inline-flex !important;
|
|
}
|
|
.aq-scope {
|
|
padding: 10px 16px;
|
|
font-size: 10px;
|
|
gap: 6px;
|
|
}
|
|
.aq-scope > span:first-of-type {
|
|
max-width: 35%;
|
|
}
|
|
.aq-live {
|
|
font-size: 0;
|
|
}
|
|
.aq-live i {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
.aq-welcome {
|
|
padding: 30px 22px 20px;
|
|
}
|
|
.aq-welcome h2 {
|
|
font-size: 24px;
|
|
margin-top: 12px;
|
|
}
|
|
.aq-welcome > p {
|
|
font-size: 12px;
|
|
}
|
|
.aq-mobile-break {
|
|
display: block;
|
|
}
|
|
.aq-welcome-mark {
|
|
width: 52px;
|
|
height: 52px;
|
|
margin-bottom: 18px;
|
|
}
|
|
.aq-prompt-grid {
|
|
margin-top: 25px;
|
|
gap: 9px;
|
|
}
|
|
.aq-prompt-grid > button {
|
|
padding: 14px;
|
|
min-height: 110px;
|
|
}
|
|
.aq-welcome-note {
|
|
font-size: 10px;
|
|
margin-top: 18px;
|
|
}
|
|
.aq-turns {
|
|
padding: 19px 16px 24px;
|
|
}
|
|
.aq-question p {
|
|
font-size: 14px;
|
|
}
|
|
.aq-result {
|
|
margin-left: 0;
|
|
}
|
|
.aq-thinking {
|
|
margin-left: 0;
|
|
}
|
|
.aq-assistant-label {
|
|
margin-bottom: 8px;
|
|
}
|
|
.aq-answer {
|
|
font-size: 13px;
|
|
}
|
|
.aq-card-top {
|
|
padding: 16px 15px 0;
|
|
}
|
|
.aq-card-top h3 {
|
|
font-size: 13px;
|
|
}
|
|
.aq-metrics {
|
|
padding: 18px 15px;
|
|
gap: 10px;
|
|
}
|
|
.aq-metrics > div + div {
|
|
padding-left: 10px;
|
|
}
|
|
.aq-metrics span {
|
|
font-size: 10px;
|
|
}
|
|
.aq-metrics strong {
|
|
font-size: 24px;
|
|
}
|
|
.aq-metrics small {
|
|
font-size: 9px;
|
|
margin-left: 3px;
|
|
}
|
|
.aq-result-toolbar {
|
|
padding: 9px 12px;
|
|
}
|
|
.aq-bars {
|
|
padding: 10px 14px;
|
|
}
|
|
.aq-bar-row {
|
|
grid-template-columns: 61px minmax(30px, 1fr) 32px 37px 12px;
|
|
gap: 7px !important;
|
|
font-size: 11px !important;
|
|
min-height: 44px;
|
|
}
|
|
.aq-bar-track {
|
|
height: 16px;
|
|
}
|
|
.aq-card-foot {
|
|
padding: 10px 12px;
|
|
font-size: 8px;
|
|
}
|
|
.aq-card-foot > span:last-child {
|
|
display: none;
|
|
}
|
|
.aq-answer-actions > span {
|
|
display: none;
|
|
}
|
|
.aq-followups {
|
|
gap: 5px;
|
|
}
|
|
.aq-followups > span {
|
|
width: 100%;
|
|
margin-bottom: 4px;
|
|
}
|
|
.aq-followups > button {
|
|
font-size: 10px;
|
|
min-height: 38px;
|
|
}
|
|
.aq-composer-area {
|
|
padding: 10px 14px max(12px, env(safe-area-inset-bottom));
|
|
}
|
|
.aq-composer textarea {
|
|
font-size: 16px;
|
|
padding: 12px 14px 3px;
|
|
min-height: 66px;
|
|
}
|
|
.aq-composer-source {
|
|
display: none;
|
|
}
|
|
.aq-composer-bottom {
|
|
padding: 2px 8px 8px;
|
|
}
|
|
.aq-composer-foot > span:last-child {
|
|
display: none;
|
|
}
|
|
.aq-composer-foot {
|
|
justify-content: center;
|
|
font-size: 9px;
|
|
}
|
|
.aq-composer .aq-icon-button,
|
|
.aq-send {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
.aq-context {
|
|
font-size: 9px;
|
|
}
|
|
.aq-error {
|
|
margin-left: 0;
|
|
}
|
|
.aq-info {
|
|
margin: 4px 16px 8px;
|
|
}
|
|
.aq-icon-button {
|
|
min-width: 40px;
|
|
min-height: 40px;
|
|
}
|
|
.aq-table-scroll td,
|
|
.aq-table-scroll th {
|
|
padding: 10px 12px;
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.aq-shell * {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
.aq-shimmer {
|
|
color: var(--aq-muted);
|
|
background: none;
|
|
}
|
|
}
|
|
@media (min-width: 761px) and (max-height: 800px) {
|
|
.aq-welcome {
|
|
padding-top: 20px;
|
|
padding-bottom: 16px;
|
|
}
|
|
.aq-welcome-mark {
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 13px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.aq-welcome-mark svg {
|
|
width: 23px;
|
|
}
|
|
.aq-welcome h2 {
|
|
font-size: 24px;
|
|
margin: 10px 0;
|
|
}
|
|
.aq-prompt-grid {
|
|
margin-top: 18px;
|
|
}
|
|
.aq-prompt-grid > button {
|
|
padding: 12px 15px;
|
|
min-height: 88px;
|
|
}
|
|
.aq-prompt-grid > button > div {
|
|
margin-bottom: 8px;
|
|
}
|
|
.aq-welcome-note {
|
|
margin-top: 14px;
|
|
}
|
|
}
|
|
/* Keep the assistant above the global feedback launcher, below the account watermark. */
|
|
.aq-shell {
|
|
z-index: 110 !important;
|
|
}
|
|
/* Analysis controls are scoped to the assistant; the classic asset page is unchanged. */
|
|
.aq-breadcrumbs,
|
|
.aq-analysis-controls,
|
|
.aq-exceptions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin: 12px 0;
|
|
align-items: center;
|
|
}
|
|
.aq-breadcrumbs button,
|
|
.aq-analysis-controls select,
|
|
.aq-analysis-controls > button,
|
|
.aq-gap-panel button,
|
|
.aq-gap-panel select {
|
|
border: 1px solid var(--aq-line);
|
|
border-radius: 8px;
|
|
padding: 7px 10px;
|
|
background: var(--aq-bg);
|
|
color: var(--aq-ink);
|
|
font-size: 12px;
|
|
max-width: 100%;
|
|
}
|
|
.aq-breadcrumbs button {
|
|
max-width: 260px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.aq-analysis-controls {
|
|
padding: 0 18px;
|
|
}
|
|
.aq-analysis-controls label {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
color: var(--aq-muted);
|
|
}
|
|
.aq-result-filters {
|
|
padding: 0 18px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.aq-insights {
|
|
padding: 12px 20px 12px 36px;
|
|
margin: 0;
|
|
font-size: 13px;
|
|
line-height: 1.9;
|
|
color: var(--aq-ink);
|
|
}
|
|
.aq-exceptions {
|
|
padding: 0 18px;
|
|
}
|
|
.aq-exceptions button {
|
|
border: 1px solid var(--aq-line);
|
|
background: var(--aq-bg);
|
|
border-radius: 8px;
|
|
padding: 10px;
|
|
color: var(--aq-muted);
|
|
font-size: 12px;
|
|
}
|
|
.aq-exceptions strong {
|
|
display: block;
|
|
color: var(--aq-ink);
|
|
margin-top: 5px;
|
|
font-size: 17px;
|
|
}
|
|
.aq-result-active > .aq-result-card {
|
|
border-color: #668874;
|
|
}
|
|
.aq-gap-panel {
|
|
padding: 24px;
|
|
max-width: 960px;
|
|
margin: auto;
|
|
color: var(--aq-ink);
|
|
}
|
|
.aq-gap-panel p {
|
|
font-size: 12px;
|
|
line-height: 1.8;
|
|
color: var(--aq-muted);
|
|
}
|
|
.aq-gap-item {
|
|
border: 1px solid var(--aq-line);
|
|
padding: 16px;
|
|
border-radius: 12px;
|
|
margin: 12px 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.aq-gap-item strong {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
.aq-gap-item label {
|
|
font-size: 12px;
|
|
}
|
|
.aq-shell button:disabled {
|
|
cursor: default;
|
|
opacity: 0.55;
|
|
}
|
|
.aq-gap-panel .aq-card-top {
|
|
padding: 0;
|
|
gap: 12px;
|
|
}
|
|
@media (max-width: 760px) {
|
|
.aq-analysis-controls {
|
|
padding: 0 12px;
|
|
align-items: stretch;
|
|
}
|
|
.aq-analysis-controls label {
|
|
flex: 1 1 45%;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
.aq-breadcrumbs button {
|
|
max-width: 180px;
|
|
}
|
|
.aq-gap-panel {
|
|
padding: 16px;
|
|
}
|
|
.aq-exceptions {
|
|
padding: 0 12px;
|
|
}
|
|
.aq-exceptions button {
|
|
flex: 1;
|
|
}
|
|
.aq-card-foot {
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
.aq-exceptions button {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
line-height: 1.5;
|
|
min-width: 0;
|
|
}
|
|
.aq-exceptions strong {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Keep the current answer readable as the conversation grows. */
|
|
.aq-collapsed-answer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width: 100%;
|
|
padding: 12px 14px;
|
|
border: 1px solid var(--aq-line);
|
|
border-radius: 12px;
|
|
background: var(--aq-inset);
|
|
color: var(--aq-muted);
|
|
text-align: left;
|
|
}
|
|
.aq-collapsed-answer > span {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.aq-collapsed-answer strong {
|
|
display: block;
|
|
color: var(--aq-ink);
|
|
font-size: 13px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.aq-collapsed-answer > span > span {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
font-size: 12px;
|
|
line-height: 1.7;
|
|
}
|
|
.aq-collapsed-answer > svg {
|
|
flex-shrink: 0;
|
|
}
|
|
.aq-collapse-link {
|
|
margin-left: auto;
|
|
color: var(--aq-muted);
|
|
font-size: 11px;
|
|
padding: 4px;
|
|
}
|
|
.aq-advanced-controls {
|
|
border-top: 1px solid var(--aq-line);
|
|
padding-top: 10px;
|
|
}
|
|
.aq-advanced-controls > summary {
|
|
margin: 0 18px;
|
|
color: var(--aq-muted);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
padding: 4px 0;
|
|
}
|
|
.aq-interpretation {
|
|
font-size: 12px;
|
|
color: var(--aq-muted);
|
|
margin: 8px 0;
|
|
}
|
|
.aq-interpretation > summary {
|
|
cursor: pointer;
|
|
}
|
|
.aq-interpretation p {
|
|
padding: 6px 0;
|
|
line-height: 1.8;
|
|
}
|
|
.aq-gap-note,
|
|
.aq-context-note {
|
|
color: var(--aq-muted);
|
|
font-size: 12px;
|
|
line-height: 1.8;
|
|
margin: 8px 0;
|
|
}
|
|
.aq-answer {
|
|
white-space: pre-wrap;
|
|
}
|
|
.aq-followups {
|
|
margin-top: 14px;
|
|
}
|
|
.aq-context {
|
|
flex-wrap: wrap;
|
|
}
|
|
.aq-filter-chip,
|
|
.aq-topic-button {
|
|
display: inline-flex;
|
|
gap: 5px;
|
|
align-items: center;
|
|
border: 1px solid var(--aq-line);
|
|
border-radius: 6px;
|
|
background: var(--aq-inset);
|
|
color: var(--aq-muted);
|
|
padding: 3px 6px;
|
|
font-size: 11px;
|
|
max-width: 100%;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.aq-filter-chip > svg,
|
|
.aq-topic-button > svg {
|
|
flex-shrink: 0;
|
|
}
|
|
.aq-topic-button {
|
|
margin-left: auto;
|
|
border-color: transparent;
|
|
background: none;
|
|
}
|
|
.aq-topic-notice {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
color: var(--aq-muted);
|
|
font-size: 11px;
|
|
margin: 0 0 8px;
|
|
}
|
|
.aq-context > span {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.aq-model {
|
|
white-space: nowrap;
|
|
}
|
|
@media (max-width: 600px) {
|
|
.aq-conversation {
|
|
scroll-padding-top: 8px;
|
|
}
|
|
.aq-collapsed-answer {
|
|
padding: 10px;
|
|
}
|
|
.aq-topic-button {
|
|
margin-left: 0;
|
|
}
|
|
.aq-context {
|
|
max-height: 90px;
|
|
overflow-y: auto;
|
|
}
|
|
.aq-followups > button {
|
|
white-space: normal;
|
|
text-align: left;
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
.aq-error.aq-stopped {
|
|
color: var(--aq-muted);
|
|
border-color: var(--aq-line);
|
|
background: var(--aq-inset);
|
|
}
|