/* ── Root layout: #assistant-tab-root itself is already flex column / overflow:hidden via CRM's .admin-panel--flush rule; #asst-app (our own injected wrapper, replacing scenario-viewer's own #app) just needs to fill it the same way its own header+screens used to fill . ── */ #assistant-tab-root #asst-app { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; background: var(--surface-2); color: var(--text); font-family: var(--font-ui); font-size: 14px; line-height: 1.5; } #assistant-tab-root button { font-family: var(--font-ui); cursor: pointer; } /* ── Assistant top bar (replaces scenario-viewer's own

; reuses CRM's .admin-panel-head chrome). Left: CRM-standard company switcher. Middle: Graph/Table view toggle. Right: new-action/bundles/ new-company. No more breadcrumb — company selection is switcher-only. ── */ #assistant-tab-root .asst-head { flex-wrap: nowrap; } #assistant-tab-root .asst-topbar-left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; } #assistant-tab-root .asst-company-switch { min-width: 0; } #assistant-tab-root .asst-head-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } #assistant-tab-root #asst-graph-stats { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); white-space: nowrap; } /* ── Body: fixed-width left sidebar (company settings) + main area (graph/table/empty) — replaces the old full-screen company-grid / studio-company navigational screens. ── */ #assistant-tab-root #asst-body { display: flex; flex: 1; min-height: 0; overflow: hidden; } #assistant-tab-root #asst-sidebar { position: relative; /* contains #asst-skeleton-sidebar's absolute overlay */ flex: 0 0 320px; width: 320px; overflow-y: auto; border-right: 1px solid var(--border); /* CRM surface tokens, not a fixed palette — was a hardcoded light-only "studio paper/ink" palette that stayed bright in dark mode; now themed the same way as #asst-detail below (--surface on the --surface-2 canvas). */ background: var(--surface); color: var(--text); font-family: "Inter", system-ui, -apple-system, sans-serif; padding: 20px 18px 40px; box-sizing: border-box; } #assistant-tab-root .asst-sidebar-header { margin-bottom: 16px; } #assistant-tab-root .asst-sidebar-title { font-size: 1.1rem; overflow-wrap: break-word; } #assistant-tab-root .asst-sidebar-pause-btn { width: 100%; margin-bottom: 18px; } #assistant-tab-root #asst-main { flex: 1; min-height: 0; display: flex; position: relative; overflow: hidden; } #assistant-tab-root #asst-screen-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 14px; text-align: center; padding: 40px; } /* ── Bundles / Action-editor / new-company overlays (replace the old full-screen navigational "studio" screens — dismissible panels over the tab instead). ── */ #assistant-tab-root .asst-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 250; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 24px; } #assistant-tab-root .asst-overlay-panel { background: var(--surface); color: var(--text); font-family: "Inter", system-ui, -apple-system, sans-serif; width: 100%; max-width: 900px; border-radius: 2px; padding: 28px 28px 44px; box-shadow: 0 12px 40px rgba(0,0,0,.25); box-sizing: border-box; } #assistant-tab-root .asst-overlay-close { margin-bottom: 16px; } #assistant-tab-root .screen-heading { font-size: 20px; font-weight: 600; margin-bottom: 4px; } #assistant-tab-root .screen-sub { font-size: 13px; color: var(--text-faint); font-family: var(--font-mono); margin-bottom: 28px; } /* ── Bundles screen (rendered inside the #asst-bundles-inner overlay panel) ── */ #assistant-tab-root #asst-bundles-inner { max-width: 900px; margin: 0 auto; } #assistant-tab-root .bundle-toolbar { margin-bottom: 20px; } #assistant-tab-root .bundle-table { width: 100%; border-collapse: collapse; font-size: 13px; } #assistant-tab-root .bundle-table th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-strong); color: var(--text-faint); font-weight: 500; } #assistant-tab-root .bundle-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; } #assistant-tab-root .bundle-empty { color: var(--text-faint); font-style: italic; padding: 20px 10px !important; } #assistant-tab-root .bundle-form { display: flex; flex-direction: column; gap: 6px; } #assistant-tab-root .bundle-form-lbl { font-size: 12px; color: var(--text-faint); margin-top: 10px; } #assistant-tab-root .bundle-form-lbl--sub { margin-top: 6px; } #assistant-tab-root .bundle-form-input, #assistant-tab-root .bundle-form-textarea { padding: 8px 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; width: 100%; box-sizing: border-box; } #assistant-tab-root .bundle-form-textarea { font-family: var(--font-mono); font-size: 12px; resize: vertical; } #assistant-tab-root .bundle-form-err { color: #b91c1c; font-size: 12px; margin-top: 2px; } #assistant-tab-root .bundle-form button.studio-btn { align-self: flex-start; margin-top: 14px; } #assistant-tab-root .bundle-required { color: #b91c1c; } /* ── Bundle row actions (table) — compact icon-sized buttons, mirrors .adb-icon-btn's sizing/color convention from the Actions-DB table so "▶ Применить"/✎/✕ sit inline in one line without exploding row height (previously misused .asst-tb-btn, a fixed 30×30 icon-only square meant for the graph toolbar — long text inside it wrapped onto multiple lines). ── */ #assistant-tab-root .bundle-row-actions { display: flex; align-items: center; gap: 6px; white-space: nowrap; } #assistant-tab-root .bundle-apply-btn { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; height: 24px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface); color: var(--text); font-size: 12px; line-height: 1; cursor: pointer; flex: none; } #assistant-tab-root .bundle-apply-btn:hover { background: var(--surface-2); border-color: var(--border-strong); } #assistant-tab-root .bundle-icon-btn { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface); color: var(--text); font-size: 13px; line-height: 1; padding: 0; cursor: pointer; flex: none; } #assistant-tab-root .bundle-icon-btn:hover { background: var(--surface-2); border-color: var(--border-strong); } #assistant-tab-root .bundle-icon-btn--del { color: #dc2626; } #assistant-tab-root .bundle-icon-btn--del:hover { background: #fee2e2; border-color: #fca5a5; } /* "+ Создать бандл" — reuses the sidebar's already-correct .studio-btn--primary (single-line, inline-block, padding 10px 20px) instead of .asst-tb-btn, whose fixed 30×30 icon-square box wrapped the button's text onto two lines. */ #assistant-tab-root .bundle-toolbar .studio-btn { white-space: nowrap; } #assistant-tab-root .bundle-apply-params { display: flex; flex-direction: column; } #assistant-tab-root .bundle-apply-success { font-size: 13px; color: var(--text); margin-top: 12px; margin-bottom: 6px; } #assistant-tab-root .bundle-apply-list { list-style: none; padding: 0; margin: 0; font-size: 12px; } #assistant-tab-root .bundle-apply-list li { padding: 4px 0; border-bottom: 1px solid var(--border); } #assistant-tab-root .bundle-apply-type { color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; } /* ── Graph screen ────────────────────────────────────────────── */ #assistant-tab-root #asst-screen-graph { flex: 1; display: flex; overflow: hidden; } #assistant-tab-root #asst-graph-wrap { flex: 1; min-width: 0; /* cytoscape's canvas has an explicit pixel width from its last resize; without this a flex item won't shrink below that intrinsic content width, so opening #asst-detail (a 360px flex sibling) pushed it off-screen to the right instead of the graph shrinking to make room. */ position: relative; background: var(--surface-2); } #assistant-tab-root #asst-cy { width: 100%; height: 100%; } /* Toolbar */ #assistant-tab-root #asst-toolbar { position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; gap: 2px; z-index: 10; } #assistant-tab-root .asst-tb-btn { width: 30px; height: 30px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 15px; display: flex; align-items: center; justify-content: center; transition: background .1s, border-color .1s; line-height: 1; } #assistant-tab-root .asst-tb-btn:hover { background: #f0f0f0; border-color: var(--border-strong); } #assistant-tab-root .asst-tb-sep { height: 6px; } /* Search */ #assistant-tab-root #asst-search-box { position: absolute; top: 14px; left: 60px; display: flex; align-items: center; z-index: 10; } #assistant-tab-root #asst-search-input { width: 240px; height: 30px; background: var(--surface); border: 1px solid var(--border); padding: 0 28px 0 10px; font-family: var(--font-mono); font-size: 12px; color: var(--text); outline: none; transition: border-color .12s; } #assistant-tab-root #asst-search-input:focus { border-color: var(--border-strong); } #assistant-tab-root #asst-search-input::placeholder { color: var(--text-faint); } #assistant-tab-root #asst-search-clear { position: absolute; right: 8px; cursor: pointer; color: var(--text-faint); font-size: 16px; line-height: 1; } #assistant-tab-root #asst-search-clear:hover { color: var(--text); } /* Legend */ #assistant-tab-root #asst-legend { position: absolute; bottom: 14px; left: 14px; background: var(--surface); border: 1px solid var(--border); padding: 10px 12px; z-index: 10; max-height: 60vh; overflow-y: auto; } #assistant-tab-root .legend-title { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-bottom: 8px; } #assistant-tab-root .legend-row { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-bottom: 5px; cursor: pointer; user-select: none; } #assistant-tab-root .legend-row:hover { color: var(--text); } #assistant-tab-root .legend-dot { width: 8px; height: 8px; flex-shrink: 0; } /* Detail panel */ #assistant-tab-root #asst-detail { width: 360px; flex-shrink: 0; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; } #assistant-tab-root #asst-detail-head { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-shrink: 0; } #assistant-tab-root #asst-d-type-badge { font-family: var(--font-mono); font-size: 10px; padding: 2px 7px; border: 1px solid currentColor; text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0; } #assistant-tab-root #asst-d-title { font-size: 13px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #assistant-tab-root #asst-d-close { background: none; border: none; font-size: 20px; color: var(--text-faint); line-height: 1; padding: 0; flex-shrink: 0; } #assistant-tab-root #asst-d-close:hover { color: var(--text); } #assistant-tab-root #asst-detail-scroll { flex: 1; overflow-y: auto; } #assistant-tab-root .d-section { padding: 14px 16px; border-bottom: 1px solid var(--border); } #assistant-tab-root .d-section-title { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); margin-bottom: 10px; } #assistant-tab-root .d-row { display: flex; gap: 10px; margin-bottom: 7px; font-size: 13px; align-items: baseline; } #assistant-tab-root .d-lbl { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); min-width: 60px; flex-shrink: 0; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; } #assistant-tab-root .asst-mono { font-family: var(--font-mono); font-size: 12px; } #assistant-tab-root #asst-d-params { font-family: var(--font-mono); font-size: 11px; line-height: 1.65; color: var(--text); white-space: pre-wrap; word-break: break-all; background: var(--surface-2); border: 1px solid var(--border); padding: 10px; max-height: 380px; overflow-y: auto; } #assistant-tab-root .d-edge-item { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; } #assistant-tab-root .d-edge-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); background: var(--surface-2); border: 1px solid var(--border); padding: 1px 5px; flex-shrink: 0; } #assistant-tab-root .d-edge-target { color: var(--text); cursor: pointer; font-family: var(--font-mono); font-size: 11px; } #assistant-tab-root .d-edge-target:hover { text-decoration: underline; } #assistant-tab-root .d-edge-arrow { color: var(--text-faint); font-size: 11px; flex-shrink: 0; } /* ── Utilities ───────────────────────────────────────────────── */ #assistant-tab-root .hidden { display: none !important; } /* ── Loading skeleton (sidebar + main) ─────────────────────────── Replaces the old blocking spinner+text overlay (#asst-loading, was `position:fixed`, then `position:absolute` covering #asst-sidebar+#asst-main via inset:0 with a spinner + "Загрузка…" text) — shown during company switch / initial actions load (see showLoading()/hideLoading() in assistant.js). Two separate overlays (one per container, so each is shaped like what it covers) instead of one overlay for both areas. */ #assistant-tab-root .asst-skeleton-wrap { position: absolute; inset: 0; z-index: 40; background: var(--surface); overflow: hidden; padding: 20px 18px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; } #assistant-tab-root #asst-skeleton-main { background: var(--surface-2); } #assistant-tab-root .asst-skeleton-line, #assistant-tab-root .asst-skeleton-field, #assistant-tab-root .asst-skeleton-textarea, #assistant-tab-root .asst-skeleton-btn, #assistant-tab-root .asst-skeleton-block { background: var(--surface-3); border-radius: var(--radius-s); animation: asst-skeleton-pulse 1.4s ease-in-out infinite; } #assistant-tab-root .asst-skeleton-line { height: 12px; width: 100%; } #assistant-tab-root .asst-skeleton-line--title { height: 18px; width: 55%; } #assistant-tab-root .asst-skeleton-line--short { width: 40%; } #assistant-tab-root .asst-skeleton-field { height: 34px; } #assistant-tab-root .asst-skeleton-textarea { height: 90px; } #assistant-tab-root .asst-skeleton-btn { height: 32px; width: 140px; } #assistant-tab-root .asst-skeleton-main-row { display: flex; gap: 16px; flex: 1; min-height: 0; } @keyframes asst-skeleton-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } /* ── Scrollbar ─────────────────────────────────────────────────── :not(.cs-panel) — .cs-panel — company-switch dropdown, CRM.buildCompanySwitch() в app.crm.js — общий компонент, используется и на других вкладках (Аналитика, Файлы, Люди, Настройки), там он НЕ получает этот webkit-скроллбар и остаётся на нативном OS-скролле (на macOS — auto-hide overlay, видим только во время скролла). Определение ::-webkit-scrollbar-thumb здесь заставляет Chrome рендерить "классический", всегда видимый скроллбар — без исключения именно .cs-panel внутри вкладки «Ассистент» получал(а) сплошную серую полосу-thumb снизу/сбоку панели, которой не видно на других вкладках с тем же .cs-panel (баг-репорт: «какая-то полоса серая в самом низу» открытого свитча компаний). */ #assistant-tab-root *:not(.cs-panel)::-webkit-scrollbar { width: 5px; } #assistant-tab-root *:not(.cs-panel)::-webkit-scrollbar-track { background: transparent; } #assistant-tab-root *:not(.cs-panel)::-webkit-scrollbar-thumb { background: var(--border-strong); } /* ── Context menu ────────────────────────────────────────────── */ #assistant-tab-root #asst-ctx-menu { position: fixed; z-index: 300; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 4px 16px rgba(0,0,0,.12); min-width: 140px; padding: 4px 0; } #assistant-tab-root .ctx-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 13px; cursor: pointer; user-select: none; transition: background .08s; } #assistant-tab-root .ctx-item:hover { background: var(--surface-2); } #assistant-tab-root .ctx-icon { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); width: 16px; text-align: center; flex-shrink: 0; } /* ── Modal ───────────────────────────────────────────────────── */ #assistant-tab-root #asst-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 400; display: flex; align-items: center; justify-content: center; } #assistant-tab-root #asst-modal { background: var(--surface); border: 1px solid var(--border); width: 680px; max-width: 92vw; max-height: 82vh; display: flex; flex-direction: column; box-shadow: 0 8px 40px rgba(0,0,0,.18); } #assistant-tab-root #asst-modal-head { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } #assistant-tab-root #asst-modal-title { font-size: 13px; font-weight: 600; font-family: var(--font-mono); display: flex; align-items: center; gap: 10px; } #assistant-tab-root .modal-type-badge { font-size: 10px; padding: 2px 7px; border: 1px solid currentColor; text-transform: uppercase; letter-spacing: .05em; } #assistant-tab-root #asst-modal-copy { background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--text-dim); cursor: pointer; font-size: 16px; padding: 2px 7px; margin-right: 6px; transition: color .15s, border-color .15s; } #assistant-tab-root #asst-modal-copy:hover { color: var(--accent); border-color: var(--accent); } #assistant-tab-root #asst-modal-close { background: none; border: none; font-size: 22px; color: var(--text-faint); line-height: 1; cursor: pointer; padding: 0; } #assistant-tab-root #asst-modal-close:hover { color: var(--text); } #assistant-tab-root #asst-modal-body { flex: 1; overflow-y: auto; padding: 18px; } /* ── JSON Tree ───────────────────────────────────────────────── */ #assistant-tab-root .jtree { font-family: var(--font-mono); font-size: 12px; line-height: 1.7; } #assistant-tab-root .jtree-node { padding-left: 20px; } #assistant-tab-root .jtree-row { display: flex; align-items: baseline; gap: 4px; cursor: default; } #assistant-tab-root .jtree-toggle { width: 14px; flex-shrink: 0; cursor: pointer; color: var(--text-faint); user-select: none; font-size: 10px; text-align: center; } #assistant-tab-root .jtree-toggle:hover { color: var(--text); } #assistant-tab-root .jtree-key { color: #1e40af; } #assistant-tab-root .jtree-colon { color: var(--text-faint); margin-right: 4px; } #assistant-tab-root .jtree-str { color: #15803d; } #assistant-tab-root .jtree-num { color: #b45309; } #assistant-tab-root .jtree-bool { color: #7c3aed; } #assistant-tab-root .jtree-null { color: var(--text-faint); font-style: italic; } #assistant-tab-root .jtree-brace { color: var(--text-faint); } #assistant-tab-root .jtree-count { color: var(--text-faint); font-size: 10px; margin-left: 4px; } #assistant-tab-root .jtree-children.collapsed { display: none; } /* ── Schema view ─────────────────────────────────────────────── */ #assistant-tab-root .schema-wrap { display: flex; flex-direction: column; gap: 6px; } #assistant-tab-root .schema-desc { font-size: 13px; color: var(--text-dim); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } #assistant-tab-root .schema-field { border: 1px solid var(--border); padding: 10px 13px; display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; align-items: start; } #assistant-tab-root .schema-field-name { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: #1e40af; word-break: break-all; } #assistant-tab-root .schema-field-type { font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border: 1px solid var(--border-strong); color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; display: inline-block; margin-top: 2px; width: fit-content; } #assistant-tab-root .schema-field-desc { font-size: 12px; color: var(--text-dim); line-height: 1.5; grid-column: 2; } #assistant-tab-root .schema-field-sub { grid-column: 1 / -1; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); padding-left: 12px; } #assistant-tab-root .schema-sub-title { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-bottom: 6px; } #assistant-tab-root .schema-sub-field { display: grid; grid-template-columns: 150px 70px 1fr; gap: 4px 10px; padding: 4px 0; border-top: 1px solid var(--border); font-size: 12px; align-items: baseline; } #assistant-tab-root .schema-sub-field:first-child { border-top: none; } #assistant-tab-root .schema-sub-name { font-family: var(--font-mono); font-size: 11px; color: #0369a1; } #assistant-tab-root .schema-sub-type { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); } #assistant-tab-root .schema-sub-desc { color: var(--text-dim); } /* ── Badge layer ─────────────────────────────────────────────── */ #assistant-tab-root #asst-badge-layer { position: absolute; inset: 0; pointer-events: none; z-index: 8; } #assistant-tab-root .node-badge { position: absolute; transform: translate(-50%, -50%); min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: all; z-index: 9; line-height: 1; user-select: none; transition: transform .1s, box-shadow .1s; box-shadow: 0 1px 4px rgba(0,0,0,.22); border: 2px solid #ffffff; } #assistant-tab-root .node-badge:hover { transform: translate(-50%, -50%) scale(1.2); box-shadow: 0 2px 6px rgba(0,0,0,.25); } #assistant-tab-root .expand-badge { background: #111111; color: #ffffff; } #assistant-tab-root .collapse-badge { background: #6b7280; color: #ffffff; } #assistant-tab-root .zero-badge { background: #e5e7eb; color: #9ca3af; cursor: default; pointer-events: none; } /* out-badge sits on right edge, in-badge on left */ #assistant-tab-root .out-badge { } #assistant-tab-root .in-badge { } /* ── Snap guides overlay ─────────────────────────────────────── */ #assistant-tab-root #asst-snap-guides { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 7; overflow: visible; } #assistant-tab-root .snap-guide-h, #assistant-tab-root .snap-guide-v { stroke: #3b82f6; stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.7; } #assistant-tab-root .snap-dot { fill: #3b82f6; opacity: 0.85; } /* ── Context menu separator & submenu ───────────────────────── */ #assistant-tab-root .ctx-sep { height: 1px; background: var(--border); margin: 4px 0; } #assistant-tab-root .ctx-item--has-sub { position: relative; } #assistant-tab-root .ctx-item--has-sub .ctx-arrow { margin-left: auto; font-size: 10px; color: var(--text-faint); padding-left: 8px; } #assistant-tab-root .ctx-submenu { display: none; position: absolute; top: -4px; left: 100%; min-width: 180px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: 4px 0; z-index: 301; } #assistant-tab-root .ctx-item--has-sub:hover > .ctx-submenu { display: block; } /* flip submenu to the left if near right edge — handled via JS class */ #assistant-tab-root .ctx-submenu.flip-left { left: auto; right: 100%; } #assistant-tab-root .asst-hdr-btn { background: none; border: 1px solid var(--border-strong); border-radius: var(--radius-s); color: var(--text-dim); font-size: 13px; height: 28px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .1s, border-color .1s, color .1s; flex-shrink: 0; } #assistant-tab-root .asst-hdr-btn:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); } /* ── Disabled toolbar button ─────────────────────────────────── */ #assistant-tab-root .asst-tb-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; } /* ══════════════════════════════════════════════════════════════ VIEW TABS (Graph / Table toggle in header) ══════════════════════════════════════════════════════════════ */ #assistant-tab-root #asst-view-tabs { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 2px; } #assistant-tab-root .asst-view-tab { padding: 3px 12px; font-size: 12px; font-family: var(--font-ui); background: transparent; border: none; border-radius: 3px; color: var(--text-dim); cursor: pointer; font-weight: 500; transition: background 0.1s, color 0.1s; } #assistant-tab-root .asst-view-tab:hover { background: var(--border); color: var(--text); } #assistant-tab-root .asst-view-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); } /* ══════════════════════════════════════════════════════════════ ACTIONS DB SCREEN ══════════════════════════════════════════════════════════════ */ #assistant-tab-root #asst-screen-actions-db { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; } /* ── Toolbar ── */ #assistant-tab-root #asst-adb-toolbar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; flex-wrap: wrap; min-height: 40px; } #assistant-tab-root .adb-toolbar-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } #assistant-tab-root .adb-toolbar-sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; flex-shrink: 0; } #assistant-tab-root .adb-label { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } #assistant-tab-root .adb-select { font-size: 12px; font-family: var(--font-ui); padding: 2px 6px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; outline: none; } #assistant-tab-root .adb-select:focus { border-color: var(--border-strong); } #assistant-tab-root .adb-type-btn { padding: 2px 7px; font-size: 10px; font-family: var(--font-mono); font-weight: 600; border: 1px solid var(--tc, #999); color: var(--tc, #999); background: transparent; border-radius: 3px; cursor: pointer; transition: background 0.1s, color 0.1s; white-space: nowrap; } #assistant-tab-root .adb-type-btn:hover { opacity: 0.8; } #assistant-tab-root .adb-type-btn.active { background: var(--tc, #999); color: #fff; } #assistant-tab-root .adb-search { font-size: 12px; font-family: var(--font-mono); padding: 3px 8px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 3px; outline: none; width: 240px; } #assistant-tab-root .adb-search:focus { border-color: var(--border-strong); } #assistant-tab-root .adb-count { font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); white-space: nowrap; } #assistant-tab-root .adb-broken-btn { display: flex; align-items: center; gap: 4px; padding: 3px 10px; font-size: 12px; font-family: var(--font-mono); border: 1px solid #f59e0b; border-radius: 5px; background: transparent; color: #f59e0b; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s; margin-right: 8px; } #assistant-tab-root .adb-broken-btn:hover { background: rgba(245,158,11,0.12); } #assistant-tab-root .adb-broken-btn.active { background: #f59e0b; color: #1a1e24; font-weight: 600; } #assistant-tab-root .adb-broken-btn:disabled { opacity: 0.35; cursor: default; } #assistant-tab-root .adb-save-all-btn { font-size: 12px; padding: 4px 12px; background: #f59e0b; color: #fff; border: none; border-radius: 3px; cursor: pointer; font-weight: 600; white-space: nowrap; } #assistant-tab-root .adb-save-all-btn:hover { background: #d97706; } #assistant-tab-root .adb-save-all-btn:disabled { opacity: 0.5; cursor: default; } #assistant-tab-root .adb-new-btn { font-size: 12px; padding: 4px 12px; background: #3b82f6; color: #fff; border: none; border-radius: 3px; cursor: pointer; font-weight: 600; white-space: nowrap; } #assistant-tab-root .adb-new-btn:hover { background: #2563eb; } /* IDEA-style + / − icon buttons */ #assistant-tab-root .adb-icon-btn { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; border: 1px solid var(--border); background: var(--surface-3); color: var(--text); border-radius: 3px; cursor: pointer; padding: 0; font-weight: 400; transition: background 0.1s; } #assistant-tab-root .adb-icon-btn:hover:not(:disabled) { background: var(--border); } #assistant-tab-root .adb-icon-btn:disabled { opacity: 0.35; cursor: default; } #assistant-tab-root .adb-icon-btn--del { color: #dc2626; } #assistant-tab-root .adb-icon-btn--del:hover:not(:disabled) { background: #fee2e2; border-color: #fca5a5; } #assistant-tab-root .adb-icon-btn--save { color: #16a34a; font-weight: 700; min-width: 22px; width: auto; padding: 0 6px; } #assistant-tab-root .adb-icon-btn--save:hover:not(:disabled) { background: #dcfce7; border-color: #86efac; } #assistant-tab-root .adb-icon-btn--copy { color: #7c3aed; } #assistant-tab-root .adb-icon-btn--copy:hover:not(:disabled) { background: #ede9fe; border-color: #c4b5fd; } /* Column drag & drop */ #assistant-tab-root .adb-th-drag-handle { display: inline-block; opacity: 0.3; margin-right: 4px; cursor: grab; font-size: 12px; vertical-align: middle; } #assistant-tab-root .adb-hrow th:hover .adb-th-drag-handle { opacity: 0.7; } #assistant-tab-root .adb-th--dragging { opacity: 0.4; } #assistant-tab-root .adb-th--drag-over { border-left: 2px solid #3b82f6 !important; background: rgba(59,130,246,.08) !important; } #assistant-tab-root .adb-icon-sep { width: 1px; height: 16px; background: var(--border-strong); margin: 0 2px; } /* selected row */ #assistant-tab-root .adb-row--selected td { background: #dbeafe !important; } #assistant-tab-root .adb-create-form { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; padding-right: 4px; } #assistant-tab-root .adb-create-row { display: flex; flex-direction: column; gap: 3px; } #assistant-tab-root .adb-create-label { font-size: 11px; font-weight: 600; color: var(--text-dim); font-family: var(--font-ui); } /* ── Table wrap ── */ #assistant-tab-root #asst-adb-table-wrap { flex: 1; overflow: auto; min-height: 0; } #assistant-tab-root #asst-adb-table { border-collapse: collapse; font-size: 12px; font-family: var(--font-mono); white-space: nowrap; width: max-content; min-width: 100%; } /* ── Header row ── */ #assistant-tab-root .adb-hrow th { position: sticky; top: 0; background: var(--surface-2); border-bottom: 2px solid var(--border-strong); border-right: 1px solid var(--border-strong); padding: 5px 8px; text-align: left; font-size: 11px; font-weight: 600; color: var(--text); cursor: pointer; user-select: none; white-space: nowrap; z-index: 2; } #assistant-tab-root .adb-hrow th:hover { background: var(--border); color: var(--text); } #assistant-tab-root .adb-th-act { cursor: default !important; position: sticky; right: 0; z-index: 3; background: var(--surface-2); border-left: 1px solid var(--border-strong); } #assistant-tab-root .adb-th-label { } #assistant-tab-root .adb-sort-arrow { color: var(--text); font-size: 10px; } /* ── Filter row ── */ #assistant-tab-root .adb-frow td { position: sticky; top: 27px; background: var(--surface-2); border-bottom: 2px solid var(--border-strong); border-right: 1px solid var(--border-strong); padding: 2px 4px; z-index: 2; } #assistant-tab-root .adb-frow-act { right: 0; z-index: 3 !important; border-left: 1px solid var(--border-strong); width: 52px; min-width: 52px; } #assistant-tab-root .adb-filter-input { width: 100%; box-sizing: border-box; font-size: 11px; font-family: var(--font-mono); padding: 1px 4px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 2px; outline: none; } #assistant-tab-root .adb-filter-input:focus { border-color: #3b82f6; } /* ── Body rows ── */ #assistant-tab-root .adb-row { border-bottom: 1px solid var(--border-strong); user-select: none; /* prevent text selection on shift+click */ } #assistant-tab-root .adb-row .adb-cell { user-select: text; } /* but allow copying cell text */ #assistant-tab-root .adb-row:hover td { background: rgba(59,130,246,.07) !important; } #assistant-tab-root .adb-row:hover .adb-cell { background: rgba(59,130,246,.07) !important; } #assistant-tab-root .adb-row--dirty .adb-cell:first-child { box-shadow: inset 3px 0 0 #f59e0b; } #assistant-tab-root .adb-row--dirty { background: rgba(245,158,11,.03); } #assistant-tab-root .adb-row--saving { opacity: 0.5; } #assistant-tab-root .adb-row--broken .adb-cell:first-child { box-shadow: inset 3px 0 0 #ef4444; } #assistant-tab-root .adb-row--broken { background: rgba(239,68,68,.04); } /* new (unsaved) row — green like IDEA */ #assistant-tab-root .adb-new-row td, #assistant-tab-root .adb-new-row .adb-cell { background: #f0fdf4 !important; } #assistant-tab-root .adb-new-row .adb-cell:first-child { box-shadow: inset 3px 0 0 #22c55e; } #assistant-tab-root .adb-cell { padding: 3px 8px; border-right: 1px solid var(--border-strong); vertical-align: middle; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; color: var(--text); background: var(--surface); } #assistant-tab-root .adb-cell:not(.adb-cell-act):not([data-ro="true"]) { cursor: text; } #assistant-tab-root .adb-cell[data-ro="true"] { background: var(--surface-2); color: var(--text-dim); } #assistant-tab-root .adb-cell-act { padding: 2px 4px; white-space: nowrap; width: 52px; min-width: 52px; position: sticky; right: 0; background: var(--surface); border-left: 1px solid var(--border-strong); z-index: 1; } /* dirty row — act cell gets amber accent too */ #assistant-tab-root .adb-row--dirty .adb-cell-act { background: var(--surface); border-left: 1px solid var(--border-strong); } /* ── Cell content types ── */ #assistant-tab-root .adb-null { color: var(--text-faint); font-style: italic; font-size: 11px; } #assistant-tab-root .adb-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } #assistant-tab-root .adb-num { color: var(--text); } /* ── Callback jump link ── */ #assistant-tab-root .adb-cb-link { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #60a5fa; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px; transition: text-decoration-color 0.15s, color 0.15s; } #assistant-tab-root .adb-cb-link:hover { color: #93c5fd; text-decoration-color: #93c5fd; } #assistant-tab-root .adb-cb-link--broken { color: #ef4444 !important; text-decoration-color: rgba(239,68,68,.5) !important; cursor: pointer; } #assistant-tab-root .adb-cb-link--broken:hover { color: #f87171 !important; } /* ── Callback combobox dropdown ── */ #assistant-tab-root .adb-cb-dropdown { position: fixed; z-index: 9999; background: var(--surface, #fff); border: 1px solid var(--border-md, #cbd5e1); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); max-height: 260px; overflow-y: auto; font-size: 12px; } #assistant-tab-root .adb-cb-dropdown-item { padding: 5px 10px; cursor: pointer; color: var(--text, #1e293b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #assistant-tab-root .adb-cb-dropdown-item strong { color: #f59e0b; font-weight: 700; } #assistant-tab-root .adb-cb-dropdown-item:hover, #assistant-tab-root .adb-cb-dropdown-item--active { background: var(--accent-dim, #dbeafe); color: var(--text, #1e293b); } #assistant-tab-root .adb-cb-dropdown-empty { padding: 8px 10px; color: var(--text-2, #94a3b8); font-style: italic; } /* ── Instant broken-row tooltip ── */ #assistant-tab-root .adb-rt { position: absolute; z-index: 9999; background: #1e1e2e; border: 1px solid #ef4444; border-radius: 6px; padding: 7px 11px; pointer-events: none; max-width: 480px; box-shadow: 0 4px 16px rgba(0,0,0,.4); } #assistant-tab-root .adb-rt.hidden { display: none; } #assistant-tab-root .adb-rt-line { font-size: 12px; font-family: var(--font-mono); color: #fca5a5; line-height: 1.6; white-space: pre-wrap; word-break: break-all; } #assistant-tab-root .adb-rt-line + .adb-rt-line { margin-top: 2px; } /* ── Row flash highlight ── */ @keyframes adb-flash { 0% { box-shadow: inset 0 0 0 9999px rgba(250, 204, 21, 0.55); } 55% { box-shadow: inset 0 0 0 9999px rgba(250, 204, 21, 0.55); } 100% { box-shadow: inset 0 0 0 9999px rgba(250, 204, 21, 0); } } #assistant-tab-root .adb-row--flash td { animation: adb-flash 1.8s ease-out forwards !important; } #assistant-tab-root .adb-date { color: var(--text-dim); font-size: 11px; } #assistant-tab-root .adb-type-badge { display: inline-block; padding: 1px 6px; border: 1px solid var(--tc, #999); color: var(--tc, #999); font-size: 10px; font-family: var(--font-mono); border-radius: 2px; font-weight: 600; white-space: nowrap; } #assistant-tab-root .adb-json-wrap { display: flex; align-items: center; gap: 5px; overflow: hidden; } #assistant-tab-root .adb-json-fmt { display: none; flex-shrink: 0; padding: 1px 5px; font-size: 10px; font-family: var(--font-mono); border: 1px solid var(--border-strong); border-radius: 3px; background: transparent; color: var(--text-dim); cursor: pointer; line-height: 1.4; } #assistant-tab-root .adb-json-fmt:hover { background: var(--surface2); color: var(--text); } #assistant-tab-root .adb-cell:hover .adb-json-fmt { display: inline-block; } #assistant-tab-root .adb-json-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } #assistant-tab-root .adb-json-dot.valid { background: #16a34a; } #assistant-tab-root .adb-json-dot.invalid { background: #dc2626; } #assistant-tab-root .adb-json-dot.warning { background: #f59e0b; } #assistant-tab-root .adb-json-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); font-size: 11px; } #assistant-tab-root .adb-bool-wrap { display: flex; justify-content: center; } #assistant-tab-root .adb-bool { width: 14px; height: 14px; cursor: pointer; } /* ── Inline edit ── */ #assistant-tab-root .adb-edit-input, #assistant-tab-root .adb-edit-select { width: 100%; box-sizing: border-box; font-size: 12px; font-family: var(--font-mono); padding: 1px 4px; background: var(--surface); color: var(--text); border: 1.5px solid #3b82f6; border-radius: 2px; outline: none; } /* ── Row action buttons ── */ #assistant-tab-root .adb-save-btn, #assistant-tab-root .adb-discard-btn { font-size: 11px; padding: 1px 5px; border-radius: 3px; border: 1px solid; cursor: pointer; font-family: var(--font-mono); margin-right: 2px; } #assistant-tab-root .adb-save-btn { background: #16a34a; color: #fff; border-color: #16a34a; } #assistant-tab-root .adb-save-btn:hover { background: #15803d; } #assistant-tab-root .adb-discard-btn { background: transparent; color: var(--text-faint); border-color: var(--border); } #assistant-tab-root .adb-discard-btn:hover { color: var(--text); border-color: var(--border-strong); } /* ── Pagination ── */ #assistant-tab-root #asst-adb-pagination { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-top: 1px solid var(--border); background: var(--surface); flex-shrink: 0; font-size: 12px; } #assistant-tab-root .adb-page-btn { padding: 2px 10px; font-size: 12px; font-family: var(--font-ui); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; } #assistant-tab-root .adb-page-btn:hover:not(:disabled) { border-color: var(--border-strong); } #assistant-tab-root .adb-page-btn:disabled { opacity: 0.35; cursor: default; } #assistant-tab-root .adb-page-info { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); } /* ── Params editor in modal ── */ #assistant-tab-root .adb-params-editor { width: 100%; height: 360px; box-sizing: border-box; font-size: 12px; font-family: var(--font-mono); padding: 8px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 3px; resize: vertical; outline: none; line-height: 1.5; tab-size: 2; } #assistant-tab-root .adb-params-editor:focus { border-color: var(--border-strong); } #assistant-tab-root .adb-params-status { font-size: 11px; font-family: var(--font-mono); padding: 4px 0; margin-top: 4px; } #assistant-tab-root .adb-params-status.valid { color: #16a34a; } #assistant-tab-root .adb-params-status.invalid { color: #dc2626; } #assistant-tab-root .adb-params-apply { margin-top: 8px; padding: 5px 16px; font-size: 12px; background: #3b82f6; color: #fff; border: none; border-radius: 3px; cursor: pointer; font-weight: 600; } #assistant-tab-root .adb-params-apply:hover { background: #2563eb; } #assistant-tab-root .adb-params-apply:disabled { opacity: 0.5; cursor: default; } /* ── Toast ── */ #assistant-tab-root .adb-toast { position: fixed; bottom: 24px; right: 24px; background: #111; color: #fff; font-size: 12px; font-family: var(--font-mono); padding: 7px 14px; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.25); opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s; z-index: 9999; pointer-events: none; } #assistant-tab-root .adb-toast.show { opacity: 1; transform: translateY(0); } /* ══════════════════════════════════════════════════════════════ STUDIO — "+ New action"/"+ New company" forms, tokens/bundles overlays. Prefixed studio-* throughout; now themed with the CRM's own --surface/ --text/--border/etc tokens (was a fixed light-only palette that broke dark mode — see CLAUDE.md/history for why that's not acceptable here). ══════════════════════════════════════════════════════════════ */ #assistant-tab-root .studio-title { font-size: 1.875rem; font-weight: 300; letter-spacing: -0.02em; } #assistant-tab-root .studio-subtitle { font-size: 0.875rem; color: var(--text-faint); margin-top: 6px; } #assistant-tab-root .studio-back-link { display: inline-block; background: none; border: none; color: var(--text-faint); font-size: 0.8rem; cursor: pointer; padding: 0; margin-bottom: 20px; } #assistant-tab-root .studio-back-link:hover { color: var(--text); } #assistant-tab-root .studio-label { display: block; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.18em; color: var(--text-faint); margin-bottom: 8px; } #assistant-tab-root .studio-btn { padding: 10px 20px; border-radius: 2px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; background: transparent; } #assistant-tab-root .studio-btn--primary { background: var(--text); color: var(--surface); border: 1px solid var(--text); } #assistant-tab-root .studio-btn--primary:hover { background: #242424; } #assistant-tab-root .studio-btn--secondary { color: var(--text); border: 1px solid var(--border-strong); } #assistant-tab-root .studio-btn--secondary:hover { background: var(--text); color: var(--surface); } #assistant-tab-root .studio-btn--danger { color: var(--danger-text); border: 1px solid var(--danger-text); } #assistant-tab-root .studio-btn--danger:hover { background: var(--danger-text); color: var(--surface); } #assistant-tab-root .studio-btn:disabled { opacity: 0.4; pointer-events: none; } #assistant-tab-root .studio-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 2px; padding: 20px; margin-bottom: 16px; } #assistant-tab-root .studio-card:hover { border-color: var(--border-strong); cursor: pointer; } #assistant-tab-root .studio-card--static:hover { border-color: var(--border); cursor: default; } #assistant-tab-root .studio-field { margin-bottom: 18px; } #assistant-tab-root .studio-field input[type="text"], #assistant-tab-root .studio-field input[type="number"], #assistant-tab-root .studio-field textarea, #assistant-tab-root .studio-field select { width: 100%; box-sizing: border-box; background: transparent; border: 1px solid var(--border); border-radius: 2px; padding: 10px 12px; font-size: 0.875rem; font-family: inherit; color: var(--text); transition: border-color .15s; } #assistant-tab-root .studio-field input:focus, #assistant-tab-root .studio-field textarea:focus, #assistant-tab-root .studio-field select:focus { outline: none; border-color: var(--border-strong); } #assistant-tab-root .studio-field textarea { resize: vertical; min-height: 70px; } #assistant-tab-root .studio-field-row { display: flex; align-items: center; gap: 10px; } #assistant-tab-root .studio-field-row input[type="checkbox"] { width: 16px; height: 16px; } #assistant-tab-root .studio-field-hint { font-size: 0.75rem; color: var(--text-faint); margin-top: 6px; } #assistant-tab-root .studio-section-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-faint); margin: 28px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } #assistant-tab-root .studio-section-title:first-child { margin-top: 0; } #assistant-tab-root .studio-callback-map-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } #assistant-tab-root .studio-callback-map-row input { flex: 1; } #assistant-tab-root .studio-callback-map-row .studio-cbpicker { flex: 1.4; } #assistant-tab-root .studio-callback-map-row .studio-remove-row { border: none; background: none; color: var(--danger-text); cursor: pointer; font-size: 1rem; padding: 4px 8px; } #assistant-tab-root .studio-cbpicker-wrap { position: relative; } #assistant-tab-root .studio-cbpicker-dropdown { position: absolute; z-index: 20; top: calc(100% + 2px); left: 0; right: 0; max-height: 220px; overflow-y: auto; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 2px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } #assistant-tab-root .studio-cbpicker-item { padding: 8px 12px; cursor: pointer; font-size: 0.82rem; } #assistant-tab-root .studio-cbpicker-item:hover, #assistant-tab-root .studio-cbpicker-item.active { background: var(--surface); } #assistant-tab-root .studio-cbpicker-item .studio-cbpicker-type { color: var(--text-faint); font-size: 0.7rem; margin-left: 6px; } #assistant-tab-root .studio-err { background: var(--danger-soft); border: 1px solid var(--danger-text); color: var(--danger-text); padding: 12px 16px; border-radius: 2px; font-size: 0.85rem; margin-bottom: 16px; } #assistant-tab-root .studio-warn { background: var(--warn-soft); border: 1px solid var(--warn-text); color: var(--warn-text); padding: 12px 16px; border-radius: 2px; font-size: 0.85rem; margin-bottom: 16px; } #assistant-tab-root .studio-empty { padding: 48px 0; text-align: center; color: var(--text-faint); font-size: 0.85rem; } #assistant-tab-root .studio-editor-actions { display: flex; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); } #assistant-tab-root .asst-hdr-btn--text { width: auto; padding: 0 12px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; } /* .asst-topbar-left — flex:1;min-width:0 позволяет ЕМУ схлопнуться уже своих детей (company-switch + Граф/Таблица), которые сами не сжимаются — на узком экране контейнер сжимался, а контент вылезал через overflow:visible и наезжал на .asst-head-right ("+Экшен"/📦/"+Компания"). Переносим правую группу кнопок на вторую строку вместо наложения. */ @media (max-width: 860px) { #assistant-tab-root .asst-head { flex-wrap: wrap; row-gap: 8px; } #assistant-tab-root .asst-topbar-left { flex: 1 1 100%; } #assistant-tab-root .asst-head-right { flex: 1 1 100%; flex-wrap: wrap; } }