/* OpenLove Mini App — компоненты. Здесь НЕТ конкретных значений стиля: только var(--…)
   из tokens.css (проверяется тестом tests/test_miniapp_frontend.py). Нули и проценты
   раскладки (0, 100%, 50%) — не стиль, а геометрия, их можно. */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: var(--c-bg); color: var(--c-ink); font-family: var(--f-sans);
  font-size: var(--fs-m); line-height: var(--lh); -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
.hidden { display: none !important; }

/* каркас */
.app { max-width: var(--w-max); margin: 0 auto; min-height: 100%; position: relative; }
.view { min-height: 100vh; padding: var(--sp-4) var(--sp-4) calc(var(--size-tab) + var(--sp-5)); }
.view.no-tabs { padding-bottom: var(--sp-5); }
.view.enter { animation: view-in var(--dur-base) var(--ease) both; }
.view.enter-back { animation: view-in-back var(--dur-base) var(--ease) both; }
@keyframes view-in { from { opacity: 0; transform: translateX(var(--shift-screen)); } to { opacity: 1; transform: none; } }
@keyframes view-in-back { from { opacity: 0; transform: translateX(calc(-1 * var(--shift-screen))); } to { opacity: 1; transform: none; } }

.title { font-family: var(--f-serif); font-size: var(--fs-xxl); font-weight: var(--fw-bold); line-height: var(--lh-tight); margin: var(--sp-3) 0 var(--sp-4); }
.h2 { font-size: var(--fs-l); font-weight: var(--fw-bold); margin: var(--sp-5) 0 var(--sp-3); }
.muted { color: var(--c-muted); font-size: var(--fs-s); }
.soft { color: var(--c-ink-soft); }
.center { text-align: center; }
.stack > * + * { margin-top: var(--sp-3); }
.row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.row.spread { justify-content: space-between; flex-wrap: nowrap; }
.grow { flex: 1; min-width: 0; }

/* карточки */
.card {
  background: var(--c-panel); border: var(--border) solid var(--c-line); border-radius: var(--r-l);
  padding: var(--sp-4); box-shadow: var(--shadow-card);
}
.card + .card { margin-top: var(--sp-3); }
.card.tap { cursor: pointer; transition: transform var(--dur-fast) var(--ease); }
.card.tap:active { transform: scale(.985); }
.appear { animation: card-in var(--dur-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
@keyframes card-in { from { opacity: 0; transform: translateY(var(--shift-card)); } to { opacity: 1; transform: none; } }

.person-name { font-size: var(--fs-l); font-weight: var(--fw-bold); }
.person-meta { color: var(--c-muted); font-size: var(--fs-s); }
.about { white-space: pre-wrap; word-wrap: break-word; }
.label { font-size: var(--fs-xs); color: var(--c-muted); text-transform: uppercase; letter-spacing: var(--ls-caps); margin-bottom: var(--sp-1); }
.why { list-style: none; }
.why li { position: relative; padding-left: var(--sp-4); margin: var(--sp-1) 0; color: var(--c-ink-soft); }
.why li::before { content: "•"; color: var(--c-accent); position: absolute; left: var(--sp-1); }

.chip {
  display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill); border: var(--border) solid var(--c-line); background: var(--c-panel-2);
  font-size: var(--fs-s); color: var(--c-ink-soft);
}
.chip.accent { color: var(--c-accent); border-color: var(--c-accent); background: transparent; }
.chip.tap { cursor: pointer; }
.chip.sel { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
.badge {
  min-width: var(--sp-5); height: var(--sp-5); padding: 0 var(--sp-2); border-radius: var(--r-pill);
  background: var(--c-accent); color: var(--c-on-accent); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  display: inline-flex; align-items: center; justify-content: center;
}

/* заглушка фото: плоская, нейтральная, без блюра (инвариант) */
.placeholder {
  width: 100%; height: var(--size-photo); border-radius: var(--r-l); background: var(--c-placeholder);
  display: flex; align-items: center; justify-content: center; color: var(--c-muted);
  font-family: var(--f-serif); font-size: var(--fs-xxl);
}
.photo { width: 100%; height: var(--size-photo); border-radius: var(--r-l); object-fit: cover; display: block; }
.avatar {
  width: var(--size-avatar); height: var(--size-avatar); border-radius: var(--r-pill); background: var(--c-placeholder);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-serif);
  color: var(--c-muted); flex: none; overflow: hidden; object-fit: cover;
}

/* кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--size-input); padding: 0 var(--sp-5); border-radius: var(--r-pill);
  border: var(--border) solid transparent; font-weight: var(--fw-bold); cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: var(--op-disabled); cursor: default; }
.btn.primary { background: var(--c-accent); color: var(--c-on-accent); }
.btn.ghost { background: transparent; border-color: var(--c-line); color: var(--c-ink); }
.btn.quiet { background: transparent; color: var(--c-muted); padding: 0 var(--sp-3); }
.btn.block { width: 100%; }
.actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.actions .btn { flex: 1; }

/* прогресс */
.progress { height: var(--sp-2); background: var(--c-panel-2); border: var(--border) solid var(--c-line); border-radius: var(--r-pill); overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: var(--c-accent); transition: width var(--dur-slow) var(--ease); }

/* поля */
.input, .textarea {
  width: 100%; border: var(--border) solid var(--c-line); border-radius: var(--r-m); background: var(--c-bg);
  color: var(--c-ink); font: inherit; padding: var(--sp-3); min-height: var(--size-input);
}
.textarea { resize: vertical; min-height: calc(var(--size-input) * 2.5); }
.input:focus, .textarea:focus { outline: none; border-color: var(--c-accent-2); }
.field + .field { margin-top: var(--sp-4); }

/* скелетоны (вместо спиннеров) */
.skel {
  border-radius: var(--r-m); background: linear-gradient(90deg, var(--c-skeleton) 0%, var(--c-skeleton-hi) 50%, var(--c-skeleton) 100%);
  background-size: 200% 100%; animation: shimmer var(--dur-shimmer) linear infinite; height: var(--sp-4);
}
.skel.line + .skel.line { margin-top: var(--sp-2); }
.skel.block { height: calc(var(--size-photo) / 2); border-radius: var(--r-l); }
.skel.card { height: calc(var(--size-avatar) * 2.2); border: 0; box-shadow: none; }
.skel.short { width: 55%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* нижние вкладки */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--size-tab); display: flex; justify-content: center;
  background: var(--c-bg); border-top: var(--border) solid var(--c-line); z-index: 20;
}
.tabs-inner { display: flex; width: 100%; max-width: var(--w-max); }
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
  background: none; border: 0; color: var(--c-muted); font-size: var(--fs-xs); cursor: pointer; position: relative;
}
.tab.active { color: var(--c-accent); }
.tab .ico { font-size: var(--fs-l); }
.tab .badge { position: absolute; top: var(--sp-1); left: calc(50% + var(--sp-2)); }

/* чат */
.chat { display: flex; flex-direction: column; min-height: 100vh; }
.chat-head { position: sticky; top: 0; z-index: 10; background: var(--c-bg); padding: var(--sp-3) var(--sp-4); border-bottom: var(--border) solid var(--c-line); }
.msgs { flex: 1; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.msg {
  max-width: var(--bubble-max); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); white-space: pre-wrap;
  word-wrap: break-word; animation: card-in var(--dur-base) var(--ease) both;
}
.msg.them { align-self: flex-start; background: var(--c-bubble-them); border-bottom-left-radius: var(--r-s); }
.msg.me { align-self: flex-end; background: var(--c-bubble-me); color: var(--c-on-bubble-me); border-bottom-right-radius: var(--r-s); }
.msg.host { align-self: stretch; max-width: 100%; background: var(--c-bubble-host); border-radius: var(--r-l); }
.msg.host .label { margin-bottom: var(--sp-2); }
.msg.pending { opacity: var(--op-pending); }
.msg.failed { opacity: var(--op-disabled); text-decoration: line-through; }
.typing { align-self: flex-start; display: inline-flex; gap: var(--sp-1); padding: var(--sp-3); background: var(--c-bubble-host); border-radius: var(--r-m); }
.typing i { width: var(--sp-2); height: var(--sp-2); border-radius: var(--r-pill); background: var(--c-muted); animation: dot var(--dur-typing) var(--ease) infinite; }
.typing i:nth-child(2) { animation-delay: calc(var(--dur-typing) / 6); }
.typing i:nth-child(3) { animation-delay: calc(var(--dur-typing) / 3); }
@keyframes dot { 0%, 60%, 100% { opacity: var(--op-dim); transform: none; } 30% { opacity: 1; transform: translateY(calc(-1 * var(--sp-1))); } }
.composer {
  position: sticky; bottom: 0; display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg); border-top: var(--border) solid var(--c-line);
}
.composer .textarea { min-height: var(--size-input); max-height: calc(var(--size-input) * 3); resize: none; }
.composer .btn { padding: 0 var(--sp-4); }
.notice { padding: var(--sp-3) var(--sp-4); color: var(--c-muted); font-size: var(--fs-s); text-align: center; }

/* событие (взаимность, открытие фото) — оверлей, а не смена списка */
.event {
  position: fixed; inset: 0; z-index: 50; background: var(--c-overlay); display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5); animation: fade-in var(--dur-base) var(--ease) both;
}
.event.out { animation: fade-out var(--dur-base) var(--ease) both; }
.event-box {
  background: var(--c-panel); border-radius: var(--r-l); padding: var(--sp-6) var(--sp-5); text-align: center; width: 100%;
  max-width: calc(var(--w-max) * .75); animation: pop var(--dur-slow) var(--ease-pop) both; box-shadow: var(--shadow-sheet);
}
.event-emoji { font-size: var(--fs-xxl); margin-bottom: var(--sp-3); display: block; }
.event-box .photo { margin: var(--sp-4) 0; animation: reveal var(--dur-slow) var(--ease) both; animation-delay: var(--dur-base); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes reveal { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* нижний лист (причина пропуска, меню чата) */
.sheet-back { position: fixed; inset: 0; background: var(--c-overlay); z-index: 40; animation: fade-in var(--dur-fast) var(--ease) both; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; background: var(--c-panel); border-radius: var(--r-l) var(--r-l) 0 0;
  padding: var(--sp-5) var(--sp-4); box-shadow: var(--shadow-sheet); max-width: var(--w-max); margin: 0 auto;
  animation: sheet-in var(--dur-base) var(--ease) both;
}
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--size-tab) + var(--sp-4)); transform: translateX(-50%);
  background: var(--c-ink); color: var(--c-bg); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  font-size: var(--fs-s); z-index: 60; opacity: 0; transition: opacity var(--dur-base) var(--ease); pointer-events: none;
}
.toast.show { opacity: 1; }
.empty { text-align: center; color: var(--c-muted); padding: var(--sp-6) var(--sp-4); }
.empty .event-emoji { opacity: var(--op-soft); }
.link { color: var(--c-accent); text-decoration: none; font-weight: var(--fw-bold); cursor: pointer; background: none; border: 0; }