/* Веб-кабинет A02. Без сборки и без внешних зависимостей: NAS раздаёт эти файлы как есть. */

:root {
  --фон: #f6f6f4;
  --карточка: #ffffff;
  --текст: #1c1c1a;
  --тихий: #6d6d68;
  --рамка: #e1e0db;
  --акцент: #1f5f4f;
  --акцент-текст: #ffffff;
  --тревога: #a33a2a;
  --тень: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.04);
  --радиус: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --фон: #16171a;
    --карточка: #1f2126;
    --текст: #e9e9e6;
    --тихий: #9a9a94;
    --рамка: #2e3037;
    --акцент: #4fa88f;
    --акцент-текст: #10221d;
    --тревога: #e08b7c;
    --тень: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--фон);
  color: var(--текст);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.обёртка { max-width: 56rem; margin: 0 auto; padding: 0 1rem; }

/* Правило Петра: кнопки не у самого нижнего края экрана, минимум на 40 px выше —
   там жесты Android и палец промахивается. Отсюда запас снизу у всего экрана. */
#экран { padding-bottom: calc(40px + 4rem + env(safe-area-inset-bottom, 0px)); }

/* ── шапка ───────────────────────────────────────────────────────────────── */
#шапка { background: var(--карточка); border-bottom: 1px solid var(--рамка); position: sticky; top: 0; z-index: 5; }
.шапка-строка { display: flex; align-items: center; gap: .75rem; min-height: 3.25rem; }
.лого { font-weight: 600; text-decoration: none; color: inherit; }
.кто { margin-left: auto; text-align: right; line-height: 1.25; font-size: .85rem; }
.кто .тихо { display: block; }

/* ── общее ───────────────────────────────────────────────────────────────── */
h1 { font-size: 1.35rem; margin: 1.25rem 0 .25rem; }
h2 { font-size: 1rem; margin: 1.5rem 0 .5rem; color: var(--тихий); font-weight: 600; }
.тихо { color: var(--тихий); font-size: .85rem; }
.ошибка { color: var(--тревога); }

button, .кнопка {
  font: inherit; cursor: pointer; border-radius: 9px; border: 1px solid var(--рамка);
  background: var(--карточка); color: var(--текст); padding: .5rem .9rem;
  text-decoration: none; display: inline-block;
}
button:hover, .кнопка:hover { border-color: var(--акцент); }
button:disabled { opacity: .5; cursor: default; }
.главная { background: var(--акцент); color: var(--акцент-текст); border-color: var(--акцент); font-weight: 500; }
.плоская { border-color: transparent; background: transparent; color: var(--тихий); padding: .35rem .5rem; }

input, textarea {
  font: inherit; width: 100%; padding: .65rem .8rem; border-radius: 9px;
  border: 1px solid var(--рамка); background: var(--карточка); color: var(--текст);
}
input:focus, textarea:focus { outline: 2px solid var(--акцент); outline-offset: -1px; }

/* ── вход ────────────────────────────────────────────────────────────────── */
.вход { max-width: 22rem; margin: 15vh auto 0; text-align: center; }
.вход h1 { font-size: 1.6rem; }
.вход input { text-align: center; letter-spacing: .5em; font-size: 1.5rem; padding: .7rem .5rem .7rem 1rem; }
.вход button { width: 100%; margin-top: .75rem; padding: .7rem; }

/* ── список дел ──────────────────────────────────────────────────────────── */
.строка-заголовка { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.строка-заголовка h1 { margin-right: auto; }

.дело {
  display: block; text-decoration: none; color: inherit; background: var(--карточка);
  border: 1px solid var(--рамка); border-radius: var(--радиус); padding: .85rem 1rem;
  margin-bottom: .6rem; box-shadow: var(--тень);
}
.дело:hover { border-color: var(--акцент); }
.дело-имя { font-weight: 500; }
.дело-низ { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .35rem; }

.метка {
  font-size: .75rem; padding: .15rem .55rem; border-radius: 99px; white-space: nowrap;
  border: 1px solid var(--рамка); color: var(--тихий);
}
.метка.принято   { border-color: #b9843c; color: #8a5f22; }
.метка.работа    { border-color: #3c6fb9; color: #2f5896; }
.метка.разобрано { border-color: var(--акцент); color: var(--акцент); }
.метка.ошибка    { border-color: var(--тревога); color: var(--тревога); }
@media (prefers-color-scheme: dark) {
  .метка.принято { color: #d7a45c; }
  .метка.работа  { color: #7fa9e8; }
}

/* ── опись ───────────────────────────────────────────────────────────────── */
.опись { background: var(--карточка); border: 1px solid var(--рамка); border-radius: var(--радиус); overflow: hidden; }
.док { display: flex; gap: .75rem; align-items: center; padding: .6rem .9rem; border-top: 1px solid var(--рамка); }
.док:first-child { border-top: none; }
.док-текст { min-width: 0; }
.док-имя { overflow-wrap: anywhere; }
.док .кнопка { margin-left: auto; flex: none; font-size: .85rem; padding: .35rem .7rem; }

.пусто { background: var(--карточка); border: 1px dashed var(--рамка); border-radius: var(--радиус);
         padding: 1.25rem; text-align: center; color: var(--тихий); }

/* ── чат ─────────────────────────────────────────────────────────────────── */
.чат { background: var(--карточка); border: 1px solid var(--рамка); border-radius: var(--радиус);
       display: flex; flex-direction: column; margin: .5rem 0 2rem; }
.чат-лента { padding: .9rem; display: flex; flex-direction: column; gap: .7rem; max-height: 26rem; overflow-y: auto; }
.реплика { max-width: 90%; padding: .55rem .8rem; border-radius: 12px; border: 1px solid var(--рамка); }
.реплика.юрист { align-self: flex-end; background: var(--акцент); color: var(--акцент-текст); border-color: var(--акцент); }
.реплика.ассистент { align-self: flex-start; }
.реплика p { margin: 0 0 .4rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.источники { font-size: .78rem; color: var(--тихий); border-top: 1px dashed var(--рамка); padding-top: .35rem; }
.чат-низ { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid var(--рамка); }
.чат-низ textarea { resize: none; min-height: 2.6rem; max-height: 8rem; }

.подсказка {
  position: fixed; left: 50%; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--текст); color: var(--фон); padding: .55rem 1rem; border-radius: 99px;
  font-size: .85rem; box-shadow: var(--тень); z-index: 20; max-width: calc(100vw - 2rem);
}
.подсказка.плохо { background: var(--тревога); color: #fff; }

/* ── новое дело ──────────────────────────────────────────────────────────── */
.новое { background: var(--карточка); border: 1px solid var(--рамка); border-radius: var(--радиус);
         padding: .9rem 1rem; margin-bottom: .9rem; display: grid; gap: .5rem; }
.новое label { font-size: .85rem; color: var(--тихий); }
.новое-кнопки { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.новое-кнопки .главная { flex: 1 1 14rem; padding: .75rem 1rem; }

/* ── карточка дела: состояние и действия ─────────────────────────────────── */
.верх-дела h1 { margin-top: .25rem; }
.состояние { background: var(--карточка); border: 1px solid var(--рамка); border-radius: var(--радиус);
             padding: .85rem 1rem; margin: .6rem 0 .8rem; }
.состояние-главное { font-size: 1.15rem; font-weight: 600; }
.состояние-ещё { color: var(--тихий); font-size: .9rem; margin-top: .15rem; }
.состояние.идёт .состояние-главное::after {
  content: ''; display: inline-block; width: .55rem; height: .55rem; margin-left: .5rem;
  border-radius: 50%; background: var(--акцент); vertical-align: middle;
  animation: пульс 1.4s ease-in-out infinite;
}
.состояние.плохо { border-color: var(--тревога); }
.состояние.плохо .состояние-главное { color: var(--тревога); }
@keyframes пульс { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }

.шаги { list-style: none; display: flex; gap: .25rem; padding: 0; margin: .7rem 0 0; font-size: .72rem;
        color: var(--тихий); }
.шаги li { flex: 1; text-align: center; padding-top: .45rem; border-top: 3px solid var(--рамка); }
.шаги li.пройден { border-top-color: var(--акцент); }
.шаги li.сейчас { border-top-color: var(--акцент); color: var(--текст); font-weight: 600; }

.действия { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; margin-bottom: .5rem; }
.действия .снять { text-align: center; font-size: 1.1rem; padding: .85rem 1rem; min-height: 3.25rem; }
.действия > .кнопка:not(.снять), .действия > span { align-self: flex-start; }

/* ── опись: подсветка документа из ответа чата ───────────────────────────── */
.док { position: relative; }
.док.подсвечен { animation: подсветка 3.5s ease-out; }
.док[data-лист]::before {
  content: attr(data-лист); position: absolute; left: .9rem; top: -.1rem; font-size: .7rem;
  color: var(--акцент-текст); background: var(--акцент); padding: 0 .4rem; border-radius: 99px;
}
@keyframes подсветка { 0%, 60% { background: color-mix(in srgb, var(--акцент) 22%, transparent); } 100% { background: transparent; } }

/* ── чат: ожидание и источники ───────────────────────────────────────────── */
.реплика.ждём { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.реплика.ждём p { margin: 0; }
.точки { display: inline-flex; gap: .2rem; }
.точки i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--тихий); display: block;
           animation: пульс 1.2s ease-in-out infinite; }
.точки i:nth-child(2) { animation-delay: .2s; }
.точки i:nth-child(3) { animation-delay: .4s; }
.счётчик { font-variant-numeric: tabular-nums; }
.чат-низ textarea:disabled { opacity: .6; }

.источники { display: block; }
.источники ul { list-style: none; padding: 0; margin: .25rem 0 0; display: grid; gap: .25rem; }
.источник { color: var(--акцент); text-decoration: underline; text-underline-offset: 2px; }
.панель-документа { margin: .35rem 0 .2rem; padding: .55rem .7rem; border: 1px solid var(--рамка);
                    border-radius: 9px; color: var(--текст); font-size: .85rem; background: var(--фон); }
.панель-кнопки { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .45rem; }
.панель-кнопки .кнопка, .панель-кнопки button { font-size: .85rem; padding: .35rem .7rem; }

@media (prefers-reduced-motion: reduce) {
  .состояние.идёт .состояние-главное::after, .точки i, .док.подсвечен { animation: none; }
}