/* Tuck, the design helper (assets/js/tuck/tuck.js.coffee). Bottom right, where Olark was;
   sits under the app's dialogs (2000). */
.tuck-root{position:fixed;right:0;bottom:0;z-index:1500;font-family:"Museo Sans","museo-sans",Helvetica,Arial,sans-serif;color:#465C65;-webkit-font-smoothing:antialiased}
.tuck-root *{box-sizing:border-box}
.tuck-root [hidden]{display:none !important}
/* :where keeps this reset below Tuck's own button classes */
.tuck-root :where(button){all:unset;box-sizing:border-box;cursor:pointer}
.tuck-root button:focus-visible{outline:2px solid #00A1F0;outline-offset:2px}

/* Tuck himself */
.tuck-walker{position:fixed;bottom:10px;bottom:calc(var(--tuck-floor,0px) + 10px);right:20px;width:92px;transition:right 2.6s linear}
.tuck-btn{display:block;border-radius:50%}
.tuck-btn:focus-visible{outline-offset:4px}
.tuck-face-dir.is-left{transform:scaleX(-1)}
.tuck-fx{position:absolute;left:0;top:0;width:100%;height:0;pointer-events:none}
.tuck-zzz{position:absolute;font-weight:700;color:#61757F;opacity:0;animation:tuck-zz 2.4s ease-in infinite}
.tuck-heart{position:absolute;top:-8px;opacity:0;animation:tuck-heart 1.6s ease-out forwards}

/* Always-open bubble */
.tuck-bub{position:fixed;right:20px;bottom:116px;bottom:calc(var(--tuck-floor,0px) + 116px);width:312px;max-width:calc(100vw - 32px);padding:12px 12px 12px 14px;background:#fff;border:1px solid #C2D6E1;border-radius:14px;box-shadow:0 10px 28px rgba(13,39,98,.14);animation:tuck-pop .35s cubic-bezier(.3,1.5,.6,1)}
.tuck-bub-tail{position:absolute;bottom:-9px;right:38px;width:16px;height:16px;background:#fff;border-right:1px solid #C2D6E1;border-bottom:1px solid #C2D6E1;transform:rotate(45deg);transition:right 2.6s linear}
/* Beside Tuck when above him would cover the app; off when neither fits */
.tuck-bub.is-beside{bottom:14px;bottom:calc(var(--tuck-floor,0px) + 14px);transition:right 2.6s linear}
.tuck-bub.is-beside .tuck-bub-tail{bottom:auto;top:30px;right:-9px !important;transform:rotate(-45deg)}
.tuck-bub.is-off{display:none}
.tuck-bub-top{display:flex;align-items:flex-start;gap:8px}
.tuck-bub-msg{flex:1;margin:0;font-size:14px;line-height:19px;color:#465C65}
.tuck-bub-msg b{color:#475C66}
.tuck-bub-row{display:flex;align-items:center;gap:14px;margin-top:8px}
.tuck-icon{flex:none;width:26px;height:26px;border-radius:7px;display:flex; align-items:center;justify-content:center;color:#61757F}
.tuck-icon:hover{background:#F2FBFF;color:#0277B0}
.tuck-ask{display:flex; align-items:center;justify-content:space-between;width:100%;height:32px;margin-top:8px;padding:0 5px 0 11px; border:1px solid #E3E5E7; border-radius:16px;background:#F9FAFB;color:#61757F;font-size:13px;cursor:text}
.tuck-ask:hover{border-color:#C2D6E1; background:#F2FBFF}
.tuck-ask i{font-style:normal;width:22px;height:22px;border-radius:50%;background:#00abff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px}
.tuck-undo{color:#0277B0;font-size:13px;text-decoration:underline}
.tuck-undo:disabled{color:#61757F;cursor:default}

/* Chat */
.tuck-chat{position:fixed;right:20px;bottom:20px;bottom:calc(var(--tuck-floor,0px) + 20px);width:384px;height:600px;max-height:calc(100vh - 230px);max-height:calc(100vh - var(--tuck-floor,0px) - 230px);min-height:320px;display:flex;flex-direction:column;background:#fff;border:1px solid #C6CBCD;border-radius:16px;box-shadow:0 20px 48px rgba(13,39,98,.20);animation:tuck-grow .32s cubic-bezier(.3,1.3,.6,1);transform-origin:80% 100%}
.tuck-perch{position:absolute;right:30px;top:-64px;width:74px}
.tuck-chat-h{display:flex;align-items:center;gap:6px;height:58px;padding:0 10px 0 16px;border-bottom:1px solid #E3E5E7;flex:none}
.tuck-title{flex:1;display:flex;flex-direction:column}
.tuck-title b{font-size:16px;color:#475C66}
.tuck-title span{font-size:12px;color:#61757F}
.tuck-log{flex:1;overflow:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:10px;background:#FCFDFD}
.tuck-m{max-width:300px;padding:9px 12px;font-size:14px;line-height:20px;overflow-wrap:break-word}
.tuck-m-t{align-self:flex-start;background:#F2FBFF;border:1px solid #C2D6E1;border-radius:4px 14px 14px 14px;color:#465C65}
.tuck-m-t b{color:#475C66}
.tuck-m-u{align-self:flex-end;max-width:260px;background:#0277B0;color:#fff;border-radius:14px 4px 14px 14px}
.tuck-note{background:#fff;border-color:#E3E5E7;color:#61757F}
.tuck-undo-row{margin-top:6px}
.tuck-working{color:#61757F;font-size:13px;display:flex;align-items:center;gap:8px}
.tuck-dots{display:inline-flex;gap:3px}
.tuck-dots i{width:6px;height:6px;border-radius:50%;background:#00abff;animation:tuck-dot 1.2s ease-in-out infinite}
.tuck-dots i:nth-child(2){animation-delay:.15s}
.tuck-dots i:nth-child(3){animation-delay:.3s}
.tuck-chips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 14px 0;flex:none;border-top:1px solid #E3E5E7}
.tuck-chip{font-size:12.5px;color:#0277B0;border:1px solid #C2D6E1; background:#fff;border-radius:14px;padding:4px 10px}
.tuck-chip:hover{background:#F2FBFF}
.tuck-form{display:flex;gap:8px;align-items:center;margin:0;padding:10px 14px 8px;flex:none}
.tuck-form input{flex:1;min-width:0;height:38px;margin:0;border:1px solid #CED5D9;border-radius:19px;padding:0 14px;font:inherit;font-size:14px;color:#465C65;background:#fff;outline:none;box-shadow:none}
.tuck-form input:focus{border-color:#00A1F0;box-shadow:0 0 0 3px rgba(0,161,240,.15)}
.tuck-send{flex:none;width:38px;height:38px;border-radius:50%;background:linear-gradient(#41c1ff,#00abff);border:1px solid #00A1F0; color:#fff;display:flex; align-items:center;justify-content:center;font-size:16px;font-weight:700}
.tuck-send.is-stop{font-size:12px}
.tuck-fine{font-size:11.5px;color:#61757F;text-align:center;padding:0 14px 10px;flex:none}

/* Tuck's drawing */
.tuck-root .tk{overflow:visible;display:block}
.tuck-root .tk *{transform-box:fill-box}
.tk-bodyg{transform-origin:50% 100%;animation:tk-breathe 3.2s ease-in-out infinite}
.tk-eye{transform-origin:50% 50%;animation:tk-blink 4.6s infinite}
.tk-glint{animation:tk-blinkglint 4.6s infinite}
.tk-tag{transform-origin:50% 100%;transform:rotate(-12deg);animation:tk-tag 3.2s ease-in-out infinite}
.tk-arm-r{transform-origin:12% 15%}
.tk-arm-l{transform-origin:88% 15%}
.tk-closed,.tk-happy,.tk-mouth-open{display:none}
.tk.is-wave .tk-arm-r{animation:tk-wave 1.1s ease-in-out infinite}
.tk.is-happy .tk-eyes,.tk.is-happy .tk-mouth{display:none}
.tk.is-happy .tk-happy,.tk.is-happy .tk-mouth-open{display:inline}
.tk.is-happy{animation:tk-hop .9s cubic-bezier(.3,0,.4,1) infinite}
.tk.is-sleep .tk-eyes{display:none}
.tk.is-sleep .tk-closed{display:inline}
.tk.is-sleep .tk-bodyg{animation-duration:5s}
.tk.is-look .tk-face{transform:translate(5px,-1px)}
.tk.is-look .tk-arm-r{animation:tk-wave 1.6s ease-in-out infinite}
.tk.is-walk{animation:tk-waddle .5s ease-in-out infinite}
.tk.is-walk .tk-arm-l{animation:tk-swing .5s ease-in-out infinite}
.tk.is-walk .tk-arm-r{animation:tk-swing .5s ease-in-out infinite reverse}

@keyframes tk-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,.97)}}
@keyframes tk-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes tk-blinkglint{0%,92%,100%{opacity:1}94%,96%{opacity:0}}
@keyframes tk-tag{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(-2deg)}}
@keyframes tk-wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-28deg)}75%{transform:rotate(-8deg)}}
@keyframes tk-swing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes tk-hop{0%,100%{transform:translateY(0) scale(1,1)}15%{transform:translateY(0) scale(1.08,.9)}45%{transform:translateY(-22px) scale(.95,1.06)}75%{transform:translateY(0) scale(1.06,.93)}}
@keyframes tk-waddle{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-4px)}}
@keyframes tuck-pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tuck-grow{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes tuck-zz{0%{opacity:0;transform:translate(0,0) scale(.7)}20%{opacity:1}100%{opacity:0;transform:translate(14px,-34px) scale(1.2)}}
@keyframes tuck-heart{0%{opacity:0;transform:translateY(0) scale(.4)}20%{opacity:1;transform:translateY(-8px) scale(1.1)}100%{opacity:0;transform:translateY(-60px) scale(1)}}
@keyframes tuck-dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

@media (max-width:600px){
  .tuck-chat{left:8px;right:8px;width:auto;bottom:8px;bottom:calc(var(--tuck-floor,0px) + 8px);height:70vh;max-height:calc(100vh - var(--tuck-floor,0px) - 200px)}
  .tuck-bub{right:16px;bottom:108px;bottom:calc(var(--tuck-floor,0px) + 108px)}
}
@media (prefers-reduced-motion:reduce){
  .tuck-root .tk,.tuck-root .tk *,.tuck-bub,.tuck-chat,.tuck-dots i{animation:none !important}
  .tuck-walker,.tuck-bub-tail{transition:none}
}
