/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Fix for pre and code elements to remove extra whitespace */
pre, code {
margin: 0;
padding: 0;
}
pre code {
display: block;
margin: 0;
padding: 0;
}
/* Ensure code blocks don't have extra spacing */
.code-block pre,
.code-block code {
margin: 0;
padding: 0;
}
.code-block pre code {
display: block;
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Segoe UI', sans-serif;
font-size: var(--font-base);
line-height: var(--leading-relaxed);
color: var(--text-primary);
/* Unified canvas: body/sidebar/header/main-content all share --bg-primary
so there are no grey seams or side-strips around white panels. */
background: var(--bg-primary);
min-height: calc(100vh / var(--ui-scale, 1)); /* --ui-scale zoom compensation */
overflow: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Global UI scale — shrink the whole interface ~7% by default (≈93% browser
zoom) for a denser, more readable layout. Single knob: --ui-scale (tokens.css).
The unified body/canvas background means the tiny viewport-unit (vh) shortfall
at the very bottom is the same colour as the content, so it's not visible. */
html {
zoom: var(--ui-scale, 1);
}
/* Desktop (Wails webview) ships a natively-sized window, so the ~7% density zoom
is unwanted there — it left a bottom strip + a sidebar/content overlap because
the webview doesn't compensate the zoom the way a browser tab does. Pin the
scale to 1 in desktop mode (the marker is on so `zoom` and every
`calc(100vh / --ui-scale)` compensation track it). Admin/browser keeps 0.93. */
html.desktop-mode {
--ui-scale: 1;
}
/* Hard-bound the top edges: kill elastic overscroll / scroll-chaining so no
scroll can pull a fixed top container above its border and leave a gap
(owner: the top edge must stop, not bounce). Inner app scrollers contain
their scroll so reaching their top doesn't rubber-band the page. */
html, body {
overscroll-behavior: none;
}
.sidebar-content,
.main-content,
.collections-list,
.api-tester-main,
.response-panel,
[class$="-scroll"],
[class*="-scroll-"] {
overscroll-behavior: contain;
}
/* Dark theme background - static to prevent flash */
.dark {
background: #080d18 !important;
}
/* Light theme background — white to match the unified canvas (no load flash). */
.light {
background: var(--bg-primary) !important;
}
/* Design tokens (colors, typography, spacing, radii, shadows) are defined in
tokens.css from internal/designsystem — loaded via before this file.
DO NOT duplicate token values here. */
/* Global responsive defaults — prevent form controls from overflowing containers */
input, select, textarea {
max-width: 100%;
box-sizing: border-box;
}
/* Dark theme form placeholders */
.dark .form-input::placeholder,
.dark .form-textarea::placeholder {
color: var(--text-muted, #5f6980);
opacity: 0.8;
}
/* Prevent theme transition flashing - disable ALL transitions during theme switch */
body.theme-switching,
body.theme-switching *,
body.theme-switching *::before,
body.theme-switching *::after,
body.theme-switching .nav-link,
body.theme-switching .nav-item,
body.theme-switching .chat-tab,
body.theme-switching .sidebar,
body.theme-switching .header,
body.theme-switching .content-header,
body.theme-switching .panel-header,
body.theme-switching .btn,
body.theme-switching .form-input,
body.theme-switching .form-textarea,
body.theme-switching .form-select {
transition: none !important;
animation: none !important;
}
/* Prevent flashing during page navigation - optimize rendering */
html {
background: #0f1117;
overflow-x: hidden; /* prevent horizontal scroll from off-screen fixed/absolute panels */
}
html.light {
background: #f0f2f5;
}
html.dark {
background: #0f1117;
}
/* Prevent flashing when switching tabs - disable transitions during tab switch */
body.tab-switching,
body.tab-switching *,
body.tab-switching *::before,
body.tab-switching *::after {
transition: none !important;
animation: none !important;
}
/* Optimize tab content rendering to prevent flashing */
.admin-tab-content {
will-change: opacity, visibility;
/* Force GPU acceleration */
transform: translateZ(0);
backface-visibility: hidden;
}
.admin-tab-content.active {
will-change: auto;
}
/* Admin sub-tabs (used inside LLM tab) */
.admin-subtabs {
display: flex;
gap: 0;
border-bottom: 2px solid var(--border-color);
margin-bottom: var(--space-5);
}
.admin-subtab {
padding: 0.625rem var(--space-4);
border: none;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
font-size: var(--font-base);
font-weight: var(--font-weight-medium);
border-bottom: 2px solid transparent;
margin-bottom: -2px;
display: flex;
align-items: center;
gap: var(--space-2);
transition: color 0.2s, border-color 0.2s;
}
.admin-subtab:hover {
color: var(--text-primary);
}
.admin-subtab.active {
color: var(--accent-text);
border-bottom-color: var(--accent-color);
}
/* Toggle switch */
.toggle-switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--border-color);
transition: 0.3s;
border-radius: 24px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
}
.toggle-switch input:checked + .toggle-slider {
background-color: var(--accent-color);
}
.toggle-switch input:checked + .toggle-slider:before {
transform: translateX(20px);
}
/* Header */
.header {
background: var(--bg-primary);
padding: var(--space-2) var(--space-5);
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 280px;
right: 0;
z-index: var(--z-raised);
transition: left var(--transition-slow);
}
.header.sidebar-collapsed {
left: 70px;
}
.header-brand {
display: flex;
align-items: center;
gap: var(--space-2);
}
.header-brand i {
font-size: var(--font-2xl);
color: var(--accent-text);
}
.header-brand h1 {
font-size: var(--font-2xl);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
}
.header-namespace {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
max-width: 320px;
min-width: 0;
}
.header-page-title {
display: none;
}
/* Protocol badges */
.protocol-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
/* Tag-shape canon (U3 badge unification) — was 0.15rem 0.4rem / 0.25rem. */
padding: var(--badge-tag-pad-y) var(--badge-tag-pad-x);
border-radius: var(--badge-tag-radius);
font-size: var(--badge-font);
font-weight: var(--font-weight-semibold);
color: white;
text-transform: uppercase;
letter-spacing: var(--tracking-tight);
white-space: nowrap;
}
.protocol-badge::before {
content: '';
display: inline-block;
width: 0.85em;
height: 0.85em;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
filter: brightness(0) invert(1);
flex-shrink: 0;
}
.protocol-badge-http { background: var(--protocol-http); }
.protocol-badge-grpc { background: var(--protocol-grpc); }
.protocol-badge-mcp { background: var(--protocol-mcp); }
.protocol-badge-soap { background: var(--protocol-soap); }
.protocol-badge-graphql { background: var(--protocol-graphql); }
.protocol-badge-sse { background: var(--protocol-sse); }
.protocol-badge-socket { background: var(--protocol-socket); }
.protocol-badge-kafka { background: var(--protocol-kafka); }
.protocol-badge-rabbitmq { background: var(--protocol-rabbitmq); }
.protocol-badge-smtp { background: var(--protocol-smtp); }
.protocol-badge-s3 { background: var(--protocol-s3, #FF9900); }
.protocol-badge-unknown { background: #666; }
.protocol-badge-kafka::before { background-image: url('/ui/static/img/protocols/kafka.svg'); }
.protocol-badge-rabbitmq::before { background-image: url('/ui/static/img/protocols/rabbitmq.svg'); }
.protocol-badge-graphql::before { background-image: url('/ui/static/img/protocols/graphql.svg'); }
.protocol-badge-grpc::before { background-image: url('/ui/static/img/protocols/grpc.svg'); }
.protocol-badge-http::before { display: none; }
.protocol-badge-soap::before { display: none; }
.protocol-badge-mcp::before { display: none; }
.protocol-badge-sse::before { display: none; }
.protocol-badge-socket::before { display: none; }
.protocol-badge-smtp::before { display: none; }
.protocol-badge-s3::before { display: none; }
.protocol-badge-unknown::before { display: none; }
/* WCAG AA on protocol badges (the base text is white). The bright fills
(blue/cyan/orange/green/pink) are too light for white digits (3.3:1) — give
them dark text instead (auto-contrast, ~5:1+); the dark fills (mcp purple,
socket brown, kafka black, smtp blue) keep the base white. GraphQL's brand
pink is the one mid-tone where neither passes, so its fill is deepened a
notch so white clears AA while staying recognisably GraphQL-pink. */
.protocol-badge-http,
.protocol-badge-grpc,
.protocol-badge-soap,
.protocol-badge-sse,
.protocol-badge-rabbitmq,
.protocol-badge-s3 {
color: #14233a;
}
.protocol-badge-graphql { background: #b30078; }
/* Match the brand-icon colour to the badge's text colour. */
.protocol-badge-grpc::before,
.protocol-badge-rabbitmq::before {
filter: brightness(0); /* dark icon on the light fill */
}
/* Responsive header adjustments */
@media (max-width: 1400px) {
.header-page-title {
margin: 0 var(--space-4);
}
.header-title {
font-size: var(--font-md);
}
.header-subtitle {
font-size: var(--font-xs);
}
}
@media (max-width: 1200px) {
.header {
padding: var(--space-2) var(--space-4);
}
.header-namespace {
flex-shrink: 1;
min-width: 0;
}
.header-namespace label {
display: none;
}
.header-page-title {
margin: 0 var(--space-2);
}
.header-title {
font-size: var(--font-base);
}
.header-title i {
font-size: var(--font-base);
}
.header-subtitle {
font-size: var(--font-xs);
display: none; /* Hide subtitle on smaller screens */
}
.docs-badge span {
display: none; /* Show only icon on smaller screens */
}
.docs-badge {
padding: 0.15rem 0.35rem;
}
}
@media (max-width: 768px) {
.header {
padding: var(--space-2) var(--space-3);
flex-wrap: wrap;
min-height: auto;
}
.header-namespace {
order: 1;
width: 100%;
margin-bottom: var(--space-2);
}
.header-namespace label {
display: inline;
font-size: var(--font-sm);
}
.header-page-title {
order: 2;
width: 100%;
margin: var(--space-1) 0;
justify-content: flex-start;
}
.header-title-content {
text-align: left;
}
.header-title {
font-size: var(--font-sm);
justify-content: flex-start;
}
.header-actions {
order: 3;
width: 100%;
justify-content: flex-end;
margin-top: var(--space-1);
}
/* Adjust main content padding for mobile header height */
.main-content {
padding-top: 7rem; /* Account for taller mobile header */
}
body.license-banner-visible .main-layout .main-content {
padding-top: 8.5rem; /* Account for banner + taller mobile header */
}
}
.header-title-content {
text-align: center;
min-width: 0;
}
.header-title {
font-size: var(--font-lg);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin: 0;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
line-height: 1.2;
}
.header-title i {
color: var(--accent-text);
font-size: var(--font-md);
}
.header-subtitle {
font-size: var(--font-sm);
color: var(--text-secondary);
margin: var(--space-1) 0 0 0;
line-height: 1.2;
}
/* Docs badge in header */
.docs-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 0.15rem var(--space-2);
font-size: var(--badge-font);
font-weight: var(--font-weight-medium);
color: var(--accent-text);
background: rgba(45, 140, 240, 0.08);
border: 1px solid rgba(45, 140, 240, 0.2);
border-radius: var(--radius-xl);
text-decoration: none;
transition: all 0.2s;
white-space: nowrap;
line-height: var(--leading-tight);
vertical-align: middle;
flex-shrink: 0;
}
.docs-badge:hover {
background: rgba(45, 140, 240, 0.15);
border-color: rgba(45, 140, 240, 0.4);
text-decoration: none;
color: var(--accent-text);
}
.docs-badge i {
font-size: var(--badge-font);
}
.dark .docs-badge {
background: rgba(100, 181, 255, 0.1);
border-color: rgba(100, 181, 255, 0.2);
}
.dark .docs-badge:hover {
background: rgba(100, 181, 255, 0.2);
border-color: rgba(100, 181, 255, 0.4);
}
/* Hide docs badges when user setting is off */
body.hide-docs-links .docs-badge,
body.hide-docs-links .content-docs-link {
display: none !important;
}
/* Docs icon inside panel headers */
.panel-docs-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
color: var(--text-muted);
text-decoration: none;
font-size: var(--font-xs);
transition: color var(--transition-fast), background var(--transition-fast);
margin-left: 0.35rem;
vertical-align: middle;
flex-shrink: 0;
}
.panel-docs-icon:hover {
color: var(--accent-text);
background: var(--hover-overlay);
}
body.hide-docs-links .panel-docs-icon {
display: none !important;
}
.namespace-select {
padding: var(--space-2) var(--space-6) var(--space-2) var(--space-4);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
background-color: var(--bg-primary);
color: var(--text-primary);
font-size: var(--font-base);
width: auto;
min-width: 100px;
max-width: 240px;
}
/* Dark theme namespace select */
.dark .namespace-select {
color: var(--text-primary);
background-color: var(--bg-secondary);
}
.dark .namespace-select option {
color: var(--text-primary);
background: var(--bg-primary);
}
/* Also ensure label is visible */
.dark .header-namespace label {
color: var(--text-primary);
}
.header-actions {
display: flex;
gap: var(--space-2);
align-items: center;
}
.header-btn {
padding: var(--space-2);
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-base);
}
.header-btn:hover {
background: var(--hover-overlay);
color: var(--text-primary);
}
/* Desktop freemium account chip — tier + usage counter in the header. */
.freemium-chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-3);
font-size: var(--font-sm);
font-weight: 600;
line-height: 1.4;
}
.freemium-chip .freemium-chip-tier {
color: var(--text-secondary);
white-space: nowrap;
}
.freemium-chip.freemium-chip-anonymous .freemium-chip-tier {
color: var(--accent-text);
}
.freemium-chip .freemium-chip-counter {
padding: 1px var(--space-2);
border-radius: var(--radius-pill);
background: var(--bg-tertiary);
color: var(--text-secondary);
font-size: var(--font-xs);
font-variant-numeric: tabular-nums;
}
.freemium-chip .freemium-chip-counter.is-soft {
background: color-mix(in srgb, var(--warning-color) 18%, transparent);
color: var(--warning-color);
}
.freemium-chip .freemium-chip-counter.is-hard {
background: color-mix(in srgb, var(--danger-color) 18%, transparent);
color: var(--danger-color);
}
.header-select {
padding: var(--space-2) var(--space-6) var(--space-2) var(--space-3);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
background-color: var(--bg-primary);
color: var(--text-primary);
font-size: var(--font-base);
cursor: pointer;
transition: all var(--transition-base);
}
.header-select:hover {
background-color: var(--hover-overlay);
}
.header-select:focus {
outline: none;
border-color: var(--accent-color);
}
/* User menu */
.user-menu {
position: relative;
display: flex;
align-items: center;
}
.user-menu-trigger {
display: inline-flex;
align-items: center;
padding: var(--space-1);
border-radius: var(--radius-md);
}
.user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: var(--bg-secondary);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-avatar-initials {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-sm);
font-weight: var(--font-weight-semibold);
background: var(--accent-color);
color: var(--accent-contrast);
text-transform: uppercase;
}
.user-name {
font-size: var(--font-md);
color: var(--text-primary);
}
.user-role-badge {
background: var(--accent-color);
color: var(--accent-contrast);
padding: var(--badge-pad-y) var(--badge-pad-x);
border-radius: var(--badge-radius);
font-size: var(--badge-font);
font-weight: var(--font-weight-semibold);
}
.user-menu-caret {
font-size: var(--font-xs);
color: var(--text-secondary);
}
.user-menu-dropdown {
position: absolute;
right: 0;
top: 100%;
margin-top: var(--space-1);
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
min-width: 180px;
z-index: var(--z-dropdown);
padding: var(--space-1) 0;
}
.user-menu-item {
width: 100%;
padding: var(--space-2) var(--space-3);
background: transparent;
border: none;
text-align: left;
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-base);
color: var(--text-primary);
cursor: pointer;
}
.user-menu-item:hover {
background: var(--hover-overlay);
}
/* User profile info inside dropdown */
.user-menu-profile-section {
padding: var(--space-3);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
gap: var(--space-2);
}
.user-menu-profile-name {
font-size: var(--font-base);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
}
.user-menu-section {
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--border-color);
}
.user-menu-section-title {
font-size: var(--font-sm);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--text-secondary);
margin-bottom: var(--space-1);
}
.header-auth-guest {
display: flex;
align-items: center;
gap: var(--space-2);
}
/* Main Layout — margin-left set by sidebar.js for dynamic resize */
.main-layout {
margin-left: 280px;
min-height: calc(100vh / var(--ui-scale, 1)); /* --ui-scale zoom compensation */
transition: margin-left var(--transition-slow);
overflow-x: visible;
}
.main-layout.sidebar-collapsed {
margin-left: 70px;
}
.main-content {
flex: 1;
padding: var(--space-3);
padding-top: 4.25rem; /* Account for fixed header */
background: var(--bg-primary);
overflow-x: visible;
overflow-y: auto;
border-radius: 0;
margin-top: 0;
min-height: calc(100vh / var(--ui-scale, 1)); /* --ui-scale zoom compensation */
max-height: calc(100vh / var(--ui-scale, 1)); /* --ui-scale zoom compensation */
}
/* Base .btn + hover/active live in designsystem/components.css (single canon).
Only the colour variants below are page-local. */
.btn-primary {
background: var(--accent-color);
color: var(--accent-contrast);
}
.btn-primary:hover {
background: var(--accent-hover);
}
.btn-secondary {
background: var(--bg-secondary);
color: var(--text-primary);
border: 1px solid var(--border-color);
}
.btn-secondary:hover {
background: var(--bg-tertiary);
}
.btn-outline {
background: transparent;
color: var(--accent-text);
border: 1px solid var(--accent-color);
}
.btn-outline:hover {
background: var(--accent-light);
}
.btn-ghost {
background: transparent;
color: var(--text-secondary);
border: none;
}
.btn-ghost:hover {
background: var(--bg-tertiary);
color: var(--text-primary);
}
.btn-success {
background: var(--success-color);
color: var(--on-bright-fill);
}
.btn-warning {
background: var(--warning-color);
color: var(--on-bright-fill);
}
.btn-warning:hover {
opacity: 0.9;
}
.btn-danger {
/* Fixed deep red so white text clears WCAG AA in both themes (dark-theme
#f87171 was 2.8:1). Mirrors components.css. */
background: #dc2626;
color: white;
}
.btn-info {
background: var(--info-color);
color: var(--on-bright-fill);
}
.btn-info:hover {
opacity: 0.9;
}
.btn-sm {
height: var(--btn-h-sm);
padding: 0 var(--btn-pad-x-sm);
font-size: var(--font-sm);
}
.btn-xs {
height: var(--btn-h-xs);
padding: 0 var(--btn-pad-x-xs);
font-size: var(--font-xs);
gap: var(--space-1);
}
.btn-lg {
height: var(--btn-h-lg);
padding: 0 var(--btn-pad-x-lg);
font-size: var(--font-lg);
}
.btn-md {
height: var(--btn-h-md);
padding: 0 var(--btn-pad-x-md);
font-size: var(--font-md);
}
/* Fix button width to prevent layout shifts on language change */
/* Ensure buttons in action groups don't overflow */
.viewer-actions .btn,
.editor-actions .btn,
.panel-actions .btn {
flex-shrink: 0;
min-width: auto;
}
/* Form Elements */
.form-group {
margin-bottom: var(--space-3);
}
.form-group label {
display: block;
margin-bottom: var(--space-1);
font-weight: var(--font-weight-medium);
font-size: var(--font-sm);
color: var(--text-primary);
letter-spacing: 0.01em;
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--border-color);
border-radius: var(--control-radius);
background-color: var(--bg-primary);
color: var(--text-primary);
font-size: var(--font-md);
height: 36px;
transition: border-color var(--transition-fast);
}
.form-textarea {
height: auto;
}
.form-input-sm {
height: 32px;
padding: var(--space-1) var(--space-2);
font-size: var(--font-sm);
}
/* File inputs: auto height for proper button alignment */
input[type="file"].form-input {
height: auto;
min-height: 36px;
padding: 6px var(--space-3);
display: flex;
align-items: center;
line-height: normal;
}
/* Dropdown arrow for ALL select elements globally — suppress native arrows */
select,
.form-select,
select.form-input {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
/* U1 control-radius: harmonise EVERY select's corners onto the shared
control radius (bare selects were 4px vs the 6px canon). Radius-only —
no box-model shift, so this is safe to apply globally. */
border-radius: var(--control-radius);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235f6980' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 12px;
padding-right: 2.5rem;
cursor: pointer;
}
.dark select,
.dark .form-select,
.dark select.form-input {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 12px;
}
/* Prevent native browser arrows from showing alongside custom ones */
select::-ms-expand {
display: none;
}
/* Hide native input clear button (X) — we use our own clear buttons */
input[type="text"]::-webkit-search-cancel-button,
input[type="text"]::-webkit-clear-button,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input.form-input::-webkit-search-cancel-button,
input.form-input::-webkit-clear-button {
-webkit-appearance: none;
appearance: none;
display: none;
}
/* Placeholder styling */
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--text-muted, var(--text-secondary));
opacity: 1;
}
/* Убедимся, что placeholder не копируется и не редактируется */
.form-input:placeholder-shown,
.form-textarea:placeholder-shown {
color: var(--text-secondary);
}
.form-input:not(:placeholder-shown),
.form-textarea:not(:placeholder-shown) {
color: var(--text-primary);
}
/* Dark theme text visibility - using CSS variables for consistency */
.dark .form-input,
.dark .form-select,
.dark .form-textarea {
color: var(--text-primary);
background-color: var(--bg-secondary);
border-color: var(--border-color);
}
.dark .form-group label {
color: var(--text-primary);
}
/* Info Button for field help tooltips */
.form-label-row {
display: inline-flex;
align-items: baseline;
gap: 0.35rem;
margin-bottom: var(--space-1);
}
.form-label-row label {
margin-bottom: 0;
line-height: var(--leading-tight);
}
.info-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
padding: 0;
border: none;
background: none;
color: var(--text-secondary);
opacity: 0.5;
cursor: help;
font-size: var(--font-xs);
line-height: 1;
border-radius: 50%;
transition: opacity 0.2s, color 0.2s;
flex-shrink: 0;
vertical-align: middle;
/* Shift up slightly to align icon optical center with text cap-height */
position: relative;
top: -0.05em;
}
.info-btn:hover {
opacity: 1;
color: var(--accent-text);
}
.info-btn:focus {
outline: none;
}
/* Tooltip popover (JS-positioned, appended to body — never clipped by overflow) */
.info-tooltip-popover {
position: fixed;
padding: var(--space-2) var(--space-3);
background: var(--bg-primary);
color: var(--text-primary);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
font-size: var(--font-sm);
font-weight: var(--font-weight-normal);
line-height: var(--leading-snug);
white-space: normal;
max-width: 300px;
min-width: 200px;
z-index: var(--z-toast);
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
}
.info-tooltip-popover.visible {
opacity: 1;
}
.dark .info-tooltip-popover {
background: var(--bg-tertiary);
}
.dark .form-group small,
.dark small {
/* Hints muted (not secondary) so they read as clearly subordinate to the
label — matches the canonical .form-group small rule in components.css. */
color: var(--text-muted);
}
.dark .dynamic-field,
.dark .config-section {
color: var(--text-primary);
}
.dark .panel-header h2,
.dark h4,
.dark h3,
.dark h2,
.dark h1 {
color: var(--text-primary);
}
.dark .section-toggle {
color: var(--text-primary);
}
.dark .mock-item h4,
.dark .detail-section h3,
.dark .info-label,
.dark .info-value {
color: var(--text-primary);
}
/* Smooth fade-in for mock list items on SSE updates */
@keyframes mockItemFadeIn {
from {
opacity: 0;
transform: translateY(-3px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.mock-item {
animation: mockItemFadeIn 0.18s ease-out;
}
/* MOCK-1: make the selected mock stand out so its protocol/method/tag badges
no longer blend into the default row background. Token-driven, works in both
themes; box-shadow inset draws a left accent rail without shifting layout. */
.mock-item.active {
background: var(--selected-bg);
box-shadow: inset 3px 0 0 0 var(--selected-border);
border-radius: 0.35rem;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--accent-color);
}
.form-textarea {
resize: vertical;
min-height: 100px;
}
/* Input with clear button */
.input-with-clear {
position: relative;
width: 100%;
}
.input-with-clear > .form-input,
.input-with-clear > .form-textarea {
width: 100%;
padding-right: 2.5rem;
}
/* Hide number input spinner arrows globally */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
.input-clear-btn {
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border-radius: 50%;
border: none;
background: var(--text-secondary, #64748b);
color: var(--bg-primary, #fff);
cursor: pointer;
display: none; /* Hidden by default, shown when input has value */
align-items: center;
justify-content: center;
font-size: var(--font-xs);
padding: 0;
transition: background var(--transition-fast), opacity var(--transition-fast);
z-index: 10;
flex-shrink: 0;
opacity: 0.7;
line-height: 1;
}
/* For number inputs, clear button same position as other inputs (no spinners) */
.input-with-clear:has(input[type="number"]) .input-clear-btn {
right: 0.5rem;
}
.input-clear-btn:hover {
background: #dc2626;
color: white;
opacity: 1;
transform: translateY(-50%) scale(1.1);
}
.input-clear-btn:active {
transform: translateY(-50%) scale(0.95);
}
/* The × glyph: the button content is an