/* HomeFixit Assistant (ask.html): a one-screen chat app. Header, scrolling thread, Aria-style composer
   with the model and effort picker. Colours and type match site.css. */
:root{
  --ground:#FFFFFF; --paper:#F5F4F1; --ink:#0A0A0A; --ink2:#4A4A4A; --ink3:#767676;
  --line:rgba(0,0,0,.12); --fill:rgba(0,0,0,.05); --fill2:rgba(0,0,0,.09);
  --pen:#E4520C; --pen-soft:rgba(228,82,12,.10);
  --bubble:#0A0A0A; --bubble-ink:#FFFFFF; --wa:#1DA851;
  --glass:rgba(255,255,255,.88); --glass-edge:rgba(255,255,255,.6);
  --shadow:0 1px 2px rgba(0,0,0,.06),0 18px 40px -22px rgba(0,0,0,.30);
  --ap-g1:#E4520C; --ap-g2:#F59E0B; --ap-dot:rgba(15,23,42,.22); --ap-dot-on:rgba(255,255,255,.75);
  --ap-ease:cubic-bezier(.32,.72,0,1); --ap-spring:cubic-bezier(.34,1.45,.64,1); --ease:cubic-bezier(.2,.8,.2,1);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#000000; --paper:#121214; --ink:#FFFFFF; --ink2:#B4B4B4; --ink3:#8A8A8A;
  --line:rgba(255,255,255,.14); --fill:rgba(255,255,255,.07); --fill2:rgba(255,255,255,.14);
  --pen:#FF7A3D; --pen-soft:rgba(255,122,61,.15); --bubble:#FFFFFF; --bubble-ink:#000000;
  --glass:rgba(20,20,22,.9); --glass-edge:rgba(255,255,255,.06);
  --shadow:0 1px 2px rgba(255,255,255,.04),0 18px 40px -22px rgba(0,0,0,.8);
  --ap-g1:#FF7A3D; --ap-g2:#FBBF24; --ap-dot:rgba(255,255,255,.28); --ap-dot-on:rgba(12,14,19,.45); color-scheme:dark}}
:root[data-theme="dark"]{
  --ground:#000000; --paper:#121214; --ink:#FFFFFF; --ink2:#B4B4B4; --ink3:#8A8A8A;
  --line:rgba(255,255,255,.14); --fill:rgba(255,255,255,.07); --fill2:rgba(255,255,255,.14);
  --pen:#FF7A3D; --pen-soft:rgba(255,122,61,.15); --bubble:#FFFFFF; --bubble-ink:#000000;
  --glass:rgba(20,20,22,.9); --glass-edge:rgba(255,255,255,.06);
  --shadow:0 1px 2px rgba(255,255,255,.04),0 18px 40px -22px rgba(0,0,0,.8);
  --ap-g1:#FF7A3D; --ap-g2:#FBBF24; --ap-dot:rgba(255,255,255,.28); --ap-dot-on:rgba(12,14,19,.45); color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--pen);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.app{height:100%;height:100dvh;display:grid;grid-template-rows:auto 1fr auto;max-width:820px;margin-inline:auto}

/* header */
.bar{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;border-bottom:1px solid var(--line)}
.hb{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;text-decoration:none;transition:background .2s,transform .3s var(--ap-spring)}
.hb:hover{background:var(--fill)}.hb:active{transform:scale(.92)}
.hb.wa{background:var(--wa);border-color:transparent;color:#fff}
.who{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.logo{width:38px;height:38px;flex:none;position:relative}
.logo svg{width:100%;height:100%;display:block}
.logo::after{content:"";position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;background:#16A34A;border:2px solid var(--ground)}
.who b{display:block;font-weight:600;font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who small{display:block;color:var(--ink3);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* thread */
.thread{overflow-y:auto;padding:24px 16px 16px;display:flex;flex-direction:column;gap:14px;overscroll-behavior:contain;scroll-behavior:smooth}
.intro{padding:4px 2px 8px;animation:rise .7s var(--ease) both}
.intro h1{font:400 clamp(36px,8.4vw,56px)/1.02 var(--serif);letter-spacing:-.01em;margin:8px 0 12px;text-wrap:balance}
.intro h1 em{color:var(--pen)}
.intro p{margin:0;color:var(--ink2);max-width:46ch}
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.chip{text-align:left;border:1px solid var(--line);background:var(--ground);border-radius:16px;padding:14px;font:500 14.5px/1.3 var(--sans);cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:transform .3s var(--ap-spring),border-color .25s,background .25s;animation:rise .6s var(--ease) both}
.chip:nth-child(2){animation-delay:.06s}.chip:nth-child(3){animation-delay:.12s}.chip:nth-child(4){animation-delay:.18s}
.chip span{color:var(--ink3);font-weight:400;font-size:12.5px}
.chip svg{color:var(--pen)}
.chip:hover{transform:translateY(-2px);border-color:var(--pen)}
.chip:active{transform:scale(.97)}
.chip.photo{background:var(--pen-soft);border-color:transparent}
.safety{margin-top:18px;font-size:13px;color:var(--ink3)}

.msg{display:flex;gap:10px;max-width:min(88%,640px);animation:pop .45s var(--ease) both}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.av{width:28px;height:28px;flex:none;margin-top:2px}
.av svg{width:100%;height:100%;display:block}
.body{min-width:0;display:flex;flex-direction:column;gap:8px}
.me .body{align-items:flex-end}
.bub{padding:11px 15px;border-radius:6px 18px 18px 18px;background:var(--paper);overflow-wrap:anywhere}
.me .bub{background:var(--bubble);color:var(--bubble-ink);border-radius:18px 6px 18px 18px;white-space:pre-wrap}
.bub p{margin:0}.bub p+p,.bub p+ul,.bub ul+p{margin-top:8px}
.bub ul{margin:6px 0 0;padding-left:18px}.bub li+li{margin-top:3px}
.bub strong{font-weight:600}
.bub.err{background:var(--pen-soft)}
.shot{width:min(240px,62vw);max-width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block;box-shadow:var(--shadow)}
.scan{position:relative;overflow:hidden;border-radius:14px}
.scan::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0,var(--pen-soft) 44%,var(--pen) 50%,transparent 53%);background-size:100% 220%;animation:scan 1.4s linear infinite}
.by{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);display:flex;gap:6px;align-items:center}
.by i{width:6px;height:6px;border-radius:50%;background:linear-gradient(90deg,var(--ap-g1),var(--ap-g2))}
.typing{display:inline-flex;gap:4px;padding:15px 16px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink3);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.wa-btn{display:inline-flex;align-items:center;gap:8px;background:var(--wa);color:#fff;text-decoration:none;font:600 14px var(--sans);padding:10px 16px;border-radius:99px;transition:transform .3s var(--ap-spring),box-shadow .2s}
.wa-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px var(--wa)}
.ghost{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:none;border-radius:99px;padding:9px 14px;font:500 14px var(--sans);cursor:pointer;text-decoration:none;color:var(--ink);transition:border-color .2s}
.ghost:hover{border-color:var(--pen)}

/* composer (Aria) */
.dock{padding:6px 12px calc(8px + env(safe-area-inset-bottom,0px));width:100%}
.composer{padding:10px 10px 8px 16px;border-radius:24px;background:var(--ground);border:1px solid var(--line);box-shadow:var(--shadow);transition:border-color .2s}
.composer:focus-within{border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.composer textarea{display:block;width:100%;min-height:26px;max-height:140px;padding:2px 4px 2px 0;border:0;outline:0;background:transparent;resize:none;font:400 16px/1.5 var(--sans);color:var(--ink)}
.composer textarea::placeholder{color:var(--ink3)}
.ctl{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.ctl-l{display:flex;align-items:center;gap:4px;min-width:0}
.tool{display:inline-grid;place-items:center;width:40px;height:40px;border:0;border-radius:12px;background:transparent;color:var(--ink2);cursor:pointer;transition:background .2s,color .2s}
.tool:hover{background:var(--fill);color:var(--ink)}
.send{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border:0;border-radius:50%;background:var(--bubble);color:var(--bubble-ink);cursor:pointer;transition:background .2s,transform .2s var(--ease)}
.send:active{transform:scale(.94)}
.send:disabled{background:var(--fill);color:var(--ink3);cursor:default}
.tray{padding-bottom:8px}
.chat-tray{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:4px 4px 4px 6px;border-radius:14px;background:var(--fill);animation:pop .35s var(--ease) both}
.chat-tray img{width:36px;height:36px;border-radius:10px;object-fit:cover}
.tray-name{max-width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;color:var(--ink2)}
.x{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--ink2);cursor:pointer}
.x:hover{background:var(--fill2)}
.fine{text-align:center;font-size:12px;color:var(--ink3);margin:8px 0 0}
.drop{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:color-mix(in srgb,var(--ground) 80%,transparent);backdrop-filter:blur(6px);font:400 34px var(--serif);color:var(--pen);border:3px dashed var(--pen);border-radius:24px;margin:12px;pointer-events:none}
.toast{position:fixed;left:50%;bottom:calc(130px + env(safe-area-inset-bottom,0px));transform:translate(-50%,12px);background:var(--bubble);color:var(--bubble-ink);padding:10px 16px;border-radius:99px;font:500 13.5px var(--sans);opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ap-spring);max-width:calc(100vw - 32px);text-align:center;z-index:90}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* model and effort picker (from Aria) */
.ap-card,.ap-card *{box-sizing:border-box}
 .ap { position: relative; }
 .ap-trig { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 9px 0 13px; border: 0; border-radius: 999px; background: var(--fill); color: var(--ink); font: 600 13.5px var(--sans); white-space: nowrap; cursor: pointer; transition: background-color .2s, transform .3s var(--ap-spring); }
 .ap-trig:hover { background: var(--fill2); }
 .ap-trig:active { transform: scale(.97); }
 .ap-trig-eff { font-weight: 500; color: var(--ink3); }
 .ap-trig svg { color: var(--ink3); transition: transform .35s var(--ap-ease); }
 .ap-trig[aria-expanded="true"] svg { transform: rotate(180deg); }
 /* Lives on <body> (moved there by script) so the composer's blur cannot trap it; script places it above the button. */
 .ap-card { position: fixed; z-index: 60; width: 330px; max-width: calc(100vw - 32px); border-radius: 22px; background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); color: var(--ink); font-family: var(--sans); transform-origin: 15% 100%; opacity: 0; visibility: hidden; transform: translateY(8px) scale(.95); filter: blur(4px); transition: opacity .22s var(--ap-ease), transform .45s var(--ap-spring), filter .3s var(--ap-ease), visibility 0s .45s; }
 .ap-card.open { opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity .22s var(--ap-ease), transform .45s var(--ap-spring), filter .3s var(--ap-ease), visibility 0s; }
 .ap-scrim, .ap-grab { display: none; }
 .ap-clip { overflow: hidden; transition: height .45s var(--ap-ease); }
 .ap-views { display: flex; align-items: flex-start; transition: transform .45s var(--ap-ease); }
 .ap-card[data-view="models"] .ap-views { transform: translateX(-100%); }
 .ap-view { flex: 0 0 100%; padding: 14px 14px 12px; transition: opacity .3s var(--ap-ease); }
 .ap-card[data-view="models"] .ap-v-effort, .ap-card[data-view="effort"] .ap-v-models { opacity: 0; pointer-events: none; }
 .ap-top, .ap-head { display: grid; grid-template-columns: 34px 1fr 34px; align-items: start; }
 .ap-head { align-items: center; margin-bottom: 4px; text-align: center; font-weight: 600; font-size: 14px; }
 .ap-ic { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ink2); cursor: pointer; transition: background-color .2s, transform .3s var(--ap-spring); }
 .ap-ic:hover { background: var(--fill); }
 .ap-ic:active { transform: scale(.9); }
 .ap-lvl { display: grid; justify-items: center; gap: 2px; text-align: center; }
 .ap-lvl-name { min-height: 36px; font: 400 34px/1.05 "Instrument Serif", Georgia, serif; background: linear-gradient(90deg, var(--ap-g1), var(--ap-g2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
 .ap-lvl-name.ap-pop { animation: ap-pop .4s var(--ap-spring); }
 @keyframes ap-pop { from { transform: translateY(6px) scale(.94); opacity: .2; } to { transform: none; opacity: 1; } }
 .ap-mlink { display: inline-flex; align-items: center; gap: 2px; padding: 3px 8px; border: 0; border-radius: 999px; background: none; color: var(--ink2); font: 500 13.5px var(--sans); cursor: pointer; transition: background-color .2s, color .2s; }
 .ap-mlink:hover { background: var(--fill); color: var(--ink); }
 .ap-track { --p: .5; position: relative; height: 40px; margin-top: 16px; border-radius: 999px; background: var(--fill); touch-action: none; cursor: pointer; }
 .ap-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * (100% - 40px) + 40px); border-radius: 999px; background: linear-gradient(90deg, var(--ap-g1), var(--ap-g2)); transition: width .5s var(--ap-spring); }
 .ap-stop { position: absolute; top: 50%; left: calc(20px + var(--s) * (100% - 40px)); width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--ap-dot); transition: background-color .3s; }
 .ap-stop.on { background: var(--ap-dot-on); }
 .ap-thumb { position: absolute; top: 3px; left: calc(3px + var(--p) * (100% - 40px)); width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 .5px rgba(0,0,0,.06); transition: left .5s var(--ap-spring), transform .25s var(--ap-spring); }
 .ap-track.dragging .ap-fill, .ap-track.dragging .ap-thumb { transition: none; }
 .ap-track.dragging .ap-thumb { transform: scale(1.08); }
 .ap-ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--ink3); }
 .ap-note { margin: 6px 0 0; min-height: 18px; font-size: 12.5px; color: var(--ink3); text-align: center; }
 .ap-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 12px; background: none; color: var(--ink); text-align: left; cursor: pointer; transition: background-color .2s; }
 .ap-row:hover, .ap-row:focus-visible { background: var(--fill); }
 .ap-r-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 500 14.5px var(--sans); }
 .ap-row[aria-checked="true"] .ap-r-name { font-weight: 650; }
 .ap-r-desc { display: block; margin-top: 1px; font-size: 12.5px; color: var(--ink3); }
 .ap-r-end { display: flex; align-items: center; color: var(--ink3); }
 .ap-r-end kbd { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink3); }
 .ap-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; background: var(--fill); color: var(--ink2); font: 500 10.5px var(--sans); }
 .ap-chip-new { background: linear-gradient(90deg, var(--ap-g1), var(--ap-g2)); color: #fff; }
 
 .ap-check { width: 18px; height: 18px; color: var(--ap-g1); }
 .ap-check path { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .35s var(--ap-ease) .05s; }
 .ap-row[aria-checked="true"] .ap-check path { stroke-dashoffset: 0; }
 .ap-row[aria-checked="true"] kbd, .ap-row:not([aria-checked="true"]) .ap-check { display: none; }
 .ap-sep { display: block; height: 1px; margin: 6px 8px; background: var(--line); }
 .ap-switch { position: relative; width: 40px; height: 24px; border-radius: 999px; background: var(--fill2); transition: background-color .3s; }
 .ap-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .4s var(--ap-spring); }
 .ap-row[aria-checked="true"] .ap-switch { background: linear-gradient(90deg, var(--ap-g1), var(--ap-g2)); }
 .ap-row[aria-checked="true"] .ap-switch::after { transform: translateX(16px); }
 @media (max-width: 767px) {
   .ap-scrim { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,.32); opacity: 0; pointer-events: none; transition: opacity .35s var(--ap-ease); }
   .ap-scrim.open { opacity: 1; pointer-events: auto; }
   .ap-card { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; border-radius: 30px; padding: 4px 4px 8px; opacity: 1; filter: none; transform: translateY(calc(100% + 32px)); transition: transform .5s var(--ap-ease), visibility 0s .5s; }
   .ap-card.open { transform: translateY(var(--ap-drag, 0px)); transition: transform .5s var(--ap-ease), visibility 0s; }
   .ap-card.dragging { transition: none; }
   .ap-grab { display: block; padding: 6px 0 4px; cursor: grab; touch-action: none; }
   .ap-grab::before { content: ""; display: block; width: 38px; height: 5px; margin: 0 auto; border-radius: 5px; background: var(--fill2); }
   .ap-r-end kbd { display: none; }
   .ap-row { padding: 11px 12px; }
 }
 @media (prefers-reduced-motion: reduce) { .ap *, .ap-card, .ap-trig { transition-duration: .01ms !important; animation: none !important; } }
.ap-lvl-name{font-family:var(--serif)}

@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes blink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes scan{from{background-position:0 120%}to{background-position:0 -120%}}
@media (min-width:900px){.thread{padding-inline:28px}.dock{padding-inline:28px}}
@media (max-width:420px){.chips{gap:8px}.chip{padding:12px}.who small{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.safety a{color:var(--pen);font-weight:500}