/* ===========================================================================
   app.eltonlabs.org
   Те же правила, что у base: вёрстка как у книги, волосяные линии,
   никаких пузырей, карточек и цветных плашек. Зелёный — только отметка.
   =========================================================================== */

@import url('/fonts/fonts.css');

:root {
  --bg:#fafafa;   --paper:#fff;   --wash:#f2f2f0;
  --line:#e5e5e3; --line-2:#d6d6d2;
  --ink:#1a1a1a;  --ink-2:#5f6470; --ink-3:#64686f; --ink-4:#6f737c;
  --mark:#0b8a68;
  --btn:#1a1a1a;  --btn-hover:#000; --btn-ink:#fafafa;
  --sel:#e5e5e0;  --bad:#b34a34;   --hover:#ececea;
  --measure:680px;
  --font:Onest,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
/* Тёмная — только явным выбором, как на base. По умолчанию всегда светлая. */
:root[data-theme="dark"] {
  --bg:#101114;   --paper:#17181c; --wash:#1c1e22;
  --line:#282a2f; --line-2:#3a3d44;
  --ink:#e9eaec;  --ink-2:#a6aab2; --ink-3:#868b94; --ink-4:#7d828b;
  --mark:#34d399;
  --btn:#e9eaec;  --btn-hover:#fff; --btn-ink:#101114;
  --sel:#2b2f36;  --bad:#ef8a70;   --hover:#22242a;
}

*,*::before,*::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent }
html,body { height:100% }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.7; letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased; overflow-wrap:break-word;
  overscroll-behavior-y:none;
}
::selection { background:var(--sel) }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer }
input,textarea { font:inherit }
h1 { margin:0; font-weight:500; letter-spacing:-.021em }

#app { height:100dvh; display:flex; flex-direction:column }

/* ============================  ВХОД  ===================================== */
.pair {
  flex:1; display:grid; place-items:center; padding:30px;
  animation:rise .3s var(--ease) both;
}
.pair-card { width:100%; max-width:352px }
.pair-mark { font-size:15px; font-weight:600; margin-bottom:42px }
.pair h1 { font-size:24px; line-height:1.3; margin-bottom:9px }
.pair .lead { color:var(--ink-2); font-size:15px; margin:0 0 26px; line-height:1.55 }
.pair input {
  width:100%; font-family:var(--mono); font-size:17px; padding:13px 14px;
  background:var(--paper); border:1px solid var(--line-2); border-radius:6px;
  color:var(--ink); outline:0; transition:border-color .15s;
}
.pair input:focus { border-color:var(--ink) }
.err { font-size:14px; color:var(--bad); margin-top:11px; min-height:20px }
.btn {
  width:100%; padding:12px 16px; border-radius:6px; background:var(--ink);
  color:var(--btn-ink); font-weight:500; font-size:15px; transition:background .15s,opacity .15s;
}
.btn:hover { background:var(--btn-hover) }
.btn[disabled] { opacity:.38; pointer-events:none }
.steps { margin:0 0 4px; padding-left:20px; color:var(--ink-2); font-size:15px; line-height:1.6 }
.steps li { margin-bottom:8px }
.steps li::marker { color:var(--ink-4) }
.note { font-size:13.5px; color:var(--ink-3); margin-top:26px; line-height:1.55;
  border-top:1px solid var(--line); padding-top:16px }
.note b { color:var(--ink-2); font-weight:500 }

@keyframes rise { from { opacity:0; transform:translateY(5px) } to { opacity:1; transform:none } }

/* ============================  ШАПКА  ==================================== */
.top {
  display:flex; align-items:baseline; gap:10px;
  padding:calc(14px + env(safe-area-inset-top)) 20px 12px;
  border-bottom:1px solid var(--line);
}
.top b { font-weight:600; font-size:15px }
.top .st { font-size:12.5px; color:var(--ink-3); margin-left:auto }
.top.on .st { color:var(--mark) }
.top .x { font-size:12.5px; color:var(--ink-3); padding-left:4px }
.top .x:hover { color:var(--bad) }

/* ============================  ЛЕНТА  ==================================== */
/* Не переписка в пузырях, а страница: подпись, текст, волосяная линия. */
.feed {
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:0 20px; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
}
.feed-in { max-width:var(--measure); margin:0 auto }

.msg { padding:18px 0; border-bottom:1px solid var(--line) }
.msg .who { font-size:12.5px; color:var(--ink-4); margin-bottom:3px }
.msg .tx { font-size:17px; line-height:1.7; white-space:pre-wrap }
.msg.it .tx { color:var(--ink-2) }
.msg .st { font-size:13.5px; color:var(--ink-3); margin-top:5px }
.msg .st.ok { color:var(--mark) }
.msg .st.warn { color:var(--bad) }

.empty {
  color:var(--ink-3); font-size:15px; line-height:1.6;
  padding:34px 0; max-width:44ch;
}

/* три точки, пока компьютер думает */
.think { display:inline-flex; gap:4px; padding:6px 0 }
.think i { width:4px; height:4px; border-radius:50%; background:var(--ink-4); animation:bl 1.2s infinite }
.think i:nth-child(2) { animation-delay:.2s }
.think i:nth-child(3) { animation-delay:.4s }
@keyframes bl { 0%,60%,100% { opacity:.25 } 30% { opacity:1 } }

/* ============================  ВВОД  ===================================== */
.quick {
  display:flex; gap:18px; overflow-x:auto; scrollbar-width:none;
  padding:12px 20px 0; font-size:13.5px;
}
.quick::-webkit-scrollbar { display:none }
.quick button { flex:0 0 auto; color:var(--ink-3); white-space:nowrap; transition:color .13s }
.quick button:hover { color:var(--ink-2) }
.quick button.on { color:var(--ink); text-decoration:underline; text-underline-offset:3px }

.bar {
  display:flex; gap:10px; align-items:flex-end;
  padding:12px 16px calc(14px + env(safe-area-inset-bottom));
}
.bar-in { max-width:var(--measure); margin:0 auto; width:100%; display:flex; gap:10px; align-items:flex-end }
.bar textarea {
  flex:1; font-size:16px; line-height:1.55; resize:none; max-height:132px;
  padding:11px 13px; background:var(--paper); border:1px solid var(--line-2);
  border-radius:6px; color:var(--ink); outline:0; transition:border-color .15s;
}
.bar textarea:focus { border-color:var(--ink) }
.bar .mic {
  flex:0 0 auto; font-size:13.5px; color:var(--ink-3); padding:11px 2px;
  transition:color .13s;
}
.bar .mic:hover { color:var(--ink-2) }
.bar .mic.rec { color:var(--bad) }
.bar .send {
  flex:0 0 auto; padding:11px 14px; border-radius:6px;
  background:var(--ink); color:var(--btn-ink); font-size:14.5px; font-weight:500;
  transition:background .15s,opacity .15s;
}
.bar .send:hover { background:var(--btn-hover) }
.bar .send[disabled] { opacity:.3; pointer-events:none }

/* На узком экране подписи кнопок съедали поле ввода — переносим их под него. */
@media (max-width:430px) {
  .bar-in { flex-wrap:wrap; gap:8px }
  .bar textarea { order:-1; flex:1 1 100% }
  .bar .mic { margin-right:auto }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms!important; transition-duration:.001ms!important }
}