:root{
  --bg:#f7f7f8;
  --card:#ffffff;
  --muted:#65707a;
  --accent:#0b84ff;
  --bubble-user:#dcf1ff;
  --bubble-ai:#f1f4f8;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
html,body,#app{height:100%;margin:0;background:var(--bg);}
#app{display:flex;align-items:flex-end;justify-content:center;padding:12px;}
#chat{width:100%;max-width:720px;background:var(--card);border-radius:12px;box-shadow:0 6px 20px rgba(20,30,40,0.08);display:flex;flex-direction:column;overflow:hidden;height:92vh;}
#messages{flex:1;padding:14px;display:flex;flex-direction:column;gap:10px;overflow:auto;}
.msg{max-width:78%;padding:10px;border-radius:12px;word-break:break-word;box-shadow:0 1px 0 rgba(0,0,0,0.02);}
.msg.user{align-self:flex-end;background:var(--bubble-user);border-bottom-right-radius:6px;}
.msg.ai{align-self:flex-start;background:var(--bubble-ai);border-bottom-left-radius:6px;color:var(--muted);}
.msg img.preview{max-width:220px;border-radius:8px;display:block;margin-top:8px;}

/* Code block styling with copy button */
.code-block{position:relative;margin-top:8px;border-radius:8px;overflow:hidden;border:1px solid #e6eef6;background:#0f1720;color:#e6eef6;}
.code-block pre{margin:0;padding:12px 12px 12px 12px;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Roboto Mono,monospace;font-size:13px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);}
.copy-btn{position:absolute;top:8px;right:8px;background:rgba(255,255,255,0.08);color:#fff;border:0;padding:6px 8px;border-radius:6px;font-size:12px;cursor:pointer;opacity:0.9;}
.copy-btn:active{transform:translateY(1px);}

/* Slightly smaller code blocks on narrow screens */
@media (max-width:420px){
  .msg img.preview{max-width:160px;}
  .code-block pre{font-size:12px;padding:10px;}
  .copy-btn{padding:6px 6px;font-size:11px;}
}
#composer{display:flex;gap:8px;padding:12px;border-top:1px solid #eef1f4;background:linear-gradient(180deg,rgba(255,255,255,0.4),transparent);}
#composer input[type="text"]{flex:1;padding:12px;border-radius:10px;border:1px solid #e6eef6;background:#fff;font-size:15px;}
#composer button{background:var(--accent);color:#fff;border:0;border-radius:10px;padding:10px 14px;font-weight:600;}
#file{display:none;}
#fileLabel{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:10px;background:#fff;border:1px solid #e6eef6;cursor:pointer;font-size:18px;}

/* CLI styles */
#cliToggleWrap{padding:8px 12px;border-top:1px solid #eef1f4;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);display:flex;justify-content:flex-end;}
#cliToggle{background:transparent;border:1px solid #e6eef6;color:var(--muted);padding:6px 10px;border-radius:8px;cursor:pointer;}
#cli{display:none;border-top:1px solid #eef1f4;padding:8px;background:linear-gradient(180deg,rgba(250,250,250,0.6),transparent);}
#cli[aria-hidden="false"]{display:flex;flex-direction:column;gap:8px;}
.cli-window{height:120px;overflow:auto;background:#0f1720;color:#e6eef6;border-radius:8px;padding:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Roboto Mono,monospace;font-size:13px;}
.cli-line{margin:2px 0;}
.cli-line.user{color:#cff0ff;}
.cli-line.ai{color:#d7e3ff;}
.cli-input-wrap{display:flex;gap:8px;}
#cliInput{flex:1;padding:10px;border-radius:8px;border:1px solid #e6eef6;background:#fff;font-size:14px;}
#cliSend{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:10px 12px;font-weight:600;}

/* responsive tweaks */
@media (max-width:420px){
  #chat{height:100vh;border-radius:0;}
  .msg img.preview{max-width:160px;}
  .cli-window{height:100px;}
}