/* writer_ai_sidebar.css — sidebar chat Assistant IA (2026-08-28) */

/* Surlignage persistant du passage ciblé dans le document (voir applyVisualHighlight
   dans writer_ai_sidebar.js) — reste visible même après que le focus ait quitté la
   zone d'édition, contrairement au surlignage natif du navigateur. */
mark.ai-target-highlight {
    background: #aed4ff;
    color: inherit;
    border-radius: 2px;
    box-shadow: 0 0 0 1px #7fb2f0;
}
/* La sélection peut englober des paragraphes entiers (<p> = bloc) alors que <mark>
   est en ligne par défaut : les navigateurs ne peignent pas le fond correctement
   sur un enfant bloc à l'intérieur d'un parent en ligne. On applique donc aussi le
   fond directement sur les blocs contenus, plutôt que de compter sur l'héritage. */
mark.ai-target-highlight :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, div) {
    background: #aed4ff;
    box-shadow: 0 0 0 1px #7fb2f0;
    border-radius: 2px;
}

.ai-chat-sidebar {
    width: 340px;
    min-width: 340px;
    background: #1e1e2e;
    border-left: 1px solid #333;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.2s ease, min-width 0.2s ease;
    font-size: 13px;
    color: #cdd6f4;
}

.ai-chat-sidebar.hidden {
    width: 0;
    min-width: 0;
    border-left: none;
}

/* ==================== QUICK ACTIONS DANS LA SIDEBAR (mobile, 2026-09-14) ====================
   Sur smartphone, le bouton "Actions IA" affiche ses options ici plutôt que dans
   le dropdown flottant #aiDropdownMenu (impraticable sur petit écran) — voir
   handleAIButtonClick() / openAIQuickActionsInSidebar() dans writer_ai.js.
   Réutilise les mêmes classes que le dropdown (.ai-menu-item, .ai-category…,
   définies dans writer_base.css / writer_ui.css) : on adapte juste les couleurs
   au thème sombre de la sidebar plutôt que dupliquer le HTML/JS. */
.ai-chat-quick-actions {
    border-bottom: 1px solid #333;
    max-height: 45vh;
    overflow-y: auto;
    flex-shrink: 0;
}
.ai-chat-quick-actions.hidden { display: none; }

.ai-chat-quick-actions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #cdd6f4;
    background: #24243a;
    position: sticky;
    top: 0;
}
.ai-chat-quick-actions-close {
    cursor: pointer;
    opacity: .7;
    padding: 2px 6px;
}
.ai-chat-quick-actions-close:hover { opacity: 1; }

#aiChatQuickActions .ai-menu-section-title,
#aiChatQuickActions .ai-category-header {
    background: #292a3e;
    color: #cdd6f4;
}
#aiChatQuickActions .ai-category-header:hover { background: #34354d; }
#aiChatQuickActions .ai-category-arrow { color: #9399b2; }
#aiChatQuickActions .ai-menu-item { color: #cdd6f4; }
#aiChatQuickActions .ai-menu-item:hover { background: #34354d; color: #89b4fa; }
#aiChatQuickActions .ai-menu-item:active { background: #3b3d57; }
#aiChatQuickActions .ai-menu-separator { background: #3a3a4d; }

.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-chat-messages::-webkit-scrollbar { width: 4px; }
.ai-chat-messages::-webkit-scrollbar-thumb { background: #45475a; border-radius: 2px; }

.ai-chat-msg { display: flex; }
.ai-chat-msg-user { justify-content: flex-end; }
.ai-chat-msg-assistant { justify-content: flex-start; }

.ai-chat-bubble {
    max-width: 88%;
    padding: 8px 11px;
    border-radius: 10px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.ai-chat-msg-user .ai-chat-bubble {
    background: #89b4fa;
    color: #1e1e2e;
    border-bottom-right-radius: 2px;
}

.ai-chat-msg-assistant .ai-chat-bubble {
    background: #313244;
    color: #cdd6f4;
    border-bottom-left-radius: 2px;
}

/* Indicateur d'attente pendant la génération d'une réponse : GIF animé du pêcheur,
   affiché en boucle, en pleine largeur du sidebar (format horizontal). La largeur
   max est celle du conteneur de messages (340px de sidebar moins le padding), la
   hauteur suit automatiquement pour ne pas déformer l'image. */
.ai-chat-waiting {
    width: 100%;
    max-width: 100%;
}
.ai-chat-waiting img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    border: 1px solid #45475a;
    background: #11111b;
}

.ai-chat-edit-card {
    background: #181825;
    border: 1px solid #45475a;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12.5px;
}

.ai-chat-edit-summary {
    font-weight: 600;
    color: #f9e2af;
    margin-bottom: 4px;
}

.ai-chat-edit-desc {
    color: #a6adc8;
    margin-bottom: 8px;
}

.ai-chat-edit-preview {
    background: #11111b;
    border-radius: 6px;
    padding: 8px;
    max-height: 160px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    color: #cdd6f4;
    margin-bottom: 8px;
}

.ai-chat-edit-actions { display: flex; gap: 8px; align-items: center; }

.ai-chat-btn {
    border: 1px solid #45475a;
    background: #313244;
    color: #cdd6f4;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
}

.ai-chat-btn:hover { background: #45475a; }

.ai-chat-btn-apply {
    background: #2d8a4e;
    border-color: #2d8a4e;
    color: #fff;
    font-weight: 600;
}
.ai-chat-btn-apply:hover { background: #256e3f; }

.ai-chat-edit-applied {
    font-size: 12px;
    color: #a6adc8;
    font-style: italic;
}

.ai-chat-selection-chip {
    flex-shrink: 0;
    margin: 0 8px 6px;
    padding: 6px 9px;
    background: #313244;
    border: 1px solid #89b4fa;
    border-radius: 8px;
    font-size: 11.5px;
    color: #cdd6f4;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-chat-selection-chip.hidden { display: none; }

.ai-chat-chip-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-chat-chip-clear {
    cursor: pointer;
    color: #a6adc8;
    flex-shrink: 0;
}

.ai-chat-chip-clear:hover { color: #f38ba8; }

.ai-chat-input-row {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
    padding: 8px;
    border-top: 1px solid #333;
    background: #181825;
}

.ai-chat-input {
    flex: 1;
    resize: none;
    background: #11111b;
    border: 1px solid #45475a;
    border-radius: 8px;
    color: #cdd6f4;
    padding: 7px 9px;
    font-size: 13px;
    font-family: inherit;
}

.ai-chat-input:focus { outline: none; border-color: #89b4fa; }

.ai-chat-send-btn {
    flex-shrink: 0;
    width: 34px;
    border: none;
    background: #89b4fa;
    color: #1e1e2e;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
}

.ai-chat-send-btn:hover { background: #74a8f8; }
.ai-chat-send-btn:disabled { opacity: 0.5; cursor: default; }