@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#49343d;background:#fff7f9;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 15% 10%,#ffe3ed 0,transparent 32%),radial-gradient(circle at 90% 90%,#f9e4ef 0,transparent 30%),#fff8fa}
button,textarea,input,select{font:inherit}
.app-shell{width:min(900px,100%);height:100dvh;min-height:600px;margin:auto;background:rgba(255,255,255,.78);display:flex;flex-direction:column;box-shadow:0 0 70px #b76c8714;border-inline:1px solid #f4e4e9}
.topbar{height:82px;padding:15px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f5e7ec;background:#ffffffb8}
.brand{display:flex;align-items:center;gap:12px}.avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;position:relative;background:linear-gradient(135deg,#f8b8ce,#d987a8);color:white;font-family:'Playfair Display';font-size:25px;box-shadow:0 5px 18px #d987a84a}.avatar span{position:absolute;font:12px sans-serif;right:-2px;bottom:0;color:#c34e7a}
h1{font:700 22px 'Playfair Display';margin:0;color:#753f58}.brand p{margin:3px 0 0;font-size:12px;color:#a17d8c}.online-dot{display:inline-block;width:7px;height:7px;background:#70bd91;border-radius:50%;margin-right:5px}
.icon-btn{border:0;background:#fff0f5;color:#9b5875;border-radius:12px;width:40px;height:40px;cursor:pointer;font-size:19px}
.welcome{text-align:center;padding:42px 20px 22px}.heart-orbit{margin:0 auto 13px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#ffedf3;color:#d86c94;font-size:26px;box-shadow:0 0 0 9px #fff5f8}.eyebrow{font-size:11px;letter-spacing:1.7px;text-transform:uppercase;color:#c07b98;font-weight:700}.welcome h2{font:700 clamp(25px,4vw,34px) 'Playfair Display';margin:8px 0;color:#77465c}.welcome>p:not(.eyebrow){font-size:14px;color:#9a7b88}.quick-prompts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:19px}.prompt{border:1px solid #f0d9e3;background:#fff;border-radius:22px;padding:9px 13px;color:#98627a;font-size:12px;cursor:pointer}.prompt:hover{background:#fff0f5}
.chat{flex:1;overflow:auto;padding:12px clamp(14px,5vw,48px) 22px;display:flex;flex-direction:column;gap:14px}.message{max-width:min(78%,600px);padding:12px 16px;border-radius:18px;line-height:1.55;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 3px 12px #8b53600a}.message.mariyah{align-self:flex-start;background:#fff0f5;border:1px solid #f7e0e9;border-bottom-left-radius:5px;color:#694657}.message.user{align-self:flex-end;background:linear-gradient(135deg,#d986a7,#bf6f92);color:white;border-bottom-right-radius:5px}.message .sender{display:block;font-size:10px;font-weight:700;letter-spacing:.5px;margin-bottom:4px;opacity:.68}
.status{min-height:20px;padding:0 28px;color:#ad8294;font-size:12px}
.composer{margin:8px 18px 12px;padding:8px;display:flex;gap:8px;align-items:flex-end;border:1px solid #f0dce5;background:#fff;border-radius:22px;box-shadow:0 8px 28px #a45b7610}.composer select{align-self:center;border:0;background:#fff6f9;color:#97617a;border-radius:12px;padding:9px 5px;font-size:11px;max-width:86px;outline:none}.composer textarea{flex:1;resize:none;border:0;outline:0;max-height:120px;padding:10px 3px;color:#553d48;background:transparent;font-size:14px}.round-btn,.send-btn{width:40px;height:40px;flex:0 0 40px;border:0;border-radius:50%;cursor:pointer}.round-btn{background:#fff0f5;color:#a55d7b;font-size:17px}.round-btn.listening{background:#d66f93;color:white;animation:pulse 1s infinite}.send-btn{background:#c87998;color:white;font-size:18px}.send-btn:disabled{opacity:.45;cursor:wait}
footer{padding:0 25px 14px;text-align:center;font-size:10px;color:#b69aa6}footer button{border:0;background:none;color:#b36d8b;text-decoration:underline;cursor:pointer;margin-left:8px}
dialog{border:0;border-radius:22px;padding:0;width:min(440px,calc(100% - 30px));box-shadow:0 20px 80px #51233738;color:#573d49}dialog::backdrop{background:#48253655;backdrop-filter:blur(3px)}.settings{padding:23px;display:grid;gap:11px}.settings-head{display:flex;justify-content:space-between;align-items:center}.settings h2{font:700 22px 'Playfair Display';color:#824d66;margin:0 0 10px}.settings label{font-size:13px;font-weight:600}.settings input[type=url]{width:100%;padding:12px;border:1px solid #ead3dd;border-radius:10px;outline-color:#d58aa6}.hint{font-size:11px;color:#9e8390;margin:0 0 8px;line-height:1.5}.toggle{display:flex;align-items:center;gap:9px;font-weight:400!important}.primary{border:0;background:#c87998;color:white;border-radius:12px;padding:12px 18px;cursor:pointer}.settings-actions{display:flex;justify-content:flex-end;margin-top:7px}
@keyframes pulse{50%{box-shadow:0 0 0 7px #d66f9330}}
@media(max-width:560px){.app-shell{min-height:100dvh}.welcome{padding-top:26px}.quick-prompts{gap:6px}.prompt{font-size:11px}.message{max-width:88%}.composer{margin-inline:10px}.composer select{max-width:68px}.topbar{padding-inline:16px}}