/* App Assistant - Bouton flottant + panneau chat contextuel */

.app-assistant-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7C4DFF, #651FFF);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(124, 77, 255, 0.4);
    z-index: 9000;
    transition: right 0.3s ease, transform 0.2s, box-shadow 0.2s;
    user-select: none;
}

.app-assistant-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(124, 77, 255, 0.5);
}

.app-assistant-fab.active {
    right: 432px;
    bottom: 12px;
    box-shadow: 0 2px 8px rgba(124, 77, 255, 0.3);
}

.app-assistant-fab svg {
    width: 26px;
    height: 26px;
    fill: white;
}

/* Chat Panel */
.app-assistant-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 420px;
    height: 100%;
    background: var(--bg-primary, #0a0a0f);
    border-left: 1px solid rgba(124, 77, 255, 0.2);
    z-index: 8999;
    display: none;
    flex-direction: column;
    transition: right 0.3s ease;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.app-assistant-panel.open {
    right: 0;
    display: flex;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* Panel Header */
.app-assistant-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(124, 77, 255, 0.15);
    flex-shrink: 0;
    background: rgba(124, 77, 255, 0.05);
}

.app-assistant-header-icon {
    width: 28px;
    height: 28px;
    fill: #7C4DFF;
    flex-shrink: 0;
}

.app-assistant-header-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #f0f0f5);
}

.app-assistant-header-context {
    font-size: 11px;
    color: var(--text-secondary, #a0aec0);
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-assistant-header-close {
    background: none;
    border: none;
    color: var(--text-secondary, #a0aec0);
    cursor: pointer;
    padding: 4px;
    display: flex;
    user-select: none;
}

.app-assistant-header-close:hover {
    color: var(--text-primary, #f0f0f5);
}

.app-assistant-header-close svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* Messages area */
.app-assistant-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* La fenetre flottante porte un cursor: move sur le header et capture
       des pointerdown ; on force explicitement la selection sur la zone
       de contenu pour que l'utilisateur puisse copier le texte des
       messages, du plan, des chips, etc. */
    user-select: text;
    -webkit-user-select: text;
    cursor: auto;
}

.app-assistant-msg {
    max-width: 90%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    word-wrap: break-word;
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
}

.app-assistant-msg * {
    user-select: text;
    -webkit-user-select: text;
}

.app-assistant-msg.user {
    align-self: flex-end;
    background: linear-gradient(135deg, #7C4DFF, #651FFF);
    color: white;
    border-bottom-right-radius: 4px;
}

.app-assistant-msg.assistant {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #f0f0f5);
    border-bottom-left-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.app-assistant-msg.assistant p { margin: 4px 0; }
.app-assistant-msg.assistant strong { color: #a78bfa; }
.app-assistant-msg.assistant code {
    background: rgba(0,0,0,0.3);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px;
}
.app-assistant-msg.assistant ul, .app-assistant-msg.assistant ol { padding-left: 18px; margin: 4px 0; }

/* Liens lisibles sur fond sombre */
.app-assistant-msg a,
.app-assistant-msg.assistant a {
    color: #93c5fd;
    text-decoration: underline;
    text-decoration-color: rgba(147, 197, 253, 0.45);
    text-underline-offset: 2px;
    word-break: break-word;
}
.app-assistant-msg a:hover,
.app-assistant-msg.assistant a:hover {
    color: #bfdbfe;
    text-decoration-color: rgba(191, 219, 254, 0.85);
}
.app-assistant-msg.user a {
    color: #ffffff;
    text-decoration-color: rgba(255, 255, 255, 0.65);
}

.app-assistant-msg.typing {
    color: var(--text-secondary);
    font-style: italic;
}

/* Caret de streaming : petit carre blanc lumineux, clignote doucement
   tant que le LLM streame. Toujours INLINE a droite du dernier caractere
   visible (jamais sur une ligne separee). Pour cela, le JS l'injecte au
   bon endroit dans le DOM (dans le dernier element bloc rendu). */
.app-assistant-stream-caret {
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    margin-left: 4px;
    vertical-align: 0.05em;
    background: #ffffff;
    border-radius: 1px;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.85),
                0 0 12px rgba(255, 255, 255, 0.5);
    animation: appAssistantCaretBlink 1s steps(2, start) infinite;
}

@keyframes appAssistantCaretBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.15; }
}

[data-theme="light"] .app-assistant-stream-caret {
    background: #1a1a2e;
    box-shadow: 0 0 6px rgba(26, 26, 46, 0.5);
}

/* Badge consommation : cout (sale_cost), tokens, duree de la requete LLM
   de l'agent. Affiche en petit, discret, sous le message assistant. */
.app-assistant-usage-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 2px 8px;
    font-size: 10px;
    line-height: 1.4;
    color: rgba(240, 240, 245, 0.45);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    user-select: none;
    letter-spacing: 0.2px;
    font-variant-numeric: tabular-nums;
    cursor: default;
    transition: color 0.2s ease, background 0.2s ease;
}
.app-assistant-usage-badge:hover {
    color: rgba(240, 240, 245, 0.75);
    background: rgba(255, 255, 255, 0.07);
}

/* Carte de retour d'action / appel de service */
.app-assistant-action-result {
    margin: 6px 0;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.5;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(240, 240, 245, 0.85);
    user-select: text;
}
.app-assistant-action-result.is-ok {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.06);
}
.app-assistant-action-result.is-error {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.07);
}
.app-assistant-action-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 12px;
}
.app-assistant-action-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.app-assistant-action-result.is-ok .app-assistant-action-icon {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}
.app-assistant-action-result.is-error .app-assistant-action-icon {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}
.app-assistant-action-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-assistant-action-status {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Bouton "Copier" en cas d'erreur : permet de copier le dump complet
   (params, reponse brute, contexte plateforme, modele LLM, derniere
   requete) pour transmission au support / a un humain. */
.app-assistant-action-copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 6px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 6px;
    color: var(--text-secondary, #a0aec0);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.app-assistant-action-copy:hover {
    background: rgba(255, 255, 255, 0.10);
    color: var(--text-primary, #f0f0f5);
    border-color: rgba(255, 255, 255, 0.18);
}
.app-assistant-action-copy.copied {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.32);
}
.app-assistant-action-copy svg {
    flex-shrink: 0;
}
.app-assistant-action-msg {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(240, 240, 245, 0.75);
    word-break: break-word;
    white-space: pre-wrap;
    user-select: text;
    -webkit-user-select: text;
}
.app-assistant-action-media {
    margin-top: 8px;
}
.app-assistant-action-media img {
    max-width: 100%;
    max-height: 320px;
    border-radius: 8px;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .app-assistant-action-result {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.85);
}
[data-theme="light"] .app-assistant-action-result.is-ok {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.3);
}
[data-theme="light"] .app-assistant-action-result.is-error {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
}
[data-theme="light"] .app-assistant-action-msg {
    color: rgba(0, 0, 0, 0.75);
}
[data-theme="light"] .app-assistant-usage-badge {
    color: rgba(0, 0, 0, 0.45);
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .app-assistant-usage-badge:hover {
    color: rgba(0, 0, 0, 0.75);
    background: rgba(0, 0, 0, 0.06);
}

/* Chip "vivante" pour une orchestration UI multi-etapes */
.app-assistant-action-result.is-pending {
    border-color: rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.07);
}
.app-assistant-action-result.is-pending .app-assistant-action-icon {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}
.app-assistant-orch-spinner {
    animation: appAssistantOrchSpin 1.1s linear infinite;
    transform-origin: center;
}
@keyframes appAssistantOrchSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.app-assistant-orch-current {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.78);
    font-style: italic;
    min-height: 14px;
}
.app-assistant-orch-steps {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.app-assistant-orch-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 11.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    animation: appAssistantOrchStepIn 0.18s ease-out;
}
@keyframes appAssistantOrchStepIn {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}
.app-assistant-orch-step-bullet {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.app-assistant-orch-step-label { flex: 1 1 auto; }

[data-theme="light"] .app-assistant-action-result.is-pending {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.3);
}
[data-theme="light"] .app-assistant-orch-current {
    color: rgba(0, 0, 0, 0.65);
}
[data-theme="light"] .app-assistant-orch-step {
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.85);
}

/* Carte ask_user : question avec options cliquables */
.app-assistant-ask-user .app-assistant-ask-question {
    margin: 8px 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary, #f0f0f5);
}
.app-assistant-ask-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.app-assistant-ask-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 9px 12px;
    background: rgba(124, 77, 255, 0.10);
    border: 1px solid rgba(124, 77, 255, 0.30);
    border-radius: 8px;
    color: var(--text-primary, #f0f0f5);
    cursor: pointer;
    text-align: left;
    font-size: 12.5px;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.app-assistant-ask-option:hover {
    background: rgba(124, 77, 255, 0.20);
    border-color: rgba(124, 77, 255, 0.55);
}
.app-assistant-ask-option:active { transform: translateY(1px); }
.app-assistant-ask-option-label {
    font-weight: 600;
    color: var(--text-primary, #f0f0f5);
}
.app-assistant-ask-option-desc {
    font-size: 11.5px;
    color: var(--text-secondary, #a0aec0);
    line-height: 1.4;
}
.app-assistant-ask-free {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.app-assistant-ask-free-input {
    flex: 1;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.20);
    border: 1px solid rgba(124, 77, 255, 0.25);
    border-radius: 6px;
    color: var(--text-primary, #f0f0f5);
    font-size: 12.5px;
    outline: none;
}
.app-assistant-ask-free-input:focus {
    border-color: rgba(124, 77, 255, 0.6);
}
.app-assistant-ask-free-btn {
    padding: 8px 14px;
    background: var(--app-assistant-accent, #7C4DFF);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.app-assistant-ask-free-btn:hover { filter: brightness(1.08); }
.app-assistant-ask-answer {
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(34, 197, 94, 0.12);
    border-left: 3px solid rgba(34, 197, 94, 0.6);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-primary, #f0f0f5);
}
[data-theme="light"] .app-assistant-ask-option {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.30);
    color: rgba(0, 0, 0, 0.85);
}
[data-theme="light"] .app-assistant-ask-option:hover {
    background: rgba(139, 92, 246, 0.18);
    border-color: rgba(139, 92, 246, 0.55);
}
[data-theme="light"] .app-assistant-ask-option-desc {
    color: rgba(0, 0, 0, 0.55);
}
[data-theme="light"] .app-assistant-ask-free-input {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(139, 92, 246, 0.25);
    color: rgba(0, 0, 0, 0.85);
}
[data-theme="light"] .app-assistant-ask-answer {
    color: rgba(0, 0, 0, 0.85);
}

/* Note système discrète (auto-continuation, rappels du moteur) */
.app-assistant-system-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px auto;
    padding: 5px 10px;
    background: rgba(124, 77, 255, 0.06);
    border-left: 2px solid rgba(124, 77, 255, 0.45);
    border-radius: 4px;
    color: var(--text-secondary, #a0aec0);
    font-size: 11px;
    font-style: italic;
    max-width: 90%;
    align-self: center;
    user-select: text;
    -webkit-user-select: text;
}
.app-assistant-system-note span {
    user-select: text;
    -webkit-user-select: text;
}
.app-assistant-system-note svg {
    flex-shrink: 0;
    color: rgba(124, 77, 255, 0.7);
}
[data-theme="light"] .app-assistant-system-note {
    background: rgba(139, 92, 246, 0.06);
    border-left-color: rgba(139, 92, 246, 0.45);
    color: rgba(0, 0, 0, 0.55);
}

/* === Chip d'attente live (wait / wait_for_event) === */
.app-assistant-wait-chip {
    --wait-progress: 0%;
    margin: 6px 0;
    padding: 0;
    border-radius: 8px;
    background: rgba(124, 77, 255, 0.08);
    border: 1px solid rgba(124, 77, 255, 0.18);
    overflow: hidden;
    position: relative;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.app-assistant-wait-chip::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--wait-progress);
    background: linear-gradient(90deg, rgba(124, 77, 255, 0.16), rgba(124, 77, 255, 0.06));
    transition: width 0.15s linear;
    pointer-events: none;
}
.app-assistant-wait-chip-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
}
.app-assistant-wait-chip-spinner {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid rgba(124, 77, 255, 0.25);
    border-top-color: rgba(124, 77, 255, 0.85);
    animation: app-assistant-wait-spin 0.9s linear infinite;
}
.app-assistant-wait-chip-icon {
    flex-shrink: 0;
    color: rgba(124, 77, 255, 0.85);
    display: flex;
    align-items: center;
}
.app-assistant-wait-chip-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.app-assistant-wait-chip-label {
    font-size: 12px;
    color: var(--text-primary, #f0f0f5);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: text;
    -webkit-user-select: text;
}
.app-assistant-wait-chip-time {
    font-size: 11px;
    color: var(--text-secondary, #a0aec0);
    font-variant-numeric: tabular-nums;
    user-select: text;
    -webkit-user-select: text;
}
.app-assistant-wait-chip-skip {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary, #a0aec0);
    border-radius: 6px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.app-assistant-wait-chip-skip:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--text-primary, #f0f0f5);
}
.app-assistant-wait-chip-done {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.25);
}
.app-assistant-wait-chip-done .app-assistant-wait-chip-spinner {
    border-color: rgba(34, 197, 94, 0.85);
    border-top-color: rgba(34, 197, 94, 0.25);
    animation: none;
}
.app-assistant-wait-chip-done .app-assistant-wait-chip-icon {
    color: rgba(34, 197, 94, 0.9);
}
.app-assistant-wait-chip-done::before {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.14), rgba(34, 197, 94, 0.04));
}
.app-assistant-wait-chip-failed {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
}
.app-assistant-wait-chip-failed .app-assistant-wait-chip-spinner {
    border-color: rgba(239, 68, 68, 0.85);
    border-top-color: rgba(239, 68, 68, 0.25);
    animation: none;
}
.app-assistant-wait-chip-failed .app-assistant-wait-chip-icon {
    color: rgba(239, 68, 68, 0.9);
}
.app-assistant-wait-chip-failed::before {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.14), rgba(239, 68, 68, 0.04));
}
@keyframes app-assistant-wait-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
[data-theme="light"] .app-assistant-wait-chip {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.25);
}
[data-theme="light"] .app-assistant-wait-chip-label {
    color: rgba(0, 0, 0, 0.85);
}
[data-theme="light"] .app-assistant-wait-chip-time {
    color: rgba(0, 0, 0, 0.55);
}

.app-assistant-welcome {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.app-assistant-welcome svg {
    width: 48px;
    height: 48px;
    fill: rgba(124, 77, 255, 0.3);
    margin-bottom: 16px;
}

.app-assistant-welcome h3 {
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.app-assistant-welcome p {
    font-size: 12px;
    line-height: 1.5;
}

/* Input area */
.app-assistant-input-area {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(124, 77, 255, 0.15);
    flex-shrink: 0;
    background: rgba(124, 77, 255, 0.03);
}

.app-assistant-input {
    flex: 1;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(124, 77, 255, 0.2);
    border-radius: 10px;
    color: var(--text-primary, #f0f0f5);
    caret-color: var(--app-assistant-accent, #7C4DFF);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    resize: none;
    min-height: 40px;
    max-height: 120px;
    outline: none;
    overflow-y: auto;
}

.app-assistant-input:focus {
    border-color: #7C4DFF;
}

.app-assistant-input::-webkit-scrollbar { width: 4px; }
.app-assistant-input::-webkit-scrollbar-track { background: transparent; }
.app-assistant-input::-webkit-scrollbar-thumb {
    background: rgba(var(--app-assistant-accent-rgb, 124, 77, 255), 0.35);
    border-radius: 0;
}
.app-assistant-input::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--app-assistant-accent-rgb, 124, 77, 255), 0.55);
}
.app-assistant-input::-webkit-scrollbar-button { display: none !important; }

.app-assistant-send {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #7C4DFF;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-end;
    user-select: none;
    transition: background 0.15s;
}

.app-assistant-send:hover { background: #651FFF; }
.app-assistant-send:disabled { opacity: 0.4; cursor: default; }

.app-assistant-send svg {
    width: 18px;
    height: 18px;
    fill: white;
}

.app-assistant-attach,
.app-assistant-capture {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    align-self: flex-end;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(var(--app-assistant-accent-rgb, 124, 77, 255), 0.18);
    color: var(--text-secondary, #a0aec0);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    user-select: none;
}

.app-assistant-attach:hover,
.app-assistant-capture:hover {
    background: rgba(var(--app-assistant-accent-rgb, 124, 77, 255), 0.16);
    color: var(--text-primary, #f0f0f5);
    border-color: rgba(var(--app-assistant-accent-rgb, 124, 77, 255), 0.45);
}

.app-assistant-attach svg,
.app-assistant-capture svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Poignees de redimensionnement (8 directions). Bandes invisibles
   superposees aux bords/coins du panel. Le hover les revele
   discretement. */
.app-assistant-resize-handle {
    position: absolute;
    z-index: 3;
    background: transparent;
    user-select: none;
}

.app-assistant-resize-handle.resize-n  { top: -4px;    left: 12px;   right: 12px;   height: 8px;  cursor: ns-resize; }
.app-assistant-resize-handle.resize-s  { bottom: -4px; left: 12px;   right: 12px;   height: 8px;  cursor: ns-resize; }
.app-assistant-resize-handle.resize-e  { right: -4px;  top: 12px;    bottom: 12px;  width: 8px;   cursor: ew-resize; }
.app-assistant-resize-handle.resize-w  { left: -4px;   top: 12px;    bottom: 12px;  width: 8px;   cursor: ew-resize; }
.app-assistant-resize-handle.resize-ne { top: -6px;    right: -6px;  width: 14px;   height: 14px; cursor: nesw-resize; }
.app-assistant-resize-handle.resize-nw { top: -6px;    left: -6px;   width: 14px;   height: 14px; cursor: nwse-resize; }
.app-assistant-resize-handle.resize-se { bottom: -6px; right: -6px;  width: 14px;   height: 14px; cursor: nwse-resize; }
.app-assistant-resize-handle.resize-sw { bottom: -6px; left: -6px;   width: 14px;   height: 14px; cursor: nesw-resize; }

/* Pas d'indicateur visuel sur le coin SE : on garde un coin arrondi
   propre, conforme au reste du panneau. La poignee est invisible mais
   reste fonctionnelle (zone de clic 14x14 en absolu sur le coin). */

.app-assistant-panel.resizing { transition: none !important; }
.app-assistant-panel.resizing .app-assistant-resize-handle { background: rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.05); }

/* New conversation button */
.app-assistant-new {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    display: flex;
    user-select: none;
}

.app-assistant-new:hover { color: #7C4DFF; }
.app-assistant-new svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }

/* Scrollbar */
.app-assistant-messages::-webkit-scrollbar { width: 6px; }
.app-assistant-messages::-webkit-scrollbar-track { background: transparent; }
.app-assistant-messages::-webkit-scrollbar-thumb { background: rgba(124, 77, 255, 0.2); border-radius: 3px; }
.app-assistant-messages::-webkit-scrollbar-button { display: none !important; }

/* Light mode */
[data-theme="light"] .app-assistant-panel { background: #2e3142; box-shadow: -8px 0 32px rgba(0,0,0,0.25); }
[data-theme="light"] .app-assistant-msg.assistant { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
[data-theme="light"] .app-assistant-input { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }

/* Agent universel - couche visuelle réutilisable */
.app-assistant-host {
    position: relative;
}

.app-assistant-fab {
    right: 26px;
    bottom: 26px;
    width: 54px;
    height: 54px;
    background:
        radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.18), transparent 50%),
        linear-gradient(160deg, var(--app-assistant-accent, #8b5cf6) 0%, rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.7) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 6px 20px rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.30),
        0 0 0 1px rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    z-index: 200050;
    animation: appAssistantBreath 4s ease-in-out infinite;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.app-assistant-fab.app-assistant-movable,
.app-assistant-panel.app-assistant-movable {
    right: auto;
    bottom: auto;
}

.app-assistant-fab.app-assistant-contained,
.app-assistant-panel.app-assistant-contained {
    position: absolute;
}

.app-assistant-fab.dragging {
    cursor: grabbing;
    animation: none;
}

.app-assistant-fab::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    border: 1px solid rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.16);
    opacity: 0.6;
    animation: appAssistantBreath 4s ease-in-out infinite reverse;
}

.app-assistant-fab:hover {
    transform: translateY(-1px) scale(1.06);
    box-shadow:
        0 10px 28px rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.40),
        0 0 0 1px rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Retour tactile : ecrasement bref quand on appuie */
.app-assistant-fab:active:not(.dragging) {
    transform: scale(0.86);
    transition: transform 0.08s ease;
}

.app-assistant-fab.active:active:not(.dragging) {
    transform: scale(0.80);
}

/* Onde concentrique au clic */
.app-assistant-fab.pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 3px solid rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.7);
    pointer-events: none;
    animation: appAssistantRipple 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Mini-rebond de l'icone au clic */
.app-assistant-fab.pulse svg {
    animation: appAssistantIconBounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes appAssistantRipple {
    0% {
        transform: scale(1);
        opacity: 0.9;
        border-width: 3px;
    }
    60% {
        opacity: 0.4;
    }
    100% {
        transform: scale(2.3);
        opacity: 0;
        border-width: 1px;
    }
}

@keyframes appAssistantIconBounce {
    0% { transform: scale(1); }
    35% { transform: scale(0.65); }
    70% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.app-assistant-fab.active {
    right: 26px;
    bottom: 26px;
    transform: scale(0.92);
    animation: none;
    box-shadow:
        0 4px 14px rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.32),
        0 0 0 1px rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.app-assistant-fab.active::before {
    opacity: 0.9;
    animation: none;
    border-color: rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.32);
}

.app-assistant-fab svg {
    width: 26px;
    height: 26px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.app-assistant-fab.active svg {
    transform: scale(0.95);
}

.app-assistant-panel {
    top: auto;
    right: 24px;
    bottom: 92px;
    width: min(410px, calc(100vw - 32px));
    height: min(560px, calc(100vh - 132px));
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(18, 18, 30, 0.98), rgba(9, 9, 15, 0.98)),
        var(--bg-primary, #0a0a0f);
    border: 1px solid rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.22);
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.58),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    z-index: 200040;
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px) scale(0.96) rotate(-3deg);
    transform-origin: bottom right;
    transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow: hidden;
}

.app-assistant-panel.app-assistant-movable {
    top: auto;
}

.app-assistant-panel.open {
    right: 24px;
    display: flex;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1) rotate(0deg);
    transition: opacity 0.24s ease, transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.app-assistant-panel.app-assistant-movable.open {
    right: auto;
}

.app-assistant-header {
    gap: 12px;
    padding: 16px;
    background:
        radial-gradient(circle at 0% 0%, rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.22), transparent 42%),
        rgba(255, 255, 255, 0.035);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* La zone de titre sert aussi de poignee pour deplacer la fenetre.
       Le rond (FAB) suit alors exactement comme lorsque l'on deplace le
       rond et que le panneau suit. Les boutons du header sont exclus
       du drag par le JS via event.target.closest('button'). */
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.app-assistant-header-copy,
.app-assistant-header-mark,
.app-assistant-header-context {
    cursor: move;
}

.app-assistant-header button {
    cursor: pointer;
}

.app-assistant-panel.header-dragging {
    transition: none !important;
}

.app-assistant-panel.header-dragging .app-assistant-header {
    cursor: grabbing;
}

.app-assistant-header-mark {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.16);
    border: 1px solid rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.24);
    flex-shrink: 0;
}

.app-assistant-header-icon {
    width: 22px;
    height: 22px;
    fill: var(--app-assistant-accent, #8b5cf6);
}

.app-assistant-header-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-assistant-header-title {
    flex: 0;
    font-size: 15px;
    letter-spacing: -0.01em;
}

.app-assistant-header-subtitle {
    color: var(--text-secondary, #a0aec0);
    font-size: 11px;
}

.app-assistant-header-context {
    max-width: 104px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.12);
    color: #ddd6fe;
    border: 1px solid rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.18);
}

.app-assistant-new,
.app-assistant-copy,
.app-assistant-header-close {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
}

.app-assistant-new:hover,
.app-assistant-copy:hover,
.app-assistant-header-close:hover {
    background: rgba(255, 255, 255, 0.08);
}

.app-assistant-copy {
    background: none;
    border: none;
    color: var(--text-secondary, #a0aec0);
    cursor: pointer;
    display: flex;
    padding: 4px;
}

.app-assistant-copy svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.app-assistant-messages {
    padding: 18px;
    gap: 14px;
}

.app-assistant-msg {
    max-width: 92%;
    padding: 12px 14px;
    border-radius: 16px;
    font-size: 13px;
}

.app-assistant-msg.user {
    background: linear-gradient(135deg, var(--app-assistant-accent, #8b5cf6), rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.72));
    box-shadow: 0 12px 28px rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.24);
}

.app-assistant-msg.assistant {
    background: rgba(255, 255, 255, 0.065);
    border-color: rgba(255, 255, 255, 0.09);
}

.app-assistant-welcome {
    padding: 28px 12px;
}

.app-assistant-welcome svg {
    width: 54px;
    height: 54px;
    fill: rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.72);
}

.app-assistant-welcome h3 {
    font-size: 18px;
    margin: 4px 0 8px;
}

.app-assistant-welcome p {
    max-width: 310px;
    margin: 0 auto;
    font-size: 13px;
}

.app-assistant-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 18px;
}

.app-assistant-suggestion {
    border: 1px solid rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.18);
    background: rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.09);
    color: #ddd6fe;
    border-radius: 999px;
    padding: 7px 10px;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.app-assistant-suggestion:hover {
    background: rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.18);
}

.app-assistant-input-area {
    padding: 14px;
    gap: 10px;
    background: rgba(255, 255, 255, 0.035);
}

.app-assistant-input {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.24);
    border-color: rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.18);
}

.app-assistant-input:focus {
    border-color: rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.72);
    box-shadow: 0 0 0 3px rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.12);
}

.app-assistant-send {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--app-assistant-accent, #8b5cf6), rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.72));
}

@keyframes appAssistantPanelClose {
    from {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
    to {
        opacity: 0;
        transform: translateY(18px) scale(0.96) rotate(-3deg);
    }
}

@keyframes appAssistantBreath {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.03) translateY(-2px); }
}

/* Image attachments */
.app-assistant-attachments {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.app-assistant-att-item {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.app-assistant-att-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-assistant-att-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.app-assistant-att-remove svg {
    stroke: white;
    stroke-width: 2.5;
    fill: none;
}

.app-assistant-msg-images {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.app-assistant-msg-images img {
    max-width: 140px;
    max-height: 100px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ------------------------------------------------------------------
   Layout interne du panneau (historique a gauche + zone principale)
   ------------------------------------------------------------------ */

.app-assistant-panel {
    /* Le panneau garde son layout en colonne. L'historique est positionne
       en absolu a gauche (excroissance) pour ne pas reduire le main. */
    flex-direction: column;
    overflow: visible; /* permet l'excroissance du panneau historique */
}

.app-assistant-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* le main occupe TOUT le panneau ; il n'est pas reduit par l'historique */
    border-radius: inherit;
    /* CRITIQUE : position+z-index pour que le main reste devant l'historique
       pendant TOUT le cycle d'animation (sinon l'history en position:absolute
       avec z-index:0 passe par-dessus). Le main herite du fond du panel. */
    position: relative;
    z-index: 2;
    background: inherit;
}

/* Panneau d'historique - excroissance attachee a gauche du panel principal.
   - position: absolute pour ne pas affecter le layout du main
   - right: 100% : colle au bord gauche du panel (sans gap)
   - z-index < panel : il passe visuellement "en dessous" du principal
   - bord arrondi cote gauche uniquement, pas de bordure droite (collee)
   - cache par defaut (translate + opacity), revele quand .history-open */
/* Le panneau historique est positionne en absolu a gauche du panel
   principal (right:100%). Il est compose de :
   - .app-assistant-history-tab : la fleche en excroissance (enfant DIRECT
     pour faire reellement bloc avec le panneau pendant la translation).
   - .app-assistant-history-inner : le contenu clippé (header, liste, etc.).
   L'overflow du panneau est VISIBLE pour que la fleche puisse depasser a
   gauche ; c'est l'inner qui clippe le contenu visible. Tout l'ensemble
   se translate en un seul bloc. */
.app-assistant-history {
    position: absolute;
    right: 100%;
    top: 0;
    bottom: 0;
    width: 240px;
    background: transparent;
    overflow: visible;
    /* Etat ferme : le panneau est entierement cache derriere le main
       (translateX(100%) le pousse de sa propre largeur vers la droite,
       au-dessus du main qui est devant). Seule la fleche en excroissance
       a gauche reste visible. */
    transform: translateX(100%);
    pointer-events: none;
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 1;
    will-change: transform;
}

.app-assistant-panel.history-open .app-assistant-history {
    transform: translateX(0);
    pointer-events: auto;
}

/* Conteneur interne qui clippe le contenu du panneau (header, liste...) :
   c'est lui qui porte le fond et les bordures arrondies. La fleche, en
   tant que freere, reste visible meme avec ce clipping. */
.app-assistant-history-inner {
    position: absolute;
    inset: 0;
    border-radius: 12px 0 0 12px;
    background:
        linear-gradient(180deg, rgba(14, 14, 22, 0.98), rgba(8, 8, 12, 0.98)),
        var(--bg-primary, #0a0a0f);
    border: 1px solid rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.22);
    border-right: none;
    /* Pas de bordure gauche : la fleche prend le relais visuellement
       a hauteur centrale, le reste utilise les ombres pour le relief. */
    border-left: none;
    box-shadow:
        -10px 18px 46px rgba(0, 0, 0, 0.42),
        inset -8px 0 14px -6px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: inherit;
}

/* Poignee de redimensionnement du panneau historique (bord gauche).
   Tirer vers la gauche elargit le panneau, vers la droite le retrecit. */
.app-assistant-history-resize-handle {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    z-index: 4;
    user-select: none;
    background: transparent;
    transition: background 0.15s;
}

.app-assistant-history-resize-handle:hover {
    background: rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.18);
}

.app-assistant-history.resizing { transition: none !important; }
.app-assistant-history.resizing .app-assistant-history-resize-handle {
    background: rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.32);
}

/* Onglet flèche en excroissance (côté gauche du panel).
   Cliquer ouvre/ferme le panneau historique. */
/* La fleche est enfant DIRECT de .app-assistant-history : elle fait
   partie du meme bloc et translate avec lui (pas de transform ni
   transition independante). Son fond est aligne avec celui de
   .app-assistant-history-inner pour donner l'illusion d'une seule piece.
   Sa bordure droite recouvre la bordure gauche de .app-assistant-history-inner
   pour eviter l'effet de raccord visible. */
.app-assistant-history-tab {
    position: absolute;
    left: -22px;
    top: 50%;
    transform: translateY(-50%);
    transition: color 0.2s, background 0.2s;
    width: 22px;
    height: 64px;
    pointer-events: auto;
    /* Fond IDENTIQUE a celui de .app-assistant-history-inner pour donner
       l'illusion d'un seul bloc continu (jonction invisible a x=0 du
       panneau historique, sans bordure entre les deux puisque la fleche
       n'a pas de bordure droite et l'inner pas de bordure gauche). */
    background:
        linear-gradient(180deg, rgba(14, 14, 22, 0.98), rgba(8, 8, 12, 0.98)),
        var(--bg-primary, #0a0a0f);
    border: 1px solid rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.22);
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: var(--text-secondary, #a0aec0);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    user-select: none;
    transition: color 0.15s, background 0.15s;
}

.app-assistant-history-tab:hover {
    color: var(--text-primary, #f0f0f5);
    background:
        linear-gradient(180deg, rgba(28, 28, 42, 0.98), rgba(15, 15, 22, 0.98)),
        var(--bg-primary, #0a0a0f);
}

.app-assistant-history-tab svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.app-assistant-panel.history-open .app-assistant-history-tab svg {
    transform: rotate(180deg);
}

.app-assistant-history-header {
    padding: 14px 14px 8px;
    color: var(--text-secondary, #a0aec0);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Bouton "Nouvelle conversation" : c'est un item de la sidebar a part
   entiere. Il porte la classe .is-active quand AUCUNE conversation
   existante n'est ouverte, pour rappeler que l'on est en train de
   composer un nouveau message (= mode "creation"). Quand l'utilisateur
   ouvre une conversation existante, .is-active est retire et c'est
   l'item correspondant de la liste qui prend le relais. */
.app-assistant-history-new {
    margin: 4px 10px 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.18);
    color: var(--text-secondary, #a0aec0);
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    user-select: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.app-assistant-history-new:hover {
    background: rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.10);
    color: var(--text-primary, #f0f0f5);
}

.app-assistant-history-new.is-active {
    background: rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.20);
    border-color: rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.45);
    color: #ddd6fe;
}

.app-assistant-history-new svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.app-assistant-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 6px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-assistant-history-empty {
    padding: 18px 14px;
    color: var(--text-secondary, #a0aec0);
    font-size: 12px;
    text-align: center;
}

/* Item d'historique : pas de bouton corbeille au hover. La suppression
   passe par le pattern UX standard (UX.sidebarDeletable) :
   - clic droit -> menu contextuel (Renommer / Supprimer)
   - swipe gauche tactile -> fond rouge a droite, tap pour supprimer
   Le wrapper .nav-item-deletable est ajoute autour de chaque item par
   UX.sidebarDeletable.wrapHtml ; ses styles viennent de
   /ux/ux-components.css (bloc « SUPPRESSION D'ELEMENTS DE LISTE »). */
.app-assistant-history-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text-primary, #f0f0f5);
    cursor: pointer;
    user-select: none;
    min-width: 0;
    transition: background 0.15s;
    background: transparent;
}

.app-assistant-history-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.app-assistant-history-item.active {
    background: rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.18);
}

.app-assistant-history-item-title {
    font-size: 12px;
    line-height: 1.3;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-assistant-history-item-date {
    font-size: 10px;
    color: var(--text-secondary, #a0aec0);
}

/* Le wrapper .nav-item-deletable doit avoir un fond opaque pour cacher
   le rouge derriere pendant le swipe. Le slide herite du fond du panel
   historique pour rester coherent. */
.app-assistant-history-list .nav-item-deletable {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 2px;
}

.app-assistant-history-list .nav-item-deletable-slide {
    background: var(--bg-primary, #0a0a0f);
    background:
        linear-gradient(180deg, rgba(14, 14, 22, 0.98), rgba(8, 8, 12, 0.98)),
        var(--bg-primary, #0a0a0f);
}

.app-assistant-history-list::-webkit-scrollbar { width: 6px; }
.app-assistant-history-list::-webkit-scrollbar-track { background: transparent; }
.app-assistant-history-list::-webkit-scrollbar-thumb { background: rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.2); border-radius: 0; }
.app-assistant-history-list::-webkit-scrollbar-button { display: none !important; }

/* L'ancien bouton hamburger (.app-assistant-history-toggle) a ete
   remplace par l'onglet flèche en excroissance (.app-assistant-history-tab).
   Voir la regle .app-assistant-history-tab plus haut. */

/* Mode mobile : l'historique se rabat dans le panel en recouvrement.
   La fleche suit toujours le panneau (en bloc), mais elle deborde de
   l'autre cote (a droite du panneau, puisqu'il s'ouvre depuis la gauche
   en mobile). */
@media (max-width: 640px) {
    .app-assistant-history-tab {
        left: auto;
        right: -22px;
        border-radius: 0 8px 8px 0;
        border-left: none;
        border-right: 1px solid rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.22);
    }
    .app-assistant-history-inner {
        border-radius: 0 12px 12px 0;
        border-left: 1px solid rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.22);
        border-right: none;
        box-shadow:
            10px 18px 46px rgba(0, 0, 0, 0.42),
            inset 8px 0 14px -6px rgba(0, 0, 0, 0.55);
    }
    .app-assistant-history {
        position: absolute;
        right: auto;
        left: 0;
        max-width: 280px;
        width: 80%;
        transform: translateX(-100%);
        /* En mobile, le panneau historique recouvre le main (overlay) :
           il doit etre AU-DESSUS du main, contrairement au desktop. */
        z-index: 5;
    }
    .app-assistant-panel.history-open .app-assistant-history {
        transform: translateX(0);
    }
}

@media (max-width: 640px) {
    .app-assistant-fab:not(.app-assistant-contained) {
        right: 18px;
        bottom: 82px;
    }

    .app-assistant-fab.active:not(.app-assistant-contained) {
        right: 18px;
        bottom: 82px;
    }

    .app-assistant-panel:not(.app-assistant-contained),
    .app-assistant-panel.open:not(.app-assistant-contained) {
        right: 10px;
        bottom: 74px;
        width: calc(100vw - 20px);
        height: min(620px, calc(100vh - 96px));
        border-radius: 12px;
    }
}