/* English Coffee Concierge — quiet luxury. All styles scoped. */ #ec-ai-guide{--ec-text:#fff6e9;--ec-gold:#e9c493;--ec-ink:#180c16;--ec-border:#f0d0a533;position:relative;z-index:99997;font-family:'DM Sans','Manrope',system-ui,sans-serif;color:var(--ec-text)} #ec-ai-guide *{box-sizing:border-box}#ec-ai-guide [hidden]{display:none!important} #ec-ai-guide button{font:inherit;cursor:pointer}#ec-ai-guide button:disabled{opacity:.44;cursor:not-allowed} #ec-ai-guide .ec-ai-launch{position:fixed;z-index:99997;right:24px;bottom:26px;display:flex;align-items:center;gap:12px;min-width:229px;text-align:left;border-radius:100px;border:1px solid #ffdfb77e;background:linear-gradient(117deg,#351826ef,#25121deF);box-shadow:0 16px 55px #09030a9c,0 0 0 1px #fff6e20b inset;padding:9px 17px 9px 10px;color:#fff8f0;backdrop-filter:blur(22px);transition:transform .2s,border-color .3s,box-shadow .3s} #ec-ai-guide .ec-ai-launch:hover{transform:translateY(-4px);border-color:#ffdbab;box-shadow:0 21px 60px #08050bc9,0 0 30px #dca87328} #ec-ai-guide .ec-ai-orb{width:47px;height:47px;flex:0 0 47px;border-radius:50%;display:flex;justify-content:center;align-items:center;gap:3px;background:radial-gradient(circle at 40% 24%,#e7bc93,#8b5362 47%,#3b1d32 82%);border:1px solid #ffe1b79c;box-shadow:0 0 30px #f3ad732e} #ec-ai-guide .ec-ai-orb i{width:2.6px;height:10px;background:#fff4e8;display:block;border-radius:4px;animation:ec-ai-meter 1.5s ease-in-out infinite alternate}#ec-ai-guide .ec-ai-orb i:nth-child(2){height:22px;animation-delay:.2s}#ec-ai-guide .ec-ai-orb i:nth-child(3){height:16px;animation-delay:.65s}#ec-ai-guide .ec-ai-orb i:nth-child(4){height:8px;animation-delay:.35s} @keyframes ec-ai-meter{to{transform:scaleY(.48);opacity:.7}} #ec-ai-guide .ec-ai-launch-text{font-size:12px;font-weight:750;letter-spacing:.01em;line-height:1.3}#ec-ai-guide .ec-ai-launch-text small{display:block;color:#d5b8b3;font-size:9px;font-weight:500;margin-top:3px}#ec-ai-guide .ec-ai-launch-chevron{margin-left:auto;color:var(--ec-gold);font-size:16px} #ec-ai-guide .ec-ai-launch[aria-expanded="true"]{opacity:0;pointer-events:none} #ec-ai-guide .ec-ai-panel{position:fixed;z-index:99999;right:20px;bottom:22px;width:min(432px,calc(100vw - 24px));height:min(730px,calc(100dvh - 34px));max-height:calc(100vh - 34px);display:flex;flex-direction:column;overflow:hidden;border:1px solid #edc7a05e;border-radius:24px;background:linear-gradient(160deg,rgba(48,20,39,.975),rgba(23,11,21,.993) 48%,rgba(37,14,31,.99));box-shadow:0 30px 110px #05030add,0 0 0 1px #ffffff0e inset;backdrop-filter:blur(25px)} #ec-ai-guide .ec-ai-head{flex:0 0 auto;display:flex;align-items:center;gap:11px;padding:16px 18px;background:linear-gradient(118deg,#52304368,#26142030);border-bottom:1px solid #e6ba9230} #ec-ai-guide .ec-ai-emblem{width:44px;height:44px;display:grid;place-items:center;color:#f2cda1;background:#f6d2a613;border-radius:14px} #ec-ai-guide .ec-ai-title{flex:1;min-width:0}#ec-ai-guide .ec-ai-title strong{display:block;font-size:14px;font-weight:750;letter-spacing:.01em}#ec-ai-guide .ec-ai-title small{display:flex;align-items:center;gap:7px;font-size:10px;color:#e5c7bd;margin-top:5px} #ec-ai-guide .ec-ai-online-dot{height:6px;width:6px;border-radius:50%;background:#c6dfa8;box-shadow:0 0 12px #b6d09baa} #ec-ai-guide .ec-ai-icon{border:1px solid #f1d1af33;color:#f9e0cc;background:#ffffff08;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;font-size:23px} #ec-ai-guide .ec-ai-welcome{position:relative;flex:0 0 auto;padding:18px 22px 16px;overflow:hidden;background:radial-gradient(circle at 90% 44%,rgba(218,160,118,.15),transparent 38%),linear-gradient(135deg,#4b263775,#27122011);border-bottom:1px solid #e9bfa321} #ec-ai-guide .ec-ai-overline{font-size:9px;color:#ecc69d;letter-spacing:.17em;font-weight:800} #ec-ai-guide .ec-ai-welcome h3{font-family:'Playfair Display',Georgia,serif;font-size:28px;line-height:1.03;letter-spacing:-.025em;margin:9px 0 10px;font-weight:600;color:#fff4e8} #ec-ai-guide .ec-ai-welcome h3 em{color:#f1c495;font-weight:500} #ec-ai-guide .ec-ai-welcome p{font-size:10px;line-height:1.55;color:#e1c2bb;max-width:275px;margin:0} #ec-ai-guide .ec-ai-soundline{position:absolute;bottom:32px;right:20px;height:45px;display:flex;align-items:center;gap:4px;opacity:.55} #ec-ai-guide .ec-ai-soundline i{display:block;background:linear-gradient(#f8d9a4,#b66e79);width:3px;height:13px;border-radius:6px;animation:ec-sound-wave 1.3s ease-in-out infinite alternate} #ec-ai-guide .ec-ai-soundline i:nth-child(2){height:30px;animation-delay:-.8s}#ec-ai-guide .ec-ai-soundline i:nth-child(3){height:18px;animation-delay:-.3s}#ec-ai-guide .ec-ai-soundline i:nth-child(4){height:40px;animation-delay:-1.1s}#ec-ai-guide .ec-ai-soundline i:nth-child(5){height:24px;animation-delay:-.4s}#ec-ai-guide .ec-ai-soundline i:nth-child(6){height:12px;animation-delay:-.7s}#ec-ai-guide .ec-ai-soundline i:nth-child(7){height:23px;animation-delay:-.9s} @keyframes ec-sound-wave{to{transform:scaleY(.28);opacity:.55}} #ec-ai-guide[data-mood="listening"] .ec-ai-soundline,#ec-ai-guide.ec-ai-is-speaking .ec-ai-soundline{opacity:1} #ec-ai-guide .ec-ai-tools{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:9px 14px;background:#190c18a3;border-bottom:1px solid #f0c99f21;flex:0 0 auto} #ec-ai-guide .ec-ai-language{display:flex;align-items:center;gap:3px;padding:3px;background:#fff4dc0a;border:1px solid #f5d3a427;border-radius:20px} #ec-ai-guide .ec-ai-language button{border:0;background:transparent;padding:5px 7px;font-size:9px;color:#dbc0ba;border-radius:18px} #ec-ai-guide .ec-ai-language button.ec-ai-active{color:#30151e;background:#ebc798;font-weight:800} #ec-ai-guide .ec-ai-barista{flex:0 0 auto;border:1px solid #e9bc8f4e;border-radius:30px;padding:9px 10px;background:#c9976811;color:#fae0c8;font-size:10px;font-weight:700;white-space:nowrap} #ec-ai-guide .ec-ai-barista:hover{background:#edc18e24} #ec-ai-guide .ec-ai-messages{flex:1;overflow:auto;min-height:95px;scrollbar-width:thin;scrollbar-color:#d7aa8060 transparent;padding:16px 16px 12px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth} #ec-ai-guide .ec-ai-message{font-size:12px;line-height:1.72;border-radius:15px;padding:12px 13px;max-width:93%;white-space:pre-wrap;overflow-wrap:anywhere} #ec-ai-guide .ec-ai-bot{align-self:flex-start;background:#f0c9a416;border:1px solid #f0d2a82f;border-bottom-left-radius:5px;color:#fff0e2} #ec-ai-guide .ec-ai-user{align-self:flex-end;background:#e9bf8d;color:#2b1520;border-bottom-right-radius:5px;font-weight:650} #ec-ai-guide .ec-ai-picks{display:flex;align-self:flex-start;max-width:98%;gap:6px;flex-wrap:wrap} #ec-ai-guide .ec-ai-pick{display:flex;align-items:center;gap:8px;border:1px solid #f1caa85c;border-radius:11px;background:#b78a6830;padding:7px 9px;color:#f8ebdc;font-size:10px;text-align:left} #ec-ai-guide .ec-ai-pick strong{white-space:nowrap;color:#f1c18b;font-size:10px} #ec-ai-guide .ec-ai-chips{flex:0 0 auto;display:flex;gap:7px;overflow:auto;padding:11px 14px 8px;scrollbar-width:none} #ec-ai-guide .ec-ai-chips button{white-space:nowrap;font-size:10px;color:#f6d8bd;padding:8px 10px;background:#ffdec314;border:1px solid #e9c09837;border-radius:30px} #ec-ai-guide .ec-ai-chips button:hover{border-color:#f6dab4} #ec-ai-guide .ec-ai-voice-note{padding:3px 16px 5px;color:#bba69f;font-size:9px;line-height:1.3;flex:0 0 auto} #ec-ai-guide .ec-ai-form{display:flex;align-items:center;gap:5px;flex:0 0 auto;padding:6px 11px} #ec-ai-guide .ec-ai-form input{min-width:0;flex:1;outline:0;border:1px solid #efd1aa42;border-radius:14px;color:#fff4e8;background:#f6d7c30d;font:inherit;font-size:12px;padding:13px 10px} #ec-ai-guide .ec-ai-form input::placeholder{color:#baa19e}#ec-ai-guide .ec-ai-form input:focus{border-color:#ffd4a6;box-shadow:0 0 0 3px #e8c39712} #ec-ai-guide .ec-ai-form button{flex:0 0 auto;width:38px;height:42px;border-radius:12px;display:grid;place-items:center} #ec-ai-guide .ec-ai-mic{border:1px solid #c9ad9a62;color:#f6d6b5;background:#eed3bb17;font-size:21px} #ec-ai-guide .ec-ai-mic.ec-ai-recording{color:#fff;background:#ac425d;box-shadow:0 0 0 5px #dc53741b;animation:ec-ai-mic-pulse .9s infinite alternate} @keyframes ec-ai-mic-pulse{to{box-shadow:0 0 0 9px #dc53740c}} #ec-ai-guide .ec-ai-send{border:0;color:#25101c;background:linear-gradient(130deg,#f7d7a6,#e4ad80);font-size:18px} #ec-ai-guide .ec-ai-foot{display:flex;align-items:center;justify-content:space-between;gap:7px;flex:0 0 auto;padding:4px 13px 12px;color:#b89b9d;font-size:9px} #ec-ai-guide .ec-ai-listen{border:0;background:none;padding:4px 0;color:#efd3aa;font-size:10px;font-weight:700} #ec-ai-guide .ec-ai-listen[aria-pressed="true"]{color:#bdeab9} #ec-ai-guide .ec-ai-audio-hint{font-size:10px;opacity:.68;padding-top:6px} #ec-ai-guide .ec-ai-replay{display:block;margin-top:9px;font-size:10px;color:#f8d6b5;background:#d6a78014;border:1px solid #edc19842;border-radius:16px;padding:5px 8px} #ec-ai-guide .ec-ai-visually-hidden{position:absolute!important;clip:rect(0,0,0,0);height:1px;width:1px;overflow:hidden} #ec-ai-guide .ec-ai-story-modal{position:fixed;z-index:1000000;inset:0;background:#08040aeb;display:grid;place-items:center;padding:16px} #ec-ai-guide .ec-ai-story-box{position:relative;width:min(600px,94vw);overflow:hidden;border-radius:18px;border:1px solid #e4bd9952;box-shadow:0 35px 130px #020104;background:#180a16} #ec-ai-guide .ec-ai-story-head{padding:15px 16px;background:#311628;display:flex;flex-direction:column;gap:3px} #ec-ai-guide .ec-ai-story-head strong{font-family:'Playfair Display',serif;font-size:22px;font-weight:600} #ec-ai-guide .ec-ai-story-head span{font-size:10px;color:#e8c1a4} #ec-ai-guide #ecAiStoryClose{position:absolute;top:12px;right:12px;border:1px solid #fff4;color:#fff;background:#170917d9;border-radius:50%;font-size:22px;width:35px;height:35px;z-index:4} #ec-ai-guide .ec-ai-story-box video{display:block;width:100%;max-height:72vh;background:#000} #ec-ai-guide button:focus-visible,#ec-ai-guide input:focus-visible{outline:2px solid #f9dcb0;outline-offset:3px} @media(max-width:650px){ #ec-ai-guide .ec-ai-launch{right:12px;bottom:72px;min-width:180px;padding:7px 12px 7px 7px} #ec-ai-guide .ec-ai-orb{width:42px;height:42px;flex-basis:42px} #ec-ai-guide .ec-ai-launch-text{font-size:10px}#ec-ai-guide .ec-ai-launch-text small{font-size:8px} #ec-ai-guide .ec-ai-panel{right:8px;bottom:8px;width:calc(100vw - 16px);height:min(675px,calc(100dvh - 16px));border-radius:20px} #ec-ai-guide .ec-ai-welcome{padding:13px 17px 12px}#ec-ai-guide .ec-ai-welcome h3{font-size:23px}#ec-ai-guide .ec-ai-welcome p{font-size:9px} #ec-ai-guide .ec-ai-soundline{height:31px;bottom:22px;right:16px} #ec-ai-guide .ec-ai-language button{font-size:8px;padding:5px 6px}#ec-ai-guide .ec-ai-barista{font-size:9px;padding:8px} #ec-ai-guide .ec-ai-title strong{font-size:12px} #ec-ai-guide .ec-ai-messages{padding:12px;gap:8px} #ec-ai-guide .ec-ai-message{font-size:12px;padding:9px 11px} } @media(prefers-reduced-motion:reduce){#ec-ai-guide *{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* v1.5 Realtime voice: optional five-minute continuous call, no voice note UI. */ #ec-ai-guide .ec-live-panel{flex:0 0 auto;padding:11px 13px 12px;border-top:1px solid #ecd0ae27;background:linear-gradient(120deg,#37213495,#241320de);display:flex;flex-direction:column;gap:8px} #ec-ai-guide .ec-live-bar{display:flex;align-items:center;gap:8px;font-size:10px;color:#e6cbbc} #ec-ai-guide .ec-live-bar strong{font-weight:700;min-width:0;flex:1;line-height:1.35} #ec-ai-guide .ec-live-bar #ecLiveTimer{font-size:10px;min-width:35px;color:#d8b9a5;text-align:right;font-variant-numeric:tabular-nums} #ec-ai-guide .ec-live-dot{width:8px;height:8px;border-radius:50%;background:#9ab58c;box-shadow:0 0 10px #9ab58c60;flex:0 0 auto} #ec-ai-guide.ec-live-active .ec-live-dot{background:#e7bb80;box-shadow:0 0 12px #e8b884ab;animation:ec-live-pulse 1.2s infinite alternate} @keyframes ec-live-pulse{to{opacity:.35;transform:scale(.82)}} #ec-ai-guide .ec-live-start{border:1px solid #ffe6bf8a;border-radius:14px;padding:13px;background:linear-gradient(135deg,#f0d0a0,#e3b47f);color:#311526;font-size:12px;font-weight:800;box-shadow:0 7px 25px #09050762;letter-spacing:.01em} #ec-ai-guide .ec-live-start:focus-visible{outline:2px solid #fff8e7;outline-offset:2px} #ec-ai-guide .ec-live-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap} #ec-ai-guide .ec-live-controls button{flex:1 1 30%;border:1px solid #f1caa762;border-radius:11px;padding:10px 4px;font-size:10px;font-weight:750;color:#fbe7d2;background:#edc09717;min-width:0;white-space:nowrap} #ec-ai-guide .ec-live-controls .ec-live-end{border-color:#f6b4a378;background:#c3515835;color:#fff3e8} #ec-ai-guide .ec-live-controls button[aria-pressed="true"]{border-color:#e6c28a;background:#e6bd8040} #ec-ai-guide .ec-live-help{margin:0;color:#c7aaa8;font-size:9px;line-height:1.4} #ec-ai-guide .ec-ai-foot{padding-top:6px;padding-bottom:9px;display:block;text-align:center} #ec-ai-guide .ec-ai-form{padding-top:7px} #ec-ai-guide .ec-ai-voice-note{color:#d1b5a8;font-size:9px;padding-top:4px} @media(max-width:650px){#ec-ai-guide .ec-live-panel{padding:9px 11px}#ec-ai-guide .ec-live-help{font-size:8px}#ec-ai-guide .ec-live-start{padding:11px}#ec-ai-guide .ec-live-controls button{font-size:9px}} /* v1.6 — Barista AI high-contrast floating identity (avoid blending with burgundy site). */ #ec-ai-guide .ec-ai-launch{border:1.5px solid #9debdc;background:linear-gradient(125deg,rgba(12,48,51,.97),rgba(17,32,38,.98));box-shadow:0 14px 54px rgba(1,14,22,.72),0 0 0 3px rgba(143,241,218,.10),inset 0 1px 0 rgba(230,255,251,.18);color:#f4fffa} #ec-ai-guide .ec-ai-launch:hover{border-color:#d6fff5;box-shadow:0 18px 58px rgba(1,14,22,.78),0 0 29px rgba(103,235,202,.38);transform:translateY(-4px)} #ec-ai-guide .ec-ai-orb{background:linear-gradient(135deg,#e8fff8 0%,#9cf0d9 50%,#4fc0b4 100%);border:2px solid #e4fff8;box-shadow:0 0 0 4px rgba(34,119,114,.28),0 0 27px rgba(119,241,211,.46)} #ec-ai-guide .ec-ai-orb i{background:#073e43;box-shadow:0 0 2px rgba(0,69,67,.22)} #ec-ai-guide .ec-ai-launch-text small{color:#b5e7db} #ec-ai-guide .ec-ai-launch-chevron{color:#b1ffee} #ec-ai-guide .ec-ai-emblem{background:linear-gradient(140deg,#d8fff1,#78d8c8);color:#084349;border:1px solid #e1fff6;box-shadow:0 6px 23px rgba(96,239,205,.18)} #ec-ai-guide .ec-ai-emblem svg{filter:drop-shadow(0 0 1px #95ecdf)} #ec-ai-guide .ec-ai-title strong{color:#f2fff9} #ec-ai-guide .ec-ai-title .ec-ai-online-dot{background:#86efc9} /* Barista AI v1.7 — stable iPhone keyboard layout and compact conversation mode. */ @media(max-width:650px){ #ec-ai-guide .ec-ai-panel{ position:fixed!important;left:6px!important;right:6px!important;top:var(--ec-chat-top,8px)!important; bottom:auto!important;width:calc(100vw - 12px)!important; height:var(--ec-chat-height,calc(100dvh - 16px))!important; max-height:var(--ec-chat-height,calc(100dvh - 16px))!important; border-radius:18px!important;overscroll-behavior:contain; } #ec-ai-guide .ec-ai-form input{font-size:16px!important;line-height:1.25;min-height:44px;-webkit-appearance:none;} #ec-ai-guide .ec-ai-messages{min-height:0;flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;} #ec-ai-guide.ec-keyboard-open .ec-ai-welcome, #ec-ai-guide.ec-keyboard-open .ec-ai-chips, #ec-ai-guide.ec-keyboard-open .ec-ai-voice-note, #ec-ai-guide.ec-keyboard-open .ec-live-panel, #ec-ai-guide.ec-keyboard-open .ec-ai-foot{display:none!important;} #ec-ai-guide.ec-keyboard-open .ec-ai-head{padding:8px 13px;} #ec-ai-guide.ec-keyboard-open .ec-ai-emblem{width:34px;height:34px;} #ec-ai-guide.ec-keyboard-open .ec-ai-emblem svg{width:32px;height:32px;} #ec-ai-guide.ec-keyboard-open .ec-ai-tools{padding:5px 9px;} #ec-ai-guide.ec-keyboard-open .ec-ai-form{padding:8px;border-top:1px solid rgba(255,220,180,.2);background:#24131e;} #ec-ai-guide.ec-keyboard-open .ec-ai-messages{padding:9px 12px;} #ec-ai-guide .ec-ai-story-modal{padding:8px;} } @media (max-height:480px) and (max-width:900px){ #ec-ai-guide .ec-ai-welcome{display:none!important;} #ec-ai-guide .ec-ai-messages{min-height:30px;} } /* v1.7.5 — safe-area aware, keyboard-first iPhone chat layout. No changes to desktop palette, original header or message styling. */ @media (max-width:650px){ html.ec-ai-open, html.ec-ai-open body {overscroll-behavior:none;} #ec-ai-guide .ec-ai-panel{ left:4px!important;right:4px!important;top:var(--ec-chat-top,4px)!important; bottom:auto!important;width:calc(100vw - 8px)!important; height:var(--ec-chat-height,calc(100dvh - 8px))!important; max-height:var(--ec-chat-height,calc(100dvh - 8px))!important; display:flex!important;flex-direction:column;min-height:0!important; border-radius:15px!important;overflow:hidden;overscroll-behavior:contain; } #ec-ai-guide .ec-ai-panel[hidden]{display:none!important} #ec-ai-guide .ec-ai-messages{min-height:0!important;flex:1 1 0!important;overflow-y:auto!important;scroll-behavior:auto!important;} #ec-ai-guide .ec-ai-form {min-height:63px;flex-shrink:0!important;padding:7px 10px 10px!important;} #ec-ai-guide .ec-ai-form input{font-size:16px!important;height:46px;max-height:52px!important;} #ec-ai-guide .ec-ai-head{padding:10px 12px;} #ec-ai-guide .ec-live-panel{flex-shrink:0;} #ec-ai-guide.ec-typing .ec-ai-welcome, #ec-ai-guide.ec-typing .ec-ai-chips, #ec-ai-guide.ec-typing .ec-ai-voice-note, #ec-ai-guide.ec-typing .ec-ai-tools, #ec-ai-guide.ec-typing .ec-live-panel, #ec-ai-guide.ec-typing .ec-ai-foot{display:none!important} #ec-ai-guide.ec-typing .ec-ai-head{padding:7px 11px;} #ec-ai-guide.ec-typing .ec-ai-emblem{width:32px;height:32px;} #ec-ai-guide.ec-typing .ec-ai-emblem svg{width:30px;height:30px;} #ec-ai-guide.ec-typing .ec-ai-messages{padding:8px 11px!important;} #ec-ai-guide.ec-typing .ec-ai-form{background:#24131e;border-top:1px solid rgba(255,220,180,.2)} }