/* =====================================================
   COPILOT DROP ACTUARIAL — Styles
   Extrait de n8n_visual_builder.html
   ===================================================== */

/* ── Sidebar mode Copilot ────────────────────────────── */
.sidebar-tools.copilot-mode {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    padding: 0 !important;
}
.sidebar-tools.copilot-mode #sidebarCopilotPanel {
    flex: 1;
    overflow-y: auto;
}

/* ── Sidebar tabs ─────────────────────────────────────── */
.sidebar-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: #0d0f1e;
    position: sticky;
    top: 0;
    z-index: 25;
    flex-shrink: 0;
}
.sidebar-tab {
    flex: 1;
    padding: 10px 6px;
    font-size: 11px;
    font-weight: 600;
    border: none;
    background: transparent;
    color: #4b5563;
    cursor: pointer;
    transition: color .2s, border-bottom .2s;
    border-bottom: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    letter-spacing: .02em;
}
.sidebar-tab.active {
    color: #818cf8;
    border-bottom: 2px solid #818cf8;
}
.sidebar-tab#tabCopilot.active {
    color: #a78bfa;
    border-bottom: 2px solid #a78bfa;
}
.sidebar-tab:hover:not(.active) {
    color: #94a3b8;
    background: rgba(255,255,255,0.03);
}

.copilot-hidden { display: none !important; }

/* ── Copilot Panel ────────────────────────────────────── */
#sidebarCopilotPanel {
    background: #080a14;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Header */
.cp-header {
    display: flex;
    align-items: center;
    justify-content: stretch;
    padding: 14px 15px 8px;
    flex-shrink: 0;
}
.cp-header-left { display: none; }
.cp-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #6c47ff 0%, #3b82f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(108,71,255,.35);
}
.cp-title {
    font-size: 13px;
    font-weight: 700;
    color: #e2e8f0;
    letter-spacing: .01em;
    line-height: 1.2;
}
.cp-subtitle {
    font-size: 9.5px;
    color: #475569;
    letter-spacing: .03em;
    margin-top: 1px;
}
.cp-mcp-pill {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(34,197,94,0.18);
    border-radius: 8px;
    font-size: 11px;
    color: #86efac;
    font-weight: 600;
    cursor: help;
    flex-shrink: 0;
    letter-spacing: 0;
}
.cp-mcp-pill strong {
    margin-left: auto;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
}
.cp-mcp-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
    display: inline-block;
    flex-shrink: 0;
}

/* Agents section */
.cp-agents-section {
    padding: 16px 15px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
}
.cp-agents-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #64748b;
    margin-bottom: 8px;
}
.cp-agents-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.cp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    background: rgba(148,163,184,0.07);
    border: 1px solid rgba(148,163,184,0.14);
    color: #cbd5e1;
    cursor: default;
    transition: all .18s;
    white-space: nowrap;
}
.cp-badge i { font-size: 9px; opacity: .8; }
.cp-badge--life {
    background: rgba(16,185,129,0.09);
    border-color: rgba(16,185,129,0.22);
    color: #86efac;
}
.cp-badge--support {
    background: rgba(59,130,246,0.08);
    border-color: rgba(59,130,246,0.18);
    color: #bfdbfe;
}
.cp-badge.active {
    background: rgba(108,71,255,0.3);
    border-color: #7c3aed;
    color: #fff;
    box-shadow: 0 0 10px rgba(108,71,255,0.3);
    animation: cp-pulse 1.4s ease-in-out infinite;
}
.cp-badge.done {
    background: rgba(16,185,129,0.12);
    border-color: rgba(16,185,129,0.3);
    color: #6ee7b7;
}
@keyframes cp-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(108,71,255,.4); }
    50%      { box-shadow: 0 0 0 6px rgba(108,71,255,0); }
}

/* Input zone */
.cp-input-wrap {
    padding: 14px 15px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
}
.cp-textarea-shell {
    position: relative;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(148,163,184,0.16);
    transition: border-color .2s, box-shadow .2s;
}
.cp-textarea-shell:focus-within {
    border-color: rgba(99,102,241,0.6);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.cp-textarea {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #e2e8f0;
    font-size: 12px;
    line-height: 1.6;
    padding: 12px;
    resize: none;
    min-height: 104px;
    max-height: 130px;
    font-family: inherit;
}
.cp-textarea::placeholder { color: #64748b; }
.cp-input-actions {
    display: flex;
    gap: 6px;
    margin-top: 7px;
}
.cp-send-btn {
    flex: 1;
    background: linear-gradient(135deg, #6366f1, #3b82f6);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity .15s, transform .1s;
    letter-spacing: .02em;
}
.cp-send-btn:hover { opacity: .9; transform: translateY(-1px); }
.cp-send-btn:active { transform: translateY(0); }
.cp-send-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.cp-clear-btn {
    background: rgba(248,113,113,.08);
    color: #fca5a5;
    border: 1px solid rgba(248,113,113,.2);
    border-radius: 8px;
    padding: 10px 13px;
    cursor: pointer;
    font-size: 11px;
    transition: background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cp-clear-btn:hover { background: rgba(239,68,68,.16); }
.cp-shortcut-hint {
    margin-top: 4px;
    font-size: 9px;
    color: #1e293b;
    text-align: right;
    letter-spacing: .02em;
}

/* Loading */
.cp-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    color: #475569;
    font-size: 11px;
    flex-shrink: 0;
}
.cp-loading-dots {
    display: flex;
    gap: 4px;
}
.cp-loading-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6c47ff;
    display: inline-block;
    animation: cp-dot 1.2s ease-in-out infinite;
}
.cp-loading-dots span:nth-child(2) { animation-delay: .2s; }
.cp-loading-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes cp-dot {
    0%,80%,100% { transform: scale(.7); opacity: .4; }
    40%          { transform: scale(1);  opacity: 1;  }
}

/* Response area */
.cp-response {
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

/* Synthesis card */
.cp-synthesis-card {
    background: linear-gradient(135deg, rgba(99,102,241,.06) 0%, rgba(139,92,246,.06) 100%);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 10px;
    overflow: hidden;
}
.cp-synthesis-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px 6px;
    border-bottom: 1px solid rgba(99,102,241,0.12);
}
.cp-synthesis-icon {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: linear-gradient(135deg, #7c3aed, #6c47ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #fff;
    flex-shrink: 0;
}
.cp-synthesis-title {
    font-size: 10.5px;
    font-weight: 700;
    color: #a78bfa;
    letter-spacing: .03em;
    flex: 1;
}
.cp-expand-btn {
    background: none;
    border: none;
    color: #4b5563;
    cursor: pointer;
    padding: 2px 5px;
    font-size: 10px;
    border-radius: 4px;
    transition: color .15s, background .15s;
}
.cp-expand-btn:hover { color: #a78bfa; background: rgba(99,102,241,.1); }

.cp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 10px 4px;
}
.copilot-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(15,17,32,0.7);
    color: #94a3b8;
    font-size: 10px;
    line-height: 1;
}
.copilot-meta-chip strong {
    color: #e2e8f0;
    font-weight: 700;
    font-size: 9.5px;
}

.cp-synthesis-body {
    padding: 8px 10px 10px;
    color: #cbd5e1;
    font-size: 11.5px;
    line-height: 1.65;
}
.cp-synthesis-body code {
    background: rgba(99,102,241,.15);
    border-radius: 3px;
    padding: 1px 5px;
    font-family: 'Cascadia Code', 'Fira Mono', monospace;
    font-size: 10.5px;
    color: #a5b4fc;
}
.cp-synthesis-body pre {
    background: rgba(8,10,20,0.8);
    border: 1px solid rgba(99,102,241,.18);
    border-radius: 7px;
    padding: 9px 11px;
    font-size: 10.5px;
    color: #a5b4fc;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    margin: 6px 0;
    font-family: 'Cascadia Code', 'Fira Mono', monospace;
    line-height: 1.55;
}

/* Detail toggle */
.cp-detail-section { flex-shrink: 0; }
.cp-detail-toggle {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    color: #374151;
    font-size: 10.5px;
    font-weight: 600;
    padding: 7px 10px;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background .15s, color .15s;
    letter-spacing: .01em;
}
.cp-detail-toggle:hover { background: rgba(255,255,255,0.06); color: #94a3b8; }
.cp-toggle-icon { font-size: 9px; transition: transform .2s; }
.cp-toggle-icon.open { transform: rotate(90deg); }
.cp-agents-detail { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }

/* Agent cards */
.copilot-agent-card {
    background: rgba(15,17,32,0.75);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 8px 10px;
    transition: border-color .15s;
}
.copilot-agent-card:hover { border-color: rgba(99,102,241,.25); }
.copilot-agent-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.copilot-agent-card-name {
    font-size: 10.5px;
    font-weight: 700;
    color: #a78bfa;
    letter-spacing: .01em;
}
.copilot-agent-card-status {
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 600;
}
.status-success     { background: rgba(16,185,129,.12);  color: #6ee7b7; border: 1px solid rgba(16,185,129,.22); }
.status-warning     { background: rgba(245,158,11,.1);   color: #fcd34d; border: 1px solid rgba(245,158,11,.22); }
.status-error       { background: rgba(239,68,68,.1);    color: #fca5a5; border: 1px solid rgba(239,68,68,.22); }
.status-out_of_scope{ background: rgba(100,116,139,.1);  color: #64748b; border: 1px solid rgba(100,116,139,.18); }
.copilot-agent-card-summary  { font-size: 10.5px; color: #64748b; line-height: 1.55; }
.copilot-agent-card-meta     { font-size: 9.5px;  color: #374151; margin-top: 3px; }
.copilot-agent-card-findings { margin-top: 4px; padding-left: 16px; }
.copilot-agent-card-findings li { font-size: 10.5px; color: #94a3b8; line-height: 1.5; }
.copilot-validation-warning {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(245,158,11,.07);
    border: 1px solid rgba(245,158,11,.18);
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 10px;
    color: #fcd34d;
    margin-top: 5px;
}
.copilot-node-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 7px;
    padding: 7px 11px;
    background: linear-gradient(135deg, #059669, #047857);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s, transform .1s;
    letter-spacing: .01em;
}
.copilot-node-action-btn:hover    { opacity: .88; transform: translateY(-1px); }
.copilot-node-action-btn:disabled { opacity: .45; cursor: default; transform: none; }
.copilot-node-action-btn--hypothesis {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
}
.copilot-node-action-btn--code {
    background: linear-gradient(135deg, #0ea5e9, #0369a1);
}
.copilot-agent-card-draft {
    margin-top: 6px;
    padding: 8px 10px;
    background: rgba(8,10,20,.7);
    border: 1px solid rgba(99,102,241,.2);
    border-radius: 7px;
    font-size: 10.5px;
    color: #a5b4fc;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 400px;
    overflow-y: auto;
    font-family: 'Cascadia Code', 'Fira Mono', monospace;
    line-height: 1.55;
}

/* ── Column Mapping interactif ──────────────────────── */
.cp-colmap-block {
    background: linear-gradient(135deg, rgba(16,185,129,.06) 0%, rgba(6,182,212,.06) 100%);
    border: 1px solid rgba(16,185,129,.22);
    border-radius: 10px;
    overflow: hidden;
}
.cp-colmap-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px 6px;
    border-bottom: 1px solid rgba(16,185,129,.12);
}
.cp-colmap-icon {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: linear-gradient(135deg, #059669, #0891b2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #fff;
    flex-shrink: 0;
}
.cp-colmap-title {
    font-size: 10.5px;
    font-weight: 700;
    color: #6ee7b7;
    letter-spacing: .03em;
    flex: 1;
}
.cp-colmap-badge {
    font-size: 9px;
    font-weight: 600;
    color: #475569;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cp-colmap-hint {
    font-size: 10px;
    color: #374151;
    padding: 5px 11px 4px;
    line-height: 1.45;
}
.cp-colmap-fields {
    padding: 4px 11px 2px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.cp-colmap-row {
    display: grid;
    grid-template-columns: 1fr 14px 1fr;
    align-items: center;
    gap: 5px;
}
.cp-colmap-var {
    font-size: 10px;
    font-weight: 700;
    color: #a5b4fc;
    font-family: 'Cascadia Code', 'Fira Mono', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cp-colmap-arrow {
    color: #374151;
    font-size: 9px;
    text-align: center;
    flex-shrink: 0;
}
.cp-colmap-select {
    width: 100%;
    background: #0f1120;
    border: 1px solid rgba(99,102,241,.22);
    border-radius: 5px;
    color: #e2e8f0;
    font-size: 10.5px;
    padding: 4px 20px 4px 7px;
    outline: none;
    cursor: pointer;
    transition: border-color .15s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}
.cp-colmap-select:focus { border-color: #6ee7b7; box-shadow: 0 0 0 2px rgba(16,185,129,.15); }
.cp-colmap-select option { background: #0f1120; }
.cp-colmap-select.cp-colmap-auto {
    border-color: rgba(16,185,129,.45);
    color: #6ee7b7;
}
.cp-colmap-hypothesis {
    font-size: 10px;
    color: #c084fc;
    font-weight: 600;
    padding: 4px 8px;
    background: rgba(192,132,252,.08);
    border: 1px solid rgba(192,132,252,.2);
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.cp-colmap-section-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #374151;
    padding: 5px 0 3px;
}
.cp-colmap-actions {
    display: flex;
    gap: 5px;
    padding: 7px 11px 9px;
}
.cp-colmap-apply-btn {
    flex: 1;
    background: linear-gradient(135deg, #059669, #0891b2);
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: opacity .15s, transform .1s;
}
.cp-colmap-apply-btn:hover    { opacity: .88; transform: translateY(-1px); }
.cp-colmap-apply-btn:disabled { opacity: .45; cursor: default; transform: none; }
.cp-colmap-dismiss-btn {
    background: rgba(239,68,68,.08);
    color: #f87171;
    border: 1px solid rgba(239,68,68,.15);
    border-radius: 7px;
    padding: 7px 9px;
    cursor: pointer;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.cp-colmap-dismiss-btn:hover { background: rgba(239,68,68,.16); }
.cp-colmap-no-data {
    font-size: 10.5px;
    color: #f59e0b;
    padding: 6px 11px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Variable mapping table */
.copilot-vmap { width: 100%; border-collapse: collapse; font-size: 10.5px; margin-top: 6px; }
.copilot-vmap th { background: rgba(99,102,241,.12); color: #a78bfa; padding: 5px 8px; text-align: left; font-weight: 700; border-bottom: 1px solid rgba(99,102,241,.18); }
.copilot-vmap td { padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,.03); color: #cbd5e1; vertical-align: top; }
.copilot-vmap tr:last-child td { border-bottom: none; }
.vmap-ok     { color: #34d399; font-weight: 700; }
.vmap-doute  { color: #fbbf24; font-weight: 700; }
.vmap-absent { color: #f87171; font-weight: 700; }
.copilot-vmap-block  { background: rgba(8,10,20,.6); border: 1px solid rgba(99,102,241,.18); border-radius: 8px; padding: 9px 11px; margin-top: 6px; }
.copilot-vmap-title  { font-size: 10px; font-weight: 700; color: #a78bfa; margin-bottom: 5px; }

/* Modal Copilot */
#copilotModalSynthesis { font-size: 13px; color: #e2e8f0; line-height: 1.7; }
#copilotModalSynthesis pre  { background: rgba(8,10,20,.85); border: 1px solid rgba(99,102,241,.25); border-radius: 8px; padding: 14px; font-size: 12px; color: #a5b4fc; white-space: pre-wrap; overflow-x: auto; }
#copilotModalSynthesis code { background: rgba(99,102,241,.18); border-radius: 4px; padding: 2px 6px; font-size: 12px; color: #a5b4fc; }
.copilot-modal-agent-card { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07); border-radius: 9px; padding: 13px 15px; margin-bottom: 10px; }
.copilot-modal-agent-card .copilot-agent-card-name    { font-size: 12px; }
.copilot-modal-agent-card .copilot-agent-card-summary { font-size: 12px; }
.copilot-modal-agent-card .copilot-agent-card-findings li { font-size: 12px; }
.copilot-modal-agent-card .copilot-agent-card-draft   { font-size: 12px; }
.copilot-modal-section-title { font-size: 11px; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: .06em; margin: 14px 0 7px; }

/* ── Workflow template cards ────────────────────────── */
.wf-template-card {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 40px minmax(0,1fr) auto;
    align-items: flex-start;
    gap: 14px;
}
.wf-template-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wf-template-icon i { color: white; font-size: 14px; }
.wf-template-body { flex: 1; min-width: 0; }
.wf-template-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.wf-template-name {
    font-size: 13px;
    font-weight: 700;
    color: #e2e8f0;
}
.wf-template-category {
    font-size: 10px;
    background: rgba(99,102,241,.15);
    color: #a5b4fc;
    border: 1px solid rgba(99,102,241,.3);
    border-radius: 4px;
    padding: 1px 7px;
}
.wf-template-status {
    font-size: 10px;
    color: #475569;
}
.wf-template-status--unavailable { color: #fca5a5; }
.wf-template-description {
    font-size: 11px;
    color: #64748b;
    line-height: 1.5;
}
.wf-template-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.wf-template-badge {
    font-size: 10px;
    background: rgba(14,165,233,.12);
    color: #7dd3fc;
    border: 1px solid rgba(14,165,233,.25);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}
.wf-template-load-btn {
    flex-shrink: 0;
    background: rgba(16,185,129,.12);
    color: #6ee7b7;
    border: 1px solid rgba(16,185,129,.25);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.wf-template-load-btn:disabled {
    background: rgba(148,163,184,.08);
    color: #64748b;
    border-color: rgba(148,163,184,.16);
    cursor: not-allowed;
}