/* Ask Olive drawer, shared by Emma's home hub and Olive's page. */
.askfab{position:fixed; right:18px; bottom:18px; z-index:60; padding:12px 20px; border:0; border-radius:999px; background:#E23260; color:#fff; font:700 15px var(--font-body); cursor:pointer; box-shadow:0 8px 22px rgba(30,51,9,.3)}
.askfab:hover,.askfab:focus-visible{background:#C91F4C}
.askfab[hidden],.askfab[aria-expanded="true"]{display:none}
.askdrawer{text-align:left; position:fixed; right:0; top:0; bottom:0; z-index:80; width:min(420px,100vw); display:flex; flex-direction:column; background:var(--surface); border-left:1px solid var(--line); box-shadow:-12px 0 32px rgba(30,51,9,.2); animation:slidein .22s ease-out}
.askdrawer[hidden]{display:none}
@keyframes slidein{from{transform:translateX(24px); opacity:0}}
.askdrawer header{display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line)}
.askdrawer header b{display:block; font:400 22px var(--font-display); color:var(--green)}
.askdrawer header small{color:var(--muted); font-size:12px}
.askdrawer .ask-x{margin-left:auto; width:32px; height:32px; border-radius:50%; border:0; background:var(--mist); font-size:20px; cursor:pointer; color:var(--green)}
.askdrawer .oface{flex:none; width:44px; height:44px; border-radius:50%; background:var(--blush); overflow:hidden; display:block}
.askdrawer .oface svg{display:block; width:100%; height:auto}
.askmsgs{flex:1; overflow:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px}
.msg{max-width:88%} .msg p{padding:9px 13px; border-radius:16px; font-size:14px; line-height:1.4; margin:0; white-space:pre-wrap; overflow-wrap:anywhere}
.msg.olive{align-self:flex-start} .msg.olive p{background:var(--blush); color:#3C3C3C; border-bottom-left-radius:4px}
.msg.you{align-self:flex-end} .msg.you p{background:#1E3309; color:#FFF9F4; border-bottom-right-radius:4px}
.msg.typing p{display:flex; gap:4px; padding:12px 14px} .msg.typing i{width:7px; height:7px; border-radius:50%; background:#8A5A6A; animation:blip 1s infinite ease-in-out}
.msg.typing i:nth-child(2){animation-delay:.15s} .msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes blip{0%,80%,100%{opacity:.25; transform:translateY(0)} 40%{opacity:1; transform:translateY(-3px)}}
.asksug{display:flex; flex-wrap:wrap; gap:6px}
.asksug button{font:500 13px var(--font-body); padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer}
.asksug button:hover,.asksug button:focus-visible{border-color:#E23260}
.prop{background:var(--surface); border:1.5px solid #E23260; border-radius:16px; padding:12px 14px; display:grid; gap:4px; font-size:14px; max-width:100%}
.prop p{margin:0; padding:0; background:none!important; border-radius:0; white-space:normal}
.prop .k{font:700 11px var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:#E23260}
.prop .t{font:400 20px var(--font-display); color:var(--green)}
.prop .n{color:var(--muted); font-size:13px}
.prop .g{font-weight:700; color:#8A5A00; background:#FFF0D2!important; padding:6px 10px!important; border-radius:10px!important; font-size:13px}
.prop .acts{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.prop .st{font-weight:700; color:var(--muted)} .prop .st.ok{color:#1F6B49}
.asknote{font-size:12px; color:var(--muted); padding:0 16px 8px; margin:0}
.askdrawer form{display:flex; gap:8px; padding:12px 16px 16px; border-top:1px solid var(--line)}
.askdrawer input{flex:1; min-width:0; border:1px solid var(--line); border-radius:999px; padding:10px 14px; font:inherit; background:var(--surface); color:var(--ink)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (max-width:480px){.askfab{right:12px; bottom:12px}}
@media (prefers-reduced-motion: reduce){.askdrawer{animation:none} .msg.typing i{animation:none}}

.askdrawer p,.askdrawer .prop,.askdrawer .asknote{text-align:left}

.askfab{display:inline-flex; align-items:center; gap:10px; padding:6px 20px 6px 6px}
.askfab .askface{flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:#fff9f4; border:2px solid #fff; overflow:hidden; display:block}
.askfab .askface svg{width:100%; height:100%; display:block}
.askfab[hidden],.askfab[aria-expanded="true"]{display:none}

/* Ask Olive wears the same look as the team chat: floating card, dark green header, pink rule, bubbles. */
.askdrawer{right:16px; left:auto; top:auto; bottom:calc(16px + env(safe-area-inset-bottom)); width:380px; max-width:calc(100vw - 32px); height:min(600px,calc(100vh - 32px)); background:#fff9f4; border:3px solid #183D32; border-radius:18px; overflow:hidden; box-shadow:6px 6px 0 rgba(24,61,50,.18); animation:askin .16s ease-out}
@keyframes askin{from{opacity:0; transform:translateY(8px)}}
.askdrawer header{background:#183D32; border-bottom:3px solid #F2678E; padding:10px 12px}
.askdrawer header b{color:#fff; font:400 19px "DM Serif Display",Georgia,serif}
.askdrawer header small{color:#CFE6B4; font:500 12px "DM Sans",sans-serif}
.askdrawer .ask-x{background:transparent; color:#fff; width:40px; height:40px; border-radius:10px; font-size:26px; line-height:1}
.askdrawer .ask-x:hover{background:rgba(255,255,255,.14)}
.askdrawer .oface{background:#fff9f4; border:2px solid #fff; width:44px; height:44px}
.askmsgs{padding:12px; gap:6px; background:#fff9f4}
.msg{max-width:84%}
.msg p{font-size:15px; line-height:1.35; padding:7px 11px}
.msg.olive p{background:#fff; border:2px solid #e7dfd2; color:#3c3c3c; border-radius:14px 14px 14px 4px}
.msg.you p{background:#fde3ea; border:2px solid #fca9aa; color:#3c3c3c; border-radius:14px 14px 4px 14px}
.asksug button{border:2px solid #183D32; background:#fff; color:#183D32; font:700 13px "DM Sans",sans-serif; min-height:36px; padding:6px 12px}
.asksug button:hover,.asksug button:focus-visible{background:#183D32; color:#fff; border-color:#183D32}
.asknote{padding:0 12px 8px; color:#6a6a6a}
.askdrawer form{border-top:3px solid #183D32; background:#fff; padding:10px}
.askdrawer input{border:2px solid #183D32; border-radius:12px; min-height:44px; padding:0 12px; font:400 16px "DM Sans",sans-serif; background:#fff9f4; color:#3c3c3c}
.askdrawer form .btn.primary{min-height:44px; border:0; border-radius:12px; background:#E23260; color:#fff; font:700 14px "DM Sans",sans-serif; padding:0 16px}
.askdrawer form .btn.primary:hover{background:#b3203f}
.askdrawer button:focus-visible,.askdrawer input:focus-visible{outline:3px solid #FCA9AA; outline-offset:2px}
@media (max-width:520px){.askdrawer{right:8px; left:8px; width:auto; max-width:none; bottom:calc(8px + env(safe-area-inset-bottom)); height:min(86vh,calc(100vh - 16px))}}
@media (prefers-reduced-motion: reduce){.askdrawer{animation:none}}