/* ???????????????????????????????????????????????????????????????????????????
   Justiweb ? Syst?me de Projets
   Th?me SOMBRE par d?faut (style.css) ; overrides clairs ? la fin.
   @version 1.0 ? 2026-05-18
???????????????????????????????????????????????????????????????????????????? */

/* ?? Accent ??????????????????????????????????????????????????????????????? */
:root {
    --proj-accent:       #3970f4;
    --proj-accent-hover: #2d5de0;
    --proj-danger:       #e53e3e;
    --proj-radius:       10px;
    --proj-radius-sm:    6px;
}

/* ????????????????????????????????????????????????????????????????????????????
   SIDEBAR ? Section Projets (dark theme)
???????????????????????????????????????????????????????????????????????????? */

.sidebar-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 12px 4px;
}

.sidebar-section-header .sidebar-section-title {
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #888;
}

/* Bouton + icône dans le header de section (ex: menu kebab) */
.sidebar-section-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: #888;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.sidebar-section-action:hover {
    background: #2a2a2a;
    color: #ddd;
}

/* ── Bouton "Nouveau projet" visible (point d'entrée principal) ─────────── */
.sidebar-new-project-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    width: calc(100% - 12px);
    margin: 4px 6px 6px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--proj-radius-sm);
    background: rgba(255,255,255,.05);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    text-align: left;
}
.sidebar-new-project-btn:hover {
    border-color: rgba(255,255,255,.40);
    background: rgba(255,255,255,.09);
}
.sidebar-new-project-btn svg { flex-shrink: 0; }

.sidebar-projects {
    padding: 2px 6px 8px;
}

.sidebar-projects-loading,
.sidebar-projects-empty,
.sidebar-projects-error {
    padding: 8px 8px;
    font-size: 12px;
    color: #888;
}

.sidebar-project-item {
    border-radius: var(--proj-radius-sm);
    margin-bottom: 1px;
    position: relative;
}

/* ── Ligne du projet (icône folder + nom + crayon + 3-pts) ── */
.sidebar-project-row {
    display: flex;
    align-items: center;
    border-radius: var(--proj-radius-sm);
    transition: background .15s;
}
.sidebar-project-item:hover .sidebar-project-row { background: #232323; }
.sidebar-project-item.active .sidebar-project-row { background: rgba(255,255,255,.07); }
.sidebar-project-item.active .sidebar-project-name { color: #fff; font-weight: 600; }
.sidebar-project-item.active .sidebar-project-icon { color: #fff; }

/* Bouton toggle (folder + nom) — font-size aligné sur les conversations normales */
.sidebar-project-toggle {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: none;
    background: transparent;
    color: #ddd;
    font-size: .98em; /* identique à .sidebar-item-title */
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
}
.sidebar-project-icon { flex-shrink: 0; color: #888; }
.sidebar-project-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Icône crayon "ouvrir le projet" */
.sidebar-project-edit-btn {
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    color: #888;
    text-decoration: none;
    transition: background .12s, color .12s;
    margin-right: 2px;
}
.sidebar-project-item:hover .sidebar-project-edit-btn { display: flex; }
.sidebar-project-edit-btn:hover { background: #2a2a2a; color: #fff; }

.sidebar-project-menu-btn {
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: #888;
    margin-right: 4px;
    transition: background .12s;
}
.sidebar-project-item:hover .sidebar-project-menu-btn { display: flex; }
.sidebar-project-menu-btn:hover { background: #2a2a2a; color: #fff; }

/* ── Conversations sous le projet ── */
.sidebar-project-convs {
    display: none;
    flex-direction: column;
    padding-left: 22px;
    padding-bottom: 4px;
}
.sidebar-project-convs.open { display: flex; }

.sidebar-conv-item {
    display: block;
    padding: 8px 50px 8px 10px; /* padding-right 50px pour le bouton ⋯ */
    color: #ddd;
    text-decoration: none;
    font-size: .98em;
    border-radius: 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: background .12s, color .12s;
    border: 1px solid transparent;
}
.sidebar-conv-item:hover { background: #232323; border-color: #2c2c2c; color: #fff; }
.sidebar-conv-item.active {
    background: rgba(255,255,255,.08);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}
.sidebar-conv-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidebar-conv-more {
    display: block;
    padding: 4px 8px;
    font-size: .82em;
    color: #666;
    text-decoration: none;
    border-radius: 4px;
    transition: color .12s;
}
.sidebar-conv-more:hover { color: #bbb; }

.sidebar-conv-loading,
.sidebar-conv-empty {
    padding: 5px 8px;
    font-size: 12px;
    color: #555;
    font-style: italic;
}

/* Badge sources (masqué) */
.sidebar-project-sources-badge { display: none; }

/* Menu contextuel */
.sidebar-project-context-menu {
    background: #1e1e1e;
    border: 1px solid #2a2a2a;
    border-radius: var(--proj-radius-sm);
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
    padding: 4px;
    min-width: 160px;
}
.sidebar-ctx-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 13px;
    color: #ddd;
    cursor: pointer;
    border-radius: 4px;
    transition: background .1s;
    font-family: inherit;
}
.sidebar-ctx-item:hover { background: #262626; }
.sidebar-ctx-danger { color: var(--proj-danger) !important; }
.sidebar-ctx-danger:hover { background: rgba(229,62,62,.1) !important; }

/* ????????????????????????????????????????????????????????????????????????????
   VUE PROJET ? zone centrale (dark)
???????????????????????????????????????????????????????????????????????????? */

.project-view {
    max-width: 720px;
    margin: 0 auto;
    padding: 182px 20px 80px; /* 32 + 150 = 182px pour descendre le bloc */
    min-height: 60vh;
}

.project-view-header { margin-bottom: 24px; }

.project-view-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
/* Icône dossier dans l'en-tête du projet : blanc en dark mode */
.project-icon { color: #ddd; flex-shrink: 0; }
.project-view-name {
    font-size: 22px;
    font-weight: 700;
    color: #eee;
    margin: 0;
    line-height: 1.3;
}

/* Onglets */
.project-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #333;
}
.project-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    transition: color .15s;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-family: inherit;
}
.project-tab:hover { color: #ddd; }
/* Onglet actif : blanc en dark mode */
.project-tab.active {
    color: #fff;
    border-bottom-color: #fff;
    font-weight: 600;
}
.project-tab-badge {
    background: var(--proj-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 6px;
    line-height: 1.5;
}
.project-tab-warning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f39c12; /* orange chaleureux */
    flex-shrink: 0;
    vertical-align: middle;
    animation: jwPulseWarningIcon 2s infinite ease-in-out;
}
@keyframes jwPulseWarningIcon {
    0% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.18); opacity: 1; color: #e67e22; }
    100% { transform: scale(1); opacity: 0.85; }
}

.project-panel { padding-top: 24px; }

/* ?? Chats ??????????????????????????????????????????????????????????????? */
.project-new-chat-wrap { margin-bottom: 20px; }
.project-new-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--proj-accent);
    color: #fff;
    text-decoration: none;
    border-radius: var(--proj-radius);
    font-size: 14px;
    font-weight: 600;
    transition: background .15s, transform .1s;
}
.project-new-chat-btn:hover {
    background: var(--proj-accent-hover);
    transform: translateY(-1px);
}

.project-conv-list { display: flex; flex-direction: column; gap: 4px; }
.project-conv-loading,
.project-conv-empty,
.project-conv-error {
    color: #888;
    font-size: 14px;
    padding: 12px 0;
    text-align: center;
    line-height: 1.6;
}

.project-conv-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--proj-radius-sm);
    text-decoration: none;
    color: #ddd;
    font-size: 14px;
    transition: background .12s;
    border: 1px solid transparent;
}
.project-conv-item:hover { background: #232323; border-color: #333; }
.project-conv-icon { color: #888; flex-shrink: 0; }
.project-conv-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-conv-date { flex-shrink: 0; font-size: 12px; color: #888; }

/* ── Bannière de bienvenue nouveau projet ── */
.project-sources-welcome {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 16px 20px;
    background: rgba(57, 112, 244, 0.1);
    border: 1px solid rgba(57, 112, 244, 0.25);
    border-radius: var(--proj-radius);
    margin-bottom: 24px;
    position: relative;
    animation: slideInProjectIntro 0.3s ease-out;
}
@keyframes slideInProjectIntro {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.project-sources-welcome-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(57, 112, 244, 0.2);
    color: #5c8df6;
    border-radius: 50%;
    flex-shrink: 0;
}
.project-sources-welcome-content {
    flex: 1;
    padding-right: 20px;
}
.project-sources-welcome-content h3 {
    margin: 0 0 6px 0;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}
.project-sources-welcome-content p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #ccc;
}
.project-sources-welcome-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #888;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
.project-sources-welcome-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* ?? Sources ????????????????????????????????????????????????????????????? */
.project-sources-header { margin-bottom: 20px; }
.project-add-source-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #fff;
    color: #111;
    border: none;
    border-radius: var(--proj-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .1s;
    margin-bottom: 10px;
    font-family: inherit;
}
.project-add-source-btn:hover {
    background: #e8e8e8;
    transform: translateY(-1px);
}
.project-sources-hint { font-size: 13px; color: #888; margin: 0; line-height: 1.5; }

/* Barre de quota sources */
.sources-quota {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.sources-quota-bar-track {
    width: 100px;
    height: 4px;
    background: rgba(255,255,255,.12);
    border-radius: 99px;
    overflow: hidden;
    flex-shrink: 0;
}
.sources-quota-bar-fill {
    height: 100%;
    background: #3970f4;
    border-radius: 99px;
    transition: width .3s ease;
}
.sources-quota-bar-fill.full { background: #e53935; }
.sources-quota-label {
    font-size: 12px;
    color: #aaa;
    white-space: nowrap;
}
.sources-quota-hint {
    font-size: 12px;
    color: #777;
    white-space: nowrap;
}
.sources-quota-hint a, .sources-quota-cta a { color: #6b9eff; text-decoration: none; }
.sources-quota-hint a:hover, .sources-quota-cta a:hover { text-decoration: underline; }
.sources-quota-cta {
    font-size: 12px;
    color: #e57373;
    white-space: nowrap;
}
/* Light mode */
body.page-app:not(.dark-mode) .sources-quota-bar-track { background: #e5e7eb; }
body.page-app:not(.dark-mode) .sources-quota-label { color: #555; }
body.page-app:not(.dark-mode) .sources-quota-hint { color: #888; }
body.page-app:not(.dark-mode) .sources-quota-cta { color: #c62828; }
body.page-app:not(.dark-mode) .sources-quota-hint a,
body.page-app:not(.dark-mode) .sources-quota-cta a { color: #1e5bde; }

/* Guide discret sous la zone de sources */
.project-sources-guide {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    transition: background 0.15s, border-color 0.15s;
}
.project-sources-guide.collapsed {
    gap: 0;
}
.project-sources-guide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    outline: none;
}
.project-sources-guide-title {
    font-size: 11.5px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .04em;
    display: inline-flex;
    align-items: center;
}
.project-sources-guide-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #888;
    transition: transform 0.2s ease, color 0.15s;
}
.project-sources-guide-header:hover .project-sources-guide-chevron {
    color: #fff;
}
body.page-app:not(.dark-mode) .project-sources-guide-header:hover .project-sources-guide-chevron {
    color: #111;
}
.project-sources-guide.collapsed .project-sources-guide-chevron {
    transform: rotate(180deg);
}
.project-sources-guide-content {
    display: flex;
    flex-direction: column;
    gap: 7px;
    animation: jwFadeInGuideContent 0.2s ease-out;
}
@keyframes jwFadeInGuideContent {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.project-sources-guide.collapsed .project-sources-guide-content {
    display: none;
}
.project-sources-guide-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.project-sources-guide-tags span {
    font-size: 12px;
    color: #ccc;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: 2px 10px;
    white-space: nowrap;
}
.project-sources-guide-tip {
    font-size: 12px;
    color: #888;
    line-height: 1.5;
    font-style: italic;
}
/* Light mode */
body.page-app:not(.dark-mode) .project-sources-guide {
    background: #f8f9fa;
    border-color: #e5e7eb;
}
body.page-app:not(.dark-mode) .project-sources-guide-tags span {
    color: #555;
    background: #fff;
    border-color: #d1d5db;
}
body.page-app:not(.dark-mode) .project-sources-guide-tip { color: #6b7280; }

.project-sources-list { display: flex; flex-direction: column; gap: 8px; }
.project-sources-loading,
.project-sources-error { color: #888; font-size: 14px; padding: 12px 0; }

.project-sources-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    color: #888;
    font-size: 14px;
    line-height: 1.6;
}

.project-source-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: #2a2a2a;
    border: 1px solid #333;
    border-radius: var(--proj-radius);
    transition: border-color .12s;
}
.project-source-item:hover { border-color: var(--proj-accent); }
/* Icône de fichier dans la liste des sources : blanc en dark mode */
.project-source-icon { color: #ddd; flex-shrink: 0; padding-top: 2px; }
.project-source-info { flex: 1; min-width: 0; }
.project-source-name { font-size: 14px; font-weight: 600; color: #ddd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-source-meta { font-size: 12px; color: #888; margin-top: 2px; }
.project-source-preview { font-size: 12px; color: #888; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-source-delete-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #888;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, background .12s, color .12s;
}
.project-source-item:hover .project-source-delete-btn { opacity: 1; }
.project-source-delete-btn:hover { background: rgba(229,62,62,.15); color: var(--proj-danger); }

/* ????????????????????????????????????????????????????????????????????????????
   MODAL ? Ajouter une source (dark)
???????????????????????????????????????????????????????????????????????????? */

.project-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(3px);
}

.project-modal {
    background: #1e1e1e;
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.project-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #2a2a2a;
    flex-shrink: 0;
}
.project-modal-title { margin: 0; font-size: 17px; font-weight: 700; color: #eee; }
.project-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 20px;
    color: #888;
    cursor: pointer;
    border-radius: 50%;
    transition: background .12s;
    font-family: inherit;
}
.project-modal-close:hover { background: #2a2a2a; color: #ddd; }

.project-modal-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 16px 0;
    border-bottom: 1px solid #2a2a2a;
    flex-shrink: 0;
}
.project-modal-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: 6px 6px 0 0;
    transition: color .12s;
    font-family: inherit;
}
.project-modal-tab:hover { color: #ddd; }
.project-modal-tab.active { color: var(--proj-accent); border-bottom-color: var(--proj-accent); font-weight: 600; }

.project-modal-panel { padding: 20px 24px; overflow-y: auto; }

/* Zone de d?p?t */
.project-drop-zone {
    border: 2px dashed #444;
    border-radius: var(--proj-radius);
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.project-drop-zone:hover,
.project-drop-zone.drag-over { border-color: var(--proj-accent); background: rgba(57,112,244,.06); }
.project-drop-icon { color: #888; margin-bottom: 12px; }
.project-drop-text { font-size: 15px; font-weight: 600; color: #ddd; margin: 0 0 6px; }
.project-drop-hint { font-size: 13px; color: #888; margin: 0 0 8px; }
.project-drop-browse {
    background: none;
    border: none;
    color: var(--proj-accent);
    cursor: pointer;
    font-size: 13px;
    text-decoration: underline;
    padding: 0;
    font-family: inherit;
}
.project-drop-formats { font-size: 12px; color: #666; margin: 0; }

.project-upload-progress { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.upload-progress-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #2a2a2a;
    border-radius: var(--proj-radius-sm);
    font-size: 13px;
}
.upload-progress-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; color: #ddd; }
.upload-progress-status { flex-shrink: 0; margin-left: 12px; color: #888; }
.upload-progress-status.success { color: #22c55e; }
.upload-progress-status.error { color: var(--proj-danger); }

.project-text-form { display: flex; flex-direction: column; gap: 12px; }
.project-text-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #333;
    border-radius: var(--proj-radius-sm);
    font-size: 14px;
    background: #262624;
    color: #eee;
    box-sizing: border-box;
    transition: border-color .15s;
    font-family: inherit;
}
.project-text-input:focus { outline: none; border-color: var(--proj-accent); }
.project-text-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #333;
    border-radius: var(--proj-radius-sm);
    font-size: 14px;
    background: #262624;
    color: #eee;
    box-sizing: border-box;
    resize: vertical;
    min-height: 180px;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color .15s;
}
.project-text-textarea:focus { outline: none; border-color: var(--proj-accent); }
.project-text-actions { display: flex; justify-content: flex-end; }
.project-btn-primary {
    padding: 10px 20px;
    background: #fff;
    color: #111;
    border: none;
    border-radius: var(--proj-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
}
.project-btn-primary:hover { background: #e8e8e8; }
.project-btn-primary:disabled { opacity: .6; cursor: not-allowed; }

/* ============================================================
   LIGHT THEME OVERRIDES — toutes les pages sans .dark-mode
   ============================================================ */
body:not(.dark-mode) .sidebar-project-toggle,
body:not(.dark-mode) .sidebar-project-name { color: #333; }
body:not(.dark-mode) .sidebar-project-item:hover .sidebar-project-row { background: #f0f0f0; }
body:not(.dark-mode) .sidebar-project-item.active .sidebar-project-row { background: rgba(57,112,244,.1); }
body:not(.dark-mode) .sidebar-section-header .sidebar-section-title,
body:not(.dark-mode) .sidebar-project-icon,
body:not(.dark-mode) .sidebar-project-menu-btn,
body:not(.dark-mode) .sidebar-project-edit-btn,
body:not(.dark-mode) .sidebar-projects-loading,
body:not(.dark-mode) .sidebar-projects-empty { color: #666; }
body:not(.dark-mode) .sidebar-project-menu-btn:hover { background: #e5e5e5; color: #333; }
body:not(.dark-mode) .sidebar-project-edit-btn:hover { background: #e5e5e5; color: #333; }
body:not(.dark-mode) .sidebar-conv-item { color: #111827; }
body:not(.dark-mode) .sidebar-conv-item:hover { background: #f3f4f6; border-color: #e5e7eb; color: #0f172a; }
body:not(.dark-mode) .sidebar-conv-item.active {
    background: #e8edf5;
    border-color: transparent;
    color: #0f172a;
}
body:not(.dark-mode) .sidebar-conv-more { color: #999; }
body:not(.dark-mode) .sidebar-conv-more:hover { color: #444; }
body:not(.dark-mode) .sidebar-conv-loading,
body:not(.dark-mode) .sidebar-conv-empty { color: #aaa; }
body:not(.dark-mode) .sidebar-section-action { color: #666; }
body:not(.dark-mode) .sidebar-section-action:hover { background: #e5e5e5; }
body:not(.dark-mode) .sidebar-project-context-menu { background: #fff; border-color: #ddd; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
body:not(.dark-mode) .sidebar-ctx-item { color: #333; }
body:not(.dark-mode) .sidebar-ctx-item:hover { background: #f5f5f5; }

/* Vue projet */
body.page-app:not(.dark-mode) .project-view-name { color: #222; }
body.page-app:not(.dark-mode) .project-tabs { border-bottom-color: #e2e2e2; }
body.page-app:not(.dark-mode) .project-tab { color: #666; }
body.page-app:not(.dark-mode) .project-tab:hover { color: #222; }
body.page-app:not(.dark-mode) .project-conv-item { color: #333; }
body.page-app:not(.dark-mode) .project-conv-item:hover { background: #f5f5f5; border-color: #e2e2e2; }
body.page-app:not(.dark-mode) .project-conv-icon,
body.page-app:not(.dark-mode) .project-conv-date { color: #888; }
body.page-app:not(.dark-mode) .project-conv-loading,
body.page-app:not(.dark-mode) .project-conv-empty,
body.page-app:not(.dark-mode) .project-sources-hint,
body.page-app:not(.dark-mode) .project-sources-empty,
body.page-app:not(.dark-mode) .project-source-meta,
body.page-app:not(.dark-mode) .project-source-preview { color: #666; }
body.page-app:not(.dark-mode) .project-source-item { background: #fff; border-color: #e2e2e2; }
body.page-app:not(.dark-mode) .project-source-name { color: #222; }
body.page-app:not(.dark-mode) .project-source-delete-btn { color: #888; }

body.page-app:not(.dark-mode) .project-sources-welcome {
    background: rgba(57, 112, 244, 0.05);
    border-color: rgba(57, 112, 244, 0.2);
}
body.page-app:not(.dark-mode) .project-sources-welcome-icon {
    background: rgba(57, 112, 244, 0.1);
    color: #1e5bde;
}
body.page-app:not(.dark-mode) .project-sources-welcome-content h3 {
    color: #111827;
}
body.page-app:not(.dark-mode) .project-sources-welcome-content p {
    color: #4b5563;
}
body.page-app:not(.dark-mode) .project-sources-welcome-close {
    color: #6b7280;
}
body.page-app:not(.dark-mode) .project-sources-welcome-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #111827;
}

/* Modal */
body.page-app:not(.dark-mode) .project-modal { background: #fff; border-color: #e2e2e2; box-shadow: 0 24px 60px rgba(0,0,0,.15); }
body.page-app:not(.dark-mode) .project-modal-header { border-bottom-color: #e2e2e2; }
body.page-app:not(.dark-mode) .project-modal-title { color: #222; }
body.page-app:not(.dark-mode) .project-modal-close { color: #666; }
body.page-app:not(.dark-mode) .project-modal-close:hover { background: #f5f5f5; color: #222; }
body.page-app:not(.dark-mode) .project-modal-tabs { border-bottom-color: #e2e2e2; }
body.page-app:not(.dark-mode) .project-modal-tab { color: #666; }
body.page-app:not(.dark-mode) .project-modal-tab:hover { color: #222; }
body.page-app:not(.dark-mode) .project-drop-zone { border-color: #ccc; }
body.page-app:not(.dark-mode) .project-drop-text { color: #333; }
body.page-app:not(.dark-mode) .project-drop-hint,
body.page-app:not(.dark-mode) .project-drop-formats { color: #666; }
body.page-app:not(.dark-mode) .upload-progress-item { background: #f5f5f5; }
body.page-app:not(.dark-mode) .upload-progress-name { color: #333; }
body.page-app:not(.dark-mode) .upload-progress-status { color: #666; }
body.page-app:not(.dark-mode) .project-text-input,
body.page-app:not(.dark-mode) .project-text-textarea {
    background: #fff;
    border-color: #e2e2e2;
    color: #222;
}

.jw-cit-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin: 0 2px;
    border-radius: 10px;
    background: #546e7a;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    user-select: none;
    text-decoration: none;
    border: none;
}
.jw-cit-bubble:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.jw-cit-bubble:active { transform: translateY(0); }

/* Tooltip instantané des citations */
.jw-cit-tooltip {
    position: absolute;
    z-index: 99999;
    background: #1e2129;
    color: #f0f0f0;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
    line-height: 1.55;
    max-width: 260px;
    min-width: 160px;
    pointer-events: none;
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
    display: none;
}
.jw-cit-tooltip strong { display: block; margin-bottom: 3px; font-size: 13px; }
.jw-cit-tip-type { display: block; font-size: 11.5px; font-weight: 600; }
.jw-cit-tip-page { display: block; font-size: 11px; color: #999; margin-top: 2px; }
body.page-app:not(.dark-mode) .jw-cit-tooltip {
    background: #fff;
    color: #1a1a1a;
    border-color: #e0e0e0;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
body.page-app:not(.dark-mode) .jw-cit-tooltip strong { color: #111; }
body.page-app:not(.dark-mode) .jw-cit-tip-page { color: #666; }

.jw-support-badge {
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255,255,255,.85);
}
.jw-support-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}
.jw-support-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    font-size: 12px;
    font-weight: bold;
}
.jw-support-intent {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255,255,255,.55);
    margin-left: auto;
}
.jw-support-reason {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255,255,255,.7);
}
.jw-support-stats {
    margin-top: 6px;
    font-size: 11px;
    color: rgba(255,255,255,.5);
}

.jw-support-strong { border-color: rgba(46,125,50,.4); background: rgba(46,125,50,.08); }
.jw-support-medium { border-color: rgba(245,124,0,.4); background: rgba(245,124,0,.06); }
.jw-support-weak   { border-color: rgba(198,40,40,.4); background: rgba(198,40,40,.06); }
.jw-support-none   { border-color: rgba(117,117,117,.4); }

.jw-cit-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    backdrop-filter: blur(2px);
    animation: jwCitFadeIn .15s ease-out;
}
@keyframes jwCitFadeIn { from {opacity:0} to {opacity:1} }

.jw-cit-modal {
    background: #1a1d24;
    color: #e8e8e8;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    max-width: 720px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
    overflow: hidden;
    animation: jwCitSlideUp .2s ease-out;
}
@keyframes jwCitSlideUp { from {transform: translateY(10px); opacity:0} to {transform: translateY(0); opacity:1} }

.jw-cit-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.jw-cit-modal-title { display: flex; align-items: center; flex: 1; min-width: 0; }
.jw-cit-source-name {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jw-cit-modal-close {
    background: transparent;
    border: none;
    color: rgba(255,255,255,.55);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    border-radius: 4px;
    transition: background .12s, color .12s;
}
.jw-cit-modal-close:hover { background: rgba(255,255,255,.08); color: #fff; }
.jw-cit-modal-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    background: rgba(255,255,255,.02);
    font-size: 12px;
}
.jw-cit-weight-tag {
    padding: 3px 8px;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .3px;
}
.jw-cit-page {
    color: rgba(255,255,255,.6);
    font-style: italic;
}
.jw-cit-modal-body {
    padding: 20px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.6;
}
.jw-cit-chunk-text {
    white-space: pre-wrap;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #e0e0e0;
}
.jw-cit-loading { color: rgba(255,255,255,.5); font-style: italic; }
.jw-cit-fallback { color: rgba(255,255,255,.7); font-style: italic; }

/* Light theme overrides */
body.page-app:not(.dark-mode) .jw-support-badge {
    background: #f7f9fc;
    border-color: #e2e2e2;
    color: #444;
}
body.page-app:not(.dark-mode) .jw-support-icon { background: rgba(0,0,0,.06); }
body.page-app:not(.dark-mode) .jw-support-intent { color: #999; }
body.page-app:not(.dark-mode) .jw-support-reason { color: #555; }
body.page-app:not(.dark-mode) .jw-support-stats { color: #888; }

body.page-app:not(.dark-mode) .jw-support-strong { background: #ecf7ed; border-color: #b8dfba; }
body.page-app:not(.dark-mode) .jw-support-medium { background: #fff5e6; border-color: #ffd4a0; }
body.page-app:not(.dark-mode) .jw-support-weak   { background: #fdecec; border-color: #ffb8b8; }

body.page-app:not(.dark-mode) .jw-cit-modal {
    background: #fff;
    color: #222;
    border-color: #e2e2e2;
    box-shadow: 0 24px 60px rgba(0,0,0,.2);
}
body.page-app:not(.dark-mode) .jw-cit-modal-header { border-bottom-color: #ecedef; }
body.page-app:not(.dark-mode) .jw-cit-modal-close { color: #888; }
body.page-app:not(.dark-mode) .jw-cit-modal-close:hover { background: #f0f1f3; color: #222; }
body.page-app:not(.dark-mode) .jw-cit-modal-meta { background: #fafbfc; border-bottom-color: #ecedef; }
body.page-app:not(.dark-mode) .jw-cit-page { color: #888; }
body.page-app:not(.dark-mode) .jw-cit-chunk-text { color: #2a2a2a; }
body.page-app:not(.dark-mode) .jw-cit-loading,
body.page-app:not(.dark-mode) .jw-cit-fallback { color: #888; }

/* ???????????????????????????????????????????????????????????????????????????
   Panneau Param�tres du projet (custom_prompt + memory_mode)
???????????????????????????????????????????????????????????????????????????? */

.project-settings-form {
    max-width: 720px;
    padding: 0 4px;
}
.project-settings-upgrade { display: none !important; } /* remplacé par paywall-overlay */

.project-settings-group {
    margin-bottom: 28px;
}
.project-settings-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.9);
    margin-bottom: 6px;
}
.project-settings-badge {
    font-size: 10px;
    padding: 2px 6px;
    background: rgba(57,112,244,.2);
    color: #6f9af6;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: .3px;
}
.project-settings-help {
    font-size: 12px;
    color: rgba(255,255,255,.55);
    margin: 0 0 10px 0;
    line-height: 1.5;
}
.project-settings-input,
.project-settings-textarea {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    color: #e8e8e8;
    font-size: 13px;
    font-family: inherit;
    transition: border-color .12s, background .12s;
    box-sizing: border-box;
}
.project-settings-input:focus,
.project-settings-textarea:focus {
    outline: none;
    border-color: var(--proj-accent);
    background: rgba(57,112,244,.05);
}
.project-settings-textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
.project-settings-textarea:disabled,
.project-settings-input:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.project-settings-counter {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(255,255,255,.4);
    text-align: right;
}

.project-settings-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.project-settings-radio {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.project-settings-radio:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.15); }
.project-settings-radio input[type="radio"] { margin-top: 3px; accent-color: var(--proj-accent); }
.project-settings-radio input[type="radio"]:checked + div .project-settings-radio-title { color: var(--proj-accent); }
.project-settings-radio input[type="radio"]:disabled { opacity: .5; cursor: not-allowed; }
.project-settings-radio-title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9); }
.project-settings-radio-desc { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 3px; line-height: 1.4; }

.project-settings-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.project-btn-danger {
    padding: 9px 16px;
    background: transparent;
    border: 1px solid rgba(229,62,62,.5);
    color: #e53e3e;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    margin-left: auto;
    transition: background .12s, border-color .12s;
}
.project-btn-danger:hover { background: rgba(229,62,62,.1); border-color: #e53e3e; }

.project-settings-status {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.8);
}
.project-settings-status.success { background: rgba(46,125,50,.15); color: #6ec77a; }
.project-settings-status.error   { background: rgba(229,62,62,.15);  color: #ff7878; }

/* Light theme overrides */
body.page-app:not(.dark-mode) .project-settings-upgrade {
    background: #fff5e6;
    border-color: #ffd4a0;
    color: #663d00;
}
body.page-app:not(.dark-mode) .project-settings-label { color: #222; }
body.page-app:not(.dark-mode) .project-settings-help  { color: #666; }
body.page-app:not(.dark-mode) .project-settings-badge { background: #e6efff; color: #3970f4; }
body.page-app:not(.dark-mode) .project-settings-input,
body.page-app:not(.dark-mode) .project-settings-textarea {
    background: #fff;
    border-color: #e2e2e2;
    color: #222;
}
body.page-app:not(.dark-mode) .project-settings-radio {
    background: #fff;
    border-color: #e2e2e2;
}
body.page-app:not(.dark-mode) .project-settings-radio:hover {
    background: #f5f5f5;
    border-color: #d4d4d4;
}
body.page-app:not(.dark-mode) .project-settings-radio-title { color: #222; }
body.page-app:not(.dark-mode) .project-settings-radio-desc  { color: #666; }
body.page-app:not(.dark-mode) .project-settings-actions { border-top-color: #ecedef; }
body.page-app:not(.dark-mode) .project-settings-status { background: #f5f5f5; color: #444; }
body.page-app:not(.dark-mode) .project-settings-counter { color: #999; }

/* ????????????????????????????????????????????????????????????????????????????
   Responsive
???????????????????????????????????????????????????????????????????????????? */

@media (max-width: 640px) {
    .project-view { padding: 20px 12px 60px; }
    .project-view-name { font-size: 18px; }
    .project-tab { padding: 8px 14px; font-size: 13px; }
    .project-modal { max-height: 95vh; }
    .project-modal-panel { padding: 16px; }
    .project-drop-zone { padding: 24px 16px; }
}


/* ---------------------------------------------------------------------------
   v2 – Citations inline + Niveau d'appui documentaire (2026-05-19)
---------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   v3 – Layout fixes (2026-05-19)
   - Masquer le composer/vignettes en mode project-overview
   - Barre de contexte projet en mode conversation
---------------------------------------------------------------------------- */

/* En mode vue projet : masquer uniquement les éléments de chat non pertinents.
   Le form-block est déplacé dans #projectComposerSlot par JS, pas masqué. */
.container.project-overview-mode .home-title,
.container.project-overview-mode .starters-section,
.container.project-overview-mode .starter-panel,
.container.project-overview-mode .starter-panel-backdrop,
.container.project-overview-mode .memory-promo-banner,
.container.project-overview-mode .conversation-header,
.container.project-overview-mode #chatMessages {
    display: none !important;
}

/* Overrides du form-block quand il est déplacé dans la vue projet.
   On neutralise le positionnement sticky/fixed et les marges négatives. */
#projectComposerSlot .form-block {
    position: static !important;
    transform: none !important;
    left: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Barre de contexte projet (mode conversation dans un projet) */
/* ── Barre de contexte projet (breadcrumb) ──────────────────────────────
   Desktop : fixée dans la barre de header, à gauche du CTA centré.
   Mobile  : affichage normal sous le header, CTA masqué pour éviter le
             chevauchement.                                                  */
.project-chat-context-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #888;
    /* Desktop : aligné verticalement sur la même ligne que .brand-title (top:20px, ~1.3rem) */
    position: fixed;
    top: 28px;        /* aligné visuellement avec le centre de .brand-title */
    left: 200px;      /* juste après "Justiweb" (brand-title à 83px + ~110px) */
    z-index: 12002;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 1;   /* aligner le centre optique */
    max-width: calc(50vw - 210px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.project-chat-context-bar svg { flex-shrink: 0; color: var(--proj-accent); }
.project-ctx-link {
    color: var(--proj-accent);
    text-decoration: none;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14ch;    /* troncature CSS pour le nom du projet */
}
.project-ctx-link:hover { text-decoration: underline; }
.project-ctx-sep { color: #555; margin: 0 1px; flex-shrink: 0; }
.project-ctx-label {
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sidebar ouverte : brand-title se déplace à left:392px, breadcrumb suit */
@media (min-width: 900px) {
    body.sidebar-open .project-chat-context-bar {
        left: 490px;
        max-width: calc(50vw - 500px);
    }
}

/* Mobile : barre en flux normal, single-line avec ellipsis */
@media (max-width: 899px) {
    .project-chat-context-bar {
        position: static;
        padding: 8px 16px;
        border-bottom: 1px solid rgba(255,255,255,.07);
        background: rgba(255,255,255,.02);
        margin-bottom: 4px;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.jw-project-context .upgrade-pill { display: none !important; }
}

/* Panneau Chats — état vide */
.project-conv-empty {
    text-align: center;
    padding: 32px 20px;
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

/* ── Overlay paywall (comptes gratuits) ─────────────────────────────────── */
/* Positionné en absolute sur tout élément parent en position:relative       */
/* ── Overlay paywall ──────────────────────────────────────────────────────
   Fond quasi-transparent pour laisser voir le contenu bloqué.
   Toute l'opacité est concentrée dans .paywall-overlay-card (la carte).   */
.paywall-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    /* Voile très léger — juste assez pour désaturer le fond */
    background: rgba(10, 10, 15, 0.18);
}

/* Carte centrale — opaque et lisible */
.paywall-overlay-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 28px 32px;
    max-width: 360px;
    border-radius: 16px;
    background: rgba(18, 18, 24, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
}
.paywall-overlay-icon { color: rgba(255,255,255,.75); flex-shrink: 0; }
.paywall-overlay-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.4;
}
.paywall-overlay-subtitle {
    font-size: 13px;
    color: rgba(255,255,255,.6);
    margin: 0;
    line-height: 1.5;
}
.paywall-overlay-cta {
    display: inline-block;
    margin-top: 4px;
    padding: 11px 22px;
    background: #fff;
    color: #111;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, transform .1s;
}
.paywall-overlay-cta:hover { background: #f0f0f0; transform: translateY(-1px); }

/* Light mode — voile très léger */
body.page-app:not(.dark-mode) .paywall-overlay {
    background: rgba(230, 235, 248, 0.15);
}
/* Carte light mode : fond blanc opaque */
body.page-app:not(.dark-mode) .paywall-overlay-card {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
}
body.page-app:not(.dark-mode) .paywall-overlay-icon { color: #3970f4; }
body.page-app:not(.dark-mode) .paywall-overlay-title { color: #111; }
body.page-app:not(.dark-mode) .paywall-overlay-subtitle { color: #555; }
body.page-app:not(.dark-mode) .paywall-overlay-cta {
    background: #111;
    color: #fff;
}
body.page-app:not(.dark-mode) .paywall-overlay-cta:hover { background: #333; }

/* Le parent doit être en position relative pour que l'overlay soit contenu */
#panelSources,
#projectSettingsPromptGroup { position: relative; overflow: hidden; }

/* Fichiers d'exemple (comptes gratuits) — visibles sous l'overlay paywall */
.project-source-demo {
    opacity: .75;
    pointer-events: none;
    user-select: none;
}
.project-source-demo .project-source-icon { opacity: .7; }

/* ── Source actions (preview / download / delete) ──────────────────────── */
.project-source-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.project-source-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #888;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s, color .12s;
    text-decoration: none;
}
.project-source-action-btn:hover {
    background: rgba(255,255,255,.08);
    color: var(--proj-accent);
}
.project-source-action-btn.project-source-delete-btn:hover {
    color: var(--proj-danger);
    background: rgba(229,62,62,.12);
}
.project-source-warn { /* conservé pour rétrocompatibilité */
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: rgba(229,160,46,.18);
    color: #d49000;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    vertical-align: middle;
}
/* Badges de statut unifiés */
.project-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    vertical-align: middle;
}
.project-source-badge--ocr      { background: rgba(99,102,241,.15); color: #818cf8; }
.project-source-badge--indexing  { background: rgba(59,130,246,.12); color: #60a5fa; }
.project-source-badge--warn      { background: rgba(229,160,46,.18); color: #d49000; }

/* Spinner animation pour OCR / indexation */
@keyframes jwSpinIcon {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.project-source-spinner { animation: jwSpinIcon 1.4s linear infinite; flex-shrink: 0; }

.upload-progress-status.warn { color: #d49000; }
.upload-progress-status--pending { color: #666; font-style: italic; }

/* Light theme overrides */
body:not(.dark-mode) .project-source-action-btn { color: #888; }
body:not(.dark-mode) .project-source-action-btn:hover { background: rgba(0,0,0,.05); }
body:not(.dark-mode) .project-source-warn        { background: #fff3e0; color: #b35e00; }
body:not(.dark-mode) .project-source-badge--ocr  { background: rgba(99,102,241,.10); color: #6366f1; }
body:not(.dark-mode) .project-source-badge--indexing { background: rgba(59,130,246,.10); color: #2563eb; }
body:not(.dark-mode) .project-source-badge--warn { background: #fff3e0; color: #b35e00; }

/* ── Preview modal (full screen) ───────────────────────────────────────── */
.src-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: srcPrevFadeIn .15s ease-out;
}
@keyframes srcPrevFadeIn { from { opacity: 0 } to { opacity: 1 } }
.src-preview-modal {
    background: #1c1c1c;
    color: #e8e8e8;
    border-radius: 14px;
    width: 100%;
    max-width: 1100px;
    height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.src-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    flex-shrink: 0;
}
.src-preview-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin-right: 16px;
}
.src-preview-toolbar { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.src-preview-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255,255,255,.06);
    border: none;
    color: #ddd;
    text-decoration: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: background .12s;
}
.src-preview-action:hover { background: rgba(255,255,255,.12); color: #fff; }
.src-preview-close {
    background: transparent;
    border: none;
    color: #888;
    font-size: 28px;
    line-height: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.src-preview-close:hover { background: rgba(255,255,255,.1); color: #fff; }
.src-preview-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    background: #0f0f0f;
}
.src-preview-iframe { width: 100%; height: 100%; border: none; background: #fff; }
.src-preview-image  { max-width: 100%; max-height: 100%; margin: auto; display: block; object-fit: contain; }
.src-preview-text {
    flex: 1;
    margin: 0;
    padding: 20px 24px;
    overflow: auto;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 13px;
    line-height: 1.55;
    color: #e0e0e0;
    background: #0f0f0f;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.src-preview-fallback {
    margin: auto;
    text-align: center;
    color: #aaa;
    padding: 40px;
}
.src-preview-fallback p { margin: 0 0 16px 0; }
.src-preview-open-tab {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(255,255,255,.08);
    color: #ddd;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    transition: background .12s;
}
.src-preview-open-tab:hover { background: rgba(255,255,255,.15); color: #fff; }
body.page-app:not(.dark-mode) .src-preview-open-tab { background: #f1f1f1; color: #333; }
body.page-app:not(.dark-mode) .src-preview-open-tab:hover { background: #e4e4e4; }

/* Light theme overrides for preview modal */
body.page-app:not(.dark-mode) .src-preview-modal { background: #fff; color: #222; }
body.page-app:not(.dark-mode) .src-preview-header { background: #fafafa; border-bottom-color: #ececec; }
body.page-app:not(.dark-mode) .src-preview-title { color: #111; }
body.page-app:not(.dark-mode) .src-preview-action { background: #f1f1f1; color: #333; }
body.page-app:not(.dark-mode) .src-preview-action:hover { background: #e4e4e4; color: #000; }
body.page-app:not(.dark-mode) .src-preview-close { color: #777; }
body.page-app:not(.dark-mode) .src-preview-close:hover { background: #ececec; color: #000; }
body.page-app:not(.dark-mode) .src-preview-body { background: #f5f5f5; }
body.page-app:not(.dark-mode) .src-preview-text { background: #fafafa; color: #222; }
body.page-app:not(.dark-mode) .src-preview-fallback { color: #555; }

/* Badge "Bientôt" pour features pas encore branchées côté backend */
.project-settings-badge-soon {
    background: rgba(229,160,46,.18) !important;
    color: #d49000 !important;
    margin-left: 4px;
}
body.page-app:not(.dark-mode) .project-settings-badge-soon {
    background: #fff3e0 !important;
    color: #b35e00 !important;
}

/* ── Gating UI : section paramètres pour comptes gratuits ─────────────── */
/* .project-settings-gated-group — supprimé, remplacé par .paywall-overlay */

/* ── Modale "Nouveau projet" ────────────────────────────────────────────── */
.new-project-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: srcPrevFadeIn .15s ease-out;
}
.new-project-modal {
    background: #1e1e1e;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
    overflow: hidden;
}
.new-project-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px 0;
}
.new-project-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,.07);
    color: #ddd;
    flex-shrink: 0;
}
.new-project-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}
.new-project-modal-body {
    padding: 12px 24px 0;
}
.new-project-modal-desc {
    font-size: 13px;
    color: #aaa;
    line-height: 1.55;
    margin: 0 0 16px 0;
}
.new-project-modal-desc strong { color: #ddd; }
.new-project-modal-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    margin-bottom: 6px;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.new-project-modal-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--proj-radius-sm);
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
}
.new-project-modal-input::placeholder { color: #555; }
.new-project-modal-input:focus { border-color: rgba(255,255,255,.35); }
.new-project-modal-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 20px 24px;
}
.new-project-modal-cancel {
    padding: 9px 18px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--proj-radius-sm);
    background: transparent;
    color: #aaa;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.new-project-modal-cancel:hover { background: rgba(255,255,255,.06); color: #fff; }
.new-project-modal-create {
    padding: 9px 22px;
    border: none;
    border-radius: var(--proj-radius-sm);
    background: #fff;
    color: #111;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s;
}
.new-project-modal-create:hover { background: #e8e8e8; }
.new-project-modal-create:disabled { opacity: .5; cursor: not-allowed; }

/* ── Light theme overrides ────────────────────────────────────────────── */
body:not(.dark-mode) .new-project-modal {
    background: #fff;
    border-color: #ececec;
    box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
body:not(.dark-mode) .new-project-modal-icon { background: #f1f1f1; color: #444; }
body:not(.dark-mode) .new-project-modal-title { color: #111; }
body:not(.dark-mode) .new-project-modal-desc { color: #666; }
body:not(.dark-mode) .new-project-modal-desc strong { color: #333; }
body:not(.dark-mode) .new-project-modal-label { color: #888; }
body:not(.dark-mode) .new-project-modal-input {
    background: #fafafa;
    border-color: #ddd;
    color: #111;
}
body:not(.dark-mode) .new-project-modal-input:focus { border-color: #999; }
body:not(.dark-mode) .new-project-modal-cancel { border-color: #ddd; color: #666; }
body:not(.dark-mode) .new-project-modal-cancel:hover { background: #f5f5f5; color: #111; }
body:not(.dark-mode) .new-project-modal-create { background: #111; color: #fff; }
body:not(.dark-mode) .new-project-modal-create:hover { background: #333; }
body:not(.dark-mode) .sidebar-new-project-btn {
    border-color: rgba(0,0,0,.2);
    background: rgba(0,0,0,.03);
    color: #111;
}
body:not(.dark-mode) .sidebar-new-project-btn:hover {
    border-color: rgba(0,0,0,.35);
    background: rgba(0,0,0,.06);
}
body:not(.dark-mode) .sidebar-project-item.active .sidebar-project-row { background: rgba(0,0,0,.05); }
body.page-app:not(.dark-mode) .sidebar-project-item.active .sidebar-project-name { color: #111; }
body.page-app:not(.dark-mode) .sidebar-project-item.active .sidebar-project-icon { color: #333; }

/* Boutons principaux : fond noir en light mode */
body.page-app:not(.dark-mode) .project-add-source-btn {
    background: #111;
    color: #fff;
}
body.page-app:not(.dark-mode) .project-add-source-btn:hover { background: #333; }
body.page-app:not(.dark-mode) .project-btn-primary {
    background: #111;
    color: #fff;
}
body.page-app:not(.dark-mode) .project-btn-primary:hover { background: #333; }
body.page-app:not(.dark-mode) .project-icon { color: #333; }
body.page-app:not(.dark-mode) .project-tab.active { color: #111; border-bottom-color: #111; }
body.page-app:not(.dark-mode) .project-source-icon { color: #555; }

/* Light theme overrides for general elements */
body.page-app:not(.dark-mode) .project-chat-context-bar { color: #555; }
body.page-app:not(.dark-mode) .project-ctx-sep { color: #bbb; }
body.page-app:not(.dark-mode) .project-ctx-label { color: #888; }
body.page-app:not(.dark-mode) .project-conv-empty { color: #999; }