/* ============================================================================
   ai-workspace.css — паттерн «AI Assistant Workspace».
   Чистый светлый рабочий экран AI-агента: чат по центру + правая панель агента
   + composer снизу. Опирается только на токены дизайн-системы (tokens.css).
   ============================================================================ */

.aiw {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg-app);
}

/* ----------------------------- Header ----------------------------- */
.aiw__head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface);
}
.aiw__task {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: var(--c-ink-800);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 6px 10px;
  cursor: pointer;
}
.aiw__task:hover { background: var(--bg-hover); }
.aiw__head-spacer { flex: 1 1 auto; }
.aiw__ctx-btn { display: none; }

/* ----------------------------- Body ----------------------------- */
.aiw__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
.aiw__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background-image: var(--grad-canvas);
}
.aiw__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
}
.aiw__canvas {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* ----------------------------- Сообщения ----------------------------- */
.aiw-msg { display: flex; }
.aiw-msg--user { justify-content: flex-end; }
.aiw-msg--assistant { justify-content: flex-start; }
.aiw-msg__bubble {
  max-width: 720px;
  border-radius: 16px;
  padding: 16px 20px;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--c-ink-800);
  animation: ez-slide-up 0.32s cubic-bezier(.2,.8,.2,1) both;
}
.aiw-msg--user .aiw-msg__bubble { background: var(--c-surface-2); }
.aiw-msg--assistant .aiw-msg__bubble {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-xs);
  max-width: 760px;
}
.aiw-msg__bubble ul { margin: var(--sp-2) 0; padding-left: 18px; }
.aiw-msg__bubble li { margin: 3px 0; }
.aiw-msg__bubble strong { font-weight: var(--fw-semibold); }
.aiw-msg__bubble code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-inset); padding: 1px 5px; border-radius: 5px; }
.aiw-msg__fade {
  position: relative;
  max-height: 168px;
  overflow: hidden;
}
.aiw-msg__fade::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: linear-gradient(transparent, var(--c-surface-2));
  pointer-events: none;
}
.aiw-msg--assistant .aiw-msg__fade::after { background: linear-gradient(transparent, var(--bg-surface)); }
.aiw-msg__more {
  background: none; border: none; cursor: pointer;
  color: var(--c-ink-500); font-size: var(--fs-base); font-weight: var(--fw-medium);
  padding: 4px 0; margin-top: 2px;
}
.aiw-msg__more:hover { color: var(--c-ink-800); }
.aiw-msg__actions { display: flex; gap: 2px; justify-content: flex-end; margin-top: 4px; color: var(--c-ink-400); }

/* короткий пузырь по содержимому (статус «выполняет», вопрос) — не на всю ширину */
.aiw-msg__bubble--tight { width: fit-content; max-width: 100%; }

/* ------------------- Choices (вопрос → компактный блок-кнопки) ------------------- */
.aiw-choiceblock {
  width: 100%; max-width: 560px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  outline: none;
  animation: ez-slide-up 0.24s cubic-bezier(.2,.8,.2,1) both;
}
.aiw-choiceblock:focus-visible { box-shadow: var(--shadow-md), 0 0 0 2px var(--ring); }
.aiw-choiceblock__head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 11px 14px;
  font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--c-ink-800);
  border-bottom: 1px solid var(--border-default);
}
.aiw-choiceblock__head span { flex: 1 1 auto; }
.aiw-choiceblock__close {
  flex-shrink: 0; border: none; background: none; cursor: pointer;
  color: var(--c-ink-400); display: inline-flex; padding: 2px; border-radius: var(--r-sm);
}
.aiw-choiceblock__close:hover { color: var(--c-ink-700); background: var(--bg-hover); }
.aiw-choiceblock__list { display: flex; flex-direction: column; }

/* плотная строка-вариант */
.aiw-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 9px 14px;
  border: none; border-bottom: 1px solid var(--c-line);
  background: none; cursor: pointer;
  font-family: inherit; font-size: var(--fs-md); color: var(--c-ink-800);
  transition: background var(--t-fast);
}
.aiw-opt:last-child { border-bottom: none; }
.aiw-opt:hover, .aiw-opt.is-active { background: var(--bg-hover); }
.aiw-opt__num {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--r-full);
  display: grid; place-items: center;
  font-size: 12px; font-weight: var(--fw-semibold);
  background: var(--bg-inset); color: var(--c-ink-500);
}
.aiw-opt.is-active .aiw-opt__num { background: var(--c-line-2); color: var(--c-ink-700); }
.aiw-opt__label { flex: 1 1 auto; }
.aiw-opt__enter { color: var(--c-ink-400); flex-shrink: 0; }
.aiw-opt__check { color: var(--c-brand); flex-shrink: 0; }
.aiw-opt.is-picked { background: var(--c-brand-soft); }
.aiw-opt.is-picked .aiw-opt__num { background: var(--c-brand); color: #fff; }

/* строка «свой вариант» + Skip */
.aiw-opt--other { cursor: default; color: var(--c-ink-500); }
.aiw-opt--other:hover { background: none; }
.aiw-opt__num--pencil { background: none; color: var(--c-ink-400); }
.aiw-opt__skip {
  flex-shrink: 0; border: 1px solid var(--c-line-2); background: var(--bg-surface);
  border-radius: var(--r-sm); padding: 4px 12px; cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink-700);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.aiw-opt__skip:hover { background: var(--bg-hover); border-color: var(--c-line-3); }

.aiw-choiceblock__foot {
  padding: 8px 14px;
  border-top: 1px solid var(--border-default);
  font-size: var(--fs-sm); color: var(--c-ink-400);
}

/* ----------------------------- Thought process ----------------------------- */
.aiw-thought { max-width: 760px; }
.aiw-thought__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--c-ink-500); font-size: var(--fs-base); font-weight: var(--fw-medium);
  padding: 2px 0;
}
.aiw-thought__toggle:hover { color: var(--c-ink-700); }
.aiw-thought__toggle svg { transition: transform var(--t-fast); }
.aiw-thought.is-open .aiw-thought__toggle svg { transform: rotate(90deg); }
.aiw-thought__body {
  margin-top: var(--sp-2);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--border-default);
  display: flex; flex-direction: column; gap: var(--sp-2);
  animation: ez-slide-up 0.2s ease both;
}
.aiw-thought__step { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-base); color: var(--c-ink-700); }
.aiw-thought__step .spinner { margin-top: 1px; }

/* ----------------------------- Composer ----------------------------- */
.aiw__composer-wrap { flex-shrink: 0; padding: var(--sp-3) var(--sp-6) var(--sp-5); display: flex; justify-content: center; }
.aiw-composer {
  width: 100%;
  max-width: 820px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 24px;
  box-shadow: 0 8px 30px rgba(31, 30, 29, 0.06);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.aiw-composer.is-focus { border-color: var(--c-line-3); box-shadow: 0 10px 34px rgba(31,30,29,.1); }
.aiw-composer__field {
  width: 100%; border: none; outline: none; resize: none; background: transparent;
  font-family: var(--font-sans); font-size: var(--fs-md); color: var(--c-ink-800);
  line-height: 1.5; max-height: 140px; padding: 6px 0;
}
.aiw-composer__field::placeholder { color: var(--c-ink-400); }
.aiw-composer__row { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.aiw-composer__spacer { flex: 1 1 auto; }
.aiw-composer__model { font-size: var(--fs-sm); color: var(--c-ink-500); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.aiw-composer__send {
  width: 34px; height: 34px; border-radius: var(--r-full); border: none;
  display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
  background: var(--c-ink-300); color: #fff; transition: background var(--t-fast);
}
.aiw-composer__send.is-active { background: var(--c-brand); }
.aiw-composer__send.is-stop { background: var(--c-danger); }
.aiw-composer__send:disabled { cursor: default; }

/* ============================ Правая панель ============================ */
.aiw-panel {
  flex-shrink: 0;
  width: 348px;
  border-left: 1px solid var(--border-default);
  background: var(--bg-surface);
  overflow-y: auto;
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.aiw-panel__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink-500); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 var(--sp-1) var(--sp-1); }

.agent-card {
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.agent-card:hover { box-shadow: var(--shadow-sm); border-color: var(--c-line-3); }
.agent-card__head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); cursor: pointer; user-select: none;
}
.agent-card__ico { color: var(--c-ink-500); display: inline-flex; }
.agent-card__name { font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--c-ink-800); }
.agent-card__chev { margin-left: auto; color: var(--c-ink-400); transition: transform var(--t-fast); }
.agent-card.is-open .agent-card__chev { transform: rotate(180deg); }
.agent-card__preview { padding: 0 var(--sp-4) var(--sp-4); }
.agent-card__hint { font-size: var(--fs-sm); color: var(--c-ink-500); line-height: 1.45; }
.agent-card__body {
  padding: var(--sp-2) var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--border-default);
  animation: ez-slide-up 0.2s ease both;
}

/* мини-stepper (свернутое состояние Progress) */
.mini-steps { display: flex; align-items: center; gap: 4px; margin-bottom: var(--sp-3); }
.mini-steps__dot {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--c-line-3); color: var(--c-ink-400); background: var(--bg-surface);
  font-size: 11px;
}
.mini-steps__dot.is-done { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.mini-steps__dot.is-active { border-color: var(--c-brand); color: var(--c-brand); }
.mini-steps__dot.is-active::after { content: ""; position: absolute; }
.mini-steps__line { flex: 0 0 14px; height: 1.5px; background: var(--c-line-2); }
.mini-steps__line.is-done { background: var(--c-brand); }

/* список этапов (раскрытое Progress) */
.tstep { display: flex; gap: var(--sp-3); padding: var(--sp-2) 0; }
.tstep__ico { flex-shrink: 0; margin-top: 1px; }
.tstep__name { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--c-ink-800); }
.tstep__desc { font-size: var(--fs-sm); color: var(--c-ink-500); }
.tstep--pending .tstep__name { color: var(--c-ink-400); }

/* файлы */
.tfile { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border-radius: var(--r-md); }
.tfile:hover { background: var(--bg-hover); }
.tfile__ico { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--bg-inset); color: var(--c-ink-500); flex-shrink: 0; }
.tfile__name { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--c-ink-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tfile__meta { font-size: var(--fs-xs); color: var(--c-ink-400); }
.tfile__actions { margin-left: auto; display: flex; gap: 0; opacity: 0; transition: opacity var(--t-fast); }
.tfile:hover .tfile__actions { opacity: 1; }
.tfile__group { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-ink-400); text-transform: uppercase; letter-spacing: 0.04em; margin: var(--sp-3) 0 2px var(--sp-2); }
.tfile__group:first-child { margin-top: 0; }

/* context секции */
.tctx__sec { margin-bottom: var(--sp-3); }
.tctx__sec-h { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-ink-400); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--sp-2); display: flex; align-items: center; gap: 6px; }
.tctx__item { display: flex; align-items: center; gap: var(--sp-2); padding: 4px 0; font-size: var(--fs-base); color: var(--c-ink-700); }
.tctx__item svg { color: var(--c-ink-400); flex-shrink: 0; }
.tool-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--c-line); border-radius: var(--r-full); font-size: var(--fs-sm); color: var(--c-ink-700); background: var(--bg-surface); }
.tool-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* мини-визуал Context (наложенные карточки) */
.ctx-stack { position: relative; width: 44px; height: 32px; }
.ctx-stack span { position: absolute; width: 26px; height: 32px; border: 1px solid var(--c-line-3); border-radius: 4px; background: var(--bg-surface); }
.ctx-stack span:nth-child(1) { left: 0; transform: rotate(-8deg); }
.ctx-stack span:nth-child(2) { left: 9px; }
.ctx-stack span:nth-child(3) { left: 18px; transform: rotate(8deg); }

.aiw-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-12) var(--sp-6); color: var(--c-ink-500); margin: auto; }
.aiw-empty__ico { width: 52px; height: 52px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--c-brand-soft); color: var(--c-brand); }

/* ----------------------------- Адаптив ----------------------------- */
@media (max-width: 1100px) {
  .aiw-panel--inline { display: none; }
  .aiw__ctx-btn { display: inline-flex; }
}
@media (max-width: 640px) {
  .aiw__scroll { padding: var(--sp-5) var(--sp-3) var(--sp-4); }
  .aiw__composer-wrap { padding: var(--sp-3); }
  .aiw-msg__bubble { max-width: 100%; }
}

/* drawer-вариант панели (tablet/mobile) */
.aiw-panel--drawer { width: 100%; border-left: none; padding: 0; }
.aiw-tabs { display: flex; gap: 4px; padding: 4px; background: var(--bg-inset); border-radius: var(--r-md); margin-bottom: var(--sp-3); }
.aiw-tabs button { flex: 1; appearance: none; border: none; background: none; padding: 7px; border-radius: var(--r-sm); font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--c-ink-500); cursor: pointer; }
.aiw-tabs button.is-active { background: var(--bg-surface); color: var(--c-ink-800); box-shadow: var(--shadow-xs); }

/* dropdown задачи: выровненные иконки в фиксированной колонке */
.aiw-menu-opt { justify-content: flex-start; gap: var(--sp-2); }
.aiw-menu-opt__ico { width: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-ink-500); flex-shrink: 0; }
.aiw-menu-opt.is-selected .aiw-menu-opt__ico, .aiw-menu-opt:hover .aiw-menu-opt__ico { color: var(--c-brand); }