/*
 * Неинтерактивные иллюстрации сообщений — Blanc Minimal.
 * Подключать ПОСЛЕ blanc.css только на case.html / mechanics.html.
 * Не меняет схемы PNG, фото, логотипы, общую оболочку или соседние цитаты.
 * .messenger-example / .message-bubble сохранены на внутреннем blockquote;
 * specificity >= (0,3,0) снимает прежнюю левую линию и wireframe-padding.
 * Inter / JetBrains Mono: только локальное наличие + системный fallback.
 */

:is(.case-article, .mechanics-page) .chat-illustration {
  --chat-ink: var(--blanc-ink, #0A0A0A);
  --chat-muted: var(--blanc-muted, #737373);
  --chat-canvas: var(--blanc-canvas, #FAFAFA);
  --chat-surface: var(--blanc-surface, #FFFFFF);
  --chat-line: var(--blanc-line, rgba(10, 10, 10, 0.06));
  --chat-font-sans: var(--blanc-font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  --chat-font-mono: var(--blanc-font-mono, "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace);
  --chat-radius-window: var(--blanc-radius-card, 8px);
  --chat-radius-bubble: var(--blanc-radius-button, 6px);
  --chat-radius-avatar: 9999px;
  --chat-thread-padding: 24px;
  --chat-bubble-padding: 16px;
  --chat-bubble-inset: 16px;
  display: block;
  box-sizing: border-box;
  container-name: chat-window;
  container-type: inline-size;
  inline-size: 100%;
  max-inline-size: min(100%, 60ch);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--chat-line);
  border-radius: var(--chat-radius-window);
  box-shadow: none;
  color: var(--chat-ink);
  background: var(--chat-surface);
  font-family: var(--chat-font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-align: start;
}

.case-article .chat-illustration { margin-block: 32px; }

:is(.case-article, .mechanics-page) .chat-illustration .chat-illustration__header {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 16px;
  min-inline-size: 0;
  padding: 16px 24px;
  border-bottom: 1px solid var(--chat-line);
  border-radius: var(--chat-radius-window) var(--chat-radius-window) 0 0;
  color: var(--chat-ink);
  background: var(--chat-surface);
}

:is(.case-article, .mechanics-page) .chat-illustration .chat-illustration__avatar {
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--chat-radius-avatar);
  color: var(--chat-surface);
  background: var(--chat-ink);
  font-family: var(--chat-font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

:is(.case-article, .mechanics-page) .chat-illustration .chat-illustration__name {
  display: block;
  min-inline-size: 0;
  color: var(--chat-ink);
  font-family: var(--chat-font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

:is(.case-article, .mechanics-page) .chat-illustration .chat-illustration__icon {
  display: block;
  inline-size: 20px;
  block-size: 20px;
  color: var(--chat-ink);
}

:is(.case-article, .mechanics-page) .chat-illustration .chat-illustration__thread {
  display: flex;
  justify-content: flex-end;
  min-inline-size: 0;
  padding: var(--chat-thread-padding);
  background: var(--chat-canvas);
}

:is(.case-article, .mechanics-page) .chat-illustration .chat-illustration__bubble {
  position: relative;
  display: block;
  box-sizing: border-box;
  inline-size: fit-content;
  max-inline-size: min(52ch, calc(100% - var(--chat-bubble-inset)));
  max-width: min(52ch, calc(100% - var(--chat-bubble-inset)));
  min-inline-size: 0;
  min-width: 0;
  margin: 0;
  padding: var(--chat-bubble-padding);
  border: 0;
  border-radius: var(--chat-radius-bubble);
  box-shadow: none;
  color: var(--chat-surface);
  background: var(--chat-ink);
  font-family: var(--chat-font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

/* Хвост соединён с заливкой, не несёт текста/статуса и не выходит за окно. */
:is(.case-article, .mechanics-page) .chat-illustration .chat-illustration__bubble::after {
  content: "";
  position: absolute;
  inset-inline-end: -7px;
  inset-block-end: 16px;
  inline-size: 8px;
  block-size: 8px;
  background: var(--chat-ink);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  pointer-events: none;
}

/* Выше specificity, чем у Blanc .solution-step p / .message-bubble p. */
:is(.case-article, .mechanics-page) .chat-illustration .chat-illustration__bubble .chat-illustration__text {
  display: block;
  max-inline-size: none;
  max-width: none;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  color: var(--chat-surface);
  font-family: var(--chat-font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
}

:is(.case-article, .mechanics-page) .chat-illustration .chat-illustration__text strong { font-weight: 400; }
:is(.case-article, .mechanics-page) .chat-illustration .chat-illustration__text a { color: inherit; text-decoration: underline; }

/* Только декоративное завершение окна: не поле ввода и не панель действий. */
:is(.case-article, .mechanics-page) .chat-illustration .chat-illustration__chrome {
  display: flex;
  justify-content: center;
  padding: 8px;
  border-top: 1px solid var(--chat-line);
  border-radius: 0 0 var(--chat-radius-window) var(--chat-radius-window);
  background: var(--chat-canvas);
}

:is(.case-article, .mechanics-page) .chat-illustration .chat-illustration__handle {
  display: block;
  inline-size: 32px;
  block-size: 4px;
  border-radius: var(--blanc-radius-small, 4px);
  background: var(--chat-line);
}

/* Авторский текст до/между репликами находится вне figure и пузырей. */
.mechanics-page .chat-example {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-inline-size: 0;
}

.mechanics-page .chat-example > .chat-example__narrative {
  max-inline-size: none;
  max-width: none;
  margin: 0;
  color: var(--blanc-ink, #0A0A0A);
  font-family: var(--blanc-font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Fallback для узкого viewport; не зависит от поддержки container queries. */
@media (max-width: 520px) {
  :is(.case-article, .mechanics-page) .chat-illustration {
    --chat-thread-padding: 16px 8px;
    --chat-bubble-inset: 8px;
  }
  :is(.case-article, .mechanics-page) .chat-illustration .chat-illustration__header { padding: 16px; }
}

/* Узкая КАРТОЧКА на широком экране также получает читаемую ширину пузыря. */
@container chat-window (max-width: 360px) {
  :is(.case-article, .mechanics-page) .chat-illustration .chat-illustration__thread { padding: 16px 8px; }
  :is(.case-article, .mechanics-page) .chat-illustration .chat-illustration__bubble {
    max-inline-size: calc(100% - 8px);
    max-width: calc(100% - 8px);
  }
  :is(.case-article, .mechanics-page) .chat-illustration .chat-illustration__header { padding: 16px; }
}

/* При печати без фоновых заливок важный текст всё равно читается. */
@media print {
  :is(.case-article, .mechanics-page) .chat-illustration { break-inside: avoid; }
  :is(.case-article, .mechanics-page) .chat-illustration .chat-illustration__bubble {
    border: 1px solid var(--chat-line);
    background: var(--chat-surface);
    color: var(--chat-ink);
  }
  :is(.case-article, .mechanics-page) .chat-illustration .chat-illustration__bubble .chat-illustration__text { color: var(--chat-ink); }
  :is(.case-article, .mechanics-page) .chat-illustration .chat-illustration__bubble::after { display: none; }
}