/* Клара Кипер — мобильный чат под WebView ToolKeeper.
   Бренд-токены сверху: подставь точные цвета/шрифт ToolKeeper — остальное подхватится. */
:root {
  /* Фирменные токены ToolKeeper (из toolkeeper-web-facelift src/index.css). */
  --brand: #E0235B;            /* малиновый — главный акцент/CTA ToolKeeper */
  --brand-ink: #ffffff;        /* белый текст на малиновом */
  --indigo: #303466;           /* индиго ToolKeeper — заголовки/акценты */
  --font: "Exo 2", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --bg: #f5f6f8;
  --surface: #ffffff;
  --ink: #1a1e27;
  --muted: #5c6675;
  --line: #e3e6ec;
  --bubble-user: var(--brand);
  --bubble-user-ink: var(--brand-ink);
  --bubble-bot: #eef1f5;
  --bubble-bot-ink: #1a1e27;
  --shadow: 0 1px 2px rgba(20,25,40,.06), 0 8px 24px rgba(20,25,40,.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1216;
    --surface: #171b21;
    --ink: #e7eaee;
    --muted: #99a3b1;
    --line: #262d38;
    --bubble-bot: #1e242d;
    --bubble-bot-ink: #e7eaee;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 640px;
  margin: 0 auto;
  background: var(--bg);
}

/* Шапка */
.bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  overflow: hidden; flex: 0 0 auto;
  background: var(--brand);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.who .name { font-weight: 700; font-size: 16px; }
.who .sub { color: var(--muted); font-size: 12.5px; }

/* Лента */
.feed {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.msg {
  max-width: 82%;
  padding: 10px 13px;
  border-radius: 16px;
  white-space: pre-wrap;
  word-wrap: break-word;
  box-shadow: var(--shadow);
  animation: rise .18s ease;
}
.msg.bot { align-self: flex-start; background: var(--bubble-bot); color: var(--bubble-bot-ink); border-bottom-left-radius: 5px; }
.msg.user { align-self: flex-end; background: var(--bubble-user); color: var(--bubble-user-ink); border-bottom-right-radius: 5px; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .msg { animation: none; } }

/* Индикатор «печатает» */
.typing { display: inline-flex; gap: 4px; padding: 14px 15px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .5; animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,60%,100% { opacity: .3; } 30% { opacity: .9; } }

/* Быстрые кнопки */
.quick {
  display: flex; gap: 8px; padding: 6px 14px 4px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.quick::-webkit-scrollbar { display: none; }
.quick button {
  flex: 0 0 auto;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; font: inherit; font-size: 13.5px; white-space: nowrap;
  cursor: pointer;
}
.quick button:active { background: var(--bubble-bot); }
.quick.hidden { display: none; }

/* Ввод */
.compose {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 12px calc(env(safe-area-inset-bottom) + 10px);
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.compose textarea {
  flex: 1;
  resize: none;
  max-height: 128px;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 11px 15px;
  font: inherit;
  background: var(--bg);
  color: var(--ink);
}
.compose textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.compose #send {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--brand); color: var(--brand-ink);
  display: grid; place-items: center; cursor: pointer;
}
.compose #send:disabled { opacity: .45; cursor: default; }