/* Chatlet's landing look (chatlet/src/styles.css, GroupChat.css, the kit): Barlow,
   the pale ground, a liquid-glass panel under a small kicker, glass fields, chips,
   a black pill button, and Chatlet itself as a little pet on the panel's edge. */
:root {
  --ground: #f6f7f9;
  --ink: #1d1d1f;
  --ink-2: #52525b;
  --ink-3: #797980;
  --muted: #6e6e73;
  --blue: #2f5fc9;
  --accent: #2563eb;
  --glass: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(250, 251, 253, 0.62));
  /* Fields, as in Chatlet (chatlet/src/styles.css --input-*): focus is neutral glass and lift. */
  --field: linear-gradient(145deg, rgba(255, 255, 255, 0.44), rgba(250, 251, 253, 0.18));
  --field-on: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(250, 251, 253, 0.62));
  --field-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(15, 23, 42, 0.025), 0 0 0 1px rgba(29, 29, 31, 0.05);
  --field-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 4px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(29, 29, 31, 0.05);
  --field-shadow-focus: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 3px 6px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
* { box-sizing: border-box; }
/* Hidden means hidden, whatever display a class gives an element. */
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  font: 15px/1.55 Barlow, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }

.home { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.stack { width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 56px; }
.chatlet { position: relative; width: 100%; }
.kicker { font-size: 13px; color: var(--muted); margin: 0 0 6px 2px; }

.card {
  position: relative;
  border-radius: 16px;
  padding: 14px 18px 18px;
  background: var(--glass);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 12px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
.crumbs { font-size: 12px; color: var(--ink-2); margin-bottom: 12px; }
.crumbs [aria-current] { color: var(--ink); }

.intro h1 { font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; margin: 2px 0 6px; }
.intro p { margin: 0 0 6px; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.video { display: inline-flex; gap: 6px; font-size: 13px; font-weight: 600; color: var(--blue); text-decoration: none; margin-top: 2px; }
.video:hover { text-decoration: underline; }

form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.k { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.k em { font-style: normal; font-weight: 400; color: var(--ink-3); margin-left: 4px; }

input:not([type=checkbox]), textarea {
  width: 100%;
  border: 0;
  border-radius: 11px;
  padding: 9px 13px;
  background: var(--field);
  box-shadow: var(--field-shadow);
  outline: none;
  transition: box-shadow 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
input:not([type=checkbox]):hover, textarea:hover { box-shadow: var(--field-shadow-hover); }
input:not([type=checkbox]):focus, textarea:focus { background: var(--field-on); box-shadow: var(--field-shadow-focus); transform: translateY(-1px); }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
textarea { resize: vertical; min-height: 72px; font: 13px/1.45 Inter, system-ui, sans-serif; }
.field.is-bad input { box-shadow: var(--field-shadow), 0 0 0 1px rgba(239, 68, 68, 0.35); }

/* Chips, like the landing's friend chips: white pills that tick when picked. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; cursor: pointer;
  padding: 5px 11px 5px 6px;
  border-radius: 999px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06);
  transition: transform 0.15s var(--spring), box-shadow 0.2s, background 0.2s;
}
.chip:hover { transform: translateY(-1px); }
.chip .face {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font: 600 8.5px/1 Barlow, sans-serif; letter-spacing: 0.03em; color: var(--ink-2);
  background: #eceef1; box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.08);
}
.chip .tick { width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; color: transparent; background: rgba(29, 29, 31, 0.06); transition: background 0.2s, color 0.2s; }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { background: #fff; box-shadow: 0 0 0 1.5px rgba(47, 95, 201, 0.55), 0 4px 14px rgba(47, 95, 201, 0.14); }
.chip[aria-pressed="true"] .tick, .chip[aria-checked="true"] .tick { background: var(--blue); color: #fff; }
.chip.size { padding: 6px 14px; }
.chip.size .tick { display: none; }
.chip[aria-checked="true"].size { color: var(--blue); font-weight: 600; }

/* Platforms: one row on a faint grey track; a soft white pill glides to the picked one;
   platforms with a handle turn Chatlet blue. */
.seg {
  position: relative; isolation: isolate;
  display: flex; gap: 2px; padding: 3px; width: max-content; max-width: 100%;
  overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth;
  border-radius: 999px;
  background: rgba(29, 29, 31, 0.045);
}
.seg::-webkit-scrollbar { display: none; }
.seg-thumb {
  position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 0; width: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(15, 23, 42, 0.06), 0 3px 10px rgba(15, 23, 42, 0.07);
  transition: transform 460ms var(--spring), width 460ms var(--spring);
}
.seg button {
  flex: none; position: relative;
  border: 0; cursor: pointer; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--ink-3);
  background: transparent;
  transition: color 0.25s ease;
}
.seg button:hover { color: var(--ink-2); }
.seg button[aria-selected="true"] { color: var(--ink); }
.seg button.is-filled { color: var(--blue); }
/* The box eases its new content in when the platform changes. */
#social-input.is-swapping { animation: box-swap 320ms ease; }
@keyframes box-swap { 0% { opacity: 0.35; transform: translateY(3px); } 100% { opacity: 1; transform: none; } }
#social-input { margin-top: 6px; }
.add { position: relative; margin-top: 2px; }
.add input { padding-right: 40px; }
.add-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); font-size: 18px; cursor: pointer; }
.add-btn:hover { background: rgba(29, 29, 31, 0.06); color: var(--ink); }

.check { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; font-weight: 600; color: var(--blue); cursor: pointer; }
.check input { margin: 3px 0 0; accent-color: var(--blue); width: 15px; height: 15px; }

.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.error { font-size: 13px; color: #b91c1c; background: rgba(239, 68, 68, 0.07); border-radius: 10px; padding: 7px 11px; }
.actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
.fine { font-size: 12px; color: var(--ink-3); }
.btn {
  border: 0; cursor: pointer; white-space: nowrap;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: #fff; background: var(--ink);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
  transition: transform 0.14s ease, background 0.2s;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); background: #000; }
.btn:disabled { opacity: 0.55; cursor: default; }

.done { padding: 10px 0 6px; }
.links { display: flex; gap: 18px; font-size: 13px; color: var(--muted); text-align: center; }

/* ------------------------------------------------------------ the pet (Chatlet, from the landing page) */
.pet {
  --pet-face: 1;
  position: absolute; z-index: 3;
  width: 18px; height: 18px; margin-left: -9px;
  transform: translateY(-100%);
  transition: left 900ms cubic-bezier(0.45, 0, 0.2, 1), --pet-lx 450ms ease-out, --pet-ly 450ms ease-out;
  pointer-events: none;
}
@property --pet-lx { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --pet-ly { syntax: "<number>"; inherits: true; initial-value: 0; }
.pet-hit { position: absolute; left: -14px; right: -14px; bottom: -4px; height: 64px; pointer-events: auto; cursor: default; }
.pet-shadow {
  position: absolute; left: 50%; bottom: -2px; width: 16px; height: 4px; margin-left: -8px; border-radius: 50%;
  background: rgba(37, 99, 235, 0.22); filter: blur(1.5px);
  translate: calc(var(--pet-lx) * -1.2px) 0;
  transition: transform 520ms var(--spring), opacity 400ms;
}
.pet.is-up .pet-shadow { transform: scale(0.45); opacity: 0.35; }
.pet-body { position: absolute; inset: 0; transition: transform 560ms var(--spring); }
.pet.is-up .pet-body { transform: translateY(-30px); }
.pet-move { position: absolute; inset: 0; transform-origin: 50% 100%; }
.pet-bob { position: absolute; inset: 1px; transform-origin: 50% 100%; animation: pet-breathe 2.8s ease-in-out infinite; }
.pet.is-up .pet-bob { animation: pet-hover 2.4s ease-in-out infinite; }
.pet-dot {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  background:
    radial-gradient(circle at calc(46% + var(--pet-lx) * 16%) calc(40% + var(--pet-ly) * 14%), rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.22) 42%, transparent 70%),
    linear-gradient(145deg, #8fb3ff, #4f7fe8);
  box-shadow: calc(var(--pet-lx) * -1px) 3px 10px rgba(37, 99, 235, 0.32), 0 0 0 2px rgba(255, 255, 255, 0.85);
  translate: calc(var(--pet-lx) * 0.5px) 0;
}
.pet-move.is-hop { animation: pet-hop 620ms cubic-bezier(0.3, 0, 0.3, 1); }
.pet-move.is-double { animation: pet-hop 460ms cubic-bezier(0.3, 0, 0.3, 1) 2; }
.pet-move.is-scoot { animation: pet-scoot 900ms ease-in-out; }
.pet-move.is-squish { animation: pet-squish 700ms ease-in-out; }
.pet-move.is-look { animation: pet-look 900ms ease-in-out; }
.pet-shadow.is-hop { animation: pet-shadow-hop 620ms cubic-bezier(0.3, 0, 0.3, 1); }
.pet-shadow.is-double { animation: pet-shadow-hop 460ms cubic-bezier(0.3, 0, 0.3, 1) 2; }
.pet-shadow.is-scoot { animation: pet-shadow-scoot 900ms ease-in-out; }
@keyframes pet-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, 0.95); } }
@keyframes pet-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes pet-hop {
  0% { transform: translateY(0) scale(1, 1); } 14% { transform: translateY(0) scale(1.18, 0.8); }
  42% { transform: translateY(-14px) scale(0.9, 1.12); } 62% { transform: translateY(-15px) scale(1, 1); }
  84% { transform: translateY(0) scale(1.14, 0.84); } 100% { transform: translateY(0) scale(1, 1); }
}
@keyframes pet-scoot {
  0%, 100% { transform: translateY(0) rotate(0); } 15% { transform: translateY(0) scale(1.08, 0.9); }
  30% { transform: translateY(-4px) rotate(calc(var(--pet-face) * 8deg)); } 50% { transform: translateY(0) rotate(0) scale(1.06, 0.94); }
  65% { transform: translateY(-4px) rotate(calc(var(--pet-face) * 8deg)); } 82% { transform: translateY(0) rotate(0) scale(1.06, 0.94); }
}
@keyframes pet-squish { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.22, 0.76); } 55% { transform: scale(0.92, 1.08); } 75% { transform: scale(1.04, 0.97); } }
@keyframes pet-look { 0%, 100% { transform: translateX(0) rotate(0); } 30%, 70% { transform: translateX(calc(var(--pet-face) * 2px)) rotate(calc(var(--pet-face) * 10deg)); } }
@keyframes pet-shadow-hop { 0%, 100% { transform: scale(1); opacity: 1; } 14% { transform: scale(1.2, 1); } 52% { transform: scale(0.55); opacity: 0.45; } 84% { transform: scale(1.15, 1); } }
@keyframes pet-shadow-scoot { 0%, 50%, 100% { transform: scale(1); } 30%, 65% { transform: scale(0.8); } }
.pet-bubble {
  position: absolute; left: 20px; bottom: 14px;
  width: max-content; max-width: min(300px, calc(50vw - 44px));
  padding: 5px 12px 6px; border-radius: 14px 14px 14px 4px;
  font: 600 13px/1.35 Inter, system-ui, sans-serif; color: var(--blue);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(248, 250, 252, 0.38));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 0.5px rgba(255, 255, 255, 0.4), 0 10px 28px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(22px) saturate(1.8); -webkit-backdrop-filter: blur(22px) saturate(1.8);
  opacity: 0; transform: translateY(4px) scale(0.85); transform-origin: 0 100%;
  transition: opacity 220ms, transform 420ms var(--spring);
}
.pet.is-left .pet-bubble { left: auto; right: 20px; border-radius: 14px 14px 4px 14px; transform-origin: 100% 100%; }
.pet-bubble.is-on { opacity: 1; transform: none; }
.caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.tap { position: fixed; z-index: 50; width: 0; height: 0; pointer-events: none; }
.tap > span { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(79, 127, 232, 0.55); animation: ring 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.tap > span + span { background: radial-gradient(circle, rgba(143, 179, 255, 0.28), transparent 70%); box-shadow: none; animation-duration: 480ms; }
.tap > i { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #6f97f0; transform: rotate(calc(var(--n) * 60deg + 15deg)); animation: speck 560ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes ring { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes speck { 0% { transform: rotate(calc(var(--n) * 60deg + 15deg)) translateX(4px) scale(1); opacity: 0.9; } 100% { transform: rotate(calc(var(--n) * 60deg + 15deg)) translateX(22px) scale(0.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .seg-thumb, input, textarea { transition: none !important; }
  #social-input.is-swapping { animation: none !important; }
  .pet, .pet-body, .pet-bubble, .pet-shadow { transition: none; }
  .pet-bob, .pet-move, .pet-shadow, .tap { animation: none !important; }
}