/* ============================================================================
SolarCompute — homepage stylesheet (AI-interface redesign)
----------------------------------------------------------------------------
Restyles the EXISTING homepage markup. No HTML IDs/classes are renamed, so
home.js / workload-client.js / includes.js keep working untouched.
Built entirely on the tokens already defined in site.css:
--bg #071019 --bg-soft #0b1220 --panel --panel-border
--text #e5e7eb --muted #a7b3c2 --accent #d89b2b --accent-strong #f5b841
--line --shadow --radius-lg/md/sm --container
Everything is scoped under body.home-page so it can only ever affect the
homepage, even though this file is only loaded here.
Requires: and (optional) the Space Grotesk .
============================================================================ */
body.home-page{
/* homepage-local additions, all derived from existing accent tokens */
--sc-display: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
--sc-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
--sc-glow: rgba(245, 184, 65, 0.16);
--sc-glow-strong: rgba(245, 184, 65, 0.34);
--sc-accent-tint: rgba(216, 155, 43, 0.12);
--sc-accent-line: rgba(216, 155, 43, 0.35);
--sc-surface: rgba(255, 255, 255, 0.03);
}
/* ============================ HERO / COMPOSER ============================== */
body.home-page .home-hero{
position: relative;
padding: clamp(56px, 9vw, 104px) 0 clamp(40px, 5vw, 60px);
overflow: hidden;
text-align: center;
}
/* ambient solar glow behind the prompt bar — the page's signature moment */
body.home-page .home-hero::before{
content: "";
position: absolute;
left: 50%;
top: 190px;
width: min(860px, 92vw);
height: 460px;
transform: translateX(-50%);
background: radial-gradient(ellipse at center,
var(--sc-glow-strong), var(--sc-glow) 40%, transparent 70%);
filter: blur(8px);
pointer-events: none;
z-index: 0;
animation: sc-breathe 9s ease-in-out infinite;
}
@keyframes sc-breathe{
0%, 100% { opacity: .8; transform: translateX(-50%) scale(1); }
50% { opacity: 1; transform: translateX(-50%) scale(1.06); }
}
body.home-page .home-hero-inner{
position: relative;
z-index: 1;
max-width: 780px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
/* live status pill above the headline */
body.home-page .home-hero-status{
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 22px;
padding: 7px 15px;
font-family: var(--sc-mono);
font-size: 12.5px;
letter-spacing: .01em;
color: var(--muted);
background: rgba(8, 18, 28, 0.6);
border: 1px solid var(--panel-border);
border-radius: 999px;
backdrop-filter: blur(6px);
}
body.home-page .home-hero-status b{ color: var(--text); font-weight: 500; }
body.home-page .hero-dot{
position: relative;
width: 8px; height: 8px; flex: none;
border-radius: 50%;
background: var(--accent-strong);
box-shadow: 0 0 10px 1px rgba(245,184,65,.7);
}
body.home-page .hero-dot::after{
content: "";
position: absolute; inset: -4px;
border-radius: 50%;
background: var(--accent-strong);
opacity: .35;
animation: sc-pulse 2.4s ease-out infinite;
}
@keyframes sc-pulse{
0% { transform: scale(1); opacity: .4; }
70%,100% { transform: scale(2.6); opacity: 0; }
}
body.home-page .home-hero h1{
font-family: var(--sc-display);
font-weight: 500;
font-size: clamp(32px, 5.4vw, 52px);
line-height: 1.05;
letter-spacing: -.025em;
margin: 0 0 14px;
color: var(--text);
}
body.home-page .home-hero-copy{
max-width: 52ch;
margin: 0 auto;
color: var(--muted);
font-size: clamp(15.5px, 2vw, 18px);
line-height: 1.5;
}
/* ---- the launcher (composer box) — the star element -------------------- */
body.home-page .home-launcher{
width: 100%;
max-width: 720px;
margin: 34px auto 0;
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
border: 1px solid var(--panel-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
overflow: hidden;
text-align: left;
transition: border-color .2s ease, box-shadow .25s ease;
}
body.home-page .home-launcher:focus-within{
border-color: var(--sc-accent-line);
box-shadow: 0 0 0 4px var(--sc-accent-tint),
0 0 70px -12px var(--sc-glow-strong),
var(--shadow);
}
body.home-page .home-launcher #homePrompt,
body.home-page #homePrompt{
width: 100%;
min-height: 62px;
max-height: 260px;
border: none;
outline: none;
resize: none;
background: transparent;
color: var(--text);
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
font-size: 16.5px;
line-height: 1.5;
padding: 20px 20px 8px;
}
body.home-page #homePrompt::placeholder{ color: rgba(167,179,194,.6); }
body.home-page .home-launcher-footer{
display: flex;
align-items: center;
gap: 12px;
padding: 12px 12px 14px 16px;
border-top: 1px solid var(--line);
flex-wrap: wrap;
}
/* mode tabs (Ask AI / Create Image / CPU Task) — segmented pills */
body.home-page .home-launcher-types{
display: inline-flex;
gap: 4px;
padding: 4px;
background: rgba(0,0,0,.22);
border: 1px solid var(--panel-border);
border-radius: 999px;
}
body.home-page .home-launcher-type{
appearance: none;
border: none;
background: transparent;
color: var(--muted);
font-family: Inter, sans-serif;
font-size: 13.5px;
font-weight: 500;
padding: 8px 15px;
border-radius: 999px;
cursor: pointer;
white-space: nowrap;
transition: color .16s ease, background .16s ease;
}
body.home-page .home-launcher-type:hover{ color: var(--text); }
body.home-page .home-launcher-type.active,
body.home-page .home-launcher-type[aria-pressed="true"]{
background: linear-gradient(135deg, var(--accent), var(--accent-strong));
color: #071019;
font-weight: 600;
}
body.home-page .home-launcher-type:focus-visible{
outline: 2px solid var(--accent-strong);
outline-offset: 2px;
}
/* submit button lives at the far right of the footer bar */
body.home-page .home-launcher-submit{
margin-left: auto;
min-height: 42px;
padding: 0 20px;
font-size: 14.5px;
border-radius: 12px;
white-space: nowrap;
}
/* example prompt chips (populated by home.js into #homeLauncherExamples) */
body.home-page .home-launcher-examples{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
max-width: 680px;
margin: 20px auto 0;
position: relative;
z-index: 1;
}
body.home-page .home-launcher-example{
appearance: none;
cursor: pointer;
font-size: 13px;
color: var(--muted);
background: var(--sc-surface);
border: 1px solid var(--panel-border);
border-radius: 999px;
padding: 8px 14px;
transition: color .16s, border-color .16s, transform .12s;
}
body.home-page .home-launcher-example:hover{
color: var(--text);
border-color: var(--sc-accent-line);
transform: translateY(-1px);
}
/* submit status + live workflow tracker (injected by home.js) */
body.home-page .home-launcher-status{
max-width: 720px;
margin: 18px auto 0;
padding: 0 4px;
color: var(--muted);
font-size: 14px;
position: relative;
z-index: 1;
}
body.home-page .sc-live-workflow{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-top: 8px;
}
body.home-page .sc-flow-step{
text-align: center;
padding: 12px 6px;
border: 1px solid var(--panel-border);
border-radius: var(--radius-sm);
background: var(--sc-surface);
}
body.home-page .sc-flow-step strong{
display: block;
font-size: 13px;
color: var(--text);
}
body.home-page .sc-flow-step small{
font-family: var(--sc-mono);
font-size: 10.5px;
color: var(--muted);
}
body.home-page .sc-flow-step.is-active{
border-color: var(--sc-accent-line);
background: var(--sc-accent-tint);
box-shadow: 0 0 40px -18px var(--sc-glow-strong);
}
body.home-page .sc-flow-step.is-active strong{ color: var(--accent-strong); }
body.home-page .sc-flow-step.is-complete{ border-color: rgba(216,155,43,.25); }
body.home-page .sc-flow-step.is-complete strong{ color: var(--accent); }
body.home-page .home-result-actions{
display: flex;
gap: 10px;
flex-wrap: wrap;
}
/* ============================ RESULT FEEDS ================================ */
body.home-page .home-results-heading{
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 26px;
}
body.home-page .home-results-heading h2{
font-family: var(--sc-display);
font-weight: 500;
letter-spacing: -.02em;
margin: 10px 0 6px;
}
body.home-page .home-results-heading p{ color: var(--muted); margin: 0; max-width: 48ch; }
body.home-page .home-results-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
/* the cards are generated by home.js as */
body.home-page .home-result-card{
display: flex;
flex-direction: column;
gap: 10px;
padding: 18px;
border-radius: var(--radius-md);
background: var(--panel);
border: 1px solid var(--panel-border);
text-decoration: none;
color: var(--text);
transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
body.home-page a.home-result-card:hover{
border-color: var(--sc-accent-line);
background: rgba(255,255,255,.05);
transform: translateY(-3px);
}
body.home-page .home-result-card .card-tag{
align-self: flex-start;
font-family: var(--sc-mono);
font-size: 10.5px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--accent-strong);
background: var(--sc-accent-tint);
border: 1px solid var(--sc-accent-line);
padding: 3px 9px;
border-radius: 999px;
}
body.home-page .home-result-card h3{
font-size: 15.5px;
font-weight: 600;
line-height: 1.35;
margin: 0;
color: var(--text);
}
body.home-page .home-result-copy{
font-size: 13.5px;
line-height: 1.5;
color: var(--muted);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
body.home-page .home-result-meta{
margin-top: auto;
font-family: var(--sc-mono);
font-size: 11px;
line-height: 1.6;
color: rgba(167,179,194,.72);
}
body.home-page .home-result-image{
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: 10px;
border: 1px solid var(--panel-border);
}
body.home-page .home-result-empty{
grid-column: 1 / -1;
text-align: center;
color: var(--muted);
padding: 34px 18px;
font-size: 14px;
}
/* ============================ WORKLOAD PATH =============================== */
body.home-page .section-heading.center h2{
font-family: var(--sc-display);
font-weight: 500;
letter-spacing: -.02em;
}
body.home-page .home-workload-path{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
position: relative;
margin-top: 34px;
}
/* connective dashed line running through the steps */
body.home-page .home-workload-path::before{
content: "";
position: absolute;
left: 8%; right: 8%; top: 26px;
height: 2px;
background: repeating-linear-gradient(90deg,
var(--sc-accent-line) 0 6px, transparent 6px 14px);
opacity: .5;
z-index: 0;
}
body.home-page .home-workload-step{
position: relative;
z-index: 1;
text-align: center;
padding: 16px 10px 18px;
background: var(--bg-soft);
border: 1px solid var(--panel-border);
border-radius: var(--radius-md);
}
body.home-page .home-workload-step span{
display: inline-block;
font-family: var(--sc-mono);
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 6px;
}
body.home-page .home-workload-step strong{
display: block;
font-size: 15px;
color: var(--text);
}
/* first + last steps carry the accent to bookend the flow */
body.home-page .home-workload-step:first-child,
body.home-page .home-workload-step:last-child{
border-color: var(--sc-accent-line);
box-shadow: 0 0 46px -20px var(--sc-glow-strong);
}
/* ============================ VISION + CTA =============================== */
/* These use generic classes styled in site.css; only light homepage polish. */
body.home-page .split-grid h2{
font-family: var(--sc-display);
font-weight: 500;
letter-spacing: -.02em;
}
body.home-page .final-cta .cta-panel{
position: relative;
overflow: hidden;
}
body.home-page .final-cta .cta-panel::before{
content: "";
position: absolute;
left: 50%; top: -60%;
width: 620px; height: 620px;
transform: translateX(-50%);
background: radial-gradient(circle, var(--sc-glow), transparent 62%);
pointer-events: none;
z-index: 0;
}
body.home-page .final-cta .cta-panel > *{ position: relative; z-index: 1; }
body.home-page .final-cta h2{
font-family: var(--sc-display);
font-weight: 500;
letter-spacing: -.02em;
}
/* ============================ RESPONSIVE ================================= */
@media (max-width: 900px){
body.home-page .home-results-grid{ grid-template-columns: 1fr; }
body.home-page .home-results-heading{
flex-direction: column;
align-items: flex-start;
}
body.home-page .home-workload-path{ grid-template-columns: 1fr; }
body.home-page .home-workload-path::before{ display: none; }
body.home-page .home-workload-step{
display: flex;
align-items: center;
justify-content: flex-start;
gap: 14px;
text-align: left;
padding: 14px 16px;
}
body.home-page .home-workload-step span{ margin: 0; }
body.home-page .sc-live-workflow{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
body.home-page .home-launcher-footer{ gap: 10px; }
body.home-page .home-launcher-types{ width: 100%; justify-content: space-between; }
body.home-page .home-launcher-type{ flex: 1; text-align: center; padding: 8px 8px; }
body.home-page .home-launcher-submit{ margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce){
body.home-page *{ animation: none !important; transition: none !important; }
}
/* ============================================================================
COMPOSER TOOLS — attach (upload) / mic / stop (added)
Wired by /assets/js/home-composer.js. home.js is left untouched.
============================================================================ */
/* footer now holds a left group (attach + tabs) and a right group (mic + send/stop) */
body.home-page .home-launcher-left,
body.home-page .home-launcher-right{
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
body.home-page .home-launcher-left{ flex-wrap: wrap; }
body.home-page .home-launcher-right{ margin-left: auto; }
body.home-page .home-launcher-right .home-launcher-submit{ margin-left: 0; }
/* [hidden] needs !important because .btn / .home-launcher-tool set display */
body.home-page .home-launcher-tool[hidden],
body.home-page .home-launcher-submit[hidden]{ display: none !important; }
/* round icon buttons */
body.home-page .home-launcher-tool{
appearance: none;
cursor: pointer;
width: 40px;
height: 40px;
flex: none;
display: grid;
place-items: center;
border-radius: 11px;
background: var(--sc-surface);
border: 1px solid var(--panel-border);
color: var(--muted);
transition: color .16s, border-color .16s, background .16s, transform .12s;
}
body.home-page .home-launcher-tool svg{ width: 18px; height: 18px; }
body.home-page .home-launcher-tool:hover{
color: var(--text);
border-color: var(--sc-accent-line);
background: rgba(255,255,255,.05);
}
body.home-page .home-launcher-tool:active{ transform: scale(.94); }
body.home-page .home-launcher-tool:focus-visible{
outline: 2px solid var(--accent-strong);
outline-offset: 2px;
}
/* mic while recording — soft red pulse */
body.home-page .home-launcher-tool.is-recording{
color: #ff6b6b;
border-color: rgba(255,107,107,.5);
background: rgba(255,107,107,.10);
animation: sc-rec 1.5s ease-out infinite;
}
@keyframes sc-rec{
0% { box-shadow: 0 0 0 0 rgba(255,107,107,.45); }
70%,100% { box-shadow: 0 0 0 10px rgba(255,107,107,0); }
}
/* stop button */
body.home-page .home-launcher-stop{
color: #ff8f8f;
border-color: rgba(255,120,120,.35);
background: rgba(255,120,120,.08);
}
body.home-page .home-launcher-stop:hover{
color: #fff;
background: #e5484d;
border-color: #e5484d;
}
/* attachment chips (between the textarea and the footer) */
body.home-page .home-launcher-attachments{
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 4px 18px 2px;
}
body.home-page .home-launcher-attachments[hidden]{ display: none; }
body.home-page .sc-attach-chip{
display: inline-flex;
align-items: center;
gap: 8px;
max-width: 230px;
padding: 6px 8px 6px 11px;
font-size: 12.5px;
color: var(--text);
background: rgba(255,255,255,.04);
border: 1px solid var(--panel-border);
border-radius: 10px;
}
body.home-page .sc-attach-chip .n{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.home-page .sc-attach-chip .sz{
color: var(--muted);
font-family: var(--sc-mono);
font-size: 11px;
flex: none;
}
body.home-page .sc-attach-chip button{
appearance: none;
cursor: pointer;
border: none;
background: transparent;
color: var(--muted);
width: 18px;
height: 18px;
flex: none;
display: grid;
place-items: center;
border-radius: 5px;
}
body.home-page .sc-attach-chip button:hover{
color: #ff6b6b;
background: rgba(255,107,107,.12);
}
@media (max-width: 560px){
body.home-page .home-launcher-left{ width: 100%; }
body.home-page .home-launcher-left .home-launcher-types{ flex: 1; }
body.home-page .home-launcher-right{ width: 100%; }
body.home-page .home-launcher-right .home-launcher-submit{ flex: 1; width: auto; }
}
/* ---- FIX: long unbreakable result text overflowing the grid ---- */
body.home-page .home-results-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.home-page .home-result-card{ min-width: 0; }
body.home-page .home-result-card h3,
body.home-page .home-result-copy,
body.home-page .home-result-meta{
overflow-wrap: anywhere;
word-break: break-word;
}
@media (max-width: 900px){
body.home-page .home-results-grid{ grid-template-columns: minmax(0, 1fr); }
}
/* ---- White prompt input — light composer on the dark page ---- */
body.home-page .home-launcher{ background:#ffffff; border-color:rgba(0,0,0,.10); box-shadow:0 22px 60px -22px rgba(0,0,0,.55); }
body.home-page .home-launcher:focus-within{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(245,166,35,.22), 0 22px 60px -22px rgba(0,0,0,.55); }
body.home-page .home-launcher #homePrompt{ color:#14110c; }
body.home-page .home-launcher #homePrompt::placeholder{ color:#8a8578; }
body.home-page .home-launcher-footer{ border-top-color:rgba(0,0,0,.08); }
body.home-page .home-launcher-types{ background:#f1efe9; border-color:rgba(0,0,0,.08); }
body.home-page .home-launcher-type{ color:#5b554a; }
body.home-page .home-launcher-type:hover{ color:#14110c; }
body.home-page .home-launcher-tool{ background:#f5f3ee; border-color:rgba(0,0,0,.10); color:#6b6355; }
body.home-page .home-launcher-tool:hover{ background:#ece8df; color:#14110c; border-color:var(--accent); }
body.home-page .home-launcher-stop{ background:#fdecec; border-color:rgba(213,72,77,.45); color:#d5484d; }
body.home-page .home-launcher-stop:hover{ background:#e5484d; border-color:#e5484d; color:#fff; }
body.home-page .sc-attach-chip{ background:#f5f3ee; border-color:rgba(0,0,0,.10); color:#14110c; }
body.home-page .sc-attach-chip .sz{ color:#8a8578; }
body.home-page .sc-attach-chip button{ color:#8a8578; }
/* ---- sub-line uses the heading typeface (Space Grotesk); size unchanged ---- */
body.home-page .home-hero-copy{
font-family: var(--sc-display);
font-weight: 500;
letter-spacing: -.025em;
}
/* ---- trim empty space above the toolbar in the prompt input ---- */
body.home-page .home-launcher #homePrompt{
min-height: 42px;
padding: 16px 20px 6px;
}
/* ---- tighten the gap below the toolbar row ---- */
body.home-page .home-launcher-footer{ padding-bottom: 10px; }
/* ============================================================================
HOMEPAGE CHAT (home-chat.js) — thread panel, turns, sequence cards
============================================================================ */
body.home-page .home-chat-panel{
display:none; width:100%; max-width:720px; height:420px;
margin:22px auto 0; padding:20px 22px; overflow-y:auto; text-align:left;
background:rgba(255,255,255,.022); border:1px solid var(--panel-border);
border-radius:18px; scroll-behavior:smooth; position:relative; z-index:1;
}
body.home-page .home-chat-panel.active{ display:block; }
body.home-page .home-chat-panel::-webkit-scrollbar{ width:8px; }
body.home-page .home-chat-panel::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:8px; }
body.home-page .home-chat-thread{ display:flex; flex-direction:column; gap:22px; }
body.home-page .hc-turn{ display:flex; flex-direction:column; }
body.home-page .hc-turn + .hc-turn{ padding-top:22px; border-top:1px solid var(--line); }
body.home-page .hc-who{
display:flex; align-items:center; gap:8px; font-family:var(--sc-mono);
font-size:10px; letter-spacing:.12em; text-transform:uppercase;
color:var(--muted); margin-bottom:7px;
}
body.home-page .hc-turn.assistant .hc-who{ color:var(--accent-strong); }
body.home-page .hc-mark{
width:17px; height:17px; border-radius:5px; display:grid; place-items:center;
font-size:10px; background:var(--sc-accent-tint);
border:1px solid var(--sc-accent-line); color:var(--accent-strong);
}
body.home-page .hc-via{
margin-left:auto; font-size:9.5px; letter-spacing:.06em;
text-transform:none; color:var(--muted); opacity:.75;
}
body.home-page .hc-turn.user{ align-items:flex-end; }
body.home-page .hc-turn.user .hc-body{
max-width:82%; padding:11px 15px; background:rgba(255,255,255,.055);
border:1px solid var(--panel-border); border-radius:15px 15px 4px 15px;
font-size:15px; line-height:1.55; color:var(--text);
}
body.home-page .hc-turn.assistant .hc-body{ max-width:100%; font-size:15.5px; line-height:1.7; color:var(--text); }
body.home-page .hc-turn.assistant .hc-body p{ margin:0 0 11px; }
body.home-page .hc-turn.assistant .hc-body p:last-child{ margin:0; }
body.home-page .hc-error{ color:#ff9b9b; }
body.home-page .hc-upgrade{ margin-top:14px; }
body.home-page .hc-typing{ display:inline-flex; gap:5px; align-items:center; padding:3px 0; }
body.home-page .hc-typing i{
width:7px; height:7px; border-radius:50%; background:var(--muted);
opacity:.5; animation:hc-blink 1.2s infinite;
}
body.home-page .hc-typing i:nth-child(2){ animation-delay:.2s; }
body.home-page .hc-typing i:nth-child(3){ animation-delay:.4s; }
@keyframes hc-blink{
0%,80%,100%{ opacity:.25; transform:translateY(0); }
40%{ opacity:1; transform:translateY(-2px); }
}
body.home-page .home-chat-seq{
display:grid; grid-template-columns:repeat(5,1fr); gap:8px; padding:0 12px 14px;
}
body.home-page .hc-card{
text-align:center; padding:10px 6px 11px; border-radius:12px;
border:1px solid rgba(0,0,0,.07); background:#faf9f6;
transition:border-color .2s, background .2s, box-shadow .2s;
}
body.home-page .hc-card strong{ display:block; font-size:12.5px; font-weight:600; color:#9a9384; letter-spacing:-.01em; }
body.home-page .hc-card small{ display:block; margin-top:3px; font-size:10.5px; color:#b3ac9d; }
body.home-page .hc-card.done strong{ color:#6b6355; }
body.home-page .hc-card.done small{ color:#9a9384; }
body.home-page .hc-card.active{
border-color:var(--accent); background:rgba(245,184,65,.10);
box-shadow:0 0 0 3px rgba(245,166,35,.12);
}
body.home-page .hc-card.active strong{ color:#8a6410; }
body.home-page .hc-card.active small{ color:#a9803a; }
body.home-page .hc-card.fallback{ border-color:rgba(0,0,0,.14); background:#f3f1ec; box-shadow:none; }
body.home-page .hc-card.fallback strong{ color:#6b6355; }
body.home-page .hc-card.fallback small{ color:#8a8578; }
body.home-page .home-chat-note{
max-width:720px; margin:12px auto 0; text-align:center;
font-size:12px; color:var(--muted); opacity:.75;
}
@media (max-width:640px){
body.home-page .home-chat-panel{ height:340px; padding:16px; }
body.home-page .home-chat-seq{ grid-template-columns:repeat(2,1fr); }
body.home-page .hc-card:last-child{ grid-column:1 / -1; }
}
/* ---- keep the composer on screen once a conversation starts ---- */
body.home-page .home-hero,
body.home-page .home-hero h1,
body.home-page .home-hero-status,
body.home-page .home-hero-copy{
transition:padding .28s ease, font-size .28s ease, margin .28s ease, opacity .22s ease;
}
body.home-page.hc-chatting .home-hero{
padding-top:clamp(20px,3vw,34px);
padding-bottom:0;
}
body.home-page.hc-chatting .home-hero-status{ margin-bottom:12px; }
body.home-page.hc-chatting .home-hero h1{
font-size:clamp(22px,3.2vw,30px);
margin-bottom:0;
}
body.home-page.hc-chatting .home-hero-copy{
opacity:0; height:0; margin:0; overflow:hidden;
}
body.home-page.hc-chatting .home-hero::before{ opacity:.45; }
/* panel scales with the viewport so the composer always fits below it */
body.home-page .home-chat-panel{ height:min(420px, 44vh); }
@media (max-height:800px){ body.home-page .home-chat-panel{ height:min(360px, 40vh); } }
/* ---- sc composer standard (shared across all prompt pages) ---- */
body.home-page .home-launcher #homePrompt,
body.home-page #homePrompt{
min-height:56px !important;
height:56px !important;
padding:20px 20px 8px !important;
line-height:1.5 !important;
}
body.home-page .home-launcher-footer{ padding:12px 12px 12px 16px !important; }
/* ---- mode pill + cross-workload switcher (matches workload pages) ---- */
body.home-page .home-mode{
display:inline-flex; align-items:center; gap:7px; padding:8px 14px;
border-radius:999px; font-size:13px; font-weight:600; color:#071019;
background:linear-gradient(135deg,var(--accent),var(--accent-strong)); white-space:nowrap;
}
body.home-page .home-mode svg{ width:14px; height:14px; }
body.home-page .home-switch{
display:inline-flex; align-items:center; gap:2px; margin-left:4px;
padding-left:10px; border-left:1px solid rgba(0,0,0,.10);
}
body.home-page .home-switch a{
position:relative; width:34px; height:34px; display:grid; place-items:center;
border-radius:9px; color:#a49b88; text-decoration:none;
transition:color .16s ease, background .16s ease;
}
body.home-page .home-switch a svg{ width:16px; height:16px; }
body.home-page .home-switch a:hover{ color:#14110c; background:rgba(0,0,0,.05); }
body.home-page .home-switch a::after{
content:attr(data-label); position:absolute; bottom:-30px; left:50%;
transform:translateX(-50%); background:#14110c; color:#fff; font-size:11px;
padding:4px 8px; border-radius:6px; white-space:nowrap; opacity:0;
pointer-events:none; transition:opacity .14s ease; z-index:6;
}
body.home-page .home-switch a:hover::after{ opacity:1; }
@media (max-width:640px){ body.home-page .home-switch{ display:none; } }