/* Ballet Rodeo Assistant — "The Quiet West" applied to a chat UI */
:root{
  --raw-silk:#F4EEE6; --saddle-ink:#2B2622; --stone-taupe:#C9BCA9;
  --worn-saddle:#A8682F; --faded-denim:#7E94A6; --barre-blush:#E7C9C1; --sage-dust:#8A8D78;
  --paper:var(--raw-silk); --ink:var(--saddle-ink); --accent:var(--worn-saddle);
  --line:rgba(43,38,34,.16); --line-soft:rgba(43,38,34,.08); --ink-60:rgba(43,38,34,.6); --ink-40:rgba(43,38,34,.4);
  --card:#fff;
  --display:"Fraunces",Georgia,serif; --body:"Inter",system-ui,sans-serif;
}
[data-theme="dark"]{
  --paper:#211c19; --ink:#EDE6DA; --accent:#C58748; --card:#2b2520;
  --line:rgba(237,230,218,.16); --line-soft:rgba(237,230,218,.09);
  --ink-60:rgba(237,230,218,.62); --ink-40:rgba(237,230,218,.4);
}
[data-theme="dark"] .bubble code{background:rgba(237,230,218,.12)}
[data-theme="dark"] .chat-item.active{background:rgba(197,135,72,.18)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,textarea{font-family:inherit;color:inherit}
a{color:inherit}

.app{display:flex;flex-direction:column;height:100dvh;max-width:880px;margin:0 auto}
.head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px clamp(16px,4vw,28px);border-bottom:1px solid var(--line-soft);position:sticky;top:0;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(8px);z-index:5}
.brand{display:flex;align-items:center;gap:10px}
.brand .knot{width:26px;color:var(--accent)}
.brand .word{font-family:var(--display);font-weight:500;letter-spacing:.26em;text-transform:uppercase;font-size:1.05rem;padding-left:.26em}
.brand .tag{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-40);border:1px solid var(--line);border-radius:999px;padding:3px 9px;margin-left:4px}
.head .reset{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60);background:none;border:1px solid var(--line);border-radius:6px;padding:7px 12px;cursor:pointer;transition:.2s}
.head .reset:hover{color:var(--ink);border-color:var(--ink)}

.feed{flex:1;overflow-y:auto;padding:clamp(16px,4vw,28px);display:flex;flex-direction:column;gap:18px}
.row{display:flex;gap:10px;max-width:100%}
.row.user{justify-content:flex-end}
.bubble{max-width:84%;padding:12px 16px;border-radius:14px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.row.user .bubble{background:var(--ink);color:var(--paper);border-bottom-right-radius:4px}
.row.assistant .bubble{background:var(--card);border:1px solid var(--line-soft);border-bottom-left-radius:4px}
.row.assistant .who{font-family:var(--display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.dots{display:inline-flex;gap:4px;padding:4px 0}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-40);animation:b 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes b{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:24px}
.empty .knot{width:54px;color:var(--accent);opacity:.85;margin-bottom:10px}
.empty h1{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,4vw,2.3rem)}
.empty p{color:var(--ink-60);max-width:46ch}
.sugg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px;width:100%;max-width:560px}
.sugg button{text-align:left;background:var(--card);border:1px solid var(--line-soft);border-radius:10px;padding:12px 14px;font-size:.85rem;color:var(--ink);cursor:pointer;transition:.18s}
.sugg button:hover{border-color:var(--accent);transform:translateY(-2px)}
@media(max-width:560px){.sugg{grid-template-columns:1fr}}

.composer{padding:14px clamp(16px,4vw,28px) 18px;border-top:1px solid var(--line-soft)}
.box{display:flex;gap:10px;align-items:flex-end;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 8px 8px 14px}
.box textarea{flex:1;border:none;outline:none;resize:none;background:transparent;font-size:.95rem;line-height:1.5;max-height:160px;padding:6px 0}
.box .send{flex:none;background:var(--accent);color:var(--raw-silk);border:none;border-radius:10px;width:40px;height:40px;font-size:1.1rem;cursor:pointer;transition:.2s;display:grid;place-items:center}
.box .send:disabled{opacity:.4;cursor:not-allowed}
.box .send:not(:disabled):hover{background:#925826}
.hint{text-align:center;font-size:.7rem;color:var(--ink-40);margin-top:8px}

.login{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
.login .card{width:100%;max-width:380px;text-align:center}
.login .knot{width:56px;color:var(--accent);margin:0 auto 18px}
.login h1{font-family:var(--display);font-weight:400;font-size:1.9rem;margin-bottom:4px}
.login p{color:var(--ink-60);font-size:.9rem;margin-bottom:24px}
.login form{display:flex;flex-direction:column;gap:10px}
.login input{padding:13px 16px;border:1px solid var(--line);border-radius:10px;font-size:.95rem;background:var(--card)}
.login button{padding:13px;background:var(--accent);color:var(--raw-silk);border:none;border-radius:10px;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:.2s}
.login button:hover{background:#925826}
.login .err{color:#a23;font-size:.82rem;min-height:1.2em}

/* ── expansion: history, templates, msg tools, markdown ── */
.head-left{display:flex;align-items:center;gap:10px}
.head-right{display:flex;align-items:center;gap:8px}
.iconbtn{background:none;border:1px solid var(--line);border-radius:8px;width:34px;height:34px;cursor:pointer;color:var(--ink-60);font-size:1rem;transition:.2s}
.iconbtn:hover{color:var(--ink);border-color:var(--ink)}

/* assistant message markdown */
.bubble p{margin:0 0 .55em}.bubble p:last-child{margin-bottom:0}
.bubble ul,.bubble ol{margin:.3em 0 .6em;padding-left:1.25em}
.bubble li{margin:.15em 0}
.bubble code{background:rgba(43,38,34,.07);padding:1px 5px;border-radius:4px;font-size:.88em;font-family:ui-monospace,Menlo,Consolas,monospace}
.bubble a{color:var(--accent);text-decoration:underline}
.msg-tools{display:flex;gap:8px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line-soft)}
.msg-tools button{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40);background:none;border:none;cursor:pointer;transition:.15s;padding:0}
.msg-tools button:hover{color:var(--accent)}

/* templates row */
.templates{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;-ms-overflow-style:none;scrollbar-width:none}
.templates::-webkit-scrollbar{display:none}
.tmpl{flex:none;font-size:.74rem;letter-spacing:.04em;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 13px;cursor:pointer;color:var(--ink-60);transition:.18s}
.tmpl:hover{border-color:var(--accent);color:var(--ink)}

/* history drawer */
.scrim{position:fixed;inset:0;background:rgba(43,38,34,.4);opacity:0;visibility:hidden;transition:.3s;z-index:40}
.scrim.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;left:0;height:100%;width:min(320px,90vw);background:var(--paper);border-right:1px solid var(--line);z-index:50;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.1,1);display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:18px 18px 14px;border-bottom:1px solid var(--line-soft);font-family:var(--display);letter-spacing:.1em;text-transform:uppercase;font-size:.8rem}
.drawer-head button{background:none;border:none;font-size:1rem;color:var(--ink-60);cursor:pointer}
.drawer-body{flex:1;overflow-y:auto;padding:10px}
.chat-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;border-radius:8px;cursor:pointer;transition:.15s;font-size:.85rem}
.chat-item:hover{background:rgba(43,38,34,.05)}
.chat-item.active{background:rgba(168,104,47,.12)}
.chat-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-item button{background:none;border:none;color:var(--ink-40);cursor:pointer;flex:none;font-size:.8rem}
.chat-item button:hover{color:#a23}
.muted{color:var(--ink-40);font-size:.85rem;text-align:center;padding:30px 0}

/* working / job status */
.working{display:inline-flex;align-items:center;gap:10px}
.wlabel{color:var(--ink-60);font-size:.9rem}
.who .tier{font-family:var(--body);margin-left:8px;font-size:.6rem;letter-spacing:.06em;color:var(--ink-40);text-transform:none}