.genie-note{position:relative;display:flex;align-items:center;gap:clamp(12px,2vw,28px);max-width:100%;margin:16px 0 24px;padding:4px 44px 4px 8px;border-radius:22px;background:rgba(255,252,244,.55);isolation:isolate;color:#164b40}
.genie-note .genie-visual{width:clamp(120px,19vw,200px);height:clamp(115px,17vw,175px);object-fit:contain;flex:none;margin:0;aspect-ratio:auto;filter:none}
.genie-note .genie-words{font:500 clamp(17px,2.1vw,24px)/1.35 system-ui,sans-serif;max-width:520px;margin:0;text-wrap:balance;color:#164b40}
.genie-note .genie-dismiss{position:absolute;top:9px;right:8px;min-width:36px;min-height:36px;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:#526d61;font:400 22px/1 system-ui,sans-serif;display:grid;place-items:center;cursor:pointer;box-shadow:none}
.genie-note .genie-dismiss:hover{background:#dce9de;color:#143f36}
.genie-note .genie-dismiss:active{transform:scale(.95)}
.genie-note .genie-dismiss:focus-visible{outline:2px solid #a95b2a;outline-offset:2px}
.genie-empty{justify-content:center;background:#fbf4e7;margin:18px 0 0}
.genie-empty .genie-visual{width:130px;height:130px}
.genie-empty .genie-words{font-size:17px;max-width:245px}
.genie-breakfast{background:#edf0dd}
.genie-dinner{background:#f0e5ed}
.genie-beach{background:rgba(255,252,244,.45)}
@media(prefers-reduced-motion:no-preference){.genie-arrived .genie-visual{animation:genie-hello 900ms ease-out 1 both}@keyframes genie-hello{0%{transform:translateY(7px) rotate(-2deg);opacity:.65}60%{transform:translateY(-3px) rotate(1deg);opacity:1}100%{transform:translateY(0) rotate(0);opacity:1}}}
@media(max-width:480px){.genie-note{gap:8px;padding-right:36px;margin:12px 0 20px;border-radius:18px}.genie-note .genie-visual{width:112px;height:120px}.genie-note .genie-words{font-size:16px}.genie-empty .genie-visual{width:92px;height:112px}.genie-empty .genie-words{font-size:15px}}

.order-genie{display:flex;align-items:center;gap:16px;margin:18px 0;padding:15px;background:#f4e5bc;border-radius:18px;color:#164a40}.order-genie img{width:115px;height:110px;object-fit:contain;flex:0 0 115px}.order-genie p{font:600 16px/1.5 system-ui,sans-serif;margin:0}@media(max-width:480px){.order-genie{padding:12px;gap:10px}.order-genie img{width:85px;height:95px;flex-basis:85px}.order-genie p{font-size:15px}}@media(prefers-reduced-motion:no-preference){.order-genie img{animation:genie-hello .55s ease-out 1}@keyframes genie-hello{from{transform:translateY(6px) rotate(-4deg);opacity:.6}to{transform:none;opacity:1}}}