/* Generation Translator. Every rule is scoped to .gt-app so the app can sit inside a page of meatball4801.com
   without touching the site, and the site's rules can't reach in (names that clashed were renamed: the share
   canvas is .gt-card, the Swarm's story lines are .swarm-lab, header/main/footer are .gt-head/.gt-main/.gt-foot).
   Colors, fonts and corners come from --gt-* tokens: dark on its own (html.gt-standalone, local development),
   the site's own theme when it's on the site (.gt-app.in-site, follows the site's light/dark switch).
   The phone screens and the generation-styled translator boxes keep their own fixed look in both. */

.gt-app {
  --gt-bg:#0b0b12; --gt-ink:#f4efe4; --gt-dim:#9a9386; --gt-red:#ff4d6d; --gt-blu:#6ea8ff; --gt-g:#1a73e8;
  --gt-acc:#ffe566; --gt-on-acc:#111; --gt-acc-text:#ffe566; --gt-link:#8ab4ff;
  --gt-card:#16161f; --gt-line:#2a2a38; --gt-line2:#3d3d50; --gt-field:#0e0e16; --gt-chip:#1c1c28; --gt-hover:#232334;
  --gt-bar:#262635; --gt-no:#5a2a35; --gt-danger-bg:#2a1a20; --gt-glow:rgba(255,229,102,.8);
  --gt-font:"Trebuchet MS", system-ui, sans-serif; --gt-display:Impact, "Arial Black", sans-serif; --gt-go-case:uppercase; --gt-go-spacing:.04em;
  --gt-r:14px; --gt-r-sm:12px; --gt-shadow:none; --gt-phone-shadow:0 20px 50px #0008;
  --gt-sticky:#16161fd9;
  color:var(--gt-ink); font:16px/1.4 var(--gt-font);
}
/* on the site: the site's own colors, font and corners (and its light/dark switch) */
.gt-app.in-site {
  --gt-bg:transparent; --gt-ink:var(--fg); --gt-dim:var(--muted); --gt-red:#ef4444;
  --gt-acc:var(--accent); --gt-on-acc:#fff; --gt-acc-text:color-mix(in srgb, var(--accent) 70%, var(--fg)); --gt-link:var(--accent);
  --gt-card:var(--panel); --gt-line:var(--line); --gt-line2:color-mix(in srgb, var(--fg) 20%, transparent);
  --gt-field:var(--bg); --gt-chip:color-mix(in srgb, var(--fg) 6%, var(--panel)); --gt-hover:color-mix(in srgb, var(--fg) 11%, var(--panel));
  --gt-bar:var(--line); --gt-no:color-mix(in srgb, #ef4444 50%, var(--line)); --gt-danger-bg:color-mix(in srgb, #ef4444 14%, transparent);
  --gt-glow:color-mix(in srgb, var(--accent) 70%, transparent);
  --gt-font:var(--font); --gt-display:var(--font-head); --gt-go-case:none; --gt-go-spacing:0;
  --gt-r:var(--radius); --gt-r-sm:var(--radius-sm); --gt-shadow:var(--shadow); --gt-phone-shadow:var(--shadow-hover);
  --gt-sticky:color-mix(in srgb, var(--panel) 94%, transparent);
  font-size:16px; line-height:1.45;
}
.gt-app, .gt-app * { box-sizing:border-box; }
.gt-app [hidden] { display:none !important; }

/* standalone only (local development) */
html.gt-standalone, html.gt-standalone body { margin:0; background:var(--gt-bg, #0b0b12); color:#f4efe4; }
html.gt-standalone body { background:#0b0b12; }
.noise { pointer-events:none; position:fixed; inset:0; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ---- the app's own header (standalone only: on the site, the site's header is the header) ---- */
.gt-app .gt-head { max-width:1080px; margin:0 auto; padding:14px 16px 0; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.gt-app.in-site .gt-head { display:none; }
/* the Google-style logo. .gt-logo also styles it where the site puts it: the page's heading (h1.app-title) */
.gt-logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.gt-logo .mark { width:38px; height:38px; border-radius:9px; background:#1a73e8; color:#fff; flex:none;
  display:grid; place-items:center; font:800 20px/1 Impact, sans-serif; }
.gt-logo .word { font:500 22px/1 "Google Sans","Segoe UI",system-ui,sans-serif; letter-spacing:-.02em; }
.gt-logo .word span:nth-child(1){color:#4285f4} .gt-logo .word span:nth-child(2){color:#ea4335}
.gt-logo .word span:nth-child(3){color:#fbbc04} .gt-logo .word span:nth-child(4){color:#4285f4}
.gt-logo .word span:nth-child(5){color:#34a853} .gt-logo .word span:nth-child(6){color:#ea4335}
h1.app-title .gt-logo { gap:.3em; }
h1.app-title .gt-logo .mark { font-size:.6em; width:1.85em; height:1.85em; border-radius:.4em; }   /* ~1.1× the heading */
h1.app-title .gt-logo .word { font-size:1em; }
.gt-app .spacer { flex:1; }
.gt-app .pill { font-size:12px; color:var(--gt-dim); background:var(--gt-chip); padding:4px 10px; border-radius:99px; }
.gt-app .madeby { font-size:12px; color:var(--gt-dim); text-decoration:none; padding:4px 10px; border:1px solid var(--gt-line); border-radius:99px; white-space:nowrap; }
.gt-app .madeby b { color:var(--gt-acc-text); font-weight:700; }
.gt-app .madeby:hover, .gt-app .madeby:focus-visible { border-color:var(--gt-acc); color:var(--gt-ink); }

/* ---- layout ---- */
.gt-app .gt-main { max-width:1080px; margin:0 auto; padding:12px 16px 80px; }
.gt-app.in-site .gt-main { max-width:none; padding:12px 0 8px; }
.gt-app .pane { display:none; }
.gt-app .pane.on { display:block; }
.gt-app .status { min-height:1.3em; color:var(--gt-acc-text); font-size:13px; margin-top:8px; }
.gt-app .status.inline { margin:0; }
.gt-app .vibe { color:var(--gt-dim); font-size:13px; }
.gt-app .go {
  border:0; cursor:pointer; padding:12px 18px; border-radius:var(--gt-r-sm);
  background:var(--gt-acc); color:var(--gt-on-acc); font:800 15px/1 var(--gt-display);
  letter-spacing:var(--gt-go-spacing); text-transform:var(--gt-go-case);
}
.gt-app.in-site .go { font-weight:700; }
.gt-app .go:hover { filter:brightness(1.08); }
.gt-app .go:disabled { opacity:.5; cursor:wait; }
.gt-app .ghost { border:1px solid var(--gt-line2); background:transparent; color:var(--gt-ink);
  padding:10px 12px; border-radius:var(--gt-r-sm); cursor:pointer; font:inherit; }
.gt-app .ghost:hover { border-color:var(--gt-acc); }
.gt-app select, .gt-app input[type=range] { font:inherit; accent-color:var(--gt-acc); }
.gt-app select { background:var(--gt-field); color:var(--gt-ink); border:1px solid var(--gt-line2); border-radius:8px; padding:8px; }
.gt-app a { color:var(--gt-link); }

/* ---- the four features, as cards across the top ---- */
.gt-app .features { max-width:1080px; margin:14px auto 0; padding:0 16px; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.gt-app.in-site .features { max-width:none; margin:0; padding:0; }
.gt-app .feat { display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; cursor:pointer;
  padding:12px 14px; border-radius:var(--gt-r); border:1px solid var(--gt-line); background:var(--gt-card); color:var(--gt-ink); font:inherit; min-width:0;
  box-shadow:var(--gt-shadow); transition:border-color .15s, transform .15s; }
.gt-app .feat:hover { border-color:var(--gt-line2); transform:translateY(-1px); }
.gt-app .feat:focus-visible { outline:2px solid var(--gt-acc); outline-offset:2px; }
.gt-app .feat.on { border-color:var(--gt-acc); box-shadow:0 0 0 1px var(--gt-acc) inset, var(--gt-shadow); }
.gt-app .feat .fi { font-size:22px; line-height:1; }
.gt-app .feat b { font-size:15px; }
.gt-app .feat .fp { font-size:12.5px; line-height:1.35; color:var(--gt-dim); }
.gt-app .feat.on b { color:var(--gt-acc-text); }
@media (max-width:760px) { .gt-app .features { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:380px) { .gt-app .feat .fp { display:none; } }
@media (prefers-reduced-motion: reduce) { .gt-app .feat { transition:none; } .gt-app .feat:hover { transform:none; } }

/* ---- "Load the AI" panel ---- */
.gt-app .gpu { max-width:1080px; margin:12px auto 0; padding:12px 16px; border-radius:var(--gt-r); background:var(--gt-card);
  border:1px solid var(--gt-line); box-shadow:var(--gt-shadow); }
.gt-app.in-site .gpu { max-width:none; }
.gt-app .gpu.flash { animation:gt-gpuflash 1.2s ease-out 1; }
@keyframes gt-gpuflash { 0% { box-shadow:0 0 0 0 var(--gt-glow); } 100% { box-shadow:0 0 0 14px transparent; } }
.gt-app .gpu-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.gt-app .gpu-text { flex:1 1 320px; display:flex; flex-direction:column; gap:2px; }
.gt-app .gpu-text b { font-size:15px; }
/* which model is loaded right now: grey dot = none, amber = loading, green = running */
.gt-app .gpu-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.gt-app .model-pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--gt-dim);
  background:var(--gt-chip); border:1px solid var(--gt-line); padding:3px 10px; border-radius:99px; white-space:nowrap; }
.gt-app .model-pill::before { content:""; width:7px; height:7px; border-radius:50%; background:#8e8e93; flex:none; }
.gt-app .model-pill.busy::before { background:#f5a524; }
.gt-app .model-pill.on { color:var(--gt-ink); }
.gt-app .model-pill.on::before { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18); }
.gt-app .gt-head .model-pill { display:none; }   /* the standalone header keeps its own #healthpill */
.gt-app .gpu-text span { color:var(--gt-dim); font-size:13px; }
.gt-app .gpu select { background:var(--gt-chip); color:var(--gt-ink); border:1px solid var(--gt-line2); border-radius:10px; padding:8px 10px; font:inherit; font-size:14px;
  max-width:100%; min-width:0; text-overflow:ellipsis; }
.gt-app .gpu .go { margin:0; }
.gt-app .gpu-bar { height:6px; margin-top:10px; border-radius:99px; background:var(--gt-bar); overflow:hidden; }
.gt-app .gpu-bar i { display:block; height:100%; width:0; background:linear-gradient(90deg, var(--gt-blu), var(--gt-acc)); transition:width .25s; }
.gt-app.in-site .gpu-bar i { background:var(--gt-acc); }
.gt-app .gpu-note { color:var(--gt-dim); font-size:12px; margin-top:6px; min-height:0; }
.gt-app .gpu-note:empty { display:none; }
.gt-app .gpu.gpu-no { border-color:var(--gt-no); }
@media (max-width:600px) {
  .gt-app .gpu { margin:10px 12px 0; }
  .gt-app.in-site .gpu { margin:10px 0 0; }
  .gt-app .gpu select, .gt-app .gpu .go { flex:1 1 100%; }
}

/* ---- translator (the two-box toy) ---- */
.gt-app .t-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.gt-app .t-tools select { color:var(--gt-link); border-color:var(--gt-line); font-weight:700; }
.gt-app .swap { width:40px; height:40px; border:0; background:transparent; cursor:pointer; border-radius:50%; color:var(--gt-dim); font-size:20px; }
.gt-app .swap:hover { background:var(--gt-chip); color:var(--gt-link); }
.gt-app .panels { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--gt-line); border-radius:var(--gt-r); overflow:hidden; min-height:280px;
  background:#fff; color:#202124; box-shadow:var(--gt-shadow); }
.gt-app .panel { display:flex; flex-direction:column; min-height:280px; position:relative; }
.gt-app .panel + .panel { border-left:1px solid #dadce0; }
.gt-app .panel.out-era { background:#f8f9fa; }
.gt-app textarea#t-in, .gt-app #t-out {
  flex:1; border:0; resize:none; padding:16px 18px 52px; outline:none;
  font:22px/1.4 "Google Sans","Segoe UI",system-ui,sans-serif;
  background:transparent; color:#202124; min-height:220px;
}
.gt-app #t-out { white-space:pre-wrap; word-break:break-word; }
.gt-app #t-out.empty { color:#80868b; }
.gt-app .actions { position:absolute; left:10px; right:10px; bottom:8px; display:flex; align-items:center; gap:4px; }
.gt-app .ico { width:40px; height:40px; border:0; background:transparent; cursor:pointer; border-radius:50%; font-size:18px; color:#5f6368; }
.gt-app .ico:hover { background:#f1f3f4; }
.gt-app .ico.on { color:#d93025; background:#fce8e6; }
.gt-app .count { margin-left:auto; font-size:12px; color:#80868b; padding-right:8px; }
.gt-app .t-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:12px 0; }
.gt-app .panel.out-era.silent { background:#efe6c9; font-family:"Times New Roman", serif; }
.gt-app .panel.out-era.boomer { background:#ecf0f7; font-family:Tahoma, sans-serif; }
.gt-app .panel.out-era.genx { background:#111; color:#9dff9d; }
.gt-app .panel.out-era.genx #t-out { color:#9dff9d; font-family:"Courier New", monospace; }
.gt-app .panel.out-era.millennial { background:#fff0fb; }
.gt-app .panel.out-era.millennial #t-out { font-family:"Comic Sans MS","Trebuchet MS",cursive; color:#5b1854; }
.gt-app .panel.out-era.genz { background:#1c1c1c; }
.gt-app .panel.out-era.genz #t-out { color:#fff; text-transform:lowercase; }
.gt-app .panel.out-era.genalpha { background:#c8ff00; }
.gt-app .panel.out-era.genalpha #t-out { font-family:Impact,"Arial Black",sans-serif; color:#111; }
.gt-app canvas.gt-card { max-width:100%; border-radius:12px; display:none; margin-top:10px; }
@media (max-width:720px) {
  .gt-app .panels { grid-template-columns:1fr; }
  .gt-app .panel + .panel { border-left:0; border-top:1px solid #dadce0; }
  .gt-app textarea#t-in, .gt-app #t-out { font-size:18px; min-height:160px; }
}

/* ---- lineup roast ---- */
.gt-app .stage { background:var(--gt-card); border:2px solid var(--gt-line); border-radius:18px; padding:14px; box-shadow:var(--gt-shadow); }
.gt-app #f-in {
  width:100%; min-height:88px; resize:vertical; border:0; background:var(--gt-field);
  color:var(--gt-ink); font:20px/1.35 var(--gt-font); padding:12px; border-radius:12px; outline:none;
}
.gt-app .chips { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.gt-app .chips button {
  border:1px dashed var(--gt-line2); background:transparent; color:var(--gt-ink);
  padding:6px 10px; border-radius:999px; cursor:pointer; font:12px/1.2 var(--gt-font);
}
.gt-app .chips button:hover { background:var(--gt-hover); }
.gt-app .row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; }
.gt-app .stamp { display:inline-block; transform:rotate(-6deg); background:var(--gt-red); color:#fff;
  font:900 11px/1 Impact, sans-serif; letter-spacing:.12em; padding:6px 10px;
  border:3px solid #fff; margin-bottom:10px; }
.gt-app .blurb { color:var(--gt-dim); font-size:14px; margin:0 0 12px; max-width:42em; }
.gt-app .peek-note { font-size:12px; margin-top:-6px; }
.gt-app .thread { margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.gt-app .msg { border-radius:16px; padding:12px 14px 10px; animation:gt-pop .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes gt-pop { from { transform:scale(.92); opacity:0; } to { transform:none; opacity:1; } }
.gt-app .who { font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.75; margin-bottom:4px; font-weight:800; }
.gt-app .txt { font-size:18px; white-space:pre-wrap; word-break:break-word; }
.gt-app .play { margin-top:8px; border:0; cursor:pointer; padding:8px 12px; border-radius:999px; font:700 12px var(--gt-font); }
.gt-app .msg.silent { background:#efe6c9; color:#2a2412; font-family:"Times New Roman", serif; border:1px solid #c9b882; }
.gt-app .msg.boomer { background:#ecf0f7; color:#111; font-family:Tahoma, sans-serif; border:2px solid #3b5998; }
.gt-app .msg.genx { background:#111; color:#9dff9d; font-family:"Courier New", monospace; border:1px solid #3f3; }
.gt-app .msg.millennial { background:#fff0fb; color:#5b1854; font-family:"Comic Sans MS","Trebuchet MS",cursive; border:2px dashed #ff8ad4; }
.gt-app .msg.genz { background:#1c1c1c; color:#fff; text-transform:lowercase; border:1px solid #333; }
.gt-app .msg.genalpha { background:#c8ff00; color:#111; font-family:Impact,"Arial Black",sans-serif; border:4px solid #ff00aa; transform:rotate(-0.6deg); }
.gt-app .msg.silent .play { background:#2a2412; color:#efe6c9; }
.gt-app .msg.boomer .play { background:#3b5998; color:#fff; }
.gt-app .msg.genx .play { background:#9dff9d; color:#111; }
.gt-app .msg.millennial .play { background:#ff8ad4; color:#5b1854; }
.gt-app .msg.genz .play { background:#fff; color:#111; }
.gt-app .msg.genalpha .play { background:#ff00aa; color:#fff; }
.gt-app .sticky { position:sticky; bottom:12px; display:none; gap:8px; flex-wrap:wrap;
  background:var(--gt-sticky); border:1px solid var(--gt-line);
  border-radius:var(--gt-r); padding:10px; margin-top:14px; box-shadow:var(--gt-shadow); }
.gt-app .sticky.on { display:flex; }
.gt-app .sticky .go { flex:1; }

/* ---- the iMessage phones (a phone looks like a phone in both themes) ---- */
.gt-app .ios {
  max-width: 430px; margin: 0 auto 16px; background:#1c1c1e; border-radius:44px;
  padding:10px 10px 16px; box-shadow:var(--gt-phone-shadow), inset 0 0 0 2px #3a3a3c;
}
.gt-app .ios-screen {
  background:#fff; color:#000; border-radius:36px; overflow:hidden;
  display:flex; flex-direction:column; height:min(78vh, 730px);   /* taller since the suggestions sit inside it */
  font:15px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.gt-app .ios-status { display:flex; justify-content:space-between; padding:10px 22px 0; font:600 13px/1 inherit; }
.gt-app .ios-nav { display:flex; align-items:center; gap:8px; padding:6px 10px 8px; border-bottom:1px solid #e5e5ea; }
.gt-app .ios-back { color:#007aff; font-size:28px; line-height:1; padding:0 4px; }
.gt-app .ios-title { flex:1; text-align:center; }
.gt-app .ios-title b { display:block; font-size:16px; }
.gt-app .ios-title span { font-size:11px; color:#8e8e93; }
.gt-app .ios-icons { color:#007aff; font-size:18px; padding:0 8px; }
.gt-app .ios-body { flex:1; min-height:0; display:flex; flex-direction:column; background:#fff; }
.gt-app .ios-thread { flex:1; min-height:0; overflow-y:auto; padding:10px 10px 4px; background:#fff; }
.gt-app .typing-dock { flex:0 0 58px; height:58px; padding:0 10px 8px; background:#fff; overflow:hidden; }
.gt-app .typing-dock .rowmsg { margin:0; }
.gt-app .ios-sys { text-align:center; color:#8e8e93; font-size:12px; margin:8px 0 12px; }
.gt-app .rowmsg { display:flex; gap:6px; margin:2px 0 8px; align-items:flex-end; }
.gt-app .rowmsg.me { justify-content:flex-end; }
.gt-app .av { width:28px; height:28px; border-radius:50%; color:#fff; font:700 11px/28px inherit; text-align:center; flex:0 0 28px; }
.gt-app .col { max-width:78%; display:flex; flex-direction:column; }
.gt-app .rowmsg.me .col { align-items:flex-end; }
.gt-app .nm { font-size:11px; color:#8e8e93; margin:0 10px 2px; }
.gt-app .bub { padding:8px 12px; border-radius:18px; position:relative; word-break:break-word; white-space:pre-wrap; }
.gt-app .rowmsg.them .bub { background:#e9e9eb; color:#000; border-bottom-left-radius:5px; }
.gt-app .rowmsg.me .bub { background:#007aff; color:#fff; border-bottom-right-radius:5px; }
.gt-app .quote { font-size:12px; opacity:.7; border-left:2px solid currentColor; padding-left:6px; margin-bottom:4px; }
.gt-app .im-gif { display:block; max-width:220px; max-height:180px; border-radius:12px; margin-top:6px; }
.gt-app .preview { margin-top:6px; border:1px solid #d8d8dc; border-radius:12px; overflow:hidden; max-width:240px; background:#fff; color:#000; }
.gt-app .preview img { width:100%; max-height:90px; object-fit:cover; display:block; }
.gt-app .preview .pt { padding:7px 9px; }
.gt-app .preview .pt b { display:block; font-size:12px; }
.gt-app .preview .pt span { display:block; font-size:11px; color:#636366; margin-top:2px; }
.gt-app .preview .pt a { color:#007aff; font-size:11px; text-decoration:none; }
.gt-app .taps { position:absolute; bottom:-10px; right:8px; background:#fff; border-radius:10px;
  box-shadow:0 1px 3px #0003; padding:1px 5px; font-size:12px; display:flex; gap:2px; }
.gt-app .rowmsg.me .taps { right:auto; left:8px; }
.gt-app .typing .bub { padding:10px 14px; }
.gt-app .dotz { display:flex; gap:4px; }
.gt-app .dotz i { width:7px; height:7px; border-radius:50%; background:#8e8e93; animation:gt-bounce 1.2s infinite; }
.gt-app .dotz i:nth-child(2){ animation-delay:.15s } .gt-app .dotz i:nth-child(3){ animation-delay:.3s }
@keyframes gt-bounce { 0%,80%,100%{transform:translateY(0);opacity:.4} 40%{transform:translateY(-3px);opacity:1} }
.gt-app .ios-bar { display:flex; align-items:center; gap:8px; padding:8px 10px 12px; background:#f2f2f7; border-top:1px solid #e5e5ea; position:relative; }
.gt-app .ios-plus { width:32px; height:32px; border-radius:50%; background:#e5e5ea; border:0; font-size:20px; color:#007aff; }
.gt-app .ios-in { flex:1; border:0; background:#fff; color:#000; border-radius:18px; padding:8px 14px; font:inherit; outline:none; }
.gt-app .ios-send { width:32px; height:32px; border-radius:50%; border:0; background:#007aff; color:#fff; font-size:16px; cursor:pointer; }
.gt-app .ios-send:disabled { opacity:.4; }
.gt-app .ios-send.stop { background:#ff3b30; font-size:13px; letter-spacing:0; }
/* the controls above the phone: one tidy row (the vibe slider, then the buttons), wrapping only on small screens */
.gt-app .live-tools { max-width:940px; margin:0 auto 12px; display:flex; gap:6px; flex-wrap:wrap; justify-content:center; align-items:center; }
.gt-app .live-tools .ghost { padding:7px 11px; font-size:14px; }
.gt-app .live-tools .vibe { display:inline-flex; align-items:center; gap:6px; margin-right:4px; }
.gt-app .live-tools .status.inline { font-size:12.5px; margin-right:6px; }

/* header faces: moods, leaving, the leader's crown, a big crowd */
.gt-app .ios-faces { display:flex; justify-content:center; margin-bottom:2px; }
.gt-app .ios-faces i { width:22px; height:22px; border-radius:50%; display:inline-block; border:2px solid #fff; margin-left:-6px; font:700 9px/18px inherit;
  color:#fff; text-align:center; position:relative; transition:width .35s, margin .35s, opacity .35s, transform .35s; }
.gt-app .ios-faces i:first-child { margin-left:0; }
.gt-app .ios-faces i[data-mood]::after { content:attr(data-mood); position:absolute; right:-7px; bottom:-7px; font-size:11px; line-height:1; }
.gt-app .ios-faces i.gone { width:0; margin-left:0; border-width:0; opacity:0; transform:scale(.3); overflow:hidden; }
.gt-app .ios-faces i.lead::before { content:"👑"; position:absolute; top:-11px; left:50%; transform:translateX(-50%); font-size:10px; line-height:1; }
.gt-app .ios-faces i.over { display:none; }
.gt-app .ios-faces b.more { height:22px; min-width:22px; padding:0 5px; margin-left:-6px; border-radius:11px; border:2px solid #fff; background:#8e8e93; color:#fff; font:700 9px/18px inherit; }

/* the ＋ menu (add people back) */
.gt-app .add-menu { position:absolute; left:8px; bottom:calc(100% + 6px); min-width:200px; background:#fff; color:#111; border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.25); padding:6px; z-index:5; font-size:14px; }
.gt-app .add-menu b { display:block; padding:6px 10px 4px; font-size:12px; color:#666; font-weight:600; }
.gt-app .add-menu button { display:flex; align-items:center; gap:8px; width:100%; border:0; background:none; padding:8px 10px; border-radius:8px; cursor:pointer; font:inherit; color:inherit; text-align:left; }
.gt-app .add-menu button:hover, .gt-app .add-menu button:focus-visible { background:#eef3ff; }
.gt-app .add-menu .av { width:20px; height:20px; border-radius:50%; display:inline-grid; place-items:center; color:#fff; font:700 10px/1 sans-serif; }
.gt-app .add-menu p { margin:6px 10px; color:#666; font-size:13px; }

/* group-chat theater: the group name, pinned message, polls */
.gt-app #fam-name { cursor:pointer; border-radius:6px; padding:0 4px; }
.gt-app #fam-name:hover, .gt-app #fam-name:focus-visible { background:rgba(0,0,0,.06); outline:none; }
.gt-app .pinned { display:flex; gap:8px; align-items:flex-start; margin:6px 10px 0; padding:8px 10px; border-radius:12px; background:#f2f2f7;
  color:#111; font-size:12px; line-height:1.35; border-left:3px solid #ff9500; }
.gt-app .pinned b { color:#ff9500; white-space:nowrap; }
.gt-app .pinned span { flex:1; min-width:0; overflow-wrap:anywhere; }
.gt-app #swarm-pinned b { color:#b8860b; }
.gt-app .poll { min-width:200px; }
.gt-app .poll .pq { font-weight:700; margin-bottom:6px; }
.gt-app .poll button { display:flex; align-items:center; gap:6px; width:100%; margin-top:4px; padding:6px 8px; border-radius:10px; border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.75); color:#111; font:inherit; font-size:13px; cursor:pointer; text-align:left; position:relative; overflow:hidden; }
.gt-app .poll button .fill { position:absolute; inset:0 auto 0 0; background:rgba(0,122,255,.14); width:0; transition:width .3s; }
.gt-app .poll button span { position:relative; }
.gt-app .poll button .who { margin-left:auto; font-size:11px; color:#555; white-space:nowrap; text-transform:none; letter-spacing:0; }
.gt-app .poll button.mine { border-color:#007aff; }
.gt-app .poll .pfoot { margin-top:4px; font-size:11px; color:#666; }

/* voice notes */
.gt-app .bub.voice { min-width:190px; }
.gt-app .vline { display:flex; align-items:center; gap:8px; }
.gt-app .vplay { width:30px; height:30px; border-radius:50%; border:0; background:#007aff; color:#fff; font-size:12px; cursor:pointer; flex:none; }
.gt-app .vplay:disabled { opacity:.6; }
.gt-app .vbars { display:flex; align-items:center; gap:2px; flex:1; height:24px; }
.gt-app .vbars i { display:block; width:3px; border-radius:2px; background:#8e8e93; }
.gt-app .bub.voice.on .vbars i { background:#007aff; animation:gt-vpulse .8s ease-in-out infinite alternate; }
.gt-app .bub.voice.on .vbars i:nth-child(odd) { animation-delay:.2s; }
@keyframes gt-vpulse { from { transform:scaleY(.5); } to { transform:scaleY(1.1); } }
.gt-app .vdur { font-size:11px; color:#6b6b70; }
.gt-app .vt { margin-top:6px; font-size:12px; color:#555; font-style:italic; }
@media (prefers-reduced-motion: reduce) { .gt-app .bub.voice.on .vbars i { animation:none; } }

/* the Swarm's plot: storyline beats and the backchannel */
.gt-app .ios-sys.swarm-lab { color:#7a3fd1; font-weight:600; }
.gt-app .rowmsg.them .bub.secret { background:#1c1c1e; color:#e5e5ea; border:1px dashed #5e5ce6; }
.gt-app .bub.secret .lock { display:block; font-size:10px; letter-spacing:.04em; color:#8e8cff; margin-bottom:2px; }

/* ---- under the phones: starters, memories, the Swarm's memory of this chat ---- */
/* suggested first messages: inside the phone, a row of iMessage-style quick replies just above the text box.
   They're for starting a chat, so they go away once the chat has messages and come back with "new chat". */
.gt-app .starters { display:flex; flex-wrap:nowrap; gap:6px; overflow-x:auto; padding:7px 10px 2px; background:#f2f2f7;
  border-top:1px solid #e5e5ea; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.gt-app .starters::-webkit-scrollbar { display:none; }
.gt-app .starters button { flex:none; white-space:nowrap; border:1px solid #007aff; background:#fff; color:#007aff; border-radius:16px;
  padding:5px 11px; font:13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor:pointer; }
.gt-app .starters button:hover, .gt-app .starters button:focus-visible { background:#007aff; color:#fff; outline:none; }
.gt-app .starters:empty, .gt-app .ios-screen:has(.ios-thread .rowmsg) .starters { display:none; }
.gt-app .ios-screen:not(:has(.ios-thread .rowmsg)) .starters:not(:empty) + .ios-bar { border-top:0; }   /* one strip, not two */
.gt-app .mem-panel { max-width:720px; margin:12px auto 0; padding:14px 16px; background:var(--gt-card); border:1px solid var(--gt-line); border-radius:var(--gt-r); box-shadow:var(--gt-shadow); }
.gt-app .mem-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.gt-app .mem-head .mem-wipe { font-size:13px; padding:6px 12px; }
.gt-app .mem-note { color:var(--gt-dim); font-size:13px; margin:6px 0 10px; }
.gt-app .mem-group { margin-top:10px; }
.gt-app .mem-who { font-weight:700; font-size:13px; padding-left:8px; border-left:4px solid var(--gt-acc); margin-bottom:4px; }
.gt-app .mem-row { display:flex; align-items:baseline; gap:8px; padding:5px 0 5px 12px; border-bottom:1px solid var(--gt-line); font-size:14px; }
.gt-app .mem-row span { flex:1; min-width:0; overflow-wrap:anywhere; }
.gt-app .mem-row small { color:var(--gt-dim); white-space:nowrap; font-size:12px; }
.gt-app .mem-del { background:none; border:0; color:var(--gt-dim); cursor:pointer; font-size:13px; padding:2px 6px; border-radius:6px; }
.gt-app .mem-del:hover, .gt-app .mem-del:focus-visible { color:var(--gt-red); background:var(--gt-danger-bg); }
.gt-app .story { margin:8px auto 0; max-width:560px; font-size:13px; color:var(--gt-dim); }
.gt-app .story summary { cursor:pointer; padding:6px 0; }
.gt-app .story-body { padding:4px 12px 8px; border-left:2px solid rgba(175,82,222,.5); }
.gt-app .story-body p { margin:8px 0 2px; }
.gt-app .story-body b { color:var(--gt-ink); }
.gt-app .story-body ul { margin:2px 0 6px; padding-left:18px; }
.gt-app .story-body li { margin:2px 0; overflow-wrap:anywhere; }

/* ---- the note at the bottom ---- */
.gt-app .gt-foot { margin-top:22px; color:var(--gt-dim); font-size:12px; }
.gt-app .gt-foot a { color:var(--gt-link); }
.gt-app .gt-foot .credit { margin-top:10px; font-size:13px; color:var(--gt-dim); }
.gt-app .gt-foot .credit a { color:var(--gt-acc-text); text-decoration:none; font-weight:700; }
.gt-app .gt-foot .credit a:hover { text-decoration:underline; }
.gt-app.in-site .gt-foot .credit { display:none; }         /* the site's own footer carries the credit */
.gt-app .others { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.gt-app .others a { color:var(--gt-ink); background:var(--gt-chip); padding:5px 9px; border-radius:999px; text-decoration:none; font-size:12px; }

/* the site's demo gateway blocks the microphone inside frames, so no dictation button there (only if framed) */
html.framed .gt-app #mic { display:none; }
.gt-app .gpu #gpu-unload { padding:9px 14px; }

/* removed from the family chat: iOS's grey "you can't reply" strip, with a way to knock */
.gt-app .kicked { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; background:#f2f2f7;
  border-top:1px solid #e5e5ea; color:#6b6b70; font:12.5px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.gt-app .kicked[hidden] { display:none; }
.gt-app .kicked button { flex:none; border:1px solid #007aff; background:#fff; color:#007aff; border-radius:14px; padding:4px 10px; font:inherit; cursor:pointer; }
.gt-app .kicked button:hover { background:#007aff; color:#fff; }
.gt-app .ios-in:disabled { background:#e9e9eb; }
/* removed from the chat: no suggested first messages (you can't send them) */
.gt-app .ios-screen:has(.kicked:not([hidden])) .starters { display:none; }