/* Composer icons, emoji picker and emoji font fallback. Site tokens only: no new colors. */
/* The SF Pro stack falls through to the system emoji font; no emoji font or images are shipped. */
:root{--emoji:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",emoji}
textarea,.e p{font-family:var(--font-sans,var(--sans)),var(--emoji)}
/* Composer icons: one family, centered in equal 44px targets on one baseline */
.comp .bar .ic{min-width:44px;height:44px;padding:0 10px;justify-content:center}
.comp .bar .ic svg{display:block;width:22px;height:22px;flex:none}
.comp .bar>span:first-child{gap:0}
#rt:empty{display:none}
/* Too narrow for three icons, the counter, Clear and Post on one row (a desktop window under
   about 340px): Clear and Post drop to a second row instead of squeezing the targets. */
.comp .bar{flex-wrap:wrap}.comp .bar>span:last-child{margin-left:auto}
#n{white-space:nowrap}
.comp .bar>span:last-child button{padding-left:12px;padding-right:12px}
@media(max-width:380px){.comp .bar .ic{padding:0 8px}}
/* Phones and tablets already have an emoji key on the system keyboard; the button would only
   cover it, so touch-first devices keep the keyboard's own picker. */
@media(hover:none) and (pointer:coarse){#emo{display:none}}
/* Picker: stays clear of the sticky header (112px), uses the composer's own surface (a backdrop blur cannot reach the page from inside the
   composer, which already has one), anchored above the composer's left edge */
.ep{position:absolute;left:0;bottom:calc(100% + 8px);width:min(344px,100%);max-height:min(372px,calc(100vh - var(--ch,170px) - var(--eb,8px) - env(safe-area-inset-bottom) - 112px));max-height:min(372px,calc(100dvh - var(--ch,170px) - var(--eb,8px) - env(safe-area-inset-bottom) - 112px));display:flex;flex-direction:column;padding:10px 8px 6px;border-radius:var(--rc);z-index:6;
  background:radial-gradient(110% 150% at 100% 110%,var(--cg),transparent 64%),linear-gradient(180deg,var(--c1),var(--c2)),var(--bg);box-shadow:0 1px 0 rgba(255,255,255,var(--hl)) inset,0 0 0 1px rgba(var(--inkA),.08),0 14px 40px -22px rgba(47,70,110,.36);
  opacity:0;transform:translateY(6px);transition:opacity .16s ease,transform .2s cubic-bezier(.2,.7,.1,1)}
.ep.on{opacity:1;transform:none}
.ep[hidden]{display:none}
/* Short windows: no room above the composer, so the picker covers it (it closes on choose) */
@media(max-height:560px){.ep{bottom:0;max-height:calc(100vh - var(--eb,8px) - env(safe-area-inset-bottom) - 104px);max-height:calc(100dvh - var(--eb,8px) - env(safe-area-inset-bottom) - 104px)}}
@media(prefers-reduced-motion:reduce){.ep{transition:none;transform:none}}
.eps{flex:none;width:100%;height:40px;margin:0 0 6px;padding:0 14px;border:0;outline:0;border-radius:var(--r);background:var(--inp);font:inherit;font-family:var(--font-sans,var(--sans));font-size:1rem;color:var(--ink);caret-color:var(--blue);box-shadow:inset 0 0 0 1px rgba(var(--inkA),.08)}
.eps::placeholder{color:var(--mute)}
.eps:focus{box-shadow:inset 0 0 0 2px rgba(47,109,246,.55)}
.epc{flex:none;display:flex;gap:0;overflow-x:auto;scrollbar-width:none;margin:0 0 4px}
.epc::-webkit-scrollbar{display:none}
.epc[hidden]{display:none}
.epk{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:12px;font:18px/1 var(--emoji);letter-spacing:0;text-transform:none;color:var(--ink)}
.epk svg{color:var(--mute);width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.epg{flex:1 1 auto;min-height:88px;height:236px;overflow-y:auto;overscroll-behavior:contain;padding:0 2px}
.eph{position:sticky;top:0;z-index:1;padding:6px 6px 4px;background:var(--c1);font:.688rem var(--font-mono,var(--mono));letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.epr{display:grid;grid-template-columns:repeat(8,1fr)}
.epe{display:grid;place-items:center;height:40px;padding:0;border-radius:10px;font:22px/1 var(--emoji);letter-spacing:0;text-transform:none}
.epe:focus-visible,.epk:focus-visible{outline:2px solid rgba(var(--inkA),.55);outline-offset:-2px}
.epn{min-height:0;margin:0;padding:0 6px;font:.75rem var(--font-mono,var(--mono));color:var(--mute)}
.epn:empty{display:none}