/* portal-chat.css — the emoji picker, ":tad" suggestions, the KLIPY GIF picker, GIFs in messages and reaction chips
   (portal-chat.js, 2026-09-24). Shared by the guide and the board: the --ptc-* tokens read the guide's names first
   (--bg-0, --fg-1, --border-2, --sq-teal) and fall back to the board's (--panel, --ink, --line, --teal), so both
   themes of both pages follow along. Where the add-reaction button sits next to a bubble is each page's own CSS. */
:root{
  --ptc-bg:var(--bg-0,var(--panel,#FFFFFF));
  --ptc-bg-2:var(--bg-2,var(--raised,#F4F6F6));
  --ptc-bg-3:var(--bg-3,var(--raised-2,var(--line,#EAEEEE)));
  --ptc-ink:var(--fg-1,var(--ink,#131A1C));
  --ptc-ink-2:var(--fg-2,var(--ink2,#3A4749));
  --ptc-mut:var(--fg-3,var(--mut,#4E6165));
  --ptc-line:var(--border-2,var(--line,rgba(19,26,28,.14)));
  --ptc-accent:var(--sq-teal,var(--teal,#0E7180));
  --ptc-font:var(--pt-body,inherit);
  --ptc-mono:var(--pt-mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  --ptc-emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Segoe UI Symbol",sans-serif;
  --ptc-shadow:0 22px 60px -18px rgba(8,14,16,.45),0 4px 14px rgba(8,14,16,.14);
}

/* ── popovers ── */
.ptc-pop{position:fixed;z-index:2147483000;box-sizing:border-box;display:flex;flex-direction:column;
  background:var(--ptc-bg);color:var(--ptc-ink);border:1px solid var(--ptc-line);border-radius:14px;box-shadow:var(--ptc-shadow);
  font-family:var(--ptc-font);font-size:13px;line-height:1.4;overflow:hidden}
.ptc-pop[hidden]{display:none}
.ptc-pop.ptc-open{animation:ptc-in .14s ease-out}
@keyframes ptc-in{from{opacity:0;transform:translateY(4px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.ptc-pop.ptc-open{animation:none}}
.ptc-pop.ptc-sheet{left:8px!important;right:8px!important;top:auto!important;bottom:8px!important;width:auto!important;max-height:72vh}
.ptc-pop input[type=search]{width:100%;box-sizing:border-box;height:34px;padding:0 .75rem;font:inherit;font-size:13px;color:var(--ptc-ink);
  background:var(--ptc-bg-2);border:1px solid var(--ptc-line);border-radius:9px;outline:none}
.ptc-pop input[type=search]:focus{border-color:var(--ptc-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--ptc-accent) 18%,transparent)}
:where(.ptc-pop) button{font:inherit;color:inherit}                 /* no specificity: each button's own size wins */
:where(.ptc-pop) button:focus-visible{outline:2px solid var(--ptc-accent);outline-offset:1px}

/* ── the emoji picker ── */
.ptc-emo{width:356px;height:min(430px,70vh)}
.ptc-emo-head{padding:.6rem .6rem .35rem}
.ptc-emo-tabs{display:flex;gap:2px;padding:0 .45rem .3rem;border-bottom:1px solid var(--ptc-line)}
.ptc-emo-tab{flex:1;height:30px;border:0;border-radius:7px;background:none;cursor:pointer;font-family:var(--ptc-emoji);font-size:16px;
  opacity:.55;filter:grayscale(.5);transition:opacity .12s,background .12s}
.ptc-emo-tab:hover,.ptc-emo-tab.on{opacity:1;filter:none;background:var(--ptc-bg-2)}
.ptc-emo-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:.15rem .45rem .5rem;position:relative}
.ptc-emo-sec[hidden],.ptc-emo-res[hidden],.ptc-emo-none[hidden]{display:none}
.ptc-emo-h{position:sticky;top:0;z-index:1;margin:0;padding:.45rem .2rem .25rem;font-family:var(--ptc-mono);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ptc-mut);background:var(--ptc-bg)}
.ptc-emo-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:1px}
.ptc-e{aspect-ratio:1;min-width:0;border:0;border-radius:8px;background:none;cursor:pointer;padding:0;
  font-family:var(--ptc-emoji);font-size:22px;line-height:1;transition:background .1s,transform .1s}
.ptc-e:hover,.ptc-e:focus-visible{background:var(--ptc-bg-3);transform:scale(1.12)}
.ptc-emo-none{margin:1.2rem .4rem;text-align:center;color:var(--ptc-mut)}
.ptc-emo-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.35rem .6rem;border-top:1px solid var(--ptc-line);min-height:34px}
.ptc-emo-name{font-family:var(--ptc-mono);font-size:11px;color:var(--ptc-mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptc-tones{display:flex;gap:1px;flex:none}
.ptc-tone{width:24px;height:24px;border:0;border-radius:6px;background:none;cursor:pointer;padding:0;font-family:var(--ptc-emoji);font-size:15px;opacity:.6}
.ptc-tone:hover{opacity:1;background:var(--ptc-bg-2)}
.ptc-tone[aria-checked="true"]{opacity:1;background:color-mix(in srgb,var(--ptc-accent) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ptc-accent) 50%,transparent)}

/* ── ":tad" suggestions ── */
.ptc-ac{position:fixed;z-index:2147483001;min-width:230px;max-width:320px;box-sizing:border-box;padding:4px;background:var(--ptc-bg);color:var(--ptc-ink);
  border:1px solid var(--ptc-line);border-radius:10px;box-shadow:var(--ptc-shadow);font-family:var(--ptc-font);font-size:13px}
.ptc-ac[hidden]{display:none}
.ptc-ac-row{display:flex;align-items:center;gap:.55rem;padding:.3rem .5rem;border-radius:7px;cursor:pointer}
.ptc-ac-row.on,.ptc-ac-row:hover{background:color-mix(in srgb,var(--ptc-accent) 14%,transparent)}
.ptc-ac-e{font-family:var(--ptc-emoji);font-size:18px;line-height:1;width:22px;text-align:center}
.ptc-ac-n{font-family:var(--ptc-mono);font-size:12px;color:var(--ptc-ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptc-ac-tip{padding:.3rem .5rem .15rem;font-size:10.5px;color:var(--ptc-mut);border-top:1px solid var(--ptc-line);margin-top:3px}

/* ── the GIF picker ── */
.ptc-gifp{width:384px;height:min(470px,72vh)}
.ptc-gif-head{padding:.6rem .6rem .4rem}
.ptc-gif-chips{display:flex;gap:5px;overflow-x:auto;padding:0 .6rem .45rem;scrollbar-width:none}
.ptc-gif-chips::-webkit-scrollbar{display:none}
.ptc-gif-chip{flex:none;height:26px;padding:0 .7rem;border:1px solid var(--ptc-line);border-radius:999px;background:var(--ptc-bg);cursor:pointer;
  font-size:12px;font-weight:600;color:var(--ptc-ink-2);white-space:nowrap}
.ptc-gif-chip:hover{border-color:var(--ptc-accent);color:var(--ptc-accent)}
.ptc-gif-chip.on{background:var(--ptc-accent);border-color:var(--ptc-accent);color:var(--chip-ink,#FFFFFF)}
.ptc-gif-label{padding:0 .75rem .35rem;font-family:var(--ptc-mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ptc-mut)}
.ptc-gif-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 .6rem .6rem}
/* one list in KLIPY's order: two columns of 4 px rows, each tile spanning its rows (set inline by portal-chat.js) */
.ptc-gif-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:4px;column-gap:6px;align-items:start}
.ptc-gif-tile{display:block;width:100%;padding:0;border:0;border-radius:9px;overflow:hidden;cursor:pointer;background-color:var(--ptc-bg-3);
  background-size:cover;background-position:center;position:relative;transition:transform .12s,box-shadow .12s}
.ptc-gif-tile img{display:block;width:100%;height:100%;object-fit:cover}
.ptc-gif-tile:hover,.ptc-gif-tile:focus-visible{transform:scale(1.02);box-shadow:0 0 0 2px var(--ptc-accent)}
.ptc-gif-tile.ptc-gif-broken img{visibility:hidden}
.ptc-gif-msg{margin:1.4rem .6rem;text-align:center;color:var(--ptc-mut);line-height:1.5}
.ptc-gif-msg[hidden],.ptc-gif-more[hidden]{display:none}
.ptc-gif-more{padding:.6rem;text-align:center;font-size:11px;color:var(--ptc-mut)}
.ptc-gif-foot{display:flex;justify-content:space-between;gap:.5rem;padding:.4rem .75rem;border-top:1px solid var(--ptc-line);font-size:10.5px;color:var(--ptc-mut)}
.ptc-gif-foot b{color:var(--ptc-ink);letter-spacing:.04em}

/* ── composer buttons (the page supplies the round-button look; these only add what is new) ── */
.ptc-gif-word{display:inline-grid;place-items:center;height:18px;padding:0 4px;border:1.6px solid currentColor;border-radius:5px;
  font-family:var(--ptc-font);font-size:9.5px;font-weight:800;letter-spacing:.04em;line-height:1}
html:not(.ptc-gif-on) .ptc-gif-btn{display:none!important}
.ptc-q-more svg,.ptc-emoji-btn svg,.ptc-rx-add svg{display:block}

/* ── a GIF in a message ── */
.ptc-gif{position:relative;display:block;margin:0;max-width:100%;border-radius:10px;overflow:hidden;background:var(--ptc-bg-3);line-height:0}
.ptc-gif-img{display:block;width:100%;height:100%;object-fit:cover}
.ptc-gif-tag{position:absolute;left:6px;bottom:6px;padding:2px 6px;border-radius:5px;background:rgba(8,14,16,.62);color:#FFFFFF;
  font-family:var(--ptc-mono);font-size:9px;font-weight:600;letter-spacing:.06em;line-height:1.4;pointer-events:none}
.ptc-gif-toggle{position:absolute;right:6px;top:6px;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:rgba(8,14,16,.62);
  color:#FFFFFF;font-size:10px;line-height:28px;letter-spacing:-.05em;cursor:pointer;opacity:0;transition:opacity .15s}
.ptc-gif:hover .ptc-gif-toggle,.ptc-gif-toggle:focus-visible,.ptc-gif.ptc-gif-paused .ptc-gif-toggle{opacity:1}
.ptc-gif-toggle:focus-visible{outline:2px solid #FFFFFF;outline-offset:1px}
@media (hover:none){.ptc-gif-toggle{opacity:.85}}
.ptc-gif.ptc-gif-fail{aspect-ratio:auto!important;width:auto!important;line-height:1.4;padding:.45rem .6rem;background:none;border:1px dashed var(--ptc-line)}
.ptc-gif.ptc-gif-fail>*{display:none}
.ptc-gif.ptc-gif-fail::after{content:attr(data-fail);font-size:12px;color:var(--ptc-mut)}
* + .ptc-gif{margin-top:.45rem}

/* ── reactions ── */
.ptc-rx{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.ptc-rx-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px 0 6px;box-sizing:border-box;border:1px solid var(--ptc-line);
  border-radius:999px;background:var(--ptc-bg);color:var(--ptc-ink-2);font:inherit;font-size:11.5px;cursor:pointer;transition:border-color .12s,background .12s}
.ptc-rx-chip:hover{border-color:color-mix(in srgb,var(--ptc-accent) 60%,transparent)}
.ptc-rx-chip:disabled{cursor:default}
.ptc-rx-chip.mine{border-color:color-mix(in srgb,var(--ptc-accent) 70%,transparent);background:color-mix(in srgb,var(--ptc-accent) 13%,var(--ptc-bg));color:var(--ptc-ink)}
.ptc-rx-chip b{font-weight:700;font-variant-numeric:tabular-nums}
.ptc-rx-e{font-family:var(--ptc-emoji);font-size:14px;line-height:1}
.ptc-rx-add{display:inline-grid;place-items:center;width:28px;height:24px;padding:0;box-sizing:border-box;border:1px solid transparent;border-radius:999px;
  background:none;color:var(--ptc-mut);cursor:pointer;transition:opacity .12s,background .12s,color .12s}
.ptc-rx-add:hover,.ptc-rx-add[aria-expanded="true"]{background:var(--ptc-bg-2);border-color:var(--ptc-line);color:var(--ptc-accent)}
.ptc-rx-add svg{width:16px;height:16px}
.ptc-quick{flex-direction:row;align-items:center;gap:1px;padding:4px;border-radius:999px}
.ptc-q{width:34px;height:34px;border:0;border-radius:50%;background:none;cursor:pointer;padding:0;display:grid;place-items:center;
  font-family:var(--ptc-emoji);font-size:20px;line-height:1;transition:background .1s,transform .1s}
.ptc-q:hover,.ptc-q:focus-visible{background:var(--ptc-bg-3);transform:scale(1.15)}
.ptc-q-more{color:var(--ptc-mut);margin-left:2px;border-left:1px solid var(--ptc-line);border-radius:0 50% 50% 0}