/* ===================
   The one shared look for every chat a client sees — the open intake, the spec review, the acceptance review, and the intake panel on the site — scoped under .hachat so it can load on any page without touching anything outside the chat.
   =================== */

/* --------------------------------------------------------------------------- */
/* Tokens and the chat column */
/* --------------------------------------------------------------------------- */

/* Everything lives under .hachat: the tokens sit on the container, not :root, so a host page's own tokens
   and layout are never overridden. Each page supplies its own fonts (the family names below); this file
   only shapes the chat. */
.hachat { --display:'Satoshi','Poppins',system-ui,sans-serif; --body:'Poppins',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ink:#0A0A0A; --dim:rgba(17,17,16,.66); --ghost:rgba(17,17,16,.6); --faint:rgba(17,17,16,.34); --hair:rgba(17,17,16,.1);
  flex:1 1 auto; min-height:0; width:100%; max-width:620px; margin:0 auto; padding:0 clamp(18px,5vw,30px);
  display:flex; flex-direction:column; font-family:var(--body); font-weight:300; color:var(--ink); }
.hachat, .hachat * { box-sizing:border-box; }
.hachat .topbar { flex:0 0 auto; padding:18px 0 6px; }
.hachat .back { display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--dim); text-transform:uppercase; text-decoration:none; background:none; border:0; padding:0; cursor:pointer; }
.hachat .chatlog { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:24px; padding:22px 0; }
.hachat .typing { align-self:flex-start; color:var(--ghost); font-family:var(--mono); font-size:11px; letter-spacing:.05em; }

/* --------------------------------------------------------------------------- */
/* The messages: the assistant's open structured reply, the client's bubble */
/* --------------------------------------------------------------------------- */

/* The assistant's reply is the main thing to read — comfortable and the largest text on screen. It carries
   one structured format: a lead line, short paragraphs, a quiet mono label where content is grouped,
   simple bullet lists, and numbered question batches, ending on a slightly heavier question. */
.hachat .ai { align-self:flex-start; max-width:100%; font-size:16.5px; font-weight:300; line-height:1.62; color:var(--ink); }
.hachat .ai > :first-child { margin-top:0; }
.hachat .ai > :last-child { margin-bottom:0; }
.hachat .ai .lead { font-weight:400; margin:0; }
.hachat .ai p { margin:11px 0 0; }
.hachat .ai .seclabel { font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ghost); margin:18px 0 8px; }
.hachat .ai ul { margin:9px 0 0; padding:0; list-style:none; }
.hachat .ai li { position:relative; padding:5px 0 5px 18px; line-height:1.5; }
.hachat .ai li::before { content:""; position:absolute; left:2px; top:.72em; width:5px; height:5px; border-radius:50%; background:var(--faint); }
.hachat .ai .qs { margin-top:12px; }
.hachat .ai .qs .q { display:flex; gap:11px; padding:6px 0; line-height:1.5; }
.hachat .ai .qs .qn { font-family:var(--mono); font-size:13px; color:var(--ghost); flex:0 0 auto; margin-top:2px; }
.hachat .ai .ask { font-weight:400; margin-top:12px; }
.hachat .ai .ask.nudge { color:#6f4a10; }
.hachat .me { align-self:flex-end; max-width:80%; background:#1a1a1a; color:#fff; font-weight:300; font-size:15.5px; line-height:1.55; padding:11px 16px; border-radius:16px 16px 5px 16px; }

/* --------------------------------------------------------------------------- */
/* The growing composer */
/* --------------------------------------------------------------------------- */

/* One line at rest (min-height), grows as you type, caps at ~45svh and then scrolls inside, shrinks back
   on delete. Enter sends, Shift+Enter adds a line. The font stays a literal 16px so iOS never zooms. */
.hachat .composer { flex:0 0 auto; border-top:1px solid var(--hair); padding:15px 0 calc(16px + env(safe-area-inset-bottom)); background:#fff; }
.hachat form { display:flex; gap:10px; align-items:flex-end; margin:0; }
.hachat .input { flex:1; min-width:0; font-family:var(--body); font-weight:300; font-size:16px; line-height:1.55; color:var(--ink);
         background:rgba(10,10,10,.03); border:1px solid var(--hair); border-radius:13px; padding:12px 15px; resize:none; overflow-y:hidden;
         min-height:48px; max-height:45svh; transition:border-color .15s, background .15s; }
.hachat .input::placeholder { color:var(--ghost); }
.hachat .input:focus { outline:none; border-color:var(--ink); background:#fff; }
.hachat .send { flex:0 0 auto; align-self:flex-end; font-family:var(--mono); font-size:12px; letter-spacing:.04em; border:0; border-radius:13px; padding:12px 19px; background:var(--ink); color:#fff; cursor:pointer; transition:opacity .15s; }
.hachat .send:hover { opacity:.9; }
.hachat .send:disabled { opacity:.35; cursor:default; }
.hachat.done .composer { display:none; }

/* Privacy — a short sentence and an outlined pill that reads as a real button, both the same text size. */
.hachat .privacy { margin-top:12px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.hachat .privacy .txt { font-size:12px; font-weight:300; color:var(--ghost); line-height:1.5; }
.hachat .pill { display:inline-flex; align-items:center; gap:5px; font-family:var(--body); font-size:12px; font-weight:500; color:var(--ink);
        text-decoration:none; border:1px solid var(--faint); border-radius:20px; padding:5px 12px; white-space:nowrap; transition:background .15s, border-color .15s; }
.hachat .pill:hover { background:rgba(10,10,10,.04); border-color:var(--ink); }
.hachat .pill .arw { font-size:12px; }

/* Thin, faint, overlay scrollbars on the log and the input. */
.hachat .chatlog, .hachat .input { scrollbar-width:thin; scrollbar-color:rgba(10,10,10,.18) transparent; }
.hachat .chatlog::-webkit-scrollbar, .hachat .input::-webkit-scrollbar { width:7px; }
.hachat .chatlog::-webkit-scrollbar-track, .hachat .input::-webkit-scrollbar-track { background:transparent; }
.hachat .chatlog::-webkit-scrollbar-thumb, .hachat .input::-webkit-scrollbar-thumb { background:rgba(10,10,10,.16); border-radius:99px; border:2px solid transparent; background-clip:content-box; }

/* --------------------------------------------------------------------------- */
/* The confirm-gate panel — its own scoped fields and buttons */
/* --------------------------------------------------------------------------- */

.hachat .gate { align-self:stretch; background:#fff; border:1px solid var(--hair); border-radius:14px; padding:16px; margin-top:8px; display:flex; flex-direction:column; gap:10px; }
.hachat .gate .summary { font-family:var(--display); font-weight:500; font-size:16.5px; line-height:1.4; }
.hachat .gate .action { font-size:14px; color:var(--dim); }
.hachat .gate input { width:100%; font-family:var(--body); font-weight:300; font-size:16px; color:var(--ink); background:#fff; border:1px solid var(--hair); border-radius:10px; padding:12px 14px; }
.hachat .gate input:focus { outline:none; border-color:var(--ink); }
.hachat .gate .status { font-size:14px; color:var(--dim); min-height:1.2em; }
.hachat .gate button { font-family:var(--mono); font-size:12px; letter-spacing:.04em; border:0; border-radius:13px; padding:12px 19px; background:var(--ink); color:#fff; cursor:pointer; }
.hachat .gate button.secondary { background:#fff; color:var(--ink); border:1px solid var(--hair); }