/* Assistant Maraîchage */
:root{
  --deep:#46066d;
  --purple:#b02ccc;
  --magenta:#cc44dd;
  --lavender:#ea92f9;
  --yellow:#fcf201;
  --cream:#fcfbd3;
  --ink:#1a0a22;
  --bg:#f8eefc;
  --muted:#6b4f7a;
  --line:rgba(70,6,109,.14);
  --shadow:0 2px 10px rgba(70,6,109,.12);
}
*{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(--ink);
  background:var(--bg);
  line-height:1.55;
}
button,select,textarea,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--purple)}

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

#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(--deep);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(--deep);
  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(--cream);border-color:var(--purple)}
.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(--deep);
  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(--cream);
  padding:.1em .35em;
  border-radius:4px;
}
.msg .md pre{
  background:var(--ink);
  color:var(--cream);
  padding:12px 14px;
  border-radius:10px;
  overflow-x:auto;
}
.msg .md pre code{background:none;color:inherit;padding:0}
.msg .md a{color:var(--purple);font-weight:600}
.msg .md h1,.msg .md h2,.msg .md h3{color:var(--deep);font-size:1.05em;margin:0.7em 0 0.3em}

.composer{
  flex-shrink:0;
  padding:10px 16px 6px;
  background:linear-gradient(180deg,transparent,var(--bg) 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(--yellow);color:var(--deep);
  display:grid;place-items:center;flex-shrink:0;
}
.btn-send:hover{background:#ffe44a}
.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:#8a7a96}

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