@import url('octo-px.css');
@import url('octo-styles.css');
/* The site assistant (js/assistant.js): Mr. Octo ("Ask Mr. Octo") in the corner, the chat panel above it. */
.ai-launcher{position:fixed;right:18px;bottom:20px;z-index:51;display:flex;align-items:center;gap:9px;padding:14px 18px;border:0;border-radius:30px;background:#191d24;color:#fff;font-family:inherit;font-weight:600;font-size:15px;line-height:1;cursor:pointer;box-shadow:0 8px 22px rgba(25,29,36,.25);min-height:52px}
.ai-launcher:hover{background:#343942}
.ai-launcher[hidden]{display:none}
/* The octopus: on the button (it bobs gently), in the header, and beside its messages. */
.ai-face{width:100%;height:100%;object-fit:contain;display:block}
.ai-launch-face{width:40px;height:40px;margin:-8px 0 -8px -8px;border-radius:50%;background:#fffdf6;padding:3px;box-sizing:border-box;animation:ai-bob 3.2s ease-in-out infinite}
@keyframes ai-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-4deg)}}
.ai-avatar{width:44px;height:44px;flex:none;border-radius:50%;background:#fff6d2;border:1px solid #f1df92;padding:4px;box-sizing:border-box}
.ai-row{display:flex;align-items:flex-end;gap:7px;max-width:92%}
.ai-row .ai-msg{max-width:100%}
.ai-mini{width:30px;height:30px;flex:none;border-radius:50%;background:#fff6d2;padding:3px;box-sizing:border-box;align-self:flex-start}
.ai-mini.empty{background:none}
.ai-panel{position:fixed;right:18px;bottom:18px;z-index:52;width:min(380px,calc(100vw - 32px));height:min(580px,calc(100svh - 110px));display:flex;flex-direction:column;background:#fffdf6;color:#191d24;border:1px solid #e8e8e7;border-radius:18px;box-shadow:0 18px 50px rgba(25,29,36,.22);overflow:hidden;font-family:inherit}
.ai-panel[hidden]{display:none}
.ai-head{display:flex;align-items:center;gap:10px;padding:14px 14px 12px 16px;background:#fff;border-bottom:1px solid #e8e8e7}
.ai-head div{flex:1;display:flex;flex-direction:column;gap:2px;font-size:14px}
.ai-head small{color:#5f636b;font-size:13px}
.ai-close{width:34px;height:34px;border:0;border-radius:50%;background:#f1f1f0;color:#191d24;font-size:22px;line-height:1;cursor:pointer}
.ai-log{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.ai-msg{max-width:85%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.ai-msg.them{align-self:flex-start;border-top-left-radius:4px;background:#fff;border:1px solid #ecebe6}
.ai-msg.me{align-self:flex-end;background:#191d24;color:#fff;border-bottom-right-radius:4px}
.ai-msg a{color:inherit;font-weight:700}
.ai-starters{display:flex;flex-wrap:wrap;gap:7px;padding-left:37px}
.ai-starters button{border:1px solid #e8d68c;background:#fff6d2;color:#191d24;border-radius:20px;padding:8px 12px;min-height:40px;font:inherit;font-size:14px;cursor:pointer}
.ai-starters button:hover{background:#ffec99}
.ai-whatsapp{align-self:flex-start;margin-left:37px;background:#25d366;color:#fff;text-decoration:none;font-weight:700;font-size:14px;padding:11px 16px;border-radius:10px}
.ai-typing{margin-left:37px;display:flex;gap:4px;align-items:center;padding:14px}
.ai-typing i{width:6px;height:6px;border-radius:50%;background:#a3a6ad;animation:ai-blink 1.2s infinite}
.ai-typing i:nth-child(2){animation-delay:.2s}.ai-typing i:nth-child(3){animation-delay:.4s}
@keyframes ai-blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
/* .ai-panel in front: the site's own form and textarea styles must not reach the chat box. */
.ai-panel .ai-form{display:flex;flex-direction:row;gap:8px;align-items:flex-end;margin:0;padding:10px 12px;background:#fff;border-top:1px solid #e8e8e7}
.ai-panel .ai-form textarea{flex:1;width:auto;min-width:0;min-height:0;height:42px;max-height:120px;margin:0;resize:none;border:1px solid #dcdcda;border-radius:12px;padding:10px 12px;font:inherit;font-size:15px;line-height:1.35;background:#fff;color:#191d24}
.ai-send{width:40px;height:40px;flex:none;border:0;border-radius:50%;background:#ffd000;color:#191d24;font-size:18px;font-weight:800;cursor:pointer}
.ai-send:disabled,.ai-form textarea:disabled{opacity:.5;cursor:default}
/* a photo for Mr. Octo: the camera button, the photo waiting to go, and in the chat */
.ai-pick{width:40px;height:40px;flex:none;display:grid;place-items:center;border:1px solid #dcdcda;border-radius:50%;background:#fff;color:#4a4f58;cursor:pointer}
.ai-pick:hover{border-color:#ffd000;color:#191d24}
.ai-pick:disabled{opacity:.5;cursor:default}
.ai-photo{position:absolute;left:12px;bottom:calc(100% + 8px);z-index:3;display:flex;align-items:flex-start;padding:4px;border-radius:12px;background:#fff;box-shadow:0 8px 24px -8px rgba(0,0,0,.35)}
.ai-photo img{display:block;max-width:120px;max-height:90px;border-radius:9px}
.ai-photo-x{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border:0;border-radius:50%;background:#191d24;color:#fff;font-size:15px;line-height:1;cursor:pointer}
.ai-msg-photo{display:block;max-width:100%;max-height:200px;border-radius:10px;margin-bottom:6px}
.ai-msg-note{display:block;font-size:13px;opacity:.75;margin-bottom:2px}
/* buttons Mr. Octo offers a signed-in client */
.ai-actions{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 6px 40px}
.ai-act{min-height:38px;padding:0 14px;border:0;border-radius:999px;background:#ffd000;color:#191d24;font:700 14px/1 inherit;cursor:pointer}
.ai-act.ghost{background:#fff;border:1px solid #dcdcda}
.ai-act:disabled{opacity:.6;cursor:default}
.ai-done{font-size:13.5px;font-weight:600;color:#1f7a44}
.ai-saved{display:block;margin-top:2px;font-size:11.5px;opacity:.7}
.ai-saved a{color:inherit}
.ai-foot{margin:0;padding:0 14px 10px;background:#fff;font-size:13px;color:#5f636b}
.ai-foot a{color:#191d24;font-weight:700}
@media (max-width:480px){.ai-panel{right:8px;left:8px;bottom:8px;width:auto;height:calc(100svh - 80px)}.ai-launcher{right:12px;bottom:14px}}
@media (prefers-reduced-motion:reduce){.ai-typing i,.ai-launch-face{animation:none}}
.ai-lang{border:1px solid #e8d68c;background:#fff6d2;color:#191d24;border-radius:16px;padding:6px 10px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.ai-again{border:0;background:none;padding:0;margin-left:10px;font:inherit;font-size:13px;color:#5f636b;text-decoration:underline;cursor:pointer}
/* The menu the launcher opens: chat here, WhatsApp, or call. */
.ai-menu{position:fixed;right:18px;bottom:86px;z-index:53;width:min(340px,calc(100vw - 24px));display:flex;flex-direction:column;gap:8px;padding:16px;background:#fff;color:#191d24;border-radius:22px;box-shadow:0 18px 50px rgba(25,29,36,.3);font-family:inherit}
.ai-menu[hidden],.ai-scrim[hidden]{display:none}
.ai-menu-head{display:flex;align-items:center;gap:12px;padding-bottom:6px}
.ai-menu-title{margin:0;font-family:Manrope,inherit;font-weight:800;font-size:17px}
.ai-menu-sub{margin:2px 0 0;font-size:14px;color:#5f636b}
.ai-option{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 16px;border:0;border-radius:14px;font:inherit;font-weight:600;font-size:15px;text-align:left;text-decoration:none;cursor:pointer}
.ai-option::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:currentColor;opacity:.55}
.ai-option-chat{background:#191d24;color:#fff}
.ai-option-chat::before{background:#ffd000;opacity:1}
.ai-option-wa{background:#e9f9ee;color:#0f5130}
.ai-option-call{background:#f4f1e6;color:#191d24}
.ai-option:hover{filter:brightness(.96)}
.ai-option:focus-visible,.ai-launcher:focus-visible,.ai-close:focus-visible{outline:3px solid #ffd000;outline-offset:3px}
.ai-scrim{position:fixed;inset:0;z-index:50;background:rgba(18,20,25,.4)}
@media (min-width:601px){.ai-scrim{background:transparent}}
@media (max-width:480px){.ai-menu{right:12px;left:12px;width:auto;bottom:80px}}
/* On the dark homepage the launcher is light, so it stands off the map. */
.theme-dark .ai-launcher{background:#f4f2ea;color:#14171d;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.theme-dark .ai-launcher:hover{background:#fff}

/* The pixel sprite itself (size, motion, glow) is css/octo-px.css, shared with the desk. */
.ai-panel .ai-form{position:relative}
.ai-perch{--u:2px;position:absolute;right:58px;top:-39px;z-index:1;cursor:pointer}
.ai-launch-face.px{display:grid;place-items:center;background:#14161b;padding:0;width:44px;height:44px;animation:none;
  box-shadow:0 0 0 1px rgba(255,208,0,.25),0 0 14px rgba(255,208,0,.28)}
.ai-launch-face.px .octo-px{--u:1.5px}
/* A reply's mood as a mini emote beside it (js/octo-emotes.js). */
.ai-mini.emo-face{background:#14161b;display:grid;place-items:center;padding:0}
.ai-mini .ai-mood{width:22px;height:22px;margin:0;vertical-align:0}
/* Small phones: the launcher is just Mr. Octo's round face, so it never covers the page's own buttons. */
@media (max-width:420px){.ai-launcher .ai-launch-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ai-launcher,.is-map .ai-launcher{padding:6px;gap:0;border-radius:50%;min-height:0}
  .ai-launcher .ai-launch-face{margin:0}}
/* Mr. Octo's aura (js/octo-aura.js) sits behind him; the messages stay on top of it. */
.ai-panel .ai-log{position:relative;z-index:1}
/* The pixel Mr. Octo in the small round avatars (js/assistant.js). */
.ai-avatar.px,.ai-mini.px{display:grid;place-items:center;padding:0;background:#14161b;border-color:rgba(255,208,0,.4);overflow:hidden}
.ai-avatar.px .octo-px{--u:1.5px;margin-top:2px}
.ai-avatar.px .ai-px-face{display:block;width:32px;height:28px;margin-top:3px}
.ai-avatar.px .ai-px-face svg{display:block;width:100%;height:100%}
.ai-mini.px .ai-px-face{display:block;width:24px;height:21px;margin-top:2px}
.ai-mini.px .ai-px-face svg{display:block;width:100%;height:100%}