/* Ассистент PWA — true-black flat, в духе Siri/iOS: чёрный экран,
   свечение только у живого элемента (градиент дышит в логотипе и в
   отправленной точке), цвет больше нигде не нужен. */

:root {
  --ground: #000000;
  --surface: #111111;
  --raised: #1c1c1e;
  --border: #1a1a1a;
  --rule: #161616;
  --control: #2a2a2c;
  --text: #ffffff;
  --muted: #b4b4b4;
  --faint: #949494;
  --siri-1: #e5484d;
  --siri-2: #e5a93b;
  --siri-3: #30d158;
  --siri-4: #4cb3f0;
  --siri-5: #bf5af2;
  --pill-positive-bg: #172a1d;
  --pill-positive-ink: #3fc07a;
  --pill-negative-bg: #2c1a20;
  --pill-negative-ink: #e5566f;
  --radius-card: 20px;
  --radius-control: 999px;
  --gap: 14px;
  --pad: 22px;
  --fs-title: 20px;
  --fs-body: 14px;
  --fs-small: 12px;
  /* кольцо Siri: вращающаяся радуга вокруг логотипа. Умышленно: это
     единственный цветной элемент интерфейса (data-ui, signature move) */
  --siri: conic-gradient(from 180deg, #e5484d, #e5a93b, #30d158, #4cb3f0, #bf5af2, #e5484d); /* taste-skill-ignore: signature Siri ring, the one colored element */
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--ground);
  color: var(--text);
  font: 15px/1.5 "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-variant-numeric: tabular-nums;
}

#app { position: relative; max-width: 760px; margin: 0 auto; height: 100dvh; overflow: hidden; }
.hidden { display: none !important; }
.sub { color: var(--muted); font-size: 13.5px; }
.error { color: var(--pill-negative-ink); font-size: 13.5px; }

/* логотип: кольцо Siri — цвет живёт только здесь */
.logo-mark {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ground);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 17px; color: var(--text);
  position: relative;
}
.logo-mark::before {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: var(--siri); z-index: -1;
  animation: siri-spin 6s linear infinite;
}
.logo-mark.small { width: 34px; height: 34px; font-size: 15px; }
.logo-mark.big { width: 64px; height: 64px; font-size: 26px; }

@keyframes siri-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ вход */
#login { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; height: 100dvh; }
.login-card {
  padding: 40px 28px; width: 100%; max-width: 340px; text-align: center;
  animation: rise .5s cubic-bezier(.2, .8, .2, 1);
}
.logo-mark.big { margin: 0 auto 18px; }
.login-card h1 { font-size: 22px; font-weight: 600; margin-bottom: 6px; }
.login-card input, .login-card .primary-pill { width: 100%; margin-top: 16px; }
.login-card input { text-align: center; letter-spacing: 1px; }

/* общие элементы */
input, select, textarea {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--control); border-radius: 12px;
  padding: 11px 14px; font: inherit; width: 100%;
  transition: border-color .18s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--muted);
}
::placeholder { color: var(--faint); }

.primary-pill {
  background: var(--text); color: var(--ground); border: none;
  border-radius: var(--radius-control); padding: 11px 18px;
  font: inherit; font-weight: 600; cursor: pointer;
  transition: transform .12s, opacity .15s;
}
.primary-pill:active { transform: scale(.97); opacity: .85; }
.primary-pill:hover { opacity: .92; }

.btn {
  background: var(--raised); color: var(--text); border: none;
  border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13.5px;
  cursor: pointer; transition: transform .12s, background .18s;
}
.btn:active { transform: scale(.95); background: #26262a; }
.error.shake { animation: shake .4s; }

/* шапка */
header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top));
  background: var(--ground); border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.brand-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--siri);
  animation: siri-spin 5s linear infinite; }
.bell {
  font-size: 16px; background: none; border: 1px solid var(--control);
  border-radius: 999px; padding: 7px 11px; cursor: pointer;
  transition: transform .15s, border-color .18s;
}
.bell:active { transform: scale(.92); }
.bell.subscribed { border-color: var(--pill-positive-ink); }

main {
  position: absolute; top: calc(55px + env(safe-area-inset-top));
  bottom: calc(74px + env(safe-area-inset-bottom));
  left: 0; right: 0; overflow: hidden;
}
.tab-page { height: 100%; display: flex; flex-direction: column; gap: 12px;
  padding: 16px 16px 10px; animation: rise .3s cubic-bezier(.2, .8, .2, 1); }

/* ------------------------------------------------------------------- чат */
#tab-chat { padding: 0; position: relative; }
.chat { flex: 1; overflow-y: auto; padding: 18px 16px 10px; display: flex; flex-direction: column; gap: 18px;
  overscroll-behavior: contain; }
.chat-greet { text-align: center; margin: 60px auto 0; animation: rise .55s cubic-bezier(.2, .8, .2, 1); }
.chat-greet h2 { margin: 14px 0 6px; font-size: 21px; font-weight: 600; }
.chat-greet .sub { line-height: 1.5; }

.msg { display: flex; gap: 10px; max-width: 92%; animation: rise .28s cubic-bezier(.2, .8, .2, 1); }
.msg.user { align-self: flex-end; }
.msg .avatar { flex: 0 0 auto; margin-top: 2px; }
.msg .bubble { padding: 4px 0; white-space: pre-wrap; word-break: break-word; }
.msg.user .bubble {
  background: var(--raised); padding: 10px 15px; border-radius: 18px;
  border-bottom-right-radius: 6px;
}
.msg.assistant .bubble { color: var(--text); }
.msg .time { font-size: 11px; color: var(--faint); margin-top: 5px; }

.typing { display: flex; gap: 10px; align-items: center; padding: 0 16px 6px; }
.dots { background: var(--surface); border-radius: 18px; border-top-left-radius: 6px;
  padding: 13px 16px; display: flex; gap: 5px; }
.dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--faint);
  animation: bounce 1.2s infinite; }
.dots span:nth-child(2) { animation-delay: .15s; }
.dots span:nth-child(3) { animation-delay: .3s; }

.composer {
  display: flex; align-items: flex-end; gap: 8px; margin: 0 12px 8px;
  background: var(--surface); border: 1px solid var(--control);
  border-radius: 22px; padding: 7px;
  transition: border-color .2s;
}
/* тень убрана: flat, композер отделяется бордером */
.composer:focus-within { border-color: var(--faint); }
.composer textarea { background: transparent; border: none; padding: 8px 4px; max-height: 120px; }
.composer textarea:focus { box-shadow: none; }
.round-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--raised); color: var(--muted); display: flex; align-items: center;
  justify-content: center; flex: 0 0 auto; transition: transform .15s;
}
.round-btn:active { transform: scale(.9); }
.round-btn.recording { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.send-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--text); color: var(--ground); display: flex; align-items: center;
  justify-content: center; flex: 0 0 auto; transition: transform .15s, opacity .18s;
}
.send-btn:active { transform: scale(.88); }
.send-btn:disabled { opacity: .35; }

.rec { display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--pill-negative-ink); font-size: 13.5px; padding-bottom: 8px; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pill-negative-ink);
  animation: pulse-dot 1s infinite; }

/* ------------------------------------------------- списки (привычки, память) */
.cards { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1;
  padding-right: 2px; overscroll-behavior: contain; }
.card {
  background: var(--surface); border-radius: var(--radius-card);
  padding: 14px 16px; animation: rise .3s cubic-bezier(.2, .8, .2, 1);
}
.card .row-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.card b { font-weight: 600; }
.card .num { color: var(--faint); font-size: 12.5px; flex: 0 0 auto; }
.card .muted-line { color: var(--muted); font-size: 13px; margin-top: 4px; }
.card .actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.chip { background: var(--raised); border-radius: 999px; padding: 3px 10px; font-size: 12px;
  color: var(--muted); display: inline-block; margin-top: 8px; }
.empty { color: var(--muted); text-align: center; padding: 40px 0; }

.form {
  background: var(--surface); border-radius: var(--radius-card); padding: 14px;
  display: flex; flex-direction: column; gap: 9px;
}
.form-row { display: flex; gap: 8px; }
.form-row > * { flex: 1; }
.checks { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13.5px; }
.checks label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.checks input { width: auto; }

/* скелетон */
.skel { height: 72px; border-radius: var(--radius-card); background: var(--surface);
  animation: breathe 1.4s ease-in-out infinite; }

/* ------------------------------------------------------------- настройки */
.settings { overflow-y: auto; flex: 1; padding-right: 2px; overscroll-behavior: contain; }
.settings .row {
  background: var(--surface); border-radius: var(--radius-card);
  padding: 15px 16px; margin-bottom: 10px; animation: rise .3s cubic-bezier(.2, .8, .2, 1);
}
.settings .lbl { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.settings input, .settings select { margin-top: 5px; }
.toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.toggles .btn.off { background: none; border: 1px solid var(--control); color: var(--muted); }

/* --------------------------------------------------------------- таббар */
#tabbar {
  position: absolute; bottom: 10px; left: 12px; right: 12px; z-index: 10;
  display: flex; gap: 4px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--rule);
  padding: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom));
}
#tabbar button {
  flex: 1; background: none; border: none; color: var(--faint); cursor: pointer;
  padding: 9px 0; border-radius: 999px; font: inherit; font-size: 12.5px;
  transition: background .2s, color .2s;
}
#tabbar button.active { color: var(--ground); background: var(--text); font-weight: 600; }

/* -------------------------------------------------------------- анимации */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}