/* DirAI v3 */
:root{--bg:#f4f1ea;--surface:#fffdf8;--ink:#1c1a16;--muted:#6f6a60;--line:#e6e0d4;--accent:#1f6f56;--accent-soft:#e4f3ec;--user:#efe8d8;--shadow:0 10px 30px rgba(40,32,18,.06)}
html[data-theme="dark"]{--bg:#12140f;--surface:#1b1e18;--ink:#ece7dc;--muted:#9aa392;--line:#2c3228;--accent:#b7e08a;--accent-soft:#243022;--user:#262b22;--shadow:none}
*{box-sizing:border-box}
body{margin:0;height:100vh;color:var(--ink);font:15px/1.45 "Segoe UI","IBM Plex Sans",sans-serif;background:var(--bg);display:grid;grid-template-columns:260px 1fr}
aside{background:var(--surface);border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:8px}
.brand{display:flex;justify-content:space-between;align-items:center;font-weight:700;letter-spacing:-.03em}
.icon{border:1px solid var(--line);background:transparent;border-radius:8px;width:32px;height:32px;cursor:pointer;color:var(--ink)}
.primary,.ghost{width:100%;border-radius:10px;padding:9px 10px;cursor:pointer;font-weight:650}
.primary{background:var(--accent);color:#fff;border:0}
html[data-theme="dark"] .primary{color:#152116}
.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.label{margin:10px 2px 4px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.item{padding:8px 10px;border-radius:10px;cursor:pointer}
.item:hover,.item.on{background:var(--accent-soft)}
main{display:flex;flex-direction:column;min-width:0}
header.top{padding:16px 28px 8px}
header.top h1{margin:0;font-size:18px;font-weight:650}
header.top p{margin:4px 0 0;color:var(--muted);font-size:13px}
#log{flex:1;overflow:auto;padding:8px 8vw 24px}
.empty{max-width:560px;margin:8vh auto 0}
.empty h2{margin:0 0 8px;font-size:28px;letter-spacing:-.03em}
.empty p{color:var(--muted)}
.starts{display:grid;gap:10px;margin-top:22px}
.starts button{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;box-shadow:var(--shadow);color:var(--ink)}
.starts b{display:block;margin-bottom:4px}
.msg{max-width:760px;margin:0 auto 16px}
.msg.user{display:flex;justify-content:flex-end}
.bubble{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:var(--shadow);white-space:pre-wrap}
.msg.user .bubble{background:var(--user);max-width:70%}
.meta{color:var(--muted);font-size:12px;margin:6px 2px 0;display:flex;gap:10px}
.price{color:var(--accent);font-weight:650}
.msg img{max-width:min(520px,100%);border-radius:12px;display:block;margin-top:8px}
.dock{padding:0 8vw 20px}
.composer{max-width:760px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:10px}
.modes{display:flex;gap:6px;align-items:center;padding:2px 4px 8px}
.modes button{border:0;background:transparent;color:var(--muted);border-radius:999px;padding:6px 10px;cursor:pointer}
.modes button.on{background:var(--accent-soft);color:var(--ink);font-weight:650}
#imgParams{display:none;gap:6px}
#imgParams button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:4px 8px;cursor:pointer;color:var(--ink)}
#imgParams button.on{background:var(--ink);color:var(--bg)}
textarea{width:100%;border:0;resize:none;min-height:54px;font:inherit;background:transparent;color:var(--ink);outline:none;padding:4px 8px}
.sendrow{display:flex;justify-content:flex-end}
.sendrow button{background:var(--accent);color:#fff;border:0;border-radius:999px;padding:8px 16px;font-weight:650;cursor:pointer}
html[data-theme="dark"] .sendrow button{color:#152116}
@media(max-width:820px){body{grid-template-columns:1fr}aside{display:none}#log,.dock{padding-left:16px;padding-right:16px}}