:root {
  --bg: #fff6e9;
  --ink: #3b2f2f;
  --soft: #f3e4cf;
  --mine: #ffd166;
  --card: #ffffff;
  --accent: #f2668b;
  --go: #37b36b;
  --stop: #ef4444;
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; height: 100%; background: var(--bg); overscroll-behavior: none; }

body { user-select: none; -webkit-user-select: none; touch-action: manipulation; }

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

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
button:active { transform: scale(0.94); }
button:disabled { opacity: 0.4; }

/* ---------- home ---------- */

.home { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vmin; padding: 6vmin; position: relative; }
.people { display: flex; flex-wrap: wrap; gap: 6vmin; justify-content: center; }
.person { display: flex; flex-direction: column; align-items: center; gap: 2vmin; position: relative; }
.face {
  width: min(36vmin, 240px); height: min(36vmin, 240px); border-radius: 50%;
  display: grid; place-items: center; font-size: min(20vmin, 130px); line-height: 1;
  background: var(--card); border: 1.2vmin solid var(--c, var(--accent));
  box-shadow: 0 1.2vmin 0 rgba(0, 0, 0, 0.08);
}
.name { font-size: min(6vmin, 40px); font-weight: 800; }
.badge {
  position: absolute; top: 0; right: 0; min-width: 9vmin; height: 9vmin; padding: 0 2vmin; border-radius: 99px;
  background: var(--stop); color: #fff; font-weight: 800; font-size: 5vmin; display: grid; place-items: center;
  border: 0.8vmin solid var(--bg); animation: bounce 1s ease-in-out infinite;
}
@keyframes bounce { 50% { transform: translateY(-1.5vmin); } }

.corner { position: absolute; top: 3vmin; right: 3vmin; display: flex; gap: 2vmin; }
.corner button { width: 56px; height: 56px; border-radius: 50%; font-size: 26px; background: var(--soft); }
.corner .gear { opacity: 0.35; }

/* ---------- chat ---------- */

.chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.top {
  display: flex; align-items: center; gap: 16px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  background: var(--card); border-bottom: 3px solid var(--soft);
}
.back { width: 64px; height: 64px; border-radius: 50%; background: var(--soft); font-size: 34px; font-weight: 800; }
.top .face { width: 64px; height: 64px; font-size: 36px; border-width: 4px; box-shadow: none; }
.top .name { font-size: 28px; }

.list { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; -webkit-overflow-scrolling: touch; }
.empty { margin: auto; font-size: 90px; opacity: 0.5; }

.msg { max-width: min(78%, 620px); display: flex; flex-direction: column; gap: 8px; align-self: flex-start; }
.msg.out { align-self: flex-end; align-items: flex-end; }
.bubble {
  background: var(--card); border-radius: 26px; border-bottom-left-radius: 8px; padding: 14px 20px;
  font-size: 26px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.06); user-select: text; -webkit-user-select: text;
}
.msg.out .bubble { background: var(--mine); border-radius: 26px; border-bottom-right-radius: 8px; }
.msg.pending { opacity: 0.55; }
.msg img.pic { max-width: 100%; max-height: 60vh; border-radius: 22px; background: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.06); display: block; }
.row { display: flex; align-items: center; gap: 10px; }
.msg.out .row { flex-direction: row-reverse; }
.say { width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--soft); font-size: 26px; }
.say.on { background: var(--accent); }
.when { font-size: 14px; opacity: 0.45; padding: 0 8px; }

/* voice bubble */
.voice {
  display: flex; align-items: center; gap: 14px; background: var(--card); border-radius: 99px; padding: 10px 22px 10px 10px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.06); min-width: 220px;
}
.msg.out .voice { background: var(--mine); }
.voice button { width: 60px; height: 60px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; font-size: 28px; }
.voice .bar { flex: 1; height: 12px; border-radius: 99px; background: rgba(0, 0, 0, 0.12); overflow: hidden; }
.voice .bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 99px; }

/* ---------- composer ---------- */

.composer {
  background: var(--card); border-top: 3px solid var(--soft); padding: 14px 16px;
  padding-bottom: max(14px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px;
}
.tools { display: flex; justify-content: center; align-items: center; gap: min(8vw, 56px); }
.big {
  width: 96px; height: 96px; border-radius: 50%; font-size: 46px; display: grid; place-items: center; color: #fff;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.14);
}
.big:active { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.14); }
.big.mic { background: var(--accent); }
.big.draw { background: #4f8ef7; }
.big.type { background: #9b6bdf; }
.big.send { background: var(--go); }
.big.bin { background: #cfc4b6; }
.big.play { background: #4f8ef7; }
.big.rec { background: var(--stop); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 18px rgba(239, 68, 68, 0.25); } }
.clock { font-size: 34px; font-weight: 800; min-width: 90px; text-align: center; font-variant-numeric: tabular-nums; }

.typing { display: flex; gap: 12px; align-items: flex-end; }
.typing textarea {
  flex: 1; font: inherit; font-size: 28px; line-height: 1.3; padding: 14px 20px; border-radius: 26px;
  border: 4px solid var(--soft); background: var(--bg); color: inherit; resize: none; outline: none;
  max-height: 30vh; user-select: text; -webkit-user-select: text;
}
.typing textarea:focus { border-color: #9b6bdf; }
.typing .big { width: 72px; height: 72px; font-size: 34px; flex: none; }
.emoji { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.emoji::-webkit-scrollbar { display: none; }
.emoji button { font-size: 38px; width: 60px; height: 60px; flex: none; border-radius: 16px; }
.emoji button:active { background: var(--soft); }

/* ---------- drawing ---------- */

.pad { position: fixed; inset: 0; background: #e9dfd0; display: flex; flex-direction: column; z-index: 10; }
.pad canvas { flex: 1; min-height: 0; width: 100%; background: #fff; touch-action: none; display: block; }
.pad .strip {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card); overflow-x: auto;
  padding-bottom: max(10px, env(safe-area-inset-bottom)); scrollbar-width: none;
}
.pad .strip.head { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: 10px; justify-content: space-between; }
.swatch { width: 54px; height: 54px; flex: none; border-radius: 50%; border: 4px solid rgba(0, 0, 0, 0.1); }
.swatch.on { outline: 5px solid var(--ink); outline-offset: 2px; }
.swatch.rub { background: #fff; display: grid; place-items: center; font-size: 26px; }
.size { width: 54px; height: 54px; flex: none; border-radius: 16px; background: var(--soft); display: grid; place-items: center; }
.size.on { background: var(--ink); }
.size i { display: block; border-radius: 50%; background: var(--ink); }
.size.on i { background: #fff; }
.sep { width: 3px; align-self: stretch; background: var(--soft); flex: none; margin: 0 4px; }
.pad .big { width: 68px; height: 68px; font-size: 32px; flex: none; }

/* ---------- setup + toast ---------- */

.setup { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; }
.setup h1 { font-size: 60px; margin: 0; }
.setup p { font-size: 18px; max-width: 420px; margin: 0; opacity: 0.7; }
.setup input { font: inherit; font-size: 22px; padding: 14px 18px; border-radius: 16px; border: 3px solid var(--soft); width: min(90vw, 420px); text-align: center; user-select: text; -webkit-user-select: text; }
.setup button { font-size: 20px; font-weight: 700; padding: 14px 28px; border-radius: 99px; background: var(--go); color: #fff; }
.setup button.plain { background: var(--soft); color: var(--ink); }

.toast {
  position: fixed; left: 50%; bottom: 200px; transform: translateX(-50%); background: var(--ink); color: #fff;
  font-size: 40px; padding: 14px 28px; border-radius: 99px; z-index: 20; animation: shake 0.4s;
}
@keyframes shake { 25% { margin-left: -12px; } 75% { margin-left: 12px; } }

/* narrow screens: the colour strip wraps rather than hiding the brush sizes */
@media (max-width: 900px) { .pad .strip:not(.head) { flex-wrap: wrap; justify-content: center; } .pad .strip .sep { display: none; } }