/* "22", the TwoDeux helper (assets/chatbot.js) — Cinema style, home page.
   The mascot walks in, pulls the chat up from the bottom of the screen and jumps into its header. */
.td-bot{--bot-h:min(520px,calc(100vh - 120px));--bot-w:360px;font-family:var(--font-b)}

/* the 22 mascot */
.bot22{display:block;overflow:visible}
.bot22 .b-body{fill:var(--text)}
.bot22 .b-frame{fill:none;stroke:var(--bg);stroke-width:2.6;stroke-linecap:square}
.bot22 .b-eyes circle{fill:var(--bg)}
.bot22 .b-eyes{transform-box:fill-box;transform-origin:center;animation:botBlink 4.5s infinite}
.bot22 .b-22{font-family:"Anton",sans-serif;font-size:21px;fill:var(--bg)}
.bot22 .b-dot{fill:#e5262d}
.bot22 .b-arm path,.bot22 .b-leg path{fill:none;stroke:var(--text);stroke-width:4.6;stroke-linecap:round;stroke-linejoin:round}
.bot22 .b-armL{transform-box:view-box;transform-origin:10px 36px;transition:transform .35s ease}
.bot22 .b-armR{transform-box:view-box;transform-origin:54px 36px;transition:transform .35s ease}
.bot22 .b-legL{transform-box:view-box;transform-origin:24px 62px}
.bot22 .b-legR{transform-box:view-box;transform-origin:40px 62px}
@keyframes botBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}

/* launcher: the head peeking out, bottom right */
.bot-launch{position:fixed;right:20px;bottom:20px;z-index:66;display:flex;align-items:center;gap:10px;padding:6px 16px 6px 8px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--panel);color:var(--text);font:600 14px var(--font-b);cursor:pointer;box-shadow:0 14px 40px rgba(0,0,0,.35);transition:transform .25s ease,opacity .25s ease,border-color .25s}
.bot-launch:hover{border-color:var(--accent);transform:translateY(-2px)}
.bot-launch .bot-head{width:40px;height:52px;margin:-10px 0 -6px;animation:botPeek 3.2s ease-in-out infinite}
.bot-head .b-arm,.bot-head .b-leg{display:none}
@keyframes botPeek{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-6px) rotate(-6deg)}90%{transform:translateY(0) rotate(4deg)}}
.td-bot.is-open .bot-launch,.td-bot.playing .bot-launch{opacity:0;pointer-events:none;transform:translateY(12px)}

/* the chat window, pulled up from below the screen */
.bot-panel{position:fixed;right:20px;bottom:20px;z-index:67;display:flex;flex-direction:column;width:var(--bot-w);height:var(--bot-h);
  background:var(--panel);color:var(--text);border:1px solid var(--line-2);border-radius:var(--r,14px);box-shadow:0 30px 90px rgba(0,0,0,.5);overflow:hidden;
  transform:translateY(calc(100% + 40px));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.bot-panel[hidden]{display:none}
.td-bot .bot-panel{padding:0}
.bot-panel.pulled{transition:transform 1s cubic-bezier(.45,0,.2,1)}
.bot-panel.up{transform:none}
.bot-top{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.bot-avatar{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--bg);border:1px solid var(--line-2)}
.bot-avatar .bot-mini{width:30px;height:40px;margin-top:4px}
.bot-mini .b-arm,.bot-mini .b-leg{display:none}
.td-bot.playing .bot-avatar .bot-mini{opacity:0}
.td-bot.settled .bot-avatar .bot-mini{animation:botLand .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes botLand{from{transform:translateY(-8px) scale(1.25)}}
.bot-who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.bot-who strong{font-family:var(--font-h,var(--font-d));font-weight:400;font-size:18px;letter-spacing:.03em;text-transform:uppercase}
.bot-who small{color:var(--muted);font-size:12.5px}
.bot-x{width:34px;height:34px;flex:none;border:0;border-radius:50%;background:none;color:var(--muted);font-size:24px;line-height:1;cursor:pointer}
.bot-x:hover{color:var(--text);background:var(--line)}
.bot-log{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.bot-msg{display:flex;flex-direction:column;max-width:86%;animation:botMsg .3s ease both}
.bot-msg p{margin:0;padding:10px 13px;border-radius:14px;font-size:14.5px;line-height:1.5}
.bot-msg.bot{align-self:flex-start}
.bot-msg.bot p{background:var(--panel-2);border:1px solid var(--line);border-bottom-left-radius:4px}
.bot-msg.me{align-self:flex-end}
.bot-msg.me p{background:var(--text);color:var(--bg);border-bottom-right-radius:4px}
.bot-act{align-self:flex-start;margin-top:8px;padding:8px 14px;border-radius:var(--r-btn,8px);background:var(--accent);color:#fff;font-size:13.5px;font-weight:700;text-decoration:none}
.bot-act[href^="mailto"],.bot-act[href="#work"]{background:transparent;color:var(--text);border:1px solid var(--line-2)}
.bot-msg.typing p{display:flex;gap:4px;padding:13px 14px}
.bot-msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:botDot 1s infinite}
.bot-msg.typing i:nth-child(2){animation-delay:.15s}.bot-msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes botDot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@keyframes botMsg{from{opacity:0;transform:translateY(6px)}}
.bot-chips{display:flex;flex-wrap:wrap;gap:6px;max-height:84px;overflow-y:auto;padding:0 14px 10px}
.bot-chips button{flex:none;max-width:100%;padding:7px 12px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--text);font:500 13px var(--font-b);cursor:pointer;white-space:nowrap}
.bot-chips button:hover{border-color:var(--text)}
.bot-form{display:flex;gap:8px;padding:10px 12px 12px;border-top:1px solid var(--line)}
.bot-in{flex:1;min-width:0;padding:11px 13px;border:1px solid var(--line-2);border-radius:var(--r-sm,8px);background:var(--bg);color:var(--text);font:500 14.5px var(--font-b);outline:none}
.bot-in:focus{border-color:var(--accent)}
.bot-send{display:grid;place-items:center;width:44px;flex:none;border:0;border-radius:var(--r-sm,8px);background:var(--accent);cursor:pointer}
.bot-send svg{width:18px;height:18px;fill:#fff}

/* the walking mascot (only during the opening animation) */
.bot-walker{position:fixed;right:70px;bottom:14px;z-index:68;width:58px;height:76px;opacity:0;pointer-events:none;transform:translateX(160px)}
.bot-walker .bot-full{width:100%;height:100%}
.bot-walker.walk-in{opacity:1;transform:none;transition:transform 1.05s linear,opacity .2s}
.bot-walker.walk-in .b-legL{animation:botStep .26s ease-in-out infinite alternate}
.bot-walker.walk-in .b-legR{animation:botStep .26s ease-in-out infinite alternate-reverse}
.bot-walker.walk-in .bot-full{animation:botBob .26s ease-in-out infinite alternate}
@keyframes botStep{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
@keyframes botBob{to{transform:translateY(-3px)}}
/* pulling: arms up, rising with the top edge of the chat */
.bot-walker.pull{bottom:calc(20px + var(--bot-h) - 18px);transition:bottom 1s cubic-bezier(.45,0,.2,1),transform .6s}
.bot-walker.pull .b-legL,.bot-walker.pull .b-legR,.bot-walker.pull .bot-full{animation:none}
.bot-walker.pull .b-armL{transform:rotate(140deg)}
.bot-walker.pull .b-armR{transform:rotate(-140deg)}
.bot-walker.pull .b-legL{transform:rotate(-12deg)}
.bot-walker.pull .b-legR{transform:rotate(12deg)}
/* the jump into the header */
.bot-walker.jump{transition:transform .65s cubic-bezier(.3,-.45,.5,1),opacity .2s .5s;transform:translate(var(--jx,0),var(--jy,0)) scale(.5) rotate(-360deg);opacity:0}

/* the "welcome back" card moves to the left so both fit */
.visit-prompt{right:auto;left:20px}

@media(max-width:560px){
  .td-bot{--bot-w:calc(100vw - 24px);--bot-h:min(560px,calc(100vh - 90px))}
  .bot-panel{right:12px;bottom:12px}
  .bot-launch{right:12px;bottom:12px}
  .bot-launch-txt{display:none}
  .bot-launch{padding:6px 8px}
  .bot-walker.pull{bottom:calc(12px + var(--bot-h) - 18px)}
}
@media(prefers-reduced-motion:reduce){
  .bot-launch .bot-head,.bot22 .b-eyes,.bot-msg,.bot-msg.typing i{animation:none}
  .bot-panel{transition:none}
}
.bot-act.ghost{background:transparent;color:var(--text);border:1px solid var(--line-2);font-weight:600}
.bot-help{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:var(--muted)}
.bot-help button{padding:2px 7px;border:1px solid var(--line-2);border-radius:999px;background:transparent;font-size:13px;cursor:pointer;line-height:1.4}
.bot-help button:hover{border-color:var(--text)}