:root{
    --bg:#0a0d10;
    --panel:#111519;
    --panel2:#141a21;
    --border:#1d242b;
    --text:#e6e9ec;
    --muted:#79838d;
    --green:#12b981;
    --green-dim:#0b2e23;
    --red:#e5484d;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
    font-family:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
}

/* ===== navbar ===== */
.navbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 26px;
    height:56px;
    background:var(--panel);
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:10;
}
.nav-brand{
    display:flex; align-items:center; gap:10px;
    font-weight:700; letter-spacing:1.5px; font-size:14px;
}
.nav-brand .mark{ color:var(--green); }

.nav-links{
    display:flex; align-items:center; gap:4px;
}
.nav-links a{
    color:var(--muted);
    text-decoration:none;
    font-size:12.5px;
    letter-spacing:.5px;
    text-transform:uppercase;
    padding:8px 14px;
    border-radius:5px;
    transition:color .2s, background .2s;
}
.nav-links a:hover{ color:var(--text); background:var(--panel2); }
.nav-links a.active{ color:var(--green); }
.nav-links a.nav-logout{ color:var(--muted); border:1px solid var(--border); margin-left:8px; }
.nav-links a.nav-logout:hover{ color:var(--red); border-color:var(--red); background:transparent; }

/* ===== conteneur ===== */
.app{
    width:100%;
    max-width:900px;
    margin:0 auto;
    padding:28px 20px;
    display:flex;
    flex-direction:column;
}

header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
}
.page-title{
    font-size:13px; color:var(--muted);
    text-transform:uppercase; letter-spacing:2px;
}

.status-pill{
    display:flex; align-items:center; gap:8px;
    font-size:11px; color:var(--muted);
    border:1px solid var(--border);
    padding:6px 12px; border-radius:4px;
    text-transform:uppercase; letter-spacing:.6px;
}
.dot{ width:8px; height:8px; border-radius:50%; background:#3a3f45; transition:.3s; }
.dot.on{ background:var(--green); }
.dot.off{ background:var(--red); }

/* ===== boutons ===== */
.btn{
    font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.5px;
    padding:11px 20px; border-radius:6px; cursor:pointer;
    border:1px solid var(--border); background:var(--panel); color:var(--text);
    transition:border-color .2s, background .2s;
    text-transform:uppercase;
}
.btn:hover:not(:disabled){ border-color:var(--green); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn.primary{ background:var(--green-dim); border-color:var(--green); color:var(--green); }
.btn.primary:hover:not(:disabled){ background:#0e3b2c; }

#setup{
    display:flex; gap:12px; margin-bottom:18px; flex-wrap:wrap;
}

/* ===== log ===== */
#log{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    padding:26px;
    height:58vh;
    overflow-y:auto;
    scroll-behavior:smooth;
}
#log:empty::after{
    content:"// la conversation apparaîtra ici";
    color:#3d454e;
    font-size:13px;
}
#log::-webkit-scrollbar{ width:10px; }
#log::-webkit-scrollbar-thumb{ background:#242c34; border-radius:20px; }

.msg{ margin-bottom:26px; line-height:1.75; font-size:14.5px; }
.msg:last-child{ margin-bottom:0; }

.role{
    display:inline-flex; align-items:center; gap:7px;
    font-weight:700; font-size:12px;
    text-transform:uppercase; letter-spacing:1px;
    margin-bottom:8px;
}
.role.user{ color:var(--text); }
.role.claude{ color:var(--green); }
.role.user::before{ content:"›"; color:var(--muted); }
.role.claude::before{ content:"◆"; }

.body{ white-space:pre-wrap; word-wrap:break-word; }

.meta{
    margin-top:10px; color:var(--muted); font-size:12px;
    font-variant-numeric:tabular-nums;
}
.err{ color:var(--red); font-weight:600; }

/* ===== saisie ===== */
#ask{
    margin-top:22px;
    display:flex; gap:12px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    padding:12px;
}
#prompt{
    flex:1; min-width:0;
    border:none; outline:none; background:transparent;
    font-family:inherit; font-size:14.5px; color:var(--text);
}
#prompt::placeholder{ color:#4d555e; }
#ask #sendBtn{ white-space:nowrap; }

@media (max-width:700px){
    .navbar{ padding:0 14px; }
    .nav-links a{ padding:8px 9px; font-size:11px; }
    .app{ padding:18px 14px; }
    #log{ height:52vh; padding:18px; }
    #ask{ flex-direction:column; }
    #ask #sendBtn{ width:100%; }
}