:root{
      --bg:#0f1220;--panel:#151a2e;--panel-2:#1b2140;--muted:#6b7296;--text:#e9ecff;--brand:#6d8cff;--ok:#2dd4bf;--warn:#f59e0b;--danger:#ef4444;--shadow:0 10px 30px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    body{margin:0;background:linear-gradient(160deg,#0b0e1a,#121735);color:var(--text);font:500 14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans}
    h1{font-size:22px;margin:0}
    .app{display:grid;grid-template-rows:auto auto 1fr auto;min-height:100vh}
    header{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--panel);border-bottom:1px solid #20274a;position:sticky;top:0;z-index:50}
    .actions{display:flex;gap:8px;align-items:center}
    button,select,input{border:1px solid #2a3468;background:var(--panel-2);color:var(--text);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow)}
    button{cursor:pointer}
    button.primary{background:linear-gradient(180deg,var(--brand),#5b76ff);border:none}
    button.ghost{background:transparent;border-color:#2a3468}
    input,select{height:40px}
    .grid{display:grid;grid-template-columns:320px 1fr;gap:16px;padding:16px}
    .sidebar{background:var(--panel);border:1px solid #20274a;border-radius:16px;box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:12px}
    .stat{display:flex;justify-content:space-between;background:var(--panel-2);padding:10px 12px;border-radius:12px;border:1px solid #2a3468}
    .tag{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid #2a3468;background:#141a33;color:#c7cffb;font-size:12px}

    /* Kanban */
    .kanban{display:grid;grid-template-columns:repeat(4, minmax(260px,1fr));gap:12px}
    .col{background:var(--panel);border:1px solid #20274a;border-radius:16px;display:flex;flex-direction:column;min-height:240px;max-height:58vh}
    .col header{position:sticky;top:0;background:transparent;border:none;padding:12px 12px}
    .col .title{font-weight:700;letter-spacing:.2px}
    .drop{flex:1;overflow:auto;padding:0 10px 10px 10px}
    .card{background:var(--panel-2);border:1px solid #2a3468;border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;margin:10px 0;box-shadow:var(--shadow)}
    .card.dragging{opacity:.6;transform:rotate(2deg)}
    .card h4{margin:0;font-size:14px}
    .row{display:flex;align-items:center;justify-content:space-between;gap:8px}
    .pill{font-size:11px;padding:4px 8px;border-radius:999px;border:1px solid #2a3468}
    .prio-low{background:#16321f;border-color:#2a4a3b;color:#b8f3cf}
    .prio-medium{background:#2a2742;border-color:#3c3a5b;color:#c9c3ff}
    .prio-high{background:#3b1d1d;border-color:#5b2b2b;color:#ffc7c7}
    .agent{display:inline-flex;align-items:center;gap:6px}
    .agent .dot{width:8px;height:8px;border-radius:50%}
    .dot.a1{background:#8b5cf6}.dot.a2{background:#22d3ee}.dot.a3{background:#f472b6}.dot.default{background:#9ca3af}
    .meta{font-size:12px;color:#aab3e9}
    .meta .icon{opacity:.8;margin-right:6px}

    /* Frise chronologique (timeline) */
    .timeline-wrapper{background:var(--panel);border:1px solid #20274a;border-radius:16px;margin:0 16px 16px 16px;box-shadow:var(--shadow)}
    .timeline-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #20274a}
    .timeline{display:grid;grid-template-columns:240px 1fr;max-height:32vh}
    .tl-left{border-right:1px solid #20274a}
    .tl-left,.tl-right{overflow:auto}
    .agent-row{display:grid;grid-template-columns:1fr;align-items:center;border-bottom:1px dashed #232a52;padding:10px 12px}
    .agent-row .name{font-weight:700}
    .scale{display:grid;grid-auto-flow:column;grid-auto-columns:60px;border-bottom:1px solid #20274a;position:sticky;top:0;background:var(--panel);z-index:5}
    .scale .day{padding:8px 6px;border-left:1px dashed #232a52;font-size:12px;color:#c7cffb;white-space:nowrap}
    .gantt{position:relative;min-height:220px}
    .bar{position:absolute;height:28px;border-radius:999px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid #2a3468;background:linear-gradient(180deg,#1e254a,#162044)}
    .bar.done{opacity:.6}
    .bar .badge{font-size:11px;padding:2px 6px;border-radius:999px;background:#1e2a58;border:1px solid #2a3468}
    .legend{display:flex;gap:10px;align-items:center}

    /* Dialog */
    dialog{border:1px solid #2a3468;border-radius:16px;padding:0;background:var(--panel);color:var(--text);box-shadow:var(--shadow);width:min(560px,96vw)}
    dialog header{padding:14px 16px;border-bottom:1px solid #20274a}
    dialog .content{padding:14px 16px;display:grid;gap:12px}
    dialog .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    dialog footer{padding:12px 16px;border-top:1px solid #20274a;display:flex;justify-content:flex-end;gap:8px}
    .field{display:grid;gap:8px}
    .hint{font-size:12px;color:var(--muted)}

    /* Utilities */
    .flex{display:flex;gap:8px;align-items:center}
    .grow{flex:1}
    .hidden{display:none!important}
    .sep{height:1px;background:#20274a;margin:6px 0}
    @media (max-width: 1100px){.grid{grid-template-columns:1fr}.kanban{grid-template-columns:repeat(2, minmax(260px,1fr))}}
  
/* --- Dialog de gestion des agents (dark theme) --- */
#agentsDialog {
  padding: 20px;
  border: 1px solid #2a3468;
  border-radius: 16px;
  background: var(--panel);
  max-width: 500px;
  width: 100%;
  box-shadow: var(--shadow);
  color: var(--text);
}

#agentsDialog h2 {
  margin: 0 0 16px;
  font-size: 1.2rem;
  color: var(--text);
}

#agentsList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 16px;
  padding-right: 4px;
}

/* Carte agent */
.agent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel-2);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #2a3468;
  transition: background 0.2s, border 0.2s;
}
.agent-item:hover {
  background: #1f2548;
  border-color: #3a468a;
}

.agent-item span.dot {
  flex-shrink: 0;
}

.agent-item strong {
  margin: 0 6px;
  font-weight: 600;
  color: var(--text);
}

.agent-item em {
  font-size: 0.85rem;
  color: var(--muted);
  margin-left: 4px;
}

/* Boutons d'action dans chaque carte */
.agent-item button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  margin-left: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--muted);
  transition: background 0.2s, color 0.2s;
}
.agent-item button:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
}

/* Footer du dialog */
#agentsDialog menu {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
#agentsDialog menu button {
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid #2a3468;
  background: var(--panel-2);
  color: var(--text);
  transition: background 0.2s, border 0.2s;
}
#agentsDialog menu button:first-child {
  background: linear-gradient(180deg,var(--brand),#5b76ff);
  border: none;
  color: #fff;
}
#agentsDialog menu button:first-child:hover {
  background: #5b76ff;
}
#agentsDialog menu button:last-child:hover {
  background: #232a52;
}