/* LYMI chat — full-page, black & white */
:root{--ink:#fff;--paper:#000;--felt:#f2f0ed;--well:#1a1a1a;--edge:rgba(255,255,255,.16);--soft:rgba(255,255,255,.66);--faint:rgba(255,255,255,.5);--sans:"SF Pro Text","Segoe UI Variable Text","Segoe UI",Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;--ar:"Segoe UI","Geeza Pro","Noto Sans Arabic",Tahoma,sans-serif;--serif:"Instrument Serif",Georgia,serif}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif-latin-400-normal.woff2) format("woff2");font-display:swap}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;overflow:hidden}
html[lang=ar] body{font-family:var(--ar)}
a{color:inherit}
button,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
[hidden]{display:none!important}
.bar{flex:none;display:flex;align-items:center;gap:6px;height:60px;padding:0 max(16px,env(safe-area-inset-left))}
.bar .mark{display:flex;align-items:center;text-decoration:none;margin-inline-end:auto}
.bar .mark img{height:30px;width:auto;display:block}
.bar a.lk,.bar button.lk{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:999px;border:0;background:none;color:var(--soft);text-decoration:none;font-size:.92rem;cursor:pointer}
.bar a.lk:hover,.bar button.lk:hover{color:#fff;background:rgba(255,255,255,.07)}
.bar .langs a[aria-current=page]{color:#fff}
.stage{flex:1;min-height:0;display:flex;flex-direction:column}
.scroll{flex:1;min-height:0;overflow-y:auto;scroll-behavior:smooth}
.col{width:min(760px,100% - 32px);margin:0 auto}
/* empty state */
.hello{min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px 0 8px}
.hello .lymi{width:120px;height:120px;border-radius:32px;object-fit:cover;margin-bottom:18px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hello h1{font:400 clamp(2.4rem,6vw,3.6rem)/1.05 var(--serif);letter-spacing:-.01em;margin:0 0 12px}
html[lang=ar] .hello h1{font-family:var(--ar);font-weight:600;line-height:1.35;font-size:clamp(2rem,5vw,3rem)}
.hello p{color:var(--soft);max-width:34em;margin:0}
body.chatting .hello{display:none}
.ideas{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.ideas button{text-align:start;min-height:52px;padding:10px 14px;border:1px solid var(--edge);border-radius:16px;background:none;color:var(--soft);cursor:pointer;font-size:.92rem;line-height:1.35}
.ideas button:hover{color:#fff;border-color:rgba(255,255,255,.4)}
body.chatting .ideas{display:none}
/* messages */
.log{display:flex;flex-direction:column;gap:22px;padding:12px 0 24px}
.msg.u{align-self:flex-end;max-width:82%;background:var(--felt);color:#000;padding:10px 16px;border-radius:22px;border-end-end-radius:8px;white-space:pre-wrap;word-wrap:break-word}
.msg.l{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start}
.msg.l .who{width:32px;height:32px;border-radius:10px;object-fit:cover;margin-top:2px}
.msg.l .txt{min-width:0;word-wrap:break-word}
.txt p{margin:0 0 .7em}.txt p:last-child{margin:0}
.txt ul,.txt ol{margin:.2em 0 .8em;padding-inline-start:1.3em}
.txt li{margin:.25em 0}
.txt strong{font-weight:650}
.txt code{font-family:ui-monospace,Consolas,monospace;font-size:.9em;background:rgba(255,255,255,.08);padding:.1em .35em;border-radius:6px}
.dots{display:inline-flex;gap:5px;padding-top:12px}
.dots i{width:7px;height:7px;border-radius:50%;background:#fff;animation:d 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes d{50%{opacity:.25;transform:translateY(-3px)}}
.cards{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.card{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;border:1px solid var(--edge);border-radius:16px}
.card div{flex:1;min-width:0}
.card b{display:block;font-weight:600;font-size:.95rem;line-height:1.3}
.card small{color:var(--faint);font-size:.82rem}
.buy{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:#fff;color:#000;font-weight:650;font-size:.88rem;text-decoration:none;white-space:nowrap}
.buy.ghost{background:none;color:#fff;border:1px solid var(--edge)}
.err{color:var(--soft);font-size:.92rem}
.err button{background:none;border:1px solid var(--edge);color:#fff;border-radius:999px;padding:4px 12px;margin-inline-start:8px;cursor:pointer}
.sys{align-self:center;color:var(--faint);font-size:.82rem}
/* composer */
.dock{flex:none;padding:10px 0 max(14px,env(safe-area-inset-bottom))}
.box{display:flex;align-items:flex-end;gap:8px;background:var(--well);border:1px solid var(--edge);border-radius:28px;padding:8px 8px 8px 18px;transition:border-color .2s}
html[dir=rtl] .box{padding:8px 18px 8px 8px}
.box:focus-within{border-color:rgba(255,255,255,.45)}
.box textarea{flex:1;min-width:0;resize:none;border:0;outline:0;background:none;max-height:180px;min-height:28px;padding:9px 0;line-height:1.5;font-size:1rem}
.box textarea::placeholder{color:var(--faint)}
.ib{flex:none;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:none;color:#fff}
.ib:hover{background:rgba(255,255,255,.08)}
.ib svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ib.go{background:#fff;color:#000}
.ib.go:disabled{opacity:.3;cursor:default}
.ib.rec{background:#fff;color:#000;animation:ring 1.4s infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}80%{box-shadow:0 0 0 14px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.vl{flex:none;height:44px;padding:0 12px;border-radius:999px;border:0;background:none;color:var(--soft);cursor:pointer;font-size:.85rem}
.vl:hover{color:#fff;background:rgba(255,255,255,.08)}
.under{display:flex;justify-content:space-between;gap:12px;margin-top:8px;color:var(--faint);font-size:.78rem;padding:0 6px}
.under a{text-decoration:none}.under a:hover{color:#fff}
.vmenu{position:absolute;bottom:64px;inset-inline-end:60px;background:#111;border:1px solid var(--edge);border-radius:16px;padding:6px;display:flex;flex-direction:column;min-width:170px;z-index:5}
.vmenu button{text-align:start;min-height:40px;padding:0 12px;border:0;border-radius:10px;background:none;cursor:pointer;color:var(--soft)}
.vmenu button[aria-checked=true],.vmenu button:hover{background:rgba(255,255,255,.08);color:#fff}
.dock .col{position:relative}
body.listening .hello .lymi{transform:scale(1.08) rotate(-3deg)}
@media (max-width:600px){.ideas{grid-template-columns:1fr}.hello .lymi{width:96px;height:96px}.bar .lk.hide-s{display:none}.msg.u{max-width:90%}.vl{padding:0 8px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body:not(.chatting) .stage{justify-content:center}
body:not(.chatting) .scroll{flex:0 1 auto}
body:not(.chatting) .log{padding:0}