/* ai.noproduct.com — single page of thinking. Intentional austerity:
   one alive cursor on a still paper page. User and model text identical. */

:root{
  --paper:#f7f4ec; --ink:#1b1a17; --faint:#a59f8e; --rule:#e4dfd1;
  --tint-user:#2b4a6f; --tint-model:#2f5c43; --accent:#3a5a45;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:"Iowan Old Style","Charter","Palatino",Georgia,serif;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(0,0,0,.018) 1px,transparent 1px);
  background-size:3px 3px;
  display:flex;flex-direction:column;min-height:100vh;
}

/* ---------- masthead ---------- */
header{
  max-width:64rem;width:100%;margin:0 auto;
  padding:clamp(1.4rem,5vh,3rem) clamp(1.25rem,5vw,3rem) 0;
  display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;
  animation:rise .9s ease both;
}
.hello{max-width:34rem}
.mark{
  font-size:clamp(2.1rem,6.4vw,4rem);letter-spacing:-.025em;
  text-transform:lowercase;color:var(--ink);font-weight:500;
  line-height:1;margin-bottom:1.1rem;transition:font-size .4s ease;
}
.lede{
  font-weight:500;font-size:clamp(1rem,1.5vw,1.12rem);
  line-height:1.62;color:#46423a;max-width:32rem;
}
.lede .k{color:var(--ink);border-bottom:1px solid var(--rule)}
.guest-greeting{color:#46423a}

.login{flex-shrink:0;text-align:right}
button.link{
  font:inherit;background:none;cursor:pointer;color:var(--ink);
  font-size:.95rem;padding:.5rem .9rem;border:1px solid var(--ink);
  border-radius:1px;transition:background .18s ease,color .18s ease;margin-right:.5rem;
}
button.link:hover{background:var(--ink);color:var(--paper)}
.clear{
  display:none;flex-shrink:0;font:inherit;background:none;cursor:pointer;
  color:var(--ink);font-size:.9rem;padding:.45rem .85rem;
  border:1px solid var(--ink);border-radius:1px;align-self:flex-start;
  transition:background .18s ease,color .18s ease;
}
.clear:hover{background:var(--ink);color:var(--paper)}
body:not(.landing) .clear{display:inline-block}
.login .sub{display:block;margin-top:.7rem;font-size:.72rem;color:var(--faint)}
.who{font-size:.82rem;color:#5d584b;line-height:1.75}
.who #me{display:block;color:var(--ink)}
.adminlink{display:block;width:max-content;margin:.35rem 0 .35rem auto;
  color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent)}
.signout{font:inherit;background:none;border:none;cursor:pointer;
  color:var(--faint);font-size:.78rem;padding:.15rem 0;
  border-bottom:1px solid var(--rule)}
.signout:hover{color:var(--ink)}
.privacy-notice{font-size:.75rem;color:var(--faint);line-height:1.5;margin:.3rem 0}
body:not(.landing) .who{display:none}
.auth{margin-top:1rem;display:none;text-align:right}
.auth.open{display:block;animation:rise .35s ease both}
.auth input{
  font:inherit;font-size:.92rem;background:transparent;color:var(--ink);
  border:none;border-bottom:1px solid var(--ink);padding:.3rem .1rem;
  text-align:right;width:13rem;outline:none;margin-bottom:.5rem;
}
.auth .hint{font-size:.72rem;color:var(--faint);margin-top:.2rem;max-width:15rem;margin-left:auto}
.auth .go{
  display:block;margin-left:auto;margin-top:.35rem;font-size:.8rem;
  color:var(--accent);background:none;border:none;cursor:pointer;font:inherit;
  border-bottom:1px solid var(--accent);padding-bottom:1px;
}

/* ---------- the stream + writing surface ---------- */
main{
  flex:1;max-width:64rem;width:100%;margin:0 auto;
  padding:clamp(2rem,7vh,4.5rem) clamp(1.25rem,5vw,3rem) 1rem;
  position:relative;animation:rise 1.1s ease both;animation-delay:.12s;
}
#stream{
  white-space:pre-wrap;word-wrap:break-word;
  font-size:clamp(1.12rem,2vw,1.34rem);line-height:1.74;
}
.seg{animation:fade .5s ease both}
.seg+.seg{margin-top:.15rem}
body.prov .seg.user{color:var(--tint-user)}
body.prov .seg.model{color:var(--tint-model)}

.surface{position:relative}
#input{
  width:100%;min-height:2.2em;border:none;outline:none;resize:none;
  background:transparent;color:var(--ink);font:inherit;
  font-size:clamp(1.12rem,2vw,1.34rem);line-height:1.74;
  caret-color:var(--ink);overflow:hidden;
}
.cursor{
  position:absolute;top:.16em;left:0;
  width:.6rem;height:1.42rem;background:var(--ink);
  animation:beat 1.15s cubic-bezier(.6,0,.4,1) infinite;pointer-events:none;
}
.cursor.gone{display:none}
/* RTL mode: input + the big cursor flip to the right (segments self-orient
   via dir="auto"; the latin masthead deliberately stays LTR) */
body.rtl .cursor{left:auto;right:0}
body.rtl #input{text-align:right}
@keyframes beat{0%,42%{opacity:1;transform:scaleY(1)}58%,100%{opacity:.08;transform:scaleY(.96)}}

/* ---------- collapsed state: a thread is in progress ---------- */
body:not(.landing) .lede,
body:not(.landing) .guest-greeting,
body:not(.landing) .login{display:none}
body:not(.landing) header{padding-bottom:0}
body:not(.landing) .mark{
  font-size:.78rem;letter-spacing:.34em;color:var(--faint);margin-bottom:0;
}
body:not(.landing) main{padding-top:clamp(1.2rem,4vh,2.2rem)}

/* ---------- corner controls ---------- */
#corner{
  position:fixed;bottom:.85rem;right:1rem;display:flex;align-items:center;
  gap:.65rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;color:var(--faint);
}
#corner button{
  background:none;border:none;color:var(--faint);cursor:pointer;
  font:inherit;padding:2px 5px;
}
#corner button:hover{color:var(--ink)}
#status{min-width:1rem}

/* ---------- feedback composer ---------- */
#fb-wrap{
  position:fixed;bottom:.85rem;left:1rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;
}
.fb-trigger{
  background:none;border:none;cursor:pointer;font:inherit;
  color:var(--faint);padding:2px 5px;border-bottom:1px solid var(--rule);
}
.fb-trigger:hover{color:var(--ink);border-color:var(--ink)}
#fb-composer{
  position:absolute;bottom:1.8rem;left:0;
  width:min(22rem,88vw);background:var(--paper);
  border:1px solid var(--rule);padding:.7rem;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}
#fb-text{
  width:100%;font:inherit;background:transparent;color:var(--ink);
  border:none;border-bottom:1px solid var(--rule);resize:none;outline:none;
  font-size:.82rem;line-height:1.5;padding-bottom:.4rem;
}
.fb-row{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}
#fb-send{
  font:inherit;font-size:.72rem;background:var(--ink);color:var(--paper);
  border:none;cursor:pointer;padding:.3rem .7rem;
}
#fb-send:hover{opacity:.8}
.fb-mic{
  background:none;border:1px solid var(--rule);cursor:pointer;
  font-size:.9rem;padding:2px 5px;line-height:1;color:var(--faint);
}
.fb-mic.active{border-color:var(--accent);color:var(--accent)}
.fb-mic[disabled]{opacity:.35;cursor:default}
.fb-note{color:var(--faint);font-size:.7rem;flex:1}

@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (max-width:680px){
  header{flex-direction:column;gap:1.3rem}
  .login,.auth{text-align:left}
  .auth input{text-align:left}
  .auth .hint,.auth .go{margin-left:0}
  body{font-size:16px}
}