/* Дополнения к app/styles.css для кабинета и админки: формы, таблицы,
   статусы. Всё, что уже есть в основном файле (карточки, модалка, чипсы,
   тост), переиспользуется как есть — иначе разъедется при первой же правке. */

/* ---------------- формы ---------------- */
.auth-wrap{ max-width:420px; margin:56px auto; }
.auth-wrap h1{ font-size:26px; margin:0 0 6px; }
.auth-wrap .lead{ color:var(--muted); font-size:13px; margin:0 0 22px; }

.f{ margin-bottom:14px; }
.f > label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.f input, .f select, .f textarea{
  width:100%; height:38px; padding:0 12px; font:inherit; font-size:13px;
  border:1px solid var(--line-2); border-radius:8px; background:#fff; color:var(--ink);
  transition:border-color .12s;
}
.f textarea{ height:auto; min-height:110px; padding:10px 12px; line-height:1.5; resize:vertical; }
.f input:focus, .f select:focus, .f textarea:focus{ outline:none; border-color:var(--accent); }
.f-row{ display:flex; gap:14px; } .f-row > *{ flex:1; }
.f-check{ display:flex; gap:9px; align-items:flex-start; font-size:12.5px; line-height:1.5; color:var(--ink-2); }
.f-check input{ width:auto; height:auto; margin-top:3px; flex:0 0 auto; }

.btn{
  height:38px; padding:0 18px; border-radius:8px; background:var(--accent); color:#fff;
  font-size:14px; font-weight:500; transition:background .12s, opacity .12s;
}
.btn:hover{ background:#3512cc; }
.btn[disabled]{ opacity:.4; cursor:default; }
.btn-sec{ height:34px; padding:0 14px; border-radius:8px; border:1px solid var(--line-2);
          font-size:13px; color:var(--ink); background:#fff; }
.btn-sec:hover{ background:var(--line); }
.btn-danger{ color:#a92c2c; }
.btn-sm{ height:30px; padding:0 12px; font-size:12px; border-radius:7px; }

/* ---------------- таблицы ---------------- */
.tbl{ width:100%; border-collapse:collapse; }
.tbl th{ text-align:left; font-size:11px; font-weight:500; color:var(--muted-2);
         text-transform:uppercase; letter-spacing:.04em; padding:0 10px 10px; }
.tbl td{ padding:11px 10px; border-top:1px solid var(--line); font-size:13px; vertical-align:middle; }
.tbl tr:hover td{ background:#fafafb; }

/* ---------------- панель ---------------- */
.panel{ border:1px solid var(--line-2); border-radius:var(--r-card); padding:20px; margin-bottom:20px; background:#fff; }
.panel h2{ font-size:17px; font-weight:600; margin:0 0 14px; letter-spacing:-.01em; }
.panel h3{ font-size:13px; font-weight:500; color:var(--muted); margin:22px 0 10px; }

/* статусы аватара */
.st{ font-size:10px; padding:4px 9px; border-radius:5px; font-weight:500; }
.st.published{ background:#e7f6ec; color:#1b7a3e; }
.st.sandbox{ background:#fdf1dd; color:#9a6412; }
.st.dev{ background:#efeaff; color:var(--accent); }

.balance-big{ font-size:32px; font-weight:600; letter-spacing:-.02em; }
.muted{ color:var(--muted); }
.right{ margin-left:auto; }
.empty-note{ color:var(--muted); font-size:13px; padding:22px 0; }

/* карточка навыка в редакторе */
.sk-card{ border:1px solid var(--line-2); border-radius:10px; padding:14px; margin-bottom:12px; }
.sk-card.is-off{ background:#fafafb; }
.sk-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:13px; }
.sk-head input{ width:auto; height:auto; }
.sk-head b{ font-weight:500; }

/* сетка карточек в админке */
.a-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
.a-card{ border:1px solid var(--line-2); border-radius:12px; padding:15px; cursor:pointer; transition:border-color .12s; }
.a-card:hover{ border-color:var(--accent); }
.a-card h4{ margin:0 0 3px; font-size:15px; font-weight:600; }
.a-card .sub{ font-size:12px; color:var(--muted); margin-bottom:10px; }
.a-card .meta{ font-size:11.5px; color:var(--muted-2); margin-top:8px; }

/* ── экран дозвона в модалке каталога ─────────────────────────────
   Тренажёр — отдельная страница, и её загрузка это несколько секунд пустоты
   между нажатием кнопки и лицом на экране. Закрываем их звонком: то же, что
   происходит, когда набираешь кому-то видеовызов. */
.dlg-call{
  position:absolute; inset:0; z-index:5; border-radius:14px;
  background:#12141c; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  animation:ovlIn .16s ease;
}
.dlg-call[hidden]{ display:none; }
.dlg-call .call-av{ position:relative; width:104px; height:104px; }
.dlg-call .call-av img{
  width:104px; height:104px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,.2);
}
.dlg-call .ring{
  position:absolute; inset:-10px; border-radius:50%;
  border:2px solid rgba(255,255,255,.55); animation:callring 1.6s ease-out infinite;
}
@keyframes callring{ 0%{ transform:scale(.9); opacity:.7 } 100%{ transform:scale(1.25); opacity:0 } }
.dlg-call .call-name{ font-size:17px; font-weight:600; letter-spacing:-.01em; }
.dlg-call .call-state{ font-size:12.5px; color:#b9bdc9; }
.dlg-call .call-state::after{ content:""; animation:calldots 1.4s steps(4,end) infinite; }
@keyframes calldots{ 0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."} }

/* ── библиотека фото и теги в карточке клиента ────────────────────
   Раньше фото задавалось строкой с адресом, а теги — строкой через запятую.
   И то и другое требовало знать, что уже есть в системе, — а этого нигде
   не было видно. */
.photo-row{ display:flex; gap:18px; align-items:flex-start; margin-top:6px; }
.photo-cur{
  width:96px; height:96px; flex:none; border-radius:12px; overflow:hidden;
  background:#f2f3f7; border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center;
}
.photo-cur img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-cur span{ font-size:11.5px; color:var(--muted-2); }

.tag-pick{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px; }
.tag-chip{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid var(--line-2); border-radius:999px; padding:5px 12px;
  font-size:12.5px; user-select:none; transition:border-color .12s, background .12s;
}
.tag-chip.on{ border-color:var(--accent); background:rgba(67,24,255,.06); color:var(--accent); }
.tag-chip input{ width:13px; height:13px; margin:0; }
.tag-add{ display:flex; gap:8px; align-items:center; }
.tag-add input{ max-width:220px; }

.lib-ovl{
  position:fixed; inset:0; z-index:80; background:rgba(16,20,45,.45);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.lib{
  width:100%; max-width:760px; max-height:80vh; overflow:auto;
  background:#fff; border-radius:14px; padding:20px 22px;
  box-shadow:0 24px 64px rgba(0,0,0,.28);
}
.lib-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.lib-head b{ font-size:16px; font-weight:600; }
.lib-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:14px; }
.lib-grid figure{
  margin:0; cursor:pointer; position:relative; border:1px solid var(--line-2);
  border-radius:10px; overflow:hidden; transition:border-color .12s;
}
.lib-grid figure:hover{ border-color:var(--accent); }
.lib-grid img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; background:#f2f3f7; }
.lib-grid figcaption{
  font-size:11px; color:var(--muted); padding:6px 8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lib-del{
  position:absolute; right:5px; top:5px; width:22px; height:22px; border:0; cursor:pointer;
  border-radius:50%; background:rgba(16,20,45,.55); color:#fff; font-size:15px; line-height:20px;
}

/* ── предпросмотр системного промпта ──────────────────────────────
   Показывать одну простыню мало: методологу нужно видеть, какой абзац откуда
   взялся, иначе непонятно, что именно править. */
.i-btn{
  width:20px; height:20px; flex:none; border:1px solid var(--line-2); border-radius:50%;
  background:#fff; color:var(--muted); cursor:pointer;
  font:600 12px/18px Geist,system-ui,sans-serif; padding:0;
  transition:border-color .12s, color .12s;
}
.i-btn:hover{ border-color:var(--accent); color:var(--accent); }
.prompt-view{ max-width:840px; }
.pp{ margin-bottom:18px; }
.pp-h{ display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
.pp-h b{ font-size:13px; font-weight:600; }
.pp-h span{ font-size:11.5px; color:var(--muted-2); }
.pp pre{
  margin:0; padding:12px 14px; border-radius:9px; background:#f7f8fb;
  border:1px solid var(--line-2); white-space:pre-wrap; word-break:break-word;
  font:12.5px/1.65 Geist,system-ui,sans-serif; color:var(--ink);
}
.pp-empty{ margin:0; font-size:12.5px; color:#b4451f; }

/* ── повторяющиеся строки как поля ────────────────────────────────
   Списки одинаковых записей — настрои, типы реплик, уровни раскрытости —
   правились одной простынёй с колонками через палку. Формат для программиста:
   забытая палка молча съедала поле. */
.rs{
  display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap;
  padding:12px 14px; margin-bottom:10px;
  border:1px solid var(--line-2); border-radius:10px; background:#fcfcfd;
}
.rs-f{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.rs-f > span{ font-size:11px; color:var(--muted-2); letter-spacing:.01em; }
.rs-f input, .rs-f textarea{ width:100%; font-size:12.5px; }
.rs-f textarea{ min-height:52px; resize:vertical; }
.rs-del{
  align-self:center; width:26px; height:26px; flex:none; border:0; cursor:pointer;
  border-radius:7px; background:#f2f3f7; color:var(--muted); font-size:17px; line-height:24px;
}
.rs-del:hover{ background:#fde8e2; color:#b4451f; }

/* Подписи к подстановкам: что берётся из карточки, а что считает тренажёр. */
.subs{ margin-top:10px; display:flex; flex-direction:column; gap:5px; }
.subs > div{ display:flex; gap:10px; align-items:baseline; font-size:11.5px; }
.subs code{
  flex:none; background:#eef0f6; border-radius:5px; padding:1px 6px;
  font:12px ui-monospace,Menlo,monospace; color:var(--accent);
}
.subs span{ color:var(--muted); }
.subs span.calc{ color:var(--muted-2); font-style:italic; }
.subs i{ font-style:italic; }
.rs-f.rs-r{ align-items:center; }
.rs-f.rs-r input{ width:16px; height:16px; margin:4px 0 0; cursor:pointer; }