/* ═══════════════════════════════════════════════════════════════════════
   HA_AI — Mini App: оформлення

   Та сама мова, що в міні-апках Huzomation («Звіт за день», «Гроші»):

   · дві палітри — ніч «Диспетчерська» (чорне + сигнальний бурштин) і день
     «Папір» (тепле тло + золото). Яку взяти, каже сам Telegram своїм
     colorScheme; поза Telegram — тема телефона;
   · бурштин = БРЕНД і головна дія, більше нічим не фарбуємо;
   · стан показує і колір, і ФОРМА позначки: ромб — термінове, коло —
     чернетка готова, квадрат — нове. Інакше стан зникає для тих, хто не
     розрізняє кольори, і на чорно-білому знімку;
   · рядок списку — дві щільні лінії (хто · про що), подробиці — у картці;
   · цифри табличні, щоб стовпчик читався згори вниз.

   Шрифтів з інтернету немає навмисно: сторінка має відкриватися миттєво
   через тунель. Моноширинний беремо системний (на iPhone і Mac це SF Mono)
   — силует той самий, що в JetBrains Mono на сайтах, 0 байт мережі.
   ═══════════════════════════════════════════════════════════════════════ */

:root, :root[data-theme="paper"] {
  --bg:#f6f3ec; --bg2:#ffffff; --fg:#141210; --muted:#6b6354;
  --accent:#9a7b2f; --tile:#e8c46a; --tile-fg:#141210;
  --good:#1e7a52; --bad:#a3271b; --warn:#8a5e0e;
  --line:rgba(20,18,16,.12); --fill:rgba(20,18,16,.07);
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
:root[data-theme="night"] {
  --bg:#0a0a0b; --bg2:#141417; --fg:#f2f2f0; --muted:#9a9a95;
  --accent:#ffb020; --tile:#ffb020; --tile-fg:#0a0a0b;
  --good:#5cc98c; --bad:#ff6b5e; --warn:#ffb020;
  --line:rgba(255,255,255,.10); --fill:rgba(255,255,255,.06);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#0a0a0b; --bg2:#141417; --fg:#f2f2f0; --muted:#9a9a95;
    --accent:#ffb020; --tile:#ffb020; --tile-fg:#0a0a0b;
    --good:#5cc98c; --bad:#ff6b5e; --warn:#ffb020;
    --line:rgba(255,255,255,.10); --fill:rgba(255,255,255,.06);
    color-scheme: dark;
  }
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; padding:12px 16px 32px; background:var(--bg); color:var(--fg);
       font:15px/1.45 var(--font); -webkit-text-size-adjust:100%; }
a { color:inherit; text-decoration:none; }
.num, .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.muted { color:var(--muted); }

/* ── шапка: знак, назва, вкладки ─────────────────────────────────────── */
.brand { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.brand .mark { flex:none; width:38px; height:38px; border-radius:11px;
  background:var(--tile); color:var(--tile-fg);
  display:inline-flex; align-items:center; justify-content:center; }
.brand .mark svg { width:21px; height:21px; display:block; }
.brand h1 { font:600 16px/1.2 var(--mono); letter-spacing:.06em;
  text-transform:uppercase; margin:0; }
.brand .sub { font-size:12px; color:var(--muted); margin-top:2px; }

/* Три текстові вкладки + значок налаштувань. Словом «Налаштування» чип не
   вміщався в рядок на 390 px і обрізався, а обрізаний чип читається як
   поламана верстка; значок вирішує це назавжди, скільки б не було мов. */
.tabs { display:flex; gap:6px; margin:0 0 14px; }
.tabs a { flex:1 1 0; min-width:0; text-align:center; padding:9px 6px;
  border-radius:10px; background:var(--bg2); font-size:13px; white-space:nowrap;
  color:var(--muted); }
.tabs a.ico { flex:0 0 44px; display:inline-flex; align-items:center; justify-content:center; }
.tabs a.ico svg { width:18px; height:18px; display:block; }
.tabs a.on { background:var(--tile); color:var(--tile-fg); font-weight:600; }

/* ── лічильники ───────────────────────────────────────────────────────── */
.kpi { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:18px; }
.kpi a { background:var(--bg2); border-radius:12px; padding:10px 8px; text-align:center; }
.kpi b { display:block; font:700 22px/1.1 var(--mono); font-variant-numeric:tabular-nums; }
.kpi span { font-size:11px; color:var(--muted); }
.kpi a.hot b { color:var(--accent); }

h2 { font:600 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:22px 0 8px; }

/* ── список: рядок = дві щільні лінії, подробиці в картці ─────────────── */
.card { background:var(--bg2); border-radius:14px; margin-bottom:8px;
  padding:12px 14px; display:block; }
.card + .card { margin-top:8px; }
.row1 { display:flex; align-items:center; gap:8px; min-width:0; }
.row1 .who { font-weight:600; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; min-width:0; }
.row1 .meta { margin-left:auto; display:flex; align-items:center; gap:8px;
  flex:none; font-size:12px; color:var(--muted); }
.gist { margin-top:4px; font-size:14px; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; }
/* Службовий рядок (звідки, коли, номер) — рівно одна лінія з многокрапкою:
   на 390 px він інакше розповзається на два-три рядки й починає важити
   стільки ж, скільки сама суть повідомлення. */
.src { font:11px/1.4 var(--mono); color:var(--muted); letter-spacing:.04em;
  text-transform:uppercase; margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* стан: колір + форма, щоб відрізнялось і без кольору */
.st { width:9px; height:9px; flex:none; background:var(--muted); }
.st.urgent { background:var(--bad); transform:rotate(45deg); }   /* ромб */
.st.ready  { background:var(--good); border-radius:50%; }        /* коло */
.st.new    { background:var(--accent); }                          /* квадрат */
.st.wait   { background:var(--muted); border-radius:50%; opacity:.6; }

.tag { font:11px/1 var(--mono); padding:4px 7px; border-radius:7px;
  background:var(--fill); color:var(--muted); white-space:nowrap; }
.tag.due { color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.tag.ready { color:var(--good); }
.tag.urgent { color:var(--bad); box-shadow:inset 0 0 0 1px var(--bad); }

/* ── картка повідомлення ─────────────────────────────────────────────── */
.back { display:inline-flex; align-items:center; gap:6px; color:var(--muted);
  font-size:13px; margin-bottom:12px; }
.hero { background:var(--bg2); border-radius:14px; padding:14px; margin-bottom:10px; }
.hero .who { font:600 20px/1.2 var(--font); margin:6px 0 2px; }
.hero .chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:4px 12px;
  margin-top:10px; font-size:14px; }
.kv dt { color:var(--muted); } .kv dd { margin:0; }

.block { background:var(--bg2); border-radius:14px; padding:14px; margin-bottom:10px; }
.block h3 { font:600 13px/1 var(--mono); letter-spacing:.06em;
  text-transform:uppercase; margin:0 0 4px; }
.block .when { font-size:12px; color:var(--muted); margin-bottom:10px; }
.quote { background:var(--fill); border-left:2px solid var(--accent);
  border-radius:0 10px 10px 0; padding:10px 12px; font-size:15px; }

/* ── поля й кнопки ───────────────────────────────────────────────────── */
label { display:block; font-size:13px; color:var(--muted); margin:12px 0 6px; }
input[type=text], input[type=time], input[type=number], textarea, select {
  width:100%; background:var(--bg); color:var(--fg); font:15px/1.4 var(--font);
  -webkit-appearance:none; appearance:none;
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
textarea { min-height:96px; resize:vertical; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--accent); }
.inline { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
/* у фільтрах підпис «Робоче й приватне» не вміщався в кегль поля */
select { font-size:14px; padding-right:28px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; padding:0 16px; border-radius:11px; border:1px solid var(--line);
  background:transparent; color:var(--fg); font:15px/1 var(--font); cursor:pointer; }
.btn--main { background:var(--tile); border-color:var(--tile); color:var(--tile-fg);
  font-weight:600; }
.btn--quiet { border-color:transparent; color:var(--muted); }
.btn--danger { color:var(--bad); border-color:var(--bad); }
.btn--sm { min-height:36px; padding:0 12px; font-size:14px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.actions .btn { flex:1 1 auto; }

/* ── подія-пропозиція ─────────────────────────────────────────────────── */
.ev { padding:12px 0; border-top:1px solid var(--line); }
.ev:first-of-type { border-top:0; padding-top:0; }
.ev .when { font:12px/1 var(--mono); color:var(--accent); }
.ev .what { font-weight:600; margin:4px 0 2px; }
.ev .where { font-size:13px; color:var(--muted); }

.foot { margin-top:20px; font-size:12px; color:var(--muted); text-align:center; }
.note { font-size:13px; color:var(--muted); margin-top:8px; }

/* ═══ Доповнення до зразка: елементи живого Пульту, яких немає в зразку ═══ */
main { max-width:720px; margin:0 auto; }
.flash { background:var(--bg2); border-left:3px solid var(--accent); border-radius:0 10px 10px 0;
  padding:10px 12px; margin-bottom:12px; font-size:14px; }
.empty { color:var(--muted); font-size:14px; margin:6px 0 4px; }
.small { font-size:12px; color:var(--muted); }
.warn { color:var(--bad); }
.link { color:var(--accent); }

/* блок «Обробка Claude» */
.run { display:flex; align-items:center; gap:12px; }
.run .info { flex:1; min-width:0; }
.run .title { font:600 13px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.run .live { color:var(--accent); }
.run form { flex:none; margin:0; }
.btn[disabled] { opacity:.45; cursor:default; }

/* мітки-перемикачі (графік, виключення) */
label.chk { display:flex; align-items:center; gap:8px; color:var(--fg); font-size:14px; margin:10px 0; }
label.chk input { width:auto; margin:0; accent-color:var(--accent); }
.days { display:flex; flex-wrap:wrap; gap:6px; }
.days label { display:inline-flex; align-items:center; gap:4px; margin:0; padding:6px 10px;
  border-radius:9px; background:var(--fill); color:var(--fg); font-size:13px; }
.days input { width:auto; margin:0; accent-color:var(--accent); }

/* джерела, вкладення, попередні версії */
.list { list-style:none; padding:0; margin:6px 0 0; font-size:14px; }
.list li { padding:6px 0; border-top:1px solid var(--line); }
.list li:first-child { border-top:0; }
details { margin-top:12px; font-size:14px; }
summary { cursor:pointer; color:var(--muted); }
.quote.old { opacity:.7; margin-top:6px; }
.quote { white-space:pre-wrap; word-wrap:break-word; }

/* зведення */
.digest-item { padding:8px 0; border-top:1px solid var(--line); font-size:14px; }
.digest-item:first-of-type { border-top:0; }
.digest-item .links { font-size:12px; color:var(--muted); margin-top:2px; }

/* довідки агентів (Markdown) */
.md { font-size:14px; line-height:1.5; }
.md h1, .md h2, .md h3 { font:600 14px/1.3 var(--font); text-transform:none; letter-spacing:0; color:var(--fg); margin:14px 0 6px; }
.md p { margin:6px 0; }
.md ul, .md ol { padding-left:20px; margin:6px 0; }
.md a { color:var(--accent); text-decoration:underline; }
.md table { border-collapse:collapse; width:100%; font-size:13px; display:block; overflow-x:auto; }
.md th, .md td { border-bottom:1px solid var(--line); padding:6px; text-align:left; vertical-align:top; }
.md code { font-family:var(--mono); font-size:12px; background:var(--fill); padding:1px 4px; border-radius:4px; }