/* =========================================================
   Compléments ajoutés lors de la refonte MVC.
   Le reste du style vient de style.css / login.css (originaux,
   inchangés) : palette, sidebar, bulles, header, input.
   ========================================================= */

/* Bouton « Nouvelle conversation » (libellé explicite) */
.btn-new-full {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 10px 12px 4px;
	padding: 10px 12px;
	background: var(--accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	width: calc(100% - 24px);
	transition: background 0.2s;
}

.btn-new-full:hover {
	background: var(--accent-hover);
}

.btn-new-full .icon {
	font-size: 18px;
	line-height: 1;
}

/* Badge crédits & infos utilisateur (dans .header-right) */
.credits-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(0, 159, 227, 0.15);
	color: var(--accent);
	font-size: 12px;
	font-weight: 600;
}

.user-info {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.btn-logout {
	text-decoration: none;
	color: inherit;
}

/* Messages flash (dark theme) */
.flash {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 2000;
	max-width: 380px;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 14px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.flash-success {
	background: #1a452a;
	color: #86efac;
	border: 1px solid #166534;
}

.flash-danger {
	background: #451a1a;
	color: #fca5a5;
	border: 1px solid #7f1d1d;
}

.flash-warning {
	background: #453a1a;
	color: #fcd34d;
	border: 1px solid #7f6b0f;
}

/* Le lien de déconnexion reste discret dans le header */
.header-right a {
	text-decoration: none;
}

/* Lien vers l'audit premium dans le header du chat */
.header-audit {
	text-decoration: none;
	color: var(--accent);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	padding: 3px 10px;
	border: 1px solid rgba(0, 159, 227, .45);
	border-radius: 999px;
	transition: background .2s;
}

.header-audit:hover {
	background: rgba(0, 159, 227, .15);
}

/* Bandeau lecture seule (admin consultant la conversation d'un client) */
.chat-readonly {
	padding: 8px 16px;
	background: rgba(240, 180, 41, .14);
	border-bottom: 1px solid rgba(240, 180, 41, .35);
	color: #f0b429;
	font-size: 13px;
	text-align: center;
}

/* ---------- Glisser-déposer ---------- */
.dz {
	position: relative;
	border: 2px dashed var(--border-color);
	border-radius: 12px;
	padding: 18px;
	margin-bottom: 14px;
	cursor: pointer;
	transition: border-color .15s, background .15s;
	background: rgba(255, 255, 255, .02);
}

.dz:hover { border-color: var(--accent); }

.dz.dz-over {
	border-color: var(--accent);
	background: rgba(0, 159, 227, .10);
}

.dz-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.dz-sub { font-size: 12.5px; color: var(--text-secondary); }
.dz-files { display: block; margin-top: 8px; font-size: 12.5px; color: var(--accent); }
.dz input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Messages flottants : disparition douce + bouton de fermeture */
.flash {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	transition: opacity .3s ease;
}

.flash-close {
	background: none;
	border: none;
	color: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	opacity: .7;
	padding: 0 2px;
}

.flash-close:hover { opacity: 1; }

/* ---------- Bouton flottant « remonter en haut » ---------- */
#backtop {
	position: fixed;
	right: 24px;
	bottom: 26px;
	z-index: 2500;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(0, 159, 227, .45);
	background: rgba(31, 31, 31, .92);
	color: var(--accent, #009fe3);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s, transform .2s, visibility .2s, background .2s;
	backdrop-filter: blur(4px);
}

#backtop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#backtop:hover {
	background: rgba(0, 159, 227, .18);
}

@media print {
	#backtop { display: none; }
}

/* Actions en ligne dans les tableaux (Ouvrir / Supprimer) */
.audit-row-actions { white-space: nowrap; }
.audit-row-actions form { display: inline-block; margin: 0 0 0 14px; vertical-align: baseline; }

/* Bouton compact dans les tableaux (reste un bouton, mais discret) */
.audit-row-actions .audit-btn-sm {
	padding: 4px 10px;
	font-size: 12px;
	line-height: 1.2;
}

/* Boutons compacts dans les tableaux de pièces */
.dossier-actions .audit-btn-sm {
	padding: 4px 10px;
	font-size: 12px;
	line-height: 1.2;
}

.dossier-actions form { display: inline-block; margin: 0 0 0 8px; vertical-align: middle; }

/* ---------- Marque Intelegis / Intelegis ---------- */
.audit-brand { display: inline-flex; align-items: center; gap: 9px; }

/* Le logo est dessiné pour fond clair : pastille blanche sur les bandeaux sombres */
.brand-mark {
	height: 26px;
	width: 26px;
	background: #fff;
	border-radius: 6px;
	padding: 2px;
	display: block;
}

.audit-brand span { font-weight: 700; }

.login-logo {
	width: min(300px, 78%);
	height: auto;
	display: block;
	margin: 0 auto 6px;
	background: #fff;
	border-radius: 10px;
	padding: 8px;
}

.welcome-logo {
	width: 60px;
	height: 60px;
	display: block;
	margin: 0 auto 8px;
	background: #fff;
	border-radius: 14px;
	padding: 7px;
}

/* =========================================================
   Charte Intelegis — accents
   navy #0B1F3A · or #C9A227 · teal #157C8C · ardoise #64748B
   ========================================================= */

/* Titres de section : filet or à gauche */
.audit-step {
	border-left: 3px solid var(--gold);
	padding-left: 10px;
	line-height: 1.35;
}

/* Barre haute : liseré or discret */
.audit-topbar { border-bottom: 1px solid var(--gold-soft); }

/* Marque : nom un peu espacé, comme sur le logo */
.audit-brand span { letter-spacing: .04em; }

/* Action principale seulement : teal du logo (les boutons secondaires
   gardent leur contour, sinon la page devient un bloc de couleur) */
.audit-submit {
	background: var(--accent-strong, var(--accent));
	border-color: var(--accent-strong, var(--accent));
	color: #fff;
}

.audit-submit:hover:not(:disabled) {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
}

/* Boutons secondaires : contour teal, fond transparent */
.audit-btn {
	background: transparent;
	border: 1px solid rgba(31, 148, 166, .55);
	color: var(--text-primary);
}

.audit-btn:hover {
	background: rgba(31, 148, 166, .16);
	border-color: var(--accent-hover);
}

/* Danger : rouge conservé, jamais de fond teal */
.audit-btn-danger {
	background: transparent;
	border-color: rgba(224, 90, 78, .55);
	color: #ffb3ab;
}

.audit-btn-danger:hover {
	background: rgba(224, 90, 78, .18);
	border-color: var(--danger);
	color: #fff;
}

/* Accessibilité : anneau de focus or */
:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

/* Liens d'action */
.audit-link:hover { color: var(--gold); }

/* Tableaux : entêtes teintées navy */
.audit-table thead th {
	background: rgba(11, 31, 58, .55);
	border-bottom: 1px solid var(--border-color);
}

/* Cartes : liseré supérieur très discret */
.audit-card {
	border: 1px solid var(--border-color);
	border-radius: 12px;
	background: var(--bg-card);
}

/* Logo Intelegis à la place de l'emoji ⚖️ (avatars et accueil du chat) */
.avatar-logo {
	width: 22px;
	height: 22px;
	display: block;
	background: #fff;
	border-radius: 5px;
	padding: 1px;
}

/* Barre latérale du chat : le logo remplace le titre « Conversations » */
.sidebar-brand { display: flex; align-items: center; margin: 0; }

.sidebar-logo {
	height: 30px;
	width: 30px;
	display: block;
	background: #fff;
	border-radius: 7px;
	padding: 2px;
}

/* ---------- L'or passe devant ---------- */
/* Bouton principal : fond or, texte navy (contraste AA) */
.audit-submit,
.audit-submit-inline {
	background: var(--gold) !important;
	border-color: var(--gold) !important;
	color: var(--navy) !important;
	font-weight: 700;
}

.audit-submit:hover:not(:disabled),
.audit-submit-inline:hover {
	background: var(--accent-hover) !important;
	border-color: var(--accent-hover) !important;
}

/* Titres de section : texte en or, filet plus franc */
.audit-step {
	border-left: 4px solid var(--gold);
	color: #F0D98A;
}

/* Liens : or */
a { color: var(--gold); }
a:hover { color: var(--accent-hover); }

/* Barre haute : liseré or plus présent */
.audit-topbar { border-bottom: 2px solid var(--gold-soft); }

/* Barre latérale : filet or sous l'en-tête */
.sidebar-header { border-bottom: 2px solid var(--gold-soft); }

/* Élément actif de la liste des conversations */
.conversations-list .conv-item.active,
.conversations-list .active {
	border-left: 3px solid var(--gold);
}

/* Badge de crédits : or */
.credits-badge { color: var(--gold); border-color: var(--gold-soft); }

/* Nom de la marque à côté de l'icône, dans la barre latérale */
.sidebar-brand { gap: 10px; }

.sidebar-name {
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .05em;
}

/* ---------- L'or, visible cette fois ---------- */
/* Bouton d'envoi du chat */
.btn-send {
	background: var(--gold) !important;
	color: var(--navy) !important;
}

.btn-send:hover:not(:disabled) {
	background: var(--accent-hover) !important;
}

/* Bouton « Nouvelle conversation » : contour et texte or */
.btn-new-full {
	background: transparent !important;
	border: 1px solid var(--gold) !important;
	color: var(--gold) !important;
	font-weight: 600;
}

.btn-new-full:hover {
	background: rgba(201, 162, 39, .15) !important;
	color: var(--gold) !important;
}

/* Bulle utilisateur : navy avec filet or, pour rester lisible */
.message.user .message-content {
	background: #123152 !important;
	border-right: 3px solid var(--gold);
}

/* =========================================================
   Finitions de la charte Intelegis
   ========================================================= */

/* En-tête du chat : marque + accroche, au lieu d'une phrase en h1 */
.header-brand { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.header-title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .04em;
	color: #fff;
	margin: 0;
	line-height: 1.2;
}

.header-tagline {
	font-size: 12px;
	color: var(--text-secondary);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Liste des conversations */
.conv-item {
	border-radius: 10px;
	padding: 10px 12px;
	border-left: 3px solid transparent;
	transition: background .15s, border-color .15s;
}

.conv-item:hover { background: var(--hover-color); border-left-color: var(--gold-soft); }

.conv-item.active {
	background: var(--active-color);
	border-left-color: var(--gold);
}

.conv-item-text { font-size: 13.5px; }

/* Bulles de message */
.message-content {
	border-radius: 14px;
	padding: 12px 16px;
	line-height: 1.55;
	max-width: 80%;
}

.message.user .message-content { border-radius: 14px 14px 4px 14px; }
.message.assistant .message-content { border-radius: 14px 14px 14px 4px; }

/* Zone de saisie et bouton d'envoi */
textarea, .composer textarea {
	background: var(--bg-input);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	transition: border-color .15s, box-shadow .15s;
}

textarea:focus, .composer textarea:focus {
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
	outline: none;
}

.btn-send {
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(201, 162, 39, .25);
	transition: transform .12s, background .15s;
}

.btn-send:hover:not(:disabled) { transform: translateY(-1px); }

/* En-tête : pastilles de navigation */
.header-audit {
	border: 1px solid var(--border-color);
	border-radius: 999px;
	padding: 5px 12px;
	transition: border-color .15s, color .15s, background .15s;
}

.header-audit:hover {
	border-color: var(--gold);
	color: var(--gold);
	background: rgba(201, 162, 39, .10);
}

/* Badge de crédits */
.credits-badge {
	border: 1px solid var(--gold-soft);
	border-radius: 999px;
	padding: 3px 10px;
	font-weight: 600;
}

/* Cartes d'audit / dossier */
.audit-card {
	box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 6px 18px rgba(0, 0, 0, .22);
}

/* Tableaux : lisibilité et hiérarchie */
.audit-table thead th {
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: .06em;
	color: var(--text-secondary);
	padding: 10px 12px;
}

.audit-table tbody tr:hover { background: rgba(255, 255, 255, .02); }

/* Badges : plus doux, moins “étiquette” */
.audit-badge {
	border-radius: 6px;
	padding: 2px 8px;
	font-size: 11px;
	letter-spacing: .02em;
}

/* Barres de défilement discrètes */
* { scrollbar-width: thin; scrollbar-color: #1D3A57 transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #1D3A57; border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: var(--gold-soft); }

/* Transitions homogènes */
a, button, .conv-item, .audit-btn { transition: color .15s, background .15s, border-color .15s; }

/* ---------- Navigations : chat et modules ---------- */
.header-right { display: flex; align-items: center; gap: 12px; }

/* Chat : modules à gauche, pastille discrète, filet séparateur */
.header-nav {
	display: flex;
	align-items: center;
	gap: 2px;
	padding-right: 12px;
	border-right: 1px solid var(--border-color);
}

.header-audit {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 10px;
	border: 0 !important;
	border-radius: 8px;
	background: transparent !important;
	color: var(--text-secondary) !important;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
}

.header-audit i { font-size: 12px; opacity: .9; }

.header-audit:hover {
	color: var(--gold) !important;
	background: rgba(201, 162, 39, .10) !important;
}

/* Modèle : chip discret, plus de « Modèle : openclaw/juriste » en clair */
.model-chip {
	font-size: 11px;
	color: var(--text-secondary);
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--border-color);
	border-radius: 999px;
	padding: 3px 9px;
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.user-name { color: var(--text-secondary); font-size: 12.5px; }

.btn-logout {
	color: var(--text-secondary) !important;
	font-size: 14px;
	padding: 6px 8px;
	border-radius: 8px;
}

.btn-logout:hover { color: var(--gold) !important; background: rgba(201, 162, 39, .10); }

/* Audit / Dossiers : même langage visuel dans la barre haute */
.audit-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }

.audit-nav a {
	padding: 6px 11px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-secondary);
	text-decoration: none;
	transition: color .15s, background .15s;
}

.audit-nav a:hover { color: var(--gold); background: rgba(201, 162, 39, .10); }

.audit-nav a.active {
	color: var(--gold);
	background: rgba(201, 162, 39, .12);
	box-shadow: inset 0 -2px 0 var(--gold);
}

/* Sur mobile, on masque le chip de modèle pour laisser respirer */
@media (max-width: 720px) {
	.model-chip { display: none; }
	.header-tagline { display: none; }
}

/* ---------- Actions d'une pièce : alignement + hiérarchie ---------- */
.dossier-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	white-space: nowrap;
}

.dossier-actions form { display: inline-flex; margin: 0; }
.dossier-actions .audit-btn { margin: 0; }

/* Contrôler = action principale : or plein, texte navy */
.audit-btn-controle,
.audit-btn-controle:hover {
	color: var(--navy) !important;
	font-weight: 700;
}

.audit-btn-controle {
	background: var(--gold) !important;
	border-color: var(--gold) !important;
}

.audit-btn-controle:hover {
	background: var(--accent-hover) !important;
	border-color: var(--accent-hover) !important;
}

/* Voir = action secondaire discrète */
.dossier-actions a.audit-btn {
	color: var(--text-secondary);
	border-color: var(--border-color);
}

.dossier-actions a.audit-btn:hover {
	color: var(--gold);
	border-color: var(--gold);
	background: rgba(201, 162, 39, .10);
}

/* Sous-titres de groupe dans le détail d'un contrôle */
.audit-substep {
	margin: 18px 0 8px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--gold);
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 4px;
}

.audit-substep .audit-muted { text-transform: none; letter-spacing: 0; }

/* Groupe replié : faits non vérifiables par le dossier */
.audit-collapse { margin: 18px 0 8px; }
.audit-collapse > summary { cursor: pointer; list-style: none; }
.audit-collapse > summary::-webkit-details-marker { display: none; }
.audit-collapse > summary::before { content: "▸ "; color: var(--gold); }
.audit-collapse[open] > summary::before { content: "▾ "; }
.audit-collapse .audit-anomaly { margin-top: 10px; }

/* ---------- Alertify aux couleurs Intelegis ---------- */
.ajs-modal { background: rgba(8, 20, 38, .78); }

/* !important : le thème Alertify impose background-color:#fff et garde la priorité
   selon l'ordre de chargement — même traitement que les boutons. */
.ajs-dialog {
	background-color: var(--bg-card, #0F2742) !important;
	color: var(--text-primary, #E9EFF6) !important;
	border: 1px solid var(--border-color, #1D3A57) !important;
	border-radius: 8px !important;
	box-shadow: 0 14px 44px rgba(0, 0, 0, .48);
	overflow: hidden;
}

.ajs-header {
	background-color: transparent !important;
	color: var(--text-primary, #E9EFF6) !important;
	font-weight: 700;
	border-bottom: 1px solid var(--border-color, #1D3A57)!important;
}

.ajs-body, .ajs-content, .ajs-message { color: var(--text-primary, #E9EFF6) !important; background-color: transparent !important; }

.ajs-footer { background-color: transparent !important; border-top: 1px solid var(--border-color, #1D3A57) !important; }

.ajs-buttons .ajs-button {
	border-radius: 8px;
	font-weight: 600;
	font-size: 13px;
	padding: 8px 14px;
}

/* Confirmer = action principale */
.ajs-ok, .ajs-ok:focus {
	background: var(--gold) !important;
	border: 1px solid var(--gold) !important;
	color: var(--navy) !important;
}

.ajs-ok:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }

/* Annuler = secondaire */
.ajs-cancel, .ajs-cancel:focus {
	background: transparent !important;
	border: 1px solid var(--border-color) !important;
	color: var(--text-secondary) !important;
}

.ajs-cancel:hover { color: var(--gold) !important; border-color: var(--gold) !important; }

/* Notifications */
.ajs-notifier .ajs-message { border-radius: 10px; font-size: 13px; }

/* Actions sous une réponse de l'agent : icônes discrètes */
.msg-actions {
	display: flex;
	gap: 2px;
	margin-top: 2px;
	opacity: .35;
	transition: opacity .15s ease;
}

.message:hover .msg-actions { opacity: .9; }

.msg-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	font-size: 11px;
	line-height: 1;
	color: var(--muted, #A3B4C6);
	background: transparent;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	transition: color .15s ease, background .15s ease;
}

.msg-action:hover {
	color: var(--accent, #C9A227);
	background: rgba(201, 162, 39, .12);
}

/* ---------- Bouton d'arrêt de génération ---------- */
.btn-stop {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--border-color);
	background: var(--bg-input);
	color: var(--text-primary);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.btn-stop:hover { border-color: var(--danger); }

.btn-stop-square {
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background: var(--danger);
	display: block;
}

/* L'attribut hidden doit gagner contre les règles display des composants */
[hidden] { display: none !important; }