/* Inbox Agent DM simulator (section "Try it" on /inbox-agent/), carried over from ihayz.com with its .ibx-* rules.
   The token bridge maps ihayz.com's names onto this site's tokens; ours switch with the theme, so no dark block is needed. */
#ibx{--n0:var(--panel);--n25:var(--bg-2);--n50:var(--bg-2);--n100:var(--line-2);--n200:var(--line);--n300:var(--line);--n400:var(--text-3);--n500:var(--text-2);--n600:var(--text-2);--n700:var(--text);--n800:var(--text);
  --ink:var(--text);--ink-soft:var(--text);--acc:var(--brand);--acc-hover:var(--brand-hover);--acc-ink:var(--brand);--acc-bd:var(--brand-soft);--acc-soft:var(--brand-soft);
  --s-violet:var(--brand-soft);--violet-deep:var(--brand-2);--s-mint:var(--ok-bg);--mint-ink:var(--ok);--mint-bd:var(--ok-line);--s-amber:var(--warn-bg);--amber-ink:var(--warn);
  --edge:1px solid var(--line);--r2:10px;--r3:999px;--t1:12px;--t2:14px}

#ibx-wrap .ibx-seg{display:inline-flex;gap:4px;padding:4px;border:var(--edge);background:var(--n0);border-radius:var(--r3);margin:0 0 24px;flex-wrap:wrap}
#ibx-wrap .ibx-seg button{border:0;background:none;font:inherit;font-size:var(--t2);font-weight:600;color:var(--n600);padding:9px 16px;border-radius:var(--r3);cursor:pointer;transition:background .16s,color .16s}
#ibx-wrap .ibx-seg button:hover{color:var(--ink)}
#ibx-wrap .ibx-seg button[aria-pressed=true]{background:var(--acc);color:var(--on-brand)}
#ibx-wrap .ibx-sim{display:grid;grid-template-columns:340px 1fr;gap:28px;align-items:start}
#ibx-wrap .ibx-phone{border:1px solid var(--n300);border-radius:26px;background:var(--n0);overflow:hidden;box-shadow:var(--shadow)}
#ibx-wrap .ibx-top{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:var(--edge)}
#ibx-wrap .ibx-top svg{width:18px;height:18px;fill:none;stroke:var(--n500);stroke-width:2;flex:none}
#ibx-wrap .ibx-ava{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;border:1px solid transparent}
#ibx-wrap .ibx-ava svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#ibx-wrap .ibx-ava.ibx-violet{background:var(--s-violet);border-color:var(--acc-bd);color:var(--acc)}
#ibx-wrap .ibx-ava.ibx-mint{background:var(--s-mint);border-color:var(--ok-line);color:var(--mint-ink)}
#ibx-wrap .ibx-ava.ibx-amber{background:var(--s-amber);border-color:var(--warn-line);color:var(--amber-ink)}
#ibx-wrap .ibx-idt b{display:block;font-size:var(--t2);font-weight:640;color:var(--ink);line-height:18px}
#ibx-wrap .ibx-idt small{display:block;font-size:11px;color:var(--n500);line-height:15px}
#ibx-wrap .ibx-thread{height:430px;overflow-y:auto;padding:16px 14px 18px;background:var(--n25);display:flex;flex-direction:column;gap:6px}
#ibx-wrap .ibx-b{max-width:82%;padding:9px 13px;font-size:var(--t2);line-height:20px;border-radius:18px;animation:ibxRise .34s ease both}
@keyframes ibxRise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
#ibx-wrap .ibx-in{align-self:flex-start;background:var(--n100);color:var(--n800);border-bottom-left-radius:6px}
#ibx-wrap .ibx-out{align-self:flex-end;background:var(--acc);color:var(--on-brand);border-bottom-right-radius:6px}
#ibx-wrap .ibx-meta{align-self:flex-end;font-size:11px;color:var(--n500);margin:-2px 4px 8px}
#ibx-wrap .ibx-meta b{color:var(--mint-ink)}
#ibx-wrap .ibx-typing{align-self:flex-end;display:flex;gap:4px;padding:11px 14px;background:var(--acc-soft);border-radius:18px;border-bottom-right-radius:6px}
#ibx-wrap .ibx-typing i{width:6px;height:6px;border-radius:var(--r3);background:var(--acc);opacity:.35;animation:ibxBlink 1.2s infinite}
#ibx-wrap .ibx-typing i:nth-child(2){animation-delay:.16s}#ibx-wrap .ibx-typing i:nth-child(3){animation-delay:.32s}
@keyframes ibxBlink{0%,60%,100%{opacity:.3}30%{opacity:1}}
#ibx-wrap .ibx-typing[data-slow]::after{content:"still thinking";margin-left:6px;font-size:11px;color:var(--acc);align-self:center}
#ibx-wrap .ibx-sys{align-self:center;max-width:88%;margin:10px 0 2px;padding:7px 13px;border-radius:var(--r3);background:var(--n100);color:var(--n600);font-size:var(--t1);line-height:17px;text-align:center;animation:ibxRise .34s ease both}
#ibx-wrap .ibx-inp input:disabled{background:var(--n100);color:var(--n400)}
#ibx-wrap .ibx-send:disabled{opacity:.45;cursor:default}
#ibx-wrap .ibx-hand{align-self:center;display:inline-flex;align-items:center;gap:7px;margin:8px 0 2px;padding:6px 12px;background:var(--s-amber);color:var(--amber-ink);border-radius:var(--r3);font-size:var(--t1);font-weight:640;animation:ibxRise .34s ease both}
#ibx-wrap .ibx-hand svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2}
#ibx-wrap .ibx-inp{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:var(--edge)}
#ibx-wrap .ibx-inp input{flex:1;min-width:0;border:var(--edge);border-radius:var(--r3);padding:9px 14px;font:inherit;font-size:16px;background:var(--n50);color:var(--n800)}
#ibx-wrap .ibx-inp input:focus{outline:2px solid var(--acc);outline-offset:1px;background:var(--n0)}
#ibx-wrap .ibx-send{width:36px;height:36px;flex:none;display:grid;place-items:center;border:0;border-radius:var(--r3);background:var(--acc);color:var(--on-brand);cursor:pointer}
#ibx-wrap .ibx-send svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
#ibx-wrap .ibx-owner{border:var(--edge);border-radius:18px;background:var(--n0);overflow:hidden;box-shadow:var(--shadow)}
#ibx-wrap .ibx-oh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:var(--edge);background:var(--n50)}
#ibx-wrap .ibx-oh b{font-size:var(--t2);font-weight:660;color:var(--ink)}
#ibx-wrap .ibx-pill{display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:var(--r3);font-size:var(--t1);font-weight:660}
#ibx-wrap .ibx-t1{background:var(--s-amber);color:var(--amber-ink)}
#ibx-wrap .ibx-idle{background:var(--n100);color:var(--n500)}
#ibx-wrap .ibx-panel{padding:20px;min-height:330px}
#ibx-wrap .ibx-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:64px 20px;text-align:center}
#ibx-wrap .ibx-empty svg{width:34px;height:34px;fill:none;stroke:var(--n300);stroke-width:2}
#ibx-wrap .ibx-empty p{margin:0;color:var(--n500);font-size:var(--t2);line-height:21px}
#ibx-wrap .ibx-rows{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:var(--t2);line-height:21px;margin:0}
#ibx-wrap .ibx-rows dt{color:var(--n500)}#ibx-wrap .ibx-rows dd{margin:0;color:var(--ink);font-weight:600}
#ibx-wrap .ibx-said{margin:18px 0 0;padding:14px 16px;background:var(--acc-soft);border-left:3px solid var(--acc);border-radius:0 var(--r2) var(--r2) 0}
#ibx-wrap .ibx-said span{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin-bottom:6px}
#ibx-wrap .ibx-said p{margin:0;font-size:var(--t2);line-height:21px;color:var(--ink-soft)}
#ibx-wrap .ibx-fields{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
#ibx-wrap .ibx-tag{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:var(--r3);background:var(--n100);font-size:var(--t1);font-weight:600;color:var(--n700);font-family:var(--mono)}
#ibx-wrap .ibx-acts{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
#ibx-wrap .ibx-note{font-size:var(--t1);color:var(--n500)}
#ibx-wrap .ibx-honesty{display:flex;gap:10px;align-items:flex-start;margin:22px 0 0;font-size:var(--t2);line-height:21px;color:var(--n600)}
#ibx-wrap .ibx-honesty svg{width:16px;height:16px;fill:none;stroke:var(--acc);stroke-width:2;flex:none;margin-top:3px}
@media(max-width:640px){
#ibx-wrap .ibx-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;padding:6px;border-radius:14px}
#ibx-wrap .ibx-seg button{padding:11px 8px;border-radius:10px;text-align:center;font-size:13.5px;line-height:18px;white-space:nowrap}
}
@media(max-width:900px){#ibx-wrap .ibx-sim{grid-template-columns:minmax(0,1fr)}#ibx-wrap .ibx-phone{max-width:340px}#ibx-wrap .ibx-panel{min-height:0}}
@media(prefers-reduced-motion:reduce){#ibx-wrap .ibx-b,#ibx-wrap .ibx-hand{animation:none}#ibx-wrap .ibx-typing i{animation:none;opacity:.6}}
/* the phone column shrinks with the screen instead of holding 340px */
#ibx-wrap .ibx-sim{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
@media(max-width:900px){#ibx-wrap .ibx-sim{grid-template-columns:minmax(0,1fr)}#ibx-wrap .ibx-phone{width:100%}}