/* OpenUI в цветах и шрифтах Докки (OPENUI-DOKKY-1): тема из стенда experiments/openui-dokky-2026-11-09 */
/* OpenUI в цветах и шрифтах Докки. Переменные OpenUI объявлены на :root, поэтому и наши стоят там же:
   иначе окна, которые OpenUI выносит в body (просмотр картинки), остались бы в его теме */
:root:root {
  --ou-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  --ou-mono: "SFMono-Regular", ui-monospace, Menlo, monospace;
  --ou-surf: color-mix(in srgb, var(--text) 7%, var(--bg));
  --ou-surf-2: color-mix(in srgb, var(--text) 11%, var(--bg));
  --ou-line: color-mix(in srgb, var(--text) 7%, transparent);
  /* стрелка продолжения, когда модель не дала эмодзи (Lucide corner-down-right, ISC) */
  --ou-ic-follow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 10 5 5-5 5'/%3E%3Cpath d='M4 4v7a4 4 0 0 0 4 4h12'/%3E%3C/svg%3E");
  --openui-font-body: var(--ou-font); --openui-font-heading: var(--ou-font); --openui-font-label: var(--ou-font);
  --openui-font-numbers: var(--ou-font); --openui-font-code: var(--ou-mono);
  --openui-background: var(--bg);
  --openui-foreground: var(--ou-surf);
  --openui-popover-background: var(--panel);
  --openui-sunk-light: color-mix(in srgb, var(--text) 3%, transparent);
  --openui-sunk: color-mix(in srgb, var(--text) 5%, transparent);
  --openui-sunk-deep: color-mix(in srgb, var(--text) 8%, transparent);
  --openui-elevated-light: color-mix(in srgb, var(--text) 5%, transparent);
  --openui-elevated: color-mix(in srgb, var(--text) 8%, transparent);
  --openui-elevated-strong: color-mix(in srgb, var(--text) 14%, transparent);
  --openui-elevated-intense: color-mix(in srgb, var(--text) 30%, transparent);
  --openui-highlight-subtle: color-mix(in srgb, var(--text) 3%, transparent);
  --openui-highlight: color-mix(in srgb, var(--text) 5%, transparent);
  --openui-highlight-strong: color-mix(in srgb, var(--text) 9%, transparent);
  --openui-highlight-intense: color-mix(in srgb, var(--text) 30%, transparent);
  --openui-inverted-background: var(--text);
  --openui-text-neutral-primary: var(--text);
  --openui-text-neutral-secondary: var(--muted);
  --openui-text-neutral-tertiary: var(--faint);
  --openui-text-neutral-link: var(--accent);
  --openui-text-brand: var(--accent);
  --openui-text-accent-primary: #fff;
  --openui-border-default: var(--ou-line);
  --openui-border-interactive: color-mix(in srgb, var(--text) 12%, transparent);
  --openui-border-interactive-emphasis: color-mix(in srgb, var(--text) 22%, transparent);
  --openui-border-accent: var(--accent);
  --openui-interactive-accent-default: var(--accent);
  --openui-interactive-accent-hover: color-mix(in srgb, var(--accent) 88%, #fff);
  --openui-interactive-accent-pressed: color-mix(in srgb, var(--accent) 85%, #000);
  --openui-shadow-s: none; --openui-shadow-m: none;
  --openui-radius-m: 10px; --openui-radius-l: 12px; --openui-radius-xl: 14px; --openui-radius-2xl: 16px;
  --openui-radius-3xl: 18px; --openui-radius-4xl: 20px; --openui-radius-5xl: 24px;
}

/* остров OpenUI внутри ответа: корневая карточка прозрачная, блоки стоят в потоке текста */
.ou-host { margin: 16px 0 18px; min-width: 0; }
.ou-host:first-child { margin-top: 0; }
.ou-island { position: relative; color: var(--text); font: 16px/1.6 var(--ou-font); }
.ou-island .openui-card.openui-card-card { background: transparent; border: 0; box-shadow: none; padding: 0; gap: 14px; border-radius: 0; }
.ou-island :is(.openui-card-sunk, .openui-card-clear) { border: 0; box-shadow: none; }
/* эмодзи в начале подписи хост убирает из текста и рисует иконкой пака: в строку по центру, цветом текста */
.ou-island .ou-lead-ic::before { content: ''; display: inline-block; flex: none; width: 1.05em; height: 1.05em; margin-right: .4em; vertical-align: -.17em; background: currentColor; -webkit-mask: var(--ou-icon) center/contain no-repeat; mask: var(--ou-icon) center/contain no-repeat; }
/* в Докки глобальные правила для svg и таблиц чата ломают графики OpenUI: здесь их отменяем.
   Блоки DokiUI внутри карточки (.ou-doki) задают размеры значков сами - сброс до auto растягивал их на всю карточку */
.message .ou-island svg:not(.ou-doki *) { width: auto; height: auto; max-width: none; display: inline; vertical-align: baseline; }
.message .ou-island table { width: 100%; max-width: none; border: 0; border-radius: 0; background: transparent; font-size: 14px; }
.message .ou-island :is(th, td) { max-width: none; padding: 11px 14px; border-bottom: 1px solid var(--ou-line); }
.message .ou-island th { background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.message .ou-island td:first-child { font-weight: 570; }
.message .ou-island tr:last-child td { border-bottom: 0; }
.ou-island .openui-scrollable-table-wrapper { background: var(--ou-surf); border: 0; border-radius: 18px; overflow-x: auto; }
/* текст внутри блоков пишет модель в markdown: он должен выглядеть как текст ответа */
.ou-island .openui-text-content { font-size: 16px; line-height: 1.6; color: var(--text); }
.ou-island .openui-text-content :is(p, ul, ol) { margin: 0 0 8px; }
.ou-island .openui-text-content :is(p, ul, ol):last-child { margin-bottom: 0; }
.ou-island .openui-header { padding: 0; border: 0; }
/* графики, шаги и списки без обводок и плашек: фон только у таблицы, кода и короткой сноски */
.ou-island :is(.openui-bar-chart-container, .openui-line-chart-container, .openui-area-chart-container, .openui-pie-chart-container,
  .openui-horizontal-bar-chart-container, .openui-radar-chart-container, .openui-steps-container, .openui-callout, .openui-text-callout, .openui-list-block,
  .openui-tabs, .openui-accordion, .openui-code-block, .openui-entity-list) { border: 0 !important; box-shadow: none !important; }
.ou-island :is(.openui-bar-chart-container, .openui-line-chart-container, .openui-area-chart-container, .openui-pie-chart-container,
  .openui-horizontal-bar-chart-container, .openui-radar-chart-container, .openui-steps-container) { background: none; padding: 0; }
/* белая черта по центру каждого столбца - украшение OpenUI, читать график она мешает */
.ou-island .openui-bar-chart-internal-line { display: none; }
.ou-island .openui-image-block-wrapper, .ou-island .openui-image-block-image { border-radius: 18px; border: 0; }
/* подсказки следующего шага - мягкие кнопки с иконкой, как в варианте A */
.ou-island .openui-follow-up-block { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; background: none; }
.ou-island .openui-follow-up-block__header { display: none; }
.ou-island .openui-follow-up-item { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 9px 15px 9px 12px; border: 0; border-radius: 999px;
  background: var(--ou-surf-2); color: var(--text); font: 550 14px/1.3 var(--ou-font); cursor: pointer; transition: background .18s var(--ease, ease); }
.ou-island .openui-follow-up-item::before { content: ''; width: 16px; height: 16px; flex: none; background: var(--accent); -webkit-mask: var(--ou-icon, var(--ou-ic-follow)) center/contain no-repeat; mask: var(--ou-icon, var(--ou-ic-follow)) center/contain no-repeat; }
.ou-island .openui-follow-up-item > svg { display: none; }
@media (hover: hover) and (pointer: fine) { .ou-island .openui-follow-up-item:hover { background: color-mix(in srgb, var(--text) 15%, var(--bg)); } }
.ou-island .openui-button-base { border-radius: 999px; font-family: var(--ou-font); }
.ou-island .openui-button-base-secondary { background: var(--ou-surf-2); border: 0; color: var(--text); }

/* скелетон, пока у блока ещё нет ни одной части */
.ou-skeleton { display: grid; gap: 12px; padding: 18px; border-radius: 20px; background: var(--ou-surf); }
.ou-skeleton > span { display: block; height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--openui-highlight) 0%, var(--openui-highlight-strong) 50%, var(--openui-highlight) 100%); background-size: 220% 100%; animation: ou-shine 1.4s ease-in-out infinite; }
.ou-skeleton > span:first-child { width: 42%; height: 16px; }
.ou-skeleton > span:nth-child(2) { width: 88%; animation-delay: .12s; }
.ou-skeleton > span:nth-child(3) { width: 64%; animation-delay: .24s; }
@keyframes ou-shine { from { background-position: 100% 0; } to { background-position: -120% 0; } }
/* часть блока, которая только что пришла из потока, проявляется из блюра; следующие идут друг за другом */
.ou-enter { animation: ou-enter .62s var(--ease, cubic-bezier(.22,1,.36,1)) both; animation-delay: var(--ou-delay, 0ms); }
@keyframes ou-enter { from { opacity: 0; filter: blur(8px); transform: translateY(8px); } to { opacity: 1; filter: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ou-enter, .ou-skeleton > span { animation: none; } }
/* картинка в ответе - сама фотография со скруглением, без подложки OpenUI вокруг */
/* фото блока - на всю ширину блока, как его скелетон: узкая картинка слева в широком блоке выглядела обрезком (10.11) */
.ou-island .openui-image-block-wrapper { background: none !important; padding: 0 !important; display: block; width: 100%; max-width: 100%; aspect-ratio: auto; height: auto; }
.ou-island .openui-image-block-wrapper::before, .ou-island .openui-image-block-wrapper::after { display: none !important; }
.ou-island .openui-image-block-image { display: block; width: 100%; height: auto; max-height: var(--chat-media-height, 480px); object-fit: cover; margin: 0; }
.ou-island .openui-follow-up-block { flex-direction: row !important; align-items: flex-start; }
.ou-island .openui-follow-up-item { width: auto !important; flex: none; }
.ou-island .openui-image-block-wrapper { min-height: 0 !important; max-height: none !important; overflow: hidden; border-radius: 18px; }
/* вертикальное или небольшое фото (номер части в data-compact): на телефоне подряд с текстом, на широком экране слева,
   а текст или остальные части блока справа */
.ou-island[data-compact="1"] .openui-card > :nth-child(1) .openui-image-block-image,
.ou-island[data-compact="2"] .openui-card > :nth-child(2) .openui-image-block-image,
.ou-island[data-compact="3"] .openui-card > :nth-child(3) .openui-image-block-image,
.ou-island[data-compact="4"] .openui-card > :nth-child(4) .openui-image-block-image { max-height: min(70vh, 560px); }
.ou-flow { display: flow-root; }
@media (min-width: 700px) {
  .ou-host:has(> .ou-island.ou-solo-compact) { float: left; clear: left; width: min(40%, 320px); margin: 4px 24px 14px 0; }
  /* у карточки display: flex в атрибуте style от OpenUI - без !important сетка не встаёт */
  .ou-island.ou-side-compact .openui-card.openui-card-card { display: grid !important; grid-template-columns: minmax(0, min(40%, 320px)) minmax(0, 1fr); column-gap: 22px; align-items: start; }
  .ou-island.ou-side-compact .openui-card > * { grid-column: 2; }
  .ou-island.ou-side-compact[data-compact="1"] .openui-card > :nth-child(1),
  .ou-island.ou-side-compact[data-compact="2"] .openui-card > :nth-child(2),
  .ou-island.ou-side-compact[data-compact="3"] .openui-card > :nth-child(3),
  .ou-island.ou-side-compact[data-compact="4"] .openui-card > :nth-child(4) { grid-column: 1; grid-row: 1 / span var(--ou-rows, 1); }
  /* блоки и списки рядом с фото не сжимаются в узкую щель: блок уходит под фото, список встаёт целиком справа */
  .ou-flow > .ou-host:not(:has(> .ou-solo-compact)) { clear: both; }
  .ou-flow > :is(ul, ol, pre, table, blockquote) { display: flow-root; }
}
/* выноска - тонированная плашка вместо полоски слева */
.ou-island .openui-callout { border: 0 !important; border-radius: 16px; padding: 13px 16px; gap: 3px; background: var(--ou-surf); }
.ou-island .openui-callout-info { background: color-mix(in srgb, var(--accent) 13%, var(--bg)); }
.ou-island .openui-callout-warning { background: color-mix(in srgb, #e0a43a 14%, var(--bg)); }
.ou-island .openui-callout-success { background: color-mix(in srgb, #2fb37a 14%, var(--bg)); }
.ou-island .openui-callout-danger { background: color-mix(in srgb, #ec6a6a 14%, var(--bg)); }
.ou-island .openui-callout-title { font-weight: 650; }
.ou-island .openui-image-block-wrapper { flex: none !important; }
.ou-island .openui-image-block-image { border: 0 !important; border-radius: 0 !important; }
/* таблица листается пальцем, отдельная кнопка-стрелка OpenUI здесь лишняя */
.ou-island .openui-scrollable-table-wrapper { border: 0 !important; box-shadow: none !important; }
.ou-island [class*="scroll-button"], .ou-island [class*="table-scroll"] button { display: none !important; }
.message .ou-island table { background: transparent !important; }
.ou-island .openui-table-container { border: 0 !important; border-radius: 0; }
.ou-island .openui-table-row:nth-child(even) { background: transparent; }
.message .ou-island .openui-table-cell { white-space: normal; min-width: 8ch; max-width: 30ch; }
.ou-island .openui-scrollable-table-control { border-radius: 999px; background: var(--ou-surf-2); }
.ou-island .openui-scrollable-table-control button { border: 0 !important; border-radius: 999px; }
@media (hover: none) { .ou-island .openui-scrollable-table-control { display: none; } }
/* шаги: заголовок - лёгким голубым, номер - просто цифра без кружка, обводки и линии между шагами */
.ou-island .openui-step-title { color: color-mix(in srgb, var(--accent) 38%, var(--text)); font-weight: 620; }
.ou-island .openui-step-details { color: color-mix(in srgb, var(--text) 82%, var(--bg)); }
.ou-island .openui-step-details p { margin: 2px 0 0; }
.ou-island .openui-step-number { border: 0; background: none; }
.ou-island .openui-step-number-inner { border: 0; background: none; width: 20px; color: var(--muted); font-weight: 650; }
.ou-island .openui-connector-line { display: none; }
.ou-island .openui-markdown-renderer p { margin: 0; }
/* подборка: снимок крупнее и скруглён как наши карточки, название - главное в строке */
.ou-island .openui-list-item { align-items: center; gap: 14px; }
.ou-island .openui-list-item-indicator-image, .ou-island .openui-list-item-indicator-image img { width: 72px !important; height: 72px !important; border-radius: 16px; object-fit: cover; background: var(--ou-surf); }
.ou-island .openui-list-item-title { font-weight: 620; color: var(--text); }
.ou-island .openui-list-item-subtitle { color: var(--muted); }
.ou-island .openui-header .openui-header-title, .ou-island [class*="header-title"] { font-weight: 650; }
.ou-island .openui-step-number { box-shadow: none; }
.ou-island .openui-step-connector { background: none; }
.ou-island .openui-list-item-indicator:has(.openui-list-item-indicator-image) { width: 72px; height: 72px; margin-top: 0; border-radius: 16px; overflow: hidden; flex: none; }
.ou-island .openui-list-item-indicator-image, .ou-island .openui-list-item-indicator-image img { width: 100% !important; height: 100% !important; border-radius: 0; }
/* обычная кнопка получает иконку только если модель поставила эмодзи */
.ou-island .openui-button-base[style*="--ou-icon"]::before { content: ''; width: 16px; height: 16px; margin-right: 8px; flex: none; background: currentColor; -webkit-mask: var(--ou-icon) center/contain no-repeat; mask: var(--ou-icon) center/contain no-repeat; }
.ou-island .openui-follow-up-item { max-width: 100%; white-space: normal; text-align: left; }
.ou-island .openui-follow-up-item-text { white-space: normal; }

/* карта Докки над блоком: сначала где это, потом подробности списком, поэтому её лента карточек не нужна */
.ou-map { margin: 0 0 16px; }
.ou-map .iui-places, .ou-map .iui-chips { display: none !important; }
/* номер в списке совпадает с пином на карте */
.ou-island:has(.ou-map) .openui-list-block { counter-reset: ou-pin; }
.ou-island:has(.ou-map) .openui-list-item-title::before { counter-increment: ou-pin; content: counter(ou-pin) '. '; color: var(--muted); }
/* на телефоне таблица сначала пробует уместиться переносом, прокрутка - только когда колонок правда много */
@media (max-width: 560px) {
  .message .ou-island .openui-table-cell { min-width: 0; max-width: none; }
  .ou-island .openui-scrollable-table-wrapper table { width: 100%; }
}

/* собрано из openui-styles.css: шрифты OpenUI заменены на шрифт Докки */
:root:root {
  --openui-text-body-xs: 400 12px/1.5 var(--ou-font);
  --openui-text-body-xs-heavy: 560 12px/1.5 var(--ou-font);
  --openui-text-body-sm: 400 14px/1.5 var(--ou-font);
  --openui-text-body-sm-heavy: 560 14px/1.5 var(--ou-font);
  --openui-text-body-default: 400 16px/1.5 var(--ou-font);
  --openui-text-body-default-heavy: 560 16px/1.5 var(--ou-font);
  --openui-text-body-lg: 400 18px/1.5 var(--ou-font);
  --openui-text-body-lg-heavy: 560 18px/1.5 var(--ou-font);
  --openui-text-heading-xs: 600 16px/1.25 var(--ou-font);
  --openui-text-heading-sm: 600 18px/1.25 var(--ou-font);
  --openui-text-heading-md: 600 24px/1.1 var(--ou-font);
  --openui-text-heading-lg: 600 28px/1.1 var(--ou-font);
  --openui-text-heading-xl: 700 32px/1.1 var(--ou-font);
  --openui-text-label-xs: 400 12px/1.25 var(--ou-font);
  --openui-text-label-xs-heavy: 560 12px/1.25 var(--ou-font);
  --openui-text-label-sm: 400 14px/1.25 var(--ou-font);
  --openui-text-label-sm-heavy: 560 14px/1.25 var(--ou-font);
  --openui-text-label-default: 400 16px/1.25 var(--ou-font);
  --openui-text-label-default-heavy: 560 16px/1.25 var(--ou-font);
  --openui-text-label-lg: 400 18px/1.25 var(--ou-font);
  --openui-text-label-lg-heavy: 560 18px/1.25 var(--ou-font);
  --openui-text-numbers-xs: 400 12px/1.5 var(--ou-font);
  --openui-text-numbers-xs-heavy: 560 12px/1.5 var(--ou-font);
  --openui-text-numbers-sm: 400 14px/1.5 var(--ou-font);
  --openui-text-numbers-sm-heavy: 560 14px/1.5 var(--ou-font);
  --openui-text-numbers-default: 400 16px/1.5 var(--ou-font);
  --openui-text-numbers-default-heavy: 560 16px/1.5 var(--ou-font);
  --openui-text-numbers-lg: 400 18px/1.5 var(--ou-font);
  --openui-text-numbers-lg-heavy: 560 18px/1.5 var(--ou-font);
  --openui-text-numbers-heading-sm: 600 18px/1.25 var(--ou-font);
  --openui-text-numbers-heading-md: 600 24px/1.1 var(--ou-font);
  --openui-text-numbers-heading-lg: 600 28px/1.1 var(--ou-font);
  --openui-text-numbers-heading-xl: 600 32px/1.1 var(--ou-font);
}

/* картинка, которую сервер не нашёл, не оставляет пустую рамку */
.ou-island .openui-image-block-wrapper:has(img:is([src=""], :not([src]))) { display: none; }
.ou-island .openui-list-item-indicator:has(img:is([src=""], :not([src]))) { display: none; }