:root{--bg:#faf9f5;--panel:#f0eee7;--line:#dedbd1;--fg:#1f1d18;--muted:#7d7768;
--accent:#c96f4a;--ok:#16a34a;--warn:#b45309;--bad:#dc2626;--chip:#e9e6dd;--well:#f3f1ea;--code:#23221d;}
*{box-sizing:border-box}
body{margin:0;font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--fg);height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.hidden{display:none!important}
.muted{color:var(--muted)} .error{color:var(--bad);min-height:1.2em;margin-top:.5em;font-size:.9em}
.overlay{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:10}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:2em;width:340px;display:flex;flex-direction:column;gap:.7em}
.login-card h1{font-size:1.15em;margin:0}
input,textarea{background:var(--well);border:1px solid var(--line);border-radius:8px;color:var(--fg);padding:.6em .8em;font:inherit}
button{background:var(--accent);border:0;border-radius:8px;color:#fff;padding:.6em 1em;font:inherit;cursor:pointer}
button.small{background:var(--chip);color:var(--fg);padding:.4em .7em;font-size:.85em}
button:disabled{opacity:.5;cursor:default}
#shell{display:flex;height:100vh}
#sidebar{width:250px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:.8em;gap:.8em}
#conv-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
#conv-list a,#project-list a{display:flex;align-items:center;gap:.4em;padding:.45em .6em;border-radius:7px;color:var(--fg);text-decoration:none;font-size:.9em}
#conv-list a:hover,#project-list a:hover{background:var(--chip)}
#conv-list a.active,#project-list a.active{background:var(--chip);color:var(--fg)}
#side-footer{border-top:1px solid var(--line);padding-top:.7em;display:flex;flex-direction:column;gap:.5em;font-size:.85em}
#main{flex:1;display:flex;flex-direction:column;min-width:0}
#messages{flex:1;overflow-y:auto;padding:1.2em max(6%, calc(50% - 24em));display:flex;flex-direction:column;gap:1em}
.msg{max-width:48em}
.msg.user{align-self:flex-end;background:var(--chip);border:1px solid var(--line);border-radius:18px 18px 4px 18px;padding:.6em 1em;max-width:40em;white-space:pre-wrap}
.msg.bot{align-self:flex-start;width:100%}
.msg .body{white-space:normal;word-wrap:break-word}/* SM-12: pre-wrap doubled every paragraph gap (literal newlines between rendered blocks painted as extra blank lines); markdown flows as normal HTML, margins govern the rhythm */
.msg .body code{background:var(--well);border:1px solid var(--line);border-radius:4px;padding:0 .3em}
.msg .body pre{background:var(--code);color:#e8e6df;border:1px solid var(--line);border-radius:8px;padding:.8em;overflow-x:auto;white-space:pre}
.msg .body h3,.msg .body h4{margin:.6em 0 .2em}
.msg .body .oli{color:var(--accent);font-weight:600;margin-right:.15em}
.msg .body hr{border:0;border-top:1px solid var(--line);margin:1.1em 0}
.msg .body i{color:inherit}
.footer{color:var(--muted);font-size:.78em;margin-top:.45em;border-top:1px dashed var(--line);padding-top:.35em}
.verified{border:1px solid var(--ok);border-radius:10px;padding:.7em .9em;margin:.6em 0;background:rgba(34,197,94,.07)}
.verified .stamp{color:var(--ok);font-weight:600;font-size:.85em;letter-spacing:.04em}
.verified pre{color:inherit;margin:.4em 0 0;white-space:pre-wrap;font-size:.9em}
.verified .vhead{margin:.5em 0 .2em}
.verified .vtitle{font-weight:600}
.verified .vfacts{color:var(--muted);font-size:.82em;margin:.15em 0 .3em}
.verified table{margin:.45em 0}
.verified .vtotal td{font-weight:600;border-top:1px solid var(--ok)}
.verified details.vraw{margin-top:.5em;font-size:.8em;color:var(--muted)}
.verified details.vraw summary{cursor:pointer}
.msg .body table,.verified table{border-collapse:collapse;font-size:.9em;width:auto;max-width:100%}
.msg .body table th,.msg .body table td,.verified table th,.verified table td{border:1px solid var(--line);padding:.35em .7em;text-align:left}
.msg .body table th,.verified table th{background:var(--chip);font-weight:600}
.msg .body table td:not(:first-child),.verified table td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.toolchip{display:block;background:var(--chip);border:1px solid var(--line);border-radius:8px;margin:.4em 0;font-size:.83em;color:var(--muted)}
.toolchip summary{padding:.4em .7em;cursor:pointer;list-style:none}
.toolchip summary::before{content:"▸ "} .toolchip[open] summary::before{content:"▾ "}
.toolchip pre{margin:0;padding:.5em .8em;border-top:1px solid var(--line);white-space:pre-wrap;max-height:14em;overflow-y:auto}
.notice{border-left:3px solid var(--warn);background:rgba(245,158,11,.08);padding:.45em .8em;border-radius:0 8px 8px 0;font-size:.85em;color:var(--warn);margin:.4em 0}
.notice.bad{border-color:var(--bad);color:var(--bad);background:rgba(239,68,68,.08)}
#composer{border-top:1px solid var(--line);padding:.7em 8% 1em;display:flex;flex-direction:column;gap:.55em;background:var(--panel)}
#tiers{display:inline-flex}
/* SM-11: the segmented control is retired — the chip + menu at the
   bottom of this sheet style the effort picker now */
#input-row{display:flex;gap:.6em}
#input{flex:1;resize:none}
.cursor{display:inline-block;width:.55em;height:1em;background:var(--accent);vertical-align:text-bottom;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.think{display:inline-block;font-weight:700;letter-spacing:.18em;color:var(--accent);font-size:.9em;animation:rgspulse 1.1s ease-in-out infinite}
@keyframes rgspulse{0%,100%{opacity:.25;filter:blur(.6px)}50%{opacity:1;filter:blur(0)}}
#conv-list .ct,#project-list .ct{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#conv-list .cx,#project-list .cx{background:transparent;border:0;color:var(--muted);padding:0 .2em;font-size:.85em;line-height:1;cursor:pointer;visibility:hidden;flex:none}
#conv-list a:hover .cx,#project-list a:hover .cx{visibility:visible}
#conv-list .cx:hover,#project-list .cx:hover{color:var(--bad);background:none}
#side-brand{font-weight:700;letter-spacing:.14em;font-size:.95em;color:var(--muted);padding:.15em .2em;display:flex;align-items:center;gap:.45em}
#side-brand img{width:22px;height:22px;display:block}
.login-logo{width:56px;height:56px;display:block;margin:0 auto .4em}
.side-head{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:.72em;text-transform:uppercase;letter-spacing:.09em;margin:.3em .2em 0}
.side-head button{padding:.05em .5em;font-size:1em;line-height:1.2}
#project-list{display:flex;flex-direction:column;gap:2px;max-height:9.5em;overflow-y:auto}
#admin-tools{font-size:.85em}
#admin-tools summary{cursor:pointer;color:var(--muted);padding:.15em 0}
#admin-tools button{display:block;width:100%;text-align:left;margin-top:.35em}
.sug{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.8em 1em;margin:.6em 0;max-width:52em}
.sug.pending{border-left:3px solid var(--warn)}
.sug.accepted{border-left:3px solid var(--ok)}
.sug.rejected{border-left:3px solid var(--bad);opacity:.7}
.sughead{font-weight:600}
.sugfacts{color:var(--muted);font-size:.8em;margin:.2em 0 .4em}
.sug pre{background:var(--code);color:#e8e6df;border:1px solid var(--line);border-radius:8px;padding:.6em;font-size:.8em;white-space:pre-wrap;max-height:12em;overflow-y:auto}
.sugact{display:flex;gap:.5em;margin-top:.5em}
/* ---- Batch 2b ---- */
.filerow{display:flex;flex-wrap:wrap;gap:.5em;margin:.4em 0}
.filecard{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--line);border-radius:10px;padding:.45em .7em;text-decoration:none;color:inherit;font-size:.88em;background:#fff}
.reviewcard{display:inline-flex;align-items:center;gap:.75em;border:1px solid var(--line);border-left:3px solid #2e6b3f;border-radius:12px;padding:.7em 1.1em;margin-top:.3em;text-decoration:none;color:inherit;background:var(--panel,#fdfbf5);box-shadow:0 1px 3px rgba(61,57,41,.07);transition:border-color .15s,box-shadow .15s,transform .15s}
.vpages{display:flex;gap:.6em;flex-wrap:wrap;margin:.5em 0 .2em}
.estcard{border:1px solid var(--line);border-left:3px solid #2e6b3f;border-radius:12px;padding:.95em 1.15em;margin-top:.35em;background:var(--panel,#fdfbf5);box-shadow:0 1px 3px rgba(61,57,41,.07)}
.esttitle{display:flex;flex-direction:column;gap:.15em;margin-bottom:.5em}
.esttitle b{color:#2e6b3f}
.esttitle small{color:var(--muted);font-size:.85em}
.estbtns{display:flex;gap:.6em;flex-wrap:wrap}
.estbtn{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--line);border-radius:9px;padding:.5em 1em;text-decoration:none;color:var(--ink,#3d3929);background:#fff;font-weight:600;font-size:.88em;letter-spacing:.005em;box-shadow:0 1px 2px rgba(61,57,41,.05);transition:border-color .15s,color .15s,box-shadow .15s,transform .15s}
.estbtn:hover{border-color:#2e6b3f;color:#2e6b3f;box-shadow:0 2px 6px rgba(61,57,41,.12);transform:translateY(-1px)}
.estbtn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(61,57,41,.08)}
.estbtn .bic{width:1.05em;height:1.05em;flex:none;opacity:.85}
.estbtn:hover .bic{opacity:1}
.estbtn .ego{opacity:.45;transition:transform .15s,opacity .15s;margin-left:.1em}
.estbtn:hover .ego{opacity:1;transform:translateX(2px)}
.estamt{display:block;margin:.3em 0 .1em}
.estamt small{display:block;font-size:.68em;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.estamt em{font-style:normal;font-size:1.18em;font-weight:700;color:var(--ink,#3d3929);font-variant-numeric:tabular-nums}
.reviewcard:hover{border-color:#2e6b3f;box-shadow:0 3px 8px rgba(61,57,41,.13);transform:translateY(-1px)}
.reviewcard .rico .bic{width:1.35em;height:1.35em;color:#2e6b3f}
.reviewcard .rico{font-size:1.2em;color:#2e6b3f}
.reviewcard .rmain{display:flex;flex-direction:column;gap:.1em}
.reviewcard .rmain b{color:#2e6b3f;font-size:.98em}
.reviewcard .rmain small{color:var(--muted);font-size:.82em}
.reviewcard .rgo{color:#2e6b3f;font-weight:700;font-size:1.1em}
/* LOGO-1: the particle logo and its cloud are round — clip the canvas
   to a circle so no square boundary shows around it. */
.thinklogo{border-radius:50%}
.filecard:hover{border-color:var(--accent)}
.filecard .fico{opacity:.7}
.filecard .fsize{color:var(--muted);font-size:.85em}
.filecard.img{flex-direction:column;align-items:flex-start;max-width:340px}
.filecard.img img{max-width:320px;max-height:240px;border-radius:6px;display:block}
.filecard.img span{color:var(--muted);font-size:.82em}
#pending-uploads{display:flex;flex-wrap:wrap;gap:.4em;padding:.3em 0}
.upchip{display:inline-flex;align-items:center;gap:.45em;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.3em .75em;font-size:.85em}
.upchip button{background:none;border:0;color:var(--muted);cursor:pointer;padding:0;font-size:1em}
#attach{background:none;border:1px solid var(--line);border-radius:8px;padding:.4em .6em}
#stop{background:#b91c1c}
pre{position:relative}
.copybtn{position:absolute;top:.4em;right:.4em;font-size:.75em;padding:.2em .6em;background:rgba(255,255,255,.12);color:#e8e6df;border-radius:6px;opacity:.8}
.copybtn:hover{opacity:1}
.copybtn.inline{position:static;margin-left:.6em;background:none;border:1px solid var(--line);color:var(--muted)}
.tail{white-space:pre-wrap}
.evwalk .evsec{margin:.3em 0 .3em .2em;padding-left:.6em;border-left:2px solid var(--line)}
.evwalk .evkey{font-weight:600;font-size:.85em;color:var(--muted);margin-bottom:.15em}
.sugorig{color:var(--muted);font-size:.82em;font-style:italic;margin:.2em 0}
.sugsum{margin:.3em 0;font-size:.92em}
.hljs{background:transparent}
/* ---- Batch 2b r5 + SM-12: prose spacing, reference-window rhythm ---- */
.msg .body p{margin:.45em 0}
.msg .body ul,.msg .body ol{margin:.4em 0 .4em 1.3em;padding-left:.5em}
.msg .body li{margin:.22em 0}
.msg .body h1,.msg .body h2,.msg .body h3{margin:.75em 0 .35em}
.msg .body table{margin:.5em 0}
.artifact{border:1px solid var(--line);border-radius:10px;margin:.6em 0;overflow:hidden;background:#fff;max-width:960px}
.artifact .abar{display:flex;align-items:center;gap:.8em;padding:.4em .7em;background:rgba(0,0,0,.35);color:#e5e7eb;font-size:.82em}
.artifact .aname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.artifact .acta{background:none;border:1px solid #4b5563;border-radius:6px;color:#e5e7eb;padding:.15em .6em;font-size:1em;text-decoration:none;cursor:pointer}
.artifact iframe{display:block;width:100%;height:460px;border:0;background:#fff}
.artifact.big iframe{height:82vh}
.artifact .aerr{padding:1em;color:#991b1b;background:#fee2e2}
/* ---- Batch 2b r6: breathing pulse, woven chips, tight prose ---- */
.think{background:linear-gradient(90deg,var(--muted) 20%,#f8fafc 50%,var(--muted) 80%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rgsshimmer 1.4s linear infinite;font-weight:600}
@keyframes rgsshimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){.think{animation:none;color:var(--muted)}}
.msg .body > :first-child{margin-top:0}
.msg .body > :last-child{margin-bottom:0}
.msg .body li p{margin:.12em 0}
.msg div.body.muted{margin:.25em 0 .55em;color:inherit;opacity:.92}
.toolchip.ok summary::after{content:" \2713";color:var(--ok)}
.toolchip.err summary::after{content:" \2717";color:#ef4444}
/* ---- Batch 2b r7: dim-while-writing, the pulse on its own line ---- */
.msg .body.streaming,.msg div.body.muted{color:#8a8478}
.msg .body.streaming .settled *{color:#8a8478}
.think{display:block;margin:.6em 0 0;font-weight:600;font-size:.92em;color:transparent;background:linear-gradient(90deg,#6b7280 25%,#f8fafc 50%,#6b7280 75%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:rgsshimmer 1.4s linear infinite}
@media (prefers-reduced-motion: reduce){.think{animation:none;background:none;color:#8a8478}}
/* ---- Batch 2b r8: the living gear, ink answers, grey working record ---- */
.msg .body.streaming,.msg .body.streaming .settled *{color:inherit}
.msg div.body.muted{color:#7d7768;font-size:.93em;margin:.2em 0 .45em}
.msg div.body.muted *{color:#7d7768}
.think{display:flex;align-items:center;gap:.55em;margin:.65em 0 0;background:none;color:#8a8478;animation:none;font-weight:500;font-size:.9em}
.thinklogo{width:26px;height:26px;display:block}
.thinktxt{letter-spacing:.02em}
.toolchip{margin:.3em 0}
.msg .body{line-height:1.6}
.msg .body p{margin:.45em 0}
/* ---- r8: the materializing text shimmers (reference-window feel) ---- */
.tail{color:transparent;background:linear-gradient(90deg,#aeb6c0 25%,#ffffff 50%,#aeb6c0 75%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;animation:rgsshimmer 1.5s linear infinite}
@media (prefers-reduced-motion: reduce){.tail{animation:none;background:none;color:inherit}}
/* ---- r9: the tail is rendered markdown; shimmer becomes a soft breath ---- */
.tail{display:block;color:inherit;background:none;-webkit-background-clip:initial;background-clip:initial;animation:rgssoft 1.4s ease-in-out infinite alternate;white-space:normal}
@keyframes rgssoft{from{opacity:.68}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.tail{animation:none;opacity:1}}
.tail > :first-child{margin-top:.5em}

/* EDIT (Batch 3): rewind-not-erase */
.msg.user { position: relative; }
/* Batch 5 (ruled): actions sit BELOW each message, reference-window
   placement — edit/copy under user bubbles, copy/retry under bot
   replies; hover-revealed on desktop, always on for touch. */
.msgact{display:flex;gap:.35em;margin:.15em 0 0;opacity:0;transition:opacity .15s}
.msgact.u{align-self:flex-end}
.msgact button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.8em;padding:.15em .45em;border-radius:6px}
.msgact button:hover{background:var(--chip);color:var(--fg)}
.msg.user:hover + .msgact.u, .msgact.u:hover{opacity:1}
.msg.bot:hover .msgact.a, .msgact.a:hover{opacity:1}
.msg.user.editing { width: 100%; max-width: 40em; }
.editbox { width: 100%; box-sizing: border-box; resize: vertical;
  min-height: 3.2em; font: inherit; }
.editctl { display: flex; gap: .5em; justify-content: flex-end;
  margin-top: .45em; }
/* the kept record, shown to admin on request — dimmed, marked */
.msg.superseded, .notice.superseded { opacity: .45; }
.supertag { display: inline-block; margin: 2px 0 0; font-size: 11px;
  color: #7d7768; border: 1px solid #cfccc2; border-radius: 6px;
  padding: 0 6px; }

/* WEIGHT CHIP (Batch 3): the carried context, always-on, quiet */
#weight-chip { margin-left: auto; align-self: center; font-size: 12px;
  color: #7d7768; border: 1px solid #cfccc2; border-radius: 999px;
  padding: 2px 10px; white-space: nowrap; }
#weight-chip.heavy { color: #d8b45a; border-color: rgba(216,180,90,.5); }
#tier-row { display: flex; }

/* chat search (Batch 3) */
#chat-search { margin: 6px 0; padding: 6px 10px; width: 100%;
  box-sizing: border-box; background: #fff; color: var(--fg);
  border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
#search-results { overflow-y: auto; }
.srhit { display: block; padding: 6px 8px; border-radius: 8px;
  text-decoration: none; color: inherit; }
.srhit:hover { background: var(--chip); }
.srtitle { font-size: 13px; }
.srsnip { font-size: 11.5px; color: #7d7768; margin-top: 2px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; }
.srnone { padding: 8px; font-size: 12.5px; }

/* MOBILE / TABLET (Batch 3) — one codebase, the sidebar as a drawer */
#menu-btn { display: none; }
@media (max-width: 820px) {
  #menu-btn { display: block; position: fixed; top: 10px; left: 10px;
    z-index: 6; background: var(--chip); color: var(--fg);
    border: 1px solid var(--line); border-radius: 8px;
    padding: .35em .6em; font-size: 1em; }
  #sidebar { position: fixed; inset: 0 30% 0 0; z-index: 5;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.5); min-width: 240px; }
  body.drawer-open #sidebar { transform: translateX(0); }
  #messages { padding: 3em 4% 1em; }
  #composer { padding: .6em 4% .8em; }
  .msg { max-width: 100%; }
  .msg .body pre { max-width: 100%; }
  .msg .body table { display: block; overflow-x: auto; }
  .verified { overflow-x: auto; }
  .filecard.img img { max-width: 100%; height: auto; }
  .artifact iframe { width: 100% !important; }
  .tierchip { padding: .28em .55em; font-size: .78em; }
  .tierchip small { display: none; }   /* the model small print
    lives in the button title on a phone — no feature lost, the
    chain is one long-press away */
  #weight-chip { font-size: 10.5px; padding: 1px 7px; }  /* stays
    on — no feature loss; just smaller */
  #input { font-size: 16px; }              /* stops iOS zoom-on-focus */
  .msgact { opacity: 1; }                  /* no hover on touch */
}

/* DEV CONSOLE (Batch 3, admin) */
.devturn { border: 1px solid var(--line); border-radius: 10px;
  padding: .6em .8em; margin: .4em 0; font-size: .85em; }
.devhead { font-weight: 600; }
.devfacts { color: var(--muted); margin: .2em 0 .3em; }
.devthink pre, .devtool pre { white-space: pre-wrap; max-height: 18em;
  overflow-y: auto; background: var(--code); color:#e8e6df; border: 1px solid var(--line);
  border-radius: 8px; padding: .5em .7em; }
.devthink summary, .devtool summary { cursor: pointer;
  color: var(--muted); }
.devtotals { border-top: 1px solid var(--line); margin-top: .6em;
  padding-top: .5em; font-size: .85em; color: var(--muted); }

/* PROJECT DATA (Batch 4 item 9) */
.setform{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:.8em;margin:.8em 0;max-width:70em}
.setsec{border:1px solid var(--line);border-radius:10px;padding:.6em .8em;background:var(--panel)}
.settitle{font-weight:600;font-size:.82em;color:var(--muted);letter-spacing:.05em;margin-bottom:.4em}
.setrow{display:flex;align-items:center;gap:.6em;margin:.25em 0;font-size:.86em}
.setrow span{flex:1;color:var(--fg)}
.setrow input{width:9.5em;text-align:right;font-variant-numeric:tabular-nums;padding:.3em .5em}
.setrow input:disabled{opacity:.55}
.setrow input.changed{border-color:var(--accent)}
.setact{margin:.6em 0 1.2em}

/* BATCH 5 — project page + settings stages (light) */
.projhead{margin:.4em 0 1em;max-width:48em;width:100%;margin-inline:auto}
.projhead h2{margin:.2em 0 .3em}
.projhead button{margin-top:.7em}
.projchats{display:flex;flex-direction:column;gap:6px;max-width:48em;width:100%;margin-inline:auto}
.projchat{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:.7em .9em;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--fg);text-decoration:none}
.projchat:hover{background:var(--chip)}
.setstage{margin:1.1em 0;max-width:70em}
.setstage h3{margin:.2em 0 .1em}
.setmeaning{font-size:.85em;margin-bottom:.6em}
.setgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:.8em}
.setsec{background:#fff}
.setrow span{font-size:.95em}

/* BATCH 5.1 — visual parity from Junaid's screenshots (the spec) */
/* replies read in serif like the reference; UI stays sans */
.msg.bot .body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1em;line-height:1.62}
.msg.bot .body pre,.msg.bot .body code{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:.82em}
/* reply actions are PERSISTENT like the reference; user row stays hover */
.msgact.a{opacity:.8}
/* slim sidebar rows instead of chunky pills */
#sidebar>button,#side-footer button,#admin-tools button{background:none;color:var(--fg);text-align:left;padding:.45em .6em;font-size:.9em;border-radius:7px}
#sidebar>button:hover,#side-footer button:hover,#admin-tools button:hover{background:var(--chip)}
#new-chat{color:var(--accent);font-weight:600}
#chat-search{font-size:.85em}

/* BATCH 5.2 — projects grid + per-project page (screenshot spec) */
.crumb{font-size:.85em;color:var(--muted);margin:.2em 0 1em}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--fg);text-decoration:underline}
.projpage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2em;max-width:76em;width:100%;margin-inline:auto}
.projpage .crumb{grid-column:1 / -1}
.projmain h1{margin:.1em 0 .2em;font-family:'Iowan Old Style','Palatino Linotype',Georgia,serif}
.projdesc{cursor:pointer;margin-bottom:.8em}
.recents-h{margin:1.4em 0 .5em;color:var(--muted);font-size:.85em;text-transform:uppercase;letter-spacing:.06em}
.projrail .railcard{border:1px solid var(--line);border-radius:12px;padding:.9em 1em;background:#fff}
.projrail h4{margin:.1em 0 .5em}
.railbody{font-size:.85em;white-space:pre-wrap;max-height:24em;overflow-y:auto}
.gridhead{display:flex;justify-content:space-between;align-items:center;max-width:76em;width:100%;margin:0 auto .8em}
.gridhead h1{font-family:'Iowan Old Style','Palatino Linotype',Georgia,serif;margin:.2em 0}
.projgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1em;max-width:76em;width:100%;margin-inline:auto}
.projcard{display:flex;flex-direction:column;gap:.4em;border:1px solid var(--line);border-radius:12px;padding:1em 1.1em;background:#fff;color:var(--fg);text-decoration:none;min-height:7em}
.projcard:hover{background:var(--chip)}
.projcard h3{margin:0}
.pcdesc{font-size:.88em;flex:1}
.pcwhen{font-size:.8em}
@media (max-width:820px){.projpage{grid-template-columns:1fr}}

/* BATCH 5.3 — files rail, memory clamp, icon actions */
.railhelp{font-size:.78em;margin:-.3em 0 .5em}
.pflist{display:flex;flex-direction:column;gap:4px;margin-bottom:.5em}
.pfrow{display:flex;align-items:center;gap:.5em;font-size:.85em}
.pfrow .cx{visibility:visible;opacity:.5}
.pfrow .cx:hover{opacity:1;color:var(--bad)}
.railbody.clamped{max-height:9.5em;overflow:hidden;position:relative}
.railbody.clamped::after{content:"";position:absolute;inset:auto 0 0 0;height:2.5em;background:linear-gradient(transparent,#fff)}
.memmore{margin-top:.4em}
.msgact button{font-size:.95em}

/* -- Project data, step 7 (locked design): the pipe IS the page ---- */
.pd-head h3 { margin-bottom: 2px; }
.pd-card { position: relative; background: var(--panel, #fdfbf5);
  border: 1px solid var(--line, #e2dccb); border-radius: 12px;
  padding: 8px; margin: 12px 0; }
.pd-toggle { position: absolute; top: 8px; right: 12px; z-index: 5;
  display: flex; gap: 2px; background: var(--panel2, #f0ebdd);
  border: 1px solid var(--line, #e2dccb); border-radius: 20px;
  padding: 2px; }
.pd-toggle button { font: inherit; font-size: 12px; font-weight: 600;
  border: none; background: transparent; color: inherit;
  padding: 4px 12px; border-radius: 18px; cursor: pointer; }
.pd-toggle button.on { background: #2e6b3f; color: #fff; }
.pd-diagram { position: relative; line-height: 0; }
.pd-diagram img { width: 100%; height: auto; display: block;
  border-radius: 8px; }
.pd-hot { position: absolute; cursor: pointer; border-radius: 12px;
  background: transparent;
  transition: background .16s, box-shadow .16s; }
.pd-hot:hover { background: rgba(62,123,79,.10); }
.pd-hot.active { background: rgba(62,123,79,.13);
  box-shadow: inset 0 0 0 2px #2e6b3f; }
.pd-hotlabel { position: absolute; top: 8px; left: 50%;
  transform: translateX(-50%); display: inline-block; line-height: 1.5;
  font-size: 11px; font-weight: 700; color: #6f6a58;
  background: #fdfbf5; border: 1px solid #e2dccb; border-radius: 20px;
  padding: 3px 12px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .16s; z-index: 4;
  box-shadow: 0 1px 2px rgba(61,57,41,.15); }
.pd-hot:hover .pd-hotlabel, .pd-hot.active .pd-hotlabel { opacity: 1; }
.pd-hot.active .pd-hotlabel { color: #fff; background: #2e6b3f;
  border-color: #2e6b3f; }
.pd-cap { text-align: center; padding: 6px 0 2px; line-height: 1.4; }
.pd-tabs { display: flex; gap: 8px; margin: 4px 0 12px; }
.pd-tab { flex: 1; text-align: center; padding: 9px 4px;
  cursor: pointer; border: 1px solid var(--line, #e2dccb);
  border-radius: 10px; user-select: none; }
.pd-tab b { display: block; font-size: 13px; }
.pd-tab small { display: block; font-size: 11px; opacity: .7;
  margin-top: 2px; }
.pd-tab.active { border-color: #2e6b3f; color: #2e6b3f;
  background: rgba(62,123,79,.08); }
.pd-panel { margin-bottom: 10px; }
.pd-law { margin-top: 12px; font-size: 12px; opacity: .85;
  border-left: 3px solid #2e6b3f; padding: 8px 12px;
  background: var(--panel2, #f0ebdd); border-radius: 0 8px 8px 0; }
.pd-saved { margin-top: 8px; font-size: 12.5px; font-weight: 600;
  color: #2e6b3f; min-height: 18px; }
button.pressed { opacity: .7; }

/* ------------------------------------------------------------------ */
/* THE DOCKED PANEL (panel phase, ruling bw) — review / estimate /    */
/* figures live in a right-docked panel, claude.ai-artifact style.    */
/* The chat keeps its centered column and its margins; when the panel */
/* opens, the chat column slides LEFT and the panel takes the right   */
/* blank space. Maximize expands the panel to the full window.        */
/* ------------------------------------------------------------------ */
#panel { width: 52%; min-width: 460px; display: flex;
  flex-direction: column; background: #f5f1e8;
  border-left: 1px solid var(--line);
  box-shadow: -4px 0 14px rgba(61,57,41,.07); }
#panel.hidden { display: none; }
#panel-head { display: flex; align-items: center; gap: .6em;
  padding: .55em .9em; background: #fdfbf5;
  border-bottom: 1px solid #e2dccb; flex: none; }
#panel-title { flex: 1; font-size: .92em; font-weight: 650;
  color: #3d3929; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
#panel-acts { display: flex; gap: .4em; flex: none; }
.phbtn { background: #f0ebdd; color: #3d3929;
  border: 1px solid #cfc7b0; border-radius: 7px;
  padding: .3em .7em; font-size: .82em; cursor: pointer; }
.phbtn:hover { background: #e9e3d2; }
#panel-body { flex: 1; min-height: 0; overflow: auto;
  background: #f5f1e8; }
/* the chat slides left: its column re-centers inside the narrower
   space beside the panel, keeping its reading width and margins */
body.panel-open #messages { padding: 1.2em max(2.5%, calc(50% - 24em)); }
body.panel-open #composer { padding: .7em 2.5% 1em; }
/* maximize: the panel takes the whole window; the chat waits behind */
body.panel-max #main { display: none; }
body.panel-max #panel { width: 100%; min-width: 0; }
@media (max-width: 1100px) {
  #panel { position: fixed; inset: 0; z-index: 30; width: 100%;
    min-width: 0; }
}

/* ------------------------------------------------------------------ */
/* SM-10 — the home view: centered greeting, reference-window feel     */
/* ------------------------------------------------------------------ */
#home-view { display: flex; align-items: center; justify-content: center;
  min-height: 62%; }
.home-inner { text-align: center; max-width: 34em; }
.home-logo { width: 46px; height: 46px; opacity: .9;
  margin-bottom: .4em; }
.home-hi { font-size: 1.75em; font-weight: 650; color: var(--ink, #3d3929);
  margin: .2em 0 .35em; letter-spacing: -.01em; }
.home-hint { color: var(--muted); font-size: .95em; margin: 0; }

/* ------------------------------------------------------------------ */
/* SM-11 — the effort chip + its menu (reference-window model picker)  */
/* ------------------------------------------------------------------ */
#tiers { position: relative; border: 0; border-radius: 0;
  overflow: visible; }
.tierchip { display: inline-flex; align-items: center; gap: .45em;
  background: transparent; border: 1px solid var(--line);
  border-radius: 9px; padding: .32em .75em; color: var(--muted);
  font-size: .85em; cursor: pointer;
  transition: border-color .14s, background .14s; }
.tierchip:hover { border-color: var(--accent); background:
  rgba(61,57,41,.04); }
.tierchip b { color: inherit; font-weight: 650; }
.tierchip small { opacity: .7; font-size: .85em; }
.tierchip .caret { font-size: .75em; opacity: .6; }
.tiermenu { position: absolute; bottom: calc(100% + 6px); left: 0;
  min-width: 21em; background: var(--panel, #fdfbf5);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 26px rgba(61,57,41,.16); padding: .35em;
  z-index: 40; }
.tiermenu.hidden { display: none; }
.tieritem { display: flex; flex-direction: column; align-items:
  flex-start; gap: .1em; width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: 9px;
  padding: .5em .7em; cursor: pointer; }
.tieritem:hover { background: rgba(61,57,41,.05); }
.tieritem.active { background: rgba(46,107,63,.08); }
.tieritem .tl { font-weight: 650; color: var(--ink, #3d3929);
  display: flex; gap: .5em; align-items: baseline; }
.tieritem .tl small { color: var(--muted); font-weight: 400; }
.tieritem .td { color: var(--muted); font-size: .82em; }

/* ---- the reading round: the professional tray ---- */
.tray-intro{max-width:52em;color:var(--muted);line-height:1.55;margin:.2em 0 1em}
.traytabs{display:flex;gap:.5em;margin:.4em 0 .9em;flex-wrap:wrap}
.traytab{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.45em 1em;font-size:.88em;color:var(--fg);cursor:pointer}
.traytab.on{border-color:#2e6b3f;color:#2e6b3f;font-weight:600;box-shadow:0 1px 3px rgba(61,57,41,.08)}
.traypane.hidden{display:none}
.sug.resolved{border-left:3px solid var(--line);opacity:.75}
.sugstory{margin:.35em 0 .1em;max-width:50em}
.sugstory p{margin:.25em 0;line-height:1.5}
button.small.primaryish{border:1px solid #2e6b3f;color:#2e6b3f;background:#fff;font-weight:600}