/* ===================================================================
   Michael Jacques — conversational portfolio (chat view)
   Self-contained: does not share the cascade with styles.css
   =================================================================== */
:root {
  --ink:#0B0A0A; --surface:#171514; --surface-2:#211E1C; --line:#2E2A28;
  --text:#F2EFED; --mute:#9C9391; --red:#DB0508; --red-lift:#FF4A45;
  --bubble-me:#DB0508; --bubble-me-ink:#fff;
  --ring:rgba(255,255,255,.14);
  --shadow:0 24px 60px -24px rgba(0,0,0,.75);
  --sans:Montserrat, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display:Anton, Impact, "Arial Narrow Bold", sans-serif;
  --serif:"Playfair Display", Georgia, serif;
  color-scheme:dark;
}
:root[data-mode="light"] {
  --ink:#F6F4F2; --surface:#FFFFFF; --surface-2:#EFEBE8; --line:#DCD6D2;
  --text:#14110F; --mute:#6E6663; --red:#C40406; --red-lift:#C40406;
  --bubble-me:#14110F; --bubble-me-ink:#fff;
  --ring:rgba(0,0,0,.12);
  --shadow:0 24px 60px -30px rgba(20,17,15,.28);
  color-scheme:light;
}
* { box-sizing:border-box }
html, body { height:100% }
body { margin:0; background:var(--ink); color:var(--text); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow:hidden }
a { color:inherit }
button { font:inherit; color:inherit }
.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 }
:focus-visible { outline:2px solid var(--red-lift); outline-offset:3px; border-radius:4px }

/* ---------- shell ---------- */
.chat-shell { display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:100dvh; position:relative }

/* ---------- header ---------- */
.chat-header { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px clamp(16px,3vw,30px); position:relative; z-index:5 }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none }
.brand svg { width:30px; height:auto; display:block; color:var(--text) }
.brand__name { font-size:.66rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--mute) }
.header-tools { display:flex; align-items:center; gap:10px }
.icon-btn { display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid var(--line);
  border-radius:50%; background:transparent; cursor:pointer; transition:border-color .2s, background-color .2s }
.icon-btn:hover { border-color:var(--red); background:var(--surface) }
.icon-btn svg { width:16px; height:16px }
.view-link { display:inline-flex; align-items:center; gap:.45em; padding:8px 15px; border:1px solid var(--line);
  border-radius:999px; text-decoration:none; font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text); transition:background-color .2s, border-color .2s, color .2s }
.view-link:hover { background:var(--red); border-color:var(--red); color:#fff }
.view-link svg { width:12px; height:12px }

/* ---------- scroll region ---------- */
.chat-scroll { overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
  scrollbar-color:var(--line) transparent; padding:0 clamp(16px,3vw,30px) }
.chat-scroll::-webkit-scrollbar { width:8px }
.chat-scroll::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px }
.chat-inner { max-width:900px; margin:0 auto; padding-bottom:26px; min-height:100% ;
  display:flex; flex-direction:column; justify-content:center }
.chat-inner.is-conversing { justify-content:flex-start; padding-top:8px }

/* ---------- hero (at rest) ---------- */
.hero { text-align:center; padding:clamp(8px,3vh,40px) 0 clamp(16px,4vh,44px) }
.hero h1 { margin:0 0 clamp(16px,2.4vh,26px); font-family:var(--display); font-weight:400;
  font-size:clamp(2.1rem,6.1vw,4.4rem); line-height:1.02; letter-spacing:.004em; text-transform:uppercase;
  text-wrap:balance }
.hero .hl { display:inline-block; background:var(--red); color:#fff; padding:.02em .22em .08em;
  transform:rotate(-1.1deg); box-decoration-break:clone; -webkit-box-decoration-break:clone }
.hero p { max-width:56ch; margin:0 auto; color:var(--mute); font-size:clamp(.94rem,1.12vw,1.06rem);
  font-weight:500; line-height:1.6 }
.hero__meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 10px; margin-top:clamp(18px,3vh,30px) }
.hero__meta span { font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mute);
  border:1px solid var(--line); border-radius:999px; padding:7px 13px }
.hero__meta span b { color:var(--text); font-weight:700 }

/* ---------- messages ---------- */
.msg { display:flex; gap:12px; margin:0 0 18px; animation:msg-in .42s cubic-bezier(.22,1,.36,1) both }
@keyframes msg-in { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.msg--me { justify-content:flex-end }
.msg--me .bubble { background:var(--bubble-me); color:var(--bubble-me-ink); border:0; border-bottom-right-radius:6px; font-weight:600 }
.msg__avatar { flex:0 0 auto; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line); margin-top:2px }
.msg__avatar svg { width:15px; height:auto; color:var(--red-lift) }
.bubble { max-width:min(82%,640px); padding:13px 17px; border-radius:18px; border:1px solid var(--line);
  background:var(--surface); font-size:.97rem; line-height:1.62; border-bottom-left-radius:6px }
.bubble p { margin:0 0 .85em } .bubble p:last-child { margin:0 }
.bubble strong { color:var(--text); font-weight:700 }
.msg--me .bubble strong { color:inherit }
.bubble a { color:var(--red-lift); text-underline-offset:3px }

/* thinking dots */
.thinking { display:inline-flex; gap:5px; align-items:center; padding:4px 0 }
.thinking i { width:6px; height:6px; border-radius:50%; background:var(--mute); animation:blink 1.2s infinite ease-in-out }
.thinking i:nth-child(2){animation-delay:.18s} .thinking i:nth-child(3){animation-delay:.36s}
@keyframes blink { 0%,60%,100%{opacity:.28;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} }

/* ---------- project cards ---------- */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin:2px 0 18px 44px;
  animation:msg-in .5s cubic-bezier(.22,1,.36,1) both }
.card { display:flex; flex-direction:column; gap:9px; padding:15px 16px 16px; border:1px solid var(--line);
  border-radius:16px; background:var(--surface); text-decoration:none; transition:border-color .22s, transform .22s, background-color .22s }
.card:hover { border-color:var(--red); transform:translateY(-2px); background:var(--surface-2) }
.card__eyebrow { align-self:flex-start; font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute); border:1px solid var(--line); border-radius:999px; padding:4px 9px }
.card__title { font-family:var(--serif); font-size:1.18rem; font-weight:700; line-height:1.14; letter-spacing:-.01em }
.card__title em { font-style:italic; font-weight:600 }
.card__sum { font-size:.83rem; line-height:1.5; color:var(--mute); margin:0 }
.card__tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:4px }
.card__tags span { font-size:.6rem; font-weight:700; letter-spacing:.08em; color:var(--mute) }
.card__go { display:inline-flex; align-items:center; gap:.4em; font-size:.66rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--red-lift) }
.card__go svg { width:12px; height:12px }

/* ---------- follow-up chips ---------- */
.chips { display:flex; flex-wrap:wrap; gap:9px; margin:0 0 22px 44px; animation:msg-in .55s cubic-bezier(.22,1,.36,1) both }
.chip { padding:9px 15px; border:1px solid var(--line); border-radius:999px; background:transparent; cursor:pointer;
  font-size:.79rem; font-weight:600; color:var(--text); transition:border-color .2s, background-color .2s, color .2s }
.chip:hover { border-color:var(--red); background:var(--red); color:#fff }

/* ---------- composer ---------- */
.composer-wrap { position:relative; padding:0 clamp(16px,3vw,30px) max(18px,env(safe-area-inset-bottom)); z-index:6 }
.composer-wrap:before { content:""; position:absolute; left:0; right:0; bottom:100%; height:64px;
  background:linear-gradient(to top, var(--ink), transparent); pointer-events:none }
.composer { display:flex; align-items:center; gap:11px; max-width:900px; margin:0 auto }
.pulse { position:relative; flex:0 0 auto; width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:var(--red); display:grid; place-items:center; box-shadow:var(--shadow); transition:transform .2s }
.pulse:hover { transform:scale(1.06) }
.pulse svg { width:19px; height:auto; color:#fff }
.pulse__bars { display:flex; align-items:flex-end; gap:2.5px; height:15px }
.pulse__bars i { width:2.5px; background:#fff; border-radius:2px; height:40%; animation:bar 1s infinite ease-in-out }
.pulse__bars i:nth-child(2){animation-delay:.15s} .pulse__bars i:nth-child(3){animation-delay:.3s} .pulse__bars i:nth-child(4){animation-delay:.45s}
@keyframes bar { 0%,100%{height:35%} 50%{height:100%} }
.field { flex:1 1 auto; display:flex; align-items:center; gap:10px; padding:6px 6px 6px 18px; border:1px solid var(--line);
  border-radius:999px; background:var(--surface); box-shadow:var(--shadow); transition:border-color .2s }
.field:focus-within { border-color:var(--red) }
.field input { flex:1 1 auto; min-width:0; padding:11px 0; border:0; background:transparent; color:var(--text);
  font-size:.95rem; font-weight:500 }
.field input::placeholder { color:var(--mute) }
.field input:focus { outline:none }
.send { flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:0; background:var(--surface-2); cursor:pointer;
  display:grid; place-items:center; transition:background-color .2s, color .2s }
.send:hover, .send:focus-visible { background:var(--red); color:#fff }
.send svg { width:16px; height:16px }
.composer__note { max-width:900px; margin:9px auto 0; text-align:center; font-size:.64rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--mute) }

/* starters popover */
.starters-btn { position:absolute; left:clamp(16px,3vw,30px); bottom:calc(100% - 4px); display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); cursor:pointer;
  font-size:.72rem; font-weight:600; color:var(--mute); box-shadow:var(--shadow); transition:color .2s, border-color .2s }
.starters-btn:hover { color:var(--text); border-color:var(--red) }
.starters { position:absolute; left:clamp(16px,3vw,30px); right:clamp(16px,3vw,30px); bottom:calc(100% + 42px);
  max-width:520px; padding:8px; border:1px solid var(--line); border-radius:18px; background:var(--surface);
  box-shadow:var(--shadow); display:none; z-index:7 }
.starters.is-open { display:block; animation:msg-in .3s cubic-bezier(.22,1,.36,1) both }
.starters h2 { margin:6px 10px 8px; font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mute) }
.starters button { display:block; width:100%; text-align:left; padding:10px 12px; border:0; border-radius:11px;
  background:transparent; cursor:pointer; font-size:.88rem; font-weight:500; transition:background-color .16s }
.starters button:hover { background:var(--surface-2); color:var(--red-lift) }

/* ---------- mobile ---------- */
@media (max-width:640px) {
  .chat-header { padding:14px 16px }
  .brand__name { display:none }
  .view-link { padding:7px 12px; font-size:.66rem }
  .hero h1 { font-size:clamp(1.9rem,8.4vw,2.6rem) }
  .hero p { font-size:.92rem }
  .bubble { max-width:88%; font-size:.93rem }
  .cards, .chips { margin-left:0 }
  .cards { grid-template-columns:1fr }
  .msg__avatar { display:none }
  .starters { max-width:none }
}
@media (prefers-reduced-motion:reduce) {
  .msg, .cards, .chips, .starters.is-open { animation:none }
  .thinking i, .pulse__bars i { animation:none }
}