/* Jisste on a phone: the same app, dressed as a phone app. Only applies with html.phone (a touch screen under 900px wide,
   set by js/native.js). Large titles that shrink as you scroll, see-through bars, screens that slide, grouped settings,
   bottom sheets with a handle, press feedback instead of hover. */
html.phone { -webkit-text-size-adjust: 100%; }
html.phone body { overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
html.phone input, html.phone textarea, html.phone .bubble, html.phone .bubble *, html.phone .keybox, html.phone .reckey { -webkit-user-select: text; user-select: text; }
html.phone .top, html.phone .tabbar, html.phone .row, html.phone .set, html.phone .tab, html.phone .story { -webkit-touch-callout: none; }

/* no sticky hover on touch; a quick press shade instead */
html.phone .row:hover, html.phone .set:hover, html.phone .iconbtn:hover { background: none; }
html.phone .row[aria-current="true"] { background: none; }
html.phone .row:active, html.phone .set:active { background: var(--hover); transition: background 0s; }
html.phone .row, html.phone .set { transition: background .25s; }
html.phone .iconbtn:active { background: var(--hover); transform: scale(.92); }
html.phone .btn:active, html.phone .chip:active, html.phone .fab:active, html.phone .pill:active, html.phone .story:active { transform: scale(.96); }
html.phone .btn, html.phone .chip, html.phone .fab, html.phone .iconbtn, html.phone .story { transition: transform .12s ease; }

/* ---------- top bars: a large title on each tab, shrinking into a slim bar as the list scrolls ---------- */
html.phone .side > .top { min-height: 52px; padding-bottom: 6px; position: relative; z-index: 3; transition: box-shadow .2s, background .2s; }
html.phone .side > .top h1 { font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; transition: font-size .22s ease, transform .22s ease; transform-origin: left center; }
html.phone .side > .top h1.brand { font-size: 32px; }
html.phone .side > .top:has([data-act="back"]) h1 { font-size: 20px; letter-spacing: -.02em; }
html.phone .side.scrolled > .top { box-shadow: 0 .5px 0 var(--line); background: color-mix(in srgb, var(--panel) 82%, transparent); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
html.phone .side.scrolled > .top h1 { font-size: 20px; }
html.phone .side > .search { transition: margin .22s ease, opacity .22s ease, max-height .22s ease; max-height: 60px; overflow: hidden; }
html.phone .side.scrolled > .search { max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
html.phone .chat .top { box-shadow: 0 .5px 0 var(--line); background: color-mix(in srgb, var(--panel) 88%, transparent); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }

/* ---------- the tab bar: see-through, with a soft pill behind the open tab ---------- */
html.phone .tabbar { border-top: 0; box-shadow: 0 -.5px 0 var(--line); background: color-mix(in srgb, var(--panel) 86%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); padding-top: 6px; position: relative; z-index: 4; }
html.phone .tab { min-height: 52px; font-size: 11px; font-weight: 600; gap: 3px; }
html.phone .tab svg.i { width: 26px; height: 26px; padding: 2px 14px; box-sizing: content-box; border-radius: 16px; transition: background .2s ease; }
html.phone .tab[aria-current="page"] svg.i { background: var(--brand-soft); }
html.phone .tab[aria-current="page"] span { color: var(--brand); font-weight: 700; }
html.phone .tab .dot { top: 0; left: calc(50% + 6px); border: 2px solid var(--panel); height: 20px; min-width: 20px; }

/* ---------- screens slide like an app ---------- */
@keyframes push-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes reveal-in { from { transform: translateX(-28%); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes rise-in { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
html.phone .push-in { animation: push-in .32s cubic-bezier(.2, .8, .2, 1); box-shadow: -10px 0 30px rgba(0, 0, 0, .12); }
html.phone .reveal-in { animation: reveal-in .3s cubic-bezier(.2, .8, .2, 1); }
html.phone .tab-in { animation: rise-in .22s ease; }
html.phone .dragging { transition: none !important; animation: none !important; box-shadow: -10px 0 30px rgba(0, 0, 0, .15); }
html.phone .snap { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
html.phone .shell { position: relative; overflow: hidden; }
html.phone .under { position: absolute; inset: 0; background: var(--bg); z-index: 0; }

/* ---------- lists ---------- */
html.phone .row { min-height: 76px; }
html.phone .row .name { font-size: 16.5px; }
html.phone .fab { bottom: 16px; border-radius: 20px; box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 38%, transparent); }
html.phone .chips { padding-bottom: 8px; }

/* swipe a chat sideways for quick actions (rules below, with the peek) */
html.phone .acts .a-read { background: #3478f6; } html.phone .acts .a-pin { background: #8e8e93; }
html.phone .acts .a-mute { background: #ff9500; } html.phone .acts .a-archive { background: var(--brand); }

/* ---------- You and settings: grouped, rounded sections on a soft background ---------- */
html.phone .side:has(.me) .scroll, html.phone .side:has(.me) { background: var(--bg); }
html.phone .side:has(.me) > .top { background: var(--bg); }
html.phone .side:has(.me).scrolled > .top { background: color-mix(in srgb, var(--bg) 82%, transparent); }
html.phone .side:has(.me) .me { padding-bottom: 18px; }
html.phone .side:has(.me) .scroll > .set { background: var(--panel); width: calc(100% - 32px); margin: 0 16px; padding-left: 14px; padding-right: 14px; min-height: 54px; position: relative; }
html.phone .side:has(.me) .scroll > .set:not(:has(+ .set))::after { display: none; }
html.phone .side:has(.me) .scroll > .set::after { content: ""; position: absolute; left: 52px; right: 0; bottom: 0; height: .5px; background: var(--line); }
html.phone .side:has(.me) .scroll > .me + .set, html.phone .side:has(.me) .scroll > :not(.set) + .set { border-radius: 14px 14px 0 0; margin-top: 4px; }
html.phone .side:has(.me) .scroll > .set:not(:has(+ .set)) { border-radius: 0 0 14px 14px; margin-bottom: 18px; }
html.phone .side:has(.me) .scroll > :not(.set) + .set:not(:has(+ .set)) { border-radius: 14px; }
html.phone .side:has(.me) .scroll > .set svg.i { width: 30px; height: 30px; padding: 5px; box-sizing: border-box; border-radius: 8px; background: var(--brand); color: #fff; stroke-width: 2; }
html.phone .side:has(.me) .scroll > .set[data-act="signout"] svg.i, html.phone .side:has(.me) .scroll > .set[data-act="leave-demo"] svg.i { background: var(--danger); }
html.phone .side:has(.me) .scroll > .set .mid small { font-size: 12.5px; }
html.phone .side:has(.me) .scroll > .set.sep { margin-top: 22px; }

/* ---------- bottom sheets: a handle, slide up, drag down to close ---------- */
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
html.phone .sheet .panel { width: 100%; border-radius: 22px 22px 0 0; padding-top: 22px; animation: sheet-up .3s cubic-bezier(.2, .8, .2, 1); }
html.phone .sheet .panel::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: var(--line); }
html.phone .sheet .scrim { animation: fade-in .25s ease; }

/* ---------- a chat ---------- */
html.phone .composer { padding-top: 6px; background: color-mix(in srgb, var(--wall) 80%, transparent); }
html.phone .composer .box { border-radius: 22px; min-height: 44px; }
html.phone .composer .send { width: 44px; height: 44px; }
html.phone .bubble { -webkit-touch-callout: none; }

/* ---------- launch screen, as an app opens ---------- */
html.phone .boot { position: fixed; inset: 0; margin: 0; place-content: center; background: var(--brand); color: rgba(255, 255, 255, .85); gap: 14px; }
html.phone .boot .mark { background: #fff; color: var(--brand); width: 84px; height: 84px; border-radius: 26px; font-size: 46px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); animation: rise-in .4s ease; }
html.phone .boot p { font-weight: 700; letter-spacing: .02em; }

/* ---------- "get the app" nudge, in a phone browser only ---------- */
.getapp { position: fixed; left: 10px; right: 10px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 18px;
  background: var(--panel); box-shadow: 0 10px 34px rgba(0, 0, 0, .22); border: 1px solid var(--line); animation: rise-in .3s ease; }
.getapp .mark { width: 42px; height: 42px; border-radius: 12px; font-size: 22px; flex: none; }
.getapp .t { flex: 1; min-width: 0; display: grid; } .getapp .t b { font-size: 15px; } .getapp .t small { color: var(--muted); font-size: 12.5px; }
.getapp .go { background: var(--brand); color: var(--brand-ink); font-weight: 700; border-radius: 16px; padding: 7px 14px; flex: none; }
.getapp .x { color: var(--muted); width: 30px; height: 30px; display: grid; place-items: center; flex: none; }
.getapp .x svg.i { width: 18px; height: 18px; }

/* installed on the home screen: the status bar sits over the app, so the bars reach the top edge */
html.phone.standalone .demo-bar + .shell .top { padding-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  html.phone .push-in, html.phone .reveal-in, html.phone .tab-in, html.phone .sheet .panel, html.phone .boot .mark { animation: none; }
  html.phone .side > .top h1, html.phone .side > .search { transition: none; }
}

/* the chat list peeks out under a chat while it is dragged back */
html.phone .shell.peek .side { display: flex; position: absolute; inset: 0; z-index: 0; }
html.phone .shell.peek .main { position: relative; z-index: 1; }
html.phone #chatlist .acts { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; z-index: 0; }
html.phone #chatlist .acts span { display: flex; height: 100%; }
html.phone #chatlist .acts button { width: 78px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; font-size: 12px; font-weight: 600; }
html.phone #chatlist .acts button svg.i { width: 22px; height: 22px; }
html.phone #chatlist .row.swiping { position: relative; z-index: 1; background: var(--panel); }
/* the launch screen before the app's code has run */
@media (max-width: 899px) and (pointer: coarse) {
  .boot { position: fixed; inset: 0; margin: 0; place-content: center; background: var(--brand); color: rgba(255, 255, 255, .85); gap: 14px; }
  .boot .mark { background: #fff; color: var(--brand); width: 84px; height: 84px; border-radius: 26px; font-size: 46px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
}


/* ---------- symmetrical on phones: titles, subtitles, icons and buttons sit on the middle line, with even edges ---------- */
@media (max-width: 899px) {
  .side > .top h1 { text-align: center; transform-origin: center; }
  /* a back button or an action on one side only: balance it with the same space on the other side */
  .side > .top:has(> [data-act="back"]):not(:has(> :not(h1):not([data-act="back"]))) h1 { padding-right: 48px; }
  .side > .top:not(:has(> [data-act="back"])):has(> :not(h1)) h1 { padding-left: 48px; }
  .side .chips, .side .stories { justify-content: safe center; }
  .welcome .inner { justify-items: center; text-align: center; }
  .welcome .inner > form, .welcome .inner > .btn { width: 100%; }
  .welcome .points { justify-self: center; justify-items: start; text-align: left; }
  .welcome .field label { display: block; text-align: center; }
  .welcome .field input { text-align: center; }
  .sheet .pollform > h3, .sheet .picker > h3, .sheet .pollform > .fine { text-align: center; }
  .side .pad > .note, .fine.pad.intro { text-align: center; }
  .empty { padding-left: 16px; padding-right: 16px; }
}