.chat-open{position:fixed;right:20px;bottom:max(20px,env(safe-area-inset-bottom));width:50px;height:50px;display:grid;place-items:center;border-radius:50%;padding:12px;z-index:60;cursor:pointer;border:1px solid currentColor;background:var(--panel);color:var(--ink);box-shadow:0 5px 24px #0003}.chat-open svg{width:24px;height:24px}.chat-open:focus-visible{outline:3px solid var(--ink);outline-offset:4px}body .walnut-chat{background:#f4f0e7;color:#181916;border-color:#bdb7aa}body .walnut-chat header{background:#181916}body .walnut-chat-message{background:#e7e1d6}body .walnut-chat-message.visitor{background:#181916;color:#f4f0e7}body .walnut-chat textarea{background:#fffdf6;color:#181916;border-color:#bdb7aa}body .walnut-chat-form button{background:#181916;color:#f4f0e7}
.chat-open{padding:0;border:0;background:transparent;box-shadow:none}
.chat-open svg{width:50px;height:50px}

    #chat-walnut { cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; }
    #chat-walnut .h { transform: rotate(0deg); transition: transform .65s cubic-bezier(.34,1.45,.64,1); }
    #chat-walnut .lv { transform: translateY(0.9px) rotate(0deg); transition: transform .8s cubic-bezier(.34,1.6,.64,1); }
    #chat-walnut .gl { opacity: 0; transition: opacity .5s ease .15s; }
    #chat-walnut .lid, #chat-walnut .look { transform-box: fill-box; transform-origin: 50% 50%; }
    /* closed: blink at an uneven, playful rhythm and glance around */
    #chat-walnut .lid { animation: blink-we 4.2s infinite; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
    #chat-walnut .eL .look { animation: lookL-we 7s ease-in-out infinite; }
    #chat-walnut .eR .look { animation: lookR-we 7s ease-in-out infinite; }
    #chat-walnut .happy { opacity: 0; transition: opacity .2s; }
    @keyframes blink-we {
      0%,40%,46%,78%,100% { transform: scaleY(1) } 42%,44% { transform: scaleY(.08) }
      80% { transform: scaleY(.08) } 83% { transform: scaleY(1) } 86% { transform: scaleY(.08) } 89% { transform: scaleY(1) } }
    @keyframes lookL-we { 0%,18%,92%,100% { transform: translate(0,0) } 24%,40% { transform: translate(-.42px,.05px) } 50%,70% { transform: translate(.42px,-.1px) } 76%,86% { transform: translate(0,-.32px) } }
    /* the right eye sits in a mirrored half, so its sideways moves are flipped to keep both eyes looking the same way */
    @keyframes lookR-we { 0%,18%,92%,100% { transform: translate(0,0) } 24%,40% { transform: translate(.42px,.05px) } 50%,70% { transform: translate(-.42px,-.1px) } 76%,86% { transform: translate(0,-.32px) } }
    /* hover or keyboard focus: eyes go wide and look up, the shell cracks a little */
    .chat-open:not([aria-expanded="true"]) #chat-walnut:hover .h, .chat-open:not([aria-expanded="true"]) #chat-walnut:focus-visible .h { transform: rotate(5deg); }
    .chat-open:not([aria-expanded="true"]) #chat-walnut:hover .look, .chat-open:not([aria-expanded="true"]) #chat-walnut:focus-visible .look { animation: none; transform: translate(0,-.35px); }
    .chat-open:not([aria-expanded="true"]) #chat-walnut:hover .lid, .chat-open:not([aria-expanded="true"]) #chat-walnut:focus-visible .lid { animation: none; transform: scale(1.18); }
    /* clicked: open up, eyes turn into happy ^ ^ */
    .chat-open[aria-expanded="true"] #chat-walnut .h { transform: rotate(24deg); }
    .chat-open[aria-expanded="true"] #chat-walnut .lv { transform: translateY(0) rotate(-7deg); }
    .chat-open[aria-expanded="true"] #chat-walnut .gl { opacity: .85; }
    .chat-open[aria-expanded="true"] #chat-walnut .look { animation: none; transform: none; }
    .chat-open[aria-expanded="true"] #chat-walnut .lid { animation: none; transform: scaleY(0); }
    .chat-open[aria-expanded="true"] #chat-walnut .happy { opacity: 1; transition-delay: .18s; }
    #chat-walnut:focus-visible { filter: drop-shadow(0 0 1.2px #B8FF3C); }
    @media (prefers-reduced-motion: reduce) {
      #chat-walnut .h, #chat-walnut .lv, #chat-walnut .gl, #chat-walnut .lid { transition: none; }
      #chat-walnut .lid, #chat-walnut .look { animation: none; }
    }
  

/* Chat follows the navigation drawer, hinged from the right. */
#chat-root{position:fixed;inset:0;z-index:1000;pointer-events:none;visibility:hidden;perspective:1500px;perspective-origin:100% 50%}
#chat-root.chat-live{visibility:visible}#chat-root.chat-active{pointer-events:auto}
.chat-scrim{position:absolute;inset:0;background:var(--scrim,rgba(12,14,9,.5));opacity:0;transition:opacity .4s ease;backdrop-filter:blur(2px)}
.chat-active>.chat-scrim{opacity:1}
body #chat-root .walnut-chat{position:absolute;inset:0 0 0 auto;width:min(440px,96vw);height:100dvh;max-height:none;border:0;border-radius:28px 0 0 28px;padding:0;background:#fafbf9;color:#242723;font:15px/1.5 Manrope,sans-serif;transform-origin:100% 50%;backface-visibility:hidden;will-change:transform;box-shadow:-40px 0 80px -30px #0008}
body #chat-root .walnut-chat[hidden]{display:none}
.chat-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(270deg,transparent,rgba(0,0,0,.65));opacity:var(--shade,1)}
body #chat-root .walnut-chat header{position:relative;flex:0 0 auto;align-items:center;gap:16px;background:#fafbf9;color:#242723;padding:22px;border:0;border-bottom:1px solid #e4e7e0}
body #chat-root .walnut-chat header strong{font:700 20px/1.25 Manrope,sans-serif;letter-spacing:-.025em;max-width:280px}
body #chat-root .walnut-chat header span{color:#70766c;opacity:1;font:400 12px/1.5 Manrope,sans-serif;margin-top:5px}
body #chat-root .walnut-chat header button{display:grid;place-items:center;border:0;background:#eef0eb;color:#4c5348;border-radius:50%;width:38px;height:38px;flex:0 0 38px;padding:0}
body #chat-root .walnut-chat header button:hover{background:#e4e7df}
body #chat-root .walnut-chat-messages{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:24px 20px;background:#f0f2ee;scrollbar-width:thin;scrollbar-color:#cdd3c8 transparent}
body #chat-root .walnut-chat-message{flex:0 0 auto;max-width:90%;background:#fff;color:#242723;padding:12px 15px;margin:0;border:1px solid #e1e5dc;border-radius:17px 17px 17px 5px;box-shadow:0 2px 5px #1c281308}
body #chat-root .walnut-chat-message small{display:block;font:600 11px/1.4 Manrope,sans-serif;text-transform:none;letter-spacing:0;color:#717969;opacity:1}
body #chat-root .walnut-chat-message p{font-size:14px;line-height:1.6;margin-top:5px}
body #chat-root .walnut-chat-message.visitor{align-self:flex-end;margin:0;padding:12px 15px;border-color:#272c25;border-radius:17px 17px 5px 17px;background:#272c25;color:#fff}
body #chat-root .walnut-chat-message.visitor small{color:#c8d0c1}
body #chat-root .walnut-chat-message.human{background:#fff;border-left:2px solid #485fc7}
body #chat-root .walnut-chat-message.system{align-self:center;max-width:100%;padding:4px 10px;border:0;background:transparent;box-shadow:none;text-align:center;color:#737c6c}
body #chat-root .walnut-chat-message.system small{display:none}
body #chat-root .walnut-chat-message.system p{font-size:12px;margin:0}
body #chat-root .walnut-chat-error{background:#fff4e6;color:#77552e;border-top:1px solid #f1dec2;padding:10px 20px;line-height:1.5}
body #chat-root .walnut-chat-form{flex:0 0 auto;padding:16px 18px max(18px,env(safe-area-inset-bottom));border-color:#e1e5dc;background:#fafbf9}
body #chat-root .walnut-chat-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body #chat-root .walnut-chat-form>div{display:flex;gap:6px;border:1px solid #d8ded1;background:#fff;border-radius:20px;padding:5px;align-items:flex-end;box-shadow:0 2px 6px #25321b04}
body #chat-root .walnut-chat-form>div:focus-within{border-color:#7e8ccf;box-shadow:0 0 0 3px #485fc713}
body #chat-root .walnut-chat textarea{background:transparent;color:#242723;border:0;border-radius:14px;font-size:16px;line-height:1.45;padding:9px 10px;min-height:48px;max-height:160px;box-shadow:none}
body #chat-root .walnut-chat textarea:focus-visible{outline:0}
body #chat-root .walnut-chat-form button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#485fc7;color:#fff}
body #chat-root .walnut-chat-form button:hover:not(:disabled){background:#3e53b3}
body #chat-root .walnut-chat-form button svg{width:20px;height:20px}
body #chat-root .walnut-chat-form>small{color:#7b8275;opacity:1;margin-top:10px;font-size:10px;line-height:1.5}
body #chat-root .walnut-chat :focus-visible{outline-color:#485fc7}
body.chat-active{overflow:hidden}body.chat-active .page{transform:translateX(-26px) scale(.985);filter:saturate(.8)}
@media(prefers-reduced-motion:reduce){.chat-scrim{transition:none}}
@media(max-width:500px){body #chat-root .walnut-chat{padding:0;border-radius:24px 0 0 24px}body #chat-root .walnut-chat header{padding:20px}body #chat-root .walnut-chat-messages{padding:20px 16px}body #chat-root .walnut-chat-form{padding:14px 14px max(16px,env(safe-area-inset-bottom))}}

/* Walnut invitation: a small thought, followed by the message. */
.chat-open{width:58px;height:58px;background:#fffdf6;border:1px solid #18191626;box-shadow:0 6px 24px #18191620;color:#181916}
.chat-open svg{width:50px;height:50px}
.chat-thought-dot,.chat-thought-message{position:absolute;display:block;background:#fffdf6;color:#181916;box-shadow:0 3px 16px #18191618;pointer-events:none;opacity:0;transform:scale(0);transform-origin:85% 100%}
.chat-thought-dot{width:12px;height:12px;border-radius:50%;bottom:calc(100% + 5px);right:13px;animation:chat-thought-dot 8s ease-in-out infinite}
.chat-thought-message{bottom:calc(100% + 25px);right:0;border-radius:50px;padding:13px 19px;white-space:nowrap;font:700 14px/1.2 Manrope,sans-serif;animation:chat-thought-message 8s ease-in-out infinite}
@keyframes chat-thought-dot{0%,12%,88%,100%{opacity:0;transform:scale(0)}18%,80%{opacity:1;transform:scale(1)}24%{transform:scale(1.12)}}
@keyframes chat-thought-message{0%,22%,83%,100%{opacity:0;transform:scale(.35) translateY(8px)}30%,76%{opacity:1;transform:scale(1) translateY(0)}35%{transform:scale(1.04)}}
.chat-open[aria-expanded="true"] .chat-thought-dot,.chat-open[aria-expanded="true"] .chat-thought-message{visibility:hidden}
@media(prefers-reduced-motion:reduce){.chat-thought-dot,.chat-thought-message{animation:none;opacity:1;transform:none}}

.chat-open{box-shadow:0 6px 24px #18191620}
.chat-thought-dot,.chat-thought-message{background:#f7fbff;box-shadow:0 0 10px #3988ff70,0 0 25px #3988ff3d}
.chat-thought-dot{background:#d9eaff}
