/* ==========================================================================
   The Contact page (src/components/pages/Contact.astro): Lyn's conversation
   in a soft card, her lines written like a letter, beside a short FAQ.
   Side by side down to a tablet; on a phone the card comes first and is
   sized so the whole conversation fits on the screen.
   ========================================================================== */
.contact-top .page-head h1{margin-top:0}
@media(min-width:601px){.contact-top .page-head{padding:28px 0 52px}}
.ct{padding:clamp(28px,5vw,64px) 0 clamp(48px,7vw,96px)}
.ct-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The card */
.lyn{display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:24px;background:var(--surface);box-shadow:var(--shadow-lift)}
.lyn-top{display:flex;align-items:center;gap:14px;padding:18px 24px;border-bottom:1px solid var(--line)}
.lyn-top h2{margin:0;font:600 1.3rem/1.1 var(--f-display);color:var(--head)}
.lyn-top p{margin:2px 0 0;font-size:.88rem;color:var(--muted)}
/* Her picture, with the little green dot that says she's there */
.lyn-avw{position:relative;display:inline-block;flex:none}
.lyn-av{display:block;width:48px;height:48px;border-radius:50%;object-fit:cover}
.lyn-dot{position:absolute;right:0;bottom:1px;width:13px;height:13px;border-radius:50%;background:#34b27b;box-shadow:0 0 0 3px var(--surface)}

/* The conversation */
.lyn-thread{display:flex;flex-direction:column;gap:16px;height:clamp(300px,42vh,440px);overflow-y:auto;padding:20px 22px;scroll-behavior:smooth}
.lyn-nojs{margin:0;color:var(--muted)}
.msg{max-width:min(84%,560px);padding:0;font-size:1rem;line-height:1.55;overflow-wrap:anywhere}
/* Her lines grouped beside her small picture, the way a chat shows who is talking */
.lyn-grp{display:flex;align-items:flex-end;gap:8px;align-self:flex-start;max-width:min(92%,640px)}
.lyn-mini{flex:none;width:26px;height:26px;margin-bottom:4px;border-radius:50%;object-fit:cover}
.lyn-col{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.lyn-col .msg{max-width:100%}
.msg.lyn-says{align-self:flex-start;font:400 1.25rem/1.5 var(--f-display);color:var(--head)}
.msg.you{align-self:flex-end;max-width:min(80%,520px);padding-right:16px;border-right:2px solid #f0a091;color:var(--text);font-size:1.02rem;text-align:right;white-space:pre-wrap}
/* While she writes, three dots in a small soft bubble */
.msg.typing{display:flex;gap:5px;align-items:center;padding:10px 14px;border-radius:14px;background:var(--sunken)}
.msg.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.5;animation:lynDot 1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}
.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes lynDot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:.9;transform:translateY(-3px)}}
.recap{align-self:stretch;max-width:none;margin:4px 0;border-left:2px solid var(--accent)}
.recap dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:.95rem}
.recap dt{color:var(--muted)}
.recap dd{margin:0;color:var(--head);white-space:pre-wrap;overflow-wrap:anywhere}

/* Where you answer: a tinted strip at the foot of the card */
.lyn-compose{padding:14px 18px 12px;background:var(--sunken)}
.lyn-compose[hidden]{display:none}
.lyn-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lyn-choices{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.lyn-choices[hidden]{display:none}
.lyn-choices button{min-height:44px;padding:8px 16px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--head);font:600 .95rem/1.3 var(--f-body);text-align:left;cursor:pointer;transition:background-color .2s,color .2s}
.lyn-choices button:not(.go):hover{background:color-mix(in srgb,var(--accent) 16%,var(--surface))}
.lyn-choices button.go{border-color:transparent;background:var(--accent-strong);color:var(--bg)}
.lyn-choices button:disabled{opacity:.7;cursor:default}
.lyn-row{display:flex;gap:10px;align-items:flex-end}
.lyn-row[hidden]{display:none}
.lyn-input{flex:1;min-width:0;min-height:48px;padding:12px 18px;border:1.5px solid var(--line-strong);border-radius:24px;background:var(--surface);color:var(--text);font:400 1rem/1.4 var(--f-body)}
.lyn-input[hidden]{display:none}
.lyn-area{min-height:96px;resize:vertical}
.lyn-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.lyn-send{flex:none;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:var(--accent-strong);color:#fff;cursor:pointer}
.lyn-send svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lyn-send:focus-visible,.lyn-choices button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lyn-hint{margin:8px 0 0 6px;font-size:.8rem;color:var(--muted)}
.lyn-hint[hidden]{display:none}
/* Cloudflare's check: above the send buttons, at its own small size, and
   only when it asks for a click. */
.lyn-check{margin:0 0 12px}
.lyn-check[hidden]{display:none}
.lyn-check p{margin:0 0 8px;font-size:.92rem;color:var(--muted)}
html[data-theme="dark"] .msg.you{color:var(--text)}
html[data-theme="dark"] .lyn-send,html[data-theme="dark"] .lyn-choices button.go{background:var(--accent);color:#0f1c30}
@media(prefers-color-scheme:dark){html:not([data-theme="light"]) .lyn-send,html:not([data-theme="light"]) .lyn-choices button.go{background:var(--accent);color:#0f1c30}}

/* The FAQ: closed until a question is tapped */
.ct-side{display:grid;gap:10px;padding-top:6px}
.ct-label{margin:0;font:700 .74rem/1.2 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ct-faq{display:grid;margin:0}
.ct-faq details{border-bottom:1px solid var(--line)}
.ct-faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 0;list-style:none;font:italic 400 1.22rem/1.3 var(--f-display);color:var(--head);cursor:pointer}
.ct-faq summary::-webkit-details-marker{display:none}
.ct-faq summary::after{content:"+";flex:none;font:300 1.4rem/1 var(--f-body);color:var(--accent)}
.ct-faq details[open] summary::after{content:"\2013"}
.ct-faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ct-faq details p{margin:0 0 14px;font-size:1rem;line-height:1.6}
.ct-faq details p a{color:var(--accent-strong);text-decoration:underline;text-underline-offset:3px}
.ct-mail-l{margin-top:18px}
.ct-mail{margin:0;font:600 1.3rem var(--f-display);color:var(--head);user-select:all}

@media(prefers-reduced-motion:reduce){.lyn-thread{scroll-behavior:auto}.msg.typing i{animation:none}}

/* A tablet: still side by side, the conversation as tall as the screen allows */
@media(min-width:601px) and (max-width:1100px){
  .ct{padding-top:22px}
  .ct-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
  .msg.lyn-says{font-size:1.12rem}
  .lyn-thread{height:calc(100dvh - 470px);min-height:260px;max-height:640px}
  .ct-faq summary{font-size:1.05rem;padding:12px 0}
}
@media(min-width:601px) and (max-width:1199px) and (orientation:landscape){.lyn-thread{height:calc(100dvh - 540px);min-height:200px}}

/* A phone: a shorter header and a smaller card, so the whole chat shows */
@media(max-width:600px){
  .contact-top .page-head{padding:2px 0 22px}
  .contact-top .page-head h1{font-size:2.1rem}
  .ct{padding-top:14px}
  .ct-grid{grid-template-columns:1fr}
  .lyn{border-radius:20px}
  .lyn-top{padding:12px 16px}
  .lyn-av{width:42px;height:42px}
  .lyn-thread{height:calc(100dvh - 330px);min-height:250px;padding:16px}
  .msg.lyn-says{font-size:1.08rem}
  .lyn-compose{padding:12px 12px 10px}
  .lyn-hint{display:none}
}