/* Цвета берутся из темы телеграма: приложение должно выглядеть частью клиента,
   а не чужой страницей внутри него. Значения в скобках — запасные, если
   Telegram их не передал (например, при открытии в обычном браузере). */
:root {
  --fon: var(--tg-theme-bg-color, #ffffff);
  --fon-vtoroy: var(--tg-theme-secondary-bg-color, #f3f4f6);
  --tekst: var(--tg-theme-text-color, #16181c);
  --tekst-tihiy: var(--tg-theme-hint-color, #8b8f96);
  --ssylka: var(--tg-theme-link-color, #2f80ed);
  --granitsa: color-mix(in srgb, var(--tekst-tihiy) 22%, transparent);

  --srochno: #dc4c3e;
  --vnimanie: #e5a443;
  --spokoyno: #4a9d5f;
  --nizkiy: #8b8f96;

  --radius: 12px;
  --otstup: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--fon);
  color: var(--tekst);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ekran {
  padding: 0 max(var(--otstup), env(safe-area-inset-left))
           calc(76px + env(safe-area-inset-bottom))
           max(var(--otstup), env(safe-area-inset-right));
}

/* Шапка */
.shapka { padding: 18px 0 10px; }
.shapka-verh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.podpis { margin: 4px 0 0; color: var(--tekst-tihiy); font-size: 13px; }
.obnovit {
  border: none; background: none; color: var(--tekst-tihiy);
  font-size: 20px; line-height: 1; padding: 4px 6px; cursor: pointer;
  border-radius: 8px;
}
.obnovit:active { background: var(--fon-vtoroy); }
.obnovit[data-krutitsya] { animation: krug 0.9s linear infinite; }
@keyframes krug { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .obnovit[data-krutitsya] { animation: none; } }

/* Сводка */
.svodka {
  background: var(--fon-vtoroy); border-radius: var(--radius);
  padding: 14px; margin-bottom: 18px;
}
.svodka-ryad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.plitka { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plitka-n { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.plitka-p { font-size: 12px; color: var(--tekst-tihiy); }
.plitka-blok .plitka-n { color: var(--vnimanie); }
.plitka-sroch .plitka-n { color: var(--srochno); }

.polosy { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.polosa-ryad { display: grid; grid-template-columns: 5.5rem 1fr 2rem; align-items: center; gap: 10px; }
.polosa-imya { font-size: 12px; color: var(--tekst-tihiy); }
.polosa { height: 6px; border-radius: 3px; background: var(--granitsa); overflow: hidden; }
.polosa i { display: block; height: 100%; width: 0; background: var(--srochno); border-radius: 3px; }
.polosa i.polosa-tihaya { background: var(--tekst-tihiy); }
.polosa-n { font-size: 12px; color: var(--tekst-tihiy); text-align: right; font-variant-numeric: tabular-nums; }

/* Список задач */
.spisok { display: flex; flex-direction: column; }
.razdel { margin: 2px 0 18px; }
.razdel-imya {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--tekst-tihiy); margin: 0 0 6px;
}
.zadacha {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--granitsa);
  background: none; border-left: 0; border-right: 0; border-top: 0;
  width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer;
}
.zadacha:last-child { border-bottom: none; }
.zadacha:active { background: var(--fon-vtoroy); }
.tochka {
  width: 11px; height: 11px; border-radius: 50%; margin-top: 5px;
  border: 2px solid var(--nizkiy); justify-self: center;
}
.tochka-srochno { border-color: var(--srochno); background: color-mix(in srgb, var(--srochno) 22%, transparent); }
.tochka-vnimanie { border-color: var(--vnimanie); }
.tochka-spokoyno { border-color: var(--spokoyno); }
.zadacha-telo { min-width: 0; }
.zadacha-imya { display: block; overflow-wrap: anywhere; }
.zadacha-niz {
  display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px;
  font-size: 12px; color: var(--tekst-tihiy);
}
.srok-proshel { color: var(--srochno); font-weight: 600; }
.srok-blizko { color: var(--vnimanie); }
.metka {
  font-size: 11px; padding: 1px 6px; border-radius: 6px;
  background: var(--fon-vtoroy); color: var(--tekst-tihiy);
}
.metka-blok { color: var(--vnimanie); }

.pusto { color: var(--tekst-tihiy); padding: 28px 0; text-align: center; }
.oshibka { color: var(--srochno); padding: 20px 0; }
.snoska { color: var(--tekst-tihiy); font-size: 12px; margin: 10px 0 0; }

/* Шторка с подробностями */
.shtorka { position: fixed; inset: 0; z-index: 20; }
.shtorka-fon { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.shtorka-list {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--fon); border-radius: 16px 16px 0 0;
  padding: 8px max(var(--otstup), env(safe-area-inset-left))
           calc(20px + env(safe-area-inset-bottom))
           max(var(--otstup), env(safe-area-inset-right));
  max-height: 82vh; overflow-y: auto;
}
.shtorka-ruchka {
  width: 36px; height: 4px; border-radius: 2px; background: var(--granitsa);
  margin: 4px auto 12px;
}
.shtorka-list h2 { margin: 0 0 12px; font-size: 18px; line-height: 1.3; }
.shtorka-polya { margin: 0; display: grid; grid-template-columns: 7.5rem 1fr; gap: 6px 10px; font-size: 14px; }
.shtorka-polya dt { color: var(--tekst-tihiy); }
.shtorka-polya dd { margin: 0; }
.shtorka-kommentariy { margin-top: 16px; }
.shtorka-kommentariy h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--tekst-tihiy); margin: 0 0 6px; font-weight: 600;
}
.shtorka-kommentariy p { margin: 0; white-space: pre-wrap; }
.shtorka-kto { color: var(--tekst-tihiy); font-size: 12px; margin-top: 6px !important; }
.shtorka-zakryt {
  margin-top: 18px; width: 100%; padding: 12px; border: none;
  border-radius: 10px; background: var(--fon-vtoroy); color: var(--tekst);
  font: inherit; font-weight: 600; cursor: pointer;
}

/* Сворачиваемые блоки шторки: описание и вывод по комментариям.
   Шторка и без них длинная, а описание бывает на несколько экранов —
   тогда до заметок и кнопок пришлось бы листать через весь текст. */
.svernuto { margin-top: 16px; }
.svernuto-verh {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 8px; min-width: 0;
}
.svernuto-glava {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--tekst-tihiy); text-align: left;
}
.svernuto-strelka { font-size: 10px; line-height: 1; transition: transform 0.12s linear; }
.svernuto-glava[aria-expanded="false"] .svernuto-strelka { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .svernuto-strelka { transition: none; } }
/* Свёрнутое описание всё равно показывает первую строку: иначе непонятно,
   стоит ли разворачивать. */
/* Кнопка в ряду с заголовком — не главное действие шторки: она не должна
   перевешивать сам заголовок. */
.svernuto-verh .knopka { font-size: 13px; padding: 6px 10px; }
.svernuto-kratko {
  margin: 0; color: var(--tekst-tihiy); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.svernuto-nota { margin: 6px 0 0; font-size: 12px; color: var(--tekst-tihiy); }

.opisanie-tekst {
  margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Вывод по комментариям — пересказ модели. Вид у него намеренно другой,
   чем у заметок владельца: карточка на втором фоне с полосой слева
   и подписью, откуда текст взялся. Заметки ниже — плоский список
   на основном фоне, перепутать их нельзя. */
.vyvod {
  background: var(--fon-vtoroy); border-radius: var(--radius);
  border-left: 3px solid var(--ssylka);
  padding: 10px 12px; margin-top: 4px;
}
.vyvod-tekst { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.vyvod-podpis { margin: 8px 0 0; font-size: 11px; line-height: 1.35; color: var(--tekst-tihiy); }
/* Запасной вариант — не вывод модели, а последний комментарий как есть.
   Другой цвет полосы, чтобы это было видно до чтения подписи. */
.vyvod-zapasnoy { border-left-color: var(--vnimanie); }
.vyvod-plohoy { border-left-color: var(--srochno); }
.vyvod-plohoy .vyvod-tekst { color: var(--srochno); }
.vyvod-tihiy { border-left-color: var(--granitsa); }
.vyvod-tihiy .vyvod-tekst { color: var(--tekst-tihiy); }

/* Вкладки снизу */
.vkladki {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--fon); border-top: 1px solid var(--granitsa);
  padding-bottom: env(safe-area-inset-bottom);
}
.vkladka {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 4px; border: none; background: none; cursor: pointer;
  color: var(--tekst-tihiy); font: inherit; font-size: 11px;
}
.vkladka .znak { font-size: 17px; line-height: 1; }
.vkladka-vybrana { color: var(--srochno); }

/* Чипы проектов */
.chipy {
  display: flex; gap: 6px; margin: 0 0 14px;
  overflow-x: auto; scrollbar-width: none;
  /* Ряд должен доставать до краёв экрана, а не обрываться по отступу. */
  padding: 2px max(var(--otstup), env(safe-area-inset-right)) 2px 0;
}
.chipy::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; max-width: 60vw; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--granitsa); background: none; color: var(--tekst-tihiy);
  font: inherit; font-size: 13px; cursor: pointer;
}
.chip-vybran {
  border-color: transparent; background: var(--srochno); color: #fff; font-weight: 600;
}

/* Метки личного слоя на карточке */
.metka-zametki { color: var(--ssylka); }
.metka-vzyato {
  background: color-mix(in srgb, var(--spokoyno) 18%, transparent); color: var(--spokoyno);
}

/* Поля и кнопки */
.pole {
  width: 100%; max-width: 100%; padding: 10px 12px; font: inherit;
  color: var(--tekst); background: var(--fon-vtoroy);
  border: 1px solid transparent; border-radius: 10px;
}
.pole:focus { outline: none; border-color: var(--ssylka); }
.pole-mnogo { resize: vertical; min-height: 64px; line-height: 1.4; }
.knopka {
  width: 100%; margin-top: 8px; padding: 12px; border: none; border-radius: 10px;
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--fon-vtoroy); color: var(--tekst);
}
.knopka-glavnaya { background: var(--ssylka); color: #fff; }
.knopka-opasnaya { background: var(--srochno); color: #fff; }
.knopka-tihaya { background: var(--fon-vtoroy); color: var(--tekst); }
.knopka-uzkaya { width: auto; margin-top: 0; padding: 10px 12px; font-weight: 400; }
/* Пока запрос в пути, кнопка выключена: двойное нажатие иначе создаёт
   две заметки или отправляет комментарий дважды. */
.knopka[disabled], .pole[disabled] { opacity: 0.5; cursor: default; }

/* Форма своих задач */
.forma {
  background: var(--fon-vtoroy); border-radius: var(--radius);
  padding: 12px; margin-bottom: 16px;
}
.forma .pole { background: var(--fon); }
.forma-imya {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--tekst-tihiy); margin: 0 0 8px;
}
.forma-ryad {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
}
.forma-ryad .pole { flex: 1 1 auto; min-width: 0; }
.forma-podpis { flex: 0 0 5.5rem; font-size: 13px; color: var(--tekst-tihiy); }
.forma-status { margin: 8px 0 0; font-size: 13px; color: var(--tekst-tihiy); }
.forma-status.status-plohaya { color: var(--srochno); }

/* Личный слой в шторке */
.lichnoe { margin-top: 20px; border-top: 1px solid var(--granitsa); padding-top: 14px; }
.lichnoe h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--tekst-tihiy); margin: 0 0 6px; font-weight: 600;
}
.lichnoe-imya {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--tekst-tihiy); margin: 16px 0 6px; font-weight: 600;
}
.lichnoe-nota { margin: 0 0 10px; font-size: 12px; color: var(--tekst-tihiy); }
.lichnoe-status { margin: 10px 0 0; font-size: 13px; color: var(--spokoyno); }
.lichnoe-status.status-plohaya { color: var(--srochno); }
.pereklyuchatel {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  font-weight: 600; cursor: pointer;
}
.pereklyuchatel input { width: 20px; height: 20px; accent-color: var(--ssylka); margin: 0; }

.zametki { list-style: none; margin: 0; padding: 0; }
.zametka {
  padding: 8px 0; border-bottom: 1px solid var(--granitsa);
}
.zametka:last-child { border-bottom: none; }
.zametka-tekst { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.zametka-niz {
  display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 3px;
  font-size: 12px; color: var(--tekst-tihiy);
}

.chernovik { margin-top: 16px; }
.podtverzhdenie {
  margin-top: 12px; padding: 12px; border-radius: var(--radius);
  background: var(--fon-vtoroy); border: 1px solid var(--srochno);
}
.podtverzhdenie-vopros { margin: 0 0 8px; font-size: 13px; }
.podtverzhdenie-tekst {
  margin: 0; max-height: 40vh; overflow-y: auto;
  font: inherit; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--tekst);
}
.podtverzhdenie-knopki { display: flex; gap: 8px; }
/* Блок подтверждения сам на втором фоне — тихая кнопка на нём сливалась
   бы с подложкой и не читалась как кнопка. */
.podtverzhdenie .knopka-tihaya { background: var(--fon); border: 1px solid var(--granitsa); }
.podtverzhdenie-knopki .knopka { flex: 1 1 0; min-width: 0; }

.gruzitsya { color: var(--tekst-tihiy); padding: 24px 0; text-align: center; }
.priglashenie {
  display: block; color: var(--tekst-tihiy); font-size: 13px;
  padding: 10px 0 14px; overflow-wrap: anywhere;
}

/* Свои задачи: кружок-галочка слева вместо точки состояния.
   Колонка шире, чем у задач Hub: по ней нужно попасть пальцем. */
.zadacha-svoya { grid-template-columns: 32px 1fr; padding: 9px 0; }
.galka {
  width: 30px; height: 30px; padding: 0; margin-top: 1px; justify-self: center;
  border: 2px solid var(--granitsa); border-radius: 50%;
  background: none; color: var(--tekst-tihiy);
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
}
.galka:active { border-color: var(--spokoyno); color: var(--spokoyno); }
.galka[disabled] { opacity: 0.5; }