/* 03.10 (Вячеслав: «новый вид чёрный, тёмный слишком — доработать»). Фон чатов был ровным самым тёмным
   петролем (--bg-primary) от края до края: ответ лежал прямо на нём, код — ещё темнее (--bg-inset),
   вопрос — тёмная обводка. Светлых и оранжевых плоскостей почти не было, отсюда «чёрное».
   Поднимаем поверхности по канону EMBER (как главная и кабинет): рабочая область — светлее петроль
   с тёплым светом сверху, меню — глубокий петроль с медной кромкой, ответ — своя плашка, вопрос —
   оранжевая плашка, код — на петроле, поле — светлая петроль-плашка. Только тёмная тема. */

/* рабочая область: светлый петроль сверху донизу + тёплый свет — «глубокая вода», не ночь (обычный вид и v2) */
html[data-theme="dark"] #cl-wrap .cl-main,
html.cv2[data-theme="dark"] body #cl-wrap .cl-main,
html.cv2[data-theme="dark"] body #cl-wrap .cl-main.cl-empty {
  background:
    radial-gradient(70% 40% at 50% -6%, rgba(var(--accent-rgb), .18), transparent 70%),
    linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%) !important;
  --accent-ember: var(--accent-ember-light);   /* 03.10 ступень 2: янтарь на светлом холсте 3,9 → светлый янтарь 4,6:1 */
}
html[data-theme="dark"] #cl-wrap #cl-side {
  background: linear-gradient(180deg, var(--bg-secondary) 0%, color-mix(in srgb, var(--bg-secondary) 60%, var(--bg-primary)) 100%) !important;
  border-right: 1px solid var(--edge-copper) !important;
}

/* ответ ИИ — своя плашка с медной кромкой (обычный вид; в виде v2 у ответа уже есть карточка) */
html[data-theme="dark"]:not(.cv2) #cl-wrap .cl-msg.ai .cl-msg-content {
  background: linear-gradient(160deg, color-mix(in srgb, var(--bg-tertiary) 88%, var(--text-primary)) 0%, color-mix(in srgb, var(--bg-tertiary) 92%, var(--text-primary)) 100%) !important;
  border: 1px solid var(--edge-copper) !important;
  border-left: 4px solid var(--accent-fill) !important;
  border-radius: calc(6px * var(--k, 1)) calc(22px * var(--k, 1)) calc(22px * var(--k, 1)) calc(22px * var(--k, 1)) !important;
  padding: calc(16px * var(--k, 1)) calc(20px * var(--k, 1)) !important;
  box-shadow: var(--shadow-2) !important;
  /* янтарь #F59B1F на светлом петроле — 3,2–4,4:1, поэтому акцент-текст на плашке — светлый янтарь */
  --accent-ember: var(--accent-ember-light);
}
html[data-theme="dark"]:not(.cv2) #cl-wrap .cl-msg.ai .cl-msg-content:empty { display: none !important; }
/* ссылки в ответе: светлый текст + оранжевое подчёркивание (янтарь на светлом петроле < 4,5:1) */
html[data-theme="dark"] #cl-wrap .cl-msg.ai .cl-msg-content a:not([class]) { color: var(--text-primary) !important; text-decoration: underline !important; text-decoration-color: var(--accent-fill) !important; text-underline-offset: .18em; }

/* вопрос человека — оранжевая плашка с чёрным текстом (сильная плоскость, как на главной) */
html[data-theme="dark"]:not(.cv2) #cl-wrap .cl-msg.user .cl-msg-content {
  background: var(--accent-grad) !important;
  color: var(--on-accent, #111) !important;
  border: none !important;
  box-shadow: 0 calc(10px * var(--k, 1)) calc(28px * var(--k, 1)) rgba(var(--accent-rgb), .28) !important;
}
html[data-theme="dark"]:not(.cv2) #cl-wrap .cl-msg.user .cl-msg-content * { color: inherit !important; }
html[data-theme="dark"]:not(.cv2) #cl-wrap .cl-msg.user .cl-msg-content code {
  background: rgba(17, 17, 17, .12) !important;
}

/* код — на петроле с медной кромкой, а не на почти чёрном */
html[data-theme="dark"] #cl-wrap .cl-msg-content pre {
  background: var(--bg-primary) !important;
  border: 1px solid var(--edge-copper) !important;
}

/* поле ввода — светлая петроль-плашка с медной кромкой и мягкой тенью */
html[data-theme="dark"] #cl-wrap .cl-input-box {
  background: linear-gradient(160deg, color-mix(in srgb, var(--bg-tertiary) 88%, var(--text-primary)) 0%, color-mix(in srgb, var(--bg-tertiary) 92%, var(--text-primary)) 100%) !important;
  border-color: var(--edge-copper) !important;
  box-shadow: var(--shadow-3) !important;
}

/* v2: карточки на светлом фоне — на ступень светлее, иначе сливаются */
html.cv2[data-theme="dark"] body #cl-wrap .cl-msg.ai .cl-msg-content {
  background: linear-gradient(160deg, color-mix(in srgb, var(--bg-tertiary) 88%, var(--text-primary)) 0%, color-mix(in srgb, var(--bg-tertiary) 92%, var(--text-primary)) 100%) !important;
  --accent-ember: var(--accent-ember-light);
}

/* 03.10 ступень 2: на светлой карточке приглушённый текст 3,5:1 → берём вторичный (4,7:1); янтарь мелким текстом — светлым;
   код внутри — свой тёмный остров, там янтарь прежний */
html[data-theme="dark"] #cl-wrap .cl-msg.ai .cl-msg-content,
html[data-theme="dark"] #cl-wrap .cl-input-box { --text-muted: var(--text-secondary); }
html[data-theme="dark"] #cl-wrap .cl-msg-content pre { --accent-ember: var(--warning); }

/* ── 03.10 СВЕТЛАЯ ТЕМА (Вячеслав: «а светлая?») — та же схема на бумаге: вопрос — огонь, ответ — своя карточка
   на тон темнее бумаги (--bg-inset, «крафт») с медной кромкой и оранжевым краем, код — петроль. Белых карточек нет
   (канон: «постер на бумаге», не белые карточки). Контраст на #E8E3D9: текст 15:1, приглушённый 5,0, акцент 4,6. ── */
html:not([data-theme="dark"]) #cl-wrap .cl-msg.ai .cl-msg-content,
html.cv2:not([data-theme="dark"]) body #cl-wrap .cl-msg.ai .cl-msg-content {
  background: linear-gradient(160deg, var(--bg-inset) 0%, color-mix(in srgb, var(--bg-inset) 55%, var(--bg-primary)) 100%) !important;
  border: 1px solid var(--edge-copper) !important;
  border-left: 4px solid var(--accent-fill) !important;
  border-radius: calc(6px * var(--k, 1)) calc(22px * var(--k, 1)) calc(22px * var(--k, 1)) calc(22px * var(--k, 1)) !important;
  box-shadow: var(--shadow-2) !important;
}
html:not([data-theme="dark"]):not(.cv2) #cl-wrap .cl-msg.ai .cl-msg-content { padding: calc(16px * var(--k, 1)) calc(20px * var(--k, 1)) !important; }
html:not([data-theme="dark"]) #cl-wrap .cl-msg.ai .cl-msg-content:empty { display: none !important; }

/* вопрос — оранжевая плашка с чёрным текстом, как в тёмной теме и в виде v2 */
html:not([data-theme="dark"]):not(.cv2) #cl-wrap .cl-msg.user .cl-msg-content {
  background: var(--accent-grad) !important;
  color: var(--on-accent) !important;
  border: none !important;
  box-shadow: 0 calc(10px * var(--k, 1)) calc(28px * var(--k, 1)) rgba(var(--accent-rgb), .26) !important;
}
html:not([data-theme="dark"]):not(.cv2) #cl-wrap .cl-msg.user .cl-msg-content * { color: inherit !important; }
html:not([data-theme="dark"]):not(.cv2) #cl-wrap .cl-msg.user .cl-msg-content code { background: rgba(17, 17, 17, .10) !important; }
/* акцент-текст на крафте: #B8460A даёт 4,2:1 → тёмный вариант акцента (#A83F08, 5,0:1) */
html:not([data-theme="dark"]) #cl-wrap .cl-msg.ai .cl-msg-content { --accent-ember: var(--accent-ember-dark); }
html:not([data-theme="dark"]) #cl-wrap .cl-msg-content pre { --accent-ember: var(--accent-ember-light); }

/* 04.10 (Мария: «хотелось бы там иметь кнопку переотправить»): под остановленным ответом — заметная пилюля, обе темы и оба вида */
#cl-wrap .cl-msg-content .cl-resend {
  display: inline-flex; align-items: center; gap: calc(6px * var(--k, 1));
  margin: calc(8px * var(--k, 1)) 0 0 calc(10px * var(--k, 1));
  height: calc(36px * var(--k, 1)); padding: 0 calc(16px * var(--k, 1));
  border-radius: 999px; border: 1px solid var(--edge-copper, var(--border-strong));
  background: transparent; color: var(--text-primary);
  font: 700 calc(14px * var(--k, 1))/1 var(--font-body, 'Manrope', sans-serif); cursor: pointer;
}
#cl-wrap .cl-msg-content .cl-resend:hover { background: var(--accent-grad); color: var(--on-accent); border-color: transparent; }

/* 05.10 Чат-UX: «Переотправить вопрос» — та же пилюля и в строке «Ответ задерживается» (под карточкой, вне текста ответа);
   значок-стрелка в кружке слева от подписи; пока проверяем сервер — кнопка приглушена */
#cl-wrap .cl-hang {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--k, 1)) calc(10px * var(--k, 1));
  margin-top: calc(10px * var(--k, 1)); color: var(--text-secondary);
  font: 500 calc(13.5px * var(--k, 1))/1.4 var(--font-body, 'Manrope', sans-serif);
}
#cl-wrap .cl-hang .cl-resend {
  display: inline-flex; align-items: center; gap: calc(6px * var(--k, 1));
  height: calc(36px * var(--k, 1)); padding: 0 calc(16px * var(--k, 1));
  border-radius: 999px; border: 1px solid var(--edge-copper, var(--border-strong));
  background: transparent; color: var(--text-primary);
  font: 700 calc(14px * var(--k, 1))/1 var(--font-body, 'Manrope', sans-serif); cursor: pointer;
}
#cl-wrap .cl-hang .cl-resend:hover { background: var(--accent-grad); color: var(--on-accent); border-color: transparent; }
#cl-wrap .cl-resend svg { flex: 0 0 auto; }
#cl-wrap .cl-resend[disabled] { opacity: .6; cursor: progress; }
/* обычный вид: «Изменить · Переотправить» у последнего вопроса видны всегда, а не только при наведении */
html:not(.cv2) #cl-wrap .cl-msg.user .cl-user-acts { opacity: .85; }

/* 05.10 (Мария, iPhone: «долго грузит фото», «третье не загрузил»): у фото над полем — превью с телефона, свой процент
   и «Повторить» у того фото, что не загрузилось */
#cl-wrap .cl-att-chip .cl-att-prev { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
#cl-wrap .cl-att-chip .cl-att-spin { position: relative; z-index: 1; }
#cl-wrap .cl-att-chip .cl-att-pct {
  position: absolute; left: 0; right: 0; bottom: calc(3px * var(--k, 1)); z-index: 1; text-align: center;
  font: 700 calc(10px * var(--k, 1))/1.15 var(--font-body, 'Manrope', sans-serif); color: var(--text-primary);
  text-shadow: 0 0 calc(3px * var(--k, 1)) var(--bg-primary), 0 0 calc(3px * var(--k, 1)) var(--bg-primary);
}
#cl-wrap .cl-att-chip.cl-att-err { border-color: var(--danger); display: flex; align-items: center; justify-content: center; }
#cl-wrap .cl-att-chip .cl-att-retry {
  position: relative; z-index: 1; border: 0; border-radius: 999px; padding: calc(4px * var(--k, 1)) calc(6px * var(--k, 1));
  background: var(--accent-grad); color: var(--on-accent); cursor: pointer;
  font: 700 calc(10px * var(--k, 1))/1 var(--font-body, 'Manrope', sans-serif);
}

/* 05.10 (снимки Марии, iPhone): при открытом окне «Сгенерировать фото» нижний блок вырастал выше экрана и полоса
   фото над полем вылезала поверх шапки. Теперь блок не выше экрана без шапки и строки названия чата,
   а лишнюю высоту забирает само окно генерации — оно прокручивается внутри */
@media (max-width: 880px) {
  #cl-wrap .cl-input-area:has(> #cl-genp.open) {
    max-height: calc(100vh - calc(130px * var(--clz, 1)));
    max-height: calc(100dvh - calc(130px * var(--clz, 1)));
  }
  #cl-wrap .cl-input-area:has(> #cl-genp.open) > * { flex-shrink: 0; }
  /* лента под окном всё равно закрыта; без этого крупный заголовок пустого чата просвечивал между фото и окном */
  #cl-wrap .cl-main:has(#cl-genp.open) > .cl-messages { visibility: hidden; }
  /* то же в Gemini и Grok: пустой чат + фото + настройки картинки — фото ложились на заголовок пустого чата */
  #cl-wrap .cl-main.cl-empty:has(#cl-attach[style*="flex"]):has(#gk-image-bar[style*="flex"], #gk-imgbar[style*="flex"]) > .cl-messages { visibility: hidden; }
  #cl-wrap .cl-input-area > #cl-genp.open {
    flex: 0 1 auto; min-height: calc(120px * var(--clz, 1));
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }

  /* 06.10 (круг 3 Грока, короткий iPhone SE): фото над полем — одна строка с прокруткой вбок, а не 2–3 строки вверх */
  #cl-wrap #cl-attach {
    flex-wrap: nowrap; justify-content: flex-start; align-self: stretch; max-width: 100%; min-width: 0;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #cl-wrap #cl-attach::-webkit-scrollbar { display: none; }
  #cl-wrap #cl-attach > * { flex-shrink: 0; }
  #cl-wrap #cl-attach > :first-child { margin-left: auto; }
  #cl-wrap #cl-attach > :last-child { margin-right: auto; }

  /* то же ограничение высоты — для настроек режима «Картинка» (Gemini — под полем, Grok — внутри поля):
     нижний блок не выше экрана без шапки, лишнее забирают сами настройки и прокручиваются внутри */
  #cl-wrap .cl-input-area:has(#gk-image-bar[style*="flex"], #gk-imgbar[style*="flex"]) {
    max-height: calc(100vh - calc(130px * var(--clz, 1)));
    max-height: calc(100dvh - calc(130px * var(--clz, 1)));
  }
  #cl-wrap .cl-input-area:has(#gk-image-bar[style*="flex"], #gk-imgbar[style*="flex"]) > * { flex-shrink: 0; }
  #cl-wrap .cl-input-area > .cl-input-box:has(> #gk-imgbar[style*="flex"]) { flex-shrink: 1; min-height: 0; }
  #cl-wrap .cl-input-box:has(> #gk-imgbar[style*="flex"]) > * { flex-shrink: 0; }
  #cl-wrap .cl-input-area > #gk-image-bar[style*="flex"],
  #cl-wrap .cl-input-box > #gk-imgbar[style*="flex"] {
    flex-shrink: 1; min-height: calc(88px * var(--clz, 1));
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
}

/* 06.10 (круг 3 Грока): «Дописываю ответ…» и «Переотправить вопрос» — строкой ПОД уже видимой частью ответа */
#cl-wrap .cl-msg-content .cl-mature,
#cl-wrap .cl-msg-content .cl-retry-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--k, 1)) calc(10px * var(--k, 1));
  margin-top: calc(10px * var(--k, 1)); color: var(--text-secondary);
}
/* 06.10 (Проба): пока ответ пишется, «Переотправить» у вопроса неактивна — иначе обрыв своего ответа и второй платный ход */
html body #cl-wrap:has(.cl-input-box.cl-gen) .cl-msg.user .cl-user-acts .cl-user-resend { opacity: .35 !important; pointer-events: none; cursor: default; }   /* вес выше, чем у opacity:1!important в chat_v2.css */

/* 07.10 (Мария, Xiaomi: «какое маленькое поле, где я читаю ответ»): открыта экранная клавиатура — html.cl-kb ставит код
   страницы (поле в фокусе и видимая высота окна сжалась на 20 % и больше). Строка названия чата и строка проекта прячутся,
   поле ввода — не выше 3 строк с прокруткой внутри, нижний отступ и подписи под полем — убраны: всё место — ответу.
   Клавиатура закрылась — класс снимается, всё как было. */
@media (max-width: 880px) {
  html.cl-kb body #cl-wrap #cl-mchat,
  html.cl-kb body #cl-wrap #cl-project-bar { display: none !important; }
  html.cl-kb body #cl-wrap #cl-input { max-height: calc(4.5em + 10px) !important; overflow-y: auto !important; }
  html.cl-kb body #cl-wrap .cl-main .cl-input-area { padding-bottom: calc(6px * var(--clz, 1)) !important; }
  html.cl-kb body #cl-wrap .cl-main .cm-foot,
  html.cl-kb body #cl-wrap .cl-main #cl-input-foot,
  html.cl-kb body #cl-wrap .cl-main #gk-mode-notes { display: none !important; }
}