JFIF $ d d 7 * Z qn )ZP 0 !1 A "#a$2Qr D8 a Ri [f \m I ykI w0 c u F c Rı?lO7 к _f˓ [C $殷WF< _W ԣ s Kc ëI zyQy /_LK ℂ ;C",p F A : /] =H ~ , l s / 9 ć: [=/#f ; ) x { ٛE Q )~ = 𘙲r*2~ a _V = ' ku m F D } KYYC )( { * g& f `툪 r y ` = ^ c J. I ]( * `wq 1dđ #̩ ͑ 0 ; H ] u 搂 @:~ ו K L N s h } O I R* 8 :2 ! lD JV o ( 3 = M ( z Ȱ+i *N A r6K n S l ) ! J J Ӂ* % ݉?|D } d5: eP0 R; {$X' x F @ .ÊB {,WJ uQ ɲRI ;9 Q E琯 6 2fT .DU J ;*c P A\IL Nj! J ۱+ O\ ͔ ] ޒ S J ȧ c%A N ol ՎprU L Zԛe r E2= X D Xg VQeӓ k y P7 U* o m Q I s ,K `) 6\G3t?pgjr m ۛجw luGt f h 9uyP 0D;Uڽ"OXl i f $ ) &|ML 0 Z rm1 [ H XP l P R0 'G=i 2N +0 e 2 ]] 9 VT P O 7 h(F * 癈 ' = Q VZD F,d ߬ ~ T X G[ `le 69C R(!S2! P < 0 x < !1AQ "Raq 02Br #S CTb ? Ζ "]mH5WR 7 k.ۛ ! } Q~ + yԏ z |@ T20 S~ K e k *zF f^2X *( @ 8 r ? C I uI|֓>^Ex LgNU Y+{.R Ѫ τV YT D I 6 2 '8Y2 7'\T P.6 d &˦ @V q i |8 -O Ε ] ʔ U= T L 8= ;6c | !qfF3 a ů& ~$ l} 'NW U s$U k^S V : U#6w + +s &r+n ڐ { @ 29gL u " T Ù M=6 (^ "7 r}=6Yݾ lC u hquymp Ǧ G jhs ǜNl ɻ} o 7 #S6 a w 4 ! OS r D 5 7 % | ?x> L | / nD 6?/8 w # [ ) L 7 +6〼T A T g ! %5 Mm Z /c -{1_Je "| ^$ 'O & ޱմ < H vNqϡQ$ < 6 &Nݛ ֨tǻN (9 n ru~'όN sMG& ,uH Kw *Ī 5@ u6 BԒ i YN * f 0 _ GhKW u lT <nj- 0{ M L~ | /a v\ E = ?1 \ɟuq Ђ Y O a K ޡP q $ H8o Q˼EV ~ k 0 h' L Pp M -M" m^ !6l nմ 쮝C U T . ! :vMǨb h ډ Vc r @~p # !1QAa q ? AL0L x LU 4 d ; x " 16ad0 7.\ߋ 0 = P l v/ " c A Ay A|2pO8"d MV #1] = \ " ˡ ] k v I9 d ۓ & q ) ǐq E ꞅ v "P )q X &Q З non]я u ג./ ; gZ$ M QР 2M ]h ni 0 P $ێ 3CɏGjώy : m c # S_ l@ '_ \m|C 2`K _ 1 cIvGc $? PCQ S+D ? K aײ k Fr b 8 ύ NEدg ĝ U 3 6 #Ik+ v { v i ( ވ ? a e) X xy/*@Q Ǽ Ծ ) $ IWO l c G; !i k{ gOŀ L ('x T rb $ w) R $ & N1E td U3Uȉ1p M"N* (DNy d96.(jQ) X 5 c QɎMy W ? Q *!R > 6=7)Xj 5`J ] e 8%t ! + ' ! 1Q 5 !1 AQaq ё #2 "0BRb ? G t^ ## .l lQ T $ v , ,m 㵜5u bV =sY+ @d { N ! dn O < .- B; _w J t 6;Q Jd. Q c%p{ 1 ,sND dF H I0 Гo X ш e黅X ۢ F :)[ F G X ƹ / w _c MeD ,ʡc c . W D tA $ j@ : ) - #u c1< @ۗ9F ) KJ- hpP] _ x [ q B lb p ʖ w q " LFGd ƶ * s +ډ_Zc " ? % t[I P 6 J ]# =ɺ V v v CGs Gh1 > )6 |e y ? L ӣ m,4 G W Ui ` ] uJVo VDG< SB 6ϏQ @ TiU l y O U 0 kfV ~ ~}S Z @ *WU Ui ## ; s /[ = ! 7}" W N ] ' (L ! ~ y5 g9T̅J kbM' +s :S +B) v @ M j e C f j E 0 Y\Qn z G 1 д~ W o{T 9?` Rm yhsy3 !HAD ] m c1 ~ 2 L S u7x T ;j$ `} 4-> L# vzŏ I L S ֭ T { r jGK C ; b pU= - ` Bs K. S F w4 M q] Z dH S 0 ) tLg
/* IA Blog Assistant — Admin Styles */
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
:root {
--bchat-primary: #6366f1;
--bchat-primary-hover: #4f46e5;
--bchat-secondary: #0ea5e9;
--bchat-success: #10b981;
--bchat-warning: #f59e0b;
--bchat-danger: #ef4444;
--bchat-gray: #6b7280;
--bchat-light: #f8fafc;
--bchat-border: #e2e8f0;
--bchat-radius: 15px;
--bchat-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
--bchat-bg: #0f0f0f;
--bchat-bg-card: #181818;
--bchat-bg-hover: #222222;
--bchat-border-dark: #2a2a2a;
--bchat-chamois: #c8a96e;
--bchat-chamois-dim: #8a7048;
--bchat-text: #e8e4dc;
--bchat-text-muted: #9a938a;
--bchat-text-dim: #6e6962;
}
/* ── Layout ── */
.bchat-wrap {
max-width: 1400px;
font-family: 'Albert Sans', "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.bchat-page-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 22px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.bchat-page-title .dashicons { font-size: 26px; color: var(--bchat-primary); }
.bchat-view-toggle { margin-left: auto; display: flex; gap: 6px; }
/* ── Cards ── */
.bchat-card {
background: #fff;
border: 1px solid var(--bchat-border);
border-radius: var(--bchat-radius);
padding: 20px 24px;
margin-bottom: 20px;
box-shadow: var(--bchat-shadow);
}
.bchat-card h2 {
font-size: 16px;
font-weight: 600;
margin: 0 0 16px 0;
padding: 0;
color: #1e293b;
border: none;
}
.bchat-title-icon,
.bchat-tab-icon {
font-size: 16px;
width: 16px;
height: 16px;
margin-right: 6px;
line-height: 1;
vertical-align: text-bottom;
}
/* ── Grids ── */
.bchat-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.bchat-kpi-card {
background: #fff;
border: 1px solid var(--bchat-border);
border-radius: var(--bchat-radius);
padding: 16px;
display: flex;
align-items: center;
gap: 14px;
box-shadow: var(--bchat-shadow);
}
.bchat-kpi-icon { font-size: 24px; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.bchat-kpi-number { font-size: 28px; font-weight: 700; color: #1e293b; display: block; }
.bchat-kpi-label { font-size: 12px; color: var(--bchat-gray); }
.bchat-dashboard-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; }
.bchat-two-col { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; }
/* ── Buttons ── */
.bchat-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
text-decoration: none;
transition: all .15s;
line-height: 1.4;
}
.bchat-btn-primary { background: var(--bchat-primary); color: #fff; border-color: var(--bchat-primary); }
.bchat-btn-primary:hover { background: var(--bchat-primary-hover); color: #fff; }
.bchat-btn-secondary { background: var(--bchat-secondary); color: #fff; border-color: var(--bchat-secondary); }
.bchat-btn-secondary:hover { opacity: .9; color: #fff; }
.bchat-btn-outline { background: #fff; color: #374151; border-color: var(--bchat-border); }
.bchat-btn-outline:hover { background: var(--bchat-light); }
.bchat-btn-danger { background: var(--bchat-danger); color: #fff; border-color: var(--bchat-danger); }
.bchat-btn-danger:hover { opacity: .85; color: #fff; }
.bchat-btn-sm { padding: 5px 10px; font-size: 12px; }
.bchat-btn-xs { padding: 3px 7px; font-size: 11px; }
.bchat-btn-lg { padding: 10px 24px; font-size: 15px; }
.bchat-btn:disabled { opacity: .5; cursor: not-allowed; }
/* ── Forms ── */
.bchat-form-group { margin-bottom: 14px; }
.bchat-form-group label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; color: #374151; }
.bchat-form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.bchat-form-row .bchat-form-group { flex: 1; min-width: 200px; }
.bchat-form-group-half { flex: 1; }
.bchat-form-group-action { display: flex; align-items: flex-end; }
.bchat-input, .bchat-textarea, .bchat-select {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--bchat-border);
border-radius: 6px;
font-size: 13px;
color: #374151;
background: #fff;
box-sizing: border-box;
transition: border-color .15s;
}
.bchat-input:focus, .bchat-textarea:focus, .bchat-select:focus {
border-color: var(--bchat-primary);
outline: none;
box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.bchat-textarea { resize: vertical; }
.bchat-select-sm { width: auto; padding: 4px 8px; font-size: 12px; }
.bchat-select-xs { width: auto; padding: 2px 5px; font-size: 11px; }
.bchat-input-group { display: flex; gap: 8px; }
.bchat-input-group .bchat-input { flex: 1; }
.bchat-char-count { display: block; text-align: right; font-size: 11px; color: var(--bchat-gray); margin-top: 3px; }
.bchat-hint { color: var(--bchat-gray); font-size: 12px; }
.bchat-muted { color: var(--bchat-gray); }
.bchat-required { color: var(--bchat-danger); }
/* ── Tables ── */
.bchat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bchat-table-full { width: 100%; }
.bchat-table th { background: var(--bchat-light); padding: 8px 12px; text-align: left; font-weight: 600; font-size: 12px; color: var(--bchat-gray); border-bottom: 1px solid var(--bchat-border); }
.bchat-table td { padding: 10px 12px; border-bottom: 1px solid var(--bchat-border); vertical-align: middle; }
.bchat-table tr:last-child td { border-bottom: none; }
.bchat-table tr:hover td { background: #fafafa; }
.bchat-actions { /*display: flex;*/ gap: 6px; align-items: center; flex-wrap: wrap; min-width:150px;}
.bchat-empty { text-align: center; color: var(--bchat-gray); padding: 24px; font-style: italic; }
.bchat-link-more { display: block; margin-top: 12px; font-size: 13px; color: var(--bchat-primary); text-decoration: none; }
.bchat-link-small { font-size: 11px; color: var(--bchat-secondary); text-decoration: none; }
/* ── Badges / Status ── */
.bchat-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
}
.bchat-status-pending { background: #fef3c7; color: #92400e; }
.bchat-status-confirmed { background: #d1fae5; color: #065f46; }
.bchat-status-to_review { background: #fee2e2; color: #991b1b; }
.bchat-status-rejected { background: #f3f4f6; color: #374151; }
.bchat-status-generated { background: #dbeafe; color: #1e40af; }
/* ── Kanban ── */
.bchat-kanban {
display: flex;
gap: 16px;
overflow-x: auto;
padding-bottom: 20px;
align-items: flex-start;
}
.bchat-kanban-col {
background: var(--bchat-light);
border: 1px solid var(--bchat-border);
border-radius: var(--bchat-radius);
border-top: 3px solid #ccc;
min-width: 260px;
width: 260px;
flex-shrink: 0;
}
.bchat-kanban-col-header {
padding: 12px 14px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--bchat-border);
}
.bchat-kanban-col-title { font-size: 13px; font-weight: 600; color: #1e293b; }
.bchat-kanban-col-count { background: #ccc; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; }
.bchat-kanban-cards { padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.bchat-kanban-empty { text-align: center; color: var(--bchat-gray); font-size: 12px; padding: 16px; font-style: italic; }
.bchat-kanban-card {
background: #fff;
border: 1px solid var(--bchat-border);
border-radius: 6px;
padding: 10px 12px;
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.bchat-card-lang { font-size: 14px; float: right; }
.bchat-card-topic { font-size: 10px; color: var(--bchat-gray); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.bchat-card-title { font-size: 13px; font-weight: 600; color: #1e293b; margin-bottom: 6px; line-height: 1.4; }
.bchat-card-keyword { margin-bottom: 4px; }
.bchat-keyword-tag { background: #ede9fe; color: #5b21b6; font-size: 10px; padding: 1px 6px; border-radius: 10px; }
.bchat-card-date { font-size: 11px; color: var(--bchat-gray); margin-bottom: 8px; }
.bchat-card-actions { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid #f0f0f0; }
/* ── Filters ── */
.bchat-filters { margin-bottom: 20px; }
.bchat-filter-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* ── Quick actions ── */
.bchat-quick-actions { display: flex; flex-direction: column; gap: 10px; }
/* ── Notices ── */
.bchat-notice {
padding: 10px 14px;
border-radius: 6px;
margin-top: 14px;
font-size: 13px;
}
.bchat-notice-warning { background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; }
.bchat-notice-success { background: #d1fae5; border: 1px solid #6ee7b7; color: #065f46; }
.bchat-notice-error { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; }
/* ── API test ── */
.bchat-api-test-result { margin-top: 6px; font-size: 12px; min-height: 18px; }
.bchat-api-test-result.success { color: var(--bchat-success); }
.bchat-api-test-result.error { color: var(--bchat-danger); }
/* ── Modal ── */
.bchat-modal {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
}
.bchat-modal-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,.5);
backdrop-filter: blur(2px);
}
.bchat-modal-content {
position: relative;
background: #fff;
border-radius: 10px;
box-shadow: 0 20px 60px rgba(0,0,0,.25);
width: 90%;
max-width: 560px;
max-height: 90vh;
overflow-y: auto;
z-index: 1;
}
.bchat-modal-large { max-width: 860px; }
.bchat-modal-header {
padding: 18px 22px;
border-bottom: 1px solid var(--bchat-border);
display: flex;
align-items: center;
justify-content: space-between;
}
.bchat-modal-header h3 { margin: 0; font-size: 16px; }
.bchat-modal-close { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--bchat-gray); padding: 4px; line-height: 1; }
.bchat-modal-body { padding: 20px 22px; }
.bchat-modal-footer { padding: 14px 22px; border-top: 1px solid var(--bchat-border); display: flex; gap: 10px; justify-content: flex-end; }
/* ── Suggestions ── */
.bchat-suggest-controls { margin-bottom: 16px; }
.bchat-suggest-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bchat-suggest-bulk { display: flex; gap: 8px; }
.bchat-suggestion-card {
border: 1px solid var(--bchat-border);
border-radius: 6px;
padding: 12px 14px;
margin-bottom: 8px;
cursor: pointer;
transition: all .15s;
display: flex;
gap: 12px;
align-items: flex-start;
}
.bchat-suggestion-card:hover { border-color: var(--bchat-primary); background: #f5f3ff; }
.bchat-suggestion-card.selected { border-color: var(--bchat-primary); background: #eef2ff; }
.bchat-suggestion-checkbox { margin-top: 2px; flex-shrink: 0; width: 16px; height: 16px; }
.bchat-suggestion-body { flex: 1; }
.bchat-suggestion-title { font-weight: 600; font-size: 13px; color: #1e293b; margin-bottom: 4px; }
.bchat-suggestion-keyword { font-size: 11px; color: #5b21b6; background: #ede9fe; padding: 1px 7px; border-radius: 10px; }
.bchat-suggestion-meta { font-size: 12px; color: var(--bchat-gray); margin-top: 4px; }
.bchat-suggestion-notes { font-size: 11px; color: var(--bchat-gray); margin-top: 3px; font-style: italic; }
/* ── Loading ── */
.bchat-loading-block { text-align: center; padding: 40px; }
.bchat-spinner {
display: inline-block;
width: 32px;
height: 32px;
border: 3px solid #e5e7eb;
border-top-color: var(--bchat-primary);
border-radius: 50%;
animation: bchat-spin .7s linear infinite;
margin-bottom: 14px;
}
.bchat-spinner-lg { width: 48px; height: 48px; border-width: 4px; }
.bchat-spin { animation: bchat-spin .7s linear infinite; display: inline-block; }
@keyframes bchat-spin { to { transform: rotate(360deg); } }
/* ── Generate modal ── */
.bchat-generate-body { text-align: center; padding: 30px; }
.bchat-success-icon { font-size: 48px; margin-bottom: 12px; }
.bchat-error-icon { font-size: 48px; margin-bottom: 12px; }
.bchat-gen-title { font-size: 15px; font-weight: 600; color: #1e293b; margin: 10px 0 20px; }
.bchat-gen-image-prompt { text-align: left; background: var(--bchat-light); border: 1px solid var(--bchat-border); border-radius: 6px; padding: 12px; margin-bottom: 20px; }
.bchat-image-prompt-box { font-size: 13px; color: #374151; margin: 8px 0; font-style: italic; }
/* ── Placeholder images ── */
.bchat-placeholder-image-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px;
border: 1px solid var(--bchat-border);
border-radius: 6px;
margin-bottom: 8px;
}
.bchat-placeholder-image-preview img { border-radius: 4px; object-fit: cover; }
.bchat-placeholder-image-info { flex: 1; display: flex; align-items: center; gap: 10px; }
.bchat-placeholder-image-info span { font-size: 13px; color: #374151; }
/* ── Settings ── */
.bchat-settings-submit { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--bchat-border); }
/* ── Code ── */
code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: 12px; }
/* ── Inline status change ── */
.bchat-inline-status { width: auto; }
/* ══════════════════════════════════════
MODE RAPIDE — Layout 2 colonnes
══════════════════════════════════════ */
.bchat-quick-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: start;
}
.bchat-quick-form-col,
.bchat-quick-live-col { min-width: 0; }
/* ── Live card globale ── */
.bchat-live-card {
position: sticky;
top: 32px;
max-height: calc(100vh - 80px);
overflow: hidden;
display: flex;
flex-direction: column;
padding: 0;
}
/* En-tête sticky avec progress bar */
.bchat-live-header {
padding: 16px 20px 0;
border-bottom: 1px solid var(--bchat-border);
background: #fff;
border-radius: var(--bchat-radius) var(--bchat-radius) 0 0;
flex-shrink: 0;
}
.bchat-live-header-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-bottom: 12px;
}
.bchat-live-header-top > span {
font-size: 15px;
font-weight: 600;
color: #1e293b;
}
.bchat-live-header-actions { display: flex; gap: 6px; align-items: center; }
/* Barre de progression */
.bchat-progress-bar-wrap {
padding-bottom: 12px;
}
.bchat-progress-bar {
height: 4px;
background: #e5e7eb;
border-radius: 4px;
overflow: hidden;
margin-bottom: 6px;
}
.bchat-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--bchat-primary), #818cf8);
border-radius: 4px;
transition: width .5s ease;
}
.bchat-progress-label {
font-size: 11px;
color: var(--bchat-gray);
display: block;
}
/* Corps du live card (scrollable) */
.bchat-live-body {
flex: 1;
overflow-y: auto;
padding: 16px 20px 20px;
}
/* État vide */
.bchat-live-empty-state {
text-align: center;
padding: 48px 24px;
color: var(--bchat-gray);
}
.bchat-live-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: .5; }
/* Sections progressives */
.bchat-live-section { margin-bottom: 16px; animation: bchat-fade-in .4s ease; }
@keyframes bchat-fade-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Titre article */
.bchat-live-article-title {
font-size: 17px !important;
font-weight: 700 !important;
color: #1e293b !important;
line-height: 1.4 !important;
margin: 0 0 8px !important;
padding: 0 !important;
border: none !important;
}
.bchat-live-seo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bchat-seo-chip {
display: inline-flex; align-items: center; gap: 4px;
background: #eef2ff; color: #4338ca;
font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 500;
}
.bchat-seo-chip.meta { background: #f0fdf4; color: #16a34a; }
/* Image à la une */
.bchat-live-featured-img-wrap { border-radius: 8px; overflow: hidden; }
.bchat-img-placeholder {
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
border: 2px dashed #cbd5e1;
}
.bchat-img-placeholder-hero { height: 140px; }
.bchat-img-placeholder-inline { height: 90px; }
.bchat-placeholder-inner {
text-align: center;
color: var(--bchat-gray);
font-size: 12px;
}
.bchat-placeholder-pulse {
width: 36px; height: 36px;
border-radius: 50%;
background: #cbd5e1;
margin: 0 auto 8px;
animation: bchat-pulse-scale 1.4s ease-in-out infinite;
}
@keyframes bchat-pulse-scale {
0%, 100% { transform: scale(.8); opacity: .4; }
50% { transform: scale(1.1); opacity: 1; }
}
.bchat-live-featured-img-real {
width: 100%;
height: 140px;
object-fit: cover;
border-radius: 8px;
display: block;
animation: bchat-fade-in .4s ease;
}
/* Contenu HTML de l'article */
.bchat-live-preview-html {
font-size: 13px;
line-height: 1.75;
color: #374151;
max-height: 400px;
overflow-y: auto;
border: 1px solid var(--bchat-border);
border-radius: 8px;
padding: 14px 16px;
background: #fafafa;
scroll-behavior: smooth;
}
/* Blocs injectés par le typewriter : invisible → visible via transition CSS */
.bchat-tw-block {
opacity: 0;
transform: translateY(5px);
transition: opacity 280ms ease, transform 280ms ease;
}
.bchat-tw-block--visible {
opacity: 1;
transform: translateY(0);
}
/* Images inline insérées par insertImageInPreview */
.bchat-inline-fig {
margin: 12px 0;
animation: bchat-fade-in .5s ease forwards;
}
.bchat-inline-fig img { max-width: 100%; border-radius: 6px; display: block; }
.bchat-live-preview-html h1,
.bchat-live-preview-html h2 { font-size: 14px; font-weight: 700; margin: 10px 0 5px; color: #1e293b; }
.bchat-live-preview-html h3 { font-size: 13px; font-weight: 600; margin: 8px 0 4px; color: #334155; }
.bchat-live-preview-html p { margin: 0 0 7px; }
.bchat-live-preview-html ul,
.bchat-live-preview-html ol { margin: 5px 0 8px 16px; }
.bchat-live-preview-html li { margin-bottom: 3px; }
.bchat-live-preview-html img {
max-width: 100%; border-radius: 6px; margin: 10px 0;
display: block; animation: bchat-fade-in .5s ease;
}
.bchat-live-preview-html table {
width: 100%; border-collapse: collapse; font-size: 12px; margin: 8px 0;
}
.bchat-live-preview-html th,
.bchat-live-preview-html td { border: 1px solid var(--bchat-border); padding: 5px 8px; text-align: left; }
.bchat-live-preview-html th { background: #f1f5f9; font-weight: 600; }
.bchat-img-failed-notice {
font-size: 11px;
color: #92400e;
background: #fef3c7;
border: 1px solid #fde68a;
border-radius: 6px;
padding: 6px 10px;
margin: 4px 0;
}
/* Icône status */
.bchat-live-status-icon { font-size: 14px; }
.bchat-live-status-done { color: #10b981; }
.bchat-live-status-error { color: #ef4444; }
/* ── Responsive ── */
@media (max-width: 1024px) {
.bchat-dashboard-grid,
.bchat-two-col { grid-template-columns: 1fr; }
.bchat-kanban { flex-wrap: nowrap; }
}
@media (max-width: 1100px) {
.bchat-quick-layout { grid-template-columns: 1fr; }
.bchat-live-card { position: static; max-height: none; }
}
/* ── Provider status ── */
.bchat-provider-status {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
background: #fff;
border: 1px solid var(--bchat-border);
border-radius: var(--bchat-radius);
padding: 12px 18px;
margin-bottom: 20px;
box-shadow: var(--bchat-shadow);
}
.bchat-provider-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
border: 1px solid transparent;
}
.bchat-provider-badge.active { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }
.bchat-provider-badge.inactive { background: #f3f4f6; border-color: #d1d5db; color: #9ca3af; }
.bchat-provider-role { font-size: 11px; font-weight: 400; opacity: .8; }
.bchat-notice-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
/* ── Settings redesign ── */
.bchat-settings-shell {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 20px;
align-items: start;
}
.bchat-settings-sidebar {
position: sticky;
top: 32px;
}
.bchat-settings-main { min-width: 0; }
.bchat-settings-toc {
padding: 16px 18px;
}
.bchat-settings-toc-title {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--bchat-gray);
margin-bottom: 12px;
}
.bchat-settings-toc-link {
display: block;
padding: 9px 10px;
border-radius: 8px;
text-decoration: none;
color: #334155;
font-size: 13px;
font-weight: 600;
transition: all .15s;
}
.bchat-settings-toc-link:hover {
background: #eef2ff;
color: var(--bchat-primary);
}
.bchat-settings-section {
margin-bottom: 20px;
scroll-margin-top: 84px;
}
.bchat-settings-hero {
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border-color: #dbe4f0;
}
.bchat-settings-kicker {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--bchat-primary);
margin-bottom: 10px;
}
.bchat-settings-hero-head {
display: flex;
justify-content: space-between;
gap: 18px;
align-items: flex-start;
margin-bottom: 18px;
}
.bchat-settings-hero-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.bchat-settings-pill {
display: inline-flex;
align-items: center;
padding: 6px 10px;
border: 1px solid #dbe4f0;
background: #fff;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
color: #334155;
}
.bchat-settings-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.bchat-settings-metric {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 14px 16px;
}
.bchat-settings-metric-label {
display: block;
font-size: 11px;
color: var(--bchat-gray);
margin-bottom: 4px;
}
.bchat-settings-metric strong {
font-size: 16px;
color: #0f172a;
}
.bchat-settings-subgrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.bchat-settings-stack {
display: grid;
gap: 12px;
margin-top: 12px;
}
.bchat-settings-group {
border: 1px solid #dbe4f0;
background: #f8fbff;
border-radius: 10px;
padding: 14px 16px;
}
.bchat-settings-group-title {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #1d4e89;
margin-bottom: 10px;
}
.bchat-settings-group .bchat-form-row {
margin-bottom: 0;
}
.bchat-settings-group .bchat-form-group {
margin-bottom: 0;
}
/* ── Builder selector ── */
.bchat-builder-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.bchat-builder-card {
border: 2px solid var(--bchat-border);
border-radius: 8px;
padding: 14px;
cursor: pointer;
transition: all .15s;
text-align: center;
display: block;
background: #fff;
position: relative;
}
.bchat-builder-card input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.bchat-builder-card:hover { border-color: var(--bchat-primary); background: #fafafa; }
.bchat-builder-card.selected {
border-color: var(--bchat-primary);
background: #eef2ff;
box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.bchat-builder-card.selected::after {
content: '✓';
position: absolute;
top: 6px;
right: 8px;
font-size: 14px;
color: var(--bchat-primary);
font-weight: 700;
}
.bchat-builder-icon { font-size: 28px; margin-bottom: 6px; }
.bchat-builder-name { font-weight: 700; font-size: 13px; color: #1e293b; margin-bottom: 3px; }
.bchat-builder-desc { font-size: 11px; color: var(--bchat-gray); line-height: 1.4; }
/* ── Page hint ── */
.bchat-page-hint {
margin: 0 0 20px 0;
padding-top: 10px;
font-size: 13px;
color: var(--bchat-gray);
font-style: italic;
}
/* ── Encart explicatif dashboard ── */
.bchat-explainer {
background: linear-gradient(135deg, #eef2ff 0%, #f0fdf4 100%);
border: 1px solid #c7d2fe;
border-radius: 10px;
padding: 20px 24px;
margin-bottom: 24px;
}
.bchat-explainer-title {
font-size: 15px;
font-weight: 700;
color: #1e293b;
margin-bottom: 16px;
}
.bchat-explainer-steps {
display: flex;
align-items: flex-start;
gap: 8px;
flex-wrap: wrap;
}
.bchat-explainer-step {
display: flex;
align-items: flex-start;
gap: 10px;
flex: 1;
min-width: 180px;
background: #fff;
border-radius: 8px;
padding: 12px 14px;
border: 1px solid #e0e7ff;
box-shadow: 0 1px 3px rgba(99,102,241,.08);
}
.bchat-explainer-step-num {
background: var(--bchat-primary);
color: #fff;
font-size: 12px;
font-weight: 700;
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
.bchat-explainer-step-body {
display: flex;
flex-direction: column;
gap: 3px;
}
.bchat-explainer-step-body strong {
font-size: 12px;
color: #1e293b;
line-height: 1.3;
}
.bchat-explainer-step-body span {
font-size: 11px;
color: var(--bchat-gray);
line-height: 1.4;
}
.bchat-explainer-arrow {
font-size: 18px;
color: #a5b4fc;
margin-top: 20px;
flex-shrink: 0;
}
@media (max-width: 900px) {
.bchat-explainer-arrow { display: none; }
.bchat-explainer-steps { flex-direction: column; }
.bchat-explainer-step { min-width: unset; }
}
/* ── Provider blocks (settings) ── */
.bchat-provider-block {
border: 1px solid var(--bchat-border);
border-radius: 8px;
padding: 0;
margin-bottom: 14px;
background: #fbfcfe;
overflow: hidden;
}
.bchat-provider-block-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
cursor: pointer;
list-style: none;
margin: 0;
}
.bchat-provider-block-header::-webkit-details-marker { display: none; }
.bchat-provider-block-main {
display: flex;
flex-direction: column;
gap: 3px;
}
.bchat-provider-block-name {
font-weight: 600;
font-size: 14px;
color: #1e293b;
}
.bchat-provider-block-meta {
font-size: 12px;
color: var(--bchat-gray);
}
.bchat-provider-block-body {
padding: 0 16px 16px;
border-top: 1px solid var(--bchat-border);
}
.bchat-provider-block[open] .bchat-provider-block-header {
background: #fff;
}
/* ── Provider summary ── */
.bchat-provider-summary {
display: flex;
align-items: center;
gap: 16px;
background: #f8fafc;
border: 1px solid var(--bchat-border);
border-radius: 8px;
padding: 12px 16px;
margin-top: 16px;
flex-wrap: wrap;
}
.bchat-provider-summary-item {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 180px;
}
.bchat-provider-summary-item span { font-size: 11px; color: var(--bchat-gray); }
.bchat-provider-summary-item strong{ font-size: 13px; color: #1e293b; }
.bchat-provider-summary-item code { font-size: 11px; background: #e2e8f0; padding: 1px 5px; border-radius: 4px; }
.bchat-provider-summary-sep { font-size: 20px; color: #a5b4fc; flex-shrink: 0; }
@media (max-width: 1100px) {
.bchat-settings-shell {
grid-template-columns: 1fr;
}
.bchat-settings-sidebar {
position: static;
}
.bchat-settings-metrics,
.bchat-settings-subgrid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 782px) {
.bchat-settings-hero-head {
flex-direction: column;
}
.bchat-settings-hero-actions {
justify-content: flex-start;
}
.bchat-settings-metrics,
.bchat-settings-subgrid {
grid-template-columns: 1fr;
}
.bchat-settings-group {
padding: 12px;
}
}
/* ── Count picker ── */
.bchat-count-picker {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.bchat-count-presets {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.bchat-count-preset {
min-width: 32px;
text-align: center;
font-weight: 600;
}
.bchat-count-preset.active {
background: var(--bchat-primary);
color: #fff;
border-color: var(--bchat-primary);
}
.bchat-count-input {
width: 64px !important;
text-align: center;
font-weight: 600;
}
/* ── Bouton régénérer ── */
.bchat-btn-regen {
border-style: dashed;
}
/* ══════════════════════════════════════
PAGE AIDE
══════════════════════════════════════ */
/* Onglets */
.bchat-help-tabs {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-bottom: 20px;
border-bottom: 2px solid var(--bchat-border);
padding-bottom: 0;
}
.bchat-help-tab {
background: none;
border: none;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
color: var(--bchat-gray);
cursor: pointer;
border-radius: 4px 4px 0 0;
transition: all .15s;
}
.bchat-help-tab:hover { color: var(--bchat-primary); background: #f5f3ff; }
.bchat-help-tab.active { color: var(--bchat-primary); border-bottom-color: var(--bchat-primary); font-weight: 600; }
/* Panels */
.bchat-help-panel { display: none; }
.bchat-help-panel.active { display: block; }
.bchat-help-section {
background: #fff;
border: 1px solid var(--bchat-border);
border-radius: var(--bchat-radius);
padding: 24px 28px;
margin-bottom: 20px;
box-shadow: var(--bchat-shadow);
}
.bchat-help-section h2 { font-size: 17px; font-weight: 700; color: #1e293b; margin: 0 0 18px; }
.bchat-help-section h3 { font-size: 14px; font-weight: 600; color: #1e293b; margin: 16px 0 8px; }
.bchat-help-intro { font-size: 13px; color: #374151; margin-bottom: 20px; }
/* Steps démarrage */
.bchat-help-steps { display: flex; flex-direction: column; gap: 14px; }
.bchat-help-step {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 14px 16px;
background: var(--bchat-light);
border-radius: 8px;
border: 1px solid var(--bchat-border);
}
.bchat-help-step-num {
background: var(--bchat-primary);
color: #fff;
font-weight: 700;
font-size: 13px;
min-width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.bchat-help-step-content h3 { font-size: 13px; font-weight: 600; margin: 0 0 5px; color: #1e293b; }
.bchat-help-step-content p { font-size: 13px; color: #374151; margin: 0; line-height: 1.5; }
/* Tip box */
.bchat-help-tip {
background: linear-gradient(135deg, #fffbeb 0%, #fef9c3 100%) !important;
border-color: #fcd34d !important;
}
.bchat-help-tip h3 { color: #92400e; }
.bchat-help-tip p { font-size: 13px; color: #78350f; margin: 0; }
/* API providers */
.bchat-api-provider-block {
border: 1px solid var(--bchat-border);
border-radius: 8px;
margin-bottom: 16px;
overflow: hidden;
}
.bchat-api-provider-header {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--bchat-border);
}
.bchat-api-provider-header.anthropic { background: #eef2ff; }
.bchat-api-provider-header.openai { background: #f0fdf4; }
.bchat-api-provider-header.mistral { background: #fff7ed; }
.bchat-api-provider-header.google { background: #fef2f2; }
.bchat-api-provider-logo { font-size: 20px; }
.bchat-api-provider-header strong { display: block; font-size: 14px; font-weight: 700; color: #1e293b; }
.bchat-api-provider-rec { font-size: 11px; color: var(--bchat-gray); }
.bchat-api-provider-body { padding: 16px; }
.bchat-api-provider-body ol { margin: 0 0 12px 20px; }
.bchat-api-provider-body ol li { font-size: 13px; color: #374151; margin-bottom: 4px; line-height: 1.5; }
.bchat-help-info {
background: #f8fafc;
border: 1px solid var(--bchat-border);
border-radius: 6px;
padding: 10px 14px;
font-size: 12px;
color: #374151;
line-height: 1.6;
}
/* Statuses */
.bchat-help-statuses { display: flex; flex-direction: column; gap: 10px; }
.bchat-help-status { display: flex; align-items: flex-start; gap: 12px; }
.bchat-help-status .bchat-badge { flex-shrink: 0; margin-top: 2px; }
.bchat-help-status p { font-size: 13px; color: #374151; margin: 0; }
/* List */
.bchat-help-list { margin: 0 0 0 20px; }
.bchat-help-list li { font-size: 13px; color: #374151; margin-bottom: 6px; line-height: 1.6; }
/* Builders */
.bchat-help-builders { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.bchat-help-builder-card {
border: 1px solid var(--bchat-border);
border-radius: 8px;
padding: 16px;
background: var(--bchat-light);
}
.bchat-help-builder-icon { font-size: 28px; margin-bottom: 8px; }
.bchat-help-builder-card h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #1e293b; }
.bchat-help-builder-card p { font-size: 12px; color: #374151; margin: 0 0 8px; line-height: 1.5; }
.bchat-help-warning {
background: #fef3c7;
border: 1px solid #fcd34d;
border-radius: 5px;
padding: 7px 10px;
font-size: 11px;
color: #92400e;
margin-top: 8px;
}
/* FAQ */
.bchat-faq-list { display: flex; flex-direction: column; gap: 2px; }
.bchat-faq-item {
border: 1px solid var(--bchat-border);
border-radius: 6px;
overflow: hidden;
margin-bottom: 4px;
}
.bchat-faq-q {
padding: 12px 16px;
font-size: 13px;
font-weight: 600;
color: #1e293b;
cursor: pointer;
background: var(--bchat-light);
display: flex;
align-items: center;
justify-content: space-between;
transition: background .15s;
}
.bchat-faq-q::after { content: '▼'; font-size: 10px; color: var(--bchat-gray); transition: transform .2s; }
.bchat-faq-item.open .bchat-faq-q { background: #eef2ff; color: var(--bchat-primary); }
.bchat-faq-item.open .bchat-faq-q::after { transform: rotate(180deg); }
.bchat-faq-q:hover { background: #f5f3ff; }
.bchat-faq-a {
display: none;
padding: 12px 16px;
font-size: 13px;
color: #374151;
line-height: 1.6;
border-top: 1px solid var(--bchat-border);
background: #fff;
}
.bchat-faq-item.open .bchat-faq-a { display: block; }
@media (max-width: 900px) {
.bchat-help-builders { grid-template-columns: 1fr; }
.bchat-help-tabs { gap: 2px; }
.bchat-help-tab { padding: 6px 10px; font-size: 12px; }
}
/* ══════════════════════════════════════
THEME IVOIRE UNIQUEMENT
══════════════════════════════════════ */
.bchat-wrap {
background: radial-gradient(circle at 12% 8%, #fbf8f2 0%, #f4ede3 45%, #efe6da 100%);
color: #2f2923;
padding: 18px;
border-radius: var(--bchat-radius);
}
.bchat-page-title {
font-family: 'Cormorant Garamond', serif;
font-size: 34px;
font-weight: 600;
color: #2f2923;
letter-spacing: .02em;
}
.bchat-page-title .dashicons {
color: #8b6f4e;
}
.bchat-card,
.bchat-help-section,
.bchat-provider-status,
.bchat-kanban-col,
.bchat-kpi-card,
.bchat-provider-block,
.bchat-provider-summary {
background: #fcf9f4;
border-color: #dfd3c4;
box-shadow: 0 10px 24px rgba(44, 37, 32, .08);
}
.bchat-card h2,
.bchat-help-section h2,
.bchat-help-section h3,
.bchat-builder-name,
.bchat-provider-block-name,
.bchat-gen-title,
.bchat-suggestion-title {
font-family: 'Cormorant Garamond', serif;
letter-spacing: .01em;
color: #2f2923;
}
.bchat-hint,
.bchat-muted,
.bchat-empty,
.bchat-card-date,
.bchat-provider-summary-item span,
.bchat-kpi-label,
.bchat-help-intro,
.bchat-help-step-content p,
.bchat-faq-a,
.bchat-page-hint,
.bchat-suggestion-meta,
.bchat-suggestion-notes {
color: #7a6e65;
}
.bchat-btn,
.bchat-help-tab,
.bchat-card-topic,
.bchat-provider-role {
font-family: 'DM Mono', monospace;
letter-spacing: .08em;
text-transform: uppercase;
}
.bchat-form-group label {
font-family: 'Albert Sans', sans-serif;
letter-spacing: normal;
text-transform: none;
}
.bchat-btn-primary {
background: #8b6f4e;
border-color: #8b6f4e;
color: #fff;
}
.bchat-btn-primary:hover {
background: #765c40;
border-color: #765c40;
color: #fff;
}
.bchat-btn-secondary,
.bchat-btn-outline {
background: #f7f1e8;
color: #3a332d;
border-color: #d9cbba;
}
.bchat-btn-secondary:hover,
.bchat-btn-outline:hover {
background: #efe7db;
border-color: #c8b8a4;
color: #2f2923;
}
.bchat-input,
.bchat-textarea,
.bchat-select,
code {
background: #fffdfa;
color: #2f2923;
border-color: #d9cbba;
}
.bchat-input:focus,
.bchat-textarea:focus,
.bchat-select:focus {
border-color: #8b6f4e;
box-shadow: 0 0 0 3px rgba(139, 111, 78, .16);
}
.bchat-table th {
background: #f4ece0;
color: #7a6e65;
border-bottom-color: #dfd3c4;
font-family: 'DM Mono', monospace;
text-transform: uppercase;
letter-spacing: .08em;
}
.bchat-table td {
color: #2f2923;
border-bottom-color: #e6dbcd;
}
.bchat-table tr:hover td {
background: #f8f2e8;
}
.bchat-link-more,
.bchat-link-small {
color: #8b6f4e;
}
.bchat-kanban-col {
border-top-color: #b89a73;
}
.bchat-kanban-col-title,
.bchat-card-title {
color: #2f2923;
}
.bchat-kanban-card,
.bchat-placeholder-image-row,
.bchat-faq-q,
.bchat-help-step,
.bchat-help-builder-card,
.bchat-help-info,
.bchat-api-provider-block,
.bchat-suggestion-card,
.bchat-builder-card {
background: #fffdfa;
border-color: #dfd3c4;
color: #2f2923;
}
.bchat-builder-card:hover,
.bchat-suggestion-card:hover,
.bchat-faq-q:hover,
.bchat-help-tab:hover {
background: #f5ecdf;
border-color: #cfbca7;
}
.bchat-builder-card.selected,
.bchat-suggestion-card.selected,
.bchat-faq-item.open .bchat-faq-q,
.bchat-help-tab.active {
background: #efe3d1;
border-color: #8b6f4e;
color: #7a6247;
}
.bchat-explainer {
background: linear-gradient(135deg, #fbf7f0 0%, #f1e7d9 100%);
border-color: #ddcfbe;
}
.bchat-explainer-title {
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
color: #2f2923;
}
.bchat-explainer-step {
background: #fffdfa;
border-color: #dfd3c4;
box-shadow: 0 5px 12px rgba(44,37,32,.08);
}
.bchat-explainer-step-num {
background: #576ddd;
color: #fff;
}
.bchat-explainer-step-body strong {
color: #2f2923;
}
.bchat-explainer-step-body span {
color: #7a6e65;
}
.bchat-explainer-arrow,
.bchat-provider-summary-sep {
color: #b89a73;
}
.bchat-notice-warning,
.bchat-notice-success,
.bchat-notice-error,
.bchat-notice-info {
background: #fffdfa;
border-width: 1px;
border-style: solid;
}
.bchat-notice-warning { border-color: #d5b57f; color: #866840; }
.bchat-notice-success { border-color: #8eb59c; color: #3f6b4d; }
.bchat-notice-error { border-color: #d29c9c; color: #8b4e4e; }
.bchat-notice-info { border-color: #a9bdd8; color: #4f6480; }
.bchat-modal-content {
background: #fffdfa;
border: 1px solid #dfd3c4;
color: #2f2923;
}
@media (max-width: 782px) {
.bchat-wrap {
padding: 12px;
}
.bchat-page-title {
font-size: 28px;
}
}
/* ── Settings theme picker ── */
.bchat-theme-picker {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 18px;
}
.bchat-theme-option {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 180px;
padding: 14px;
border: 1px solid var(--bchat-border);
border-radius: 16px;
background: #fff;
cursor: pointer;
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bchat-theme-option:hover {
border-color: #cbd5e1;
transform: translateY(-1px);
}
.bchat-theme-option.is-active {
border-color: #111111;
box-shadow: 0 0 0 3px rgba(17, 17, 17, .08);
}
.bchat-theme-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.bchat-theme-preview {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 38px;
border-radius: 10px;
background: var(--bchat-theme-bg);
border: 1px solid rgba(15, 23, 42, .08);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.bchat-theme-preview-bar {
width: 24px;
height: 4px;
border-radius: 999px;
background: var(--bchat-theme-accent);
}
.bchat-theme-option-title {
font-size: 13px;
font-weight: 600;
color: #111827;
}
.bchat-theme-option-description {
font-size: 12px;
line-height: 1.45;
color: #6b7280;
}
/* ══════════════════════════════════════
THEMES
Sélecteurs doubles :
- html[data-bchat-theme] : posé dès le <head> via JS inline (immédiat, sans flash)
- body.bchat-theme-* : posé par PHP admin_body_class (fallback serveur)
══════════════════════════════════════ */
/* ── WP (natif WordPress) ── */
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) #wpcontent,
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) #wpbody-content {
background: #f0f0f1;
}
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-wrap,
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-wrap * {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
}
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-wrap {
background: unset !important;
}
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-card {
background: #ffffff !important;
border-color: #dcdcde !important;
}
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-provider-status {
background: #ffffff !important;
border: 1px solid #dcdcde !important;
}
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .dashicons,
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .dashicons:before {
color: #154f7e !important;
}
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-textarea {
background: #fefefe !important;
border-color: #dcdcde !important;
}
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-card,
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-kpi-card,
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-help-section,
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-provider-status,
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-kanban-col,
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-provider-block,
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-provider-summary,
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-builder-card,
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-suggestion-card,
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-kanban-card,
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-modal-content {
border-radius: 4px !important;
box-shadow: none !important;
}
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-btn,
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-btn-primary,
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-btn-secondary,
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-btn-outline,
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-btn-danger {
border-radius: 3px !important;
}
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-btn-primary,
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-btn-secondary {
background: #2271b1 !important;
border-color: #2271b1 !important;
color: #ffffff !important;
}
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-btn-primary:hover,
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-btn-secondary:hover {
background: #135e96 !important;
border-color: #135e96 !important;
}
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-btn-outline {
background: #ffffff !important;
border-color: #8c8f94 !important;
color: #1d2327 !important;
}
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .bchat-btn-outline:hover {
background: #f6f7f7 !important;
border-color: #646970 !important;
}
/* ── Ivoire (interface claire ON Blog) ── */
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) #wpcontent,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) #wpbody-content {
background: #f5f5f7;
}
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-wrap {
background: transparent !important;
}
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-wrap,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-wrap * {
font-family: 'Albert Sans', "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
}
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-card,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-help-section,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-provider-status,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-kanban-col,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-kpi-card,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-provider-block,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-provider-summary,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-builder-card,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-suggestion-card,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-kanban-card,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-modal-content {
background: #ffffff !important;
}
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-btn,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-btn-primary,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-btn-secondary,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-btn-outline,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-btn-danger {
background: #111111 !important;
border-color: #111111 !important;
color: #ffffff !important;
border-radius: 25px !important;
}
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-btn:hover,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-btn-primary:hover,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-btn-secondary:hover,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-btn-outline:hover,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-btn-danger:hover {
background: #000000 !important;
border-color: #000000 !important;
color: #ffffff !important;
}
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-wrap,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-card,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-help-section,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-provider-status,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-kanban-col,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-kpi-card,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-provider-block,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-provider-summary,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-builder-card,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-suggestion-card,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-kanban-card,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-modal-content,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-help-step,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-help-builder-card,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-help-info,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-api-provider-block,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-placeholder-image-row,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-faq-q,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-faq-a,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-explainer,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-explainer-step,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-notice-warning,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-notice-success,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-notice-error,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-notice-info,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-input,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-textarea,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-select,
body.bchat-theme-ivoire code {
border-color: #e7e7e7 !important;
}
body.bchat-theme-ivoire .bchat-card,
body.bchat-theme-ivoire .bchat-help-section,
body.bchat-theme-ivoire .bchat-provider-status,
body.bchat-theme-ivoire .bchat-kanban-col,
body.bchat-theme-ivoire .bchat-kpi-card,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-provider-block,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-provider-summary,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-builder-card,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-suggestion-card,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-kanban-card,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-modal-content,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-help-step,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-help-builder-card,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-help-info,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-api-provider-block,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-placeholder-image-row,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-faq-q,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-faq-a,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-explainer,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-explainer-step,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-notice-warning,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-notice-success,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-notice-error,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-notice-info,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-input,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-textarea,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-select,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) code,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-btn-secondary,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-btn-outline {
background: #ffffff !important;
color: #1f1f1f !important;
}
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-table th {
background: transparent !important;
border-bottom-color: #e7e7e7 !important;
color: #6b6b6b !important;
}
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-table td,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-table tr:hover td {
border-bottom-color: #e7e7e7 !important;
background: transparent !important;
color: #1f1f1f !important;
}
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-explainer {
background: #ffffff !important;
}
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-explainer-title {
font-family: 'Albert Sans', "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
color: #1f1f1f !important;
}
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-explainer-arrow,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-provider-summary-sep,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-link-more,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .bchat-link-small {
color: #6b6b6b !important;
}
/* Keep Dashicons glyphs from being overridden by global font rules */
.dashicons,
.bchat-wrap .dashicons {
font-family: dashicons !important;
}
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .dashicons,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .dashicons,
:is(html[data-bchat-theme="wp"], body.bchat-theme-wp) .dashicons:before,
:is(html[data-bchat-theme="ivoire"], body.bchat-theme-ivoire) .dashicons:before,
.bchat-wrap .dashicons:before {
font-family: dashicons !important;
}