/* Sublunar chat illustrations on the BuildableOS recipe (bits 00/01/05/06/08/03, values measured 1:1 from Lovable,
   remapped to Sublunar: neutral ramp with zero chroma, accent = Frozen, font Inter). Our code, no third-party CSS or font. */
.chat{
  --os-depth:#121213; --os-base:#151517; --os-primary:#18181a; --os-secondary:#1d1d20; --os-tertiary:#232326; --os-quat:#2a2a2e;
  --os-transl:rgba(140,143,150,.16); --os-muted:rgba(140,143,150,.08); --os-inverse:rgba(255,255,255,.96);
  --os-fg:#fff; --os-fg2:#e3e4e8; --os-fg3:#b1b3ba; --os-fg4:#8a8d96; --os-fg-inv:#1b1b1d;
  --os-ring:119,119,113; --os-divider:rgba(140,143,150,.40);
  --os-shadow-xs:0 0 0 .5px rgba(var(--os-ring),.32),0 0 0 .5px var(--os-primary),0 0 0 1px #00000029,0 1.5px 0 0 #00000014,0 1.5px 1px -.5px #00000014;
  --os-shadow-sm:var(--os-shadow-xs),0 3.5px 3px -1.5px #00000014;
  --os-shadow-md:var(--os-shadow-sm),0 6.5px 6px -3px #00000014;
  --os-shadow-lg:var(--os-shadow-md),0 12.5px 12px -6px #00000014;
  --os-btn:inset 0 .5px 0 0 #ffffff29,inset 0 -.5px 0 0 #ffffff0a,inset 0 0 0 .5px #ffffff29,0 2px 2px -1px #0000001f,0 4px 4px -2px #0000001f;
  --os-switch-track:inset 0 2px 2px -1px #00000014,inset 0 4px 4px -2px #00000014,inset 0 0 0 .5px #ffffff29;
  --os-switch-thumb:inset 0 .5px 0 0 #fff,inset 0 -.5px 0 0 #fffc,inset 0 0 0 1px #fff,0 2px 2px -1px #0000001f,0 4px 4px -2px #0000001f;
  --os-accent:var(--frozen); --os-accent-tr:rgba(160,189,219,.2);
  border:0;border-radius:20px;background:var(--os-primary);box-shadow:var(--os-shadow-lg),0 30px 80px rgba(0,0,0,.45);
  padding:16px;display:flex;flex-direction:column;gap:12px;font:400 14px/21px var(--font);color:var(--os-fg2)}
.chat-sm{padding:16px}
.ch-head{display:flex;align-items:center;gap:8px;font:400 14px/21px var(--font);color:var(--os-fg);padding:2px 4px}
.ch-head b{font-weight:500}
.ch-pill{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 6px;border-radius:4px;font:500 12px/16px var(--font);color:var(--os-fg3);box-shadow:inset 0 0 0 .5px var(--os-divider);border:0}
.ch-pill.off{color:var(--os-fg2)}
.ch-pill.off i{width:6px;height:6px;border-radius:50%;background:#5bbf6b}
.ch-dots{margin-left:auto;color:var(--os-fg4);letter-spacing:.1em;font-style:normal}
.ch-ask{align-self:flex-end;max-width:86%;background:var(--os-secondary);box-shadow:var(--os-shadow-xs);border-radius:16px;padding:8px 12px;color:var(--os-fg);font:400 14px/21px var(--font)}
.ch-meta{display:flex;align-items:center;gap:6px;font:400 12px/16px var(--font);color:var(--os-fg4);padding:0 4px}
.ch-meta svg{width:8px;height:8px;fill:none;stroke:currentColor;stroke-width:1.3}
.ch-say{color:var(--os-fg2);font:400 14px/21px var(--font);max-width:94%;padding:0 4px}
/* the question card = settings-card recipe (radius 16, 20/24 padding, surface-xs ring stack) + measured option rows */
.qcard{border-radius:16px;background:var(--os-secondary);box-shadow:var(--os-shadow-sm);padding:16px 20px 12px;display:flex;flex-direction:column;gap:10px;margin:2px 0}
.qc-head{display:flex;align-items:center;justify-content:space-between;padding:0}
.qc-title{display:flex;align-items:center;gap:8px;font:500 14px/21px var(--font);color:var(--os-fg)}
.qc-title svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.qc-chev{width:11px;height:8px;fill:none;stroke:var(--os-fg4);stroke-width:1.6;stroke-linecap:round}
.qc-q{font:400 16px/20px var(--font);color:var(--os-fg);padding:0}
.qc-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:400 12px/16px var(--font);padding:0}
.qc-x{height:18px;display:inline-flex;align-items:center;padding:0 6px;border-radius:4px;color:var(--os-fg3);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.55);box-shadow:inset 0 0 0 .5px var(--os-divider);border:0}
.qc-strip em{font-style:normal;color:var(--os-fg4)}
.qc-opts{display:flex;flex-direction:column;gap:2px;padding-top:2px}
.qc-opt{display:flex;align-items:flex-start;gap:6px;padding:4px 6px;border-radius:8px}
.qc-opt.on{background:rgba(255,255,255,.04)}
.qc-radio{flex:none;width:16px;height:16px;margin-top:4px;border-radius:50%;background:var(--os-muted);box-shadow:inset 0 .5px 0 0 #ffffff29,inset 0 -.5px 0 0 #ffffff14,inset 0 0 0 .5px #ffffff52}
.qc-opt.on .qc-radio{background:var(--os-accent);box-shadow:inset 0 .5px 0 0 #ffffff29,inset 0 -.5px 0 0 #ffffff14,inset 0 0 0 .5px #ffffff52}
.qc-opt.on .qc-radio::after{content:"";display:block;width:6px;height:6px;margin:5px;border-radius:50%;background:#fff}
.qc-opt b{display:block;font:500 14px/21px var(--font);color:var(--os-fg)}
.qc-opt span{display:block;font:400 14px/21px var(--font);color:var(--os-fg3)}
.qc-own{flex:1;font:400 14px/21px var(--font);color:var(--os-fg3);background:var(--os-depth);border-radius:8px;padding:6px 10px;box-shadow:inset 0 .5px 0 0 #ffffff14,inset 0 2px 2px -1px #00000014,inset 0 4px 4px -2px #00000014,0 .5px 0 0 #0000001f,inset 0 0 0 .5px var(--os-divider);border:0}
.qc-foot{display:flex;align-items:center;gap:8px;padding:8px 0 0;border-top:.5px solid var(--os-divider);margin-top:4px}
.qc-pager{display:flex;gap:14px;margin-right:auto;padding-left:2px}
.qc-pager svg{width:7px;height:11px;fill:none;stroke:var(--os-fg4);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.qc-b{height:28px;display:inline-flex;align-items:center;padding:4px 9px;border-radius:9999px;font:400 14px/21px var(--font);color:var(--os-fg);background-color:var(--os-base);background-image:linear-gradient(var(--os-transl),var(--os-transl))}
.qc-b.ghost{background:transparent;color:var(--os-fg2)}
.qc-b.fill{background:var(--os-inverse);color:var(--os-fg-inv)}
.ch-src{display:flex;align-items:center;gap:6px;font:400 12px/16px var(--font);color:var(--os-fg4);padding:0 4px}
.ch-src svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.ch-diff{border:0;border-radius:12px;background:var(--os-primary);box-shadow:0 0 0 .5px var(--os-divider);padding:12px 16px;font:400 14px/21px var(--font);color:var(--os-fg)}
.ch-diff b{font-weight:500}
.ch-diff i{font-style:normal;color:var(--os-accent);margin-left:6px}
.ch-diff code{display:block;margin-top:2px;font:12px/16px ui-monospace,"SF Mono",Menlo,monospace;color:var(--os-fg4)}
/* composer = the prompt bar: radius 20, padding 16/16/12, 28px pills, inverse send */
.ch-reply{margin-top:2px;border:0;border-radius:20px;background:var(--os-secondary);box-shadow:var(--os-shadow-sm);padding:16px 16px 12px;color:var(--os-fg3);font:400 16px/24px var(--font)}
.ch-reply div{display:flex;align-items:center;gap:6px;margin-top:10px;font:400 14px/21px var(--font);color:var(--os-fg)}
.ch-reply div::before{content:"+";width:28px;height:28px;border-radius:9999px;display:inline-grid;place-items:center;font:400 18px/1 var(--font);color:var(--os-fg2);background-image:linear-gradient(var(--os-transl),var(--os-transl))}
.ch-reply div span{height:28px;display:inline-flex;align-items:center;padding:4px 6px 4px 9px;border-radius:9999px;font:400 14px/21px var(--font);color:var(--os-fg);background-image:linear-gradient(var(--os-transl),var(--os-transl));margin-left:auto}
.ch-reply div span::after{content:"";width:8px;height:5px;margin-left:6px;border-right:1.5px solid var(--os-fg3);border-bottom:1.5px solid var(--os-fg3);transform:rotate(45deg) translate(-2px,-2px)}
.ch-reply kbd{width:28px;height:28px;margin:0;display:inline-grid;place-items:center;border:0;border-radius:9999px;background:var(--os-inverse);color:var(--os-fg-inv);font:500 14px/1 var(--font);padding:0}
/* offline switch on the measured 32×20 recipe */
.pv-text .offline{max-width:520px;border:0;border-radius:16px;background:var(--bg-2);box-shadow:0 0 0 .5px rgba(119,119,113,.32),0 0 0 1px #00000029,0 1.5px 0 0 #00000014}
.pv-text .switch{width:32px;height:20px;border-radius:10px;background:rgba(140,143,150,.16);border:0;box-shadow:inset 0 2px 2px -1px #00000014,inset 0 4px 4px -2px #00000014,inset 0 0 0 .5px #ffffff29}
.pv-text .switch i{top:2px;left:2px;width:16px;height:16px;background:#fff;box-shadow:inset 0 .5px 0 0 #fff,inset 0 -.5px 0 0 #fffc,inset 0 0 0 1px #fff,0 2px 2px -1px #0000001f,0 4px 4px -2px #0000001f}
.pv-text .switch.on{background:var(--frozen);border:0;box-shadow:inset 0 0 0 .5px #ffffff52}
.pv-text .switch.on i{transform:translateX(12px);background:#fff}

/* the prompt bar with its notice strip on top: outer surface radius 24, notice 12/16, composer nested radius 20 */
.ch-comp{margin-top:2px;border-radius:24px;background:var(--os-primary);box-shadow:var(--os-shadow-sm)}
.cc-notice{display:flex;align-items:center;gap:8px;padding:10px 12px 10px 16px;font:400 14px/21px var(--font);color:var(--os-fg)}
.cc-notice>svg{width:18px;height:18px;fill:none;stroke:var(--os-fg2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cc-msg{font-weight:500}
.cc-info{width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--os-fg4);color:var(--os-fg4);font:500 10px/15px var(--font);text-align:center;font-style:normal;flex:none}
.cc-act{margin-left:auto;height:32px;display:inline-flex;align-items:center;padding:0 14px;border-radius:9999px;background:var(--os-inverse);color:var(--os-fg-inv);font:400 14px/21px var(--font)}
.cc-x{width:28px;height:28px;display:inline-grid;place-items:center;border-radius:9999px;color:var(--os-fg2)}
.cc-x svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.cc-bar{border-radius:20px;background:var(--os-secondary);box-shadow:var(--os-shadow-sm);padding:16px 16px 12px;display:flex;flex-direction:column;gap:10px}
.cc-text{font:400 16px/24px var(--font);color:var(--os-fg3);min-height:24px}
.cc-row{display:flex;align-items:center;gap:6px}
.cc-plus,.cc-mic,.cc-stop{width:28px;height:28px;border-radius:9999px;display:inline-grid;place-items:center;color:var(--os-fg);background-image:linear-gradient(var(--os-transl),var(--os-transl))}
.cc-plus svg,.cc-mic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cc-mode{margin-left:auto;height:28px;display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 9px;border-radius:9999px;font:400 14px/21px var(--font);color:var(--os-fg);background-image:linear-gradient(var(--os-transl),var(--os-transl))}
.cc-mode svg{width:10px;height:7px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.cc-stop{background:var(--os-inverse);color:var(--os-fg-inv)}
.cc-stop i{width:10px;height:10px;border-radius:2px;background:var(--os-fg-inv)}
@media (max-width:480px){.cc-msg{font-size:13px}.cc-act{padding:0 10px}}