/* The phone mockup. Drawn at a fixed 390×844 logical screen and scaled to fit by JS. */
.phone {
  --chat-bg: #0b0b0b;
  --bar-bg: #1c1c1d;
  --bar-ink: #ffffff;
  --bar-muted: #9a9a9f;
  --in-bg: #262628;
  --out-bg: #0a7d47;
  --in-ink: #ffffff;
  --out-ink: #ffffff;
  --in-meta: rgba(255,255,255,.55);
  --out-meta: rgba(255,255,255,.7);
  --tick-read: #53bdeb;
  --pill-bg: #2c2c2e;
  --chip-bg: #1f2223;
  --chip-ink: #c9cccd;
  --doodle: rgba(255,255,255,.045);
  --send: #21c063;
  --send-ink: #0b0b0b;
  --frame: #1b1b1d;
  --frame-edge: #3a3a3d;
  --tail-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'><path d='M0 0H6C6 8 8 13 12 16H0Z'/></svg>");
  --doodle-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'> <path d='M30 40c-6-8-18-2-12 8l12 10 12-10c6-10-6-16-12-8z'/> <path d='M120 20l5 10 11 2-8 8 2 11-10-5-10 5 2-11-8-8 11-2z'/> <circle cx='150' cy='110' r='14'/><path d='M144 106h.1M156 106h.1M144 115c3 4 9 4 12 0'/> <path d='M30 120h34a6 6 0 0 1 6 6v18a6 6 0 0 1-6 6H44l-10 8v-8h-4a6 6 0 0 1-6-6v-18a6 6 0 0 1 6-6z'/> <path d='M95 90v-22l18-4v22'/><circle cx='90' cy='92' r='5'/><circle cx='108' cy='88' r='5'/> <path d='M75 25a8 8 0 1 0 0 .1'/><path d='M160 160l10 10M170 160l-10 10'/><path d='M100 150q8-10 16 0t16 0'/> <rect x='8' y='80' width='14' height='20' rx='3'/><path d='M60 70l8 8M68 70l-8 8'/> </svg>");

  position: relative;
  width: 414px; height: 868px;
  padding: 12px;
  border-radius: 64px;
  background: var(--frame);
  box-shadow:
    inset 0 0 0 1.5px var(--frame-edge),
    inset 0 0 0 5px #0a0a0a,
    0 40px 80px -20px rgba(0,0,0,.45),
    0 18px 36px -18px rgba(0,0,0,.4);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
/* side buttons */
.phone::before, .phone::after {
  content: ""; position: absolute; width: 4px; border-radius: 2px; background: var(--frame);
  box-shadow: inset 0 0 0 1px var(--frame-edge);
}
.phone::before { left: -3px; top: 190px; height: 62px; box-shadow: inset 0 0 0 1px var(--frame-edge), 0 82px 0 0 var(--frame); }
.phone::after { right: -3px; top: 230px; height: 96px; }

.phone[data-theme=light] {
  --chat-bg: #efeae2;
  --bar-bg: #f6f6f6;
  --bar-ink: #111b21;
  --bar-muted: #667781;
  --in-bg: #ffffff;
  --out-bg: #d9fdd3;
  --in-ink: #111b21;
  --out-ink: #111b21;
  --in-meta: #667781;
  --out-meta: #667781;
  --tick-read: #34a7e5;
  --pill-bg: #ffffff;
  --chip-bg: #ffffff;
  --chip-ink: #54656f;
  --doodle: rgba(80,60,30,.07);
  --send: #1daa61;
  --send-ink: #ffffff;
}

.screen {
  position: relative; width: 390px; height: 844px;
  border-radius: 52px; overflow: hidden;
  background: var(--chat-bg);
  display: flex; flex-direction: column;
  color: var(--bar-ink);
}
.ic { width: 22px; height: 22px; flex: none; color: var(--bar-ink); }

/* status bar */
.statusbar {
  position: relative; flex: none; height: 54px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 30px 0 46px; background: var(--bar-bg);
  font-weight: 600; font-size: 16.5px; letter-spacing: -.01em;
}
.sb-time { font-variant-numeric: tabular-nums; }
.island { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; }
.sb-icons { display: flex; gap: 6px; align-items: center; fill: currentColor; }

/* header */
.chat-head {
  flex: none; height: 56px; display: flex; align-items: center; gap: 10px;
  padding: 0 18px 4px 12px; background: var(--bar-bg);
  position: relative; z-index: 2;
}
.chat-head .back { width: 13px; height: 22px; margin-right: 2px; }
.chat-head .ic + .ic { margin-left: 16px; }
.ch-avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: #8e8e93 center/cover no-repeat; color: #fff;
  display: grid; place-items: center; font-weight: 600; font-size: 15px;
}
.ch-text { flex: 1; min-width: 0; line-height: 1.2; }
.ch-title { font-weight: 600; font-size: 16.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-sub { font-size: 12.5px; color: var(--bar-muted); height: 16px; overflow: hidden; position: relative; }
.ch-sub span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* chat area */
.viewport { position: relative; flex: 1; overflow: hidden; }
.wallpaper { position: absolute; inset: 0; }
.phone[data-wallpaper=doodle] .wallpaper {
  background-color: var(--doodle);
  -webkit-mask: var(--doodle-svg) 0 0 / 180px 180px repeat;
          mask: var(--doodle-svg) 0 0 / 180px 180px repeat;
}
.thread { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 0 10px; }

.row { display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5px 14px 1.5px; }
.row.out { align-items: flex-end; }
.row.in { align-items: flex-start; }
.row.run-start { padding-top: 7px; }
.row.chip-row { align-items: center; padding: 10px 0 8px; }
.row-inner { display: flex; align-items: flex-end; gap: 6px; max-width: 80%; }
.row.out .row-inner { justify-content: flex-end; }

.chip {
  background: var(--chip-bg); color: var(--chip-ink);
  font-size: 12.5px; font-weight: 500; padding: 4px 11px; border-radius: 8px;
  box-shadow: 0 1px .5px rgba(0,0,0,.13);
}
.chip.note { max-width: 300px; text-align: center; font-weight: 400; line-height: 1.35; padding: 6px 12px; }
.phone[data-theme=light] .chip.note { background: #fff6c5; color: #54656f; }

.av {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 11.5px; font-weight: 600;
  visibility: hidden;
}
.row.run-end .av { visibility: visible; }

.bubble {
  position: relative; min-width: 0;
  padding: 6px 9px 7px 10px; border-radius: 17px;
  font-size: 16px; line-height: 1.32; letter-spacing: -.005em;
  white-space: pre-wrap; overflow-wrap: anywhere;
  box-shadow: 0 1px .5px rgba(0,0,0,.13);
}
.row.in .bubble { background: var(--in-bg); color: var(--in-ink); transform-origin: 0% 100%; }
.row.out .bubble { background: var(--out-bg); color: var(--out-ink); transform-origin: 100% 100%; }
.row.run-end.in .bubble { border-bottom-left-radius: 5px; }
.row.run-end.out .bubble { border-bottom-right-radius: 5px; }
.bubble.emoji-only { font-size: 42px; line-height: 1.15; background: none !important; box-shadow: none; padding: 0 2px 16px; }

/* bubble tail on the last bubble of a run */
.row.run-end .bubble:not(.emoji-only)::after {
  content: ""; position: absolute; bottom: 0; width: 12px; height: 16px;
  background: inherit;
  -webkit-mask: var(--tail-svg) center / 100% 100% no-repeat;
          mask: var(--tail-svg) center / 100% 100% no-repeat;
}
.row.run-end.out .bubble::after { right: -6px; }
.row.run-end.in .bubble::after { left: -6px; transform: scaleX(-1); }

.name { display: block; font-size: 13.5px; font-weight: 600; color: var(--nc, #53bdeb); margin-bottom: 1px; line-height: 1.25; }
.meta {
  position: absolute; right: 9px; bottom: 5px;
  display: flex; align-items: center; gap: 3px;
  font-size: 11px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.row.in .meta { color: var(--in-meta); }
.row.out .meta { color: var(--out-meta); }
.bubble.emoji-only .meta {
  right: 0; bottom: 0; padding: 3px 6px; border-radius: 8px;
  background: rgba(0,0,0,.35); color: #fff;
}
.spacer {
  display: inline-flex; gap: 3px; visibility: hidden; height: 1px; overflow: hidden; vertical-align: baseline;
  padding-left: 10px; font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums;
}

.ticks { width: 16px; height: 11px; color: var(--out-meta); transition: color .25s; }
.ticks .t2 { opacity: 0; transition: opacity .2s; }
.ticks[data-state=delivered] .t2, .ticks[data-state=read] .t2 { opacity: 1; }
.ticks[data-state=read] { color: var(--tick-read); }
.bubble.emoji-only .ticks { color: #fff; }
.bubble.emoji-only .ticks[data-state=read] { color: var(--tick-read); }

/* typing bubble */
.typing { display: flex; gap: 4px; align-items: center; height: 21px; padding: 0 5px; }
.typing i {
  width: 7.5px; height: 7.5px; border-radius: 50%; background: var(--in-meta);
  animation: dot 1.2s infinite ease-in-out;
}
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* reaction */
.reaction {
  position: absolute; bottom: -16px; font-size: 14px; line-height: 1;
  background: var(--in-bg); border-radius: 12px; padding: 3px 5px;
  box-shadow: 0 0 0 2px var(--chat-bg);
}
.row.in .reaction { left: 8px; }
.row.out .reaction { right: 8px; }
.row.has-reaction { padding-bottom: 18px; }

/* composer */
.composer {
  flex: none; height: 54px; display: flex; align-items: center; gap: 12px;
  padding: 0 16px 0 14px; background: var(--bar-bg);
}
.composer .plus { width: 21px; height: 21px; }
.field-pill {
  flex: 1; min-width: 0; height: 36px; border-radius: 18px; background: var(--pill-bg);
  display: flex; align-items: center; padding: 0 10px 0 14px; gap: 8px;
  border: .5px solid rgba(127,127,127,.15);
}
.input-scroll {
  flex: 1; min-width: 0; overflow: hidden; white-space: nowrap;
  font-size: 16px; display: flex; align-items: center; height: 100%;
}
.input-scroll span { white-space: pre; }
.caret { display: none; flex: none; width: 2px; height: 20px; margin-left: 1px; background: var(--send); border-radius: 1px; animation: blink 1s steps(1) infinite; }
.composer.focused .caret { display: block; }
.composer.typing-active .caret { animation: none; }
@keyframes blink { 50% { opacity: 0; } }
.field-pill .sticker { width: 20px; height: 20px; color: var(--bar-muted); }
.composer-right { position: relative; flex: none; width: 68px; height: 36px; }
.idle-icons, .send-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; transition: opacity .18s, transform .22s cubic-bezier(.3,1.4,.5,1); }
.idle-icons { gap: 22px; }
.send-btn { opacity: 0; transform: scale(.4); }
.send-btn svg { width: 34px; height: 34px; padding: 8px 8px 7px 9px; border-radius: 50%; background: var(--send); color: var(--send-ink); }
.composer.has-text .idle-icons { opacity: 0; transform: scale(.7); }
.composer.has-text .send-btn { opacity: 1; transform: none; }
.send-btn.pressed svg { transform: scale(.85); transition: transform .08s; }

.home-indicator { flex: none; height: 34px; background: var(--bar-bg); position: relative; }
.home-indicator::after {
  content: ""; position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px;
  margin-left: -67px; border-radius: 3px; background: var(--bar-ink);
}