/* Nature Studio – Assistant */
:root{
  --g:#1f4d33;
  --g2:#4f8a5b;
  --l:#eef4ea;
  --s:#f8f6f0;
  --t:#22302a;
  --muted:#5b6b62;
  --line:rgba(31,77,51,.12);
  --shadow:0 2px 10px rgba(31,77,51,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--t);
  background:var(--s);
  line-height:1.55;
}
button,select,textarea,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--g)}

/* ---- App shell ---- */
#app{
  height:100%;
  display:flex;
  flex-direction:column;
  max-width:920px;
  margin:0 auto;
  background:var(--s);
}
header.top{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  background:#fff;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
header.top img.logo{
  width:44px;height:44px;border-radius:50%;object-fit:cover;
}
header.top .brand{flex:1;min-width:0}
header.top h1{
  font-size:1.05rem;color:var(--g);font-weight:800;line-height:1.2;
}
header.top .sub{font-size:.78rem;color:var(--g2);font-weight:600}

/* ---- Messages ---- */
#thread{
  flex:1;
  overflow-y:auto;
  padding:20px 16px 8px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
#thread:has(.empty){justify-content:center}
.empty{
  margin:0 auto;
  text-align:center;
  color:var(--muted);
  max-width:360px;
  padding:16px 8px;
}
.empty b{display:block;color:var(--g);font-size:1.1rem;margin-bottom:6px}
.empty p{margin:0 0 16px}
.examples{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:560px;margin:0 auto}
.example{
  background:#fff;
  border:1px solid var(--line);
  color:var(--g);
  border-radius:20px;
  padding:8px 14px;
  font-weight:600;
  font-size:.88rem;
  text-align:left;
  box-shadow:var(--shadow);
  max-width:100%;
}
.example:hover{background:var(--l);border-color:var(--g2)}
.msg{
  max-width:min(760px,92%);
  padding:12px 16px;
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow-wrap:anywhere;
}
.msg.user{
  align-self:flex-end;
  background:var(--g);
  color:#fff;
  border-bottom-right-radius:6px;
  white-space:pre-wrap;
}
.msg.assistant{
  align-self:flex-start;
  background:#fff;
  border-bottom-left-radius:6px;
}
.msg.assistant.pending{color:var(--muted);font-style:italic}
.msg .md > *:first-child{margin-top:0}
.msg .md > *:last-child{margin-bottom:0}
.msg .md p,.msg .md ul,.msg .md ol,.msg .md pre,.msg .md blockquote{margin:0.5em 0}
.msg .md ul,.msg .md ol{padding-left:1.3em}
.msg .md code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;
  background:var(--l);
  padding:.1em .35em;
  border-radius:4px;
}
.msg .md pre{
  background:#1a2a22;
  color:#eef4ea;
  padding:12px 14px;
  border-radius:10px;
  overflow-x:auto;
}
.msg .md pre code{background:none;color:inherit;padding:0}
.msg .md a{color:var(--g);font-weight:600}
.msg .md h1,.msg .md h2,.msg .md h3{color:var(--g);font-size:1.05em;margin:0.7em 0 0.3em}

/* ---- Composer ---- */
.composer{
  flex-shrink:0;
  padding:10px 16px 6px;
  background:linear-gradient(180deg,transparent,var(--s) 20%);
}
.composer form{
  display:flex;
  gap:8px;
  align-items:flex-end;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:8px 8px 8px 14px;
  box-shadow:var(--shadow);
}
#input{
  flex:1;
  border:0;
  resize:none;
  outline:none;
  background:transparent;
  min-height:24px;
  max-height:160px;
  line-height:1.4;
  padding:8px 0;
}
.btn-send{
  width:42px;height:42px;border:0;border-radius:50%;
  background:var(--g);color:#fff;
  display:grid;place-items:center;flex-shrink:0;
}
.btn-send:hover{background:var(--g2)}
.btn-send[disabled]{opacity:.45;cursor:not-allowed}
.btn-send svg{width:18px;height:18px}

footer{
  text-align:center;
  padding:10px 16px 28px;
  font-size:.85rem;
  color:var(--muted);
  flex-shrink:0;
}
.qr{margin:4px 0 6px}
.qr img{
  width:120px;height:120px;
  border-radius:8px;
  background:#fff;
  padding:4px;
}
.qr p{margin:6px 0 0;font-size:.85rem}
footer small{display:block;margin-top:6px;font-size:.68rem;color:#8a978f}

@media(max-width:720px){
  .qr img{width:100px;height:100px}
  footer{padding-bottom:72px}
  .empty{padding:8px 4px}
  .empty b{font-size:1.02rem}
  .example{font-size:.82rem;padding:7px 12px}
}