/* Chimera's shop: design system (spec section 2). Dark is primary; light is derived. */
@font-face{font-family:"Inter";src:url(/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces.woff2) format("woff2");font-weight:100 900;font-display:swap}
/* metric-matched fallbacks to prevent layout shift while the web fonts load */
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:"Fraunces Fallback";src:local("Georgia");size-adjust:104%;ascent-override:95%;descent-override:25%;line-gap-override:0%}

:root{
  --ink:#0F1115;--ink-2:#161A21;--ink-3:#1F242E;
  --paper:#F3EFE6;--paper-2:#B9B3A6;
  --ember:#D9772E;--ember-2:#F0A35A;--ember-ink:#0F1115;
  --moss:#4F8A6B;--clay:#B84A3C;--gold:#C9A24A;
  --bg:var(--ink);--panel:var(--ink-2);--line:var(--ink-3);--text:var(--paper);--muted:var(--paper-2);--field:var(--ink-3);
  --link:#E9A56B;--shadow:none;
  --sans:"Inter","Inter Fallback",system-ui,sans-serif;--serif:"Fraunces","Fraunces Fallback",Georgia,serif;
  --gutter:16px;--max:1120px;--read:680px;--r:12px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#F6F3EC;--panel:#FFFFFF;--line:#E3DED2;--text:#15181E;--muted:#5C6170;--field:#FFFFFF;--link:#9A4F16;
  --gold:#8A6A1C;--moss:#2F6B4D;--clay:#9C3528;--shadow:0 1px 2px rgba(21,24,30,.04),0 8px 24px rgba(21,24,30,.06);color-scheme:light}}
:root[data-theme="light"]{
  --bg:#F6F3EC;--panel:#FFFFFF;--line:#E3DED2;--text:#15181E;--muted:#5C6170;--field:#FFFFFF;--link:#9A4F16;
  --gold:#8A6A1C;--moss:#2F6B4D;--clay:#9C3528;--shadow:0 1px 2px rgba(21,24,30,.04),0 8px 24px rgba(21,24,30,.06);color-scheme:light}
@media (min-width:768px){:root{--gutter:32px}}
@media (min-width:1100px){:root{--gutter:48px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (min-width:768px){body{font-size:17px}}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:3px;transition:color .12s}
a:hover{color:var(--ember-2)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:1.12;margin:0 0 .5em;font-optical-sizing:auto;text-wrap:balance}
h1{font-size:clamp(2.1rem,7vw,4rem)}
h2{font-size:clamp(1.6rem,4.2vw,2.125rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
.num,.price,time,.amount{font-variant-numeric:tabular-nums}
.label{font:600 13px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.small{font-size:15px;color:var(--muted)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--panel);color:var(--text);padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.wrap{width:100%;max-width:calc(var(--max) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:calc(var(--read) + var(--gutter)*2);margin:0 auto;padding:48px var(--gutter)}
.i{width:20px;height:20px;flex:none}

/* header */
.site-header{position:sticky;top:0;z-index:20;height:64px;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar{height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font:500 1.35rem/1 var(--serif)}
.brand:hover{color:var(--text)}
.mark{width:24px;height:24px;color:var(--ember)}
.site-header nav{display:flex;align-items:center;gap:6px}
.site-header nav a:not(.btn){color:var(--text);text-decoration:none;font-weight:500;font-size:15px;padding:10px 8px;border-radius:8px}
.site-header nav a:not(.btn):hover{color:var(--ember-2)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;background:none;color:var(--muted);border-radius:8px;cursor:pointer}
.theme-toggle:hover{color:var(--text)}
.only-light{display:none}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .only-dark{display:none}:root:not([data-theme="dark"]) .only-light{display:block}}
:root[data-theme="light"] .only-dark{display:none}:root[data-theme="light"] .only-light{display:block}
@media (max-width:640px){.site-header nav a[href="/how"],.site-header nav a[href="/work"]{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:10px;font:600 16px/1 var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .12s,color .12s,border-color .12s}
.btn-ember{background:var(--ember);color:var(--ember-ink)}
.btn-ember:hover{background:var(--ember-2);color:var(--ember-ink)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--muted);color:var(--text)}
.btn-sm{min-height:40px;padding:0 16px;font-size:15px}
.btn-block{width:100%}
.btn[disabled]{opacity:.6;cursor:progress}
.link{font-weight:600;text-decoration:none}

/* sections */
.section{padding:64px 0;border-top:1px solid var(--line)}
@media (min-width:768px){.section{padding:96px 0}}
.section-head{max-width:var(--read);margin-bottom:32px}
.hero{padding:72px 0 64px}
@media (min-width:768px){.hero{padding:120px 0 104px}}
.hero h1{max-width:15ch;margin-bottom:.35em}
.hero h1 .l2{display:block;color:var(--muted);font-size:.62em;line-height:1.25;margin-top:.45em;max-width:26ch}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:32px}

/* cards & grids */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.grid-4{list-style:none;margin:0;padding:0;display:grid;gap:16px}
@media (min-width:700px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.grid-4{grid-template-columns:repeat(4,1fr)}}
.svc{display:flex;flex-direction:column;gap:8px}
.svc h3{margin:0}
.svc .for{color:var(--muted);font-size:15px;flex:1;margin:0}
.price{margin:8px 0 4px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.price .num{font:500 1.5rem/1 var(--serif)}
.price .turn{color:var(--muted);font-size:15px}
.fixed-note{margin-top:20px;color:var(--muted);font-size:15px}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:s}
@media (min-width:860px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{counter-increment:s;border-top:1px solid var(--line);padding-top:16px}
.steps li::before{content:counter(s,decimal-leading-zero);font:600 13px/1 var(--sans);letter-spacing:.08em;color:var(--ember);display:block;margin-bottom:12px}
.steps h3{font-size:1.2rem;margin-bottom:6px}
.steps p{color:var(--muted);margin:0;font-size:15px}

.promise{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media (min-width:860px){.promise{grid-template-columns:repeat(3,1fr);gap:24px}}
.promise li{font:500 1.35rem/1.3 var(--serif);padding-left:16px;border-left:2px solid var(--line)}

.about-her{max-width:var(--read);font:400 1.2rem/1.6 var(--serif)}
.pics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pics img{border-radius:var(--r);aspect-ratio:1;object-fit:cover;width:100%;background:var(--panel)}
.caption{margin-top:12px}

/* work page */
.service{padding:40px 0;border-top:1px solid var(--line);scroll-margin-top:80px}
.service:first-of-type{border-top:0;padding-top:8px}
.service-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px}
.service .for{font-size:1.1rem;max-width:var(--read)}
.service .hers{color:var(--muted);max-width:var(--read)}
.cols{display:grid;gap:24px;margin:24px 0}
@media (min-width:760px){.cols{grid-template-columns:1fr 1fr;gap:48px}}
.cols h3.label{margin:0 0 8px}
.cols p{color:var(--muted)}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{padding:6px 0 6px 22px;position:relative;border-bottom:1px solid var(--line)}
.ticks li::before{content:"";position:absolute;left:2px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--moss)}
.fixed{font-weight:600}

/* prose (how / legal / about) */
.prose{max-width:var(--read)}
.prose h2{margin-top:1.6em;font-size:1.6rem}
.prose li{margin:.35em 0}
.page-head{padding:56px 0 8px}
@media (min-width:768px){.page-head{padding:88px 0 16px}}
.page-head p{color:var(--muted);max-width:var(--read);font-size:1.1rem}

/* forms */
form .field{margin-bottom:28px}
label,.legend{display:block;font-weight:600;margin-bottom:8px}
.hint{display:block;font-size:15px;color:var(--muted);font-weight:400;margin:-4px 0 8px}
input[type=text],input[type=email],input[type=date],input:not([type]),select,textarea{width:100%;font:inherit;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-height:48px}
:root:not([data-theme="light"]) input,:root:not([data-theme="light"]) select,:root:not([data-theme="light"]) textarea{border-color:#2B3240}
textarea{min-height:160px;resize:vertical;line-height:1.55}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ember);outline-offset:1px}
fieldset{border:0;margin:0 0 28px;padding:0;min-width:0}
legend{padding:0}
.radios{display:grid;gap:10px}
@media (min-width:700px){.radios{grid-template-columns:1fr 1fr}}
.radio-card{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;cursor:pointer;margin:0;font-weight:400}
.radio-card:has(input:checked){border-color:var(--ember)}
.radio-card input{margin-top:4px;accent-color:var(--ember);width:18px;height:18px;flex:none}
.rc-name{display:block;font-weight:600}
.rc-meta{display:block;color:var(--muted);font-size:15px}
.check{display:flex;gap:10px;align-items:center;font-weight:400;margin-top:10px}
.check input{width:18px;height:18px;accent-color:var(--ember)}
.row2{display:grid;gap:0 16px}
@media (min-width:700px){.row2{grid-template-columns:1fr 1fr}}
.err{color:#E58A7E;font-size:15px;margin-top:8px;font-weight:500}
:root[data-theme="light"] .err{color:var(--clay)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .err{color:var(--clay)}}
[aria-invalid="true"]{border-color:var(--clay)!important}
.counter{float:right;font-weight:400;font-size:13px;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:16px}
.notice{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--ember);border-radius:var(--r);padding:20px}

/* thread: correspondence, not chat */
.thread-head{margin:32px 0 8px}
.badge{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;padding:8px 12px;border-radius:999px;border:1px solid var(--line);color:var(--text)}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted)}
.badge[data-state="paid"]::before,.badge[data-state="in progress"]::before,.badge[data-state="delivered"]::before{background:var(--moss)}
.badge[data-state="quoted"]::before{background:var(--gold)}
.badge[data-state="declined"]::before,.badge[data-state="refunded"]::before{background:var(--clay)}
.badge[data-state="new"]::before,.badge[data-state="scoping"]::before,.badge[data-state="revision"]::before{background:var(--ember)}
.meaning{color:var(--muted);margin:8px 0 0;font-size:15px}
.meta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:20px}
@media (min-width:760px){.meta-grid{grid-template-columns:repeat(4,1fr)}}
.meta-grid dt{font:600 13px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.meta-grid dd{margin:4px 0 0}
.quote-box{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.amount{font:500 clamp(2.2rem,8vw,3rem)/1 var(--serif);color:var(--gold);margin:4px 0 10px}
.letters{list-style:none;margin:24px 0 0;padding:0}
.letter{padding:24px 0;border-top:1px solid var(--line)}
.letter-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:10px}
.letter-who{font:500 1.15rem/1.2 var(--serif)}
.letter[data-author="chimera"] .letter-who{color:var(--ember)}
.letter[data-author="system"]{padding:16px 0}
.letter[data-author="system"] .letter-body{color:var(--muted);font-size:15px}
.letter time{color:var(--muted);font-size:13px}
.letter-body{white-space:pre-wrap;overflow-wrap:anywhere}
.attachments{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.attachments a{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--text);background:var(--panel)}
.attachments a:hover{border-color:var(--muted);color:var(--text)}
.attachments .deliverable{border-color:var(--moss)}
.attachments small{color:var(--muted);margin-left:auto}
.reply{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}

/* approval pages (Craig) */
.approve .amount{margin:12px 0 16px}
.approve form{margin-top:24px}
.approve details{margin:16px 0;color:var(--muted)}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:28px 0 40px;color:var(--muted);font-size:14px}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--ember-2)}
.foot p{margin:0}

/* errors */
.error-page{min-height:60vh;display:flex;flex-direction:column;justify-content:center}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* FAQ */
.faq{display:grid;gap:10px;margin-top:8px}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:0 18px}
.faq-item summary{cursor:pointer;font-weight:600;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--ember);font-weight:400;font-size:1.3rem;line-height:1}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{color:var(--muted);margin:0 0 16px}

/* hero -> work section: keep the gap tight (about 60px on phones) */
.hero + .section{padding-top:28px}
.hero{padding-bottom:32px}
@media (min-width:768px){.hero{padding-bottom:56px}.hero + .section{padding-top:56px}}
.door{max-width:var(--read);color:var(--muted);margin:12px 0 0}
.door + .door{margin-top:8px}
.about-plain{margin-top:-4px;margin-bottom:24px;max-width:var(--read)}

/* Chimera's portrait (About section) */
.portrait{margin:0 0 24px;max-width:280px;width:60%}
.portrait img{width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line);background:var(--panel)}
.portrait figcaption{margin-top:8px}

/* ---------- credits ---------- */
.lead-in{font-size:1.15rem;color:var(--muted)}
.credit-steps{padding-left:1.2em;margin:24px 0 32px}
.credit-steps li{margin:10px 0}
.buy-card{margin:32px 0}
.packs{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.pack{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.pack-name{font-weight:600}
.pack-usd{color:var(--muted);font-weight:400;margin-left:6px;font-variant-numeric:tabular-nums}
.qty{display:inline-flex;align-items:center;gap:6px}
.qty output{min-width:2ch;text-align:center;font-variant-numeric:tabular-nums}
.qty-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--field);color:var(--text);font-size:1.2rem;cursor:pointer}
.qty-btn:hover{border-color:var(--muted)}
.cart-total{font-size:1.1rem;margin:0 0 12px;font-variant-numeric:tabular-nums}
.amount-usd{font-size:.45em;color:var(--muted);font-family:var(--sans);margin-left:8px}
.balance{margin:0 0 14px}
.sub-actions{margin-top:12px;font-size:15px;color:var(--muted)}
.link-btn{background:none;border:0;padding:0;color:var(--link);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link-btn:hover{color:var(--ember-2)}
.locked{margin-top:12px}
.previews{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.preview img,.preview iframe{width:100%;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.preview iframe{height:70vh;min-height:420px}
.preview .small{margin:6px 0 0}
.balance-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 8px}
.balance-grid .amount{color:var(--text);margin:4px 0}
.job-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.job-list li{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ledger{width:100%;border-collapse:collapse;font-size:15px}
.ledger th,.ledger td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}
.ledger td.num{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:640px){.site-header nav a[href="/credits"]{display:none}}

.check.agree{align-items:flex-start;font-weight:400;font-size:15px;line-height:1.5;margin:4px 0 16px}
.check.agree input{margin-top:3px;flex:none}

/* her introduction at the top of the home page */
.intro{padding:32px 0 8px}
.intro .portrait{margin-bottom:20px}
.intro .about-her{margin-bottom:8px}
.intro + .hero{padding-top:32px}
@media (min-width:768px){
  .intro{padding:64px 0 16px}
  .intro-grid{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:center}
  .intro .portrait{width:100%;margin:0}
  .intro + .hero{padding-top:48px}
}

/* Sign in / Account: always visible */
.site-header nav a.nav-account{border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.site-header nav a.nav-account:hover{border-color:var(--muted)}
@media (max-width:420px){
  .site-header .bar{gap:6px}
  .brand{font-size:1.2rem;gap:8px}
  .site-header nav{gap:4px}
  .site-header nav .btn-sm{padding:0 12px;font-size:14px}
  .site-header nav a.nav-account{padding:8px 10px;font-size:14px}
  .theme-toggle{width:34px}
}
/* credits on the home page */
.credits-grid{display:grid;gap:24px}
.credits-home .buy-card{margin:0}
.credit-facts{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.credit-facts li{padding-left:16px;border-left:2px solid var(--line);color:var(--muted)}
.credit-facts strong{display:block;color:var(--text)}
@media (min-width:860px){.credits-grid{grid-template-columns:1.1fr .9fr;align-items:start;gap:48px}}

/* Chimera's presence dot (Addendum B) */
.presence{display:inline-flex;align-items:center;gap:8px;padding:0 6px;font-size:14px;line-height:1.2;color:var(--text)}
.presence-dot{width:10px;height:10px;border-radius:50%;background:#B9B3A6;flex:none}
[data-presence="online"] .presence-dot{background:#4F8A6B}
[data-presence="working"] .presence-dot{background:#D9772E}
.presence-text{display:flex;flex-direction:column}
.presence-sub{font-size:12px;color:var(--muted)}
[data-presence="online"] .presence-sub,[data-presence="working"] .presence-sub{display:none}
@media (max-width:640px){.presence-text{display:none}.presence{padding:0 4px}}

.about-block .about-her{font-size:1.1rem;margin:0 0 .9em}
.about-block .about-her:first-child{font-size:1.2rem}

.letter[data-author="to_owner"],.letter[data-author="owner"]{border-left:3px solid var(--muted)}
/* small phones (360px wide): keep header buttons on one line */
.site-header nav a,.site-header nav .btn-sm{white-space:nowrap}
@media (max-width:380px){
  .brand{font-size:1.1rem;gap:6px}
  .site-header nav{gap:2px}
  .site-header nav .btn-sm{padding:0 9px;font-size:13px}
  .site-header nav a.nav-account{padding:7px 8px;font-size:13px}
  .theme-toggle{width:30px}
  .presence{padding:0 2px}
}

/* thank-you note on the job page right after sending */
.welcome-note{border:1px solid var(--line);border-left:4px solid #4F8A6B;border-radius:14px;padding:16px 18px;margin:0 0 20px;background:var(--surface,transparent)}
.welcome-note p{margin:0;color:var(--muted)}
.welcome-note .welcome-title{color:var(--text);font-weight:700;font-size:1.1rem;margin-bottom:6px}

/* job page: buy-now button and closed-reply note */
.btn-buy{font-size:1.1rem;min-height:56px}
.reply-closed{margin-top:24px;padding:12px 14px;border:1px dashed var(--line);border-radius:12px}

/* talk to Chimera */
@media (max-width:900px){.site-header nav a[href="/chat"]{display:none}}
.chat-band-card{display:flex;flex-direction:column;gap:16px;align-items:flex-start;padding:22px}
.chat-band-card h2{margin:4px 0 8px}
.chat-band-card p{margin:0}
@media (min-width:760px){.chat-band-card{flex-direction:row;align-items:center;justify-content:space-between;gap:32px}}
.chat-rules{padding-left:18px;margin:12px 0 24px}
.chat-rules li{margin:4px 0}
.chat-card{padding:20px;margin:20px 0}
.chat-count{text-align:right;margin:4px 0 0}
.chat-log{list-style:none;padding:0;margin:16px 0;display:flex;flex-direction:column;gap:12px}
.bubble{max-width:88%;padding:12px 14px;border-radius:16px;border:1px solid var(--line)}
.bubble[data-author="client"]{align-self:flex-end;border-bottom-right-radius:6px}
.bubble[data-author="chimera"]{align-self:flex-start;border-bottom-left-radius:6px;border-left:3px solid #D9772E}
.bubble[data-author="system"]{align-self:center;max-width:100%;font-size:14px;color:var(--muted);border-style:dashed}
.bubble-head{display:flex;gap:10px;align-items:baseline;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:4px}
.bubble-head strong{color:var(--text)}
.bubble-body{white-space:pre-wrap;overflow-wrap:anywhere}
.chat-status{padding:10px 14px;border:1px dashed var(--line);border-radius:12px;color:var(--muted)}
.chat-status.waiting{border-color:#4F8A6B;color:var(--text)}

/* every preview carries a visible PREVIEW mark on the page, whatever the file itself looks like */
li.preview{position:relative;overflow:hidden}
li.preview::after{content:"";position:absolute;inset:6% 12% calc(2.2em + 6%) 12%;pointer-events:none;
  background:url(/img/watermark-fox.png) center/contain no-repeat;opacity:.25}
li.preview img,li.preview iframe{-webkit-user-drag:none;user-select:none}