/* GPT Bridge — стили нового интерфейса (доски Figma «GPT Bridge · пилот», 46116:14292).
   Цвета — только переменные темы Filament: сервис живёт в панели ядра и своих цветов не вводит. */

.gb-cell { padding: 1rem 0.75rem; }

.gb-color { display: flex; align-items: center; gap: 0.5rem; }
.gb-color-name { font-size: 0.875rem; line-height: 1.25rem; }
.gb-dot {
    width: 1rem; height: 1rem; flex: none; border-radius: 9999px;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gray-950) 12%, transparent);
}
.gb-dot:where(.dark, .dark *) { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-white) 25%, transparent); }

/* Шесть делений готовности: принят — success, брак — danger, остальное — оттенки gray (ЭКРАНЫ §0.6). */
.gb-segments { display: flex; align-items: center; gap: 0.25rem; }
.gb-segment { width: 1.5rem; height: 0.375rem; border-radius: 0.1875rem; background: var(--gray-200); }
.gb-segment--done { background: var(--success-500); }
.gb-segment--rejected { background: var(--danger-500); }
.gb-segment--review { background: var(--gray-400); }
.gb-segment--running { background: var(--gray-300); }
.gb-segments-divider { width: 1px; height: 0.625rem; background: var(--gray-200); }
.gb-segments-caption { margin-top: 0.375rem; font-size: 0.75rem; line-height: 1rem; color: var(--gray-500); }
:where(.dark, .dark *) .gb-segment { background: color-mix(in oklab, var(--color-white) 10%, transparent); }
:where(.dark, .dark *) .gb-segment--done { background: var(--success-400); }
:where(.dark, .dark *) .gb-segment--rejected { background: var(--danger-400); }
:where(.dark, .dark *) .gb-segment--review { background: var(--gray-500); }
:where(.dark, .dark *) .gb-segment--running { background: var(--gray-600); }

/* Экран «Комплект» (доска 02): шапка, сетка шести кадров, задания заказа. */
.gb-set { display: flex; flex-direction: column; gap: 1.5rem; }
.gb-set-heading { display: flex; align-items: center; gap: 0.75rem; }
.gb-set-title { font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
.gb-set-subtitle { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; color: var(--gray-500); }
.gb-set-subtitle .gb-dot { width: 0.75rem; height: 0.75rem; }
.gb-set-actions { display: flex; align-items: center; gap: 0.75rem; }

/* Кузов — четыре в ряд, салон — ниже, после черты. Порог по ширине контейнера, а не окна (ЭКРАНЫ §0.2). */
.gb-set { container-type: inline-size; }
.gb-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.gb-cells-divider { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.75rem;
    font-size: 0.6875rem; line-height: 1rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-500); }
.gb-cells-divider::after { content: ''; flex: 1; height: 1px; background: var(--gray-200); }
:where(.dark, .dark *) .gb-cells-divider::after { background: color-mix(in oklab, var(--color-white) 10%, transparent); }
@container (max-width: 760px) { .gb-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gb-cell-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 0.75rem;
    background: var(--color-white); box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-950) 5%, transparent); }
:where(.dark, .dark *) .gb-cell-card { background: var(--gray-900); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-white) 10%, transparent); }
.gb-cell-card--done { box-shadow: 0 0 0 1px color-mix(in oklab, var(--success-600) 35%, transparent); }
.gb-cell-card--rejected { box-shadow: 0 0 0 1px color-mix(in oklab, var(--danger-600) 35%, transparent); }
.gb-cell-picture { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--gray-100); }
:where(.dark, .dark *) .gb-cell-picture { background: color-mix(in oklab, var(--color-white) 5%, transparent); }
.gb-cell-picture img { width: 100%; height: 100%; object-fit: cover; }
.gb-cell-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--gray-400); }
.gb-cell-tag { position: absolute; top: 0.5rem; left: 0.5rem; padding: 0.125rem 0.375rem; border-radius: 0.375rem;
    background: rgb(0 0 0 / 0.4); color: #fff; font-size: 0.75rem; line-height: 1rem; font-weight: 500; }
.gb-cell-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; }

.gb-jobs { display: flex; flex-direction: column; }
.gb-job { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0; border-bottom: 1px solid var(--gray-200); }
.gb-job:last-child { border-bottom: 0; }
:where(.dark, .dark *) .gb-job { border-color: color-mix(in oklab, var(--color-white) 5%, transparent); }
.gb-job-angle { width: 11rem; flex: none; font-size: 0.875rem; font-weight: 500; }
.gb-job-note { flex: 1; font-size: 0.8125rem; color: var(--gray-500); }

/* Поверхность: вкладки разделов над экраном. */
.gb-surface { display: flex; flex-direction: column; gap: 1.5rem; }
.gb-surface > .fi-tabs { align-self: flex-start; margin-inline: 0; }

/* Адаптация: пороги — по ширине контейнера сервиса, а не окна (ЭКРАНЫ §0.2): оболочка ядра забирает разное место. */
.gb-surface { container-type: inline-size; }
.gb-sections-select { display: none; }
.gb-tag-short { display: none; }
@container (max-width: 480px) {
    .gb-surface > .fi-tabs { display: none; }
    .gb-sections-select { display: block; }
}
@container (max-width: 560px) {
    .gb-tag-long { display: none; }
    .gb-tag-short { display: inline; }
    .gb-set .fi-section-header { flex-wrap: wrap; row-gap: 0.75rem; }
    .gb-set-actions { width: 100%; justify-content: space-between; }
    .gb-set-heading { align-items: flex-start; }
}

/* Карточка комплекта на телефоне. */
.gb-card { display: flex; flex-direction: column; gap: 0.5rem; }
.gb-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.gb-card-car { font-size: 0.75rem; line-height: 1rem; color: var(--gray-500); }
.gb-card .gb-segments { width: 100%; }
.gb-card .gb-segment { flex: 1; width: auto; }
.gb-card { width: 100%; }
.fi-ta-cell:has(.gb-card) > * { width: 100%; }

/* Экран «Кадр» (доска 03): режимы · холст · инспектор. На узком контейнере инспектор уходит под холст. */
.gb-frame { container-type: inline-size; }
.gb-editor { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; }
.gb-stage { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.gb-canvas { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 0.75rem; background: var(--gray-100);
    touch-action: none; user-select: none; outline: none; }
.gb-canvas:focus-visible { box-shadow: 0 0 0 2px var(--primary-500); }
.gb-canvas-result { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gb-layers { position: absolute; inset: 0; }
.gb-car-hit { position: absolute; cursor: move; box-shadow: inset 0 0 0 1px var(--primary-600); }
.gb-handle { position: absolute; width: 0.75rem; height: 0.75rem; margin: -0.375rem 0 0 -0.375rem; border-radius: 0.125rem;
    background: #fff; box-shadow: 0 0 0 1px var(--primary-600); cursor: nwse-resize; touch-action: none; }
.gb-compare { position: absolute; top: 0.75rem; left: 0.75rem; display: flex; padding: 0.1875rem; border-radius: 0.5rem; background: rgb(0 0 0 / 0.6); }
.gb-compare button { padding: 0.25rem 0.75rem; border-radius: 0.375rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: #fff; }
.gb-compare button.gb-on { background: #fff; color: var(--gray-950); }
.gb-compare button:disabled { opacity: 0.5; }
.gb-inspector { display: flex; flex-direction: column; gap: 0.75rem; }
.gb-inspector-body { display: flex; flex-direction: column; gap: 0.75rem; }
.gb-wide { width: 100%; }
.gb-field-label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.gb-segmented { display: flex; overflow: hidden; border-radius: 0.5rem; box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-950) 10%, transparent); }
.gb-segmented button { flex: 1; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; }
.gb-segmented button.gb-on { background: var(--primary-600); color: #fff; }
.gb-hint { font-size: 0.75rem; line-height: 1rem; color: var(--gray-500); }
.gb-sources { display: flex; flex-direction: column; gap: 0.75rem; }
.gb-source { display: flex; align-items: center; gap: 0.75rem; }
.gb-source img { width: 4.5rem; height: 3rem; flex: none; object-fit: contain; border-radius: 0.375rem; background: var(--gray-100); }
.gb-source div { display: flex; flex-direction: column; font-size: 0.8125rem; line-height: 1.25rem; }
.gb-source span { font-size: 0.75rem; color: var(--gray-500); }
[x-cloak] { display: none !important; }
@container (max-width: 900px) {
    .gb-editor { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 560px) {
    .gb-frame .fi-section-header { flex-wrap: wrap; row-gap: 0.75rem; }
    .gb-frame .gb-set-actions { width: 100%; justify-content: flex-end; }
    .gb-frame .gb-set-actions .fi-badge { margin-right: auto; }
}
.gb-set-actions > * { flex: none; white-space: nowrap; }
.gb-result-img { aspect-ratio: 3 / 2; width: 100%; height: auto; object-fit: cover; border-radius: 0.5rem; }

/* «Зал и фоны» и «Заготовки»: колонки переносятся по ширине контейнера — на телефоне друг под другом. */
.gb-columns { display: flex; align-items: flex-start; gap: 1rem; }
.gb-col { min-width: 0; }
.gb-col--side { flex: 0 0 16rem; }
.gb-col--main { flex: 1 1 auto; }
.gb-col--wide { flex: 0 0 26rem; }
.gb-stack { display: flex; flex-direction: column; gap: 1rem; }
.gb-cards-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.875rem; }
.gb-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; align-items: start; }
@container (max-width: 1100px) {
    .gb-columns { flex-wrap: wrap; }
    .gb-col--wide { flex: 1 1 100%; }
}
@container (max-width: 760px) {
    .gb-col--side, .gb-col--main { flex: 1 1 100%; }
    .gb-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gb-pair { grid-template-columns: minmax(0, 1fr); }
}

/* Редактор 0.10.2: два слоя (машина и зал), наклонённая линия пола, ползунки инструментов. */
.gb-canvas-layer { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.gb-floor-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.gb-floor-line line { stroke: var(--warning-500); stroke-width: 1.5; stroke-dasharray: 6 4; }
.gb-floor-label { position: absolute; left: 0.75rem; padding: 0.0625rem 0.375rem; border-radius: 0.375rem; pointer-events: none;
    background: var(--warning-400); color: var(--warning-950); font-size: 0.6875rem; line-height: 1rem; font-weight: 500; }
.gb-slider { display: flex; flex-direction: column; gap: 0.375rem; }
.gb-slider-head { display: flex; justify-content: space-between; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.gb-slider-head output { font-weight: 400; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.gb-slider input[type=range] { width: 100%; accent-color: var(--primary-600); }
.gb-inspector > .gb-segmented { background: var(--color-white); }
:where(.dark, .dark *) .gb-inspector > .gb-segmented { background: var(--gray-900); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-white) 10%, transparent); }
/* Отмена и возврат на холсте: на телефоне это единственный способ — клавиш нет; кнопки не меньше 44 px на касание. */
.gb-history { position: absolute; left: 0.75rem; bottom: 0.75rem; display: flex; gap: 0.25rem; padding: 0.1875rem; border-radius: 0.5rem; background: rgb(0 0 0 / 0.6); }
.gb-history button { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.375rem; color: #fff; }
.gb-history button:disabled { opacity: 0.4; }
.gb-history-icon { width: 1.25rem; height: 1.25rem; }
@container (max-width: 560px) { .gb-history button { width: 2.75rem; height: 2.75rem; } }
@container (max-width: 560px) { .gb-frame .gb-head-history { display: none; } }