/* TillTom — application styles (Design Spec §3 tokens + components).
   No web fonts (system stack), single centred ~480px column, mobile-first. */

:root {
  --c-brand:     #2E6FB7;
  --c-brand-ink: #1F3A5F;
  --c-ink:       #16181D;
  --c-muted:     #5A6270;
  --c-line:      #D4D8DF;
  --c-surface:   #FFFFFF;
  --c-bg:        #F5F7FA;
  --c-positive:  #2F7D4E;
  --c-caution:   #B07A26;
  --c-danger:    #B23A3A;
  --c-dusk:      #B07A26;

  --radius:   8px;
  --radius-lg: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --shadow-card: 0 1px 3px rgba(31, 58, 95, 0.08), 0 1px 2px rgba(31, 58, 95, 0.06);
  --shadow-pop:  0 8px 28px rgba(31, 58, 95, 0.16);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

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

/* ---- top bar ---- */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  min-height: 56px;
}
.topbar .spacer { flex: 1; }
.wordmark {
  font-weight: 700;
  font-size: 20px;
  color: var(--c-brand-ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.wordmark .tom { color: var(--c-brand); }
.back-link { color: var(--c-brand); text-decoration: none; font-size: 15px; }

/* ---- layout blocks ---- */
.screen { padding: var(--space-4) var(--space-4) var(--space-6); flex: 1; }
.center-col { display: flex; flex-direction: column; gap: var(--space-4); }
.spacer-grow { flex: 1; }

h1 { font-size: 28px; line-height: 1.2; color: var(--c-brand-ink); margin: var(--space-3) 0; font-weight: 700; }
h2 { font-size: 20px; color: var(--c-brand-ink); margin: var(--space-4) 0 var(--space-2); }
.sub { font-size: 16px; color: var(--c-muted); margin: 0 0 var(--space-4); }
.caption { font-size: 13px; color: var(--c-muted); }
p { margin: 0 0 var(--space-3); }

/* ---- trust points ---- */
.trust { list-style: none; padding: 0; margin: var(--space-4) 0; }
.trust li { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-2); color: var(--c-ink); }
.trust li::before { content: "\2713"; color: var(--c-positive); font-weight: 700; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px; padding: 0 var(--space-4);
  border: 0; border-radius: var(--radius);
  font-size: 16px; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none; transition: opacity .15s, background .15s;
}
.btn-primary { background: var(--c-brand); color: #fff; }
.btn-primary:hover { opacity: .94; }
.btn-primary:disabled { background: var(--c-line); color: var(--c-muted); cursor: not-allowed; }
.btn-secondary { background: transparent; color: var(--c-brand); border: 1px solid var(--c-line); }
.btn-ghost { background: transparent; color: var(--c-muted); }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-busy { position: relative; color: transparent !important; }
.btn-busy::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.6); border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-primary-sm, .btn-ghost-sm {
  min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius);
  font-size: 14px; font-weight: 600; border: 0; cursor: pointer; font-family: inherit;
  width: auto;
}
.btn-primary-sm { background: var(--c-brand); color: #fff; }
.btn-ghost-sm { background: transparent; color: var(--c-muted); border: 1px solid var(--c-line); }

.link-row { text-align: center; }
.link { color: var(--c-brand); text-decoration: none; font-size: 15px; }

/* ---- inputs ---- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: 14px; color: var(--c-muted); }
.input, textarea.input {
  width: 100%; font-size: 16px; font-family: inherit; color: var(--c-ink);
  padding: var(--space-3); border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-surface); outline: none;
}
.input:focus { border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(46,111,183,.12); }
.helper { font-size: 13px; color: var(--c-muted); }
.error-text { font-size: 14px; color: var(--c-danger); }

/* ---- cards / banners ---- */
.card { background: var(--c-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-4); }
.notice { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--space-3); font-size: 14px; color: var(--c-muted); }
.returning-banner { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--space-3); }

/* ---- footer ---- */
.footer { padding: var(--space-4); text-align: center; }
.footer a { color: var(--c-muted); text-decoration: none; font-size: 13px; margin: 0 var(--space-2); }

/* ---- QR waiting ---- */
.qr-card {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: var(--space-5); display: flex; flex-direction: column; align-items: center;
  gap: var(--space-3); margin: var(--space-4) 0;
}
.qr-box { width: 100%; max-width: 280px; display: flex; justify-content: center; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .82; } }
.count-pill {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--c-bg); color: var(--c-muted); font-size: 14px; font-weight: 600;
}
.count-pill.count-low { color: var(--c-caution); }
.lock-confirm { color: var(--c-positive); font-weight: 600; text-align: center; }

/* ---- chat ---- */
.chat-app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; max-width: 480px; margin: 0 auto; }
.chat-topbar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--c-line);
  background: var(--c-surface);
}
.chat-nick { font-weight: 600; color: var(--c-brand-ink); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time-chip { font-size: 13px; color: var(--c-muted); padding: 2px 8px; border-radius: 999px; background: var(--c-bg); }
.time-chip.chip-amber { color: var(--c-caution); }
.btn-end { background: transparent; border: 1px solid var(--c-line); color: var(--c-danger); border-radius: var(--radius); padding: 6px 12px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }

.chat-banner { padding: var(--space-3) var(--space-4); background: #FBF7EF; color: var(--c-brand-ink); text-align: center; font-weight: 600; border-bottom: 1px solid var(--c-line); }

.safety-strip {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); background: #FBF7EF; border-bottom: 1px solid var(--c-line);
  font-size: 13px; color: var(--c-muted);
}
.safety-strip button { margin-left: auto; background: transparent; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 4px 10px; font-size: 13px; cursor: pointer; font-family: inherit; }

.chat-messages { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.msg-row { display: flex; }
.msg-row.msg-own { justify-content: flex-end; }
.msg-row.msg-other { justify-content: flex-start; }
.msg-bubble {
  max-width: 78%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg);
  font-size: 16px; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
}
.msg-own .msg-bubble { background: var(--c-brand); color: #fff; border-bottom-right-radius: 4px; }
.msg-other .msg-bubble { background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line); border-bottom-left-radius: 4px; }
.msg-bubble.msg-pending { opacity: .6; }
.msg-bubble.msg-undecryptable { background: #FBF7EF; color: var(--c-caution); border: 1px dashed var(--c-caution); font-size: 14px; }
.msg-retry { display: block; margin-top: 2px; background: transparent; border: 0; color: var(--c-danger); font-size: 12px; cursor: pointer; font-family: inherit; }

.composer-wrap { border-top: 1px solid var(--c-line); background: var(--c-surface); padding: var(--space-3); }
.composer { display: flex; gap: var(--space-2); align-items: flex-end; }
.composer textarea {
  flex: 1; resize: none; max-height: 140px; min-height: 44px;
  font-size: 16px; font-family: inherit; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-line); border-radius: var(--radius); outline: none;
}
.composer textarea:focus { border-color: var(--c-brand); }
.composer-send { min-width: 64px; min-height: 44px; border: 0; border-radius: var(--radius); background: var(--c-brand); color: #fff; font-weight: 600; cursor: pointer; font-family: inherit; }
.composer-send:disabled { background: var(--c-line); color: var(--c-muted); cursor: not-allowed; }
.composer-counter { font-size: 12px; color: var(--c-muted); padding: 0 var(--space-2) var(--space-1); }
.composer-counter.counter-caution { color: var(--c-caution); }
.composer-disabled { opacity: 1; }
.composer-replacement { text-align: center; color: var(--c-muted); font-size: 14px; padding: var(--space-3); }

/* ---- bottom sheet ---- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(22,24,29,.4); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.sheet { background: #fff; width: 100%; max-width: 480px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--space-5); box-shadow: var(--shadow-pop); }
.sheet h2 { margin-top: 0; }
.sheet-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }

/* ---- dashboard ---- */
.dash-list { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-4) 0; }
.dash-row { display: flex; align-items: center; gap: var(--space-3); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--space-3); }
.dash-row-main { flex: 1; min-width: 0; }
.dash-nick { font-weight: 600; color: var(--c-brand-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-meta { font-size: 13px; color: var(--c-muted); }
.dash-actions { display: flex; gap: var(--space-2); }
.dash-empty { text-align: center; color: var(--c-muted); padding: var(--space-6) var(--space-4); }

/* ---- terminal / state pages ---- */
.state-screen { text-align: center; padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); align-items: center; }
.state-icon { font-size: 40px; }
.state-screen h1 { margin: 0; }

/* ---- legal/explainer prose ---- */
.prose { padding: var(--space-4); }
.prose h1 { font-size: 26px; }
.prose h2 { font-size: 18px; margin-top: var(--space-5); }
.prose p, .prose li { color: var(--c-ink); font-size: 15px; }
.prose a { color: var(--c-brand); }

[hidden] { display: none !important; }

/* ---- desktop ---- */
@media (min-width: 900px) {
  .qr-box { max-width: 320px; }
}