genui.css

/* the design sandbox/genui: tokens and chat pieces copied from the live 1HC app (app-static/style.css) so the mock sits in the real look. */
:root{--page:#f3f2ef;--sheet:#fff;--chip:#fff;--hover:#e9e8e4;--line:#e7e5e0;--line2:#d9d6cf;--ink:#1c1b19;--ink2:#44423d;--mute:#77746c;--faint:#a8a49b;--abub:#f3f2ef;--ubub:#dcebff;--uink:#0b2a52;--accent:#2563eb;--warn:#d97706;--live:#16a34a;
  --shadow:0 1px 2px rgba(28,27,25,.04),0 4px 16px rgba(28,27,25,.06);--lift:0 2px 6px rgba(28,27,25,.05),0 12px 32px rgba(28,27,25,.1);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
@media(prefers-color-scheme:dark){:root{--page:#121212;--sheet:#1b1b1c;--chip:#262628;--hover:#202022;--line:#2a2a2c;--line2:#38383b;--ink:#f1f0ee;--ink2:#cfcdc8;--mute:#96938c;--faint:#65635e;--abub:#262628;--ubub:#1d3a66;--uink:#e6efff;--accent:#60a5fa;--live:#22c55e;--shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25);--lift:0 2px 6px rgba(0,0,0,.35),0 12px 32px rgba(0,0,0,.4)}}
*{box-sizing:border-box}html,body{margin:0;background:var(--page)}body{min-height:100dvh;display:flex;flex-direction:column}
button,input{font:inherit;color:inherit}button{background:none;border:0;padding:0;cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{color:inherit}
.gtop{display:flex;align-items:flex-start;gap:14px;padding:22px 28px 6px;max-width:1320px;width:100%;margin:0 auto}
.mark{display:flex;align-items:center;gap:8px;font-weight:650;text-decoration:none;flex:none;height:28px}.mark img{width:24px;height:24px;border-radius:7px}
.proto{font-size:11.5px;font-weight:650;color:var(--mute);background:var(--hover);padding:2px 9px;border-radius:999px;margin-top:4px;flex:none}
.gtitle{margin-left:18px}.gtitle h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:28px}.gtitle p{margin:2px 0 0;color:var(--mute)}
.gtabs{display:flex;gap:6px;padding:14px 28px 0;max-width:1320px;width:100%;margin:0 auto;overflow-x:auto;scrollbar-width:none}.gtabs::-webkit-scrollbar{display:none}
.gtabs button{height:38px;padding:0 16px;border-radius:999px;color:var(--ink2);font-weight:550;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--line2)}
.gtabs button:hover{background:var(--hover)}.gtabs button.on{background:var(--ink);color:var(--sheet);box-shadow:none}
.gbar{display:flex;align-items:center;gap:8px;padding:12px 28px;max-width:1320px;width:100%;margin:0 auto}.gsp{flex:1}
.seg{display:inline-flex;background:var(--hover);border-radius:999px;padding:3px}.seg button{height:32px;padding:0 14px;border-radius:999px;font-size:13.5px;font-weight:550;color:var(--mute)}
.seg button.on{background:var(--sheet);color:var(--ink);box-shadow:var(--shadow)}
.gq{height:34px;padding:0 12px;border-radius:999px;font-size:13.5px;font-weight:550;color:var(--mute)}.gq:hover,.gq.on{background:var(--hover);color:var(--ink)}
.gpanes{flex:1;display:grid;gap:14px;padding:0 28px 12px;max-width:1320px;width:100%;margin:0 auto;min-height:0}
.gpanes.n2{grid-template-columns:1fr 1fr}.gpanes.n1{grid-template-columns:minmax(0,760px);justify-content:center}
.gpane{display:flex;flex-direction:column;background:var(--sheet);border-radius:24px;box-shadow:var(--shadow);min-height:640px;height:calc(100dvh - 250px);overflow:hidden;min-width:0}
.gpane>header{flex:none;display:flex;align-items:baseline;gap:10px;padding:14px 22px 10px;border-bottom:1px solid var(--line)}.gpane>header b{font-size:14px}.gpane>header span{font-size:12.5px;color:var(--faint)}
.gpane.cards>header b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--live);margin-right:8px;vertical-align:1px}
.gscroll{flex:1;overflow:auto;scrollbar-width:none}.gscroll::-webkit-scrollbar{display:none}
.gdock{flex:none;padding:0 18px 16px}.gcomp{height:48px;border-radius:24px;border:1px solid var(--line);box-shadow:var(--lift);padding:0 18px;display:flex;align-items:center;color:var(--faint);background:var(--sheet)}
.gfoot{max-width:1320px;width:100%;margin:0 auto;padding:4px 28px 22px;font-size:12.5px;color:var(--faint)}
/* chat (from the app) */
.msgs{max-width:760px;margin:0 auto;padding:12px 22px 28px;display:flex;flex-direction:column;gap:6px}
.m{display:flex;flex-direction:column}.m.first{margin-top:20px}.m.user{align-items:flex-end;margin-top:18px}.m.agent{align-items:flex-start}
.who{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;margin:0 0 8px}.who span{font-weight:400;color:var(--faint);font-size:12px}.who .av{width:22px;height:22px}
.bubble{max-width:86%;padding:12px 18px;border-radius:22px;overflow-wrap:anywhere}.user .bubble{background:var(--ubub);color:var(--uink);white-space:pre-wrap}.agent .bubble{background:var(--abub)}
.body>*:first-child{margin-top:0}.body>*:last-child{margin-bottom:0}.body p{margin:.55em 0}.body ul,.body ol{padding-left:1.25em;margin:.55em 0}.body li{margin:.2em 0}.body strong{font-weight:600}
.body h3{font-size:15px;margin:1em 0 .3em}.body hr{border:0;border-top:1px solid var(--line2);margin:.8em 0}.body blockquote{margin:.5em 0;padding-left:12px;border-left:3px solid var(--line2);color:var(--ink2)}
.body table{border-collapse:separate;border-spacing:0;font-size:13.5px;margin:.7em 0;font-variant-numeric:tabular-nums;background:var(--sheet);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);display:block;overflow-x:auto;max-width:100%}
.body th{font-weight:600;color:var(--mute);text-align:left;font-size:12px}.body td,.body th{border-bottom:1px solid var(--line);padding:8px 12px;white-space:nowrap}.body tr:last-child td{border-bottom:0}
.gu-typing{display:inline-flex;gap:4px;padding:14px 18px;border-radius:22px;background:var(--abub)}.gu-typing i{width:7px;height:7px;border-radius:50%;background:var(--faint);animation:gt 1s infinite}.gu-typing i:nth-child(2){animation-delay:.15s}.gu-typing i:nth-child(3){animation-delay:.3s}
@keyframes gt{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
/* ── the cards ── */
.gu-reply{width:100%;max-width:560px}.gu-stack{display:flex;flex-direction:column;gap:10px}
.gu-in{animation:gin .25s ease both}@keyframes gin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.gu-say{background:var(--abub);border-radius:22px;padding:12px 18px;max-width:92%;align-self:flex-start}.gu-say p{margin:0}.gu-say p+p{margin-top:.55em}.gu-say b{font-weight:600}
.gu-tip{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--mute);padding:0 6px}.gu-tip svg{flex:none;margin-top:2px}.gu-tip b{color:var(--ink2)}
.gu-opts{display:flex;flex-direction:column;gap:8px}
.gu-opt{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px;border-radius:18px;background:var(--sheet);box-shadow:0 0 0 1px var(--line2);transition:box-shadow .12s,transform .12s}
.gu-opt:hover{box-shadow:0 0 0 1px var(--ink2)}.gu-opt:active{transform:scale(.99)}.gu-opt.on{box-shadow:0 0 0 2px var(--ink)}
.gu-rad{flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line2)}.gu-opt.on .gu-rad{box-shadow:inset 0 0 0 6px var(--ink)}
.gu-ot{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}.gu-ot b{font-weight:650}.gu-ot>span{flex-basis:100%;font-size:13px;color:var(--mute)}
.gu-ot em{font-style:normal;font-size:11.5px;font-weight:650;color:var(--mute);background:var(--hover);padding:1px 8px;border-radius:999px}.gu-ot em.best{background:color-mix(in srgb,var(--live) 14%,transparent);color:var(--live)}
.gu-pr{font-size:19px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.gu-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.gu-b{height:44px;padding:0 20px;border-radius:999px;font-weight:600;font-size:15px;transition:transform .12s,opacity .12s,background .12s}.gu-b:active{transform:scale(.97)}
.gu-b.primary{background:var(--ink);color:var(--sheet)}.gu-b.primary:hover{opacity:.9}.gu-b.secondary{box-shadow:inset 0 0 0 1px var(--line2);background:var(--sheet)}.gu-b.secondary:hover{box-shadow:inset 0 0 0 1px var(--ink2)}
.gu-b.ghost{color:var(--mute)}.gu-b.ghost:hover{background:var(--hover);color:var(--ink)}
.gu-b[disabled]{opacity:.35;pointer-events:none}.gu-b.picked{opacity:1;background:var(--live);color:#fff;box-shadow:none}
.locked .gu-opt,.locked .gu-chip,.locked .gu-step button,.locked input{pointer-events:none}.locked .gu-opt:not(.on),.locked .gu-form .gu-field,.locked .gu-form .gu-row{opacity:.55}
.gu-form{background:var(--sheet);border-radius:20px;box-shadow:0 0 0 1px var(--line2);padding:6px 18px 16px;display:flex;flex-direction:column}
.gu-row{display:flex;align-items:center;justify-content:space-between;min-height:56px;border-bottom:1px solid var(--line);font-weight:550}
.gu-step{display:inline-flex;align-items:center;gap:4px}.gu-step b{min-width:28px;text-align:center;font-size:17px;font-variant-numeric:tabular-nums}
.gu-step button{width:36px;height:36px;border-radius:50%;background:var(--hover);font-size:19px;line-height:1;color:var(--ink2)}.gu-step button:hover{background:var(--line2)}
.gu-field{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-bottom:1px solid var(--line)}.gu-field>span{font-weight:550}
.gu-field input{height:46px;border-radius:14px;border:1px solid var(--line2);padding:0 14px;background:var(--sheet);outline:0;font-size:16px}.gu-field input:focus{border-color:var(--ink2)}
.gu-form .gu-field:last-of-type{border-bottom:0}.gu-form .gu-btns{margin-top:6px}
.gu-chips{display:flex;flex-wrap:wrap;gap:7px}.gu-chip{height:38px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2);font-size:14.5px;font-weight:550}
.gu-chip:hover{box-shadow:inset 0 0 0 1px var(--ink2)}.gu-chip.on{background:var(--ink);color:var(--sheet);box-shadow:none}
.gu-big{background:var(--sheet);border-radius:20px;box-shadow:0 0 0 1px var(--line2);padding:16px 18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.gu-big b{font-size:34px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.gu-big span{color:var(--mute)}.gu-big em{flex-basis:100%;font-style:normal;font-weight:600;color:var(--warn);font-size:14px}
.gu-bars{display:flex;align-items:flex-end;gap:10px;height:150px;padding:14px 16px 10px;background:var(--sheet);border-radius:20px;box-shadow:0 0 0 1px var(--line2)}
.gu-bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;min-width:0}
.gu-bar i{display:block;transition:height .35s cubic-bezier(.2,.8,.2,1);width:100%;max-width:38px;border-radius:8px 8px 3px 3px;background:var(--line2);animation:grow .5s cubic-bezier(.2,.8,.2,1) both;transform-origin:bottom}
.gu-bar em{font-style:normal;font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}.gu-bar span{font-size:12px;color:var(--mute)}
.gu-bar.hot i{background:var(--warn)}.gu-bar.hot em{color:var(--warn);font-weight:700}.gu-bar.hot span{color:var(--ink);font-weight:600}
@keyframes grow{from{transform:scaleY(0)}to{transform:none}}
.gu-rows{background:var(--sheet);border-radius:20px;box-shadow:0 0 0 1px var(--line2);padding:4px 18px}
.gu-rows div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}.gu-rows div:last-child{border-bottom:0}.gu-rows span{color:var(--ink2)}.gu-rows b{font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}
.gu-mail{background:var(--sheet);border-radius:20px;box-shadow:0 0 0 1px var(--line2);overflow:hidden}
.gu-mh{display:flex;gap:12px;padding:10px 18px;border-bottom:1px solid var(--line);font-size:14px}.gu-mh span{color:var(--faint);width:58px;flex:none}.gu-mh b{font-weight:600}
.gu-mb{padding:14px 18px 16px}.gu-mb p{margin:0 0 .7em}.gu-mb p:last-child{margin:0}
.gu-file{display:flex;gap:16px;align-items:center;background:var(--sheet);border-radius:20px;box-shadow:0 0 0 1px var(--line2);padding:12px}
.gu-thumb{flex:none;width:118px;aspect-ratio:8.5/11;border-radius:10px;background:var(--hover)}
.gu-thumb.flyer{background:#ffd23f;color:#1c1b19;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;padding:8px;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.gu-thumb.flyer b{font:900 21px/0.95 Impact,"Arial Black",system-ui,sans-serif;letter-spacing:.01em}.gu-thumb.flyer span{font-weight:800;font-size:11px;background:#1c1b19;color:#ffd23f;padding:2px 6px;border-radius:4px}
.gu-thumb.flyer i{font-style:normal;font-weight:800;font-size:12px}.gu-thumb.flyer small{font-size:8px;font-weight:600;opacity:.75}
.gu-fm{display:flex;flex-direction:column;gap:3px;min-width:0}.gu-fm b{font-weight:650;overflow-wrap:anywhere}.gu-fm>span{font-size:13px;color:var(--mute)}
.gu-links{display:flex;gap:14px;margin-top:6px}.gu-links a{font-weight:600;font-size:14px;color:var(--accent);cursor:pointer}
.gu-meter{background:var(--sheet);border-radius:20px;box-shadow:0 0 0 1px var(--line2);padding:16px 18px}
.gu-mt{display:flex;justify-content:space-between;margin-bottom:10px}.gu-mt span{color:var(--warn);font-weight:650}
.gu-track{height:12px;border-radius:99px;background:var(--hover);overflow:hidden}.gu-track i{display:block;transition:width .5s cubic-bezier(.2,.8,.2,1);height:100%;border-radius:99px;background:var(--warn);animation:wide .8s cubic-bezier(.2,.8,.2,1) both;transform-origin:left}
@keyframes wide{from{transform:scaleX(0)}to{transform:none}}
.gu-meter small{display:block;margin-top:9px;color:var(--mute);font-size:13px}
.gu-code{margin-top:14px;font-size:12.5px}.gu-code summary{color:var(--mute);cursor:pointer;font-weight:550}.gu-code pre{margin:8px 0 0;padding:12px 14px;border-radius:14px;background:var(--abub);overflow-x:auto;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
/* iMessage fallback */
.gpane.imessage .msgs{background:var(--sheet)}.gpane.imessage .m.user .bubble{background:#0a84ff;color:#fff}
.im{display:flex;flex-direction:column;gap:3px;align-items:flex-start;max-width:86%}
.imb{background:#e9e9eb;color:#000;padding:8px 13px;border-radius:18px;font:15.5px/1.35 -apple-system,system-ui,sans-serif}
@media(prefers-color-scheme:dark){.imb{background:#262628;color:#fff}}
.im small{color:var(--faint);font-size:11px;margin:2px 4px}
@media (max-width:900px){
  .gtop{padding:14px 16px 0;flex-wrap:wrap;gap:8px}.gtitle{margin:6px 0 0;flex-basis:100%}.gtitle h1{font-size:22px}.gtitle p{font-size:14.5px}
  .gtabs{padding:12px 16px 0}.gbar{padding:10px 16px;flex-wrap:wrap}.gsp{display:none}.seg{flex:1}.seg button{flex:1;padding:0 8px}.gq{padding:0 10px}
  .gpanes{padding:0 10px 8px}.gpanes.n1{grid-template-columns:minmax(0,1fr)}
  .gpane{height:auto;min-height:calc(100dvh - 210px);border-radius:22px}.gscroll{overflow:visible}
  .msgs{padding:8px 12px 20px}.bubble{max-width:92%;font-size:16.5px}.gu-say{font-size:16.5px}.gu-reply{max-width:100%}
  .gdock{position:sticky;bottom:0;background:linear-gradient(transparent,var(--sheet) 30%);padding:14px 10px 10px}
  .gu-bars{gap:6px;padding:12px 10px 8px}.gu-thumb{width:96px}.gfoot{padding:6px 16px 18px}
}

.gbar .seg+.seg{margin-left:6px}.gnote{max-width:1320px;width:100%;margin:0 auto;padding:0 28px 10px;font-size:13.5px;color:var(--mute)}.gnote:empty{display:none}.gnote b{color:var(--ink)}
@media(max-width:900px){.gbar{flex-wrap:wrap}.gnote{padding:0 16px 8px}}