:root { --bg:#0b0f14; --panel:#111822; --border:#1f2b3a; --text:#e6edf3; --muted:#8b98a9; --accent:#4da3ff; --tool:#b98aff; --ok:#3fb950; }
  * { box-sizing:border-box; margin:0; padding:0; }
  body { font-family:system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); height:100vh; display:flex; flex-direction:column; }
  header { padding:10px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:14px; background:var(--panel); }
  header h1 { font-size:17px; font-weight:600; }
  .badge { font-size:11px; padding:3px 9px; border-radius:20px; border:1px solid var(--ok); color:var(--ok); }
  .badge.model { border-color:var(--accent); color:var(--accent); }
  header a { margin-left:auto; color:var(--muted); text-decoration:none; font-size:13px; }
  main { flex:1; display:flex; min-height:0; }
  #sidebar { width:230px; border-right:1px solid var(--border); background:var(--panel); display:flex; flex-direction:column; }
  #sidebar h2 { font-size:12px; text-transform:uppercase; color:var(--muted); padding:14px 14px 8px; letter-spacing:.5px; }
  #conv-list { flex:1; overflow-y:auto; }
  .conv-item { padding:9px 14px; font-size:13px; color:var(--muted); cursor:pointer; border-left:2px solid transparent; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .conv-item:hover { background:#182230; color:var(--text); }
  .conv-item.active { border-left-color:var(--accent); color:var(--text); background:#182230; }
  #new-conv { margin:10px 14px; padding:8px; background:var(--accent); color:#04101f; border:none; border-radius:6px; cursor:pointer; font-weight:600; font-size:13px; }
  #chat-col { flex:1.6; display:flex; flex-direction:column; min-width:0; border-right:1px solid var(--border); }
  #messages { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:14px; }
  .msg { max-width:85%; padding:11px 15px; border-radius:12px; font-size:14px; line-height:1.55; white-space:pre-wrap; }
  .msg.user { align-self:flex-end; background:#1c3a5e; }
  .msg.assistant { align-self:flex-start; background:var(--panel); border:1px solid var(--border); }
  .msg .meta { font-size:10px; color:var(--muted); margin-top:6px; }
  #thinking { display:none; align-self:flex-start; color:var(--muted); font-size:13px; font-style:italic; padding:4px 15px; }
  #input-bar { display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--border); background:var(--panel); }
  #input { flex:1; background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:11px 14px; font-size:14px; resize:none; font-family:inherit; }
  #send { padding:0 22px; background:var(--accent); color:#04101f; border:none; border-radius:8px; font-weight:600; cursor:pointer; }
  #send:disabled { opacity:.4; cursor:not-allowed; }
  #trace-col { flex:1; display:flex; flex-direction:column; min-width:0; background:var(--panel); }
  #trace-col h2 { font-size:12px; text-transform:uppercase; color:var(--tool); padding:14px 16px 8px; letter-spacing:.5px; }
  #trace { flex:1; overflow-y:auto; padding:0 16px 16px; display:flex; flex-direction:column; gap:10px; }
  .tool-card { border:1px solid var(--border); border-left:3px solid var(--tool); border-radius:8px; padding:10px 12px; font-size:12px; }
  .tool-card .tname { color:var(--tool); font-weight:600; font-size:13px; }
  .tool-card .targs { color:var(--muted); margin:4px 0; font-family:ui-monospace,monospace; }
  .tool-card pre { background:var(--bg); padding:8px; border-radius:6px; overflow-x:auto; color:#9fb3c8; font-size:11px; max-height:160px; overflow-y:auto; white-space:pre-wrap; }
  .tool-empty { color:var(--muted); font-size:13px; font-style:italic; padding:10px 4px; }
  #login-wall { display:none; flex:1; align-items:center; justify-content:center; flex-direction:column; gap:12px; color:var(--muted); }
  #login-wall a { color:var(--accent); }
  @media (max-width:900px) { #trace-col { display:none; } #sidebar { width:170px; } }
  /* classes utilitaires utilisees par chef.html/chef.js mais jamais definies */
  .u-hidden { display:none !important; }
  .u-visible-block { display:block !important; }
  .u-muted-inline { color:var(--muted); font-weight:400; }