/* ask.sugitofamily.com — "Ask about our money". Girly pastel look to match Angela's Home (blush, lavender, peach, mint).
   Self-hosted Quicksand + Nunito, hearts/sparkles are SVG files (CSP blocks inline data images). No external requests. */
@font-face{font-family:"Quicksand";font-weight:500 700;font-style:normal;font-display:swap;src:url(/fonts/quicksand.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:500 800;font-style:normal;font-display:swap;src:url(/fonts/nunito.woff2) format("woff2")}
:root{color-scheme:light;--plum:#3a1f44;--plum2:#5b3a68;--pink:#c23a73;--pink-d:#f0669a;--blush:#fff1f6;--lav:#f1eaff}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:#fff1f6}
body{min-height:100vh;min-height:100dvh;position:relative;overflow-x:hidden;background:#fff1f6;font-family:"Nunito",ui-sans-serif,system-ui,-apple-system,sans-serif;color:var(--plum);-webkit-font-smoothing:antialiased;touch-action:manipulation}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{cursor:pointer;border:0;background:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- pastel backdrop with dots + floating hearts and sparkles */
.bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0;background:linear-gradient(160deg,#fff1f6 0%,#f6edff 50%,#e8f8f1 100%)}
.bg .dots{position:absolute;inset:0;background-image:radial-gradient(rgba(240,102,154,.17) 1.4px,transparent 1.7px);background-size:28px 28px}
.bg .gl{position:absolute;inset:0;background:radial-gradient(900px 520px at 88% -10%,rgba(255,255,255,.95),transparent 70%),radial-gradient(760px 520px at 0% 110%,rgba(215,198,255,.55),transparent 70%),radial-gradient(520px 380px at 100% 100%,rgba(255,214,230,.6),transparent 70%)}
.d{position:absolute;display:block;width:26px;height:26px;opacity:.8;background:no-repeat center/contain}
.hp,.d.hp{background-image:url(/heart-pink.svg?v=2)}.hl{background-image:url(/heart-lav.svg?v=2)}.hpe{background-image:url(/heart-peach.svg?v=2)}
.sw{background-image:url(/sparkle-white.svg?v=2)}.sl{background-image:url(/sparkle-lav.svg?v=2)}.sp{background-image:url(/sparkle-pink.svg?v=2)}
.d.hl,.d.sl{width:30px;height:30px}.d.sw{width:22px;height:22px}
/* decoration positions (classes, not inline styles: CSP) */
.d.p1{left:6%;top:5%;--d:0s}.d.p2{left:88%;top:4%;--d:1.2s}.d.p3{left:94%;top:30%;--d:2.1s}.d.p4{left:3%;top:38%;--d:1.7s}.d.p5{left:90%;top:62%;--d:0.6s}.d.p6{left:5%;top:70%;--d:2.4s}.d.p7{left:80%;top:92%;--d:0.9s}.d.p8{left:14%;top:93%;--d:1.5s}
@media(prefers-reduced-motion:no-preference){.d{animation:floaty 7s ease-in-out infinite alternate;animation-delay:var(--d)}}
@keyframes floaty{from{transform:translateY(0) rotate(-7deg)}to{transform:translateY(-12px) rotate(7deg)}}

/* ---- page: title on top, chat fills the rest */
.wrap{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px;height:100vh;height:100dvh;max-width:920px;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
h1{flex:none;display:flex;align-items:center;justify-content:center;gap:12px;text-align:center;font-family:"Quicksand","Nunito",system-ui,sans-serif;font-weight:700;font-size:clamp(25px,6.4vw,44px);letter-spacing:-.02em;line-height:1.1;color:var(--plum)}
h1 .logo{flex:none;width:46px;height:46px;border-radius:16px;background:url(/heart-white.svg?v=2) no-repeat center/56%,linear-gradient(145deg,#ffa3c8,#f0669a);border:2px solid rgba(255,255,255,.85);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 10px 18px -8px rgba(214,69,127,.6)}
h1 .h1deco{flex:none;display:inline-flex;align-items:flex-start;gap:3px}
h1 .h1deco i{display:block;width:20px;height:20px;background:no-repeat center/contain}
h1 .h1deco i.sp{background-image:url(/sparkle-pink.svg?v=2)}
h1 .h1deco i.hp{width:15px;height:15px;margin-top:10px;background-image:url(/heart-pink.svg?v=2)}

/* ---- chat card */
.chat{flex:1;min-height:0;display:flex;flex-direction:column;padding:16px 14px 14px;border-radius:40px;background:rgba(255,255,255,.62);border:2px solid rgba(255,255,255,.95);box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 26px 44px -26px rgba(214,69,127,.5)}
.msgs{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px;padding:4px 4px 12px;scroll-behavior:smooth}
.bubble{max-width:88%;padding:13px 18px;border-radius:26px;font-size:18px;font-weight:600;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap;color:var(--plum);box-shadow:0 12px 20px -16px rgba(214,69,127,.6)}
.bubble p{margin:0}
.bubble.bot{align-self:flex-start;background:#f1eaff;border:2px solid #fff;border-bottom-left-radius:8px}
.bubble.me{align-self:flex-end;background:linear-gradient(145deg,#ffc2da,#ff9cc2);border:2px solid rgba(255,255,255,.85);border-bottom-right-radius:8px}
.bubble.err{align-self:flex-start;background:#ffe1e1;border:2px solid #fff;color:#7a1414;border-bottom-left-radius:8px}
.bubble.wait{display:inline-flex;align-items:center;gap:10px;color:var(--plum2)}
.note{align-self:center;max-width:94%;text-align:center;font-weight:700;font-size:15px;line-height:1.35;color:var(--plum2);background:rgba(255,255,255,.85);border:2px solid #fff;border-radius:999px;padding:8px 16px}
.dots3{display:inline-flex;gap:5px}
.dots3 i{width:10px;height:10px;border-radius:50%;background:var(--pink-d);opacity:.35;animation:pulse 1.1s infinite ease-in-out}
.dots3 i:nth-child(2){animation-delay:.18s}.dots3 i:nth-child(3){animation-delay:.36s}
@keyframes pulse{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}

.composer{flex:none;display:flex;gap:10px;align-items:stretch;padding-top:12px}
.composer input{flex:1;min-width:0;height:58px;padding:0 22px;font-size:18px;/* 16px+ stops iOS zooming in */font-weight:600;color:var(--plum);background:#fff;border:2px solid #ffd0e2;border-radius:999px;outline:none}
.composer input::placeholder{color:#7a5a86;font-weight:600}
.composer input:focus{border-color:var(--pink-d);box-shadow:0 0 0 4px rgba(240,102,154,.25)}
.composer button{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:58px;height:58px;padding:0 24px;border-radius:999px;background:linear-gradient(145deg,#ffa3c8,#f0669a);border:2px solid rgba(255,255,255,.85);color:var(--plum);font-family:"Quicksand","Nunito",sans-serif;font-weight:700;font-size:18px;box-shadow:0 14px 24px -14px rgba(214,69,127,.75),0 1px 0 rgba(255,255,255,.5) inset}
.sendheart{display:block;width:22px;height:22px;background:url(/heart-white.svg?v=2) no-repeat center/contain;filter:drop-shadow(0 1px 1px rgba(150,40,90,.35))}
.composer button:active{transform:scale(.96)}
.composer button:disabled{opacity:.6;cursor:default}
.composer button:focus-visible{outline:3px solid var(--plum);outline-offset:2px}

/* hover styles only for real hover pointers (iOS treats a first tap as hover otherwise) */
@media (hover:hover) and (pointer:fine){
  .composer button:not(:disabled):hover{filter:brightness(1.06);transform:translateY(-2px)}
  .login button:hover{filter:brightness(1.06)}
}

/* ---- phones: bigger touch, tighter card, heart-only send button */
@media(max-width:600px){
  .wrap{gap:10px}
  h1{font-size:clamp(23px,6.6vw,30px);gap:9px}
  h1 .logo{width:40px;height:40px;border-radius:14px}
  h1 .h1deco i{width:17px;height:17px}h1 .h1deco i.hp{width:13px;height:13px;margin-top:8px}
  .chat{border-radius:34px;padding:12px 10px 10px}
  .bubble{max-width:94%;padding:12px 16px}
  .composer input{padding:0 18px}
  .btn-label{display:none}
  .composer button{width:58px;padding:0}
}
@media(max-width:340px){h1 .h1deco,h1 .logo{display:none}}

/* ---- sign-in page (same pastel look) */
body.loginpage{display:grid;place-items:center;padding:24px}
.login{position:relative;z-index:2;width:100%;max-width:420px}
.login form{background:#ffe2ee;border:2px solid #fff;border-radius:44px;padding:34px 28px;box-shadow:0 28px 46px -28px rgba(214,69,127,.5);display:flex;flex-direction:column;gap:10px}
.login .logo{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:url(/heart-white.svg?v=2) no-repeat center/56%,linear-gradient(145deg,#ffa3c8,#f0669a);border:2px solid rgba(255,255,255,.85);box-shadow:0 12px 20px -10px rgba(214,69,127,.6)}
.login h1{justify-content:flex-start;text-align:left;font-size:30px;white-space:normal}
.login .sub{margin:0 0 8px;font-weight:600;color:var(--plum2)}
.login label{font-weight:700;font-size:15px;color:var(--plum2)}
.login input{height:56px;padding:0 18px;font-size:18px;font-weight:600;color:var(--plum);background:#fff;border:2px solid #fff;border-radius:999px;outline:none}
.login input:focus{box-shadow:0 0 0 3px var(--pink-d)}
.login button{min-height:56px;border-radius:999px;background:linear-gradient(145deg,#ff9cc2,#f0669a);border:2px solid rgba(255,255,255,.85);color:var(--plum);font-family:"Quicksand","Nunito",sans-serif;font-weight:700;font-size:18px;margin-top:6px;box-shadow:0 14px 24px -14px rgba(214,69,127,.7)}
.login button:active{transform:scale(.98)}
.login .err{color:#a3121f;font-weight:700;font-size:15px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.clearbtn{display:block;margin:10px auto 0;min-height:44px;min-width:44px;padding:0 20px;border:2px solid #fff;border-radius:999px;background:rgba(255,255,255,.9);font:inherit;font-weight:800;font-size:16px;color:var(--plum2);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.clearbtn[hidden]{display:none}
.clearbtn:focus-visible{outline:3px solid #3a1f44;outline-offset:2px}
@media(hover:hover) and (pointer:fine){.clearbtn:hover{filter:brightness(1.06)}}