mirror of
https://github.com/pewdiepie-archdaemon/odysseus.git
synced 2026-10-20 05:42:20 +02:00
3185 lines
98 KiB
CSS
3185 lines
98 KiB
CSS
/* 17-research - part of the former static/style.css.
|
||
*
|
||
* The stylesheet is split by area, but the split is mechanical: rules were
|
||
* moved verbatim and NOT regrouped. The numeric prefix is the load order, and
|
||
* that order is what preserves the cascade. A rule sits in the file its
|
||
* original position fell into, so an area's rules are not all in its file and
|
||
* a file is not only that area's rules.
|
||
*
|
||
* Do not reorder the <link> tags in static/index.html, and do not move a rule
|
||
* between files: with 1,151 redeclarations and 1,886 !important in this
|
||
* cascade, either can change which declaration wins.
|
||
*
|
||
* static/index.html and the PRECACHE list in static/sw.js must agree on this
|
||
* order. tests/test_static_stylesheet_manifest.py and
|
||
* tests/test_css_computed_style_snapshot.py fail if that drifts.
|
||
*/
|
||
button.cal-btn { background:color-mix(in srgb, var(--fg) 8%, transparent); border:1px solid var(--border); color:var(--fg); border-radius:5px; padding:0 14px; height:28px; font-size:11px; font-weight:500; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; transition:background 0.15s, border-color 0.15s; }
|
||
button.cal-btn:hover { background:color-mix(in srgb, var(--fg) 14%, transparent); }
|
||
button.cal-btn.cal-btn-primary { background:var(--accent, var(--red)); color:var(--bg); border-color:var(--accent, var(--red)); }
|
||
button.cal-btn.cal-btn-primary:hover { opacity:0.9; background:var(--accent, var(--red)); }
|
||
@media (max-width: 600px) {
|
||
.cal-modal-container { max-width:100vw; width:100vw; border-radius:0; max-height:100vh; height:100vh; }
|
||
.cal-day { min-height:58px; padding:3px; }
|
||
.cal-day-num { font-size:10px; }
|
||
.cal-event-preview { display:none; }
|
||
.cal-multiday { font-size:8.5px; padding:0 4px; }
|
||
.cal-event-row { min-height:16px; padding:2px 3px; gap:3px; }
|
||
.cal-event-row-name,
|
||
.cal-event-row-time { font-size:9.5px; }
|
||
/* Two-row toolbar on mobile:
|
||
Row 1 — Title (full width)
|
||
Row 2 — [← Today →] [view toggle] [settings/sync/filters/+New]
|
||
Title gets its own row so it isn't squeezed to nothing when the
|
||
right-side group is wide. The .cal-toolbar-nav (which now only
|
||
contains the title since JS moved the date-nav to the right) is
|
||
width:100% so it forces a wrap before .cal-toolbar-right. */
|
||
.cal-toolbar {
|
||
gap: 4px;
|
||
flex-wrap: wrap;
|
||
row-gap: 4px;
|
||
}
|
||
.cal-toolbar-nav {
|
||
flex-wrap: nowrap;
|
||
flex: 1 1 100%;
|
||
min-width: 0;
|
||
justify-content: flex-start;
|
||
}
|
||
.cal-toolbar-right {
|
||
margin-top: 6px;
|
||
margin-left: 0;
|
||
flex-wrap: nowrap;
|
||
flex-shrink: 1;
|
||
overflow-x: auto;
|
||
scrollbar-width: none;
|
||
width: 100%;
|
||
}
|
||
.cal-quickadd-row {
|
||
top: -2px;
|
||
}
|
||
.cal-toolbar-right::-webkit-scrollbar { display: none; }
|
||
.cal-title {
|
||
font-size: 13px;
|
||
padding: 0 4px;
|
||
}
|
||
#cal-side-prev,
|
||
#cal-side-next {
|
||
display: none !important;
|
||
}
|
||
.cal-nav { padding: 2px 5px; font-size: 10px; }
|
||
.cal-view-btn { padding: 2px 5px; font-size: 9px; }
|
||
.cal-filters {
|
||
gap: 3px;
|
||
margin: 0 0 6px;
|
||
padding: 0;
|
||
}
|
||
.cal-filter-toggle { top: -5px; }
|
||
.cal-filter-item { font-size: 9px; padding: 1px 5px; }
|
||
.cal-year { grid-template-columns:repeat(3, 1fr); gap:6px; }
|
||
.cal-year-cell { font-size:7px; }
|
||
}
|
||
|
||
/* ═══ Research Panel ═══ */
|
||
/* .research-overlay inherits from .modal — no extra layout needed */
|
||
.research-pane {
|
||
display:flex; flex-direction:column;
|
||
padding:10px; box-sizing:border-box;
|
||
font-size:12px;
|
||
position: relative;
|
||
isolation: isolate;
|
||
overflow: hidden;
|
||
/* Research hydration replaces picker options after mount. Do not inherit
|
||
the generic scale-in animation: scaling a changing-height frame reads as
|
||
a bounce, particularly next to the document split pane. */
|
||
animation: research-pane-enter 0.18s ease-out both;
|
||
}
|
||
/* Synapse signal traveling around the outer edge of the pane. The pane keeps a
|
||
flat background; only this thin border ring remains animated. */
|
||
.research-pane::after {
|
||
content: '';
|
||
position: absolute; inset: 0;
|
||
z-index: 1;
|
||
pointer-events: none;
|
||
border-radius: inherit;
|
||
padding: 2px;
|
||
background: conic-gradient(
|
||
from var(--research-orbit-angle, 0deg),
|
||
transparent 0deg,
|
||
transparent 300deg,
|
||
color-mix(in srgb, var(--accent, var(--red)) 70%, transparent) 335deg,
|
||
var(--accent, var(--red)) 350deg,
|
||
color-mix(in srgb, var(--accent, var(--red)) 70%, transparent) 358deg,
|
||
transparent 360deg
|
||
);
|
||
-webkit-mask:
|
||
linear-gradient(#000 0 0) content-box,
|
||
linear-gradient(#000 0 0);
|
||
-webkit-mask-composite: xor;
|
||
mask:
|
||
linear-gradient(#000 0 0) content-box,
|
||
linear-gradient(#000 0 0);
|
||
mask-composite: exclude;
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.research-pane::after { animation: none; opacity: 0.4; }
|
||
}
|
||
.research-pane-header {
|
||
display:flex; justify-content:space-between; align-items:center;
|
||
margin-bottom:6px; cursor:grab; user-select:none;
|
||
}
|
||
.research-pane-title-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
.research-pane-title-icon svg { display: block; }
|
||
.research-pane-header-actions {
|
||
display: flex; align-items: center; gap: 2px;
|
||
margin-left: auto;
|
||
}
|
||
.research-pane-body {
|
||
flex: 1; min-height: 0; overflow: hidden;
|
||
display: flex; flex-direction: column; gap: 10px;
|
||
/* Flat surface — matches Library's .modal-body (no inset sub-window).
|
||
The outer .research-pane already provides the 10px padding + border. */
|
||
padding: 0;
|
||
margin: 0;
|
||
background: transparent;
|
||
border: 0;
|
||
border-radius: 0;
|
||
font-size: 12px;
|
||
color: var(--fg);
|
||
}
|
||
/* Research uses the same flat tab navigation as Memory and Skills. Each view
|
||
owns its scrolling so switching tabs never leaves the form or result list
|
||
clipped by the modal body. */
|
||
.research-tabs {
|
||
flex: 0 0 auto;
|
||
margin: -4px -4px 0;
|
||
padding: 0 4px;
|
||
}
|
||
.research-tabs .memory-tab {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
white-space: nowrap;
|
||
}
|
||
.research-tabs .memory-tab[hidden] { display: none !important; }
|
||
.research-tabs .memory-tab svg {
|
||
width: 12px;
|
||
height: 12px;
|
||
flex: 0 0 12px;
|
||
opacity: 0.75;
|
||
}
|
||
.research-tab-panel {
|
||
flex: 1 1 auto;
|
||
}
|
||
.research-tab-heading {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex: 0 0 auto;
|
||
min-height: 28px;
|
||
margin: 0 0 6px;
|
||
}
|
||
.research-tab-heading > .memory-count {
|
||
font-size: 10px;
|
||
opacity: 0.55;
|
||
font-weight: normal;
|
||
}
|
||
.research-tab-heading #research-history-clear { margin-left: auto; }
|
||
/* Match the .admin-card surface used in Cookbook (Download / Serve sections):
|
||
var(--panel) bg with var(--border) and rounded corners. */
|
||
.research-new-job {
|
||
flex-shrink: 0;
|
||
}
|
||
.research-query {
|
||
width:100%; resize:vertical; min-height:80px; max-height:240px;
|
||
/* Match the rest of the app's inputs (var(--bg) page tone) rather than
|
||
the darker panel tone — keeps the input readable on the dark sub-window. */
|
||
background: var(--bg); color: var(--fg);
|
||
border:1px solid var(--border); border-radius:6px;
|
||
padding:8px 10px; font-size:12px; font-family:inherit;
|
||
box-sizing:border-box;
|
||
margin-top: 6px;
|
||
}
|
||
.research-query:focus { outline:none; border-color:var(--accent-primary, var(--red)); }
|
||
.research-settings-row {
|
||
display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap;
|
||
padding: 8px 10px;
|
||
background: color-mix(in srgb, var(--fg) 3%, transparent);
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
}
|
||
.research-setting {
|
||
display:flex; flex-direction:column; flex:1; min-width:104px;
|
||
}
|
||
.research-setting:has(#research-rounds),
|
||
.research-setting:has(#research-category) {
|
||
position: relative;
|
||
top: 0;
|
||
}
|
||
.research-setting:has(#research-search-provider),
|
||
.research-setting:has(#research-endpoint) {
|
||
position: relative;
|
||
top: 5px;
|
||
}
|
||
.research-setting:has(#research-model) {
|
||
position: relative;
|
||
top: 1px;
|
||
}
|
||
.research-setting-label {
|
||
font-size:9px; text-transform:uppercase; letter-spacing:0.5px;
|
||
color:var(--accent, var(--red)); opacity:1; margin-bottom:2px;
|
||
}
|
||
.research-native-select {
|
||
position: absolute !important;
|
||
width: 1px !important;
|
||
height: 1px !important;
|
||
margin: -1px !important;
|
||
padding: 0 !important;
|
||
overflow: hidden !important;
|
||
clip: rect(0 0 0 0) !important;
|
||
white-space: nowrap !important;
|
||
border: 0 !important;
|
||
}
|
||
.research-picker { position: relative; min-width: 0; }
|
||
.research-picker-btn {
|
||
width: 100%; height: 28px; padding: 0 8px;
|
||
display: flex; align-items: center; gap: 6px;
|
||
background: var(--bg); color: var(--fg);
|
||
border: 1px solid var(--border); border-radius: 6px;
|
||
font: inherit; font-size: 12px; cursor: pointer; text-align: left;
|
||
transition: border-color 0.14s ease, background 0.14s ease;
|
||
}
|
||
.research-picker-btn:hover,
|
||
.research-picker.open .research-picker-btn {
|
||
border-color: color-mix(in srgb, var(--accent, var(--red)) 62%, var(--border));
|
||
background: color-mix(in srgb, var(--accent, var(--red)) 5%, var(--bg));
|
||
}
|
||
.research-picker-current {
|
||
min-width: 0; flex: 1; display: flex; align-items: center; gap: 6px;
|
||
}
|
||
.research-picker-icon {
|
||
width: 15px; height: 15px; flex: 0 0 15px;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
color: var(--accent, var(--red));
|
||
}
|
||
.research-picker-icon svg { width: 15px; height: 15px; display: block; }
|
||
.research-picker-btn > svg {
|
||
width: 9px; height: 9px; flex-shrink: 0; opacity: 0.5;
|
||
transition: transform 0.14s ease;
|
||
}
|
||
.research-picker-menu {
|
||
position: absolute; z-index: 120;
|
||
top: calc(100% + 4px); left: 0;
|
||
width: max-content; min-width: 100%; max-width: min(280px, 82vw);
|
||
max-height: 230px; overflow-y: auto;
|
||
padding: 4px;
|
||
background: var(--panel, var(--bg));
|
||
border: 1px solid var(--border); border-radius: 7px;
|
||
box-shadow: 0 10px 28px rgba(0,0,0,0.32);
|
||
}
|
||
.research-picker-option {
|
||
width: 100%; min-height: 31px; padding: 6px 7px;
|
||
display: flex; align-items: center; gap: 7px;
|
||
border: 0; border-radius: 5px;
|
||
background: transparent; color: var(--fg);
|
||
font: inherit; font-size: 12px; text-align: left; cursor: pointer;
|
||
white-space: nowrap;
|
||
}
|
||
.research-picker-option:hover,
|
||
.research-picker-option:focus {
|
||
background: color-mix(in srgb, var(--fg) 7%, transparent);
|
||
}
|
||
.research-picker-option.active {
|
||
color: var(--accent, var(--red));
|
||
background: color-mix(in srgb, var(--accent, var(--red)) 10%, transparent);
|
||
}
|
||
.research-picker-check { margin-left: auto; opacity: 0; color: var(--accent, var(--red)); }
|
||
.research-controls-row {
|
||
display:flex; align-items:center; gap:8px; margin-top:10px;
|
||
}
|
||
.research-start-btn {
|
||
margin-left:auto;
|
||
display:flex; align-items:center; gap:5px;
|
||
height:28px; padding:0 14px; border:none; border-radius:6px;
|
||
background:var(--accent-primary, var(--red)); color:var(--bg);
|
||
font-size:12px; font-weight:600; cursor:pointer;
|
||
transition:opacity 0.15s;
|
||
}
|
||
.research-start-btn:hover { opacity:0.85; color:var(--fg); }
|
||
.research-start-btn:hover svg { color:inherit; }
|
||
.research-start-btn:disabled, .research-start-btn.research-start-busy {
|
||
opacity:0.7; cursor:wait;
|
||
}
|
||
.research-start-spinner {
|
||
display:inline-block; width:11px; height:11px; vertical-align:-1px; margin-right:4px;
|
||
border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
|
||
animation: spin 0.7s linear infinite;
|
||
}
|
||
.research-category-row {
|
||
display:flex; gap:4px; margin-top:8px; flex-wrap:wrap;
|
||
}
|
||
/* Mobile: keep the category chips on ONE row (scroll horizontally) instead of
|
||
wrapping to two rows. */
|
||
@media (max-width: 600px) {
|
||
.research-category-row {
|
||
flex-wrap: nowrap;
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
scrollbar-width: none;
|
||
}
|
||
.research-category-row::-webkit-scrollbar { display: none; }
|
||
.research-cat { flex-shrink: 0; white-space: nowrap; position: relative; top: -8px;
|
||
}
|
||
}
|
||
/* Match .doclib-chip exactly so categories feel like document filter tags. */
|
||
.research-cat {
|
||
padding: 2px 10px;
|
||
border-radius: 12px;
|
||
font-size: 10px;
|
||
border: 1px solid var(--border);
|
||
background: transparent;
|
||
color: var(--fg-muted);
|
||
cursor: pointer;
|
||
user-select: none;
|
||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||
position: relative;
|
||
top: -4px;
|
||
}
|
||
.research-cat:hover { border-color: var(--red); }
|
||
.research-cat.active {
|
||
background: color-mix(in srgb, var(--red) 15%, transparent);
|
||
border-color: color-mix(in srgb, var(--red) 40%, transparent);
|
||
color: var(--red);
|
||
}
|
||
/* Match the Cookbook "Trending models" toggle (a left-aligned memory-toolbar-btn
|
||
with an arrow + label) instead of the old tiny-uppercase borderless text. */
|
||
.research-settings-toggle {
|
||
display:flex; align-items:center; gap:6px;
|
||
width:100%; text-align:left;
|
||
height:24px; padding:0 8px; margin-top:10px;
|
||
background:none; border:1px solid var(--border); border-radius:4px;
|
||
color:color-mix(in srgb, var(--fg) 60%, transparent);
|
||
font-size:11px; font-family:inherit; cursor:pointer;
|
||
transition:all 0.15s;
|
||
}
|
||
.research-settings-toggle:hover { color:var(--fg); border-color:var(--fg); }
|
||
.research-settings-chevron { display:inline-flex; transition:transform 0.2s; margin-left:auto; }
|
||
.research-settings-toggle.collapsed .research-settings-chevron { transform:rotate(-90deg); }
|
||
/* When settings is EXPANDED, merge the toggle bar visually into the
|
||
settings body so it's clear the row below is the toggle's content
|
||
(no gap, no doubled border between them). */
|
||
.research-settings-toggle:not(.collapsed) {
|
||
border-bottom-left-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
border-bottom-color: transparent;
|
||
}
|
||
.research-settings-toggle:not(.collapsed) + .research-settings-row {
|
||
margin-top: 0;
|
||
border-top-left-radius: 0;
|
||
border-top-right-radius: 0;
|
||
border-top-color: color-mix(in srgb, var(--border) 50%, transparent);
|
||
}
|
||
.research-add-btn {
|
||
height:28px;
|
||
padding:0 10px;
|
||
color:var(--fg);
|
||
font-size:11px;
|
||
}
|
||
.research-add-btn:hover { background:color-mix(in srgb, var(--border) 30%, transparent); }
|
||
|
||
/* Popover anchored to the Start-All button — pick parallel vs sequential
|
||
without the heavy "Run N jobs" modal. Drops down by default, flips to
|
||
drop-up when there's no room below (the .rrm-up modifier is added by
|
||
the JS that positions it). */
|
||
.research-run-mode-popover {
|
||
position: fixed;
|
||
z-index: 12000;
|
||
min-width: 200px;
|
||
background: var(--panel);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
|
||
padding: 5px;
|
||
font-size: 13px;
|
||
animation: rrm-pop-in 0.12s ease-out both;
|
||
transform-origin: top right;
|
||
}
|
||
@keyframes rrm-pop-in {
|
||
from { opacity: 0; transform: scale(0.96) translateY(-2px); }
|
||
to { opacity: 1; transform: scale(1) translateY(0); }
|
||
}
|
||
.research-run-mode-popover .research-run-mode-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 9px;
|
||
width: 100%;
|
||
text-align: left;
|
||
background: none;
|
||
border: none;
|
||
color: var(--fg);
|
||
font-family: inherit;
|
||
padding: 10px 13px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
}
|
||
.research-run-mode-popover .research-run-mode-row svg { flex-shrink: 0; opacity: 0.8; }
|
||
.research-run-mode-popover .rrm-title {
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
color: var(--fg);
|
||
}
|
||
.research-jobs-list {
|
||
flex:1; min-height:0; overflow-y:auto; padding:6px 0;
|
||
display: flex; flex-direction: column; gap: 6px;
|
||
}
|
||
.research-empty {
|
||
text-align:center; padding:30px 14px;
|
||
font-size:12px; opacity:0.4;
|
||
}
|
||
/* Cards match Library's .doclib-card: subtle fg 3% tint over var(--bg). */
|
||
.research-job-card {
|
||
--cat-color: #db8576;
|
||
margin: 0;
|
||
padding: 9px 10px 9px 11px;
|
||
background: color-mix(in srgb, var(--cat-color) 4%, var(--bg));
|
||
border: 1px solid color-mix(in srgb, var(--cat-color) 25%, var(--border));
|
||
border-left: 3px solid var(--cat-color);
|
||
border-radius: 8px;
|
||
transition: background 0.15s, border-color 0.15s, transform 0.15s;
|
||
}
|
||
.research-job-card:hover {
|
||
background: color-mix(in srgb, var(--cat-color) 7%, var(--bg));
|
||
border-color: color-mix(in srgb, var(--cat-color) 40%, var(--border));
|
||
}
|
||
.research-job-card.running {
|
||
background: color-mix(in srgb, var(--cat-color) 8%, var(--bg));
|
||
box-shadow: inset 0 1px color-mix(in srgb, var(--cat-color) 14%, transparent);
|
||
}
|
||
.research-job-card.queued { --cat-color: var(--fg-dim, #888); }
|
||
.background-tools-status.agent-thread { min-width: 0; width: calc(100% - 32px); max-width: 640px; }
|
||
.chat-research-card .agent-thread-header { width: 100%; min-height: 44px; background: none; border: 0; border-radius: 0; text-align: left; font-family: inherit; }
|
||
.chat-research-card .agent-thread-header:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
|
||
.chat-research-card.agent-thread-node .agent-thread-dot { top: 23px; }
|
||
.chat-research-card .agent-thread-status { min-width: 0; }
|
||
.chat-research-background { display: inline-flex; align-items: center; gap: 5px; margin-left: 0; white-space: nowrap; flex-shrink: 0; }
|
||
.chat-research-background .spinner-whirlpool { margin: 0 !important; }
|
||
.chat-research-background canvas { transform: translateY(-2px); }
|
||
.chat-research-card .research-job-query { white-space: normal; overflow-wrap: anywhere; font-size: 12px; }
|
||
.chat-research-detail { margin-top: 5px; font-size: 12px; color: var(--fg-dim, #888); }
|
||
.chat-research-open { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin-top: 4px; color: var(--red); text-decoration: underline; }
|
||
.chat-research-open:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; }
|
||
.research-job-card.error,
|
||
.research-job-card.cancelled { --cat-color: #f44336; }
|
||
/* Per-category theming — picks up a category accent, badge, and soft tint */
|
||
.research-job-card[data-category] { --cat-color: var(--accent, var(--red)); }
|
||
.research-job-card[data-category="product"] { --cat-color: #5b8abf; }
|
||
.research-job-card[data-category="comparison"] { --cat-color: #e5a33a; }
|
||
.research-job-card[data-category="howto"] { --cat-color: #82c882; }
|
||
.research-job-card[data-category="landscape"] { --cat-color: #a07ae0; }
|
||
.research-job-card[data-category="factcheck"] { --cat-color: var(--red); }
|
||
/* Inline category label — sits beside the title in low-opacity colored
|
||
text instead of a separate pill. Picks up the per-card --cat-color. */
|
||
/* Uncategorized (default-format) research = "standard", shown in the same
|
||
green as its left border so the green reads as a labelled category. */
|
||
.research-cat-badge.research-cat-standard { color: var(--cat-color); }
|
||
.research-cat-badge {
|
||
font-size: 9px;
|
||
font-weight: 600;
|
||
text-transform: none;
|
||
letter-spacing: 0;
|
||
padding: 2px 5px;
|
||
background: color-mix(in srgb, var(--cat-color) 10%, transparent);
|
||
border: 1px solid color-mix(in srgb, var(--cat-color) 22%, transparent);
|
||
border-radius: 4px;
|
||
color: var(--cat-color, var(--accent));
|
||
opacity: 0.9;
|
||
flex-shrink: 0;
|
||
margin-left: 0;
|
||
}
|
||
|
||
/* Category hero banner */
|
||
.research-hero {
|
||
display: flex; align-items: center; gap: 14px;
|
||
padding: 16px 18px; margin: 8px 0 14px;
|
||
border-radius: 10px;
|
||
background: linear-gradient(
|
||
135deg,
|
||
color-mix(in srgb, var(--cat-color, var(--accent)) 18%, transparent) 0%,
|
||
color-mix(in srgb, var(--cat-color, var(--accent)) 5%, transparent) 100%
|
||
);
|
||
border-left: 4px solid var(--cat-color, var(--accent));
|
||
position: relative; overflow: hidden;
|
||
}
|
||
.research-hero-icon {
|
||
flex-shrink: 0; width: 32px; height: 32px;
|
||
color: var(--cat-color, var(--accent));
|
||
display: flex; align-items: center; justify-content: center;
|
||
filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--cat-color, var(--accent)) 40%, transparent));
|
||
}
|
||
.research-hero-text { flex: 1; min-width: 0; }
|
||
.research-hero-label {
|
||
font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px;
|
||
font-weight: 700; opacity: 0.7; margin-bottom: 3px;
|
||
color: var(--cat-color, var(--accent));
|
||
}
|
||
.research-hero-query {
|
||
font-size: 15px; font-weight: 600;
|
||
line-height: 1.3; color: var(--fg);
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
.research-job-header {
|
||
display:flex; align-items:center; gap:7px; min-height:24px;
|
||
}
|
||
.research-job-query {
|
||
flex:1; min-width:0; font-size:12px; font-weight:650;
|
||
letter-spacing: 0;
|
||
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
|
||
color: var(--fg);
|
||
transform: translateY(-4px);
|
||
}
|
||
.research-job-time,
|
||
.research-job-meta {
|
||
font-size:10px; opacity:0.5; white-space:nowrap; font-family:monospace;
|
||
}
|
||
.research-job-status {
|
||
font-size:10px; text-transform:uppercase; opacity:0.6;
|
||
}
|
||
.research-job-cancel,
|
||
.research-job-remove,
|
||
.research-job-report-link {
|
||
background:transparent; border:none; color:var(--fg);
|
||
opacity:0.4; cursor:pointer; padding:2px; display:flex;
|
||
transition:opacity 0.15s;
|
||
}
|
||
/* Minimize toggle for the per-job synapse "tree" visual. */
|
||
.research-synapse-toggle {
|
||
background:transparent; border:none; color:var(--fg);
|
||
opacity:0.4; cursor:pointer; padding:2px; display:flex;
|
||
transition:opacity 0.15s;
|
||
}
|
||
.research-job-model {
|
||
font-size:9px; opacity:0.4; white-space:nowrap;
|
||
max-width:120px; overflow:hidden; text-overflow:ellipsis;
|
||
}
|
||
.research-job-actions {
|
||
display:flex; gap:5px; margin-top:7px;
|
||
align-items:center;
|
||
}
|
||
.research-job-thumb-frame {
|
||
position: relative;
|
||
width: 49px;
|
||
height: 29px;
|
||
border-radius: 4px;
|
||
flex: 0 0 49px;
|
||
overflow: hidden;
|
||
border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
|
||
background: var(--panel, var(--bg));
|
||
}
|
||
.research-job-summary {
|
||
align-items: flex-start;
|
||
}
|
||
.research-job-summary-copy {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
transform: translateY(-20px);
|
||
}
|
||
.research-job-summary .research-job-meta {
|
||
position: relative;
|
||
top: 12px;
|
||
transform: none;
|
||
}
|
||
.research-job-thumb {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
.research-job-thumb-empty {
|
||
display: inline-block;
|
||
background:
|
||
linear-gradient(135deg,
|
||
color-mix(in srgb, var(--fg) 7%, transparent),
|
||
color-mix(in srgb, var(--fg) 3%, transparent));
|
||
}
|
||
/* Match .doclib-toolbar-btn — same font, padding, hover */
|
||
.research-job-action {
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
padding: 5px 10px;
|
||
background: none;
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
color: var(--fg-muted);
|
||
font-size: 11px;
|
||
font-family: inherit;
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
}
|
||
.research-job-action:hover {
|
||
color: var(--fg);
|
||
border-color: var(--fg);
|
||
}
|
||
.research-job-action-dim { opacity: 0.5; border-color: transparent; }
|
||
.research-job-action-copied {
|
||
color: var(--color-success) !important;
|
||
border-color: color-mix(in srgb, var(--color-success) 45%, var(--border)) !important;
|
||
opacity: 1 !important;
|
||
}
|
||
.research-job-overflow { position: relative; margin-left: auto; }
|
||
.research-job-more {
|
||
width: 30px; height: 30px; padding: 0;
|
||
justify-content: center; color: var(--fg-muted);
|
||
}
|
||
.research-job-menu {
|
||
position: absolute; z-index: 140;
|
||
right: 0; top: calc(100% + 5px);
|
||
min-width: 168px;
|
||
cursor: default;
|
||
}
|
||
.research-job-menu > .dropdown-item-compact svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.72; }
|
||
.research-job-menu > [data-menu-action="copy"] { position: relative; top: -2px; }
|
||
.research-job-menu > [data-menu-action="dismiss"] { position: relative; top: 2px; }
|
||
.research-job-phase {
|
||
font-size:10px; font-weight:600; color:var(--cat-color);
|
||
margin:7px 0 2px; padding:5px 7px;
|
||
background:color-mix(in srgb, var(--cat-color) 8%, transparent);
|
||
border-radius:4px;
|
||
}
|
||
.research-job-queued-meta {
|
||
font-size:10px; opacity:0.4; margin-top:2px;
|
||
}
|
||
.research-section-divider {
|
||
display:flex; align-items:center; gap:10px;
|
||
padding:6px 14px; font-size:10px; opacity:0.4;
|
||
text-transform:uppercase; letter-spacing:0.5px;
|
||
}
|
||
/* Foldable job sections (Active / Past research) */
|
||
/* Collapsible section styled like the Cookbook download sub-blocks (.cookbook-card):
|
||
clean var(--bg) card, 8px radius, a real 13px/600 title. Chevron on the LEFT,
|
||
then title, count, and a status-color dot on the right (the dot stays visible
|
||
when folded so you get status at a glance). Keeps every modal consistent. */
|
||
.research-section {
|
||
margin-top: 6px;
|
||
/* Same surface as the research "window" (.research-new-job -> var(--panel)). */
|
||
background: var(--panel);
|
||
border: 1px solid color-mix(in srgb, var(--fg) 12%, var(--border));
|
||
border-radius: 8px;
|
||
overflow: visible;
|
||
}
|
||
.research-section-body { display: flex; flex-direction: column; gap: 7px; padding: 9px; }
|
||
.research-section-header {
|
||
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
|
||
padding: 9px 11px; cursor: pointer; user-select: none;
|
||
transition: background 0.15s;
|
||
border-radius: 7px 7px 0 0;
|
||
}
|
||
.research-section-header:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
|
||
.research-section-title { font-size: 13px; font-weight: 650; letter-spacing: 0; }
|
||
.research-section-chevron { flex-shrink: 0; opacity: 0.55; transition: transform 0.2s ease; }
|
||
.research-section-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; opacity: 0.9; }
|
||
/* The top "Research" heading is a plain card-style title — no bar/chevron/dot. */
|
||
.research-main-header {
|
||
cursor: default; background: none; border: none;
|
||
padding: 6px 2px; font-size: 13px; font-weight: 600;
|
||
}
|
||
.research-main-header:hover { background: none; }
|
||
.research-section-count {
|
||
/* Match the panel header's "N research" chip — small, muted, no weight. */
|
||
font-size: 10px; opacity: 0.6; font-weight: normal;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.research-job-error {
|
||
font-size:11px; color:#f44336; margin-top:4px; line-height:1.4;
|
||
word-break:break-word;
|
||
}
|
||
.research-job-title-error {
|
||
flex: 0 1 auto;
|
||
min-width: 0;
|
||
max-width: 42%;
|
||
margin-top: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.research-progress-bar {
|
||
height:4px; background:color-mix(in srgb, var(--cat-color) 13%, var(--border)); border-radius:3px; margin-top:7px;
|
||
overflow:hidden;
|
||
}
|
||
.research-progress-fill {
|
||
height:100%; background:var(--cat-color, var(--accent-primary, var(--red)));
|
||
border-radius:2px; transition:width 0.4s ease;
|
||
}
|
||
/* Active research uses the same compact card language as History. The live
|
||
map, progress, and navigation feedback are one optional detail region so a
|
||
long-running job does not permanently take over the active list. */
|
||
#research-pane #research-active-list {
|
||
gap: 4px;
|
||
padding: 2px 2px 4px 0;
|
||
}
|
||
#research-pane #research-active-list .research-job-card {
|
||
display: block;
|
||
box-sizing: border-box;
|
||
max-height: none;
|
||
padding: 8px 10px;
|
||
background: color-mix(in srgb, var(--fg) 3%, transparent);
|
||
border: 1px solid var(--border);
|
||
border-left: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
box-shadow: none;
|
||
}
|
||
#research-pane #research-active-list .research-job-card:hover {
|
||
background: color-mix(in srgb, var(--fg) 5%, transparent);
|
||
border-color: color-mix(in srgb, var(--fg) 16%, transparent);
|
||
transform: none;
|
||
}
|
||
#research-pane #research-active-list .research-active-card-header {
|
||
min-width: 0;
|
||
min-height: 22px;
|
||
gap: 6px;
|
||
cursor: pointer;
|
||
}
|
||
#research-pane #research-active-list .research-job-query {
|
||
position: static;
|
||
transform: none;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
line-height: 1.2;
|
||
}
|
||
#research-pane #research-active-list .research-job-model {
|
||
max-width: 110px;
|
||
}
|
||
#research-pane #research-active-list .research-job-time {
|
||
font-family: inherit;
|
||
font-size: 10px;
|
||
}
|
||
#research-pane #research-active-list .research-active-card-chevron {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 20px;
|
||
height: 20px;
|
||
flex: 0 0 20px;
|
||
color: var(--fg);
|
||
opacity: 0.52;
|
||
}
|
||
#research-pane #research-active-list .research-job-overflow {
|
||
align-self: flex-start;
|
||
margin-left: 0;
|
||
}
|
||
#research-pane #research-active-list .research-job-more {
|
||
width: 22px;
|
||
height: 22px;
|
||
min-height: 22px;
|
||
border: 0;
|
||
background: transparent;
|
||
}
|
||
#research-pane #research-active-list .research-active-detail {
|
||
width: 100%;
|
||
min-width: 0;
|
||
box-sizing: border-box;
|
||
padding-top: 5px;
|
||
overflow: hidden;
|
||
}
|
||
#research-pane #research-active-list .research-active-detail[hidden] {
|
||
display: none !important;
|
||
}
|
||
#research-pane #research-active-list .research-job-phase {
|
||
margin: 0 0 4px;
|
||
}
|
||
#research-pane #research-active-list .research-progress-bar {
|
||
margin-top: 5px;
|
||
}
|
||
#research-pane #research-active-list .research-navigation-trace-live {
|
||
margin-top: 6px;
|
||
}
|
||
.research-job-result {
|
||
margin-top:10px; border-top:1px solid var(--border); padding-top:10px;
|
||
}
|
||
.research-job-sources {
|
||
display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px;
|
||
}
|
||
.research-source-link {
|
||
font-size:10px; padding:2px 6px;
|
||
background:color-mix(in srgb, var(--accent-primary, var(--red)) 10%, transparent);
|
||
border-radius:3px; color:var(--accent-primary, var(--red));
|
||
text-decoration:none; white-space:nowrap;
|
||
max-width:200px; overflow:hidden; text-overflow:ellipsis;
|
||
}
|
||
.research-source-badges {
|
||
display:inline-flex;
|
||
align-items:center;
|
||
gap:3px;
|
||
margin-left:5px;
|
||
vertical-align:1px;
|
||
}
|
||
.research-source-badge {
|
||
font-size:8px;
|
||
line-height:1;
|
||
padding:1px 3px;
|
||
border-radius:3px;
|
||
background:color-mix(in srgb, currentColor 12%, transparent);
|
||
opacity:0.75;
|
||
text-transform:uppercase;
|
||
}
|
||
.research-source-state {
|
||
font-size:10px;
|
||
line-height:1.45;
|
||
white-space:pre-wrap;
|
||
color:var(--text-muted);
|
||
background:color-mix(in srgb, var(--accent-primary, var(--red)) 5%, transparent);
|
||
border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
|
||
border-radius:5px;
|
||
padding:6px 7px;
|
||
margin:0 0 8px;
|
||
}
|
||
.research-navigation-trace {
|
||
font-size:10px;
|
||
line-height:1.4;
|
||
color:var(--text-muted);
|
||
background:color-mix(in srgb, var(--panel-bg, var(--bg)) 80%, transparent);
|
||
border:1px solid color-mix(in srgb, var(--border) 72%, transparent);
|
||
border-radius:5px;
|
||
padding:6px 7px;
|
||
margin:0 0 8px;
|
||
}
|
||
.research-nav-title {
|
||
font-weight:600;
|
||
color:var(--text-primary, var(--text));
|
||
margin-bottom:4px;
|
||
}
|
||
.research-nav-spacer {
|
||
height:6px;
|
||
}
|
||
.research-nav-row {
|
||
display:grid;
|
||
grid-template-columns:auto minmax(0, 1fr) auto;
|
||
gap:5px;
|
||
align-items:baseline;
|
||
min-width:0;
|
||
}
|
||
.research-nav-tool {
|
||
color:var(--accent-primary, var(--red));
|
||
font-weight:600;
|
||
}
|
||
.research-action-skipped .research-nav-tool {
|
||
color:var(--text-muted);
|
||
}
|
||
.research-source-more { font-size:10px; opacity:0.5; padding:2px 4px; }
|
||
.research-job-report-body {
|
||
font-size:12px; line-height:1.55; max-height:400px; overflow-y:auto;
|
||
}
|
||
.research-job-loading { font-size:11px; opacity:0.5; padding:8px 0; }
|
||
.research-library-section {
|
||
border-top:1px solid var(--border); flex-shrink:0;
|
||
}
|
||
.research-library-toggle {
|
||
width:100%; background:transparent; border:none; color:var(--fg);
|
||
padding:8px 14px; font-size:11px; text-align:left;
|
||
opacity:0.6; cursor:pointer; font-weight:500;
|
||
}
|
||
.research-library-item {
|
||
display:flex; align-items:center; gap:6px; flex-wrap:wrap;
|
||
padding:8px 14px; font-size:11px;
|
||
border-bottom:1px solid color-mix(in srgb, var(--border) 50%, transparent);
|
||
}
|
||
.research-library-item:hover { background:color-mix(in srgb, var(--border) 20%, transparent); }
|
||
.research-lib-query {
|
||
flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:120px;
|
||
}
|
||
.research-lib-actions {
|
||
display:flex; gap:4px; margin-left:auto;
|
||
}
|
||
.research-lib-meta {
|
||
font-size:9px; opacity:0.4; white-space:nowrap; font-family:monospace;
|
||
}
|
||
.research-lib-open,
|
||
.research-lib-delete {
|
||
background:transparent; border:none; color:var(--fg);
|
||
opacity:0.3; cursor:pointer; padding:2px; display:flex;
|
||
transition:opacity 0.15s;
|
||
}
|
||
.research-lib-delete:hover { opacity:1; color:#f44336; }
|
||
.research-badge {
|
||
background:var(--accent-primary, var(--red)); border-radius:50%;
|
||
width:6px; height:6px; margin-left:auto; display:inline-block; flex-shrink:0;
|
||
position: relative; left: -4px;
|
||
/* Breathe when research has finished — gentle scale + glow pulse to
|
||
draw the eye to the unread result without being a hard blink. */
|
||
animation: research-badge-breathe 2.4s ease-in-out infinite;
|
||
}
|
||
|
||
/* Sidebar Deep Research running indicator — text then dot, styled the same
|
||
as Cookbook's running status (no glow). */
|
||
.research-sb-running {
|
||
margin-left: auto;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
min-width: 0;
|
||
}
|
||
.research-sb-status {
|
||
font-size: 8px;
|
||
opacity: 0.5;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
position: relative;
|
||
top: 0;
|
||
left: -12px;
|
||
}
|
||
.research-sb-dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
flex-shrink: 0;
|
||
border-radius: 50%;
|
||
background: var(--color-success, #4caf50);
|
||
animation: cookbook-notif-pulse 2s ease-in-out infinite;
|
||
position: relative;
|
||
top: -1px;
|
||
left: -4px;
|
||
}
|
||
|
||
/* ── In-house color picker ── */
|
||
/* A color-picker swatch input shows the chosen colour as its background; hide
|
||
the underlying hex text/caret so it doesn't read as "#a1b2c3" in the box.
|
||
(The themed/gallery variants set this too; this is the generic fallback for
|
||
swatches outside those scopes, e.g. the calendar-settings color dots.) */
|
||
input.cp-swatch-input {
|
||
color: transparent;
|
||
font-size: 0;
|
||
text-shadow: none;
|
||
caret-color: transparent;
|
||
user-select: none;
|
||
}
|
||
input.cp-swatch-input::selection { background: transparent; }
|
||
.cp-popover {
|
||
position: fixed; z-index: 10000;
|
||
display: none;
|
||
width: 240px;
|
||
background: var(--panel, #1a1a1a);
|
||
border: 1px solid var(--border, #333);
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
box-shadow: 0 8px 24px rgba(0,0,0,0.45);
|
||
font-family: inherit; color: var(--fg, #eee); font-size: 12px;
|
||
user-select: none;
|
||
}
|
||
@media (max-width: 768px) {
|
||
.cp-popover {
|
||
width: min(240px, calc(100vw - 24px));
|
||
max-height: calc(100dvh - 24px);
|
||
overflow-y: auto;
|
||
}
|
||
.cp-sl {
|
||
height: min(150px, 34dvh);
|
||
}
|
||
}
|
||
.cp-sl {
|
||
position: relative;
|
||
width: 100%; height: 160px;
|
||
border-radius: 6px;
|
||
cursor: crosshair;
|
||
overflow: hidden;
|
||
touch-action: none;
|
||
}
|
||
.cp-sl-white {
|
||
position: absolute; inset: 0;
|
||
background: linear-gradient(to right, #fff, rgba(255,255,255,0));
|
||
pointer-events: none;
|
||
}
|
||
.cp-sl-black {
|
||
position: absolute; inset: 0;
|
||
background: linear-gradient(to top, #000, rgba(0,0,0,0));
|
||
pointer-events: none;
|
||
}
|
||
.cp-sl-handle {
|
||
position: absolute;
|
||
width: 12px; height: 12px;
|
||
margin: -6px 0 0 -6px;
|
||
border: 2px solid #fff;
|
||
border-radius: 50%;
|
||
box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.5);
|
||
pointer-events: none;
|
||
}
|
||
.cp-hue {
|
||
position: relative;
|
||
margin-top: 10px;
|
||
height: 14px;
|
||
border-radius: 7px;
|
||
background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
|
||
cursor: pointer;
|
||
touch-action: none;
|
||
}
|
||
.cp-hue-handle {
|
||
position: absolute; top: 50%;
|
||
width: 10px; height: 18px;
|
||
margin: -9px 0 0 -5px;
|
||
border: 2px solid #fff;
|
||
border-radius: 3px;
|
||
box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.5);
|
||
pointer-events: none;
|
||
}
|
||
.cp-row {
|
||
display: flex; align-items: center; gap: 6px; margin-top: 10px;
|
||
}
|
||
.cp-preview {
|
||
width: 24px; height: 24px;
|
||
border-radius: 50%;
|
||
border: 1px solid var(--border, #333);
|
||
flex-shrink: 0;
|
||
}
|
||
.cp-hex {
|
||
flex: 1; min-width: 0;
|
||
padding: 4px 6px;
|
||
background: var(--bg, #000); color: var(--fg, #eee);
|
||
border: 1px solid var(--border, #333);
|
||
border-radius: 4px;
|
||
font-family: ui-monospace, 'Fira Code', monospace;
|
||
font-size: 12px; text-transform: lowercase;
|
||
}
|
||
.cp-hex:focus { outline: none; border-color: var(--red, #e06c75); }
|
||
.cp-copy {
|
||
width: 26px; height: 26px;
|
||
padding: 0;
|
||
background: transparent;
|
||
border: 1px solid var(--border, #333);
|
||
border-radius: 4px;
|
||
color: var(--fg, #eee);
|
||
cursor: pointer;
|
||
display: flex; align-items: center; justify-content: center;
|
||
flex: 0 0 26px;
|
||
transition: background 0.1s, color 0.1s;
|
||
}
|
||
.cp-copy:hover { background: color-mix(in srgb, var(--accent, var(--red)) 12%, transparent); color: var(--accent, var(--red)); }
|
||
.cp-eyedropper {
|
||
width: 26px; height: 26px;
|
||
padding: 0;
|
||
background: transparent;
|
||
border: 1px solid var(--border, #333);
|
||
border-radius: 4px;
|
||
color: var(--fg, #eee);
|
||
cursor: pointer;
|
||
display: flex; align-items: center; justify-content: center;
|
||
flex-shrink: 0;
|
||
transition: background 0.1s;
|
||
}
|
||
.cp-eyedropper:hover:not(:disabled) { background: rgba(255,255,255,0.08); }
|
||
.cp-section-label {
|
||
font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px;
|
||
opacity: 0.5; margin-top: 10px; margin-bottom: 4px;
|
||
}
|
||
.cp-swatches {
|
||
display: flex; flex-wrap: wrap; gap: 4px;
|
||
}
|
||
.cp-swatch {
|
||
width: 20px; height: 20px;
|
||
border-radius: 50%;
|
||
border: 1px solid var(--border, #333);
|
||
cursor: pointer;
|
||
padding: 0;
|
||
transition: transform 0.08s;
|
||
}
|
||
.cp-swatch:hover { transform: scale(1.15); }
|
||
.cp-recent-empty {
|
||
font-size: 11px; opacity: 0.4; padding: 2px 0;
|
||
}
|
||
|
||
/* PDF form export modal + signature modals — match the app theme via the
|
||
existing modal/confirm-btn classes. Only a few atom-level styles below. */
|
||
.pdf-export-overlay .modal-content { padding: 12px 14px; }
|
||
.pdf-export-overlay #pdf-export-body { padding-right: 4px; }
|
||
.pdf-export-overlay .pdf-export-section {
|
||
margin-bottom: 14px;
|
||
}
|
||
.pdf-export-overlay .pdf-export-section-title {
|
||
font-size: 0.72rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--red);
|
||
opacity: 0.85;
|
||
margin-bottom: 6px;
|
||
}
|
||
.pdf-export-overlay .pdf-export-row {
|
||
display: grid;
|
||
grid-template-columns: 38% 62%;
|
||
gap: 8px;
|
||
align-items: center;
|
||
padding: 3px 0;
|
||
}
|
||
.pdf-export-overlay .pdf-export-row label {
|
||
font-size: 0.78rem;
|
||
color: var(--fg);
|
||
opacity: 0.85;
|
||
}
|
||
.pdf-export-input,
|
||
.pdf-export-overlay select.pdf-export-input,
|
||
.pdf-export-overlay input.pdf-export-input {
|
||
padding: 4px 6px;
|
||
border: 1px solid var(--border);
|
||
background: var(--bg);
|
||
color: var(--fg);
|
||
border-radius: 4px;
|
||
font-size: 0.78rem;
|
||
font-family: inherit;
|
||
}
|
||
.pdf-export-input:focus {
|
||
outline: none;
|
||
border-color: var(--fg);
|
||
}
|
||
.sig-modal-overlay .modal-content { padding: 12px 14px; }
|
||
.sig-modal-overlay .sig-canvas {
|
||
display: block;
|
||
width: 100%;
|
||
height: 240px;
|
||
background: #fff;
|
||
cursor: crosshair;
|
||
border: 1px dashed var(--border);
|
||
border-radius: 5px;
|
||
/* Drawing uses pointer events; without this, a touch-drag on the canvas pans
|
||
the page / sheet instead of drawing ("the whole window moves"). */
|
||
touch-action: none;
|
||
}
|
||
.sig-modal-overlay .sig-name,
|
||
.sig-modal-overlay .sig-smoothness {
|
||
font-family: inherit;
|
||
}
|
||
.sig-modal-overlay .sig-smoothness {
|
||
accent-color: var(--accent, var(--red));
|
||
margin: 0;
|
||
}
|
||
.sig-modal-overlay .sig-name {
|
||
width: 100%;
|
||
padding: 6px 8px;
|
||
border: 1px solid var(--border);
|
||
background: var(--bg);
|
||
color: var(--fg);
|
||
border-radius: 4px;
|
||
font-size: 0.85rem;
|
||
}
|
||
.sig-modal-overlay .sig-tile {
|
||
position: relative;
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
padding: 8px;
|
||
cursor: pointer;
|
||
background: var(--bg);
|
||
}
|
||
.sig-modal-overlay .sig-tile:hover { border-color: var(--fg); }
|
||
.sig-modal-overlay .sig-tile img {
|
||
display: block;
|
||
width: 100%;
|
||
height: 80px;
|
||
object-fit: contain;
|
||
background: #fff;
|
||
border-radius: 3px;
|
||
}
|
||
.sig-modal-overlay .sig-tile-del {
|
||
position: absolute;
|
||
top: 1px;
|
||
right: 6px;
|
||
width: 20px;
|
||
height: 20px;
|
||
/* Center the × glyph inside the round bg — without this the button's default
|
||
text metrics push it past the right edge of the circle. */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 0 0 1px;
|
||
box-sizing: border-box;
|
||
font-size: 0.85rem;
|
||
line-height: 1;
|
||
border: 1px solid var(--accent, var(--red));
|
||
background: #fff;
|
||
color: var(--accent, var(--red));
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
opacity: 1;
|
||
}
|
||
.sig-modal-overlay .sig-tile-del:hover {
|
||
background: color-mix(in srgb, var(--accent, var(--red)) 10%, #fff);
|
||
}
|
||
.sig-modal-overlay .sig-new-tile {
|
||
border: 2px dashed var(--border);
|
||
border-radius: 6px;
|
||
padding: 8px;
|
||
cursor: pointer;
|
||
background: var(--bg);
|
||
color: var(--fg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 106px;
|
||
font-weight: 600;
|
||
opacity: 0.85;
|
||
}
|
||
.sig-modal-overlay .sig-new-tile:hover {
|
||
opacity: 1;
|
||
border-color: var(--fg);
|
||
}
|
||
|
||
/* Form checkboxes — render as a circular dot, theme-aware. Used in the
|
||
Export PDF modal and the inline PDF view overlay. */
|
||
.pdf-export-overlay input[type="checkbox"],
|
||
#doc-pdf-view input[type="checkbox"] {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
margin: 0;
|
||
cursor: pointer;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
position: relative;
|
||
}
|
||
.pdf-export-overlay input[type="checkbox"] {
|
||
width: 14px;
|
||
height: 14px;
|
||
border: 1.5px solid var(--border);
|
||
background: var(--bg);
|
||
}
|
||
.pdf-export-overlay input[type="checkbox"]:checked {
|
||
background: var(--fg);
|
||
border-color: var(--fg);
|
||
}
|
||
/* PDF view overlays on a white page render — keep colors theme-independent
|
||
so the dot is always visible against the rendered PDF. */
|
||
#doc-pdf-view input[type="checkbox"] {
|
||
border: 1.5px solid #444;
|
||
}
|
||
#doc-pdf-view input[type="checkbox"]:checked {
|
||
background: #111;
|
||
border-color: #111;
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────────
|
||
Frosted glass theme — applied when the user enables the "Glass" toggle
|
||
in theme settings (writes `body.theme-frosted`). Layers a semi-translucent
|
||
tint over every panel/modal/sidebar/dropdown and blurs whatever is
|
||
behind it, so the UI reads like layered glass.
|
||
───────────────────────────────────────────────────────────────────────── */
|
||
body.theme-frosted #sidebar,
|
||
body.theme-frosted .modal-content,
|
||
body.theme-frosted .doclib-modal-content,
|
||
body.theme-frosted .gallery-modal-content,
|
||
body.theme-frosted .notes-pane,
|
||
body.theme-frosted .research-pane,
|
||
body.theme-frosted .calendar-pane,
|
||
body.theme-frosted .cookbook-pane,
|
||
body.theme-frosted .doc-pane,
|
||
body.theme-frosted .doc-pane-floating,
|
||
body.theme-frosted .cp-popover,
|
||
body.theme-frosted .dropdown,
|
||
body.theme-frosted .overflow-menu,
|
||
body.theme-frosted .doc-tab-dropdown,
|
||
body.theme-frosted .email-reader,
|
||
body.theme-frosted .admin-card,
|
||
body.theme-frosted .gallery-detail-menu,
|
||
body.theme-frosted #theme-popup .modal-content {
|
||
/* Tinted base color (set separately so the shorthand can't swallow it);
|
||
much more transparent than before so what's behind actually shows
|
||
through. The blur catches whatever pixels are below. */
|
||
background-color: color-mix(in srgb, var(--panel, var(--bg)) 32%, transparent) !important;
|
||
background-image: linear-gradient(180deg,
|
||
color-mix(in srgb, var(--fg, #fff) 14%, transparent) 0%,
|
||
color-mix(in srgb, var(--fg, #fff) 4%, transparent) 26%,
|
||
transparent 55%) !important;
|
||
backdrop-filter: blur(24px) saturate(170%) !important;
|
||
-webkit-backdrop-filter: blur(24px) saturate(170%) !important;
|
||
border-color: color-mix(in srgb, var(--fg) 22%, transparent) !important;
|
||
}
|
||
/* The sidebar header + user bar paint their own opaque --sidebar-bg/--panel.
|
||
Under the frosted theme the sidebar is translucent glass, so those solid
|
||
bands stood out as a dark (near-black) strip over the title/avatar area.
|
||
Make them transparent so they blend into the frosted sidebar. */
|
||
body.theme-frosted .sidebar-header,
|
||
body.theme-frosted .sidebar-user-bar {
|
||
background: transparent !important;
|
||
}
|
||
/* Same problem on tool modals: the sticky .modal-header paints a solid
|
||
var(--panel) bar (so scrolled content doesn't bleed through). Over a
|
||
frosted-glass modal body that solid bar reads as a dark band across the
|
||
title area (Calendar, Tasks, Cookbook, Memory, Email…). Give the header
|
||
its own matching frosted glass — translucent tint + blur — so it stays
|
||
readable while scrolling but blends into the panel instead of a black band. */
|
||
body.theme-frosted .modal-header {
|
||
/* Transparent — NOT another panel tint. The header sits on top of the
|
||
already-frosted modal body, so any added tint stacks and the band
|
||
reads darker than its surroundings. Keep just the blur (which doesn't
|
||
darken) so scrolled content stays legible under the sticky header. */
|
||
background-color: transparent !important;
|
||
background-image: none !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
}
|
||
/* Deep Research's header isn't sticky (content doesn't scroll under it) and
|
||
its pane carries extra frosting — saturate + a top gradient highlight +
|
||
the synapse glow. The generic header blur above adds its OWN glass layer,
|
||
which renders a different shade than the pane behind it. Drop the header's
|
||
blur so the pane's frosted background shows through the header uniformly. */
|
||
body.theme-frosted .research-pane-header {
|
||
background-color: transparent !important;
|
||
background-image: none !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
}
|
||
body.theme-frosted .notes-mobile-grabber {
|
||
background-color: transparent !important;
|
||
background-image: none !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
}
|
||
/* Inner admin-cards inside frosted modals stack their transparency on top
|
||
of the modal's, which kills the see-through. Make the inner card nearly
|
||
fully transparent so the outer modal's blur dominates. */
|
||
body.theme-frosted .modal-content .admin-card,
|
||
body.theme-frosted .doclib-modal-content .admin-card,
|
||
body.theme-frosted .gallery-modal-content .admin-card,
|
||
body.theme-frosted #theme-popup .admin-card {
|
||
background-color: color-mix(in srgb, var(--panel, var(--bg)) 10%, transparent) !important;
|
||
background-image: none !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
}
|
||
/* Subtle inner light highlight + softer shadow on the heavier surfaces */
|
||
body.theme-frosted .modal-content,
|
||
body.theme-frosted .doclib-modal-content,
|
||
body.theme-frosted .gallery-modal-content,
|
||
body.theme-frosted .notes-pane,
|
||
body.theme-frosted .research-pane,
|
||
body.theme-frosted .calendar-pane,
|
||
body.theme-frosted .cookbook-pane,
|
||
body.theme-frosted .doc-pane,
|
||
body.theme-frosted .doc-pane-floating {
|
||
box-shadow:
|
||
0 14px 36px rgba(0, 0, 0, 0.5),
|
||
inset 0 1px 0 color-mix(in srgb, var(--fg, #fff) 14%, transparent),
|
||
inset 0 -1px 0 color-mix(in srgb, #000 14%, transparent) !important;
|
||
}
|
||
/* Backdrops should be MUCH less opaque so the blur effect reads through to
|
||
the actual page content behind the modal. */
|
||
body.theme-frosted .modal {
|
||
background: color-mix(in srgb, #000 12%, transparent) !important;
|
||
}
|
||
|
||
/* Mobile only: lift the Dependencies "Server" dropdown's selected text up ~2px. */
|
||
@media (max-width: 768px) {
|
||
#hwfit-deps-server { padding-bottom: 4px; line-height: 1; }
|
||
}
|
||
|
||
/* Emoji rendered as monochrome line icons (OpenMoji-black via /api/emoji proxy)
|
||
instead of colorful system glyphs — project rule: never colorful emoji. The
|
||
SVG is used as a mask filled with the current text color, so it tints to the
|
||
theme. Sized to sit on the text baseline. */
|
||
.emoji {
|
||
height: 1.15em;
|
||
width: 1.15em;
|
||
vertical-align: -0.18em;
|
||
margin: 0 0.05em;
|
||
display: inline-block;
|
||
background-color: currentColor;
|
||
-webkit-mask: var(--em) center / contain no-repeat;
|
||
mask: var(--em) center / contain no-repeat;
|
||
}
|
||
|
||
.assistant-message a[href^="#event-"] .emoji,
|
||
.ai-message a[href^="#event-"] .emoji,
|
||
.message.assistant a[href^="#event-"] .emoji {
|
||
position: relative;
|
||
top: 2px;
|
||
}
|
||
|
||
.emoji[aria-label="🔔"] {
|
||
position: relative;
|
||
top: 3px;
|
||
}
|
||
|
||
|
||
/* RESEARCH SCROLL FORCE — guarantee the jobs list scrolls inside the bounded
|
||
pane (the pane is height-capped: 85vh desktop, 100dvh mobile). Each ancestor
|
||
needs min-height:0 for a nested flex scroll to engage. */
|
||
#research-pane { min-height: 0; }
|
||
/* The BODY is the single scroller — the list flows into it and the whole body
|
||
scrolls. (A nested list-scroller kept clipping instead of scrolling.) */
|
||
#research-pane .research-pane-body {
|
||
flex: 1 1 auto !important; min-height: 0 !important;
|
||
display: flex !important; flex-direction: column !important;
|
||
overflow-y: auto !important; -webkit-overflow-scrolling: touch;
|
||
}
|
||
#research-pane .research-jobs-list {
|
||
flex: 0 0 auto !important; min-height: 0 !important;
|
||
overflow: visible !important; max-height: none !important;
|
||
}
|
||
/* The tabbed research panel replaces the old single body scroller above:
|
||
each result tab now owns its list viewport. */
|
||
#research-pane .research-tab-panel {
|
||
flex: 1 1 auto !important;
|
||
min-height: 0 !important;
|
||
overflow-y: auto !important;
|
||
overflow-x: hidden !important;
|
||
}
|
||
#research-pane .research-tab-panel:not([data-research-panel="research"]) .research-jobs-list {
|
||
flex: 1 1 auto !important;
|
||
min-height: 0 !important;
|
||
overflow-y: auto !important;
|
||
}
|
||
#research-pane .research-tab-panel[data-research-panel="research"] .research-new-job {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* RESEARCH FULLSCREEN MOBILE — the pane wasn't opening to full height on mobile,
|
||
so its content overflowed with nowhere to scroll. Pin it to the full viewport
|
||
(id selector + !important beats the inherited modal-content sizing). */
|
||
@media (max-width: 768px) {
|
||
/* Bottom-sheet: 90dvh tall (a touch smaller than full-screen) anchored to the
|
||
bottom, so there's a small gap at the top and it reads as a sheet. The body
|
||
still scrolls within the bounded height. */
|
||
#research-overlay { align-items: flex-end !important; justify-content: stretch !important; padding-bottom: 0 !important; }
|
||
#research-pane {
|
||
height: 90dvh !important;
|
||
max-height: 90dvh !important;
|
||
width: 100vw !important;
|
||
max-width: 100vw !important;
|
||
border-radius: 14px 14px 0 0 !important;
|
||
}
|
||
/* Bottom breathing room so the expanded Settings + Start button clear the
|
||
browser's bottom toolbar / safe area and can always be scrolled into view
|
||
(otherwise the form fits the viewport and there's no room to reach them). */
|
||
#research-pane .research-pane-body {
|
||
padding-bottom: calc(var(--safe-bottom) + 40px) !important;
|
||
touch-action: pan-y;
|
||
overscroll-behavior: contain;
|
||
}
|
||
}
|
||
|
||
/* Keep the primary action transition consistent with the shared toolbar. */
|
||
.research-start-btn { transition: opacity 0.16s ease; }
|
||
|
||
/* Right-side group of the section header: clear button (past), status dot, chevron. */
|
||
.research-section-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
|
||
/* "Clear all" in the Past header — styled like the cookbook-running clear btn. */
|
||
.research-section-clear {
|
||
font-size: 10px; padding: 0 8px; height: 22px;
|
||
border-radius: 6px; border: 1px solid var(--border);
|
||
color: color-mix(in srgb, var(--fg) 45%, transparent);
|
||
background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
|
||
font-family: inherit; white-space: nowrap; transition: all 0.15s;
|
||
position: relative; top: -2px;
|
||
}
|
||
.research-section-clear:hover { color: var(--red); border-color: var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); }
|
||
|
||
/* Visual Report button tinted with the research type colour (--cat-color),
|
||
falling back to the accent for "standard" (uncategorized) research. */
|
||
.research-job-action.research-job-action-report {
|
||
color: var(--cat-color, var(--accent, var(--red)));
|
||
border-color: color-mix(in srgb, var(--cat-color, var(--accent, var(--red))) 45%, var(--border));
|
||
}
|
||
|
||
.research-start-btn svg,
|
||
.research-add-plus { display: inline-block; }
|
||
|
||
/* Compare's selector uses the shared Start button markup, but its accent
|
||
background needs a readable dark foreground and a lighter hover weight. */
|
||
#compare-model-overlay .research-start-btn {
|
||
color: #000;
|
||
}
|
||
#compare-model-overlay .research-start-btn:hover {
|
||
color: var(--fg);
|
||
font-weight: 400;
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Footer hint under Past research linking to the Library's Research tab. */
|
||
.research-library-hint {
|
||
width: 100%; flex-basis: 100%; margin: -2px 0 0; line-height: 1.2;
|
||
font-size: calc(1em - 2px); opacity: 0.55;
|
||
}
|
||
.research-library-link {
|
||
background: none; border: none; padding: 0; cursor: pointer;
|
||
font: inherit; color: var(--accent, var(--red)); text-decoration: underline;
|
||
}
|
||
|
||
|
||
@media (max-width: 768px) {
|
||
/* Mobile: the "Delete" label is too wide in Deep Research job rows; keep the
|
||
familiar trash action but make it icon-only. */
|
||
.research-job-action[data-action="delete"] {
|
||
width: 28px;
|
||
min-width: 28px;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
gap: 0;
|
||
justify-content: center;
|
||
font-size: 0;
|
||
}
|
||
.research-job-action[data-action="delete"] svg {
|
||
width: 13px;
|
||
height: 13px;
|
||
margin: 0;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
/* Standard research gets a stable visual variant instead of inheriting the
|
||
global warm accent. Keep typography unchanged; vary only the card tint,
|
||
border, badge, progress bar, and report hero accent. */
|
||
.research-job-card.research-standard {
|
||
--cat-color: var(--research-accent);
|
||
background: color-mix(in srgb, var(--research-accent) 4%, var(--bg));
|
||
border-color: color-mix(in srgb, var(--research-accent) 28%, var(--border));
|
||
border-left-color: var(--research-accent);
|
||
}
|
||
.research-job-card.research-standard .research-cat-badge.research-cat-standard {
|
||
color: var(--research-accent);
|
||
}
|
||
|
||
/* Failed research (0 sources) — red flag + actionable note. */
|
||
.research-job-card.research-job-failed { border-color: color-mix(in srgb, #f44336 40%, var(--border)); }
|
||
.research-cat-badge.research-cat-failed { color: #f44336; display: inline-flex; align-items: center; gap: 3px; }
|
||
.research-cat-badge.research-cat-failed svg { width: 10px; height: 10px; }
|
||
.research-job-failnote { position: relative; top: 2px; font-size: 10px; color: #f44336; opacity: 0.9; margin: 2px 0 6px; line-height: 1.35; }
|
||
|
||
/* Shared popup-menu row feedback. Many small menus use their own item class;
|
||
keep the hover light and consistent instead of giving one action a special
|
||
glow. */
|
||
:is(
|
||
.overflow-menu-item,
|
||
.dropdown-item,
|
||
.dropdown-item-compact,
|
||
.export-dropdown-item,
|
||
.sort-dropdown-item,
|
||
.note-reminder-menu-item,
|
||
.research-run-mode-popover .research-run-mode-row,
|
||
.ge-fx-menu-item
|
||
) {
|
||
transition:
|
||
background-color 0.14s ease,
|
||
color 0.14s ease,
|
||
opacity 0.14s ease,
|
||
transform 0.14s ease;
|
||
}
|
||
:is(
|
||
.overflow-menu-item,
|
||
.dropdown-item,
|
||
.dropdown-item-compact,
|
||
.export-dropdown-item,
|
||
.sort-dropdown-item,
|
||
.note-reminder-menu-item,
|
||
.research-run-mode-popover .research-run-mode-row,
|
||
.ge-fx-menu-item
|
||
):hover:not(:disabled) {
|
||
opacity: 1;
|
||
color: var(--fg);
|
||
background-color: color-mix(in srgb, var(--accent, var(--red)) 10%, transparent);
|
||
transform: translateX(1px);
|
||
}
|
||
|
||
/* Slash command autocomplete popup, anchored to the message composer */
|
||
.slash-autocomplete-popup {
|
||
position: fixed;
|
||
z-index: 9000;
|
||
background: var(--panel, var(--bg));
|
||
border: 1px solid var(--border, rgba(255,255,255,0.08));
|
||
border-radius: 8px;
|
||
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
|
||
font-size: 13px;
|
||
color: var(--fg, #e6e6e6);
|
||
overflow-y: auto;
|
||
padding: 4px 0;
|
||
display: none;
|
||
}
|
||
.slash-ac-cat {
|
||
font-size: 10px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--fg-muted, #888);
|
||
padding: 6px 10px 2px;
|
||
opacity: 0.7;
|
||
}
|
||
.slash-ac-row {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 8px;
|
||
padding: 5px 10px;
|
||
cursor: pointer;
|
||
line-height: 1.3;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
.slash-ac-row:hover { background-color: color-mix(in srgb, var(--accent, var(--red)) 10%, transparent); }
|
||
.slash-ac-row-sel { background-color: color-mix(in srgb, var(--accent, var(--red)) 14%, transparent); }
|
||
.slash-ac-token {
|
||
font-family: 'Fira Code', ui-monospace, monospace;
|
||
color: var(--accent, var(--red));
|
||
font-weight: 600;
|
||
flex-shrink: 0;
|
||
}
|
||
.slash-ac-help {
|
||
color: var(--fg);
|
||
opacity: 0.85;
|
||
flex: 1;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.slash-ac-usage {
|
||
color: var(--fg-muted, #888);
|
||
font-family: 'Fira Code', ui-monospace, monospace;
|
||
font-size: 11px;
|
||
opacity: 0.55;
|
||
flex-shrink: 0;
|
||
}
|
||
.slash-ac-empty {
|
||
padding: 10px;
|
||
color: var(--fg-muted, #888);
|
||
font-style: italic;
|
||
}
|
||
.slash-ac-empty code {
|
||
font-family: 'Fira Code', ui-monospace, monospace;
|
||
color: var(--accent, var(--red));
|
||
}
|
||
|
||
/* ══ iOS focus-zoom fix — Safari touch devices only; desktop sizes untouched ══
|
||
16px is the threshold below which iOS Safari auto-zooms on focus.
|
||
Selects and date/time inputs are excluded on purpose — they open native
|
||
pickers and never zoom. */
|
||
@supports (-webkit-touch-callout: none) {
|
||
@media (hover: none) and (pointer: coarse) {
|
||
|
||
/* 1 ── Catch-all: every text-entry control NOT pinned with its own
|
||
!important. !important here beats any non-important rule regardless of
|
||
specificity, so this clears the long tail (settings, admin, memory,
|
||
notes, calendar, email, gallery, tasks, model picker, etc.). */
|
||
input[type="text"],
|
||
input[type="search"],
|
||
input[type="email"],
|
||
input[type="url"],
|
||
input[type="tel"],
|
||
input[type="password"],
|
||
input[type="number"],
|
||
input:not([type]),
|
||
textarea {
|
||
font-size: 16px !important;
|
||
}
|
||
|
||
/* 2 ── Fields that pin their own !important at specificity our catch-all
|
||
can't beat. Each is matched at equal-or-higher specificity and, being
|
||
later in the file, wins the tie. */
|
||
#message { font-size: 16px !important; } /* chat composer (was 13px !important) */
|
||
.cookbook-dl-repo,
|
||
.hwfit-search { font-size: 16px !important; } /* cookbook repo path + hardware search */
|
||
.ge-topbar input { font-size: 16px !important; } /* image-editor topbar input */
|
||
.ge-transform-field > input.ge-transform-popup-input { /* image-editor transform values */
|
||
font-size: 16px !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
@supports (-webkit-touch-callout: none) {
|
||
@media (hover: none) and (pointer: coarse) {
|
||
/* Only the sub-16px tiers need bumping; large lands ABOVE 16 so it
|
||
stays zoom-safe AND visibly larger than medium (otherwise L collapses
|
||
onto M on touch). All three editor layers move together so the
|
||
highlight/line-number overlay stays metrically aligned with the textarea. */
|
||
.doc-font-m .doc-editor-textarea, .doc-font-m .doc-editor-highlight, .doc-font-m .doc-line-numbers {
|
||
font-size: 16px !important; /* was 13px */
|
||
}
|
||
.doc-font-l .doc-editor-textarea, .doc-font-l .doc-editor-highlight, .doc-font-l .doc-line-numbers {
|
||
font-size: 18px !important; /* was 15px — keep L > M */
|
||
}
|
||
/* Email compose rich-body. Medium (15px) zooms, so bump it; large (17px)
|
||
is already ≥16px and never zoomed — leave it so we don't shrink it. */
|
||
.doc-email-richbody.doc-font-m { font-size: 16px !important; }
|
||
}
|
||
}
|
||
|
||
/* GitHub Copilot device-flow connect block (model endpoints → API) */
|
||
.adm-copilot-connect {
|
||
margin-top: 10px;
|
||
padding-top: 10px;
|
||
border-top: 1px solid var(--border);
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.adm-copilot-connect #adm-copilotStatus { flex-basis: 100%; margin-top: 0; }
|
||
.adm-copilot-panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
padding: 10px;
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
}
|
||
.adm-copilot-wait {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 12px;
|
||
color: color-mix(in srgb, var(--fg) 70%, transparent);
|
||
}
|
||
.adm-copilot-coderow {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.adm-copilot-code-label {
|
||
font-size: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
color: color-mix(in srgb, var(--fg) 45%, transparent);
|
||
}
|
||
.adm-copilot-code {
|
||
font-family: var(--mono, ui-monospace, monospace);
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.12em;
|
||
padding: 4px 10px;
|
||
background: var(--panel);
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
color: var(--fg);
|
||
user-select: all;
|
||
}
|
||
.adm-copilot-auth {
|
||
text-align: center;
|
||
text-decoration: none;
|
||
padding: 7px 12px;
|
||
font-size: 12px;
|
||
}
|
||
.adm-copilot-hint {
|
||
font-size: 11px;
|
||
line-height: 1.4;
|
||
color: color-mix(in srgb, var(--fg) 45%, transparent);
|
||
}
|
||
/* ChatGPT Subscription per-account usage card (Settings → Added Models) */
|
||
.adm-chatgpt-controls {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 6px;
|
||
align-items: center;
|
||
margin: 4px 0 2px auto;
|
||
}
|
||
.adm-chatgpt-usage-chevron {
|
||
font-size: 10px;
|
||
line-height: 1;
|
||
display: inline-block;
|
||
margin-left: 2px;
|
||
}
|
||
.adm-chatgpt-usage {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
padding: 8px 10px;
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
font-size: 11px;
|
||
}
|
||
.adm-chatgpt-usage-plan { display: flex; gap: 6px; align-items: center; }
|
||
.adm-chatgpt-usage-limit { display: flex; flex-direction: column; gap: 6px; }
|
||
.adm-chatgpt-usage-limit-title {
|
||
font-size: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
color: color-mix(in srgb, var(--fg) 55%, transparent);
|
||
}
|
||
.adm-chatgpt-usage-model {
|
||
text-transform: none;
|
||
letter-spacing: 0;
|
||
font-family: var(--mono, ui-monospace, monospace);
|
||
opacity: 0.8;
|
||
}
|
||
.adm-chatgpt-usage-row { display: flex; flex-direction: column; gap: 3px; }
|
||
.adm-chatgpt-usage-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
gap: 8px;
|
||
}
|
||
.adm-chatgpt-usage-name {
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.06em;
|
||
color: color-mix(in srgb, var(--fg) 70%, transparent);
|
||
}
|
||
.adm-chatgpt-usage-remaining { font-weight: 600; }
|
||
.adm-chatgpt-usage-bar {
|
||
position: relative;
|
||
height: 6px;
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
background: color-mix(in srgb, var(--fg) 12%, transparent);
|
||
}
|
||
.adm-chatgpt-usage-fill {
|
||
display: block;
|
||
height: 100%;
|
||
border-radius: 3px;
|
||
background: var(--accent);
|
||
transition: width 0.25s ease;
|
||
}
|
||
.adm-chatgpt-usage-warn .adm-chatgpt-usage-fill { background: #d99a2b; }
|
||
.adm-chatgpt-usage-critical .adm-chatgpt-usage-fill { background: #d9534f; }
|
||
.adm-chatgpt-usage-unknown .adm-chatgpt-usage-fill { background: color-mix(in srgb, var(--fg) 25%, transparent); }
|
||
.adm-chatgpt-usage-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
font-size: 10px;
|
||
color: color-mix(in srgb, var(--fg) 50%, transparent);
|
||
}
|
||
.adm-chatgpt-usage-status {
|
||
font-size: 11px;
|
||
color: color-mix(in srgb, var(--fg) 60%, transparent);
|
||
}
|
||
.adm-chatgpt-usage-blocked { color: #d9534f; }
|
||
.adm-chatgpt-usage-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
|
||
.adm-chatgpt-reconnect-status { font-size: 11px; }
|
||
/* Cookbook serve panel: Launch + ^ split button pair */
|
||
.hwfit-serve-launch-group {
|
||
display: inline-flex;
|
||
align-items: stretch;
|
||
vertical-align: middle;
|
||
}
|
||
.hwfit-serve-launch-group .hwfit-serve-schedule-arrow {
|
||
border-top-left-radius: 0 !important;
|
||
border-bottom-left-radius: 0 !important;
|
||
border-left: 1px solid var(--border) !important;
|
||
padding: 0 8px !important;
|
||
min-width: 26px;
|
||
display: inline-flex !important;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* Mobile: drop the inline icons on Launch + Cancel in the serve panel so
|
||
the buttons are text-only and don't wrap on narrow screens. Icons stay
|
||
on desktop where horizontal space isn't tight. */
|
||
@media (max-width: 600px) {
|
||
.hwfit-serve-launch > svg,
|
||
.hwfit-serve-cancel > svg {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
/* Schedule form — mounted inside the cookbook serve panel. Uses the
|
||
theme tokens (--bg, --panel, --border, --accent, --red) so it
|
||
matches the rest of the cookbook chrome instead of inline whites. */
|
||
.hwfit-schedule-form {
|
||
margin: 10px 0 4px;
|
||
padding: 12px 14px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
background: var(--bg);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
.hwfit-schedule-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
opacity: 0.95;
|
||
flex-wrap: wrap;
|
||
}
|
||
.hwfit-schedule-title svg { opacity: 0.7; flex-shrink: 0; }
|
||
.hwfit-schedule-title-spacer { flex: 1; min-width: 8px; }
|
||
.hwfit-schedule-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.hwfit-schedule-field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 3px;
|
||
font-size: 11px;
|
||
opacity: 0.75;
|
||
}
|
||
.hwfit-schedule-label {
|
||
font-size: 11px;
|
||
opacity: 0.75;
|
||
}
|
||
.hwfit-sched-days {
|
||
display: inline-flex;
|
||
flex-wrap: wrap;
|
||
gap: 5px;
|
||
}
|
||
.hwfit-schedule-actions-inline {
|
||
display: inline-flex;
|
||
align-items: flex-end;
|
||
gap: 6px;
|
||
align-self: flex-end;
|
||
padding-bottom: 1px;
|
||
}
|
||
.hwfit-sched-day-chip {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
border: 1px solid var(--border);
|
||
background: transparent;
|
||
color: inherit;
|
||
font: inherit;
|
||
font-size: 10px;
|
||
line-height: 1;
|
||
padding: 0;
|
||
cursor: pointer;
|
||
transition: background 0.12s, color 0.12s, border-color 0.12s;
|
||
}
|
||
.hwfit-sched-day-chip:hover { border-color: var(--accent, var(--red)); }
|
||
.hwfit-sched-day-chip.is-on {
|
||
background: var(--accent, var(--red));
|
||
color: var(--panel, #fff);
|
||
border-color: var(--accent, var(--red));
|
||
}
|
||
.hwfit-schedule-actions-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.hwfit-schedule-actions-spacer { flex: 1; }
|
||
|
||
/* Days row hosts the day-chip strip on the left and the Cancel / Save
|
||
action buttons on the right. The spacer between them pushes the
|
||
actions to the right edge. */
|
||
.hwfit-schedule-days-row {
|
||
align-items: center;
|
||
}
|
||
/* Cancel + Save sit on the right side of the days row with matching
|
||
icon-plus-label chrome. */
|
||
.hwfit-sched-cancel,
|
||
.hwfit-sched-save {
|
||
display: inline-flex !important;
|
||
align-items: center;
|
||
}
|
||
.hwfit-schedule-mirror-toggle {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 12px;
|
||
opacity: 0.9;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
.hwfit-sched-err {
|
||
font-size: 12px;
|
||
color: var(--red, #ff6b6b);
|
||
display: none;
|
||
}
|
||
@media (max-width: 600px) {
|
||
.hwfit-schedule-row { gap: 8px; }
|
||
.hwfit-sched-day-chip { width: 36px; height: 36px; font-size: 11px; }
|
||
}
|
||
|
||
/* ── ask_user: multiple-choice question card ─────────────────────────────
|
||
The agent posed a question and ended its turn. The user clicks an option
|
||
or types a free-text "Other" answer. */
|
||
.ask-user-card {
|
||
/* Left-align like an assistant message (.msg-ai), not centered. */
|
||
align-self: flex-start;
|
||
margin: 10px auto 10px 8px;
|
||
width: 85%;
|
||
max-width: 85%;
|
||
box-sizing: border-box;
|
||
font-size: 11px;
|
||
line-height: 1.45;
|
||
padding: 12px 16px 14px;
|
||
border: 1px solid var(--bubble-border, var(--border));
|
||
border-radius: 18px 18px 18px 0;
|
||
background: var(--ai-bubble-bg, var(--panel));
|
||
overflow: hidden;
|
||
position: relative;
|
||
isolation: isolate;
|
||
}
|
||
.ask-user-card-attached {
|
||
margin-top: 0;
|
||
margin-left: 8px;
|
||
width: 85%;
|
||
max-width: 85%;
|
||
}
|
||
.ask-user-card-attached::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 20px;
|
||
top: -18px;
|
||
width: 2px;
|
||
height: 18px;
|
||
border-radius: 1px;
|
||
background: color-mix(in srgb, var(--red) 18%, transparent);
|
||
pointer-events: none;
|
||
z-index: -1;
|
||
}
|
||
/* Focused only programmatically (tabIndex -1) to move SR/keyboard position; no
|
||
visible outline on the whole card box. */
|
||
.ask-user-card:focus { outline: none; }
|
||
.ask-user-head {
|
||
display: none;
|
||
}
|
||
.ask-user-close {
|
||
display: none !important;
|
||
}
|
||
.ask-user-question {
|
||
margin: 0 0 10px;
|
||
font-size: 11px !important;
|
||
font-weight: 500;
|
||
line-height: 1.45;
|
||
color: var(--fg);
|
||
max-width: 100%;
|
||
overflow-wrap: anywhere;
|
||
word-break: break-word;
|
||
white-space: normal;
|
||
}
|
||
.ask-user-options {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
.ask-user-option {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
row-gap: 2px;
|
||
width: 100%;
|
||
min-width: 0;
|
||
box-sizing: border-box;
|
||
height: auto !important;
|
||
/* Match the height of the free-text input below (.styled-prompt-input). */
|
||
min-height: 39px;
|
||
text-align: left;
|
||
padding: 8px 10px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
background: var(--bg);
|
||
color: var(--fg);
|
||
font-size: 11px !important;
|
||
line-height: 1.35;
|
||
cursor: pointer;
|
||
transition: background 0.12s ease, border-color 0.12s ease;
|
||
}
|
||
.ask-user-option:hover:not(:disabled) {
|
||
border-color: var(--accent, var(--red));
|
||
background: color-mix(in srgb, var(--accent, var(--red)) 10%, var(--bg));
|
||
}
|
||
.ask-user-option:disabled { cursor: default; }
|
||
.ask-user-card.ask-user-answered {
|
||
opacity: 0.92;
|
||
}
|
||
.ask-user-card.ask-user-answered .ask-user-question {
|
||
margin-bottom: 8px;
|
||
}
|
||
.ask-user-option-label,
|
||
.ask-user-option-desc {
|
||
display: block;
|
||
flex: 1 1 0;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
overflow-wrap: anywhere;
|
||
word-break: break-word;
|
||
white-space: normal;
|
||
}
|
||
.ask-user-option-label {
|
||
font-size: 11px !important;
|
||
font-weight: 500;
|
||
line-height: 1.35;
|
||
color: var(--accent, var(--red));
|
||
}
|
||
.ask-user-option-desc {
|
||
flex-basis: 100%;
|
||
width: 100%;
|
||
opacity: 0.65;
|
||
font-size: 10px !important;
|
||
line-height: 1.35;
|
||
}
|
||
/* Free-text "Other" row: input + send, on one line. */
|
||
.ask-user-other {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-top: 10px;
|
||
min-width: 0;
|
||
}
|
||
/* Reuses .styled-prompt-input; override its full-width + top margin so it
|
||
sits inline in the flex row next to the send button. */
|
||
.ask-user-other-input {
|
||
flex: 1;
|
||
min-width: 0;
|
||
width: auto;
|
||
margin-top: 0;
|
||
font-size: 11px !important;
|
||
line-height: 1.35;
|
||
}
|
||
/* Reuses .confirm-btn .confirm-btn-primary; flex-row deltas + height match to
|
||
the input beside it (.confirm-btn won't stretch on its own). */
|
||
.ask-user-other-send {
|
||
flex-shrink: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
white-space: nowrap;
|
||
width: 32px;
|
||
min-width: 32px;
|
||
height: 32px !important;
|
||
min-height: 32px;
|
||
font-size: 11px !important;
|
||
line-height: 1.35;
|
||
padding: 0;
|
||
border: none;
|
||
border-radius: 8px;
|
||
background: var(--send-btn-bg, var(--red));
|
||
color: #fff;
|
||
}
|
||
.ask-user-other-send svg { display: block; flex-shrink: 0; }
|
||
.ask-user-other-send:hover:not(:disabled) {
|
||
background: var(--send-btn-hover, color-mix(in srgb, var(--red) 80%, white));
|
||
}
|
||
.ask-user-other-send:disabled { opacity: 0.5; cursor: default; }
|
||
.ask-user-answer {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
padding: 7px 9px;
|
||
border: 1px solid color-mix(in srgb, var(--accent, var(--red)) 24%, var(--border));
|
||
border-radius: 8px;
|
||
background: color-mix(in srgb, var(--accent, var(--red)) 8%, var(--bg));
|
||
color: var(--fg);
|
||
font-size: 11px !important;
|
||
line-height: 1.35;
|
||
}
|
||
.ask-user-answer-label {
|
||
flex: 0 0 auto;
|
||
color: var(--accent, var(--red));
|
||
font-weight: 600;
|
||
}
|
||
.ask-user-answer-value {
|
||
min-width: 0;
|
||
overflow-wrap: anywhere;
|
||
word-break: break-word;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.ask-user-card {
|
||
width: calc(100% - 16px);
|
||
max-width: calc(100% - 16px);
|
||
margin-left: 8px;
|
||
margin-right: 8px;
|
||
padding: 10px 11px 12px;
|
||
border-radius: 10px;
|
||
}
|
||
.ask-user-card-attached {
|
||
margin-left: 0;
|
||
margin-right: 0;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
.ask-user-question {
|
||
font-size: 11px !important;
|
||
line-height: 1.45;
|
||
}
|
||
.ask-user-option {
|
||
padding: 7px 8px;
|
||
font-size: 11px !important;
|
||
gap: 6px;
|
||
}
|
||
.ask-user-option-label {
|
||
font-size: 11px !important;
|
||
}
|
||
.ask-user-option-desc {
|
||
font-size: 10px !important;
|
||
}
|
||
.ask-user-other {
|
||
flex-wrap: wrap;
|
||
}
|
||
.ask-user-other-send {
|
||
width: 32px;
|
||
min-width: 32px;
|
||
height: 32px !important;
|
||
min-height: 32px;
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
/* ── Workspace picker ───────────────────────────────────────────── */
|
||
/* Layout (width/flex column/max-height) inherited from base .modal-content. */
|
||
/* Editable path/address bar: reuses .styled-prompt-input for border/bg/radius/
|
||
focus ring (set in the element's class list). Overrides only the deltas:
|
||
mono font, and full-bleed via flex stretch with no horizontal margin (the
|
||
modal-content's 10px padding is the gutter) instead of the base width:100%,
|
||
which overflowed against the overflow:auto scrollbar. */
|
||
.workspace-cur {
|
||
align-self: stretch;
|
||
width: auto;
|
||
min-width: 0;
|
||
margin: 4px 0 8px;
|
||
font-family: var(--mono, monospace);
|
||
font-size: 12px;
|
||
}
|
||
/* flex/overflow inherited from base .modal-body; only the padding differs. */
|
||
.workspace-body { padding: 6px 0; }
|
||
.workspace-row {
|
||
padding: 7px 18px;
|
||
cursor: pointer;
|
||
font-size: 13px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.workspace-row > span {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.workspace-row-icon { flex-shrink: 0; opacity: 0.75; }
|
||
.workspace-row:hover {
|
||
background: color-mix(in srgb, var(--border) 20%, transparent);
|
||
}
|
||
.workspace-up { opacity: 0.7; }
|
||
.workspace-empty { padding: 14px 18px; opacity: 0.5; font-size: 13px; }
|
||
.workspace-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
padding: 10px 18px;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
.workspace-footer > .confirm-btn { position: relative; top: 4px; }
|
||
.workspace-footer > .confirm-btn-primary { color: var(--bg); }
|
||
.workspace-footer > #workspace-use { top: 3px; font-size: calc(0.85rem + 2px); font-weight: 700; }
|
||
.workspace-footer > #workspace-use:hover { color: var(--fg); }
|
||
.workspace-footer > .confirm-btn > svg { position: relative; left: -2px; top: 2px; }
|
||
.workspace-footer > #workspace-use > svg { top: 3px; color: inherit; }
|
||
.workspace-note { margin: 0 0 8px; font-size: 11px; line-height: 1.4; }
|
||
|
||
.settings-system-logs-tabs {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
margin: 0 0 10px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.settings-system-logs-tab {
|
||
border: 0;
|
||
border-bottom: 2px solid transparent;
|
||
background: transparent;
|
||
color: var(--fg);
|
||
cursor: pointer;
|
||
font: inherit;
|
||
font-size: 11px;
|
||
padding: 6px 8px 7px;
|
||
opacity: 0.62;
|
||
}
|
||
.settings-system-logs-tab.active {
|
||
border-bottom-color: var(--accent, var(--red));
|
||
color: var(--accent, var(--red));
|
||
}
|
||
.settings-system-logs-col {
|
||
gap: 10px;
|
||
}
|
||
.settings-system-notification-logs-col {
|
||
gap: 10px;
|
||
}
|
||
#system-log-terminal-panel[hidden],
|
||
#system-log-notifications-panel[hidden] {
|
||
display: none !important;
|
||
}
|
||
.settings-system-logs-controls {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
}
|
||
.settings-system-logs-search {
|
||
padding: 6px 8px;
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 4px;
|
||
color: var(--fg);
|
||
font-family: inherit;
|
||
font-size: 11px;
|
||
flex: 1;
|
||
min-width: 140px;
|
||
}
|
||
.settings-system-logs-select {
|
||
padding: 5px 8px;
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 4px;
|
||
color: var(--fg);
|
||
font-family: inherit;
|
||
font-size: 11px;
|
||
min-width: 90px;
|
||
}
|
||
#log-refresh-btn {
|
||
height: 27px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 0 8px;
|
||
}
|
||
.settings-system-logs-autopoll-container {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 11px;
|
||
user-select: none;
|
||
margin-left: auto;
|
||
}
|
||
#log-console-container {
|
||
background: #13151a;
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
padding: 12px;
|
||
font-family: Consolas, 'Fira Code', Monaco, 'Courier New', monospace;
|
||
font-size: 11px;
|
||
height: 280px;
|
||
max-height: 280px;
|
||
overflow-y: auto;
|
||
white-space: pre-wrap;
|
||
word-break: break-all;
|
||
color: #d1d4e0;
|
||
box-shadow: inset 0 2px 8px rgba(0,0,0,0.5);
|
||
}
|
||
.settings-system-logs-placeholder {
|
||
color: var(--color-text-dim, #7f8c8d);
|
||
font-style: italic;
|
||
font-family: inherit;
|
||
}
|
||
.log-line {
|
||
margin-bottom: 3px;
|
||
line-height: 1.4;
|
||
font-size: 11px;
|
||
font-family: inherit;
|
||
}
|
||
.log-line-info {
|
||
color: var(--green, #50fa7b);
|
||
}
|
||
.log-line-warning {
|
||
color: var(--warn, #f0ad4e);
|
||
}
|
||
.log-line-error {
|
||
color: var(--red, #e06c75);
|
||
}
|
||
.log-line-debug {
|
||
color: var(--color-muted, #888);
|
||
}
|
||
.log-line-default {
|
||
color: var(--fg, #9cdef2);
|
||
}
|
||
#notification-log-container {
|
||
height: 280px;
|
||
max-height: 280px;
|
||
overflow-y: auto;
|
||
padding: 2px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
background: color-mix(in srgb, var(--bg) 72%, #13151a 28%);
|
||
}
|
||
.notification-log-entry {
|
||
padding: 9px 10px;
|
||
border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
|
||
}
|
||
.notification-log-entry:last-child { border-bottom: 0; }
|
||
.notification-log-heading {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
min-width: 0;
|
||
}
|
||
.notification-log-task {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-size: 12px;
|
||
}
|
||
.notification-log-status {
|
||
flex: 0 0 auto;
|
||
padding: 2px 5px;
|
||
border: 1px solid currentColor;
|
||
border-radius: 4px;
|
||
font-size: 9px;
|
||
line-height: 1;
|
||
text-transform: uppercase;
|
||
opacity: 0.82;
|
||
}
|
||
.notification-log-success .notification-log-status { color: var(--green, #50fa7b); }
|
||
.notification-log-error .notification-log-status { color: var(--red, #e06c75); }
|
||
.notification-log-meta {
|
||
margin-top: 3px;
|
||
color: var(--color-text-dim, #7f8c8d);
|
||
font-size: 10px;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.notification-log-body {
|
||
position: relative;
|
||
margin-top: 6px;
|
||
padding: 7px 8px;
|
||
border-left: 2px solid color-mix(in srgb, var(--fg) 28%, transparent);
|
||
color: color-mix(in srgb, var(--fg) 82%, transparent);
|
||
font-family: Consolas, 'Fira Code', Monaco, 'Courier New', monospace;
|
||
font-size: 11px;
|
||
line-height: 1.45;
|
||
white-space: pre-wrap;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.notification-log-body-text { display: block; padding-right: 24px; }
|
||
.notification-log-copy {
|
||
position: absolute; top: 5px; right: 5px; width: 22px; height: 22px;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
border: 0; border-radius: 4px; background: transparent; color: currentColor;
|
||
opacity: .45; cursor: pointer; padding: 0;
|
||
}
|
||
.notification-log-copy:hover { opacity: 1; background: color-mix(in srgb, var(--fg) 8%, transparent); }
|
||
.notification-log-copy.copied { opacity: 1; color: var(--green, #50fa7b); }
|
||
.notification-log-error .notification-log-body {
|
||
border-left-color: var(--red, #e06c75);
|
||
color: color-mix(in srgb, var(--red, #e06c75) 88%, var(--fg));
|
||
}
|
||
|
||
/* Compare uses one full-width response card on phones. Every pane remains
|
||
mounted so hidden models can keep streaming while the tab strip scales to
|
||
larger comparisons without stacking multiple chats down the page. */
|
||
@media (max-width: 768px) {
|
||
.compare-add-flap { display: none !important; }
|
||
.compare-mobile-tabs {
|
||
display: flex;
|
||
flex: 0 0 auto;
|
||
align-items: stretch;
|
||
gap: 5px;
|
||
min-width: 0;
|
||
padding: 0 8px 6px;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
scrollbar-width: none;
|
||
scroll-snap-type: x proximity;
|
||
overscroll-behavior-x: contain;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
.compare-mobile-tabs::-webkit-scrollbar { display: none; }
|
||
.compare-mobile-tab {
|
||
position: relative;
|
||
display: grid;
|
||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||
align-items: center;
|
||
gap: 6px;
|
||
flex: 0 0 clamp(108px, 38vw, 156px);
|
||
min-width: 0;
|
||
height: 34px;
|
||
box-sizing: border-box;
|
||
padding: 0 9px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
background: color-mix(in srgb, var(--fg) 3%, var(--bg));
|
||
color: color-mix(in srgb, var(--fg) 62%, transparent);
|
||
font-size: 10px;
|
||
line-height: 1;
|
||
font-family: inherit;
|
||
text-align: left;
|
||
scroll-snap-align: start;
|
||
transition: border-color .15s ease, background .15s ease, color .15s ease;
|
||
}
|
||
.compare-mobile-add {
|
||
display: inline-flex;
|
||
flex: 0 0 auto;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 3px;
|
||
height: 34px;
|
||
padding: 0 8px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
background: color-mix(in srgb, var(--fg) 3%, var(--bg));
|
||
color: color-mix(in srgb, var(--fg) 70%, transparent);
|
||
font-size: 10px;
|
||
line-height: 1;
|
||
font-family: inherit;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
}
|
||
.compare-mobile-add > span:first-child {
|
||
color: var(--accent, var(--red));
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
line-height: 1;
|
||
}
|
||
.compare-mobile-add:disabled { opacity: .35; cursor: default; }
|
||
.compare-mobile-add:not(:disabled):active {
|
||
background: color-mix(in srgb, var(--accent, var(--red)) 12%, var(--bg));
|
||
}
|
||
.compare-mobile-tab.active {
|
||
border-color: color-mix(in srgb, var(--accent, var(--red)) 70%, var(--border));
|
||
background: color-mix(in srgb, var(--accent, var(--red)) 11%, var(--bg));
|
||
color: var(--fg);
|
||
}
|
||
.compare-mobile-tab-slot {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 17px;
|
||
height: 17px;
|
||
border-radius: 50%;
|
||
background: color-mix(in srgb, var(--fg) 7%, transparent);
|
||
color: color-mix(in srgb, var(--fg) 68%, transparent);
|
||
font-size: 9px;
|
||
font-weight: 700;
|
||
}
|
||
.compare-mobile-tab.active .compare-mobile-tab-slot {
|
||
background: var(--accent, var(--red));
|
||
color: var(--bg);
|
||
}
|
||
.compare-mobile-tab-label {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.compare-mobile-tab-state {
|
||
width: 5px;
|
||
height: 5px;
|
||
border-radius: 50%;
|
||
background: color-mix(in srgb, var(--fg) 22%, transparent);
|
||
}
|
||
.compare-mobile-tab.is-streaming .compare-mobile-tab-state {
|
||
background: var(--red, #e06c75);
|
||
box-shadow: 0 0 0 0 color-mix(in srgb, var(--red, #e06c75) 65%, transparent);
|
||
animation: compare-mobile-tab-pulse 1s ease-in-out infinite !important;
|
||
will-change: opacity, transform, box-shadow;
|
||
}
|
||
.compare-mobile-tab.is-awaiting-input .compare-mobile-tab-state { background: var(--accent, var(--red)); }
|
||
.compare-mobile-tab.is-done .compare-mobile-tab-state {
|
||
width: auto;
|
||
height: auto;
|
||
border-radius: 0;
|
||
background: none;
|
||
color: var(--color-success, #4caf50);
|
||
font-size: 13px;
|
||
font-weight: 800;
|
||
line-height: 1;
|
||
}
|
||
.compare-mobile-tab.is-done .compare-mobile-tab-state::before { content: '✓'; }
|
||
.compare-mobile-tab.is-failed .compare-mobile-tab-state { background: var(--color-error, #e55); }
|
||
@keyframes compare-mobile-tab-pulse {
|
||
0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--red, #e06c75) 65%, transparent); }
|
||
50% { opacity: .45; transform: scale(.72); box-shadow: 0 0 0 5px color-mix(in srgb, var(--red, #e06c75) 0%, transparent); }
|
||
}
|
||
.compare-grid[data-cols],
|
||
.compare-grid.sequential-layout {
|
||
display: block !important;
|
||
grid-template-columns: none !important;
|
||
flex: 1 1 0;
|
||
min-height: 0;
|
||
padding: 0 8px 6px;
|
||
overflow: hidden;
|
||
}
|
||
.compare-grid > .compare-pane,
|
||
.compare-grid.sequential-layout > .compare-pane {
|
||
display: none;
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 0;
|
||
margin-left: 0 !important;
|
||
box-sizing: border-box;
|
||
}
|
||
.compare-grid > .compare-pane.compare-pane-mobile-active,
|
||
.compare-grid.sequential-layout > .compare-pane.compare-pane-mobile-active {
|
||
display: flex;
|
||
animation: compare-mobile-card-in .16s ease-out;
|
||
}
|
||
.compare-grid.sequential-layout .compare-pane .pane-header {
|
||
clip-path: none;
|
||
padding-left: 10px;
|
||
}
|
||
@keyframes compare-mobile-card-in {
|
||
from { opacity: .55; transform: translateY(2px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
.compare-probe-card { width: min(460px, calc(100% - 16px)); padding: 12px; }
|
||
.compare-probe-list { grid-template-columns: minmax(0, 1fr); }
|
||
.compare-probe-row:not(.fail) .compare-probe-spinner:not(.ok):not(.fail) { transform: translateX(-2px); }
|
||
.compare-probe-detail { flex-wrap: wrap; }
|
||
.compare-probe-detail-message { flex-basis: 100%; }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.compare-mobile-tab.is-streaming .compare-mobile-tab-state,
|
||
.compare-grid > .compare-pane.compare-pane-mobile-active { animation: none; }
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* Mobile tool drawers: leave a visible strip of the workspace above tall
|
||
sheets so they read as draggable drawers rather than full-screen routes.
|
||
Content-sized windows remain shorter; only tall content is capped at 95dvh.
|
||
Keep the theme popup's intentionally shorter 65vh treatment unchanged. */
|
||
@media (max-width: 768px) {
|
||
.modal:not(#theme-modal):not(#styled-confirm-overlay) > .modal-content,
|
||
.modal:not(#theme-modal):not(#styled-confirm-overlay) > .memory-modal-content,
|
||
.modal:not(#theme-modal):not(#styled-confirm-overlay) > .settings-modal-content {
|
||
height: auto !important;
|
||
max-height: 95dvh !important;
|
||
align-self: flex-end;
|
||
margin-bottom: calc(-1 * env(safe-area-inset-bottom, 0px)) !important;
|
||
}
|
||
|
||
/* Tabbed tools need a definite flex height when their active panel changes;
|
||
otherwise the content-sized drawer can collapse and hide the tab strip. */
|
||
#cookbook-modal .modal-content,
|
||
#tasks-modal .tasks-modal-content,
|
||
#memory-modal .memory-modal-content,
|
||
#settings-modal .settings-modal-content,
|
||
#email-lib-modal .modal-content,
|
||
.email-window-modal .modal-content,
|
||
#doclib-modal .doclib-modal-content,
|
||
#library-modal .doclib-modal-content,
|
||
#gallery-modal .gallery-modal-content,
|
||
#research-overlay .research-pane,
|
||
#compare-model-overlay .modal-content,
|
||
#custom-preset-modal .preset-modal-content {
|
||
height: 95dvh !important;
|
||
min-height: 95dvh !important;
|
||
max-height: 95dvh !important;
|
||
}
|
||
|
||
/* Explicit fullscreen states still behave as bottom drawers on phones. */
|
||
#email-lib-modal.email-lib-fullscreen .modal-content,
|
||
#doclib-modal.doclib-fullscreen:not(.modal-right-docked) .doclib-modal-content {
|
||
top: auto !important;
|
||
bottom: 0 !important;
|
||
height: 95dvh !important;
|
||
max-height: 95dvh !important;
|
||
border-radius: 14px 14px 0 0 !important;
|
||
}
|
||
|
||
.cal-modal-container {
|
||
height: auto !important;
|
||
max-height: 95dvh !important;
|
||
}
|
||
|
||
body.doc-view .doc-editor-pane,
|
||
body.notes-view .notes-pane {
|
||
inset: auto 0 0 !important;
|
||
height: 95dvh !important;
|
||
max-height: 95dvh !important;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
/* Shared bulk-selection trigger. Keep every Select/Cancel control on the same
|
||
circle-dot and X language even when a feature rewrites the button label. */
|
||
:is(
|
||
#memory-select-btn,
|
||
#skills-select-btn,
|
||
#notes-select-btn,
|
||
#tasks-select-btn,
|
||
#doclib-chats-select-btn,
|
||
#doclib-arc-select-btn,
|
||
#doclib-research-select-btn,
|
||
#doclib-select-btn,
|
||
#gallery-select-btn,
|
||
#gallery-albums-select-btn,
|
||
#gallery-editor-drafts-select,
|
||
#email-lib-select-btn,
|
||
#archive-select-btn,
|
||
#lib-select-btn,
|
||
#hwfit-cache-select
|
||
) {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
:is(
|
||
#memory-select-btn,
|
||
#skills-select-btn,
|
||
#notes-select-btn,
|
||
#tasks-select-btn,
|
||
#doclib-chats-select-btn,
|
||
#doclib-arc-select-btn,
|
||
#doclib-research-select-btn,
|
||
#doclib-select-btn,
|
||
#gallery-select-btn,
|
||
#gallery-albums-select-btn,
|
||
#gallery-editor-drafts-select,
|
||
#email-lib-select-btn,
|
||
#archive-select-btn,
|
||
#lib-select-btn,
|
||
#hwfit-cache-select
|
||
)::before {
|
||
content: "";
|
||
width: 11px;
|
||
height: 11px;
|
||
margin-right: 3px;
|
||
flex: 0 0 11px;
|
||
background-color: currentColor;
|
||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='11' r='3' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='11' r='3' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
}
|
||
|
||
:is(
|
||
#memory-select-btn,
|
||
#skills-select-btn,
|
||
#notes-select-btn,
|
||
#tasks-select-btn,
|
||
#doclib-chats-select-btn,
|
||
#doclib-arc-select-btn,
|
||
#doclib-research-select-btn,
|
||
#doclib-select-btn,
|
||
#gallery-select-btn,
|
||
#gallery-albums-select-btn,
|
||
#gallery-editor-drafts-select,
|
||
#email-lib-select-btn,
|
||
#archive-select-btn,
|
||
#lib-select-btn,
|
||
#hwfit-cache-select
|
||
).active::before {
|
||
background-color: var(--accent, var(--red));
|
||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
|
||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
:is(#memory-select-btn, #skills-select-btn, #email-lib-select-btn) > .memory-select-btn-icon {
|
||
display: none;
|
||
}
|
||
|
||
/* The Skills toolbar sits a pixel higher than its peers. */
|
||
#skills-select-btn::before {
|
||
transform: translateY(1px);
|
||
}
|
||
|
||
|
||
/* Deep Research History uses the same library surface as Memory, Skills, and
|
||
Tasks: one framed block, compact toolbar, filter chips, bulk selection, and
|
||
cards that expand in place. */
|
||
#research-pane .research-history-card {
|
||
flex: 1 1 0;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
margin: 0;
|
||
padding: 12px;
|
||
}
|
||
#research-pane .research-history-title-row {
|
||
flex: 0 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: 24px;
|
||
}
|
||
#research-pane .research-history-clear-btn svg {
|
||
position: relative;
|
||
top: 2px;
|
||
}
|
||
#research-pane .research-history-title-row h2 {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
position: relative;
|
||
top: -4px;
|
||
margin: 0;
|
||
padding: 0;
|
||
font-size: 14px;
|
||
line-height: 1;
|
||
border: 0;
|
||
letter-spacing: 0;
|
||
}
|
||
#research-pane .research-history-title-row h2 > svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
color: var(--accent, var(--red));
|
||
flex: 0 0 14px;
|
||
}
|
||
#research-pane .research-history-head-count {
|
||
position: relative;
|
||
top: 4px;
|
||
font-size: 0.6em;
|
||
opacity: 0.6;
|
||
font-weight: normal;
|
||
}
|
||
#research-pane .research-history-toolbar {
|
||
flex: 0 0 auto;
|
||
max-height: none;
|
||
overflow: visible;
|
||
}
|
||
#research-pane .research-history-toolbar-row {
|
||
align-items: center;
|
||
min-height: 24px;
|
||
}
|
||
#research-pane .research-history-toolbar-row .memory-sort-select {
|
||
top: -3px;
|
||
width: 92px;
|
||
}
|
||
#research-pane #research-history-select-btn {
|
||
position: relative;
|
||
top: -5px;
|
||
}
|
||
#research-pane #research-history-select-btn svg {
|
||
flex: 0 0 auto;
|
||
margin-right: 3px;
|
||
vertical-align: -2px;
|
||
}
|
||
#research-pane .research-history-search-wrap > svg {
|
||
position: absolute;
|
||
left: 9px;
|
||
z-index: 1;
|
||
width: 12px;
|
||
height: 12px;
|
||
color: var(--accent, var(--red));
|
||
pointer-events: none;
|
||
}
|
||
#research-pane .research-history-search-wrap .memory-search-input {
|
||
height: 30px;
|
||
margin: 0;
|
||
padding-left: 28px;
|
||
}
|
||
#research-pane #research-history-filters {
|
||
flex: 0 0 auto;
|
||
margin: -2px 0 0;
|
||
}
|
||
#research-pane #research-history-bulk {
|
||
flex: 0 0 auto;
|
||
position: relative;
|
||
top: -4px;
|
||
margin: 2px 0 5px;
|
||
}
|
||
#research-pane #research-history-bulk-delete {
|
||
position: relative;
|
||
top: -4px;
|
||
right: 0;
|
||
margin-left: auto;
|
||
}
|
||
#research-pane #research-history-bulk-delete svg {
|
||
width: 11px;
|
||
height: 11px;
|
||
margin-right: 3px;
|
||
vertical-align: -1px;
|
||
}
|
||
#research-pane .research-history-select-cb {
|
||
position: relative;
|
||
top: -4px;
|
||
}
|
||
#research-pane #research-history-bulk-cancel {
|
||
position: relative;
|
||
top: -2px;
|
||
right: 0;
|
||
margin-left: 4px;
|
||
}
|
||
#research-pane #research-past-list {
|
||
position: relative;
|
||
top: -4px;
|
||
flex: 1 1 0 !important;
|
||
min-height: 0 !important;
|
||
overflow-y: auto !important;
|
||
padding: 2px 2px 4px 0;
|
||
gap: 4px;
|
||
}
|
||
#research-pane #research-past-list .research-job-card {
|
||
display: block;
|
||
height: 67px;
|
||
min-height: 67px;
|
||
box-sizing: border-box;
|
||
max-height: none;
|
||
padding: 8px 10px;
|
||
background: color-mix(in srgb, var(--fg) 3%, transparent);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
box-shadow: none;
|
||
}
|
||
#research-pane #research-past-list .research-job-card:hover {
|
||
background: color-mix(in srgb, var(--fg) 5%, transparent);
|
||
border-color: color-mix(in srgb, var(--fg) 16%, transparent);
|
||
transform: none;
|
||
}
|
||
#research-pane #research-past-list .research-job-card.doclib-card-expanded {
|
||
display: flex !important;
|
||
flex: 1 1 auto !important;
|
||
min-height: 0 !important;
|
||
height: 100%;
|
||
max-height: none;
|
||
overflow: hidden;
|
||
}
|
||
#research-pane #research-past-list .research-job-card.research-job-failed:not(.doclib-card-expanded) {
|
||
height: 67px;
|
||
min-height: 67px;
|
||
}
|
||
#research-pane #research-past-list .research-job-header {
|
||
display: flex;
|
||
width: 100%;
|
||
min-width: 0;
|
||
min-height: 18px;
|
||
gap: 6px;
|
||
overflow: visible;
|
||
}
|
||
#research-pane #research-past-list .research-job-query {
|
||
position: static;
|
||
top: auto;
|
||
display: block;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
word-break: normal;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
line-height: 1.2;
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
}
|
||
#research-pane #research-past-list .research-job-header:has(.research-job-title-error) {
|
||
flex-wrap: wrap;
|
||
row-gap: 2px;
|
||
}
|
||
#research-pane #research-past-list .research-job-header:has(.research-job-title-error) .research-job-query {
|
||
order: 1;
|
||
}
|
||
#research-pane #research-past-list .research-job-header:has(.research-job-title-error) .research-job-retry-badge,
|
||
#research-pane #research-past-list .research-job-header:has(.research-job-title-error) .research-job-edit-badge,
|
||
#research-pane #research-past-list .research-job-header:has(.research-job-title-error) .research-job-overflow {
|
||
order: 2;
|
||
}
|
||
#research-pane #research-past-list .research-job-title-error {
|
||
order: 3;
|
||
flex: 0 0 100%;
|
||
max-width: none;
|
||
margin-top: 0;
|
||
text-align: left;
|
||
}
|
||
#research-pane #research-past-list .research-job-report-badge,
|
||
#research-pane #research-past-list .research-job-discuss-badge,
|
||
#research-pane #research-past-list .research-job-overflow {
|
||
flex: 0 0 auto;
|
||
}
|
||
#research-pane #research-past-list .research-job-meta {
|
||
position: relative;
|
||
top: 4px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
margin: 0;
|
||
font-family: inherit;
|
||
font-size: 10px;
|
||
line-height: 1.2;
|
||
opacity: 0.4;
|
||
transform: none;
|
||
}
|
||
#research-pane #research-past-list .research-job-summary-copy {
|
||
transform: translateY(-22px);
|
||
}
|
||
#research-pane #research-past-list .research-job-summary {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
min-height: 35px;
|
||
margin-top: 4px;
|
||
}
|
||
#research-pane #research-past-list .research-job-thumb-frame {
|
||
width: 48px;
|
||
height: 33px;
|
||
flex-basis: 48px;
|
||
border-radius: 3px;
|
||
transform: translateY(-14px);
|
||
}
|
||
#research-pane #research-past-list .research-job-overflow {
|
||
margin-left: 0;
|
||
align-self: flex-start;
|
||
}
|
||
#research-pane #research-past-list .research-job-more {
|
||
width: 22px;
|
||
height: 22px;
|
||
min-height: 22px;
|
||
border: 0;
|
||
background: transparent;
|
||
}
|
||
#research-pane #research-past-list .research-job-more > svg {
|
||
transform: translateY(6px);
|
||
}
|
||
#research-pane #research-past-list .task-status-badge {
|
||
height: 20px;
|
||
min-height: 20px;
|
||
padding: 0 8px;
|
||
gap: 4px;
|
||
}
|
||
#research-pane #research-past-list .research-job-actions .task-status-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
flex: 0 0 auto;
|
||
height: 20px;
|
||
min-height: 20px;
|
||
padding: 0 8px;
|
||
gap: 4px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
background: color-mix(in srgb, var(--fg) 7%, transparent);
|
||
color: color-mix(in srgb, var(--fg) 72%, transparent);
|
||
cursor: pointer;
|
||
}
|
||
#research-pane #research-past-list .research-job-actions .task-status-badge:hover {
|
||
color: var(--fg);
|
||
background: color-mix(in srgb, var(--accent, var(--red)) 12%, transparent);
|
||
border-color: color-mix(in srgb, var(--accent, var(--red)) 40%, var(--border));
|
||
}
|
||
#research-pane #research-past-list .research-job-actions .task-status-badge > svg {
|
||
width: 11px;
|
||
height: 11px;
|
||
flex: 0 0 11px;
|
||
}
|
||
#research-pane #research-past-list .task-status-badge > svg {
|
||
width: 10px;
|
||
height: 10px;
|
||
}
|
||
#research-pane #research-past-list .research-job-report-badge {
|
||
color: var(--cat-color, var(--accent, var(--red)));
|
||
background: color-mix(in srgb, var(--cat-color, var(--accent, var(--red))) 16%, transparent);
|
||
border-color: color-mix(in srgb, var(--cat-color, var(--accent, var(--red))) 38%, transparent);
|
||
}
|
||
#research-pane #research-past-list .research-job-report-badge:hover {
|
||
background: color-mix(in srgb, var(--cat-color, var(--accent, var(--red))) 25%, transparent);
|
||
border-color: color-mix(in srgb, var(--cat-color, var(--accent, var(--red))) 58%, transparent);
|
||
}
|
||
#research-pane #research-past-list .research-job-retry-badge,
|
||
#research-pane #research-past-list .research-job-edit-badge {
|
||
color: color-mix(in srgb, var(--fg) 72%, transparent);
|
||
background: color-mix(in srgb, var(--fg) 7%, transparent);
|
||
border-color: color-mix(in srgb, var(--fg) 18%, transparent);
|
||
}
|
||
#research-pane #research-past-list .research-job-retry-badge:hover,
|
||
#research-pane #research-past-list .research-job-edit-badge:hover {
|
||
color: var(--fg);
|
||
background: color-mix(in srgb, var(--fg) 12%, transparent);
|
||
border-color: color-mix(in srgb, var(--fg) 32%, transparent);
|
||
}
|
||
#research-pane #research-past-list .research-job-discuss-badge {
|
||
color: color-mix(in srgb, var(--fg) 72%, transparent);
|
||
background: color-mix(in srgb, var(--fg) 7%, transparent);
|
||
border-color: color-mix(in srgb, var(--fg) 18%, transparent);
|
||
}
|
||
#research-pane #research-past-list .research-job-discuss-badge:hover {
|
||
color: var(--fg);
|
||
background: color-mix(in srgb, var(--fg) 12%, transparent);
|
||
border-color: color-mix(in srgb, var(--fg) 32%, transparent);
|
||
}
|
||
#research-pane .research-history-card-select {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 20px;
|
||
min-width: 20px;
|
||
min-height: 20px;
|
||
flex: 0 0 auto;
|
||
cursor: pointer;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
#research-pane .research-history-card-select .memory-select-cb {
|
||
margin: 0 1px 0 0;
|
||
}
|
||
#research-pane #research-past-list .research-history-selectable {
|
||
cursor: pointer;
|
||
}
|
||
#research-pane #research-past-list .research-job-result {
|
||
max-height: none;
|
||
overflow: visible;
|
||
}
|
||
#research-pane .research-history-card:has(.doclib-card-expanded) #research-past-list {
|
||
overflow: hidden !important;
|
||
}
|
||
#research-pane #research-past-list:has(.doclib-card-expanded) > .research-job-card:not(.doclib-card-expanded) {
|
||
display: none !important;
|
||
}
|
||
#research-pane #research-past-list .research-job-card.doclib-card-expanded .research-job-result {
|
||
flex: 1 1 auto !important;
|
||
min-height: 0 !important;
|
||
max-height: none !important;
|
||
overflow-y: auto !important;
|
||
overflow-x: hidden !important;
|
||
overscroll-behavior: contain;
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
#research-pane .research-history-card {
|
||
padding: 10px;
|
||
}
|
||
#research-pane .research-history-toolbar-row {
|
||
flex-wrap: nowrap;
|
||
}
|
||
#research-pane .research-history-toolbar-row .memory-sort-select {
|
||
width: 84px;
|
||
}
|
||
#research-pane #research-history-clear {
|
||
padding-left: 5px;
|
||
padding-right: 5px;
|
||
}
|
||
#research-pane #research-past-list .research-job-card {
|
||
min-height: 77px;
|
||
padding-left: 8px;
|
||
padding-right: 8px;
|
||
}
|
||
#research-pane #research-past-list .research-job-card.research-job-failed:not(.doclib-card-expanded) {
|
||
height: 77px;
|
||
min-height: 77px;
|
||
}
|
||
#research-pane #research-past-list .research-job-header {
|
||
gap: 4px;
|
||
}
|
||
#research-pane #research-past-list .research-job-report-badge,
|
||
#research-pane #research-past-list .research-job-discuss-badge {
|
||
width: auto;
|
||
min-width: 0;
|
||
height: 28px;
|
||
min-height: 28px;
|
||
padding-left: 7px;
|
||
padding-right: 7px;
|
||
justify-content: center;
|
||
gap: 4px;
|
||
}
|
||
#research-pane #research-past-list .research-job-report-badge > svg,
|
||
#research-pane #research-past-list .research-job-discuss-badge > svg {
|
||
width: 13px;
|
||
height: 13px;
|
||
flex: 0 0 13px;
|
||
}
|
||
#research-pane #research-past-list .research-job-report-badge .task-state-label,
|
||
#research-pane #research-past-list .research-job-discuss-badge .task-state-label {
|
||
display: inline;
|
||
font-size: 9px;
|
||
line-height: 1;
|
||
}
|
||
#research-pane #research-past-list .research-job-more {
|
||
width: 24px;
|
||
min-width: 24px;
|
||
}
|
||
}
|