@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:light;--acid:#e8ff57;--ink:#181818;--paper:#fffef6;--pink:#ff90cc}
*{box-sizing:border-box}
body{margin:0;background:var(--acid);color:var(--ink);font-family:'Space Grotesk',Arial,sans-serif;min-height:100svh}
header{max-width:1320px;margin:auto;padding:28px 36px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.brand{color:inherit;text-decoration:none;font-size:15px;font-weight:700;letter-spacing:-.6px}.brand span{font-weight:400}
.edition{font-size:12px;transform:rotate(2deg)}
main{max-width:1100px;margin:12px auto 0;padding:0 32px 36px}
.intro{position:relative;margin-bottom:28px}
h1{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;font-weight:900;font-size:clamp(58px,9.2vw,122px);line-height:.9;letter-spacing:-.035em;margin:0;padding:10px 0 14px}
.punch{display:inline-block;background:var(--pink);padding:0 .06em .04em;transform:rotate(-3deg);transform-origin:center;animation:arrive .65s cubic-bezier(.2,.9,.3,1.15) both}
.intro p{position:absolute;right:4px;bottom:2px;font-size:21px;letter-spacing:-1px;transform:rotate(5deg);margin:0}
.chat{background:var(--paper);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);max-width:800px;margin:0 0 0 auto;transform:rotate(.5deg)}
.chat-header{padding:13px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--ink)}
.chat-header strong{font-size:13px;letter-spacing:1px}
button,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}
#reset{border:0;background:none;font-size:11px;text-decoration:underline;text-underline-offset:3px;padding:5px;color:var(--ink)}
#messages{height:clamp(190px,28svh,300px);overflow:auto;overscroll-behavior:contain;padding:20px;display:flex;flex-direction:column;gap:16px;scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
.message{max-width:85%;font-size:16px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;padding:14px 17px;border:1.5px solid var(--ink);background:var(--acid);align-self:flex-start;animation:message-in .2s ease-out}
.message.user{align-self:flex-end;background:var(--ink);color:var(--paper)}
.message:first-child{border:0;background:transparent;padding:4px 0;font-size:clamp(20px,2.5vw,26px);font-weight:500;letter-spacing:-.8px;max-width:500px;line-height:1.25}
form{display:flex;margin:0 16px;border:2px solid var(--ink);align-items:stretch;background:white}
textarea{display:block;resize:none;flex:1;width:0;min-height:58px;max-height:140px;border:0;border-radius:0;padding:17px 12px;color:var(--ink);background:transparent;font-size:16px;line-height:22px}
textarea::placeholder{color:#5a5a51;opacity:1}textarea:focus{outline:0}
form:focus-within{box-shadow:0 0 0 3px var(--pink)}
#send{border:0;border-left:2px solid var(--ink);border-radius:0;background:var(--pink);padding:0 21px;font-weight:700;font-size:15px;color:var(--ink);transition:background .15s}
#send:hover:not(:disabled){background:var(--acid)}
#status{min-height:15px;margin:8px 18px 10px;font-size:11px;line-height:1.4}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
button:focus-visible,a:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
@keyframes arrive{from{opacity:0;transform:translateY(-24px) rotate(9deg)}to{opacity:1;transform:translateY(0) rotate(-3deg)}}
@keyframes message-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1000px){main{padding-top:10px}.chat{margin-top:-4px}.intro p{right:0;bottom:20px}}
@media(max-width:650px){header{padding:22px 18px}.brand{font-size:12px}.edition{font-size:9px;max-width:100px;text-align:right}main{margin:18px auto 0;padding:0 16px 24px}h1{font-size:clamp(50px,12.5vw,81px);letter-spacing:-.03em;line-height:.94}.intro{margin-bottom:26px}.intro p{position:static;text-align:right;font-size:16px;margin:8px 6px 0}.chat{transform:none;box-shadow:5px 5px 0 var(--ink)}.chat-header{padding:10px 14px}#messages{padding:16px;height:clamp(210px,32svh,330px)}.message{font-size:15px;max-width:91%;padding:11px 13px}.message:first-child{font-size:23px}form{margin:0 10px}textarea{padding:15px 10px;min-height:54px}#send{padding:0 12px;font-size:13px}#status{margin-left:12px;margin-right:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Let the conversation use the remaining screen, including on tall phones. */
body{height:100dvh;min-height:100dvh;display:flex;flex-direction:column}
header{width:100%;margin:0 auto;flex-shrink:0}
main{width:100%;flex:1;min-height:0;display:flex;flex-direction:column;padding-bottom:max(16px,env(safe-area-inset-bottom))}
.intro{flex-shrink:0}
.chat{width:100%;flex:1;min-height:240px;display:flex;flex-direction:column}
.chat-header,form,#status{flex-shrink:0}
#messages{height:0;min-height:100px;flex:1}
.message{flex-shrink:0}
.message a:has(.chat-photo){display:block;margin-top:12px;white-space:normal}
.chat-photo{display:block;width:100%;max-width:360px;max-height:420px;object-fit:contain;border-radius:8px;background:var(--paper)}
.whatsapp-link{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.photo-tools{flex-shrink:0;margin:5px 16px 0}
#attach-photo,#remove-photo{border:0;background:none;color:var(--ink);font-size:11px;padding:4px;text-decoration:underline;text-underline-offset:3px}
#attachment:not([hidden]){display:flex;align-items:center;gap:10px;margin:0 12px 8px;flex-shrink:0;font-size:12px}
#attachment-preview{width:48px;height:48px;object-fit:cover;border:1px solid var(--ink)}
#attachment small{font-size:10px}#remove-photo{margin-left:auto}
.keyboard-open .photo-tools{margin-bottom:6px}
#starters{display:flex;flex-wrap:wrap;gap:8px;flex-shrink:0;padding-bottom:2px}
#starters button{border:1.5px solid var(--ink);border-radius:12px;background:var(--paper);color:var(--ink);text-align:left;padding:9px 11px;font-size:13px;line-height:1.35;max-width:100%}
#starters button:hover{background:var(--pink)}

/* Fit the visible space above the mobile keyboard without a scrollable tail. */
html.keyboard-open{overflow:hidden;overscroll-behavior:none}
.keyboard-open body{position:fixed;top:var(--keyboard-top,0px);left:0;width:100%;height:var(--keyboard-height);min-height:0;overflow:hidden}
.keyboard-open main{padding-bottom:32px;overflow:hidden}
@media(max-width:650px){.keyboard-open main{padding-bottom:16px}}
.keyboard-open .chat{min-height:0;transform:none;box-shadow:none}
.keyboard-open #messages{min-height:0}
.keyboard-open #status:empty{display:none}
.keyboard-open form{margin-bottom:8px}

/* Keep the introduction compact and its aside alongside the last title line. */
header{padding-top:14px;padding-bottom:6px}
main{margin-top:0;padding-top:0}
.intro{margin-bottom:16px}
h1{padding-top:6px;padding-bottom:12px}
.intro p{position:absolute;right:4px;bottom:14px;margin:0;text-align:right;max-width:28%;line-height:1.15}
@media(max-width:650px){
  header{padding-top:12px;padding-bottom:4px}
  .intro{margin-bottom:14px}
  .intro p{font-size:clamp(11px,3vw,16px);letter-spacing:-.5px;bottom:13px}
}