* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:#0f1115; color:#f5f7fa; }
body { display:flex; flex-direction:column; }
header { padding:0.75rem 1rem; background:#161b22; border-bottom:1px solid #232b33; display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
header h1 { font-size:1.05rem; margin:0 1rem 0 0; font-weight:600; }
.toolbar { display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; }
.toolbar label { font-size:0.75rem; display:flex; flex-direction:column; gap:0.25rem; font-weight:500; letter-spacing:0.5px; }
.toolbar input { background:#0f141a; color:#f5f7fa; border:1px solid #2a3340; padding:0.4rem 0.5rem; border-radius:4px; min-width:240px; }
button { background:#2563eb; color:#fff; border:none; padding:0.55rem 0.9rem; border-radius:4px; cursor:pointer; font-size:0.75rem; font-weight:600; letter-spacing:0.5px; }
button:hover { background:#1d4ed8; }
button:disabled { opacity:0.5; cursor:not-allowed; }

.content-wrapper { flex:1 1 auto; display:flex; overflow:hidden; }
main { flex:1 1 auto; overflow:auto; padding:1rem; display:flex; }

.sidebar { width:280px; background:#161b22; border-left:1px solid #232b33; display:flex; flex-direction:column; }
.sidebar-header { padding:0.75rem 1rem; border-bottom:1px solid #232b33; display:flex; align-items:center; justify-content:space-between; }
.sidebar-header h3 { margin:0; font-size:0.9rem; font-weight:600; }
.sidebar-header button { padding:0.4rem 0.6rem; font-size:0.8rem; background:#374151; }
.sidebar-header button:hover { background:#4b5563; }
.sidebar-content { flex:1 1 auto; overflow:auto; }

.job-list { list-style:none; margin:0; padding:0; }
.job-list-empty { padding:1rem; text-align:center; font-size:0.75rem; opacity:0.6; }
.job-item { padding:0.75rem 1rem; border-bottom:1px solid #232b33; cursor:pointer; transition:background-color 0.15s; }
.job-item:hover { background:#1f2937; }
.job-item:active { background:#374151; }
.job-item.active { background:#1e3a8a; }
.job-item .job-id { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:0.7rem; color:#9ca3af; word-break:break-all; }

.messages { list-style:none; margin:0; padding:0; width:100%; display:flex; flex-direction:column; gap:0.75rem; }
.message { display:flex; gap:0.75rem; max-width:960px; }
.message .avatar { width:34px; height:34px; border-radius:6px; background:#243040; display:flex; align-items:center; justify-content:center; font-size:0.65rem; text-transform:uppercase; font-weight:600; letter-spacing:0.5px; color:#cdd6e0; flex-shrink:0; }
.message.user .avatar { background:#1e3a8a; color:#fff; }
.message.assistant .avatar { background:#374151; }
.message .bubble { background:#1b222c; border:1px solid #27313d; padding:0.75rem 0.9rem; border-radius:8px; position:relative; overflow:hidden; }
.message.user .bubble { background:#1e293b; }
.message pre { margin:0; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:0.8rem; white-space:pre-wrap; word-wrap:break-word; line-height:1.35; }
.time { display:block; margin-top:0.5rem; font-size:0.6rem; opacity:0.5; }
footer { border-top:1px solid #232b33; background:#161b22; padding:0.75rem 1rem; }
#chat-form { display:flex; flex-direction:column; gap:0.5rem; max-width:960px; margin:0 auto; }
#user-input { resize:vertical; max-height:260px; min-height:60px; background:#0f141a; color:#f5f7fa; border:1px solid #2a3340; padding:0.75rem 0.85rem; border-radius:6px; font-size:0.85rem; line-height:1.35; }
.actions { display:flex; align-items:center; gap:0.75rem; }
.status { font-size:0.65rem; letter-spacing:0.5px; opacity:0.7; min-height:1em; }
.empty-hint { opacity:0.5; text-align:center; margin-top:2rem; font-size:0.85rem; }
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#0f1115; }
::-webkit-scrollbar-thumb { background:#2a3340; border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:#374251; }

@media (max-width:720px){
  header { flex-direction:column; align-items:flex-start; }
  .toolbar { width:100%; }
  .content-wrapper { flex-direction:column; }
  .sidebar { width:100%; max-height:200px; order:-1; }
  .sidebar-content { max-height:150px; }
}