:root {
  color-scheme: light;
  --bg: #f7f6f2;
  --panel: #ffffff;
  --panel-soft: #efeee9;
  --ink: #1e1f1c;
  --muted: #74736d;
  --faint: #aaa8a0;
  --line: #dedcd4;
  --accent: #137c67;
  --accent-dark: #0c6252;
  --accent-soft: #dcefe9;
  --danger: #a54136;
  --danger-soft: #f7e4e1;
  --shadow: 0 16px 44px rgba(35, 34, 30, .1);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); }
body { min-width: 280px; }
button, textarea { font: inherit; }
button { color: inherit; }

.mobile-app {
  width: min(100%, 720px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  background:
    radial-gradient(circle at 85% 5%, rgba(19,124,103,.07), transparent 26%),
    var(--bg);
  overflow: hidden;
}

.app-header {
  grid-row: 1;
  position: relative;
  z-index: 5;
  min-height: calc(64px + env(safe-area-inset-top));
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 10px;
  border-bottom: 1px solid rgba(222,220,212,.8);
  background: rgba(247,246,242,.88);
  backdrop-filter: blur(16px);
}

.title-lockup { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mini-mark {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--ink);
  color: white;
}
.mini-mark svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.title-lockup h1 { margin: 0 0 2px; font-size: 16px; line-height: 1.1; letter-spacing: -.025em; }
.title-lockup p { margin: 0; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.header-action {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.75);
}
.header-action svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.header-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); border: 1.5px solid white; }
.header-dot.online { background: var(--accent); }
.header-dot.offline { background: var(--danger); }

.offline-banner {
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 31px;
  padding: 5px 14px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 10px;
  font-weight: 650;
}
.offline-banner svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.chat-scroll {
  grid-row: 3;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  padding: 12px 13px 28px;
}

.day-divider { display: flex; justify-content: center; margin: 3px 0 18px; }
.day-divider span {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(229,227,219,.82);
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .03em;
}

.mobile-empty { width: min(310px, 90%); margin: clamp(54px, 16vh, 130px) auto 0; text-align: center; }
.mobile-empty h2 { margin: 22px 0 8px; font-size: 18px; letter-spacing: -.025em; }
.mobile-empty p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }

.empty-orbit { display: flex; justify-content: center; align-items: center; gap: 0; }
.empty-orbit > div {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(35,34,30,.06);
}
.empty-orbit svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.empty-orbit > span { width: 56px; height: 1px; background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 4px, transparent 4px, transparent 8px); opacity: .65; }
.orbit-phone { color: var(--accent); }

.message-list { display: grid; }
.mobile-message { display: flex; margin: 7px 0; }
.mobile-message.outgoing { justify-content: flex-end; }
.mobile-message.incoming { justify-content: flex-start; }
.mobile-stack { max-width: min(84%, 580px); }
.mobile-bubble {
  padding: 10px 12px;
  border-radius: 17px;
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.outgoing .mobile-bubble { background: var(--accent); color: white; border-bottom-right-radius: 5px; }
.incoming .mobile-bubble { background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 5px; box-shadow: 0 5px 18px rgba(35,34,30,.045); }
.mobile-bubble p { margin: 0; white-space: pre-wrap; }
.mobile-bubble pre {
  margin: 8px -3px 1px;
  padding: 10px;
  border-radius: 9px;
  overflow-x: auto;
  background: #242521;
  color: #f5f4ef;
  font: 11px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.outgoing .mobile-bubble pre { background: rgba(14,58,49,.82); }
.mobile-meta { display: flex; justify-content: flex-end; align-items: center; gap: 6px; min-height: 16px; padding: 3px 4px 0; color: var(--faint); font-size: 9px; }
.incoming .mobile-meta { justify-content: flex-start; }
.mobile-meta .failed { color: var(--danger); }
.mobile-retry { border: 0; padding: 0 2px; background: transparent; color: var(--danger); font-size: 9px; text-decoration: underline; }

.mobile-composer {
  grid-row: 4;
  position: relative;
  z-index: 5;
  padding: 8px 11px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(222,220,212,.85);
  background: rgba(247,246,242,.92);
  backdrop-filter: blur(16px);
}
.composer-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: end;
  gap: 7px;
  padding: 6px 6px 6px 12px;
  border: 1px solid #cbc8bf;
  border-radius: 17px;
  background: var(--panel);
  box-shadow: 0 9px 30px rgba(35,34,30,.075);
}
.composer-shell textarea {
  width: 100%;
  min-height: 38px;
  max-height: 130px;
  resize: none;
  border: 0;
  outline: 0;
  padding: 8px 0 5px;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
}
.composer-shell textarea::placeholder { color: var(--faint); }
.mobile-send {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: var(--ink);
  color: white;
}
.mobile-send:disabled { opacity: .28; }
.mobile-send svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.composer-hint { margin: 5px 0 0; color: var(--faint); text-align: center; font-size: 8px; letter-spacing: .02em; }

.pair-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(100%, 520px);
  margin: 0 auto;
  padding: calc(30px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 85% 10%, rgba(19,124,103,.12), transparent 27%),
    radial-gradient(circle at 8% 90%, rgba(30,31,28,.06), transparent 30%),
    var(--bg);
}
.pair-hero { text-align: center; }
.pair-logo {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  border-radius: 23px;
  background: var(--ink);
  color: white;
  box-shadow: var(--shadow);
}
.pair-logo svg { width: 43px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.pair-eyebrow { margin: 0 0 7px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.pair-hero h1 { margin: 0; font-size: 28px; letter-spacing: -.04em; }
.pair-hero > p:last-child { width: min(340px, 100%); margin: 13px auto 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.pair-form { display: grid; gap: 10px; margin-top: 32px; }
.pair-form label { color: var(--muted); font-size: 11px; font-weight: 700; }
.pair-form textarea {
  width: 100%;
  min-height: 86px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 14px;
  outline: 0;
  padding: 12px;
  background: var(--panel);
  color: var(--ink);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  box-shadow: 0 6px 20px rgba(35,34,30,.04);
}
.pair-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(19,124,103,.12); }
.pair-submit,
.paste-button,
.sheet-primary,
.sheet-danger {
  min-height: 46px;
  border: 0;
  border-radius: 13px;
  font-weight: 730;
}
.pair-submit, .sheet-primary { background: var(--accent); color: white; }
.paste-button { background: var(--panel-soft); color: var(--ink); }
.pair-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-size: 11px; line-height: 1.45; }
.pair-security { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 24px; color: var(--muted); font-size: 10px; }
.pair-security svg { width: 14px; fill: none; stroke: var(--accent); stroke-width: 1.8; }

.settings-sheet {
  width: min(100% - 20px, 520px);
  max-height: calc(100dvh - 20px);
  margin: auto auto 10px;
  border: 0;
  border-radius: 22px;
  padding: 11px 17px calc(17px + env(safe-area-inset-bottom));
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(24,24,21,.28);
}
.settings-sheet::backdrop { background: rgba(20,21,19,.38); backdrop-filter: blur(3px); }
.settings-sheet[open] { animation: sheet-in .18s ease both; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px); } }
.sheet-handle { width: 36px; height: 4px; margin: 0 auto 17px; border-radius: 99px; background: var(--line); }
.sheet-header { display: flex; justify-content: space-between; align-items: center; }
.sheet-header p { margin: 0 0 5px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.sheet-header h2 { margin: 0; font-size: 20px; }
.sheet-header button { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--panel-soft); }
.sheet-header svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.detail-card { margin: 21px 0 15px; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; }
.detail-card div { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 45px; padding: 0 13px; border-bottom: 1px solid var(--line); font-size: 12px; }
.detail-card div:last-child { border-bottom: 0; }
.detail-card span { color: var(--muted); }
.detail-card strong { max-width: 68%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.detail-card .secure-text { color: var(--accent); }
.sheet-primary, .sheet-danger { width: 100%; margin-top: 8px; }
.sheet-danger { background: var(--danger-soft); color: var(--danger); }
.ios-install { margin: 8px 4px 3px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.version-line { margin: 15px 0 0; color: var(--faint); text-align: center; font-size: 9px; }

.mobile-toast {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: calc(94px + env(safe-area-inset-bottom));
  max-width: calc(100% - 36px);
  transform: translateX(-50%);
  padding: 10px 13px;
  border-radius: 11px;
  background: #252521;
  color: white;
  box-shadow: var(--shadow);
  font-size: 11px;
  text-align: center;
}

button { cursor: pointer; transition: transform .1s ease, opacity .15s ease, background .15s ease; }
button:active { transform: translateY(1px); }
button:focus-visible, textarea:focus-visible { outline: 3px solid rgba(19,124,103,.22); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (min-width: 721px) {
  body { background: #e9e7df; }
  .mobile-app { box-shadow: 0 0 0 1px rgba(60,58,52,.1), 0 22px 80px rgba(35,34,30,.13); }
}

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